Projekt mit Devcontainer einrichten

2026-09-24 13:33:57 +00:00 · 2026-09-24 13:33:57 +00:00 · b44a217d0c
commit b44a217d0c
12 changed files with 1351 additions and 0 deletions
--- a/.devcontainer/devcontainer.json
+++ b/.devcontainer/devcontainer.json
@ -0,0 +1,21 @@
+{
+    "name": "Ernaehrungsberatung",
+    "image": "mcr.microsoft.com/devcontainers/javascript-node:24-bookworm",
+    "remoteUser": "node",
+    "forwardPorts": [5173],
+    "portsAttributes": {
+        "5173": {
+            "label": "Webseite",
+            "onAutoForward": "notify"
+        }
+    },
+    "postCreateCommand": "if [ -f package-lock.json ]; then npm ci; else npm install; fi",
+    "customizations": {
+        "vscode": {
+            "extensions": [
+                "esbenp.prettier-vscode",
+                "EditorConfig.EditorConfig"
+            ]
+        }
+    }
+}
--- a/.editorconfig
+++ b/.editorconfig
@ -0,0 +1,12 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true
+
+[*.md]
+trim_trailing_whitespace = false
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,8 @@
+node_modules/
+dist/
+.env
+.env.*
+!.env.example
+.DS_Store
+Thumbs.db
+*.log
--- a/.prettierignore
+++ b/.prettierignore
@ -0,0 +1,3 @@
+node_modules/
+dist/
+package-lock.json
--- a/.prettierrc.json
+++ b/.prettierrc.json
@ -0,0 +1,6 @@
+{
+    "singleQuote": false,
+    "semi": true,
+    "tabWidth": 4,
+    "trailingComma": "all"
+}
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@ -0,0 +1,7 @@
+{
+    "recommendations": [
+        "ms-vscode-remote.remote-containers",
+        "esbenp.prettier-vscode",
+        "EditorConfig.EditorConfig"
+    ]
+}
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -0,0 +1,9 @@
+{
+    "editor.formatOnSave": true,
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.tabSize": 4,
+    "editor.insertSpaces": true,
+    "files.eol": "\n",
+    "files.insertFinalNewline": true,
+    "files.trimTrailingWhitespace": true
+}
--- a/index.html
+++ b/index.html
@ -0,0 +1,39 @@
+<!doctype html>
+<html lang="de">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <meta
+            name="description"
+            content="Individuelle 1:1-Ernährungsberatung für deinen Alltag und Sport."
+        />
+        <title>1:1-Ernährungsberatung</title>
+    </head>
+    <body>
+        <header class="container">
+            <a href="/" aria-label="Startseite">Ernährungsberatung</a>
+        </header>
+
+        <main class="container">
+            <h1>Ernährung, die zu dir passt.</h1>
+            <p>
+                Individuelle 1:1-Beratung für deinen Alltag und deine
+                sportlichen Ziele.
+            </p>
+            <a href="#beratung">Beratung kennenlernen</a>
+
+            <section id="beratung" aria-labelledby="beratung-heading">
+                <h2 id="beratung-heading">Deine persönliche Beratung</h2>
+                <p>
+                    Hier stellen wir bald unseren Ablauf und unser Angebot vor.
+                </p>
+            </section>
+        </main>
+
+        <footer class="container">
+            <p>© <span id="year"></span> Ernährungsberatung</p>
+        </footer>
+
+        <script type="module" src="/src/main.js"></script>
+    </body>
+</html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,20 @@
+{
+    "name": "ernaehrungsberatung",
+    "version": "0.1.0",
+    "private": true,
+    "type": "module",
+    "engines": {
+        "node": "24.x"
+    },
+    "scripts": {
+        "dev": "vite --host 0.0.0.0 --port 5173 --strictPort",
+        "build": "vite build",
+        "preview": "vite preview --host 0.0.0.0 --port 5173 --strictPort",
+        "format": "prettier --write .",
+        "format:check": "prettier --check ."
+    },
+    "devDependencies": {
+        "prettier": "^3.6.2",
+        "vite": "^7.1.7"
+    }
+}
--- a/src/main.js
+++ b/src/main.js
@ -0,0 +1,3 @@
+import "./styles.css";
+
+document.querySelector("#year").textContent = new Date().getFullYear();
--- a/src/styles.css
+++ b/src/styles.css
@ -0,0 +1,39 @@
+:root {
+    font-family: system-ui, sans-serif;
+    color: #18352b;
+    background: #f7faf7;
+    line-height: 1.6;
+}
+
+* {
+    box-sizing: border-box;
+}
+
+body {
+    margin: 0;
+}
+
+.container {
+    width: min(100% - 2rem, 64rem);
+    margin-inline: auto;
+    padding-block: 1.5rem;
+}
+
+h1 {
+    max-width: 18ch;
+    font-size: clamp(2rem, 6vw, 4rem);
+    line-height: 1.1;
+}
+
+a {
+    color: #176448;
+}
+
+a:focus-visible {
+    outline: 3px solid currentColor;
+    outline-offset: 4px;
+}
+
+section {
+    margin-block: 4rem;
+}