scaffold
This commit is contained in:
194
README.md
Normal file
194
README.md
Normal file
@@ -0,0 +1,194 @@
|
||||
# Cachet Peintres Décorateurs — Site Web
|
||||
|
||||
Site vitrine statique pour **Cachet Peintres Décorateurs** (9500-5609 Québec Inc).
|
||||
Construit avec **Astro v5 + Tailwind v4 + Decap CMS**, déployé sur **Cloudflare Pages**.
|
||||
|
||||
## Stack
|
||||
|
||||
| Technologie | Rôle |
|
||||
|---|---|
|
||||
| Astro v5 | Framework SSG (zéro JS par défaut) |
|
||||
| Tailwind v4 | CSS utility-first (config par `@theme` dans global.css) |
|
||||
| Decap CMS | Interface d'édition de contenu (via `/admin/`) |
|
||||
| Cloudflare Pages | Hébergement statique + CDN global |
|
||||
| Cloudflare Functions | Traitement du formulaire de soumission |
|
||||
| Resend | Envoi de courriel via API |
|
||||
|
||||
## Prérequis
|
||||
|
||||
- Node.js ≥ 18
|
||||
- npm ≥ 9
|
||||
|
||||
## Installation locale
|
||||
|
||||
```bash
|
||||
cd cachetdeco
|
||||
npm install
|
||||
npm run dev
|
||||
```
|
||||
|
||||
Ouvre [http://localhost:4321](http://localhost:4321) dans le navigateur.
|
||||
|
||||
## Structure du projet
|
||||
|
||||
```
|
||||
cachetdeco/
|
||||
├── public/
|
||||
│ ├── admin/ # Decap CMS (index.html + config.yml)
|
||||
│ ├── fonts/ # Polices Cocogoose & Geoform
|
||||
│ ├── images/ # Images statiques (logo, uploads CMS)
|
||||
│ ├── favicon.svg
|
||||
│ └── robots.txt
|
||||
├── functions/
|
||||
│ └── api/
|
||||
│ └── soumission.ts # Cloudflare Pages Function → Resend API
|
||||
├── src/
|
||||
│ ├── i18n/ # Infrastructure i18n
|
||||
│ │ ├── config.ts # Locales et routes
|
||||
│ │ ├── ui.ts # Traductions FR
|
||||
│ │ └── utils.ts # Fonctions getLangFromUrl() et t()
|
||||
│ ├── components/ # Composants Astro réutilisables
|
||||
│ ├── content/ # Contenu géré par CMS
|
||||
│ │ ├── services/fr/ # Services en markdown
|
||||
│ │ └── settings/ # general.json et seo.json
|
||||
│ ├── content.config.ts # Définitions des collections (Astro v5)
|
||||
│ ├── layouts/
|
||||
│ │ └── BaseLayout.astro
|
||||
│ ├── pages/ # Pages Astro (routes)
|
||||
│ └── styles/
|
||||
│ └── global.css # Tailwind + @theme brand tokens
|
||||
├── astro.config.mjs
|
||||
├── tsconfig.json
|
||||
├── .env.example
|
||||
└── package.json
|
||||
```
|
||||
|
||||
## Variables d'environnement
|
||||
|
||||
Copiez `.env.example` en `.env` pour le développement local :
|
||||
|
||||
```bash
|
||||
cp .env.example .env
|
||||
```
|
||||
|
||||
| Variable | Description | Où la configurer |
|
||||
|---|---|---|
|
||||
| `RESEND_API_KEY` | Clé API Resend (envoi de courriels) | Cloudflare Pages > Settings > Environment variables |
|
||||
| `CONTACT_EMAIL` | Adresse de destination des soumissions | Cloudflare Pages > Settings > Environment variables |
|
||||
|
||||
> **Note :** Ces variables NE doivent PAS être dans le code source. Elles sont injectées au runtime par Cloudflare Pages Functions.
|
||||
|
||||
## Déploiement sur Cloudflare Pages
|
||||
|
||||
1. Créez un dépôt GitHub et poussez le code
|
||||
2. Dans Cloudflare Pages, créez un nouveau projet connecté à ce dépôt
|
||||
3. Configurez :
|
||||
- **Build command :** `npm run build`
|
||||
- **Build output directory :** `dist`
|
||||
- **Node.js version :** 18
|
||||
4. Ajoutez les variables d'environnement (`RESEND_API_KEY`, `CONTACT_EMAIL`)
|
||||
5. Déclenchez un déploiement
|
||||
|
||||
Les fonctions dans `functions/` sont automatiquement déployées comme Cloudflare Pages Functions.
|
||||
|
||||
## Gestion du contenu (Decap CMS)
|
||||
|
||||
### Configuration initiale
|
||||
|
||||
1. Créez un **GitHub OAuth App** :
|
||||
- GitHub > Settings > Developer settings > OAuth Apps > New OAuth App
|
||||
- Homepage URL : `https://cachetdeco.com`
|
||||
- Authorization callback URL : `https://cachetdeco.com/admin/`
|
||||
- Notez le **Client ID**
|
||||
|
||||
2. Modifiez `public/admin/config.yml` :
|
||||
```yaml
|
||||
backend:
|
||||
name: github
|
||||
repo: your-org/cachetdeco # Remplacez par votre dépôt
|
||||
branch: main
|
||||
auth_type: pkce
|
||||
app_id: YOUR_GITHUB_OAUTH_APP_CLIENT_ID # Remplacez par votre Client ID
|
||||
```
|
||||
|
||||
3. Accédez à `https://cachetdeco.com/admin/` et connectez-vous avec GitHub
|
||||
|
||||
### Flux de publication
|
||||
|
||||
```
|
||||
Éditeur → Decap CMS (/admin/) → Commit GitHub → Webhook → Cloudflare Pages Build → Site mis à jour
|
||||
```
|
||||
|
||||
Le délai de publication est d'environ **1–2 minutes** après une modification.
|
||||
|
||||
### Collections disponibles
|
||||
|
||||
| Collection | Chemin | Description |
|
||||
|---|---|---|
|
||||
| Services | `src/content/services/fr/*.md` | Pages de services (markdown) |
|
||||
| Paramètres généraux | `src/content/settings/general.json` | Nom, téléphone, courriel, adresse |
|
||||
| Paramètres SEO | `src/content/settings/seo.json` | Titre, description, mots-clés par défaut |
|
||||
|
||||
## Branding
|
||||
|
||||
### Palette de couleurs
|
||||
|
||||
| Token | Valeur | Usage |
|
||||
|---|---|---|
|
||||
| `--color-brand-600` | `#314732` | CTA, boutons principaux, titres |
|
||||
| `--color-brand-700` | `#263a27` | Hover state |
|
||||
| `--color-brand-400` | `#7a8876` | Accents, bordures |
|
||||
| `--color-brand-50` | `#f0f4ef` | Fonds de section |
|
||||
| `--color-gray-dark` | `#444445` | Texte courant |
|
||||
| `--color-gray-light` | `#b7b6b6` | Texte secondaire, placeholders |
|
||||
|
||||
### Typographie
|
||||
|
||||
- **Cocogoose Medium** — titres et en-têtes (`font-family: var(--font-display)`)
|
||||
- **Geoform Bold** — corps de texte et sous-titres (`font-family: var(--font-body)`)
|
||||
|
||||
## i18n — Ajouter l'anglais plus tard
|
||||
|
||||
Quand le client souhaite une version anglaise, voici les étapes :
|
||||
|
||||
1. Ajoutez `'en'` dans `src/i18n/config.ts` :
|
||||
```ts
|
||||
export const locales = ['fr', 'en'] as const;
|
||||
export const routes = {
|
||||
services: { fr: 'services', en: 'services' },
|
||||
contact: { fr: 'contact', en: 'contact' },
|
||||
soumission: { fr: 'soumission', en: 'quote' },
|
||||
};
|
||||
```
|
||||
|
||||
2. Ajoutez `'en'` dans `astro.config.mjs` :
|
||||
```js
|
||||
i18n: { locales: ['fr', 'en'], ... }
|
||||
```
|
||||
|
||||
3. Traduisez toutes les clés dans `src/i18n/ui.ts` (section `en: { ... }`)
|
||||
|
||||
4. Créez `src/pages/en/` avec les 4 fichiers de page (ils importent les mêmes composants)
|
||||
|
||||
5. Ajoutez `en` dans `public/admin/config.yml` sous `i18n.locales`
|
||||
|
||||
6. Décommentez le composant `LanguagePicker` dans `Header.astro`
|
||||
|
||||
Aucune refactorisation structurelle n'est nécessaire — l'infrastructure est déjà en place.
|
||||
|
||||
## Mentions légales obligatoires
|
||||
|
||||
Conformément aux exigences légales québécoises, les informations suivantes doivent apparaître visiblement sur le site :
|
||||
|
||||
- **Raison sociale :** 9500-5609 Québec Inc
|
||||
- **Numéro RBQ :** 5839 8736 01 (obligatoire pour tout service nécessitant une modification d'un bâtiment)
|
||||
|
||||
Ces informations sont affichées dans le footer de chaque page.
|
||||
|
||||
## Commandes disponibles
|
||||
|
||||
```bash
|
||||
npm run dev # Serveur de développement local (http://localhost:4321)
|
||||
npm run build # Build de production (dans dist/)
|
||||
npm run preview # Prévisualisation du build de production
|
||||
```
|
||||
Reference in New Issue
Block a user