frontpage

Site Web de livre de contes

Le livre de contes est l'explorateur de composants d'interface utilisateur le plus populaire! Ceci est le site Web de https://storybook.js.org/.

Remarque : Ce ne sont pas les documents, ceux-ci sont situés ici.

? Contributif

Les contributions sont la bienvenue! Si c'est quelque chose de petit comme la grammaire ou la ponctuation, ouvrez une demande de traction. S'il s'agit d'un changement plus important ou d'une nouvelle fonctionnalité, ajoutez un problème pour la discussion.

Flux de travail

1. Idée de fonctionnalité ou bugfix?
2. Construisez d'abord l'interface utilisateur de l'interface utilisateur ou de taire dans le livre de contes
3. Intégrer avec Gatsby
4. Assurez-vous que les tests passent dans les livres d'histoires CIC CI / Frontpage
5. Assurez-vous que le site fonctionne et est QAED via des aperçus Netlify
6. Assurer aucun bug visuel dans les livres de contes chromatiques / page Front
7. Projeter

Exécuter le projet localement

Instructions du livre de contes

Le livre de contes pour le livre de contes contient chaque composant d'interface utilisateur. L'interface utilisateur est construite après le développement axé sur les composants, un processus qui construit des interfaces utilisateur à partir de «vers le haut» à partir des composants et se terminant par des écrans. Cela signifie que les contributeurs devraient composer des UIS dans le livre de contes avant l'intégration avec l'application Gatsby.

1. Installation du fil
2. construction de fils
3. livre de scénario

Instructions de Gatsby

Gatsby est utilisé pour le routage de base et la génération de sites statiques.

1. yarn start à exécuter le site entier

2. yarn start:skip-addons pour sauter la construction du catalogue Addon

3. yarn start:docs-only pour se moquer de la page d'accueil et construire les pages Docs

Contenu des documents

Le contenu de la section de documentation se trouve dans le docs/ sous-répertoire du livre de contes Monorepo: https://github.com/storybookjs/storybook/tree/next/docs.

Pour exécuter cette application lors de la modification de ces fichiers, consultez à la fois ce référentiel et le monorepo, puis:

À l'intérieur du storybook Monorepo:

1. Exécutez la commande yarn task , puis sélectionnez l'option Synchronize documentation (sync-docs) .

2. Fournir le chemin du projet frontpage .

Avec cela, les dossiers storybook/docs et frontpage/src/content/docs seront synchronisés, garantissant que toutes les modifications apportées à la documentation dans le livre de contes Monorepo se refléteront dans les documents du site Web de Storybook.

À l'intérieur du référentiel frontpage :

Pour exécuter la documentation du site Web, utilisez la commande suivante:

 yarn start:docs-only

Le projet sera visualisé dans le navigateur de http://localhost:8000

Notes de libération

Les notes de version sont stockées dans le répertoire SRC / Content / Release en tant que fichiers .md . Le nom du fichier correspond à la version (major.minor) de la version et sera utilisé pour remplir le lien vers la version spécifique de la page des versions.

Dans le fichier .md de la version, Frontmatter est utilisé pour créer un titre de page, tandis que le reste du contenu est analysé à l'aide de gatsby-transformer-remark et stylé avec des sélecteurs dans src/styles/formatting.js .

Publication de nouvelles versions

Voir les documents détaillés

Variables d'environnement

En développement et avec des versions de production locales, les variables d'environnement peuvent être configurées avec des fichiers .env comme expliqué ici. Les variables sont préfixées avec GATSBY_ lorsque cette variable doit être disponible dans le code côté client.

Dans le déploiement des aperçus et des déploiements de production, ces variables sont définies avec les variables de construction de NetLify.

Recherche

La recherche dans les documents est alimentée par DocSearch. Pour que cela fonctionne, une variable d'environnement est requise:

GATSBY_ALGOLIA_API_KEY

Comment configurer sur votre machine:

1. Créer un fichier .env.development localement
2. Obtenez la clé ici: https://app.netlify.com/sites/storybook-frontpage/settings/deploys#environment
3. Ajouter GATSBY_ALGOLIA_API_KEY=key au fichier à partir de l'étape 1

Le site est rampé toutes les 24 heures, de sorte que toutes les mises à jour seront reflétées dans cette durée.

Articles de blog

Le dernier article de blog est récupéré de Ghost. Vous devrez ajouter pour que cela fonctionne, une variable d'environnement est requise:

GHOST_STORYBOOK_API_KEY

Comment configurer sur votre machine:

1. Créer un fichier .env.development localement
2. Obtenez la clé ici: https://storybookblog.ghost.io/ghost
3. Ajouter GHOST_STORYBOOK_API_KEY=key du fichier à partir de l'étape 1

Outillage

Ce projet utilise ces outils pour faciliter notre travail.

? Déploie par Netlify

Les principales et les succursales sont automatiquement déployées par Netlify chaque commit.

? Tests visuels par chromatique

Toutes les histoires du livre de contes sont automatiquement testées visuelles sur le bureau et le mobile chaque engagement. Assurez-vous que toutes les lignes de base sont acceptées avant la fusion.

? Intégration continue par Circle CI

Chaque construction d'une suite de tests fonctionne. Assurez-vous qu'il n'y a pas d'erreurs avant la fusion.