--- title: Test MDX Sync - Article de démonstration label: Test MDX Sync slug: 'test-mdx-sync-demo' order: 10 desc: Cet article de test démontre la synchronisation bidirectionnelle entre GitHub (MDX) et PayloadCMS (Lexical) pour le site CAPM. keywords: mdx, lexical, sync, payload, github, capm, test publishedAt: '2024-01-15T10:00:00.000Z' categories: [] heroImage: null --- # Le nouveau site de CAPM : votre vitrine locale au cœur du Pays Martignolais ## Un outil pensé pour vous tous Après plusieurs mois de travail, nous vous présentons le [nouveau site de CAPM](https://capm35.fr/annuaire) – **CAPM signifie Commerçants et Artisans du Pays Martignolais**. Plus qu'un simple annuaire, c'est une véritable plateforme numérique dédiée aux commerçants, artisans et entreprises de **Martigné-Ferchaud**, **Chelun**, **Eancé** et **Forges la Forêt** (35640). Découvrez comment cette nouvelle vitrine numérique peut vous servir, que vous soyez résident du Pays Martignolais, visiteur ou entrepreneur local. --- ## Pour les adhérents : se faire connaître et attirer clients ### Une visibilité maximale en quelques clics Votre entreprise mérite d'être vue. Sur notre nouveau site, chaque adhérent bénéficie d'une **fiche entreprise complète et professionnelle** : - **Vos coordonnées, horaires et localisation** précises (carte interactive) - **Vos catégories d'activité** pour être trouvé facilement - **Vos liens directs** : téléphone, site web, réseaux sociaux - **Vos photos et logo** pour montrer votre activité en image « _C'est important que nos clients nous trouvent rapidement. Ce site nous donne une vraie présence en ligne_ », témoigne l'un de nos adhérents. ### Augmentez votre audience locale Selon nos statistiques, **70% des clients recherchent un commerce local en ligne avant de le visiter**. Le nouveau site de CAPM vous place directement devant ces futurs clients. Vous apparaissez dans nos listes de commerçants et artisans, regroupés par catégorie, ce qui facilite la recherche pour les visiteurs. ### Les entreprises mises en avant D'autres commerces du secteur bénéficient déjà d'une place de choix en tant qu'entreprises vedettes. Vous voulez plus de visibilité ? Pour seulement **90€ par an**, faites briller votre entreprise et attirez davantage de clients. --- ## Pour les résidents du Pays Martignolais : trouvez vos commerçants et artisans ### Un annuaire pensé pour vous Besoin d'un plombier, d'une boulangerie, d'un salon de coiffure ? Vous êtes résident du secteur et vous cherchez à **soutenir l'économie locale** ? Le site propose un [**annuaire facile à consulter**](https://capm35.fr/annuaire) des commerces et artisans du Pays Martignolais. Cherchez, filtrez par catégorie, et trouvez rapidement ce qu'il vous faut. À chaque fiche : horaires, coordonnées, localisation sur la carte, liens téléphone et réseaux sociaux. --- ## Pour les visiteurs : explorez le Pays Martignolais ### Préparez votre visite Vous visitez le Pays Martignolais pour la première fois ? Ou vous y revenez régulièrement ? Notre site vous aide à **découvrir l'offre commerciale locale** avant ou pendant votre séjour : - **Restaurants, hôtels, chambres d'hôtes** pour vos besoins d'hébergement et restauration - **Artisans et commerces de proximité** pour vos achats du quotidien - **Services touristiques** pour enrichir votre visite ### Une région à vivre Au-delà de l'annuaire, consultez notre [**rubrique Actualités**](https://capm35.fr/actualites) pour suivre les événements locaux, les animations et les manifestations du secteur. C'est votre guide pour ne rien manquer du dynamisme du Pays Martignolais. --- - **Témoignages d'entrepreneurs** : portraits et histoires des membres CAPM Restez connectés pour suivre toute l'actualité du secteur directement sur le site ! ### Ne manquez rien : abonnez-vous à la newsletter Envie de recevoir directement dans votre boîte mail les bons plans, événements et actualités de CAPM ? **[Abonnez-vous à notre newsletter](https://capm35.fr/newsletter/subscribe)** et restez informé de tout ce qui se passe dans le Pays Martignolais. C'est gratuit, simple, et vous pouvez vous désabonner à tout moment. --- ## À retenir **Le nouveau site de CAPM, c'est :** - 🏪 Un annuaire professionnel et facile à consulter - 🗺️ Des fiches détaillées avec localisation et horaires - 📱 Une plateforme mobile-friendly pour chercher en déplacement - 📰 L'actualité locale pour suivre les événements - 💬 Une vraie vitrine pour les adhérents --- ## Vous êtes adhérent ? Mettez à jour votre profil Votre fiche est-elle à jour ? N'oubliez pas de vérifier vos **coordonnées, horaires d'ouverture et photos**. Plus votre profil est complet, mieux vous serez trouvé ! [**Contactez-nous**](/contact) pour mettre à jour vos informations ou ajouter des visuels. ## Vous n'êtes pas encore adhérent ? C'est le moment ! Rejoignez **CAPM** et profitez d'une **visibilité professionnelle** auprès de milliers de visiteurs du Pays Martignolais. Pour seulement 90€ par an, faites connaître votre entreprise. [**Adhérez dès maintenant**](/contact?subject=adhesion) et développez votre activité locale. Ensemble, soutenons l'économie locale. --- **Des questions ? Une information/actualité à partager ? [Contactez-nous](/contact) ou écrivez à contact@capm35.fr** # Bienvenue dans le système MDX Sync Cet article de test démontre la **synchronisation bidirectionnelle** entre GitHub (MDX) et PayloadCMS (Lexical). ## Fonctionnalités testées Le système permet de : - ✅ Importer des articles MDX depuis GitHub - ✅ Convertir automatiquement le contenu vers Lexical - ✅ Éditer visuellement dans PayloadCMS - ✅ Pousser automatiquement vers GitHub après édition Ce bloc **Banner** démontre l'utilisation d'un composant personnalisé avec du contenu en **markdown** ! ## Exemple de code Voici un exemple de block Code avec du TypeScript :


