Merge pull request 'fix path generation' (#8) from fix-link into main

Reviewed-on: #8
Reviewed-by: stb <stb@noreply.git.hamburg.ccc.de>

.forgejo/workflows/deploy-docs.yaml

@@ -26,12 +26,14 @@ jobs:
       - name: Build website - prod
         if: github.event_name != 'pull_request'
         run: |
+          pnpm install
           pnpm build
 
       - name: Build website - staging
         if: github.event_name == 'pull_request'
         run: |
-          #sed -i "s#site_url: https://didays.de#site_url: https://staging.didays.de/pr${{ github.event.pull_request.number }}/#" mkdocs.yml
+          sed -i "s#base: '/'#base: '/pr${{ github.event.pull_request.number }}'#" astro.config.mjs
+          pnpm install
           pnpm build
 
       - name: Deploy - Prepare keys

astro.config.mjs

@@ -10,5 +10,6 @@ export default defineConfig({
     },
     vite: {
         plugins: [tailwindcss()]
-    }
+    },
+    base: '/'
 });

package.json

@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@lucide/astro": "^1.23.0",
+    "@tailwindcss/typography": "^0.5.20",
     "@tailwindcss/vite": "^4.3.2",
     "astro": "^7.0.6",
     "tailwindcss": "^4.3.2"

pnpm-lock.yaml

@@ -11,6 +11,9 @@ importers:
       '@lucide/astro':
         specifier: ^1.23.0
         version: 1.23.0(astro@7.0.6(@emnapi/core@1.11.1)(@emnapi/runtime@1.11.2)(jiti@2.7.0))
+      '@tailwindcss/typography':
+        specifier: ^0.5.20
+        version: 0.5.20(tailwindcss@4.3.2)
       '@tailwindcss/vite':
         specifier: ^4.3.2
         version: 4.3.2(vite@8.1.3(esbuild@0.28.1)(jiti@2.7.0))
@@ -774,6 +777,11 @@ packages:
     resolution: {integrity: sha512-z8ZgnzX8gdNoWLBLqBPoh/sjnxkwvf9ZuWjnO0l0yIzbLa5/9S+eC5QxGZKRobVHIC3/1BoMWjHblqWjcgFgag==}
     engines: {node: '>= 20'}
 
+  '@tailwindcss/typography@0.5.20':
+    resolution: {integrity: sha512-hwbzQuNUfcPvbegQFatVPl/MY/tcM9KLl963hQ5laJKPh81TEZ1+dNG9PirGvcaDBkp+BCshExAyKVPW91dozw==}
+    peerDependencies:
+      tailwindcss: '>=3.0.0 || >=4.0.0 || insiders'
+
   '@tailwindcss/vite@4.3.2':
     resolution: {integrity: sha512-eHpMeX4JXfVNJDEcsouTeCBubJBTcTLigeaw/NTUW6PB5ATKKXdyonnXgTBX2VuRbjz1hjfz6C5XAhr52ImQXA==}
     peerDependencies:
@@ -895,6 +903,11 @@ packages:
     resolution: {integrity: sha512-u/O3vwbptzhMs3L1fQE82ZSLHQQfto5gyZzwteVIEyeaY5Fc7R4dapF/BvRoSYFeqfBk4m0V1Vafq5Pjv25wvA==}
     engines: {node: '>= 6'}
 
+  cssesc@3.0.0:
+    resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
+    engines: {node: '>=4'}
+    hasBin: true
+
   csso@5.0.5:
     resolution: {integrity: sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==}
     engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'}
@@ -1249,6 +1262,10 @@ packages:
     resolution: {integrity: sha512-RvwwcruNjI1ncT5xRakeyS9Lf8lcItv34KD+aif+VH9kduAyfYBipGh12274xtenIPZ119/R9BdTBa8gAwSh0A==}
     engines: {node: '>=12'}
 
+  postcss-selector-parser@6.0.10:
+    resolution: {integrity: sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==}
+    engines: {node: '>=4'}
+
   postcss@8.5.16:
     resolution: {integrity: sha512-vuwillviilfKZsg0VGj5R/YwwcHx4SLsIOI/7K6mQkWx+l5cUHTjj5g0AasTBcyXsbfTgrwsUNmVUb5xVwyPwg==}
     engines: {node: ^10 || ^12 || >=14}
@@ -1461,6 +1478,9 @@ packages:
       uploadthing:
         optional: true
 
