diff --git a/src/content/docs/fr/plugins/extended.mdx b/src/content/docs/fr/plugins/extended.mdx
new file mode 100644
index 00000000..d2ac6553
--- /dev/null
+++ b/src/content/docs/fr/plugins/extended.mdx
@@ -0,0 +1,316 @@
+---
+i18nReady: true
+title: Rendre les modules d’extension utiles
+description: Découvrez les modules d’extension de StudioCMS et leur fonctionnement.
+sidebar:
+ order: 2
+---
+
+import ReadMore from '~/components/ReadMore.astro'
+import { FileTree } from '@astrojs/starlight/components'
+
+# Présentation
+
+Construire un module d’extension pour StudioCMS est un moyen puissant d’étendre les fonctionnalités de StudioCMS. Il offre une solution simple et flexible pour ajouter de nouvelles fonctionnalités à votre projet StudioCMS. Voici un exemple simple de création et de fonctionnement d’un module d’extension pour StudioCMS.
+
+## Mise en route
+
+Pour commencer, vous devez créer un nouveau module d’extension pour StudioCMS. Voici un exemple de structure de fichier pour un module d’extension pour StudioCMS :
+
+
+
+- package.json
+- src
+ - index.ts
+ - routes
+ - [...slug].astro
+ - dashboard-grid-items
+ - MyPluginGridItem.astro
+
+
+
+## Création du module d’extension
+
+Dans le fichier principal `src/index.ts`, vous définirez le module d’extension pour StudioCMS. Voici un exemple de définition d’un module d’extension pour StudioCMS incluant une intégration Astro pour créer un blog simple :
+
+```ts twoslash title="index.ts"
+import { definePlugin } from 'studiocms/plugins';
+import { AstroIntegration } from 'astro';
+import { addVirtualImports, createResolver } from 'astro-integration-kit';
+
+// Définir les options du module d’extension et de l’intégration
+interface Options {
+ route: string;
+}
+
+export function studioCMSPageInjector(options: Options) {
+
+ // Résoudre le chemin d’accès au fichier actuel
+ const { resolve } = createResolver(import.meta.url);
+
+ // Définir l’intégration Astro
+ function monIntegration(options: Options): AstroIntegration {
+ const route = `/${options?.route || 'mon-module-extension'}`;
+
+ return {
+ name: 'mon-integration-astro',
+ hooks: {
+ "astro:config:setup": (params) => {
+ const { injectRoute } = params;
+
+ // Injecter la route pour le module d’extension
+ injectRoute({
+ entrypoint: resolve('./routes/[...slug].astro'),
+ pattern: `/${route}/[...slug]`,
+ prerender: false,
+ })
+
+ addVirtualImports(params, {
+ name: 'mon-integration-astro',
+ imports: {
+ 'myplugin:config': `
+ export const options = ${JSON.stringify({ route })};
+ export default options;
+ `,
+ }
+ })
+ }
+ }
+ }
+ }
+
+ // Définir le module d’extension pour StudioCMS
+ return definePlugin({
+ identifier: 'mon-module-extension',
+ name: "Mon module d’extension",
+ studiocmsMinimumVersion: '0.1.0-beta.8',
+ integration: monIntegration(options), // Facultatif, mais recommandé
+ // Définir les liens de navigation front-end pour le module d’extension (facultatif)
+ // Ceci est utile si vous utilisez les assistants de navigation intégrés de StudioCMS dans votre mise en page,
+ // par exemple lorsque vous utilisez le module d’extension `@studiocms/blog`.
+ frontendNavigationLinks: [{ label: 'Le titre ici', href: options?.route || 'mon-module-extension' }],
+ // Lors de la création de types de page, vous pouvez également définir un composant pour le contenu de la page (`pageContentComponent`) si votre module d’extension nécessite un éditeur de contenu personnalisé.
+ // pageTypes: [{ identifier: 'mon-module-extension', label: "Article de blog (Mon module d’extension)", pageContentComponent: resolve('./components/MyContentEditor.astro') }],
+ // Dans cet exemple, nous choisissons d’utiliser l’éditeur de contenu par défaut (Markdown).
+ pageTypes: [{ identifier: 'mon-module-extension', label: "Article de blog (Mon module d’extension)" }],
+ // Définir les éléments de la grille pour le tableau de bord
+ // Ce sont les éléments qui seront affichés dans le tableau de bord de StudioCMS
+ // Vous pouvez définir autant d’éléments que vous le souhaitez
+ // Dans cet exemple, nous définissons un seul élément, qui a une étendue de 2, qui nécessite l’autorisation « editor » et qui injecte un composant Astro qui remplace l’élément personnalisé HTML simple.
+ dashboardGridItems: [
+ {
+ name: 'exemple',
+ span: 2,
+ variant: 'default',
+ requiresPermission: 'editor',
+ header: { title: 'Exemple', icon: 'bolt' },
+ body: {
+ // Utilisez toujours du HTML simple sans `-` ou caractères spéciaux dans les balises, ils seront remplacés par le composant Astro et ce HTML ne sera jamais rendu
+ html: '',
+ components: {
+ // Injectez le composant Astro pour remplacer l’élément personnalisé HTML simple
+ examplegriditem: resolve('./dashboard-grid-items/MyPluginGridItem.astro')
+ }
+ }
+ }
+ ],
+ });
+}
+```
+
+L’exemple ci-dessus définit un module d’extension pour StudioCMS incluant une intégration Astro et permettant de créer un exemple de blog simple. Le module d’extension inclut une route injectée dans le projet StudioCMS et un élément de grille affiché dans le tableau de bord de StudioCMS.
+
+Pour plus d’informations sur la création d’une intégration Astro, consultez [Astro Integration Kit](https://astro-integration-kit.netlify.app/) et la [documentation des intégrations Astro](https://docs.astro.build/fr/reference/integrations-reference/).
+
+## Exemple de route
+
+Dans le fichier `src/routes/[...slug].astro`, vous définirez la route du module d’extension. Voici un exemple de définition d’une route pour le module d’extension. Nous la diviserons en deux parties : la première est le frontmatter (entre les barrières `---`), et la seconde est le modèle HTML placé sous la seconde barrière `---`.
+
+```ts twoslash title="Frontmatter"
+// @noErrors
+// @filename: plugin.d.ts
+declare module 'myplugin:config' {
+ export const options: { route: string };
+ export default options;
+}
+// ---cut---
+// @filename: Frontmatter.ts
+///
+///
+import type { AstroGlobal } from 'astro';
+const Astro: AstroGlobal = {};
+// ---cut---
+import { StudioCMSRenderer } from 'studiocms:renderer';
+import sdk from 'studiocms:sdk';
+import config from 'myplugin:config';
+
+const makeRoute = (slug: string) => {
+ return `/${config.route}/${slug}`;
+}
+
+// 'mon-module-extension' est ici utilisé comme identifiant pour
+// le type de page de la définition du module d’extension
+const pages = await sdk.GET.packagePages('mon-module-extension');
+
+const { slug } = Astro.params;
+
+const page = pages.find((page) => page.slug === slug || '');
+```
+
+```astro title="Modèle"
+{
+ slug && page ? (
+
+ )
+}
+```
+
+L’exemple ci-dessus définit une [route dynamique](https://docs.astro.build/fr/guides/routing/#routes-dynamiques) pour le module d’extension qui affiche une liste d’articles de blog lorsqu’aucun slug n’est fourni et affiche le contenu d’un article de blog lorsqu’un slug est fourni.
+
+## Exemple d’élément de grille
+
+Dans le fichier `src/dashboard-grid-items/MyPluginGridItem.astro`, vous définirez l’élément de grille du module d’extension. Voici un exemple de définition d’un élément de grille pour le module d’extension :
+
+```astro title="MyPluginGridItem.astro"
+---
+import { StudioCMSRoutes } from 'studiocms:lib';
+import sdk from 'studiocms:sdk';
+
+// 'mon-module-extension' est ici utilisé comme identifiant pour
+// le type de page à partir de la définition du module d’extension
+const pages = await sdk.GET.packagePages('mon-module-extension');
+
+// Obtenir les 5 pages les plus récemment mises à jour au cours des 30 derniers jours
+const recentlyUpdatedPages = pages
+ .filter((page) => {
+ const now = new Date();
+ const thirtyDaysAgo = new Date(now.setDate(now.getDate() - 30));
+ return new Date(page.updatedAt) > thirtyDaysAgo;
+ })
+ .sort((a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime())
+ .slice(0, 5);
+---
+
+
+```
+
+L’exemple ci-dessus définit un élément de grille pour le module d’extension qui affiche les 5 pages les plus récemment mises à jour au cours des 30 derniers jours. Cet élément inclut une liste de liens vers la page de modification de la gestion de contenu pour chaque page.
+
+## Intégration avec les assistants FrontendNavigationLinks
+
+Si vous souhaitez utiliser les assistants de navigation intégrés de StudioCMS dans votre projet, de la même manière que le fait le module d’extension `@studiocms/blog`, vous pouvez créer un composant `Navigation.astro` personnalisé :
+
+```astro title="Navigation.astro"
+---
+import { StudioCMSRoutes } from 'studiocms:lib';
+import studioCMS_SDK from 'studiocms:sdk/cache';
+import { frontendNavigation } from 'studiocms:plugin-helpers';
+
+// Définir les props pour le composant Navigation
+interface Props {
+ topLevelLinkCount?: number;
+};
+
+// Obtenir le nombre de liens de niveau supérieur à partir des props
+const { topLevelLinkCount = 3 } = Astro.props;
+
+// Obtenir la configuration du site et la liste des pages
+const config = (await studioCMS_SDK.GET.siteConfig()).data;
+
+// Récupérer le titre du site à partir de la configuration
+const { title } = config || { title: 'StudioCMS' };
+
+// Obtenir l’URL du site principal
+const {
+ mainLinks: { baseSiteURL },
+} = StudioCMSRoutes;
+
+// Définir les props de lien pour la navigation
+type LinkProps = {
+ text: string;
+ href: string;
+};
+
+// Définir les liens pour la navigation
+const links: LinkProps[] = await frontendNavigation();
+---
+{/* S’il n’y a pas d’éléments déroulants */}
+{ ( links.length < topLevelLinkCount || links.length === topLevelLinkCount ) && (
+
+) }
+```
+
+L’exemple ci-dessus définit un composant personnalisé `Navigation.astro` qui utilise les assistants de navigation intégrés de StudioCMS pour créer un menu de navigation pour le projet. Ce composant inclut des liens vers l’URL du site principal, la page d’index et toutes les autres pages configurées pour s’afficher dans la navigation.
+
+Il vous suffit d’ajouter quelques styles et vous disposez d’un menu de navigation entièrement fonctionnel qui fonctionne avec les assistants de navigation intégrés de StudioCMS.
diff --git a/src/content/docs/fr/plugins/index.mdx b/src/content/docs/fr/plugins/index.mdx
new file mode 100644
index 00000000..2d94265f
--- /dev/null
+++ b/src/content/docs/fr/plugins/index.mdx
@@ -0,0 +1,298 @@
+---
+i18nReady: true
+title: Les fondamentaux
+description: Découvrez les modules d’extension de StudioCMS et leur fonctionnement.
+sidebar:
+ order: 1
+---
+
+import ReadMore from '~/components/ReadMore.astro'
+
+# Présentation
+
+Les modules d’extension de StudioCMS sont un outil puissant qui vous permet d’étendre les fonctionnalités de StudioCMS. Ils offrent un moyen simple et flexible d’ajouter de nouvelles fonctionnalités à votre projet StudioCMS. Voici une description des modules d’extension de StudioCMS et de leur fonctionnement.
+
+## Que sont les modules d’extension ?
+
+Les modules d’extension de StudioCMS sont similaires aux intégrations Astro, mais ils intègrent des informations supplémentaires à l’objet fonction. Ces informations sont utilisées par StudioCMS pour déterminer comment le module d’extension doit être chargé et utilisé. Les modules d’extension de StudioCMS permettent d’étendre les fonctionnalités de StudioCMS en ajoutant de nouvelles fonctionnalités ou en modifiant celles existantes.
+
+### Le type des modules d’extension de StudioCMS
+
+```ts twoslash
+import { APIRoute, AstroIntegration } from "astro"
+import type { HeroIconName } from '@studiocms/ui/components/Icon/iconType.js';
+import type { SanitizeOptions } from 'ultrahtml/transformers/sanitize';
+import type { SettingsField } from 'studiocms/schemas';
+// ---cut---
+type StudioCMSPlugin = {
+ /**
+ * Identifiant du module d’extension à partir du package.json
+ */
+ identifier: string;
+
+ /**
+ * Libellé du module d’extension à afficher dans le tableau de bord de StudioCMS
+ */
+ name: string;
+
+ /**
+ * Version minimale de StudioCMS requise pour que le module d’extension fonctionne
+ */
+ studiocmsMinimumVersion: string;
+
+ /**
+ * Intégration(s) Astro fournie(s) par le module d’extension
+ */
+ integration?: AstroIntegration | AstroIntegration[] | undefined;
+
+ /**
+ * Si cela est vrai, le module d’extension permettra la génération du plan du site
+ */
+ triggerSitemap?: boolean;
+
+ /**
+ * Permet au module d’extension d’ajouter des points de terminaison de plan de site
+ */
+ sitemaps?: Array<{
+
+ /**
+ * Nom du module d’extension
+ */
+ pluginName: string;
+
+ /**
+ * Chemin d’accès au fichier de point de terminaison XML du plan du site
+ */
+ sitemapXMLEndpointPath: string | URL;
+ }> | undefined;
+
+ /**
+ * Permet au module d’extension d’ajouter des éléments de grille de tableau de bord personnalisés
+ */
+ dashboardGridItems?: Array<{
+
+ /**
+ * Nom de l’élément de la grille
+ */
+ name: string;
+
+ /**
+ * Étendue de l’élément de grille
+ */
+ span: 1 | 2 | 3;
+
+ /**
+ * Variante de carte de l’élément de grille
+ */
+ variant: 'default' | 'filled';
+
+ /**
+ * Autorisation requise pour visualiser l’élément de la grille
+ */
+ requiresPermission?: "owner" | "admin" | "editor" | "visitor";
+
+ /**
+ * Informations d’en-tête de l’élément de grille
+ */
+ header?: {
+
+ /**
+ * Titre de l’élément de la grille
+ */
+ title: string;
+
+ /**
+ * Icône de l’élément de la grille
+ */
+ icon?: HeroIconName;
+ };
+
+ /**
+ * Informations sur le corps de l’élément de la grille
+ */
+ body?: {
+
+ /**
+ * Contenu HTML de l’élément de la grille
+ */
+ html: string;
+
+ /**
+ * Composant affiché dans l’élément de grille
+ */
+ components?: Record;
+
+ /**
+ * Options d’assainissement du contenu HTML
+ */
+ sanitizeOpts?: SanitizeOptions;
+ };
+ }> | undefined;
+
+ /**
+ * Si cela existe, le module d’extension aura sa propre page de paramètres
+ */
+ settingsPage: {
+
+ /**
+ * Champs selon les spécifications
+ */
+ fields: SettingsField[];
+
+ /**
+ * Le point de terminaison des paramètres
+ *
+ * Doit exporter une APIRoute nommée `onSave` qui s’exécute lorsque la page des paramètres est enregistrée
+ */
+ endpoint: string,
+ } | undefined;
+
+ /**
+ * Liens de navigation à utiliser avec le module d’extension `@studiocms/blog` et d’autres modules d’extension pour afficher des liens dans le front-end
+ */
+ frontendNavigationLinks: Array<{
+ label: string;
+ href: string;
+ }>;
+
+ /**
+ * Définition du type de page. Si cette option est présente, le module d’extension souhaite pouvoir modifier le processus de création de page.
+ */
+ pageTypes: Array<{
+
+ /**
+ * Libellé affiché dans l’entrée de sélection
+ */
+ label: string;
+
+ /**
+ * Identifiant enregistré dans la base de données
+ * @example
+ * // Un type de page unique par module d’extension
+ * 'studiocms'
+ * '@studiocms/blog'
+ * // Plusieurs types de pages par module d’extension (utilisez des identifiants uniques pour chaque type pour éviter les conflits)
+ * '@mystudiocms/plugin:pageType1'
+ * '@mystudiocms/plugin:pageType2'
+ * '@mystudiocms/plugin:pageType3'
+ * '@mystudiocms/plugin:pageType4'
+ */
+ identifier: string;
+
+ /**
+ * Description affichée sous l’en-tête « Contenu de la page » si ce type est sélectionné
+ */
+ description: string;
+
+ /**
+ * Le chemin vers le composant réel affiché pour le contenu de la page
+ *
+ * Le composant doit avoir une propriété `content` qui est une chaîne de caractères pour pouvoir afficher le contenu actuel.
+ *
+ * **À NOTER :** Actuellement, vous devez utiliser l’identifiant de formulaire `page-content` pour la sortie du contenu. Votre éditeur doit également pouvoir gérer la soumission des formulaires.
+ *
+ * **À NOTER :** Vous pouvez utiliser `studiocms/markdown` ou `studiocms/html` comme valeur de secours si vous travaillez avec du contenu HTML ou Markdown !
+ *
+ * @example
+ * ```ts
+ * import { createResolver } from 'astro-integration-kit';
+ * const { resolve } = createResolver(import.meta.url)
+ *
+ * {
+ * pageContentComponent: resolve('./components/MonEditeurDeContenu.astro'),
+ * }
+ * ```
+ */
+ pageContentComponent: 'studiocms/markdown' | 'studiocms/html' | string;
+
+ /**
+ * Le chemin vers le composant réel affiché pour le moteur de rendu de page
+ *
+ * **À NOTER :** Vous pouvez utiliser `studiocms/markdown` ou `studiocms/html` comme valeur de secours si vous travaillez avec du contenu HTML ou Markdown !
+ */
+ rendererComponent: 'studiocms/markdown' | 'studiocms/html' | string;
+
+ /**
+ * Champs selon spécifications
+ */
+ fields: SettingsField[];
+
+ /**
+ * Fichier de point de terminaison de l’API pour le type de page
+ *
+ * Les points de terminaison de l’API sont utilisés pour créer, modifier et supprimer des pages de ce type.
+ * Les points de terminaison recevront l’intégralité de l’APIContext d’Astro à partir de l’APIRoute d’Astro.
+ *
+ * Le fichier doit exporter au moins l’un des éléments suivants :
+ * - `onCreate`
+ * - `onEdit`
+ * - `onDelete`
+ *
+ * @example
+ * ```ts
+ * // mon-module-extension.ts
+ * import { createResolver } from 'astro-integration-kit';
+ * const { resolve } = createResolver(import.meta.url)
+ *
+ * {
+ * apiEndpoint: resolve('./api/pageTypeApi.ts'),
+ * }
+ *
+ * // api/pageTypeApi.ts
+ * import { APIRoute } from 'astro';
+ *
+ * export const onCreate: APIRoute = async (ctx) => {
+ * // Logique personnalisée ici
+ * return new Response();
+ * }
+ * ```
+ */
+ apiEndpoint: string;
+ }> | undefined;
+};
+```
+
+### Définir un module d’extension
+
+Pour définir un module d’extension pour StudioCMS, vous devez créer un objet conforme au type `StudioCMSPlugin`. Cet objet doit ressembler à l’exemple suivant, sachant que les propriétés suivantes sont requises :
+
+- `identifier` : L’identifiant du module d’extension à partir du fichier package.json.
+- `name` : Le libellé du module d’extension à afficher dans le tableau de bord de StudioCMS.
+- `studiocmsMinimumVersion` : La version minimale de StudioCMS requise pour que le module d’extension fonctionne.
+
+Voici un exemple de définition de module d’extension pour StudioCMS qui inclut toutes les propriétés requises et fournit une intégration Astro pour effectuer une logique personnalisée :
+
+```ts twoslash title="mon-module-extension.ts"
+import { definePlugin } from 'studiocms/plugins';
+import { AstroIntegration } from 'astro';
+
+// Définir les options du module d’extension et de l’intégration
+interface Options {
+ foo: string;
+}
+
+// Définir l’intégration Astro
+const monIntegration = (options: Options): AstroIntegration => ({
+ name: 'mon-integration-astro',
+ hooks: {
+ "astro:config:setup": () => {
+ console.log('Bonjour depuis mon intégration Astro !');
+ }
+ }
+});
+
+// Définir le module d’extension pour StudioCMS
+export const monModuleExtension = (options: Options) => definePlugin({
+ identifier: 'mon-module-extension',
+ name: "Mon module d'extension",
+ studiocmsMinimumVersion: '0.1.0-beta.8',
+ integration: monIntegration(options), // Facultatif, mais recommandé
+});
+```
+
+Dans cet exemple, nous définissons un module d’extension pour StudioCMS appelé `Mon module d’extension` qui nécessite la version `0.1.0-beta.8` ou supérieure de StudioCMS. Le module d’extension fournit également une intégration Astro qui enregistre un message dans la console lorsque le crochet `astro:config:setup` est appelé.
+
+Pour plus d’informations sur la création de modules d’extension, consultez le guide [Rendre les modules d’extension utiles][extended-plugins]
+
+{/* Links */}
+[extended-plugins]: /fr/plugins/extended/