elytre Download - elytre Quellcode herunterladen

elytre

Andere Kategorien

1.0.0

Herunterladen

Elytr

Elytre ist ein Tool zum Aufbau eines serverlosen Online-Buchladens mit einer Suchmaschine aus einer Katalogdatei.

Ein Schema, das erklärt, dass Elytre eine Datei „catalog.yaml“ zum Erstellen einer Website verwendet

Elytre befindet sich noch in der frühen Entwicklungsphase und es wäre unklug, es zu diesem Zeitpunkt in der Produktion einzusetzen. Erwarten Sie bis zur Veröffentlichung von 1.0 (hoffentlich im Jahr 2021) bahnbrechende Änderungen, seltsame Fehler, fehlerhafte Tests und fehlende Dokumentation.

Installieren

Anforderungen:

Knoten v14.15+
Garn

Erstellen Sie ein leeres Verzeichnis für Ihr Projekt
Garn initialisieren: yarn init
Elytre hinzufügen: yarn add --exact elytre
Fügen Sie sowohl start als auch build -Skripte zu Ihrer package.json hinzu:

 { "scripts": {"start": "elytre start", "build": "elytre build"
  }
}

Verwendung

Damit Ihre Elytre-Site erfolgreich erstellt werden kann, benötigt Ihr Projektverzeichnis mindestens drei Dateien:

eine site.yaml -Datei, die die Informationen und Konfiguration Ihrer Site angibt (siehe Spezifikation der Site-Konfigurationsdatei unten)
eine Datei catalog.yaml die Ihren Buchkatalog beschreibt (siehe Katalogdateispezifikation unten).
ein Stylesheet styles.css um das Erscheinungsbild Ihrer Website anzupassen (siehe Spezifikation der Stylesheet-Datei unten).

Optional können Sie Ihrem Projektverzeichnis Folgendes hinzufügen:

Ein public Verzeichnis mit Assets, die in das Build-Verzeichnis kopiert werden und auf die in Ihren Dateien styles.css oder site.yaml verwiesen werden kann
ein covers mit Titelbildern. Bilddateinamen müssen dem folgenden Muster entsprechen: {ean}.jpg (z. B. 9781234567890.jpg ), und die EAN in einem Bilddateinamen muss mit der EAN eines im Katalog beschriebenen Produkts übereinstimmen.
ein pages , das benutzerdefinierte Seiten im MDX-Format enthält. Die Namen der Seitendateien müssen dem folgenden Muster entsprechen: {slug}.mdx , wobei slug für die benutzerdefinierte Seiten-URL verwendet wird. Eine about.mdx Datei ist unter /pages/about verfügbar. MDX ist eine Erweiterung für das Markdown-Format, die JSX unterstützt und den Import von React-Komponenten ermöglicht.

Spezifikation der Site-Konfigurationsdatei

Passen Sie die Konfiguration Ihrer Site an, indem Sie eine site.yaml Datei im Verzeichnis Ihres Projekts hinzufügen.

 # Der Titel der Site, wie im Header der Site und im Tabtitle des Browsers angezeigt: Les Éditions Paronymie# Die Basis-URL der Site, ohne abschließenden SchrägstrichbaseUrl: https://paronymie.elytre.app# Die Menüs der Site: # Der Slot des Menüs kann Header, Navigation sein oder Fußzeile
  Kopfzeile: Fußzeile: …
  nav:# Menü enthält eine Liste von Einträgen mit einer Beschriftung (Text) und einem Link (URL) – Beschriftung: Über-Link: /pages/about – Beschriftung: Kontakt-Link: /contact/

Spezifikation der Katalogdatei

Passen Sie Ihren Produktkatalog an, indem Sie im Verzeichnis Ihres Projekts eine Datei catalog.yaml hinzufügen.

