[PIE-5] Switch to AstroJS #4

Merged
breadone merged 3 commits from PIE-5 into main 2025-08-12 16:22:41 +12:00
26 changed files with 5160 additions and 3259 deletions
Showing only changes of commit b00404125c - Show all commits

2
.gitignore vendored
View File

@ -5,7 +5,7 @@ node_modules
.vercel
.netlify
.wrangler
/.svelte-kit
/.astro
/build
/data

1
.npmrc
View File

@ -1 +0,0 @@
engine-strict=true

View File

@ -1,9 +0,0 @@
# Package Managers
package-lock.json
pnpm-lock.yaml
yarn.lock
bun.lock
bun.lockb
# Miscellaneous
/static/

View File

@ -1,19 +0,0 @@
{
"useTabs": true,
"singleQuote": true,
"trailingComma": "none",
"printWidth": 100,
"plugins": [
"prettier-plugin-svelte",
"prettier-plugin-tailwindcss"
],
"overrides": [
{
"files": "*.svelte",
"options": {
"parser": "svelte"
}
}
],
"tailwindStylesheet": "./src/app.css"
}

12
astro.config.mjs Normal file
View File

@ -0,0 +1,12 @@
// @ts-check
import { defineConfig } from 'astro/config';
import node from '@astrojs/node';
// https://astro.build/config
export default defineConfig({
output: 'server',
adapter: node({
mode: 'standalone'
})
});

7709
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -1,35 +1,16 @@
{
"name": "recipie",
"private": true,
"version": "0.0.1",
"type": "module",
"scripts": {
"dev": "vite dev",
"build": "vite build",
"preview": "vite preview",
"prepare": "svelte-kit sync || echo ''",
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
"format": "prettier --write .",
"lint": "prettier --check ."
},
"devDependencies": {
"@sveltejs/adapter-node": "^5.2.12",
"@sveltejs/kit": "^2.22.0",
"@sveltejs/vite-plugin-svelte": "^6.0.0",
"@tailwindcss/forms": "^0.5.9",
"@tailwindcss/typography": "^0.5.15",
"@tailwindcss/vite": "^4.0.0",
"prettier": "^3.4.2",
"prettier-plugin-svelte": "^3.3.3",
"prettier-plugin-tailwindcss": "^0.6.11",
"svelte": "^5.0.0",
"svelte-check": "^4.0.0",
"tailwindcss": "^4.0.0",
"typescript": "^5.0.0",
"vite": "^7.0.4"
},
"dependencies": {
"pocketbase": "^0.26.2"
}
"name": "astro-pb",
"type": "module",
"version": "0.0.1",
"scripts": {
"dev": "astro dev",
"build": "astro build",
"preview": "astro preview",
"astro": "astro"
},
"dependencies": {
"@astrojs/node": "^9.4.0",
"astro": "^5.12.9",
"pocketbase": "^0.26.2"
}
}

9
public/favicon.svg Normal file
View File

