Konzeption der Seite Impressum (#12)

Co-authored-by: Thomas Schley <thomas.schley@lmis.de>
vitrum-connect · Dec 5, 2024 · 624cded · 624cded
1 parent 640456e
commit 624cded
Show file tree

Hide file tree

Showing 21 changed files with 3,660 additions and 15,622 deletions.
diff --git a/.github/Dockerfile b/.github/Dockerfile
@@ -1,9 +1,6 @@
 # pull official base image
 FROM node:23.3.0-alpine
 
-# install web server
-RUN npm install -g serve
-
 # add file to app folder
 ADD . /app/
 
@@ -17,4 +14,4 @@ RUN npm install && npm run build
 EXPOSE 3000
 
 # define entrypoint
-CMD ["serve", "-s", "/app/build"]
+CMD ["npm", "run", "start"]
diff --git a/.gitignore b/.gitignore
@@ -2,6 +2,7 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
 # dependencies
+/.react-router
 /node_modules
 /.pnp
 .pnp.js

diff --git a/README.md b/README.md
@@ -2,10 +2,10 @@
 
 In the project directory, you can run:
 
-### `npm start`
+### `npm run dev`
 
 Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+Open [http://localhost:5173](http://localhost:5173) to view it in the browser.
 
 The page will reload if you make edits.\
 You will also see any lint errors in the console.
@@ -18,6 +18,11 @@ It correctly bundles React in production mode and optimizes the build for the be
 The build is minified and the filenames include the hashes.\
 Your app is ready to be deployed!
 
+### `npm run start`
+
+Runs the app in the production mode.\
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
 ## Run with Docker
 
 ```shell

diff --git a/src/index.css → app/app.css b/src/index.css → app/app.css
@@ -1,5 +1,10 @@
-body {
+html, body, #root {
+  height: 100%;
   margin: 0;
+  padding: 0;
+}
+
+body {
   font-family: 'Arial', sans-serif;
 }
 

diff --git a/app/components/Footer.module.css b/app/components/Footer.module.css
@@ -0,0 +1,13 @@
+.footer {
+    background-color: #0E172D;
+    display: flex;
+    justify-content: center;
+    gap: 40px;
+    list-style: none;
+    padding: 20px 40px;
+    a {
+        color: white;
+        font-size: x-large;
+        text-decoration: none;
+    }
+}
diff --git a/app/components/Footer.tsx b/app/components/Footer.tsx
@@ -0,0 +1,17 @@
+import styles from './Footer.module.css';
+import {NavLink} from 'react-router';
+
+function Footer() {
+
+    const links = [
+        { url: '/impressum', label: 'Impressum' },
+    ];
+
+    const list = links.map((link, index) => {
+        return <NavLink to={link.url} key={index}>{ link.label }</NavLink>
+    });
+
+    return <nav className={styles.footer}>{ list }</nav>;
+}
+
+export default Footer;
diff --git a/app/components/Header.module.css b/app/components/Header.module.css
@@ -0,0 +1,8 @@
+.header {
+    background-color: #0E172D;
+    color: white;
+    font-size: xxx-large;
+    padding: 20px 40px;
+    text-align: center;
+    text-decoration: none;
+}
diff --git a/app/components/Header.tsx b/app/components/Header.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+import styles from './Header.module.css';
+import {Link} from 'react-router';
+
+function Header() {
+    return <Link className={styles.header} to="/">AquaBRain</Link>;
+}
+
+export default Header;
diff --git a/app/root.module.css b/app/root.module.css
@@ -0,0 +1,11 @@
+.container {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+.content {
+    padding: 40px;
+    flex-grow: 1;
+    overflow-y: auto;
+}
diff --git a/app/root.tsx b/app/root.tsx
@@ -0,0 +1,74 @@
+import {
+    isRouteErrorResponse,
+    Links,
+    LinksFunction,
+    Meta,
+    Outlet,
+    Scripts,
+    ScrollRestoration, useRouteError
+} from 'react-router';
+
+import stylesheet from './app.css?url';
+import React from 'react';
+import Header from './components/Header';
+import Footer from './components/Footer';
+import styles from './root.module.css';
+
+export const links: LinksFunction = () => [
+    { rel: 'stylesheet', href: stylesheet },
+]
+
+export function Layout({children}: { children: React.ReactNode }) {
+    return (
+        <html lang="de">
+        <head>
+            <meta charSet="utf-8"/>
+            <meta name="viewport" content="width=device-width, initial-scale=1"/>
+            <title>AquaBRain</title>
+            <Meta/>
+            <Links/>
+        </head>
+        <body>
+        <div className={styles.container}>
+            <Header/>
+            <div className={styles.content}>{children}</div>
+            <Footer/>
+        </div>
+        <ScrollRestoration/>
+        <Scripts/>
+        </body>
+        </html>
+    );
+}
+
+export default function App() {
+    return <Outlet/>;
+}
+
+export function ErrorBoundary() {
+    const error = useRouteError();
+
+    let message = 'Oops!';
+    let details = 'An unexpected error occured.';
+    let stack: string | undefined;
+
+    if (isRouteErrorResponse(error)) {
+        message = error.status === 404 ? '404' : 'Error';
+        details = error.status === 404 ? "The requested page could not be found" : error.statusText || details;
+    } else if (import.meta.env.DEV && error && error instanceof Error) {
+        details = error.message;
+        stack = error.stack;
+    }
+
+    return (
+        <main className="pt-16 p-4 container mx-auto">
+            <h1>{message}</h1>
+            <p>{details}</p>
+            {stack && (
+                <pre className="w-full p-4 overflow-x-auto">
+                    <code>{stack}</code>
+                </pre>
+            )}
+        </main>
+    );
+}
diff --git a/app/routes.ts b/app/routes.ts
@@ -0,0 +1,5 @@
+import {route, RouteConfig} from '@react-router/dev/routes';
+
+export default [
+    route('impressum', './routes/Impressum.tsx')
+] satisfies RouteConfig;
diff --git a/app/routes/Impressum.module.css b/app/routes/Impressum.module.css
@@ -0,0 +1,12 @@
+body {
+    counter-reset: disclaimer;
+}
+
+.firstCounter::before {
+    counter-increment: disclaimer;
+    content: counter(disclaimer) ". ";
+}
+.counter::before {
+    counter-increment: disclaimer;
+    content: counter(disclaimer) ". ";
+}
diff --git a/app/routes/Impressum.tsx b/app/routes/Impressum.tsx
@@ -0,0 +1,71 @@
+import styles from './Impressum.module.css';
+import {Link} from "react-router";
+
+function Impressum() {
+
+    const phone = '+49 (0)581 / 82-0';
+    const fax = '+49 (0)581 / 82-445';
+    const email = '5gla@landkreis-uelzen.de';
+    const salesTaxIdentificationNumber = 'DE116678257';
+    const editorialResponsiblePersons = [
+        'Thies-Benedict Lüdtke',
+        'Alisa Lunow'
+    ];
+    const linkERecht24 = 'https://www.e-recht24.de/';
+    return (
+        <>
+            <h1>Impressum</h1>
+            <p>Angaben gemäß § 5 TMG</p>
+            <p>Landkreis Uelzen</p>
+            <p>Albrecht-Thaer-Straße 101</p>
+            <p>29525 Uelzen</p>
+            <p>Vertreten durch:</p>
+            <p>Landrat Dr. Heiko Blume</p>
+            <p>Kontakt</p>
+            <p>Telefon: {phone}</p>
+            <p>Telefax: {fax}</p>
+            <p>E-Mail: <Link to={'mailto:' + email}>{email}</Link></p>
+            <p>Umsatzsteuer-ID</p>
+            <p>Umsatzsteuer-Identifikationsnummer gemäß § 27 a Umsatzsteuergesetz</p>
+            <p>{salesTaxIdentificationNumber}</p>
+            <p>Redaktionell verantwortlich</p>
+            <p>{editorialResponsiblePersons.join(', ')}</p>
+            <p>Verbraucherstreitbelegung/Universalschlichtungsstelle</p>
+            <p>Wir sind nicht bereit oder verpflichtet, an Streitbeilegungsverfahren vor einer
+                Verbraucherschlichtungsstelle teilzunehmen.</p>
+            <p>Quelle: <Link to={linkERecht24}>eRecht24</Link></p>
+            <p>Haftungsausschluss:</p>
+            <p className={styles.firstCounter}>Inhalt des Onlineangebotes</p>
+            <p>Der Landkreis Uelzen (Landkreis) übernimmt keinerlei Gewähr für die Aktualität, Korrektheit,
+                Vollständigkeit oder Qualität der bereitgestellten Informationen. Haftungsansprüche, welche sich auf
+                Schäden materieller oder ideeller Art beziehen, die durch die Nutzung oder Nichtnutzung der dargebotenen
+                Informationen bzw. durch die Nutzung fehlerhafter und unvollständiger Informationen verursacht wurden,
+                sind grundsätzlich ausgeschlossen, sofern seitens des Landkreises Uelzen kein nachweislich vorsätzliches
+                oder grob fahrlässiges Verschulden vorliegt. Alle Angebote sind freibleibend und unverbindlich. Der
+                Landkreis behält es sich ausdrücklich vor, Teile der Seiten oder das gesamte Angebot ohne gesonderte
+                Ankündigung zu verändern, zu ergänzen, zu löschen oder die Veröffentlichung zeitweise oder endgültig
+                einzustellen.</p>
+            <p className={styles.counter}>Verweise und Links</p>
+            <p>Das Internetangebot des Landkreises kann externe Links auf die Internetseiten Dritter enthalten. Auf den
+                Inhalt hat der Landkreis keinen Einfluss. Der Landkreis übernimmt keine Verantwortung für die Inhalte
+                und die Verfügbarkeit von Internetseiten Dritter, die über externe Links dieses Informationsangebotes
+                erreicht werden. Der Landkreis distanziert sich ausdrücklich von allen Inhalten, die möglicherweise
+                straf- oder haftungsrechtlich relevant sind oder gegen die guten Sitten verstoß.</p>
+            <p className={styles.counter}>Urheber- und Kennzeichenrecht</p>
+            <p>Der Landkreis ist bestrebt, in allen Publikationen die Urheberrechte der verwendeten Grafiken,
+                Tondokumente, Videosequenzen und Texte zu beachten, von ihm selbst erstellte Grafiken, Tondokumente,
+                Videosequenzen und Texte zu nutzen oder auf lizenzfreie Grafiken, Tondokumente, Videosequenzen und Texte
+                zurückzugreifen.</p>
+            <p>Alle innerhalb des Internetangebotes genannten und ggf. durch Dritte geschützten Marken- und Warenzeichen
+                unterliegen uneingeschränkt den Bestimmungen des jeweils gültigen Kennzeichenrechts und den
+                Besitzrechten der jeweiligen eingetragenen Eigentümer. Allein aufgrund der bloßen Nennung ist nicht der
+                Schluss zu ziehen, dass Markenzeichen nicht durch Rechte Dritter geschützt sind!</p>
+            <p>Das Copyright für veröffentlichte, selbst erstellte Objekte bleibt allein beim Landkreis. Eine
+                Vervielfältigung oder Verwendung solcher Grafiken, Tondokumente, Videosequenzen und Texte in anderen
+                elektronischen oder gedruckten Publikationen ist ohne ausdrückliche Zustimmung des Landkreises nicht
+                gestattet.</p>
+        </>
+    );
+}
+
+export default Impressum;