+  util-deprecate@1.0.2:
+    resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
+
   vfile-message@4.0.3:
     resolution: {integrity: sha512-QTHzsGd1EhbZs4AsQ20JX1rC3cOlt/IWJruk893DfLRr57lcnOeMaWG4K0JrRta4mIJZKth2Au3mM3u03/JWKw==}
 
@@ -2090,6 +2110,11 @@ snapshots:
       '@tailwindcss/oxide-win32-arm64-msvc': 4.3.2
       '@tailwindcss/oxide-win32-x64-msvc': 4.3.2
 
+  '@tailwindcss/typography@0.5.20(tailwindcss@4.3.2)':
+    dependencies:
+      postcss-selector-parser: 6.0.10
+      tailwindcss: 4.3.2
+
   '@tailwindcss/vite@4.3.2(vite@8.1.3(esbuild@0.28.1)(jiti@2.7.0))':
     dependencies:
       '@tailwindcss/node': 4.3.2
@@ -2283,6 +2308,8 @@ snapshots:
 
   css-what@6.2.2: {}
 
+  cssesc@3.0.0: {}
+
   csso@5.0.5:
     dependencies:
       css-tree: 2.2.1
@@ -2617,6 +2644,11 @@ snapshots:
 
   picomatch@4.0.5: {}
 
+  postcss-selector-parser@6.0.10:
+    dependencies:
+      cssesc: 3.0.0
+      util-deprecate: 1.0.2
+
   postcss@8.5.16:
     dependencies:
       nanoid: 3.3.15
@@ -2838,6 +2870,8 @@ snapshots:
       ofetch: 1.5.1
       ufo: 1.6.4
 
+  util-deprecate@1.0.2: {}
+
   vfile-message@4.0.3:
     dependencies:
       '@types/unist': 3.0.3

public/didays2026.ics

@@ -8,7 +8,7 @@ DTSTART;VALUE=DATE:20261002
 DTEND;VALUE=DATE:20261005
 SUMMARY:DIDAYS 2026
 URL:https://didays.de
-DESCRIPTION:Der CCC Hansestadt Hamburg e.V. veranstaltet vom 2. bis 4. Oktober zusammen mit Hamburger Stadtteilinitiativen\, Maker- und Hackerspaces und weiteren zivilgesellschaftlichen Organisationen aus der Region die ersten Digital Independance Days in Hamburg. Euch erwartet ein Programm rund um digitale Unabhängigkeit: Messenger\, Office-Programm\, oder die eigene Cloud.
+DESCRIPTION:Der CCC Hansestadt Hamburg e.V. veranstaltet vom 2. bis 4. Oktober zusammen mit Hamburger Stadtteilinitiativen\, Maker- und Hackerspaces und weiteren zivilgesellschaftlichen Organisationen aus der Region die ersten Digital Independence Days in Hamburg. Euch erwartet ein Programm rund um digitale Unabhängigkeit: Messenger\, Office-Programm\, oder die eigene Cloud.
 LOCATION:Kultur Palast Harburg\, Rieckhoffstraße 12\, 21073 Hamburg
 END:VEVENT
 END:VCALENDAR

src/components/Footer.astro

@@ -0,0 +1,23 @@
+---
+
+---
+
+<footer class="bg-base-300 pb-20">
+  <div class="container p-8 mx-auto max-w-4xl grid grid-cols-1 md:grid-cols-3 items-center gap-12">
+    <div class="flex flex-col items-center">
+      <a class="link" href="https://hamburg.ccc.de/imprint/">Kontakt & Impressum</a>
+      <a class="link" href="https://hamburg.ccc.de/privacy-notice/">Datenschutzerklärung</a>
+      <a class="link" rel="me" href="https://chaos.social/@didays">Fediverse</a>
+    </div>
+    <div class="flex flex-col items-center">
+      <a href="https://hamburg.ccc.de">
+        <img alt="Logo des Chaos Computer Club Hamburg e.V." src="/ccchh.svg" class="max-w-40"/>
+      </a>
+    </div>
+    <div class="flex flex-col items-center">
+      <a href="https://www.wauland.de">
+        <img alt="Logo der Wau-Holland-Stiftung" src="/wauland.svg" class="max-w-40"/>
+      </a>
+    </div>
+  </div>
+</footer>

src/layouts/Content.astro