interface Article {
  title: string
  slug: string
  publishedAt: string
  content: string
}

const createArticle = (data: Article): Article => {
console.log('Creating article:', data.title)
return data
}

export default createArticle

## Markdown classique Le système supporte tout le markdown standard : - **Gras** et _italique_ - Listes à puces et numérotées - [Liens](https://capm35.fr) - `Code inline` ### Citations > Cette citation démontre le support des blockquotes. > Le contenu est préservé lors de la conversion. ### Listes numérotées 1. Première étape : écrire l'article en MDX 2. Deuxième étape : synchroniser vers PayloadCMS 3. Troisième étape : éditer visuellement si nécessaire 4. Quatrième étape : profiter de la synchronisation automatique ! ## Tests des blocks avancés ⚠️ Attention : ce système est en phase de test. Assurez-vous d'avoir configuré les variables d'environnement GitHub avant de l'utiliser. ### Code JavaScript


// Exemple de code JavaScript
const fetchPosts = async () => {
  const response = await fetch('/api/frontend/posts')
  const data = await response.json()
  return data.docs
}

fetchPosts().then(posts => {
console.log(`Nombre d'articles: ${posts.length}`)
})

### Code CSS


.article {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
}

.article h1 {
font-size: 2.5rem;
color: #1a1a1a;
margin-bottom: 1rem;
}

.article p {
line-height: 1.6;
color: #333;
}

## Bannières de différents styles ✅ **Succès !** Ce bloc démontre une bannière de succès avec du texte en gras et des émojis. ❌ **Erreur !** Cette bannière simule un message d'erreur pour tester tous les styles disponibles. ## Architecture du système Le système fonctionne selon le schéma suivant : ``` GitHub (MDX) ↕ │ Sync via API /api/sync-posts (manuel) │ Push via hook afterChange (auto) ↕ PayloadCMS (Lexical) ``` ### Composants principaux 1. **Utilitaires de conversion** (`mdx-utils.ts`) - `parseMDX` : Parse le frontmatter YAML - `mdxToLexical` : Convertit MDX → Lexical - `lexicalToMdx` : Convertit Lexical → MDX 2. **Helpers GitHub** (`github.ts`) - `fetchMDXFile` : Récupère un fichier depuis GitHub - `updateGitHubFile` : Met à jour un fichier sur GitHub - `listMDXFiles` : Liste tous les fichiers MDX 3. **Hooks de synchronisation** - `syncFromGitHub` : Import depuis GitHub - `pushToGitHub` : Export automatique vers GitHub 4. **Blocks avec converters JSX** - Banner : Bannières d'information avec styles - Code : Blocks de code avec coloration syntaxique - MediaBlock : Images standalone - MediaContent : Images avec contenu texte ## Utilisation ### Pour les développeurs Écrivez vos articles en MDX dans le dossier `articles/` : ```bash articles/ ├── mon-article.mdx ├── autre-article.mdx └── test-mdx-sync.mdx ``` Puis synchronisez vers PayloadCMS : ```bash curl -X POST http://localhost:3000/api/sync-posts \ -H "Content-Type: application/json" \ -H "Cookie: payload-token=TOKEN" \ -d '{"paths": ["articles/mon-article.mdx"]}' ``` ### Pour les non-développeurs Créez et éditez vos articles visuellement dans l'interface PayloadCMS : 1. Ouvrez `http://localhost:3000/admin/collections/posts` 2. Cliquez sur "Create New" 3. Remplissez le titre et le contenu 4. Ajoutez un `githubPath` pour activer la sync GitHub 5. Sauvegardez → **Auto-push vers GitHub** 🎉 ## Conclusion Cet article de test démontre toutes les fonctionnalités du système MDX Sync : 1. ✅ Frontmatter YAML complet avec metadata riche 2. ✅ Markdown standard (headings, lists, links, quotes) 3. ✅ Blocks personnalisés (Banner, Code) 4. ✅ Conversion bidirectionnelle MDX ↔ Lexical 5. ✅ Préservation du formatage et des styles 6. ✅ Support des émojis et caractères spéciaux 7. ✅ Documentation intégrée Le système est prêt à être utilisé en production pour le site CAPM ! 🚀 --- _Article de test généré pour démonstration du système MDX ↔ Lexical Sync_ _Dernière mise à jour : 15 janvier 2024_

Actualités

Un site web pour CAPM

Un site web pour CAPM