add faq

remove uneeded files
extend sections

api/CHANGELOG.md

@@ -1,13 +0,0 @@
-# alpha.42
-
-**We're now pre-compiling CSS for faster startup times**
-
-We are beginning to optimize the compilation and dev startup performance of Payload 3.0, and the first thing we've done is pre-compiled all SCSS that is required by the Payload admin UI.
-
-If you started before `alpha.42` and update to this version, you'll see that no styles are loaded. To fix this, take a look at the `/src/app/(payload)/layout.tsx` file within this repo, and note that this file has a new CSS import within it to load all CSS required by the Payload admin panel.
-
-Simply add this import to your `(payload)/layout.tsx` file, and you'll be back in business.
-
-**We now load all required Payload static files from your Next.js `public` folder**
-
-In addition to pre-compiling SCSS, we are also shipping static files through the Next.js `/public` folder which will cut down on compilation time as well. Make sure you copy the `public/payload` folder into your repo as well as add the CSS import above.

api/start-database.sh

@@ -1,28 +0,0 @@
-#!/usr/bin/env bash
-
-DB_CONTAINER_NAME="next-payload-3"
-
-if ! [ -x "$(command -v docker)" ]; then
-  echo "Docker is not installed. Please install docker and try again.\nDocker install guide: https://docs.docker.com/engine/install/"
-  exit 1
-fi
-
-if [ "$(docker ps -q -f name=$DB_CONTAINER_NAME)" ]; then
-  docker start $DB_CONTAINER_NAME
-  echo "Database container started"
-  exit 0
-fi
-
-set -a
-source .env
-
-DB_PASSWORD=$(echo $DATABASE_URL | awk -F':' '{print $3}' | awk -F'@' '{print $1}')
-
-if [ "$DB_PASSWORD" = "password" ]; then
-  echo "You are using the default database password"
-fi
-
-docker run --name $DB_CONTAINER_NAME -e POSTGRES_PASSWORD=$DB_PASSWORD -e POSTGRES_HOST_AUTH_METHOD=trust -e POSTGRES_DB=next-payload-3 -d -p 5432:5432 docker.io/postgres
-
-echo "Database container was successfully created"
-

web/package.json

@@ -16,6 +16,7 @@
     "autoprefixer": "^10.4.19",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
+    "ical": "^0.8.0",
     "marked": "^13.0.1",
     "motion": "^10.18.0",
     "postcss": "^8.4.38",
@@ -24,5 +25,8 @@
     "tailwind-merge": "^2.3.0",
     "tailwindcss": "^3.4.4",
     "typescript": "^5.5.2"
+  },
+  "devDependencies": {
+    "@types/ical": "^0.8.3"
   }
 }

web/src/components/Heading.astro

@@ -1,52 +1,52 @@
 ---
 import { cn } from "@/lib/utils";
 import type { HTMLAttributes } from "astro/types";
