Files

2026-03-12 20:16:40 -04:00

6.5 KiB

Raw Blame History

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

cd cachetdeco
npm install
npm run dev

Ouvre 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 :

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

Créez un dépôt GitHub et poussez le code
Dans Cloudflare Pages, créez un nouveau projet connecté à ce dépôt
Configurez :
- Build command : npm run build
- Build output directory : dist
- Node.js version : 18
Ajoutez les variables d'environnement (RESEND_API_KEY, CONTACT_EMAIL)
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

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

Modifiez public/admin/config.yml :

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

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 :

Ajoutez 'en' dans src/i18n/config.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' },
};

Ajoutez 'en' dans astro.config.mjs :
```
i18n: { locales: ['fr', 'en'], ... }
```
Traduisez toutes les clés dans src/i18n/ui.ts (section en: { ... })
Créez src/pages/en/ avec les 4 fichiers de page (ils importent les mêmes composants)
Ajoutez en dans public/admin/config.yml sous i18n.locales
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

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

6.5 KiB Raw Blame History Unescape Escape