@sitegenerate/blocks
v1.0.0
Published
Bibliothèque de composants SiteGenerate — blocs, layouts, variantes, animations
Maintainers
folongzidaneReadme
@sitegenerate/blocks
Bibliothèque de composants React/Next.js pour SiteGenerate.
Installation
npm install @sitegenerate/blocksConfiguration du projet consommateur
1. tailwind.config.js — scanner les fichiers de la bibliothèque
module.exports = {
content: [
'./app/**/*.{ts,tsx}',
'./components/**/*.{ts,tsx}',
// ↓ OBLIGATOIRE — permet à Tailwind de voir les classes de la bibliothèque
'./node_modules/@sitegenerate/blocks/dist/**/*.js',
],
// ...
}2. globals.css — importer les tokens de base
@import '@sitegenerate/blocks/tokens';
/* ou */
@import '@sitegenerate/blocks/dist/tokens/theme.css';3. app/[site_slug]/layout.tsx — fournir les tokens via contexte
import { SiteNav, SiteFooter, SiteTokensProvider } from '@sitegenerate/blocks'
import '@sitegenerate/blocks/tokens'
export default function SiteLayout({ children, params }) {
const site = await getSite(params.site_slug)
return (
<html>
<body>
<SiteTokensProvider tokens={site.tokens ?? {}}>
<SiteNav site={site} />
{children}
<SiteFooter site={site} />
</SiteTokensProvider>
</body>
</html>
)
}4. Utiliser un bloc dans une page
import { DynamicBlock } from '@sitegenerate/blocks'
// Rendu automatique selon le type
<DynamicBlock id="hero-main" type="hero" props={{ title: 'Bonjour' }} />
// Import direct d'un bloc
import { HeroBlock } from '@sitegenerate/blocks'
<HeroBlock
sectionId="hero"
title="Mon titre"
layout="split"
bg_type="gradient"
cta_text="En savoir plus"
cta_url="/contact"
/>Personnalisation des tokens CSS
Chaque site surcharge les variables via le style inline de la page :
// app/[site_slug]/page.tsx
<div
id="main-content"
style={{
'--sg-primary': site.tokens.primary,
'--sg-secondary': site.tokens.secondary,
'--sg-accent': site.tokens.accent,
'--sg-font-heading': site.tokens.font_heading,
'--sg-font-body': site.tokens.font_body,
} as React.CSSProperties}
>
{/* sections */}
</div>Blocs disponibles
| Composant | Description |
|-----------|-------------|
| HeroBlock | Section hero — image, gradient, split, fullscreen |
| FeaturesBlock | Grille de features/services |
| TestimonialsBlock | Témoignages — grid, list, carousel |
| CTABlock | Call-to-action — centered, split, banner |
| ContactBlock | Formulaire de contact + infos |
| TeamBlock | Équipe avec avatars et réseaux sociaux |
| GalleryBlock | Galerie — grid, masonry, carousel + lightbox |
| TextBlock | Texte riche avec image optionnelle |
| PricingBlock | Grille de tarifs avec toggle mensuel/annuel |
| FAQBlock | Accordion de FAQ |
| CarouselBlock | Carousel plein écran avec slides |
| DynamicBlock | Dispatcher — résout le composant selon type |
Layout
| Composant | Description |
|-----------|-------------|
| SiteNav | Navbar responsive avec menu mobile, scroll-aware |
| SiteFooter | Footer avec brand, navigation, réseaux sociaux |
Variants de section
Chaque bloc accepte une prop variant qui contrôle le fond et les couleurs :
variant: 'light' | 'dark' | 'primary' | 'secondary' | 'accent' | 'surface' | 'muted' | 'white' | 'gradient'Animations
animation_variant: 'fadeUp' | 'fadeIn' | 'slideLeft' | 'slideRight' | 'scaleIn' | 'blurIn' | 'none'Développement local
# Dans @sitegenerate/blocks
npm install
npm run dev # build en watch mode
# Dans le projet consommateur
npm link @sitegenerate/blocksPublication
# Patch : correction de bug (1.0.0 → 1.0.1)
npm run version:patch
# Minor : nouvelle feature (1.0.0 → 1.1.0)
npm run version:minor
# Major : breaking change (1.0.0 → 2.0.0)
npm run version:major