Descarga elytre - Descarga del código fuente elytre

elytre

Otras categorias

1.0.0

Descargar

elitre

Elytre es una herramienta para crear una librería en línea sin servidor con un motor de búsqueda a partir de un archivo de catálogo.

Un esquema que explica que elytre utiliza un archivo catalog.yaml para crear un sitio web

Elytre aún se encuentra en una fase inicial de desarrollo y no sería prudente utilizarlo en la producción en esa etapa. Espere cambios importantes, errores extraños, pruebas fallidas y documentación faltante hasta que se lance la versión 1.0 (con suerte en 2021).

Instalar

Requisitos:

Nodo v14.15+
Hilo

Crea un directorio vacío para tu proyecto
Inicializar hilo: yarn init
Añadir Elitre: yarn add --exact elytre
Agregue scripts start y build a su paquete.json:

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

Uso

Para que su sitio elytre se construya exitosamente, el directorio de su proyecto requerirá al menos tres archivos:

un archivo site.yaml que especifica la información y la configuración de su sitio (consulte la especificación del archivo de configuración del sitio a continuación)
un archivo catalog.yaml que describe su catálogo de libros (consulte la especificación del archivo de catálogo a continuación).
una hoja de estilos styles.css para personalizar la apariencia de su sitio (consulte la especificación del archivo de hoja de estilos a continuación).

Opcionalmente, puede agregar al directorio de su proyecto:

un directorio public que contiene recursos que se copiarán en el directorio de compilación y al que se puede hacer referencia desde sus archivos styles.css o site.yaml
un directorio covers que contiene imágenes de portada. Los nombres de los archivos de imagen deben coincidir con el siguiente patrón: {ean}.jpg (por ejemplo, 9781234567890.jpg ), y el ean de un nombre de archivo de imagen debe coincidir con el ean de un producto descrito en el catálogo.
un directorio de pages que contiene páginas personalizadas que utilizan el formato MDX. Los nombres de los archivos de página deben coincidir con el siguiente patrón: {slug}.mdx , donde se utilizará slug para la URL de la página personalizada. Un archivo about.mdx estará disponible en /pages/about . MDX es una extensión para el formato Markdown que admite JSX y permite importar componentes de React.

Especificación del archivo de configuración del sitio

Personalice la configuración de su sitio agregando un archivo site.yaml en el directorio de su proyecto.

 # El título del sitio, como se muestra en el encabezado del sitio y en el título de la pestaña del navegador: Les Éditions Paronymie# La URL base del sitio, sin barra diagonal final: https://paronymie.elytre.app# Los menús del sitio: # La ranura del menú puede ser header, nav o pie de página
  encabezado: pie de página:…
  nav:# Menú contiene una lista de entradas con una etiqueta (texto) y un enlace (url)- etiqueta: Acerca del enlace: /pages/about- etiqueta: contacto enlace: /contacto/

Especificación del archivo de catálogo

Personalice su catálogo de productos agregando un archivo catalog.yaml en el directorio de su proyecto.

global: # propiedades globales se aplican a todos los productos
buyLink: https://www.librairiepartenaire.com/buy/:eanproducts: # Un producto
- ean: 9781234567890título: Chaussons d'oursautor: Laetitia Manicontribuidores:
- nombre: Claude Monetrole: Artista de portada # o "Autor" o "Traductor" o "Fotógrafo" Fecha de lanzamiento: 2021-01-04 Número de páginas: 641 original Idioma: en # o "fr" o "de" atrásTexto de portada: | # Formato Markdown *« Lorem ipsum dolor sit amet, consectetur adipiscing elit. »* Vivamus pharetra at tortor nec cursus. Proin accumsan sagittis molestie. Suspendisse euismod dolor quis elit egetas 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 egetas dignissim. Class 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:
- escriba: youtube # Agregue un video de YouTube para insertar en la página del producto: https://www.youtube.com/watch?v=dQw4w9WgXcQreviews:
- texto: Un très grand talento de la littérature poire.autor: Mélodiefuente: Librairie L'Arbre à Nèfles – ParissourceUrl: https://www.arbreanefles.com

# Otro producto
- ean: 9781234567811título: Sous-solautor: Matt Yassenar

Especificación del archivo de hoja de estilo

Personalice la apariencia de su sitio agregando un archivo styles.css en el directorio de su proyecto.

 .ElytreSite { /* Este es un contenedor global para todo su sitio. Aquí puede configurar el ancho de la página, los márgenes, etc. */}

.Header { /* Cómo se muestra el encabezado del sitio */}

.Header .Menu { /* Cómo se muestra el menú de encabezado */}

.Header .Menu .MenuEntry { /* Cómo se muestra una sola entrada en el menú de encabezado */}

.Product { /* Cómo se muestra un producto */}

.Product .Product-cover-image { /* Cómo se muestra la imagen de portada de un producto */}

.Product .Product-infos { /* Cómo se muestra la información de un producto (título, autor, ean) */}

.Product .Product-title { /* Cómo se muestra el título de un producto */}

.ProductList { /* Cómo se muestra una lista de productos */}

.ProductList .Product { /* Cómo se muestra un producto cuando está en una lista de productos */}

.HomeView .ProductList .Product { /* Cómo aparece un producto en una lista en la página de inicio */}

.ProductView .Product { /* Cómo se muestra un producto en una sola página de producto */}

.Error404View .Error404View-title { /* Cómo aparece un título en una página de error 404 */}

.Error404View .Error404View-reason { /* Cómo aparecen los motivos si se proporcionan en una página de error 404 */}

.Footer { /* Cómo se muestra el pie de página del sitio */}

.Footer-powered-by { /* El texto "Desarrollado por Elytre" en el pie de página se puede ocultar (¡no lo hagas!) o hacerlo más discreto aquí */}

Una vez que haya creado estos archivos, podrá:

Construya su sitio de elitros para la producción

 $ construcción de hilo

Esto creará su sitio web para producción en un directorio build , listo para su implementación. Puede servir este directorio utilizando cualquier servidor web o host de sitio web estático.

Iniciar elitre en modo desarrollo:

 $ inicio del hilo

Esto hará girar un servidor web local para el desarrollo. Abra http://localhost:1854/ para verlo en su navegador. La página se recargará automáticamente si edita archivos en el directorio de su proyecto.

Pruebas

Código Lint dentro de este repositorio con:

 $ pelusa de hilo

Ejecute pruebas dentro de este repositorio con:

 $ prueba de hilo

Desarrollo

Elytre se compone de dos partes principales:

template/src : una plantilla de sitio de React que se fusiona con los archivos de personalización del usuario para construir el sitio final de elytre.
build/src : una herramienta de nodo que construye el sitio de elitre final utilizando la plantilla de React y el archivo de personalización del usuario.

Ambos están escritos en mecanografiado y deben transpilarse antes de poder usarse.