Page Constructor Builder

Un utilitaire puissant en ligne de commande pour construire des pages statiques à partir de configurations YAML en utilisant le package @gravity-ui/page-constructor. Voir le storybook de page-constructor pour les détails de configuration.

Démarrage Rapide

Installer le package :

npm install @gravity-ui/page-constructor-builder

Ajouter la commande de build à package.json :

{
  "scripts": {
    "build": "page-builder build"
  }
}

Ajouter les fichiers sources :

page-builder.config.yml :

input: ./pages
output: ./dist
assets: ./assets
favicon: logo.svg
theme: light
minify: true

pages/index.yml :

meta:
  title: Bonjour, le Monde
  description: Une page simple de constructeur de page

blocks:
  - type: header-block
    title: Bonjour, le Monde
    description: |
      Construisez de magnifiques pages statiques à partir de **configurations YAML** grâce à la puissance de
      [@gravity-ui/page-constructor](https://github.com/gravity-ui/page-constructor).
    background:
      color: '#f8f9fa'

Construire vos pages :

npm run build

Ouvrir les fichiers HTML générés dans votre navigateur :

open dist/index.html

Utilisation

Commandes

`page-builder build`

Construit les pages à partir des configurations YAML.

page-builder build [options]

Options :

-i, --input <path> : Répertoire d'entrée contenant les fichiers YAML (par défaut : "./pages")
-o, --output <path> : Répertoire de sortie pour les fichiers construits (par défaut : "./dist")
-c, --config <path> : Chemin du fichier de configuration (par défaut : "./page-builder.config.yml")
--css <files...> : Fichiers CSS personnalisés à inclure
--components <path> : Répertoire des composants personnalisés
--navigation <path> : Fichier de données de navigation
--assets <path> : Répertoire des ressources statiques à copier
--theme <theme> : Thème (light|dark) (par défaut : "light")
--base-url <url> : URL de base pour le site
--minify : Activer la minification
--source-maps : Générer des cartes sources
--watch : Activer le mode surveillance

Configuration

Créez un fichier page-builder.config.yml à la racine de votre projet :

input: ./pages
output: ./dist
assets: ./assets
favicon: logo.svg # Fichier favicon depuis les assets ou une URL externe
theme: light
baseUrl: https://mysite.com
minify: true
sourceMaps: false # Générer des cartes sources pour le débogage (augmente la taille du bundle)
css:
  - ./styles/main.css
  - ./styles/components.scss
components: ./components
navigation: ./navigation.yml
webpack:
  # Configuration webpack personnalisée

Configuration de Page

Créez des fichiers YAML dans votre répertoire de pages :

# pages/index.yml
meta:
  title: Bienvenue sur Mon Site
  description: Ceci est la page d'accueil de mon site génial

blocks:
  - type: header-block
    title: Bienvenue !
    description: Ceci est un **bloc d'en-tête** avec prise en charge du markdown
    background:
      color: '#f0f0f0'

  - type: content-block
    title: À Propos de Nous
    text: |
      Ceci est un bloc de contenu avec plusieurs lignes de texte.

      Vous pouvez utiliser le formatage **markdown** ici.

  - type: CustomBlock # Votre composant personnalisé
    title: Composant Personnalisé
    content: Ceci utilise un composant personnalisé

Composants Personnalisés

Créez des composants React dans votre répertoire de composants :

// components/CustomBlock.tsx
import React from 'react';

interface CustomBlockProps {
  title: string;
  content: string;
  className?: string;
}

export const CustomBlock: React.FC<CustomBlockProps> = ({
  title,
  content,
  className = ''
}) => {
  return (
    <div className={`custom-block ${className}`}>
      <h2>{title}</h2>
      <p>{content}</p>
    </div>
  );
};

export default CustomBlock;

Styles Personnalisés

Ajoutez vos fichiers CSS/SCSS personnalisés :

/* styles/main.css */
.custom-block {
  padding: 20px;
  margin: 20px 0;
  border-radius: 8px;
  background: #f5f5f5;
  border-left: 4px solid #007acc;
}

.custom-block h2 {
  margin-top: 0;
  color: #007acc;
}

Ressources Statiques

Le constructeur de page gère automatiquement les ressources statiques telles que les images, les icônes et autres fichiers. Configurez le répertoire des ressources dans votre fichier de configuration :

# page-builder.config.yml
input: ./pages
output: ./dist
assets: ./assets # Répertoire des ressources à copier

Structure du Répertoire des Ressources :

assets/
├── images/
│   ├── hero-banner.jpg
│   └── about-photo.png
├── icons/
│   ├── logo.svg
│   └── social-icons.svg
└── documents/
    └── brochure.pdf

Utilisation des Ressources dans Vos Pages :

# pages/index.yml
blocks:
  - type: header-block
    title: Bienvenue
    description: Découvrez notre contenu incroyable
    background:
      image: assets/images/hero-banner.jpg

  - type: media-block
    title: À Propos de Nous
    media:
      - type: image
        src: assets/images/about-photo.png
        alt: Photo de notre équipe

Favicon

Le constructeur de page prend en charge l'ajout de favicons à vos pages statiques. Vous pouvez spécifier soit un fichier local de votre répertoire d'assets, soit une URL externe.

Configuration

Ajoutez l'option favicon à votre fichier de configuration :

# page-builder.config.yml
favicon: logo.svg # Fichier local du répertoire des assets
# ou
favicon: https://cdn.example.com/favicon.ico # URL externe

Fichiers Favicon Locaux

Pour les fichiers favicon locaux, le constructeur :

Détectera automatiquement le fichier dans votre répertoire d'assets
Le copiera dans le répertoire de sortie
Générera des balises <link> HTML appropriées avec les types MIME corrects

Formats de fichiers pris en charge :

SVG (recommandé) - image/svg+xml
ICO (classique) - image/x-icon
PNG (moderne) - image/png
JPG/JPEG (acceptable) - image/jpeg
GIF (animé) - image/gif

Exemples :

# page-builder.config.yml
favicon: logo.svg                    # Fichier dans le répertoire assets/
favicon: icons/favicon.ico           # Sous-répertoire assets/icons/
favicon: ./custom/path/favicon.png   # Chemin personnalisé relatif au projet
favicon: /absolute/path/favicon.ico  # Chemin absolu

#### URLs externes pour les favicons

Vous pouvez également utiliser des URLs externes pour les favicons, provenant de CDN ou d'autres domaines :

```yaml
# page-builder.config.yml
favicon: https://cdn.example.com/favicon.ico
favicon: https://mysite.com/assets/logo.svg

HTML généré

Le constructeur génère automatiquement les balises HTML appropriées en fonction du type de favicon :

<!-- Pour les favicons SVG -->
<link rel="icon" type="image/svg+xml" href="assets/logo.svg" />

<!-- Pour les favicons ICO (inclut la prise en charge des navigateurs plus anciens) -->
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
<link rel="shortcut icon" href="assets/favicon.ico" />

<!-- Pour les URLs externes -->
<link rel="icon" href="https://example.com/favicon.ico" />

Le constructeur de pages prend en charge la configuration de la navigation globale qui apparaît sur toutes les pages. La navigation est configurée via un fichier YAML séparé.

Créez un fichier navigation.yml à la racine de votre projet (ou spécifiez un chemin personnalisé dans votre configuration) :

# navigation.yml
logo:
  text: Nom de votre site
  url: 'index.html'
  icon: 'assets/logo.svg'

header:
  leftItems:
    - text: Accueil
      url: 'index.html'
      type: 'link'
    - text: À propos
      url: 'about.html'
      type: 'link'
    - text: Documentation
      url: 'https://external-site.com/docs'
      type: 'link'
  rightItems:
    - text: GitHub
      url: 'https://github.com/your-repo'
      type: 'link'
    - text: Contact
      url: 'contact.html'
      type: 'link'

footer:
  leftItems:
    - text: Politique de confidentialité
      url: 'privacy.html'
      type: 'link'
  rightItems:
    - text: © 2024 Votre entreprise
      type: 'text'

Vous pouvez remplacer la navigation pour des pages spécifiques en ajoutant une section navigation directement dans le YAML de votre page :

# pages/special-page.yml
meta:
  title: Page spéciale

navigation:
  logo:
    text: Site spécial
    url: 'index.html'
  header:
    leftItems:
      - text: Retour à l'accueil
        url: 'index.html'
        type: 'link'

blocks:
  - type: header-block
    title: Cette page a une navigation personnalisée

Page-constructor-builder

Page Constructor Builder

Démarrage Rapide

Utilisation

Commandes

`page-builder build`

Configuration

Configuration de Page

Composants Personnalisés

Styles Personnalisés

Ressources Statiques

Favicon

Configuration

Fichiers Favicon Locaux

HTML généré

Navigation

Configuration de la navigation

Substitution de la navigation par page

Page-constructor-builder

§Page Constructor Builder

§Démarrage Rapide

§Utilisation

§Commandes

§page-builder build

§Configuration

§Configuration de Page

§Composants Personnalisés

§Styles Personnalisés

§Ressources Statiques

§Favicon

§Configuration

§Fichiers Favicon Locaux

§HTML généré

§Navigation

§Configuration de la navigation

§Substitution de la navigation par page

Page Constructor Builder

Démarrage Rapide

Utilisation

Commandes

`page-builder build`

Configuration

Configuration de Page

Composants Personnalisés

Styles Personnalisés

Ressources Statiques

Favicon

Configuration

Fichiers Favicon Locaux

HTML généré

Navigation

Configuration de la navigation

Substitution de la navigation par page