elytre
1.0.0
Elytre est un outil permettant de créer une librairie en ligne sans serveur avec un moteur de recherche à partir d'un fichier catalogue.
Elytre en est encore à ses débuts et il serait imprudent de l’utiliser en production à ce stade. Attendez-vous à des changements radicaux, des bugs étranges, des tests défectueux et de la documentation manquante jusqu'à la sortie de la version 1.0 (espérons-le en 2021).
Exigences:
Nœud v14.15+
Fil
Créez un répertoire vide pour votre projet
Initialiser le fil : yarn init
Ajouter un élytre : yarn add --exact elytre
Ajoutez les scripts start et build à votre package.json :
{ "scripts": {"start": "elytre start","build": "elytre build"
}
}Pour que votre site elytre soit construit avec succès, votre répertoire de projet nécessitera au moins trois fichiers :
un fichier site.yaml spécifiant les informations et la configuration de votre site (voir Spécification du fichier de configuration du site ci-dessous)
un fichier catalog.yaml décrivant votre catalogue de livres (voir les spécifications du fichier catalogue ci-dessous).
une feuille de style styles.css pour personnaliser l'apparence de votre site (voir les spécifications du fichier de feuille de style ci-dessous).
En option, vous pouvez ajouter à votre répertoire de projet :
un répertoire public contenant des actifs qui seront copiés dans le répertoire de construction et pourront être référencés à partir de vos fichiers styles.css ou site.yaml
un répertoire covers contenant des images de couverture. Les noms de fichiers image doivent correspondre au modèle suivant : {ean}.jpg (par exemple 9781234567890.jpg ), et le ean dans un nom de fichier image doit correspondre à celui d'un produit décrit dans le catalogue.
un répertoire pages contenant des pages personnalisées utilisant le format MDX. Les noms de fichiers de page doivent correspondre au modèle suivant : {slug}.mdx , où slug sera utilisé pour l'URL de la page personnalisée. Un fichier about.mdx sera disponible sur /pages/about . MDX est une extension pour le format markdown qui prend en charge JSX et permet d'importer des composants React.
Personnalisez la configuration de votre site en ajoutant un fichier site.yaml dans le répertoire de votre projet.
# Le titre du site, tel qu'affiché dans l'entête du site et dans l'onglet du navigateur : Les Éditions Paronymie# L'url de base du site, sans slashbaseUrl : https://paronymie.elytre.app# Les menus du site : # L'emplacement du menu peut être header, nav ou pied de page en-tête : pied de page : … nav:# Le menu contient une liste d'entrées avec une étiquette (texte) et un lien (url) - étiquette : À propos du lien : /pages/à propos - étiquette : lien de contact : /contact/
Personnalisez votre catalogue de produits en ajoutant un fichier catalog.yaml dans le répertoire de votre projet.
global : # propriétés globales sont appliquées à tous les produits
buyLink : https://www.librairiepartenaire.com/buy/:eanproducts : # Un produit
- ean : 9781234567890titre : Chaussons d'oursauteur : Laetitia Manicontributeurs :
- nom : Claude Monetrole : Artiste de couverture # ou « Auteur » ou « Traducteur » ou « Photographe » date de sortie : 2021-01-04pageCount : 641originalLangue : en # ou « fr » ou « de »backCoverText : | # Format Markdown *« Lorem ipsum dolor sit amet, consectetur adipiscing elit. »* Vivamus pharetra au cursus tortor nec. Proin accussan sagittis molestie. Suspendisse euismod dolor quis elit egestas vulputate. Maecenas et nisl nec dui ullamcorper aliquam nec at erat. Praesent in nunc elit. Nam metus ante, ultrices sit amet lacinia non, feugiat vitae ligula. Mauris sollicitudin rutrum justo egestas dignissim. Classe aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi euismod justo nec ipsum dapibus varius. Praesent ac auctor velit. Phasellus metus eros, dignissim eu ex consectetur, aliquam rutrum massa. Ut pharetra tellus tortor, eu dictum felis euismod ac. Nullam ut accumsan risus, sit amet consectetur leo. Nunc tristique posuere eros, sit amet condimentum neque consequat eu. Proin sollicitudin, lacus eleifend ullamcorper laoreet, turpis ante aliquet arcu, sit amet consectetur libero libero in dolor. Quisque sodales ipsum eget lectus cursus pharetra. Nam eu eleifend ipsum. extras :
- tapez : youtube # Ajoutez une vidéo YouTube intégrée à la page du produithref : https://www.youtube.com/watch?v=dQw4w9WgXcQreviews :
- texte : Un très grand talent de la littérature poire.auteur : Mélodiesource : Librairie L'Arbre à Nèfles – ParissourceUrl : https://www.arbreanefles.com
# Un autre produit
- ean : 9781234567811titre : Sous-solauteur : Matt Yassenar Personnalisez l'apparence de votre site en ajoutant un fichier styles.css dans le répertoire de votre projet.
.ElytreSite { /* Ceci est un wrapper global pour tout votre site. Ici, vous pouvez définir la largeur de la page, les marges, etc. */}
.Header { /* Comment l'en-tête du site est affiché */}
.Header .Menu { /* Comment le menu d'en-tête est affiché */}
.Header .Menu .MenuEntry { /* Comment une seule entrée est affichée dans le menu d'en-tête */}
.Product { /* Comment un produit est affiché */}
.Product .Product-cover-image { /* Comment une image de couverture de produit est affichée */}
.Product .Product-infos { /* Comment sont affichées les informations d'un produit (titre, auteur, ean) */}
.Product .Product-title { /* Comment le titre d'un produit est affiché */}
.ProductList { /* Comment une liste de produits est affichée */}
.ProductList .Product { /* Comment un produit est affiché dans une liste de produits */}
.HomeView .ProductList .Product { /* Comment un produit apparaît dans une liste sur la page d'accueil */}
.ProductView .Product { /* Comment un produit est affiché sur une seule page de produit */}
.Error404View .Error404View-title { /* Comment un titre apparaît sur une page d'erreur 404 */}
.Error404View .Error404View-reason { /* Comment les raisons apparaissent si elles sont fournies sur une page d'erreur 404 */}
.Footer { /* Comment le pied de page du site est affiché */}
.Footer-powered-by { /* Le texte "Powered by Elytre" dans le pied de page peut être masqué (ne le faites pas !) ou rendu plus discret ici */}$ construction de fil
Cela construira votre site Web pour la production dans un répertoire build , prêt à être déployé. Vous pouvez servir ce répertoire en utilisant n'importe quel serveur Web ou hébergeur de site Web statique.
$ début du fil
Cela fera tourner un serveur Web local pour le développement. Ouvrez http://localhost:1854/ pour l'afficher dans votre navigateur. La page se rechargera automatiquement si vous modifiez des fichiers dans le répertoire de votre projet.
Code Lint dans ce référentiel avec :
$ fil pelucheux
Exécutez des tests dans ce référentiel avec :
$ test de fil
Elytre est composé de deux parties principales :
template/src : un modèle de site React qui est fusionné avec les fichiers de personnalisation de l'utilisateur pour construire le site elytre final
build/src : un outil de nœud qui construit le site elytre final à l'aide du modèle React et du fichier de personnalisation de l'utilisateur
Les deux sont écrits en Typescript et doivent être transpilés avant de pouvoir être utilisés.
$ construction de fil
Les fichiers sont lintés, testés et transpilés avant que le package ne soit publié sur npm.
Pendant le développement, les fichiers modèles peuvent être regardés et transpilés au fur et à mesure de leurs modifications :
$ développeur de fil
