Initial Commit

.github/workflows/pages.yml

@@ -0,0 +1,29 @@
+name: GitHub Pages Deploy
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+
+      - name: Setup Deno
+        uses: denolib/setup-deno@v2
+        with:
+          deno-version: v1.x
+      - name: Setup Typst
+        uses: typst-community/setup-typst@v3
+
+      - name: Compile Site
+        run: deno task build
+
+      - name: Deploy
+        uses: peaceiris/actions-gh-pages@v4
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./_site

.gitignore

@@ -0,0 +1,4 @@
+_site
+_cache
+.DS_Store
+.idea

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+	"deno.enable": true
+}

README.md

@@ -0,0 +1,13 @@
+# WüSpace VOS (Vereinsordnungssystem)
+
+## § 1 Beschreibung
+
+(1) Das Vereinsordnungssystem (VOS) dient als Publikationsplattform für Vereinsordnungen (inkl. der Satzung), welche mit delegis / Typst erstellt wurden. Das VOS ist ein Projekt des Vereins WüSpace e. V. und wird von diesem betrieben.
+
+(2) $^1$ Das VOS agiert als Static Site Generator (SSG) und generiert aus den Typst-Dateien eine statische Website. $^2$ Die Website wird auf einem Webserver gehostet und ist unter der Domain [vos.wuespace.de](https://vos.wuespace.de) erreichbar.
+
+## § 2 Bearbeitung
+
+(1) $^1$ Die Bearbeitung der Vereinsordnungen erfolgt in den Typst-Dateien im Ordner `vos`. $^2$ VOS extrahiert automatisch die delegis-Metadaten und generiert daraus die Website. $^3$ Die Website wird bei jedem Push auf den `main`-Branch automatisch neu generiert und auf dem Webserver aktualisiert.
+
+(2) Das VOS wird vom Vorstand gepflegt.

_components/Aside.tsx

@@ -0,0 +1,63 @@
+import { clsx } from "@nick/clsx";
+import { MetadataSchema } from "../lib/metadata.ts";
+
+export interface AsideProps {
+  data: Lume.Data;
+  hide?: boolean;
+}
+
+export function Aside({ data, hide }: AsideProps) {
+  const liStyle = (targetUrl: string) =>
+    clsx(
+      "block p-3 hover:bg-gray-100",
+      data.url === targetUrl && "bg-gray-200",
+    );
+
+  return (
+    <aside className={asideClass(hide ?? false)}>
+      <img
+        src="/assets/logo.svg"
+        alt="WüSpace"
+        className="block w-32 mx-auto"
+      />
+      <h1 className="mx-2 my-4 text-xl text-center text-gray-900">
+        VOS: Vereinsordnungssystem
+      </h1>
+      <ul>
+        {Object.entries(data.page.data.vos).sort(comparator).map(
+          ([url, metadata]) => {
+            const { abbreviation, title, resolution } = MetadataSchema.parse(
+              metadata,
+            );
+            return (
+              <li key={url}>
+                <a href={url} className={liStyle(url)}>
+                  <p className="text-lg text-gray-900">
+                    {abbreviation}
+                  </p>
+                  <p className="line-clamp-1">
+                    {title}
+                  </p>
+                  <p className="line-clamp-1">
+                    <small>
+                      {resolution}
+                    </small>
+                  </p>
+                </a>
+              </li>
+            );
+          },
+        )}
+      </ul>
+    </aside>
+  );
+}
+
+const asideClass = (hide: boolean) => clsx(
+  "h-full overflow-y-auto md:max-w-64",
+  hide && "hidden md:block",
+);
+
+const comparator = ([urlA]: [string, unknown], [urlB]: [string, unknown]) => {
+  return urlA.localeCompare(urlB);
+};

_components/Preview.tsx

@@ -0,0 +1,9 @@
+export interface PreviewProps {
+	src: string;
+}
+
+export function Preview({src}: PreviewProps) {
+	return <object data={src + "#view=fit"} type="application/pdf" className="w-full h-full" width="100%" height="100%">
+		<param name="view" value="fit" />
+	</object>;
+}

_config.ts

@@ -0,0 +1,21 @@
+import lume from "lume/mod.ts";
+import jsx from "lume/plugins/jsx.ts";
+import tailwindcss from "lume/plugins/tailwindcss.ts";
+import postcss from "lume/plugins/postcss.ts";
+import { typstDelegis } from "./lib/typst-delegis.ts";
+import { checkPrerequisities } from "./lib/check-prereqs.ts";
+import tailwindConfig from "./tailwind.config.ts";
+
+await checkPrerequisities();
+
+export const site = lume({});
+
+site.use(jsx());
+site.use(
+  tailwindcss(tailwindConfig),
+);
+site.use(postcss());
+site.use(typstDelegis());
+site.copy("assets");
+
+export default site;

_includes/index.tsx

@@ -0,0 +1,11 @@
+export default function({content, 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}
+		</body>
+	</html>
+}

_includes/vo.tsx

@@ -0,0 +1,14 @@
+import { Aside } from "../_components/Aside.tsx";
+import { Preview } from "../_components/Preview.tsx";
+
+export const layout = "index.tsx";
+export default function (data: Lume.Data, helpers: Lume.Helpers) {
+  return (
+    <>
+      <Aside vos={data.page.data.vos} data={data} hide />
+      <main className="flex-1">
+        <Preview src={helpers.url(data.content as string)} />
+      </main>
+    </>
+  );
+}

deno.json

@@ -0,0 +1,20 @@
+{
+  "imports": {
+    "@nick/clsx": "jsr:@nick/clsx@^0.2.2",
+    "lume/": "https://deno.land/x/[email protected]/",
+    "react": "npm:react"
+  },
+  "tasks": {
+    "lume": "echo \"import 'lume/cli.ts'\" | deno run -A -",
+    "build": "deno task lume",
+    "serve": "deno task lume -s"
+  },
+  "compilerOptions": {
+    "types": [
+      "lume/types.ts"
+    ],
+    "jsx": "react-jsx",
+    "jsxImportSource": "npm:react",
+    "jsxImportSourceTypes": "npm:@types/react"
+  }
+}