Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
---
i18nReady: true
title: "@astrojs/web-vitals"
type: integration
catalogEntry: astrojs-web-vitals
description: "Intégration de Web Vitals au tableau de bord StudioCMS"
sidebar:
badge:
text: "Module d’extension"
variant: 'tip'
---

import { PackageManagers } from 'starlight-package-managers'
import Gallery from '~/components/Gallery.astro';
import { webVitalsImages } from "~/assets/index.ts";
import { Steps, Tabs, TabItem } from '@astrojs/starlight/components';

# Présentation

Cette intégration Astro permet de suivre les performances réelles de votre site web et de stocker les données dans Astro DB. Ces données seront utilisées dans le tableau de bord StudioCMS pour afficher les indicateurs de performance de votre site web en conditions réelles au fil du temps.

## Installation
<Tabs syncKey='install-method'>
<TabItem label="Méthode Astro" icon='astro'>
{/* <Steps> */}

1. Installez le paquet et ajoutez-le à votre configuration Astro à l’aide de la commande suivante :

<PackageManagers type="exec" pkg="astro" args="add @astrojs/web-vitals" />

2. Envoyez la nouvelle configuration vers votre base de données distante :

<PackageManagers type="exec" pkg="astro" args="db push" />

{/* </Steps> */}
</TabItem>
<TabItem label="Méthode manuelle" icon='seti:powershell'>
{/* <Steps> */}

1. Installez le paquet à l’aide de la commande suivante :

<PackageManagers pkg="@astrojs/web-vitals" />

2. Ajoutez `@astrojs/web-vitals` à votre fichier de configuration Astro :

```ts twoslash title="astro.config.mjs" {12} ins={4, 13}
import node from '@astrojs/node';
import studioCMS from 'studiocms';
import db from '@astrojs/db';
import webVitals from '@astrojs/web-vitals';
import { defineConfig } from 'astro/config';

export default defineConfig({
site: 'https://demo.studiocms.dev/',
output: 'server',
adapter: node({ mode: "standalone" }),
integrations: [
db(), // REQUIS
webVitals(),
studioCMS(),
],
});
```

<PackageManagers pkg="@astrojs/web-vitals" />

3. Envoyez la nouvelle configuration vers votre base de données distante :

<PackageManagers type="exec" pkg="astro" args="db push" />

{/* </Steps> */}
</TabItem>
</Tabs>


{/* ## Galerie de démonstration

<Gallery galleryImages={webVitalsImages} /> */}
26 changes: 26 additions & 0 deletions src/content/docs/fr/package-catalog/index.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
---
i18nReady: true
title: Paquets
description: Le catalogue de paquets est une collection de paquets créés par StudioCMS ou sa communauté.
---

import PackageCatalog from '~/components/PackageCatalog.astro'
import { Badge } from '@astrojs/starlight/components';

Le catalogue de paquets est une collection de paquets de StudioCMS ou des membres de sa communauté, qui ne sont pas inclus par défaut dans StudioCMS. Tous les paquets répertoriés ici sont vérifiés et testés par l’équipe de StudioCMS ou par ses contributeurs.

Tout paquet étiqueté <Badge text="Module d’extension" variant="tip"/> est un paquet qui étend les fonctionnalités de StudioCMS ou de son tableau de bord.

Tout paquet étiqueté <Badge text="Utilisable publiquement" variant="caution"/> peut être installé et utilisé dans des projets ne s’appuyant pas sur StudioCMS. Ils peuvent fonctionner de manière autonome.

## Catalogues de paquets

### Paquets de StudioCMS
---

<PackageCatalog catalog="studiocms" />

### Paquets communautaires
---

<PackageCatalog catalog="community" />
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
---
i18nReady: true
title: "@studiocms/blog"
type: integration
catalogEntry: studiocms-blog
description: "Intégration du blog StudioCMS"
sidebar:
badge:
text: "Module d’extension"
variant: 'tip'
---

import { PackageManagers } from 'starlight-package-managers'
import { Steps, Tabs, TabItem } from '@astrojs/starlight/components';

# Présentation

Ce module d’extension active les fonctionnalités du blog StudioCMS ainsi qu’un front-end dans votre projet Astro. Il vous permettra de créer, modifier et supprimer des articles de blog depuis le tableau de bord de StudioCMS.

## Installation

1. Installez le paquet à l’aide de la commande suivante :

<PackageManagers pkg="@studiocms/blog" />

2. Ajoutez `@studiocms/blog` à votre fichier de configuration Astro :

```ts twoslash title="studiocms.config.mjs" ins={2, 6}
import { defineStudioCMSConfig } from 'studiocms/config';
import blog from '@studiocms/blog';

export default defineStudioCMSConfig({
plugins: [
blog(),
],
});
```
## Utilisation

### Que fait ce module d’extension ?

Cette intégration ajoutera les nouvelles routes suivantes à votre front-end contrôlé par StudioCMS :

- `/[...slug]` - La page principale du blog qui répertorie toutes les pages StudioCMS.
- `/blog` - La page principale du blog qui répertorie tous les articles du blog.
- `/blog/[slug]` - La page de l’article de blog individuel.
- `/rss.xml` - Le flux RSS de vos articles de blog.
Original file line number Diff line number Diff line change
@@ -0,0 +1,131 @@
---
i18nReady: true
title: "@studiocms/devapps"
type: integration
catalogEntry: studiocms-devapps
description: "Une collection d'outils utiles disponibles en mode développement dans Astro"
sidebar:
badge:
text: 'Utilisable publiquement'
variant: 'caution'
---