global: # globale Eigenschaften werden auf alle Produkte angewendet
buyLink: https://www.librairiepartenaire.com/buy/:eanproducts: # Ein Produkt
- EAN: 9781234567890Titel: Chaussons d'oursAutor: Laetitia ManMitwirkende:
- Name: Claude Monetrole: Cover-Künstler # oder „Autor“ oder „Übersetzer“ oder „Fotograf“Veröffentlichungsdatum: 04.01.2021Seitenanzahl: 641Originalsprache: en # oder „fr“ oder „de“zurückCoverText: | # Markdown-Format *« Lorem ipsum dolor sit amet, consectetur adipiscing elit. »* Vivamus pharetra at tortor nec cursus. Proin accumsan sagittis molestie. Suspendisse euismod dolor quis elit egestas vulputate. Maecenas et nisl nec dui ullamcorper aliquam nec at erat. Präsent in nunc elit. Nam metus ante, ultrices sit amet lacinia non, feugiat vitae ligula. Mauris willicitudin rutrum justo egestas dignissim. Die Klasse ist in der Lage, sich stillschweigend an die litoratische Zeit zu wenden, um uns zu unterhalten, und zwar durch inceptos himenaeos. Morbi euismod justo nec ipsum dapibus varius. Präsent 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 riskus, sit amet consectetur leo. Nunc tristique posuere eros, sit amet condimentum neque consequat eu. Proin willicitudin, lacus eleifend ullamcorper laoreet, turpis ante aliquet arcu, sit amet consectetur libero libero in dolor. Quisque sodales ipsum eget lectus cursus pharetra. Name eu eleifend ipsum. Extras:
- Typ: youtube # Ein eingebettetes YouTube-Video zur Produktseite hinzufügenhref: https://www.youtube.com/watch?v=dQw4w9WgXcQreviews:
- Text: Un très grand talent de la littérature poire.Autor: MélodieQuelle: Librairie L'Arbre à Nèfles – ParisQuelleUrl: https://www.arbreanefles.com

# Ein anderes Produkt
- EAN: 9781234567811Titel: Sous-solAutor: Matt Yassenar

Spezifikation der Stylesheet-Datei

Passen Sie das Erscheinungsbild Ihrer Website an, indem Sie im Verzeichnis Ihres Projekts eine Datei styles.css hinzufügen.

 .ElytreSite { /* Dies ist ein globaler Wrapper für Ihre gesamte Website. Hier können Sie Seitenbreite, Ränder usw. einstellen. */}

.Header { /* Wie der Site-Header angezeigt wird */}

.Header .Menu { /* So wird das Header-Menü angezeigt */}

.Header .Menu .MenuEntry { /* Wie ein einzelner Eintrag im Header-Menü angezeigt wird */}

.Product { /* Wie ein Produkt angezeigt wird */}

.Product .Product-cover-image { /* So wird ein Produkt-Cover-Bild angezeigt */}

.Product .Product-infos { /* Wie die Informationen eines Produkts (Titel, Autor, EAN) angezeigt werden */}

.Product .Product-title { /* So wird der Titel eines Produkts angezeigt */}

.ProductList { /* So wird eine Produktliste angezeigt */}

.ProductList .Product { /* Wie ein Produkt in einer Produktliste angezeigt wird */}

.HomeView .ProductList .Product { /* Wie ein Produkt in einer Liste auf der Startseite angezeigt wird */}

.ProductView .Product { /* Wie ein Produkt auf einer einzelnen Produktseite angezeigt wird */}

.Error404View .Error404View-title { /* So erscheint ein Titel auf einer 404-Fehlerseite */}

.Error404View .Error404View-reason { /* Wie die Gründe angezeigt werden, wenn sie auf einer 404-Fehlerseite angegeben werden */}

.Footer { /* Wie die Fußzeile der Website angezeigt wird */}

.Footer-powered-by { /* Der „Powered by Elytre“-Text in der Fußzeile kann ausgeblendet werden (bitte nicht!) oder hier diskreter gestaltet werden */}

Sobald Sie diese Dateien erstellt haben, können Sie:

Bauen Sie Ihren Elytre-Standort für die Produktion

 $ Garnaufbau

Dadurch wird Ihre Website für die Produktion in einem build -Verzeichnis erstellt und ist bereit für die Bereitstellung. Sie können dieses Verzeichnis über jeden Webserver oder statischen Website-Host bereitstellen.

Starten Sie elytre im Entwicklungsmodus:

 $ Garnanfang

Dadurch wird ein lokaler Webserver für die Entwicklung eingerichtet. Öffnen Sie http://localhost:1854/, um es in Ihrem Browser anzuzeigen. Die Seite wird automatisch neu geladen, wenn Sie Dateien im Verzeichnis Ihres Projekts bearbeiten.

Tests

Lint-Code in diesem Repository mit:

 $ Garnflusen

Führen Sie Tests in diesem Repository aus mit:

 $ Garntest

Entwicklung

Elytre besteht aus zwei Hauptteilen:

template/src : eine Template-React-Site, die mit den Anpassungsdateien des Benutzers zusammengeführt wird, um die endgültige Elytre-Site zu erstellen
build/src : ein Node-Tool, das die endgültige Elytre-Site mithilfe der React-Vorlage und der Anpassungsdatei des Benutzers erstellt

Beide sind in Typescript geschrieben und müssen vor der Verwendung transpiliert werden.