Refactor PocketBase client initialization, update HTML template for favicon handling, and remove redundant text in main components for improved clarity and performance in SvelteKit project.
This commit is contained in:
eewing
@@ -21,10 +21,10 @@ export const options = {
|
||||
service_worker: false,
|
||||
service_worker_options: undefined,
|
||||
templates: {
|
||||
app: ({ head, body, assets, nonce, env }) => "<!doctype html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\" />\n <link rel=\"icon\" href=\"" + assets + "/favicon.png\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n " + head + "\n </head>\n <body data-sveltekit-preload-data=\"hover\">\n <div style=\"display: contents\">" + body + "</div>\n </body>\n</html>\n",
|
||||
app: ({ head, body, assets, nonce, env }) => "<!doctype html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\" />\n <link rel=\"icon\" href=\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><rect width='32' height='32' rx='4' fill='%231e293b'/><text x='16' y='22' font-size='18' font-family='system-ui' fill='%2394a3b8' text-anchor='middle'>S</text></svg>\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n " + head + "\n </head>\n <body data-sveltekit-preload-data=\"hover\">\n <div style=\"display: contents\">" + body + "</div>\n </body>\n</html>\n",
|
||||
error: ({ status, message }) => "<!doctype html>\n<html lang=\"en\">\n\t<head>\n\t\t<meta charset=\"utf-8\" />\n\t\t<title>" + message + "</title>\n\n\t\t<style>\n\t\t\tbody {\n\t\t\t\t--bg: white;\n\t\t\t\t--fg: #222;\n\t\t\t\t--divider: #ccc;\n\t\t\t\tbackground: var(--bg);\n\t\t\t\tcolor: var(--fg);\n\t\t\t\tfont-family:\n\t\t\t\t\tsystem-ui,\n\t\t\t\t\t-apple-system,\n\t\t\t\t\tBlinkMacSystemFont,\n\t\t\t\t\t'Segoe UI',\n\t\t\t\t\tRoboto,\n\t\t\t\t\tOxygen,\n\t\t\t\t\tUbuntu,\n\t\t\t\t\tCantarell,\n\t\t\t\t\t'Open Sans',\n\t\t\t\t\t'Helvetica Neue',\n\t\t\t\t\tsans-serif;\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: center;\n\t\t\t\theight: 100vh;\n\t\t\t\tmargin: 0;\n\t\t\t}\n\n\t\t\t.error {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tmax-width: 32rem;\n\t\t\t\tmargin: 0 1rem;\n\t\t\t}\n\n\t\t\t.status {\n\t\t\t\tfont-weight: 200;\n\t\t\t\tfont-size: 3rem;\n\t\t\t\tline-height: 1;\n\t\t\t\tposition: relative;\n\t\t\t\ttop: -0.05rem;\n\t\t\t}\n\n\t\t\t.message {\n\t\t\t\tborder-left: 1px solid var(--divider);\n\t\t\t\tpadding: 0 0 0 1rem;\n\t\t\t\tmargin: 0 0 0 1rem;\n\t\t\t\tmin-height: 2.5rem;\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t}\n\n\t\t\t.message h1 {\n\t\t\t\tfont-weight: 400;\n\t\t\t\tfont-size: 1em;\n\t\t\t\tmargin: 0;\n\t\t\t}\n\n\t\t\t@media (prefers-color-scheme: dark) {\n\t\t\t\tbody {\n\t\t\t\t\t--bg: #222;\n\t\t\t\t\t--fg: #ddd;\n\t\t\t\t\t--divider: #666;\n\t\t\t\t}\n\t\t\t}\n\t\t</style>\n\t</head>\n\t<body>\n\t\t<div class=\"error\">\n\t\t\t<span class=\"status\">" + status + "</span>\n\t\t\t<div class=\"message\">\n\t\t\t\t<h1>" + message + "</h1>\n\t\t\t</div>\n\t\t</div>\n\t</body>\n</html>\n"
|
||||
},
|
||||
version_hash: "10e2644"
|
||||
version_hash: "6si2m4"
|
||||
};
|
||||
|
||||
export async function get_hooks() {
|
||||
|
||||
+1
-1
@@ -2,7 +2,7 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
||||
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><rect width='32' height='32' rx='4' fill='%231e293b'/><text x='16' y='22' font-size='18' font-family='system-ui' fill='%2394a3b8' text-anchor='middle'>S</text></svg>" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
|
||||
+21
-1
@@ -2,4 +2,24 @@ import PocketBase from "pocketbase";
|
||||
|
||||
const POCKETBASE_URL = "https://pocketbase.ccllc.pro";
|
||||
|
||||
export const pb = new PocketBase(POCKETBASE_URL);
|
||||
/** Base URL for API/file URLs; safe to use during SSR. */
|
||||
export const POCKETBASE_BASE_URL = POCKETBASE_URL;
|
||||
|
||||
let _pb: PocketBase | null = null;
|
||||
|
||||
/** PocketBase client — only created in the browser to avoid fetch during SSR. */
|
||||
export function getPb(): PocketBase {
|
||||
if (typeof window === "undefined") {
|
||||
throw new Error("PocketBase client is only available in the browser. Use load/actions for server data.");
|
||||
}
|
||||
if (!_pb) _pb = new PocketBase(POCKETBASE_URL);
|
||||
return _pb;
|
||||
}
|
||||
|
||||
/** Lazy client proxy: baseUrl is safe during SSR; other access creates the client in the browser only. */
|
||||
export const pb = new Proxy({} as PocketBase, {
|
||||
get(_, prop) {
|
||||
if (prop === "baseUrl") return POCKETBASE_BASE_URL;
|
||||
return (getPb() as Record<string, unknown>)[prop as string];
|
||||
},
|
||||
});
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
<script lang="ts">
|
||||
import { browser } from "$app/environment";
|
||||
import { Button } from "$lib/components/ui/button";
|
||||
|
||||
let { data }: { data: { itemsForParent: { id: string; Item: string; SKU: string }[] } } = $props();
|
||||
</script>
|
||||
|
||||
{#if browser}
|
||||
@@ -14,7 +16,6 @@
|
||||
{:else}
|
||||
<main class="flex min-h-screen flex-col items-center justify-center gap-6 p-8">
|
||||
<h1 class="text-2xl font-semibold">Stackq</h1>
|
||||
<p class="text-muted-foreground">Svelte 5 + shadcn-svelte + PocketBase</p>
|
||||
<div class="flex w-full max-w-xs flex-col gap-2">
|
||||
<a href="/items" class="block">
|
||||
<Button class="w-full">Items table</Button>
|
||||
|
||||
@@ -21,7 +21,6 @@
|
||||
|
||||
<main class="flex min-h-screen flex-col items-center justify-center gap-6 p-8">
|
||||
<h1 class="text-2xl font-semibold">Stackq</h1>
|
||||
<p class="text-muted-foreground">Svelte 5 + shadcn-svelte + PocketBase</p>
|
||||
<div class="flex w-full max-w-xs flex-col gap-2">
|
||||
<a href="/items" class="block">
|
||||
<Button class="w-full">Items table</Button>
|
||||
|
||||
@@ -4,13 +4,13 @@
|
||||
import { Label } from "$lib/components/ui/label";
|
||||
import { enhance } from "$app/forms";
|
||||
import { Camera, X } from "@lucide/svelte";
|
||||
import { pb } from "$lib/pocketbase";
|
||||
import { POCKETBASE_BASE_URL } from "$lib/pocketbase";
|
||||
import { UOM_OPTIONS, CATAGORY_OPTIONS, SUB_CATAGORY_OPTIONS } from "$lib/constants/items";
|
||||
import type { StackqItem } from "$lib/types/items";
|
||||
|
||||
const COLLECTION = "Stackq_Items";
|
||||
function itemImageUrl(recordId: string, filename: string): string {
|
||||
return `${pb.baseUrl}/api/files/${COLLECTION}/${recordId}/${filename}`;
|
||||
return `${POCKETBASE_BASE_URL}/api/files/${COLLECTION}/${recordId}/${filename}`;
|
||||
}
|
||||
|
||||
let {
|
||||
|
||||
Reference in New Issue
Block a user