mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-17 15:29:41 +02:00
| .. | ||
| public | ||
| src | ||
| .env.example | ||
| .gitignore | ||
| .prettierrc | ||
| AI_MODELS_COLLECTION_SETUP.md | ||
| astro.config.mjs | ||
| CASE_STUDIES_DOCUMENTATION.md | ||
| CHANGELOG_COLLECTION_SETUP.md | ||
| GALLERY_COLLECTION_SETUP.md | ||
| package.json | ||
| PROMPT_TEMPLATES_DOCUMENTATION.md | ||
| README.md | ||
| tailwind.config.mjs | ||
| tsconfig.json | ||
| TUTORIALS_COLLECTION_SETUP.md | ||
Landing Page - Picture
Marketing Landing Page für Picture, gebaut mit Astro.
🚀 Tech Stack
- Astro 5.2 - Static Site Generator
- Tailwind CSS 3.4 - Styling
- TypeScript - Type Safety
📦 Features
- ✅ Ultraschnell (0 JS by default)
- ✅ SEO-optimiert
- ✅ Static Site Generation
- ✅ Hot Module Replacement (HMR)
- ✅ Tailwind CSS Integration
- ✅ TypeScript Support
🛠️ Development
Voraussetzungen
- Node.js 20+
- pnpm 9+
Installation
# Von der Root des Monorepos
pnpm install
# Oder direkt im Landing-Ordner
cd apps/landing
pnpm install
Development Server starten
# Von der Root
pnpm dev:landing
# Oder direkt im Landing-Ordner
pnpm dev
Der Development Server läuft auf: http://localhost:4321
Scripts
pnpm dev # Development Server starten
pnpm start # Alias für dev
pnpm build # Production Build erstellen (mit Type-Check)
pnpm preview # Build Preview anzeigen
pnpm type-check # TypeScript Type Checking
pnpm lint # Code linten
pnpm format # Code formatieren mit Prettier
pnpm clean # Build-Artefakte löschen
📁 Struktur
apps/landing/
├── src/
│ ├── layouts/
│ │ └── Layout.astro # Base Layout
│ ├── pages/
│ │ └── index.astro # Homepage
│ ├── styles/
│ │ └── global.css # Globale Styles
│ └── env.d.ts # TypeScript Env Definitionen
├── public/ # Static Assets
├── astro.config.mjs # Astro Konfiguration
├── tailwind.config.js # Tailwind Konfiguration
├── tsconfig.json # TypeScript Konfiguration
└── package.json
🎨 Styling
Das Projekt verwendet Tailwind CSS für Styling:
<!-- Beispiel -->
<div class="container mx-auto px-4 py-8">
<h1 class="text-4xl font-bold">Welcome to Picture</h1>
</div>
Globale Styles
Globale Styles werden in src/styles/global.css definiert und im Layout importiert.
🏗️ Build
Production Build
pnpm build
Output: dist/ - Enthält alle statischen Dateien für Deployment
Build Preview
pnpm preview
Zeigt die gebaute Version lokal an: http://localhost:4321
🚢 Deployment
Die Landing Page ist eine statische Website und kann auf jedem Static Host deployed werden:
Empfohlene Hosts
-
Cloudflare Pages (empfohlen)
- Build Command:
pnpm build - Output Directory:
dist - Node Version: 20+
- Build Command:
-
Netlify
- Build Command:
pnpm build - Publish Directory:
dist
- Build Command:
-
Vercel
- Build Command:
pnpm build - Output Directory:
dist
- Build Command:
Cloudflare Pages Deployment
# Build erstellen
pnpm build
# Via Cloudflare Pages Dashboard deployen
# oder via CLI:
wrangler pages deploy dist
📝 Content Management
Neue Seite hinzufügen
Erstelle eine neue .astro Datei in src/pages/:
---
// src/pages/about.astro
import Layout from '../layouts/Layout.astro';
---
<Layout title="About - Picture">
<main>
<h1>About Us</h1>
<p>Welcome to Picture</p>
</main>
</Layout>
Die Seite ist dann verfügbar unter: /about
Component erstellen
---
// src/components/Hero.astro
interface Props {
title: string;
subtitle?: string;
}
const { title, subtitle } = Astro.props;
---
<section class="hero">
<h1>{title}</h1>
{subtitle && <p>{subtitle}</p>}
</section>
<style>
.hero {
text-align: center;
padding: 4rem 2rem;
}
</style>
🔧 Konfiguration
Astro Config (astro.config.mjs)
import { defineConfig } from 'astro/config';
import tailwind from '@astrojs/tailwind';
export default defineConfig({
integrations: [tailwind()],
output: 'static',
});
Tailwind Config (tailwind.config.js)
export default {
content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
theme: {
extend: {},
},
plugins: [],
};
🔍 SEO
Astro ist von Haus aus SEO-optimiert:
- ✅ Server-Side Rendering zur Build-Zeit
- ✅ Keine unnötigen Client-Side JavaScript
- ✅ Optimierte HTML-Struktur
- ✅ Unterstützt Meta Tags out of the box
SEO Meta Tags hinzufügen
---
// src/layouts/Layout.astro
interface Props {
title: string;
description?: string;
}
const { title, description } = Astro.props;
---
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>{title}</title>
{description && <meta name="description" content={description} />}
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
</head>
<body>
<slot />
</body>
</html>
📚 Weitere Ressourcen
🤝 Integration mit Monorepo
Die Landing Page ist Teil des Picture Monorepos:
# Von der Root alle Apps starten
pnpm dev
# Nur Landing Page starten
pnpm dev:landing
# Landing Page bauen
pnpm build:landing
Siehe Monorepo Docs für Details.