From 6f03c60d5a86bb19e855bfdfa3b7a75e2ea19f95 Mon Sep 17 00:00:00 2001 From: enricobuehler Date: Sat, 29 Jun 2024 18:40:34 +0200 Subject: [PATCH] add readme --- web/.gitignore | 5 ++ web/README.md | 79 ++++++++++++++-------------- web/src/components/InfoSlide.astro | 28 ++++++++++ web/src/content/info-slides.ts | 2 +- web/src/pages/404.astro | 15 ++++++ web/src/sections/InfoSlideshow.astro | 22 ++------ web/src/sections/Location.astro | 2 +- 7 files changed, 93 insertions(+), 60 deletions(-) create mode 100644 web/src/components/InfoSlide.astro create mode 100644 web/src/pages/404.astro diff --git a/web/.gitignore b/web/.gitignore index 016b59e..4c0f702 100644 --- a/web/.gitignore +++ b/web/.gitignore @@ -22,3 +22,8 @@ pnpm-debug.log* # jetbrains setting folder .idea/ + +# Exclude other lock files since we recommend Bun +package-lock.json +yarn.lock +pnpm-lock.yaml diff --git a/web/README.md b/web/README.md index 1db3fb3..85c17c6 100644 --- a/web/README.md +++ b/web/README.md @@ -1,54 +1,55 @@ -# Astro Starter Kit: Basics +# vspace.one - Website -```sh -npm create astro@latest -- --template basics -``` +Dies ist das Repository mit dem Quellcode der vspace.one Webseite. -[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/basics) -[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/basics) -[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/basics/devcontainer.json) +## Tech-Stack -> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun! +Das Projekt nutzt als Basis die ["Astro"]("https://astro.build") Framework. -![just-the-basics](https://github.com/withastro/astro/assets/2244813/a0a5533c-a856-4198-8470-2d67b1d7c554) +Als Laufzeit empfehlen wir ["Bun"]("https://bun.sh"), es sollte allerdings auch möglich sein Node.js zu verwenden. -## 🚀 Project Structure +### Wieso nicht React, Vue oder XYZ...? -Inside of your Astro project, you'll see the following folders and files: +Ziel ist es die Seite vielen Menschen zugänglich zu machen. +Bisher nutzt die Seite ausschließlich Astro Komponenten, welche vom Prinzip her eine Abstraktion über HTML sind, und sehr nah am Web-Standard im Vergleich zu vielen anderen Frameworks. -```text -/ -├── public/ -│ └── favicon.svg -├── src/ -│ ├── components/ -│ │ └── Card.astro -│ ├── layouts/ -│ │ └── Layout.astro -│ └── pages/ -│ └── index.astro -└── package.json -``` +Allerdings ist es in Astro auch problemlos möglich mit bspw. React zu arbeiten. Dies funktioniert über ["Islands/Inseln"]("https://docs.astro.build/de/concepts/islands/"). +Hierbei handelt es sich um Inseln die in dem Projekt eingebetteten werden (Sinnbildlich, nicht zu verwechseln mit iframes). In diesen Islands können React, Vue.js sowie viele weitere libraries verwendet werden. -Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name. +Ziel ist es soweit wie möglich mit Astro auszukommen, da wir hierdurch zu großen Teilen auf Client-Seitiges JavaScript verzichten können, was die Bundle Size klein hält und die Ladezeiten schnell. -There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components. +Grundsätzlich bleibt es euch aber offen eure Lieblings-Library zu verwenden, solange es nicht auf der Startseite ist. -Any static assets, like images, can be placed in the `public/` directory. +## Entwickeln des frontends -## 🧞 Commands +Die Befehle müssen im Unterordner /web ausgeführt werden. -All commands are run from the root of the project, from a terminal: +### Installieren der Abhängigkeiten -| Command | Action | -| :------------------------ | :----------------------------------------------- | -| `npm install` | Installs dependencies | -| `npm run dev` | Starts local dev server at `localhost:4321` | -| `npm run build` | Build your production site to `./dist/` | -| `npm run preview` | Preview your build locally, before deploying | -| `npm run astro ...` | Run CLI commands like `astro add`, `astro check` | -| `npm run astro -- --help` | Get help using the Astro CLI | +Bun: +```bun install``` +Node.js/NPM: +```npm install``` -## 👀 Want to learn more? +### Starten des Entwicklungsservers -Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat). +Bun: +```bun dev``` +Node.js/NPM: +```npm start``` + +### Kompilieren + +Bun: +```bun run build``` +Node.js/NPM: +```npm run build``` + +### Kompilieren + +Hinweis: Hierfür muss erst die Seite kompiliert werden. + +Bun: +```bun preview``` +Node.js/NPM: +```npm preview``` \ No newline at end of file diff --git a/web/src/components/InfoSlide.astro b/web/src/components/InfoSlide.astro new file mode 100644 index 0000000..69ac49f --- /dev/null +++ b/web/src/components/InfoSlide.astro @@ -0,0 +1,28 @@ +--- +import type { InfoSlide } from "@/content/info-slides"; + +type Props = { + infoSlide: InfoSlide; +}; + +const { + infoSlide: { imageSrc, text, title }, +} = Astro.props; +--- + +
+
+
+ +
+
+

{title}

+

{text}

+
+
+
diff --git a/web/src/content/info-slides.ts b/web/src/content/info-slides.ts index 2ead236..015919f 100644 --- a/web/src/content/info-slides.ts +++ b/web/src/content/info-slides.ts @@ -1,4 +1,4 @@ -type InfoSlide = { +export type InfoSlide = { title: string; text: string; imageSrc: string; diff --git a/web/src/pages/404.astro b/web/src/pages/404.astro new file mode 100644 index 0000000..6d83842 --- /dev/null +++ b/web/src/pages/404.astro @@ -0,0 +1,15 @@ +--- +import Heading from "@/components/Heading.astro"; +import Section from "@/components/Section.astro"; +import MainLayout from "@/layouts/MainLayout.astro"; +import RootLayout from "@/layouts/RootLayout.astro"; +--- + + + +
+ Die aufgerufene Seite konnte nicht gefunden werden. +
+ + diff --git a/web/src/sections/InfoSlideshow.astro b/web/src/sections/InfoSlideshow.astro index 692ec9e..c65e9eb 100644 --- a/web/src/sections/InfoSlideshow.astro +++ b/web/src/sections/InfoSlideshow.astro @@ -1,27 +1,11 @@ --- +import InfoSlide from "@/components/InfoSlide.astro"; import { infoSlides } from "@/content/info-slides"; --- -
+
- { - infoSlides.map((e) => ( -
-
-
- -
-
-

{e.title}

-

{e.text}

-
-
-
- )) - } + {infoSlides.map((e) => )}
diff --git a/web/src/sections/Location.astro b/web/src/sections/Location.astro index 8015496..7b745c9 100644 --- a/web/src/sections/Location.astro +++ b/web/src/sections/Location.astro @@ -8,7 +8,7 @@ const data = await getSpaceData(); Wo findest du uns? -
+

Du findest uns in der Doppelstadt Villingen-Schwenningen.

{data.location.address}