manu/emmanuelbernard.ch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Astro starter kit minimal et élégant

Browse Source 
- Design minimal monochrome (fond blanc, typo Inter)
- Navigation avec Navbar (Home/About)
- Pages index et about
- Configuration Docker optimisée avec nginx
- SEO et performance optimisés
- Prêt pour la production
This commit is contained in:
Agent de manu
2025-12-08 12:54:35 +00:00
parent 984ecf5d6c
commit 998bdaf1f0
19 changed files with 6691 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
src/components/Navbar.astro Normal file
View File

@@ -0,0 +1,41 @@
---
const currentPath = Astro.url.pathname;
---
<nav class="border-b border-gray-200">
<div class="max-w-4xl mx-auto px-6 py-4">
<div class="flex items-center justify-between">
<a
href="/"
class="text-xl font-semibold tracking-tight text-gray-900 hover:text-gray-600 transition-colors"
>
Starter Kit
</a>
<div class="flex gap-8">
<a
href="/"
class:list={[
"text-sm font-medium transition-colors",
currentPath === "/"
? "text-gray-900"
: "text-gray-500 hover:text-gray-900",
]}
>
Home
</a>
<a
href="/about"
class:list={[
"text-sm font-medium transition-colors",
currentPath === "/about"
? "text-gray-900"
: "text-gray-500 hover:text-gray-900",
]}
>
About
</a>
</div>
</div>
</div>
</nav>

43
src/layouts/BaseLayout.astro Normal file
View File

@@ -0,0 +1,43 @@
---
import "../styles/global.css";
interface Props {
title?: string;
description?: string;
}
const {
title = "Astro Starter Kit",
description = "Un starter kit Astro minimal et élégant",
} = Astro.props;
---
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content={description} />
<meta name="generator" content={Astro.generator} />
<!-- SEO -->
<title>{title}</title>
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:type" content="website" />
<!-- Favicon -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<!-- Google Fonts - Inter -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
rel="stylesheet"
/>
</head>
<body class="font-sans antialiased bg-white text-gray-900">
<slot />
</body>
</html>

61
src/pages/about.astro Normal file
View File

@@ -0,0 +1,61 @@
---
import BaseLayout from "../layouts/BaseLayout.astro";
import Navbar from "../components/Navbar.astro";
---
<BaseLayout
title="About - Astro Starter Kit"
description="À propos de ce starter kit Astro"
>
<Navbar />
<main class="max-w-4xl mx-auto px-6 py-16">
<div class="mb-16">
<h1 class="text-5xl font-bold tracking-tight mb-4">About</h1>
<p class="text-xl text-gray-600 leading-relaxed">
Un starter kit pensé pour la simplicité et l'élégance.
</p>
</div>
<div class="prose prose-gray max-w-none">
<h2 class="text-2xl font-semibold mb-4">Philosophie</h2>
<p class="text-gray-600 leading-relaxed mb-8">
Ce starter kit adopte une approche minimaliste : fournir une
base solide sans superflu, avec les outils essentiels pour
démarrer rapidement un projet web moderne.
</p>
<h2 class="text-2xl font-semibold mb-4">Technologies</h2>
<ul class="space-y-3 text-gray-600">
<li class="flex items-start">
<span class="font-medium text-gray-900 mr-2">Astro</span>
<span>— Framework web moderne avec génération statique</span
>
</li>
<li class="flex items-start">
<span class="font-medium text-gray-900 mr-2">React</span>
<span
>— Bibliothèque UI pour les composants interactifs</span
>
</li>
<li class="flex items-start">
<span class="font-medium text-gray-900 mr-2"
>Tailwind CSS</span
>
<span>— Framework CSS utility-first</span>
</li>
<li class="flex items-start">
<span class="font-medium text-gray-900 mr-2">Docker</span>
<span>— Containerisation pour un déploiement simplifié</span
>
</li>
</ul>
<div class="mt-12 pt-8 border-t border-gray-200">
<p class="text-sm text-gray-500">
Construit avec attention aux détails et à la performance.
</p>
</div>
</div>
</main>
</BaseLayout>

62
src/pages/index.astro Normal file
View File

@@ -0,0 +1,62 @@
---
import BaseLayout from "../layouts/BaseLayout.astro";
import Navbar from "../components/Navbar.astro";
---
<BaseLayout
title="Astro Starter Kit"
description="Un starter kit minimal et élégant avec Astro, React et Tailwind CSS"
>
<Navbar />
<main class="max-w-4xl mx-auto px-6 py-16">
<!-- Hero Section -->
<div class="mb-16">
<h1 class="text-5xl font-bold tracking-tight mb-4">
Astro Starter Kit
</h1>
<p class="text-xl text-gray-600 leading-relaxed">
Un point de départ minimal et élégant pour vos projets web
modernes.
</p>
</div>
<!-- Features -->
<div class="space-y-12">
<div>
<h2 class="text-2xl font-semibold mb-3">Performance</h2>
<p class="text-gray-600 leading-relaxed">
Génération statique ultra-rapide avec Astro. Zéro JavaScript
par défaut, hydratation partielle intelligente uniquement
quand nécessaire.
</p>
</div>
<div>
<h2 class="text-2xl font-semibold mb-3">Design System</h2>
<p class="text-gray-600 leading-relaxed">
Tailwind CSS intégré pour un développement rapide et
cohérent. Typographie soignée avec Inter, design épuré et
moderne.
</p>
</div>
<div>
<h2 class="text-2xl font-semibold mb-3">
Prêt pour la production
</h2>
<p class="text-gray-600 leading-relaxed">
Build Docker multi-stage optimisé, SEO configuré, structure
claire et extensible.
</p>
</div>
</div>
<!-- CTA -->
<div class="mt-16 pt-12 border-t border-gray-200">
<p class="text-sm text-gray-500">
Commencez à construire votre projet dès maintenant.
</p>
</div>
</main>
</BaseLayout>

7
src/styles/global.css Normal file
View File

@@ -0,0 +1,7 @@
@import "tailwindcss";
@layer base {
body {
font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
}