krashna site

Site Web de Krashna Musika

Générateur de site statique pour le site de l'association musicale étudiante de Delft, Krashna Musika, construit avec React et Gatsby.js.

Installation

Pour commencer, vous aurez besoin de l'environnement Node.js et du gestionnaire de packages Yarn. Une fois ceux-ci installés, exécutez les commandes suivantes à partir du répertoire racine de ce dépôt :

yarn
yarn global add gatsby-cli

En cours d'exécution

Développement

Pour démarrer un serveur de développement (avec live-reloading), exécutez :

yarn develop

Il y aura désormais un serveur en écoute sur localhost:8000 !

Production

Pour créer un bundle de production, exécutez :

yarn build

Les modifications apportées à la branche master sont automatiquement déployées sur le site actif (sur krashna.nl), via le service de build Netlify.

Documentation

Structure globale

En général, ce projet suit la structure commune des dossiers Gatsby.js :

• Les pages sont définies dans /src/pages . Le nom de fichier de chaque fichier JS (hors extension .js ) est utilisé comme URL de la page correspondante.
• Les modèles de page (structures standard indiquant l'apparence des différents types de pages) se trouvent dans /src/templates .
• Les composants utilisés par ces pages et modèles sont contenus dans le dossier /src/components .

Cependant, il présente certaines différences, pour offrir l'internationalisation et d'autres fonctionnalités :

• Toutes les traductions sont contenues dans les fichiers YAML du dossier /src/locales . Chaque sous-dossier contient une copie de chaque fichier de définition de traduction, dans une langue spécifique. Ces fichiers de traduction sont compilés au format JSON, qui est servi avec le reste du contenu et inséré dynamiquement dans la page au moment de l'exécution. Nous utilisons la bibliothèque react-intl , intégrée par gatsby-plugin-intl , pour la traduction.
• Toutes les données sur lesquelles est basée la génération de pages, comme la liste des concerts, sont contenues dans /src/data .

Ajout de contenu

L'ajout de contenu peut être effectué facilement en ajoutant du texte ou d'autres données à des fichiers prédéfinis, quelques exemples sont donnés ci-dessous. Tout le contenu est écrit en Markdown. Si vous n'êtes pas familier avec Markdown ou si vous avez besoin d'aide, consultez ce lien pratique

Ajouter une page

Pour ajouter une page...

1. Ajoutez un fichier JS dans /src/pages avec comme nom l'URL sur laquelle vous souhaitez mettre cette page. En cas de doute sur la façon de structurer ce fichier, jetez un œil aux autres pages existantes dans ce dossier.
2. Ajoutez les traductions nécessaires pour toutes les clés de traduction que vous utilisez, dans /src/locales . Reportez-vous aux pages et traductions existantes pour des exemples de la façon dont on peut accéder à une telle clé de traduction dans le fichier d'échange et comment celle-ci peut être définie dans le fichier de traduction.

Ajouter un concert

Pour ajouter un concert...

1. Ajoutez une entrée à la liste /src/data/concerts.yaml en suivant le même format que les autres entrées.
2. Ajoutez des textes dépendants de la langue aux fichiers concerts.yaml dans le dossier /src/locales , dans les deux langues.

Ajouter un article d'actualité

Pour ajouter un article d'actualité...

1. Ajoutez une entrée à la liste /src/data/news.yaml en suivant le même format que les autres entrées.
2. Ajoutez des textes dépendants de la langue aux fichiers news.yaml dans le dossier /src/locales , dans les deux langues.