@@ -0,0 +1,15 @@
+---
+import "../styles/global.css"
+import Footer from "../components/Footer.astro"
+import Layout from "./Layout.astro"
+
+const {frontmatter} = Astro.props
+---
+
+<Layout title={frontmatter.title}>
+  <main class="prose max-w-3xl mx-auto p-4 mt-10 mb-40">
+    <h1>{frontmatter.title}</h1>
+    <slot/>
+  </main>
+  <Footer />
+</Layout>

src/layouts/Layout.astro

@@ -1,5 +1,7 @@
 ---
 import "../styles/global.css";
+
+const props = Astro.props;
 ---
 
 <!doctype html>
@@ -10,7 +12,7 @@ import "../styles/global.css";
 		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
 		<link rel="icon" href="/favicon.ico" />
 		<meta name="generator" content={Astro.generator} />
-		<title>DIDAYS 2026</title>
+		<title>DIDAYS 2026{props.title ? ` | ${props.title}` : ''}</title>
 	</head>
 	<body>
 		<slot />

src/pages/einladung-initiativen.md

@@ -1,6 +1,10 @@
-# DIDAYS 2026: Macht mit!
+---
+layout: ../layouts/Content.astro
+title: "DIDAYS 2026: Macht mit!"
+author: CCCHH
+---
 
