Switch to Lume's built-in component system for better reload support

wuespace · Jun 5, 2024 · 176a896 · 176a896
1 parent 4683bc6
commit 176a896
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 20 deletions.
diff --git a/_components/Aside.tsx b/_components/Aside.tsx
@@ -1,12 +1,27 @@
-import { clsx } from "@nick/clsx";
-import { MetadataSchema } from "../lib/metadata.ts";
+import {clsx} from "@nick/clsx";
+import {z} from "https://deno.land/x/[email protected]/mod.ts";
+import {MetadataSchema} from "../lib/metadata.ts";
 
 export interface AsideProps {
   data: Lume.Data;
   hide?: boolean;
 }
 
-export function Aside({ data, hide }: AsideProps) {
+const PropsSchema = z.object({
+  data: z.object({
+    url: z.string(),
+    page: z.object({
+      data: z.object({
+        vos: z.record(z.string(), MetadataSchema),
+      }),
+    }),
+  }),
+  hide: z.boolean().default(false),
+});
+
+export default function (props: z.input<typeof PropsSchema>) {
+  const {data, hide} = PropsSchema.parse(props);
+
   const liStyle = (targetUrl: string) =>
     clsx(
       "block p-3 hover:bg-gray-100",
@@ -15,7 +30,7 @@ export function Aside({ data, hide }: AsideProps) {
 
   return (
     <aside className={asideClass(hide ?? false)}>
-      <a href="/">
+      <a href="/" className="block">
         <img
           src="/assets/logo.svg"
           alt="WüSpace"

diff --git a/_components/Preview.tsx b/_components/Preview.tsx
@@ -1,6 +1,4 @@
-export interface PreviewProps {
-  src: string;
-}
+import {z} from "https://deno.land/x/[email protected]/mod.ts";
 
 export interface PreviewOptions {
   page?: number;
@@ -20,7 +18,13 @@ function buildViewerUrl(src: string, options: PreviewOptions = defaultOptions) {
   return `/pdfjs/web/viewer.html?file=${encodedSrc}#zoom=${zoom}&page=${page}&pagemode=${pagemode}`;
 }
 
-export function Preview({ src }: PreviewProps) {
+const PropsSchema = z.object({
+  src: z.string(),
+});
+
+export default function (props: z.input<typeof PropsSchema>) {
+  const {src} = PropsSchema.parse(props);
+
   return (
     <iframe
       src={buildViewerUrl(src)}

diff --git a/_includes/index.tsx b/_includes/index.tsx
@@ -1,11 +1,11 @@
-export default function({content, title}: Lume.Data, helpers: Lume.Helpers) {
+export default function ({children, title}: Lume.Data, helpers: Lume.Helpers) {
 	return <html>
 		<head>
 			<title>{title}</title>
 			<link rel="stylesheet" href={helpers.url('/styles.css')} />
 		</head>
 		<body className="flex w-full h-full">
-			{content}
+			{children}
 			<script src={helpers.url("/assets/main.js")}></script>
 		</body>
 	</html>

diff --git a/_includes/vo.tsx b/_includes/vo.tsx
@@ -1,13 +1,11 @@
-import { Aside } from "../_components/Aside.tsx";
-import { Preview } from "../_components/Preview.tsx";
-
 export const layout = "index.tsx";
+
 export default function (data: Lume.Data) {
   return (
     <>
-      <Aside data={data} hide />
+      <data.comp.Aside data={data} hide />
       <main className="flex-1">
-        <Preview src={data.content as string} />
+        <data.comp.Preview src={data.content?.toString()} />
       </main>
     </>
   );

diff --git a/index.tsx b/index.tsx
@@ -1,16 +1,13 @@
-import { Aside } from "./_components/Aside.tsx";
-
 export const layout = "index.tsx";
 export const title = "WüSpace VOS: Satzung und Vereinsordnungen des WüSpace e. V.";
 
-export default function Index({ vos, ...data }: Lume.Data, helpers: Lume.Helpers) {
+export default function Index({ comp, ...data }: Lume.Data) {
   return <>
-    <Aside data={data} />
+    <comp.Aside data={data} />
     <main className="justify-center flex-1 hidden text-gray-100 bg-gray-700 place-items-center md:flex">
       <p className="text-2xl text-center">
         &larr; VO auswählen.
       </p>
     </main>
-
   </>
 }