add readme
This commit is contained in:
parent
1e73e2ac71
commit
6f03c60d5a
5
web/.gitignore
vendored
5
web/.gitignore
vendored
@ -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
|
||||
|
||||
@ -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.
|
||||
|
||||
[](https://stackblitz.com/github/withastro/astro/tree/latest/examples/basics)
|
||||
[](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/basics)
|
||||
[](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.
|
||||
|
||||
|
||||
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```
|
||||
28
web/src/components/InfoSlide.astro
Normal file
28
web/src/components/InfoSlide.astro
Normal file
@ -0,0 +1,28 @@
|
||||
---
|
||||
import type { InfoSlide } from "@/content/info-slides";
|
||||
|
||||
type Props = {
|
||||
infoSlide: InfoSlide;
|
||||
};
|
||||
|
||||
const {
|
||||
infoSlide: { imageSrc, text, title },
|
||||
} = Astro.props;
|
||||
---
|
||||
|
||||
<div class="keen-slider__slide">
|
||||
<div class="flex flex-col lg:flex-row w-full">
|
||||
<div class="h-[500px] lg:h-[600px] xl:h-[700px] lg:w-full">
|
||||
<img
|
||||
class="lg:rounded-l-card max-lg:rounded-t-card object-cover h-full w-full"
|
||||
src={imageSrc}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="p-card bg-neutral-accent lg:rounded-r-card max-lg:rounded-b-card min-h-[200px] lg:w-[600px]"
|
||||
>
|
||||
<h4 class="text-2xl font-semibold mb-2">{title}</h4>
|
||||
<p>{text}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,4 +1,4 @@
|
||||
type InfoSlide = {
|
||||
export type InfoSlide = {
|
||||
title: string;
|
||||
text: string;
|
||||
imageSrc: string;
|
||||
|
||||
15
web/src/pages/404.astro
Normal file
15
web/src/pages/404.astro
Normal file
@ -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";
|
||||
---
|
||||
|
||||
<RootLayout title="Nicht gefunden">
|
||||
<MainLayout>
|
||||
<Section>
|
||||
<Heading main>Die aufgerufene Seite konnte nicht gefunden werden.</Heading
|
||||
>
|
||||
</Section>
|
||||
</MainLayout>
|
||||
</RootLayout>
|
||||
@ -1,27 +1,11 @@
|
||||
---
|
||||
import InfoSlide from "@/components/InfoSlide.astro";
|
||||
import { infoSlides } from "@/content/info-slides";
|
||||
---
|
||||
|
||||
<div>
|
||||
<div class="max-w-[1800px] m-auto">
|
||||
<div class="keen-slider" id="info-slideshow">
|
||||
{
|
||||
infoSlides.map((e) => (
|
||||
<div class="keen-slider__slide ">
|
||||
<div class="flex flex-col lg:flex-row w-full">
|
||||
<div class="h-[500px] lg:h-[600px] xl:h-[700px] lg:w-full">
|
||||
<img
|
||||
class="lg:rounded-l-card max-lg:rounded-t-card object-cover h-full w-full"
|
||||
src={e.imageSrc}
|
||||
/>
|
||||
</div>
|
||||
<div class="p-card bg-neutral-accent lg:rounded-r-card max-lg:rounded-b-card min-h-[200px] lg:w-[600px]">
|
||||
<h4 class="text-2xl font-semibold mb-2">{e.title}</h4>
|
||||
<p>{e.text}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
{infoSlides.map((e) => <InfoSlide infoSlide={e} />)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -8,7 +8,7 @@ const data = await getSpaceData();
|
||||
|
||||
<Heading>Wo findest du uns?</Heading>
|
||||
<Card padding={false} class="flex flex-col 2xl:flex-row">
|
||||
<div class="p-card">
|
||||
<div class="p-card pb-0">
|
||||
<p>Du findest uns in der Doppelstadt Villingen-Schwenningen.</p>
|
||||
<p class="text-2xl font-bold text-main">
|
||||
{data.location.address}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user