-Der [CCC Hansestadt Hamburg e.V.](https://hamburg.ccc.de) und die [Wau Holland Stiftung](https://www.wauland.de) veranstalten vom 2. bis 4. Oktober zusammen mit Hamburger Stadtteilinitiativen, Maker- und Hackerspaces und weiteren zivilgesellschaftlichen Organisationen aus der Region die ersten Digital Independance Days in Hamburg. Ihr und eure Gruppe seid herzlich eingeladen, euch aktiv zu beteiligen!
+Der [CCC Hansestadt Hamburg e.V.](https://hamburg.ccc.de) und die [Wau Holland Stiftung](https://www.wauland.de) veranstalten vom 2. bis 4. Oktober zusammen mit Hamburger Stadtteilinitiativen, Maker- und Hackerspaces und weiteren zivilgesellschaftlichen Organisationen aus der Region die ersten Digital Independence Days in Hamburg. Ihr und eure Gruppe seid herzlich eingeladen, euch aktiv zu beteiligen!
 
 **tl;dr:** Du denkst, deine Gruppe sollte dabei sein? Dann schreibe uns eine kurze Mail an orga@didays.de!
 

src/pages/index.astro

@@ -1,34 +1,36 @@
 ---
+import Footer from "../components/Footer.astro"
 import Layout from "../layouts/Layout.astro"
-import {Calendar} from "@lucide/astro"
+import {Calendar, ChevronDown} from "@lucide/astro"
+import path from "../utils/path.ts"
 ---
 
 <Layout>
   <div class="hero bg-base-200 min-h-screen">
-    <div class="hero-content text-center">
-      <div class="max-w-md">
+    <div class="hero-content text-center flex-col">
+      <div class="max-w-md mb-10">
         <div class="grid auto-cols-max grid-flow-col gap-2 text-center mx-auto w-fit mb-8 opacity-0"
              id="countdown">
           <div class="bg-neutral rounded-box text-neutral-content p-2 flex flex-col items-center text-sm">
-            <span class="countdown font-mono text-4xl">
+            <span class="not-motion-reduce:countdown font-mono text-4xl">
               <span id="days" style="--value:0;" aria-live="polite" aria-label="0">0</span>
             </span>
             Tag(e)
           </div>
           <div class="bg-neutral rounded-box text-neutral-content p-2 flex flex-col items-center text-sm">
-            <span class="countdown font-mono text-4xl">
+            <span class="not-motion-reduce:countdown font-mono text-4xl">
               <span id="hours" style="--value:0;--digits: 2" aria-live="polite" aria-label="0">0</span>
             </span>
             Std.
           </div>
           <div class="bg-neutral rounded-box text-neutral-content p-2 flex flex-col items-center text-sm">
-            <span class="countdown font-mono text-4xl">
+            <span class="not-motion-reduce:countdown font-mono text-4xl">
               <span id="minutes" style="--value:0;--digits: 2" aria-live="polite" aria-label="0">0</span>
             </span>
             Min.
           </div>
           <div class="bg-neutral rounded-box text-neutral-content p-2 flex flex-col items-center text-sm">
-            <span class="countdown font-mono text-4xl">
+            <span class="not-motion-reduce:countdown font-mono text-4xl">
               <span id="seconds" style="--value:0;--digits: 2" aria-live="polite" aria-label="0">0</span>
             </span>
             Sek.
@@ -42,25 +44,30 @@ import {Calendar} from "@lucide/astro"
           <a class="link" href="https://www.kulturpalast-harburg.com">Kultur Palast Harburg</a><br>
           Eintritt frei
         </p>
-        <div class="aura aura-rainbow">
-          <a href="/didays2026.ics" class="btn btn-lg" target="_blank">
+        <div class="motion-safe:aura motion-safe:aura-rainbow">
+          <a href="/didays2026.ics" class="btn btn-lg motion-reduce:btn-outline" target="_blank">
             <Calendar/>
             Im Kalender speichern
           </a>
         </div>
       </div>
+      <div class="flex w-full justify-center">
+        <ChevronDown class="size-14 motion-safe:animate-[bounce_3s_ease-in-out_infinite]"/>
+      </div>
     </div>
   </div>
   <div class="container p-8 my-40 max-w-2xl mx-auto text-center text-xl/8">
     <p>
-      Der <a class="link" href="https://hamburg.ccc.de">CCC Hansestadt Hamburg e.V.</a> und die <a class="link" href="https://www.wauland.de">Wau Holland Stiftung</a> veranstalten vom 2. bis 4. Oktober zusammen mit Hamburger Stadtteilinitiativen,
+      Der <a class="link" href="https://hamburg.ccc.de">CCC Hansestadt Hamburg e.V.</a> und die <a class="link"
+                                                                                                   href="https://www.wauland.de">Wau
+      Holland Stiftung</a> veranstalten vom 2. bis 4. Oktober zusammen mit Hamburger Stadtteilinitiativen,
       Maker- und Hackerspaces und weiteren zivilgesellschaftlichen Organisationen aus der Region die ersten Digital
       Independence Days in Hamburg.<br><br>
       Euch erwartet ein Programm rund um digitale Unabhängigkeit: Messenger,
       Office-Programm, oder die eigene Cloud.<br><br>
       Wenn ihr euch mit eurer Stadtteil-Initiative, Computer-Stammtisch oder
       Aktivisty-Gruppe an den DIDAYS beteiligen möchtet, dann schaut
-      doch <a class="link" href="einladung-initiativen">in unsere Einladung an Gruppen</a>.
+      doch <a class="link" href={path(import.meta.env.BASE_URL, 'einladung-initiativen')}>in unsere Einladung an Gruppen</a>.
       Wir freuen uns auf die Zusammenarbeit!
     </p>
   </div>
@@ -120,25 +127,7 @@ import {Calendar} from "@lucide/astro"
     </div>
   </div>
 
-  <footer class="bg-base-300 pb-20">
-    <div class="container p-8 mx-auto max-w-4xl grid grid-cols-1 md:grid-cols-3 items-center gap-12">
-      <div class="flex flex-col items-center">
-        <a class="link" href="https://hamburg.ccc.de/imprint/">Kontakt & Impressum</a>
-        <a class="link" href="https://hamburg.ccc.de/privacy-notice/">Datenschutzerklärung</a>
-        <a class="link" rel="me" href="https://chaos.social/@didays">Fediverse</a>
-      </div>
-      <div class="flex flex-col items-center">
-        <a href="https://hamburg.ccc.de">
-          <img alt="Logo des Chaos Computer Club Hamburg e.V." src="/ccchh.svg" class="max-w-40"/>
-        </a>
-      </div>
-      <div class="flex flex-col items-center">
-        <a href="https://www.wauland.de">
-          <img alt="Logo der Wau-Holland-Stiftung" src="/wauland.svg" class="max-w-40"/>
-        </a>
-      </div>
-    </div>
-  </footer>
+  <Footer/>
 
   <script>
       const countdownElement: HTMLElement = document.getElementById("countdown")!

src/styles/global.css

@@ -1,4 +1,5 @@
 @import "tailwindcss";
+@plugin "@tailwindcss/typography";
 @plugin "daisyui";
 @plugin "daisyui/theme" {
     name: "mytheme";

src/utils/path.ts

@@ -0,0 +1,6 @@
+export default function path(...components: Array<string>){
+    return '/' + components
+        .map(component => component.trim().replace(/(^[\/]*|[\/]*$)/g, ''))
+        .filter(component => component.length > 0)
+        .join("/")
+}