mirror of https://github.com/Memo-2023/mana-monorepo.git synced 2026-05-17 17:29:41 +02:00

Till-JS c712a2504a feat: integrate uload and picture, unify package naming

- Add uload project with apps/web structure
  - Reorganize from flat to monorepo structure
  - Remove PocketBase binary and local data
  - Update to pnpm and @uload/web namespace

- Add picture project to monorepo
  - Remove embedded git repository

- Unify all package names to @{project}/{app} schema:
  - @maerchenzauber/* (was @storyteller/*)
  - @manacore/* (was manacore-*, manacore)
  - @manadeck/* (was web, backend, manadeck)
  - @memoro/* (was memoro-web, landing, memoro)
  - @picture/* (already unified)
  - @uload/web

- Add convenient dev scripts for all apps:
  - pnpm dev:{project}:web
  - pnpm dev:{project}:landing
  - pnpm dev:{project}:mobile
  - pnpm dev:{project}:backend

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

2025-11-25 04:00:36 +01:00

5.2 KiB

Raw Blame History

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+
Netlify
- Build Command: pnpm build
- Publish Directory: dist
Vercel
- Build Command: pnpm build
- Output Directory: dist

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.

5.2 KiB Raw Blame History