import { PackageManagers } from 'starlight-package-managers'
import { Steps, Tabs, TabItem } from '@astrojs/starlight/components';

# Présentation

Une collection d’outils utiles disponibles en mode développement dans Astro.

## Installation

<Tabs syncKey='install-method'>
<TabItem label="Méthode Astro" icon='astro'>
{/* <Steps> */}
1. Installez le paquet et ajoutez-le à votre configuration Astro à l’aide de la commande suivante :

<PackageManagers type="exec" pkg="astro" args="add @studiocms/devapps" />

2. Mettez à jour votre fichier de configuration comme indiqué dans [l’exemple de configuration](#example-config) ci-dessous.
{/* </Steps> */}
</TabItem>
<TabItem label="Méthode manuelle" icon='seti:powershell'>
{/* <Steps> */}
1. Installez le paquet à l’aide de la commande suivante :

<PackageManagers pkg="@studiocms/devapps" />

2. Ajoutez `@studiocms/devapps` à votre fichier de configuration Astro :

```ts twoslash title="astro.config.mjs" ins={3, 9}
import { defineConfig } from 'astro/config';
import db from '@astrojs/db';
import devApps from '@studiocms/devapps';

export default defineConfig({
site: "https://example.com",
integrations: [
db(),
devApps(),
],
});
```
{/* </Steps> */}
</TabItem>
</Tabs>

## Utilisation

Tous les outils ne seront disponibles que pendant l’utilisation de `astro dev` et ne seront pas disponibles pendant les déploiements en production !

### Exemple de configuration

```ts twoslash title="astro.config.mjs" {2, 8} ins={3, 9}
import { defineConfig } from 'astro/config';
import db from '@astrojs/db';
import devApps from '@studiocms/devapps';

export default defineConfig({
site: "https://example.com",
integrations: [
db(), // REQUIS
devApps(/* Voir les options de configuration ci-dessous */),
],
});
```

### Options de configuration

Liste complète des options disponibles pour l’intégration `devApps`, avec les valeurs par défaut affichées. **Toutes les options sont facultatives**.

```ts twoslash
import devApps from '@studiocms/devapps';
devApps({
// ---cut---
endpoint: '_studiocms-devapps',
verbose: false,
appsConfig: {
libSQLViewer: true,
wpImporter: true,
},
// ---cut-after---
})
```

## Outils

### Visionneuse libSQL

Outil de développement permettant d’afficher les tables SQL de la base de données libSQL dans un navigateur. Cet outil s’appuie sur les identifiants de connexion à la base de données distante libSQL `@astrojs/db`.

#### Conditions requises

Les variables d’environnement suivantes sont définies (également utilisées pour `@astrojs/db`) :
- **`ASTRO_DB_REMOTE_URL`**
- **`ASTRO_DB_APP_TOKEN`**

#### Aperçu de l’utilisation

- Application de la barre d’outils (fermée)

![Application de la barre d’outils de développement d’Astro](~/assets/devapps/devapps-1-toolbar-app-closed.png)

- Application de la barre d’outils (étendue)

![Application de la barre d’outils de développement d’Astro (étendue)](~/assets/devapps/devapps-1-toolbar-app-expanded.png)

### Importateur Wordpress

Outil de développement pour importer des articles et des pages WordPress dans la base de données de StudioCMS.

#### Conditions requises

- Intégration StudioCMS
- Installation de WordPress
- `@studiocms/blog` (Facultatif : pour importer des articles dans un blog)

#### Aperçu de l’utilisation

- Application de la barre d’outils

![Application de la barre d’outils de développement d’Astro](~/assets/devapps/devapps-2-importer.png)
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
---
i18nReady: true
title: "@studiocms/markdoc"
type: integration
catalogEntry: studiocms-markdoc
description: "Intégration MarkDoc de StudioCMS"
sidebar:
badge:
text: "Module d’extension"
variant: 'tip'
---

import { PackageManagers } from 'starlight-package-managers'
import { Steps, Tabs, TabItem } from '@astrojs/starlight/components';

# Présentation

Ce module d’extension active la prise en charge de MarkDoc dans StudioCMS.

## Installation

1. Installez le paquet à l’aide de la commande suivante :

<PackageManagers pkg="@studiocms/markdoc" />

2. Ajoutez `@studiocms/markdoc` à votre fichier de configuration Astro :

```ts twoslash title="studiocms.config.mjs" ins={2, 6}
import { defineStudioCMSConfig } from 'studiocms/config';
import markdoc from '@studiocms/markdoc';

export default defineStudioCMSConfig({
plugins: [
markdoc(),
],
});
```
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
---
i18nReady: true
title: "@studiocms/mdx"
type: integration
catalogEntry: studiocms-mdx
description: "Intégration MDX de StudioCMS"
sidebar:
badge:
text: "Module d’extension"
variant: 'tip'
---

import { PackageManagers } from 'starlight-package-managers'
import { Steps, Tabs, TabItem } from '@astrojs/starlight/components';

# Présentation

Ce module d’extension active la prise en charge MDX dans StudioCMS.

## Installation

1. Installez le paquet à l’aide de la commande suivante :

<PackageManagers pkg="@studiocms/mdx" />

2. Ajoutez `@studiocms/mdx` à votre fichier de configuration Astro :

```ts twoslash title="studiocms.config.mjs" ins={2, 6}
import { defineStudioCMSConfig } from 'studiocms/config';
import mdx from '@studiocms/mdx';

export default defineStudioCMSConfig({
plugins: [
mdx(),
],
});
```