-import { VariantProps, cva } from "class-variance-authority";
+import { type VariantProps, cva } from "class-variance-authority";
 
 const heading = cva("max-w-3xl m-[var(--section-heading-margin)]", {
-    variants: {
-        main: {
-            true: "font-bold",
-            false: "font-semibold",
-        },
-        padding: {
-            true: "py-4",
-            false: "p-0",
-        },
+  variants: {
+    main: {
+      true: "font-bold",
+      false: "font-semibold",
     },
+    padding: {
+      true: "py-4",
+      false: "p-0",
+    },
+  },
 });
 
 export interface Props
-    extends HTMLAttributes<"h1" | "h2">,
-        VariantProps<typeof heading> {
-    subtitle?: string;
+  extends HTMLAttributes<"h1" | "h2">,
+    VariantProps<typeof heading> {
+  subtitle?: string;
 }
 
 const { main = false, padding = true, subtitle } = Astro.props;
 
 const titleClass = cn(
-    heading({ main, padding }),
-    subtitle ? "mb-[calc(var(--section_heading-margin-bottom)_/_2)]" : ""
+  heading({ main, padding }),
+  subtitle ? "mb-[calc(var(--section_heading-margin-bottom)_/_2)]" : ""
 );
 ---
 
 <div class="z-0 relative">
-    {
-        main ? (
-            <h1 class={titleClass}>
-                <slot />
-            </h1>
-        ) : (
-            <h2 class={titleClass}>
-                <slot />
-            </h2>
-        )
-    }
-    {
-        subtitle && (
-            <h3 class="font-normal m-[var(--section-heading-margin)] max-w-3xl">
-                {subtitle}
-            </h3>
-        )
-    }
+  {
+    main ? (
+      <h1 class={titleClass}>
+        <slot />
+      </h1>
+    ) : (
+      <h2 class={titleClass}>
+        <slot />
+      </h2>
+    )
+  }
+  {
+    subtitle && (
+      <h3 class="font-normal m-[var(--section-heading-margin)] max-w-3xl">
+        {subtitle}
+      </h3>
+    )
+  }
 </div>

web/src/components/Layout/Header.astro

@@ -10,9 +10,8 @@ import Logo from "components/Logo/Logo.astro";
     <div class="w-16 h-8 flex">
       <Logo />
     </div>
-    <a
-      class={button({ variant: "primary", size: "default" })}
-      href="https://github.com/tempblade/creator/releases">Download</a
+    <a class={button({ variant: "primary", size: "default" })} href="/faq"
+      >FAQ</a
     >
   </div>
 </header>

web/src/content/config.ts

@@ -0,0 +1,13 @@
+import { z, defineCollection } from 'astro:content';
+
+const faqCollection = defineCollection({
+    type: 'content',
+    schema: z.object({
+        title: z.string(),
+    }),
+});
+
+
+export const collections = {
+    faq: faqCollection
+}

web/src/content/faq/was-ist-der-vspace.md

@@ -0,0 +1,4 @@
+---
+title: Was ist der vspace.one e.V.?
+---
+Wir sind ein gemeinnütziger Hacker- und Makerspace!

web/src/content/faq/was-ist-ein-hacker.md

@@ -0,0 +1,11 @@
+---
+title: Was ist ein Hacker? Sollte ich Angst haben?
+---
+
+Der Begriff "Hacker" bezeichnet für uns primär nicht das, was im Allgemeinen umgangssprachlich darunter verstanden wird.
+
+Die kurze und oberflächliche Antwort: Ein Hacker ist ein Tüftler.
+
+Die etwas längere Antwort gibt eine Aussage von [Wau Holland]("https://de.wikipedia.org/wiki/Wau_Holland"): „Ein Hacker ist jemand, der versucht einen Weg zu finden, wie man mit einer Kaffeemaschine Toast zubereiten kann“. Ein Hacker löst also nicht unbedingt nur Probleme, er versucht auch zu experimentieren und das Machbare zu erkunden wo er nur kann!
+
+Eine sehr ausführliche Antwort und weiterführende links bietet der Wikipedia Artikel zum Begriff ["Hacker"](https://de.wikipedia.org/wiki/Hacker)

web/src/content/faq/was-ist-ein-hackerspace.md

@@ -0,0 +1,6 @@
+---
+title: Was ist ein Hackerspace? Und wo wir gleich dabei sind... Was ist ein Makerspace?
+---
+
+Hacker- und Makerspaces sind primär Orte für Wissensaustausch und Bildung in verschiedenen Bereichen der Wissenschaft und unterschiedlicher Technologien.
+Hackerspaces konzentrieren sich dabei eher auf informationstechnische Wissensgebiete wie bspw. Programmierung, während sich Makerspaces eher auf mechanische bzw. handwerkliche Gebiete konzentrieren wie unter anderem 3D-Druck und Holzbearbeitung.

web/src/env.d.ts

@@ -1 +1,2 @@
+/// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />

web/src/layouts/RootLayout.astro

@@ -17,10 +17,11 @@ const { title } = Astro.props;
     <meta name="description" content="Astro description" />
     <meta name="viewport" content="width=device-width" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-    <script
+    <!--script
+      is:inline
       defer
       data-domain="creator.tempblade.com"
-      src="https://analytics.unom.io/js/plausible.js"></script>
+      src="https://analytics.unom.io/js/plausible.js"></script-->
     <meta name="generator" content={Astro.generator} />
     <title>{title}</title>
   </head>

web/src/lib/events-api.ts

@@ -0,0 +1,138 @@
+import ICal from "ical";
+
+const CALENDAR_ICAL_URL =
+    "https://hub.vspace.one/remote.php/dav/public-calendars/f6MfGLnsGScRqd4Y?export";
+const CALENDAR_URL = "https://hub.vspace.one/apps/calendar/p/f6MfGLnsGScRqd4Y";
+
+// Only look at this much next occurences, to prevent infinite loop
+const RECURRING_EVENT_LOOK_FORWARD = 5;
+
+const DESIGNATOR_LINK = "Link";
+const DESIGNATOR_DOWNLOAD = "Download";
+
+export async function getCalenderIcs() {
+    const response = await fetch(CALENDAR_ICAL_URL);
+    const data = await response.text();
+
+    return data;
+}
+
+export type Event = {
+    title: string;
+    start: Date;
+    end: Date;
+    location: string;
+    description?: string;
+    link: string | undefined;
+    download: string | undefined;
+    isRecurring: boolean;
+};
+
+export async function getEvents() {
+    // Fetch the calender ics
+    const icsData = await getCalenderIcs();
+
+    const events = ICal.parseICS(icsData);
+
+    // Filters are split up for readability
+    const futureAndRecurringEvents = Object.values(events)
+        // Only include events of type VEVENT
+        .filter((e) => e.type === "VEVENT")
+        // Exclude Past events that aren't recurring
+        .filter((e) => {
+            const isFuture = Number(e.end) > Date.now();
+            const isRecurring = !!e.rrule;
+
+            return isFuture || isRecurring;
+        })
+        // Get latest reccurance of reccuring events
+        .map((e) => {
+            const isRecurring = !!e.rrule;
+
+            if (!isRecurring || !e.rrule) return e;
+
+            else {
+
+                const latest = e.recurrences?.[e.recurrences.length - 1];
+
+                if (!latest) {
+                    const duration = e.end !== undefined && e.start !== undefined ? e.end.getTime() - e.start.getTime() : 0;
+                    const next = e.rrule.after(new Date(Date.now()), true);
+
+                    if (!next) {
+                        return e;
+                    }
+
+                    e.start = next;
+                    e.end = new Date(next.getTime() + duration);
+
+                    return e
+
+                } else {
+                    return latest
+                }
+            }
+        })
+        .filter((e) => {
+            const isFuture = Number(e.end) > Date.now();
+
+            return isFuture;
+        })
+        // Exclude cancelled events
+        .filter((e) => {
+            const isCancelled = e.status !== undefined && e.status === "CANCELLED";
+
+            // Only return events that aren't cancelled
+            return !isCancelled;
+        })
+        // Get designator values from descriptions and turn into event type
+        .map((e) => {
+            let download: string | undefined = undefined;
+            let link: string | undefined = undefined;
+            let description = "";
+
+            const isRecurring = !!e.rrule;
+
+            if (e.description) {
+                const lines = e.description.split("\n");
+
+                for (let line in lines) {
+                    const designator = line.substring(0, line.search(":"));
+
+                    switch (designator) {
+                        case DESIGNATOR_DOWNLOAD:
+                            download = line
+                                .substring(DESIGNATOR_DOWNLOAD.length + 1, line.length)
+                                .trim();
+                            break;
+                        case DESIGNATOR_LINK:
+                            link = line
+                                .substring(DESIGNATOR_LINK.length + 1, line.length)
+                                .trim();
+                            break;
+                        default:
+                            description += line + " ";
+                    }
+                }
+            }
+
+            description = description.trim();
+
+            const event: Event = {
+                title: e.summary || "Kein Titel",
+                start: e.start!,
+                end: e.end!,
+                location: e.location || "Kein Standort",
+                description,
+                link,
+                download,
+                isRecurring,
+            };
+
+            return event;
+        })
+        // Sort the events
+        .sort((a, b) => a.start.getTime() - b.start.getTime());
+
+    return futureAndRecurringEvents;
+}

web/src/pages/faq.astro

@@ -0,0 +1,27 @@
+---
+import Section from "@/components/Section.astro";
+import RootLayout from "@/layouts/RootLayout.astro";
+import { getCollection } from "astro:content";
+
+const faqs = await getCollection("faq");
+
+const content = await Promise.all(faqs.map(async (e) => e.render()));
+---
+
+<RootLayout title="Häufig gestellte Fragen">
+  <main>
+    <Section>
+      {
+        faqs.map((faq, index) => {
+          const { Content } = content[index]!;
+          return (
+            <div>
+              <h3>{faq.data.title}</h3>
+              <Content />
+            </div>
+          );
+        })
+      }
+    </Section>
+  </main>
+</RootLayout>

web/src/pages/index.astro

@@ -1,12 +1,14 @@
 ---
 import LandingHeader from "@/sections/LandingHeader.astro";
-import Layout from "../layouts/RootLayout.astro";
+import RootLayout from "../layouts/RootLayout.astro";
 import Section from "@/components/Section.astro";
 import Introduction from "@/sections/Introduction.astro";
 import SpaceState from "@/sections/SpaceState.astro";
+import Participate from "@/sections/Participate.astro";
+import Events from "@/sections/Events.astro";
 ---
 
-<Layout
+<RootLayout
   title="vspace.one - Makerspace, Hackerspace, Chaostreff und offene Werkstatt für Villingen-Schwenningen und Umgebung."
 >
   <main>
@@ -16,6 +18,12 @@ import SpaceState from "@/sections/SpaceState.astro";
     <Section>
       <Introduction />
     </Section>
+    <Section>
+      <Participate />
+    </Section>
+    <Section>
+      <Events />
+    </Section>
     <SpaceState />
   </main>
-</Layout>
+</RootLayout>

web/src/sections/Events.astro

@@ -0,0 +1,18 @@
+---
+import Heading from "@/components/Heading.astro";
+import { getEvents } from "@/lib/events-api";
+
+const events = await getEvents();
+---
+
+<Heading>Events</Heading>
+<div class="flex flex-row">
+  {
+    events.map((e) => (
+      <div class="w-48">
+        <h2>{e.start.toLocaleDateString()}</h2>
+        <h3>{e.title}</h3>
+      </div>
+    ))
+  }
+</div>

web/src/sections/Introduction.astro

@@ -1,5 +1,9 @@
+---
+import Heading from "@/components/Heading.astro";
+---
+
 <div>
-  <h3>Was wir machen</h3>
+  <Heading>Was wir machen</Heading>
 
   <p>
     Unser Ziel ist der Wissensaustausch sowie die Bildung aller interessierten

web/src/sections/Participate.astro

@@ -0,0 +1,51 @@
+---
+import Heading from "@/components/Heading.astro";
+---
+
+<div id="Mitmachen">
+  <Heading>Mitmachen</Heading>
+  <div class="flex gap-4">
+    <div>
+      <h3>Vorbeischauen</h3>
+      <p>
+        Du möchtest uns und unsere Räumlichkeiten gerne persönlich kennenlernen?
+        Schau doch Dienstags ab 19:00 bei uns in der Am Krebsgraben 15 in
+        Villingen vorbei. Dienstags findet bei uns jede Woche der Chaostreff
+        statt.
+      </p>
+    </div>
+    <div>
+      <h3>Mitglied werden</h3>
+      <p>
+        Bei uns kann Jeder und Jede mitmachen. Interessierte Schüler, Studenten
+        und Erwachsene, die sich für kreativen Umgang mit Technik begeistern
+        sind willkommen. Wenn euch gefällt was wir tun und ihr uns unterstützen
+        wollt findet ihr unser Beitrittsformular <a href="/mitgliedwerden"
+          >hier</a
+        >.
+      </p>
+    </div>
+    <div>
+      <h3>Telegram</h3>
+      <p>
+        Für die regelmäßige Kommunikation verwenden wir <a
+          href="https://t.me/joinchat/DmNdswpnKgox_zzqENYXiA">Telegramgruppe</a
+        > und <a href="https://matrix.to/#/#vspaceone-general:matrix.org"
+          >Matrixroom</a
+        >. Telegram und Matrix sind Nachrichtenapps, ähnlich WhatsApp. Zudem
+        sind beide Chats verbunden, nutze also was dir lieber ist! Wenn du dich
+        interessierst und wissen willst, was bei uns los ist, trete ihr bei oder
+        schreibe uns eine Email an info[at]vspace.one.
+      </p>
+    </div>
+    <div>
+      <h3>Spenden</h3>
+      <p>
+        Dir gefällt was wir machen, hast aber keine Möglichkeit oder Lust
+        Mitglied zu werden? Gerne nehmen wir wie <a href="/spenden"
+          >hier beschrieben</a
+        > deine Spende als Überweisung an.
+      </p>
+    </div>
+  </div>
+</div>