Push some svelte code for pages

src/lib/utils/load_page.ts

@@ -0,0 +1,32 @@
+import { PUBLIC_BUILDERIO_KEY } from "$env/static/public"
+import { fetchOneEntry } from "@builder.io/sdk-svelte"
+import { error } from "@sveltejs/kit"
+import { find_icon_names, load_icons } from "./util"
+
+export async function load_page_data(url: URL, f: typeof fetch) {
+    const content = await fetchOneEntry({
+        model: "page",
+        apiKey: PUBLIC_BUILDERIO_KEY,
+        userAttributes: {
+            urlPath: url.pathname,
+        },
+    })
+
+    if (!url.searchParams.get("builder.preview") && !content) {
+        throw error(404, {
+            message: "Page not found",
+            code: "NOT_FOUND",
+        })
+    }
+
+    const icon_names = new Set<string>()
+
+    find_icon_names(content?.data?.blocks || [], icon_names)
+
+    return {
+        content,
+        icons: await load_icons([...icon_names], f),
+        title: content?.data?.title,
+        description: content?.data?.description,
+    }
+}

src/routes/(site)/(home)/+page.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+import { PUBLIC_BUILDERIO_KEY } from "$env/static/public"
+import ButtonComponent from "$lib/blocks/Button/ButtonComponent"
+import HeadingComponent from "$lib/blocks/Heading/HeadingComponent.js"
+import IconComponent from "$lib/blocks/Icon/IconComponent.js"
+import SpecialComponent from "$lib/blocks/Special/SpecialComponent.js"
+import TagComponent from "$lib/blocks/TagComponent/TagComponent.js"
+import PageHead from "$lib/components/PageHead.svelte"
+import { icons } from "$lib/data/icons.svelte"
+import { Content, isPreviewing } from "@builder.io/sdk-svelte"
+
+let {
+    data,
+} = $props()
+
+Object.assign(icons, data.icons)
+
+</script>
+<PageHead
+    description={data.description}
+    title={data.title || "Untitled Page"}/>
+<main>
+    {#if data.content || isPreviewing()}
+        <Content
+            apiKey={PUBLIC_BUILDERIO_KEY}
+            content={data.content}
+            customComponents={[
+                ButtonComponent,
+                SpecialComponent,
+                TagComponent,
+                HeadingComponent,
+                IconComponent,
+            ]}
+            data={{
+                citizen: false,
+            }}
+            model="page" />
+    {:else}
+        <h1>No Content</h1>
+    {/if}
+</main>

src/routes/(site)/(home)/+page.ts

@@ -0,0 +1,5 @@
+import { load_page_data } from "$lib/utils/load_page.js"
+
+export async function load({ url, fetch }) {
+    return load_page_data(url, fetch)
+}

src/routes/(site)/+layout.svelte

@@ -30,6 +30,36 @@ afterNavigate(() => {
     })
 })
 
+import { register } from "@builder.io/sdk-svelte"
+
+register("editor.settings", {
+    designTokens: {
+        colors: [
+            { name: "Foreground", value: "var(--foreground)" },
+            { name: "Foreground 65", value: "rgba(var(--foreground-rgb), 0.65)"},
+            { name: "Foreground 10", value: "rgba(var(--foreground-rgb), 0.1)"},
+            { name: "Foreground 05", value: "rgba(var(--foreground-rgb), 0.05)"},
+            { name: "Background", value: "var(--background)" },
+            { name: "Brand", value: "var(--brand)" },
+            { name: "Brand RGB", value: "var(--brand-rgb)" },
+        ],
+        spacing: [
+            { name: "Padding Small", value: "8px" },
+            { name: "Padding Medium", value: "16px" },
+            { name: "Padding Large", value: "24px" },
+            { name: "Padding Extra Large", value: "32px" },
+        ],
+        fontFamily: false,
+        maxWidth: [
+            { name: "Text", value: "600px" },
+            { name: "Container", value: "1200px" },
+        ],
+        border: [
+            { name: "Border", value: "1px solid rgba(var(--foreground-rgb), 0.1)" },
+        ]
+    },
+})
+
 </script>
 
 <svelte:head>

src/routes/(site)/[...page]/+page.svelte

@@ -9,35 +9,6 @@ import PageHead from "$lib/components/PageHead.svelte"
 import { icons } from "$lib/data/icons.svelte"
 import { Content, isPreviewing } from "@builder.io/sdk-svelte"
 
-import { register } from "@builder.io/sdk-svelte"
-
-register("editor.settings", {
-    designTokens: {
-        colors: [
-            { name: "Foreground", value: "var(--foreground)" },
-            { name: "Foreground 65", value: "rgba(var(--foreground-rgb), 0.65)"},
-            { name: "Background", value: "var(--background)" },
-            { name: "Brand", value: "var(--brand)" },
-            { name: "Brand RGB", value: "var(--brand-rgb)" },
-        ],
-        spacing: [
-            { name: "Padding Small", value: "8px" },
-            { name: "Padding Medium", value: "16px" },
-            { name: "Padding Large", value: "24px" },
-            { name: "Padding Extra Large", value: "32px" },
-        ],
-        fontFamily: false,
-        maxWidth: [
-            { name: "Text", value: "600px" },
-            { name: "Container", value: "1200px" },
-        ],
-        border: [
-            { name: "Border", value: "1px solid rgba(var(--foreground-rgb), 0.1)" },
-        ]
-    },
-})
-
-
 let {
     data,
 } = $props()
@@ -60,6 +31,9 @@ Object.assign(icons, data.icons)
                 HeadingComponent,
                 IconComponent,
             ]}
+            data={{
+                citizen: false,
+            }}
             model="page" />
     {:else}
         <h1>No Content</h1>

src/routes/(site)/[...page]/+page.ts

@@ -1,33 +1,5 @@
-import { PUBLIC_BUILDERIO_KEY } from "$env/static/public"
-import { fetchOneEntry } from "@builder.io/sdk-svelte"
-import { error } from "@sveltejs/kit"
-import { find_icon_names, load_icons } from "./util.js"
+import { load_page_data } from "$lib/utils/load_page.js"
 
 export async function load({ url, fetch }) {
-    // fetch your Builder content
-    const content = await fetchOneEntry({
-        model: "page",
-        apiKey: PUBLIC_BUILDERIO_KEY,
-        userAttributes: {
-            urlPath: url.pathname,
-        },
-    })
-
-    if (!url.searchParams.get("builder.preview") && !content) {
-        throw error(404, {
-            message: "Page not found",
-            code: "NOT_FOUND",
-        })
-    }
-
-    const icon_names = new Set<string>()
-
-    find_icon_names(content?.data?.blocks || [], icon_names)
-
-    return {
-        content,
-        icons: await load_icons([...icon_names], fetch),
-        title: content?.data?.title,
-        description: content?.data?.description,
-    }
+    return load_page_data(url, fetch)
 }

src/routes/+layout.svelte

@@ -40,6 +40,9 @@ afterNavigate(() => {
     flex: 1;
     display: flex;
     flex-direction: column;
+    max-height: 100%;
+    height: 100%;
+    overflow-y: auto;
 }
 
 .light_mode {

svelte.config.js

@@ -16,3 +16,4 @@ const config = {
 }
 
 export default config
+