@ -0,0 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
<path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
<style>
path { fill: #000; }
@media (prefers-color-scheme: dark) {
path { fill: #FFF; }
}
</style>
</svg>

After

Width:  |  Height:  |  Size: 749 B

View File

@ -1,3 +0,0 @@
@import 'tailwindcss';
@plugin '@tailwindcss/forms';
@plugin '@tailwindcss/typography';

13
src/app.d.ts vendored
View File

@ -1,13 +0,0 @@
// See https://svelte.dev/docs/kit/types#app.d.ts
// for information about these interfaces
declare global {
namespace App {
// interface Error {}
// interface Locals {}
// interface PageData {}
// interface PageState {}
// interface Platform {}
}
}
export {};

View File

@ -1,11 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>

View File

@ -0,0 +1,9 @@
---
---
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>Astro</title>

4
src/data/pocketbase.ts Normal file
View File

@ -0,0 +1,4 @@
import Pocketbase from "pocketbase"
export const client = new Pocketbase(import.meta.env.PUBLIC_PB_URL)
// export const client = new Pocketbase("http://localhost:8080")

14
src/layouts/base.astro Normal file
View File

@ -0,0 +1,14 @@
---
import BaseHead from "../components/BaseHead.astro";
---
<html lang=en>
<head>
<BaseHead title="Recipie" />
</head>
<body>
<main id="main" class="flex-1">
<slot />
</main>
</body>
</html>

View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="107" height="128" viewBox="0 0 107 128"><title>svelte-logo</title><path d="M94.157 22.819c-10.4-14.885-30.94-19.297-45.792-9.835L22.282 29.608A29.92 29.92 0 0 0 8.764 49.65a31.5 31.5 0 0 0 3.108 20.231 30 30 0 0 0-4.477 11.183 31.9 31.9 0 0 0 5.448 24.116c10.402 14.887 30.942 19.297 45.791 9.835l26.083-16.624A29.92 29.92 0 0 0 98.235 78.35a31.53 31.53 0 0 0-3.105-20.232 30 30 0 0 0 4.474-11.182 31.88 31.88 0 0 0-5.447-24.116" style="fill:#ff3e00"/><path d="M45.817 106.582a20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.503 18 18 0 0 1 .624-2.435l.49-1.498 1.337.981a33.6 33.6 0 0 0 10.203 5.098l.97.294-.09.968a5.85 5.85 0 0 0 1.052 3.878 6.24 6.24 0 0 0 6.695 2.485 5.8 5.8 0 0 0 1.603-.704L69.27 76.28a5.43 5.43 0 0 0 2.45-3.631 5.8 5.8 0 0 0-.987-4.371 6.24 6.24 0 0 0-6.698-2.487 5.7 5.7 0 0 0-1.6.704l-9.953 6.345a19 19 0 0 1-5.296 2.326 20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.502 17.99 17.99 0 0 1 8.13-12.052l26.081-16.623a19 19 0 0 1 5.3-2.329 20.72 20.72 0 0 1 22.237 8.243 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-.624 2.435l-.49 1.498-1.337-.98a33.6 33.6 0 0 0-10.203-5.1l-.97-.294.09-.968a5.86 5.86 0 0 0-1.052-3.878 6.24 6.24 0 0 0-6.696-2.485 5.8 5.8 0 0 0-1.602.704L37.73 51.72a5.42 5.42 0 0 0-2.449 3.63 5.79 5.79 0 0 0 .986 4.372 6.24 6.24 0 0 0 6.698 2.486 5.8 5.8 0 0 0 1.602-.704l9.952-6.342a19 19 0 0 1 5.295-2.328 20.72 20.72 0 0 1 22.237 8.242 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-8.13 12.053l-26.081 16.622a19 19 0 0 1-5.3 2.328" style="fill:#fff"/></svg>

Before

Width:  |  Height:  |  Size: 1.5 KiB

View File

@ -1 +0,0 @@
// place files you want to import through the `$lib` alias in this folder.

View File

@ -1,284 +0,0 @@
// Adapted from https://github.com/spinspire/pocketbase-sveltekit-starter
import PocketBase, { type AuthProviderInfo, RecordService } from "pocketbase";
import type {
AuthModel,
ListResult,
RecordListOptions,
RecordModel,
UnsubscribeFunc,
} from "pocketbase";
import { readable, type Readable, type Subscriber } from "svelte/store";
import { browser } from "$app/environment";
import { PUBLIC_PB_URL } from "$env/static/public";
import { base } from "$app/paths";
import { invalidateAll } from "$app/navigation";
import type { TypedPocketBase } from "./pocketbase-types"; // npx pocketbase-typegen --url http://localhost:8080 --email admin@example.com --password 'secret-password'
// import {
// startAuthentication,
// startRegistration,
// } from "@simplewebauthn/browser";
// import { alerts } from "$lib/components/Alerts.svelte";
export const client = new PocketBase(PUBLIC_PB_URL) as TypedPocketBase;
export const authModel = readable<AuthModel | null>(
null,
function (set, update) {
client.authStore.onChange((token, model) => {
update((oldval) => {
if (
(oldval?.isValid && !model?.isValid) ||
(!oldval?.isValid && model?.isValid)
) {
// if the auth changed, invalidate all page load data
invalidateAll();
}
return model;
});
}, true);
}
);
export async function login(
email: string,
password: string,
register = false,
rest: { [key: string]: any } = {}
) {
if (register) {
const user = { ...rest, email, password, confirmPassword: password };
await client.collection("users").create({ ...user, metadata: {} });
}
await client.collection("users").authWithPassword(email, password);
}
// export async function webauthnRegister(
// usernameOrEmail: string
// ): Promise<void | Error> {
// try {
// const resp = await fetch(
// `/api/webauthn/registration-options?usernameOrEmail=${usernameOrEmail}`
// );
// if (!resp.ok) {
// const text = await resp.text();
// throw new Error(text);
// }
// const { publicKey: optionsJSON } = await resp.json();
// let attResp = await startRegistration({ optionsJSON });
// const res = await fetch(`/api/webauthn/register`, {
// method: "POST",
// headers: {
// "Content-Type": "application/json",
// },
// body: JSON.stringify({ ...attResp, usernameOrEmail }),
// });
// if (!res.ok) throw new Error("Failed to register");
// alerts.success("Passkey registered successfully.");
// } catch (e) {
// if (e instanceof Error) {
// if (e.name === "NotAllowedError") {
// alerts.error("Registration denied or timed out.");
// }
// console.error(e);
// }
// }
// }
// export async function webauthnLogin(usernameOrEmail: string) {
// try {
// const resp = await fetch(
// `/api/webauthn/login-options?usernameOrEmail=${usernameOrEmail}`
// );
// if (!resp.ok) {
// const text = await resp.text();
// throw new Error(text);
// }
// const { publicKey: optionsJSON } = await resp.json();
// let asseResp = await startAuthentication({ optionsJSON });
// const res = await fetch(`/api/webauthn/login`, {
// method: "POST",
// headers: {
// "Content-Type": "application/json",
// },
// body: JSON.stringify({ ...asseResp, usernameOrEmail }),
// });
// const authResponse = await res.json();
// if (!res.ok) throw new Error("Failed to login");
// client.authStore.save(authResponse.token, authResponse.record);
// } catch (e) {
// if (e instanceof Error) {
// if (e.name === "NotAllowedError") {
// alerts.error("Registration denied or timed out.");
// } else {
// alerts.error(e.message);
// }
// console.error(e);
// }
// }
// }
export function logout() {
client.authStore.clear();
}
/*
* Save (create/update) a record (a plain object). Automatically converts to
* FormData if needed.
*/
export async function save<T>(collection: string, record: any, create = false) {
// convert obj to FormData in case one of the fields is instanceof FileList
const data = object2formdata(record);
if (record.id && !create) {
// "create" flag overrides update
return await client.collection(collection).update<T>(record.id, data);
} else {
return await client.collection(collection).create<T>(data);
}
}
// convert obj to FormData in case one of the fields is instanceof FileList
function object2formdata(obj: {}) {
// check if any field's value is an instanceof FileList
if (
!Object.values(obj).some(
(val) => val instanceof FileList || val instanceof File
)
) {
// if not, just return the original object
return obj;
}
// otherwise, build FormData (multipart/form-data) from obj
const fd = new FormData();
for (const [key, val] of Object.entries(obj)) {
if (val instanceof FileList) {
for (const file of val) {
fd.append(key, file);
}
} else if (val instanceof File) {
// handle File before "object" so that it doesn't get serialized as JSON
fd.append(key, val);
} else if (Array.isArray(val)) {
// for some reason, multipart/form-data wants arrays to be comma-separated strings
fd.append(key, val.join(","));
} else if (typeof val === "object") {
fd.append(key, JSON.stringify(val));
} else {
fd.append(key, val as any);
}
}
return fd;
}
export interface PageStore<T = any> extends Readable<ListResult<T>> {
setPage(newpage: number): Promise<void>;
next(): Promise<void>;
prev(): Promise<void>;
}
export async function watch<T extends RecordModel>(
idOrName: string,
queryParams = {} as RecordListOptions,
page = 1,
perPage = 20,
realtime = browser
): Promise<PageStore<T>> {
const collection = client.collection(idOrName);
let result = await collection.getList<T>(page, perPage, queryParams);
let set: Subscriber<ListResult<T>>;
let unsubRealtime: UnsubscribeFunc | undefined;
// fetch first page
const store = readable<ListResult<T>>(result, (_set) => {
set = _set;
// watch for changes (only if you're in the browser)
if (realtime)
collection
.subscribe<T>(
"*",
({ action, record }) => {
(async function (action: string) {
// see https://github.com/pocketbase/pocketbase/discussions/505
switch (action) {
// ISSUE: no subscribe event when a record is modified and no longer fits the "filter"
// @see https://github.com/pocketbase/pocketbase/issues/4717
case "update":
case "create":
// record = await expand(queryParams.expand, record);
const index = result.items.findIndex(
(r) => r.id === record.id
);
// replace existing if found, otherwise append
if (index >= 0) {
result.items[index] = record;
return result.items;
} else {
return [...result.items, record];
}
case "delete":
return result.items.filter((item) => item.id !== record.id);
}
return result.items;
})(action).then((items) => set((result = { ...result, items })));
},
queryParams
)
// remember for later
.then((unsub) => (unsubRealtime = unsub));
});
async function setPage(newpage: number) {
const { page, totalPages, perPage } = result;
if (page > 0 && page <= totalPages) {
set((result = await collection.getList(newpage, perPage, queryParams)));
}
}
return {
...store,
subscribe(run, invalidate) {
const unsubStore = store.subscribe(run, invalidate);
return async () => {
unsubStore();
// ISSUE: Technically, we should AWAIT here, but that will slow down navigation UX.
if (unsubRealtime) /* await */ unsubRealtime();
};
},
setPage,
async next() {
setPage(result.page + 1);
},
async prev() {
setPage(result.page - 1);
},
};
}
// export async function providerLogin(
// provider: AuthProviderInfo,
// authCollection: RecordService
// ) {
// const authResponse = await authCollection.authWithOAuth2({
// provider: provider.name,
// createData: {
// // emailVisibility: true,
// },
// });
// // update user "record" if "meta" has info it doesn't have
// const { meta, record } = authResponse;
// let changes = {} as { [key: string]: any };
// if (!record.name && meta?.name) {
// changes.name = meta.name;
// }
// if (!record.avatar && meta?.avatarUrl) {
// const response = await fetch(meta.avatarUrl);
// if (response.ok) {
// const type = response.headers.get("content-type") ?? "image/jpeg";
// changes.avatar = new File([await response.blob()], "avatar", { type });
// }
// }
// if (Object.keys(changes).length) {
// authResponse.record = await save(authCollection.collectionIdOrName, {
// ...record,
// ...changes,
// });
// }
// return authResponse;
// }

View File

@ -1,158 +0,0 @@
/**
* This file was @generated using pocketbase-typegen
*/
import type PocketBase from 'pocketbase'
import type { RecordService } from 'pocketbase'
export enum Collections {
Authorigins = "_authOrigins",
Externalauths = "_externalAuths",
Mfas = "_mfas",
Otps = "_otps",
Superusers = "_superusers",
Recipes = "recipes",
Users = "users",
}
// Alias types for improved usability
export type IsoDateString = string
export type RecordIdString = string
export type HTMLString = string
type ExpandType<T> = unknown extends T
? T extends unknown
? { expand?: unknown }
: { expand: T }
: { expand: T }
// System fields
export type BaseSystemFields<T = unknown> = {
id: RecordIdString
collectionId: string
collectionName: Collections
} & ExpandType<T>
export type AuthSystemFields<T = unknown> = {
email: string
emailVisibility: boolean
username: string
verified: boolean
} & BaseSystemFields<T>
// Record types for each collection
export type AuthoriginsRecord = {
collectionRef: string
created?: IsoDateString
fingerprint: string
id: string
recordRef: string
updated?: IsoDateString
}
export type ExternalauthsRecord = {
collectionRef: string
created?: IsoDateString
id: string
provider: string
providerId: string
recordRef: string
updated?: IsoDateString
}
export type MfasRecord = {
collectionRef: string
created?: IsoDateString
id: string
method: string
recordRef: string
updated?: IsoDateString
}
export type OtpsRecord = {
collectionRef: string
created?: IsoDateString
id: string
password: string
recordRef: string
sentTo?: string
updated?: IsoDateString
}
export type SuperusersRecord = {
created?: IsoDateString
email: string
emailVisibility?: boolean
id: string
password: string
tokenKey: string
updated?: IsoDateString
verified?: boolean
}
export type RecipesRecord = {
created?: IsoDateString
desc?: string
id: string
name?: string
servings?: number
updated?: IsoDateString
}
export type UsersRecord = {
avatar?: string
created?: IsoDateString
email: string
emailVisibility?: boolean
id: string
name?: string
password: string
tokenKey: string
updated?: IsoDateString
verified?: boolean
}
// Response types include system fields and match responses from the PocketBase API
export type AuthoriginsResponse<Texpand = unknown> = Required<AuthoriginsRecord> & BaseSystemFields<Texpand>
export type ExternalauthsResponse<Texpand = unknown> = Required<ExternalauthsRecord> & BaseSystemFields<Texpand>
export type MfasResponse<Texpand = unknown> = Required<MfasRecord> & BaseSystemFields<Texpand>
export type OtpsResponse<Texpand = unknown> = Required<OtpsRecord> & BaseSystemFields<Texpand>
export type SuperusersResponse<Texpand = unknown> = Required<SuperusersRecord> & AuthSystemFields<Texpand>
export type RecipesResponse<Texpand = unknown> = Required<RecipesRecord> & BaseSystemFields<Texpand>
export type UsersResponse<Texpand = unknown> = Required<UsersRecord> & AuthSystemFields<Texpand>
// Types containing all Records and Responses, useful for creating typing helper functions
export type CollectionRecords = {
_authOrigins: AuthoriginsRecord
_externalAuths: ExternalauthsRecord
_mfas: MfasRecord
_otps: OtpsRecord
_superusers: SuperusersRecord
recipes: RecipesRecord
users: UsersRecord
}
export type CollectionResponses = {
_authOrigins: AuthoriginsResponse
_externalAuths: ExternalauthsResponse
_mfas: MfasResponse
_otps: OtpsResponse
_superusers: SuperusersResponse
recipes: RecipesResponse
users: UsersResponse
}
// Type for usage with type asserted PocketBase instance
// https://github.com/pocketbase/js-sdk#specify-typescript-definitions
export type TypedPocketBase = PocketBase & {
collection(idOrName: '_authOrigins'): RecordService<AuthoriginsResponse>
collection(idOrName: '_externalAuths'): RecordService<ExternalauthsResponse>
collection(idOrName: '_mfas'): RecordService<MfasResponse>
collection(idOrName: '_otps'): RecordService<OtpsResponse>
collection(idOrName: '_superusers'): RecordService<SuperusersResponse>
collection(idOrName: 'recipes'): RecordService<RecipesResponse>
collection(idOrName: 'users'): RecordService<UsersResponse>
}

16
src/pages/index.astro Normal file
View File

@ -0,0 +1,16 @@
---
import PageLayout from "@/layouts/base"
import { client } from "@/data/pocketbase"
const reccies = await client.collection("recipes").getFullList()
---
<PageLayout>
hello
{
reccies.map(rec => (
<p>{rec.name}</p>
))
}
</PageLayout>

View File

@ -1,12 +0,0 @@
<script lang="ts">
import '../app.css';
import favicon from '$lib/assets/favicon.svg';
let { children } = $props();
</script>
<svelte:head>
<link rel="icon" href={favicon} />
</svelte:head>
{@render children?.()}

View File

@ -1,16 +0,0 @@
<script lang="ts">
import { client } from "$lib/pocketbase";
const { data } = $props()
const recipes = $derived(data.recipes)
</script>
<h1>Welcome to SvelteKit</h1>
<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
{#each $recipes.items as item}
{item.name} <br>
{item.desc}
{/each}

View File

@ -1,18 +0,0 @@
import { client, watch } from "$lib/pocketbase";
import type { RecipesResponse } from "$lib/pocketbase/pocketbase-types";
import type { PageLoad } from "./$types";
export const load: PageLoad = async ({ parent, fetch }) => {
// const filter = client.filter("user != ''", {});
const expand = "user";
const queryParams = {
// filter,
expand,
fetch,
};
const recipes = await watch<RecipesResponse<any>>("recipes", queryParams);
return {
recipes,
};
};

View File

@ -1,3 +0,0 @@
# allow crawling everything by default
User-agent: *
Disallow:

View File

@ -1,12 +0,0 @@
import adapter from '@sveltejs/adapter-node';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
/** @type {import('@sveltejs/kit').Config} */
const config = {
// Consult https://svelte.dev/docs/kit/integrations
// for more information about preprocessors
preprocess: vitePreprocess(),
kit: { adapter: adapter() }
};
export default config;

View File

@ -1,19 +1,14 @@
{
"extends": "./.svelte-kit/tsconfig.json",
"compilerOptions": {
"allowJs": true,
"checkJs": true,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"resolveJsonModule": true,
"skipLibCheck": true,
"sourceMap": true,
"strict": true,
"moduleResolution": "bundler"
}
// Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
// except $lib which is handled by https://svelte.dev/docs/kit/configuration#files
//
// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
// from the referenced tsconfig.json - TypeScript does not merge them in
"extends": "astro/tsconfigs/strict",
"include": [".astro/types.d.ts", "**/*"],
"exclude": ["dist"],
"compilerOptions": {
"paths": {
"@/components/*": ["src/components/*.astro"],
"@/layouts/*": ["src/layouts/*.astro"],
"@/utils": ["src/utils/index.ts"],
"@/data/*": ["src/data/*"],
"@/site-config": ["src/site.config.ts"]
}
}
}

View File

@ -1,7 +0,0 @@
import tailwindcss from '@tailwindcss/vite';
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';
export default defineConfig({
plugins: [tailwindcss(), sveltekit()]
});