Download elytre - download do código-fonte elytre

elytre

Outras categorias

1.0.0

Baixar

élitro

Elytre é uma ferramenta para construir uma livraria online sem servidor com um mecanismo de busca a partir de um arquivo de catálogo.

Um esquema explicando que o elytre usa um arquivo catalog.yaml para criar um site

O Elytre ainda está em desenvolvimento inicial e seria imprudente usá-lo na produção nesse estágio. Espere mudanças significativas, bugs estranhos, testes quebrados e documentação ausente até o lançamento da versão 1.0 (espero que em 2021).

Instalar

Requisitos:

Nó v14.15+
Fio

Crie um diretório vazio para o seu projeto
Inicializar fio: yarn init
Adicionar Elytre: yarn add --exact elytre
Adicione scripts start e build ao seu package.json:

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

Uso

Para que seu site elytre seja construído com sucesso, o diretório do seu projeto exigirá pelo menos três arquivos:

um arquivo site.yaml especificando as informações e configuração do seu site (consulte Especificação do arquivo de configuração do site abaixo)
um arquivo catalog.yaml que descreve seu catálogo de livros (consulte Especificação do arquivo de catálogo abaixo).
uma folha de estilo styles.css para personalizar a aparência do seu site (consulte as especificações do arquivo de folha de estilo abaixo).

Opcionalmente, você pode adicionar ao diretório do seu projeto:

um diretório public contendo ativos que serão copiados para o diretório de construção e podem ser referenciados em seus arquivos styles.css ou site.yaml
um diretório covers contendo imagens de capa. Os nomes dos arquivos de imagem devem corresponder ao seguinte padrão: {ean}.jpg (por exemplo, 9781234567890.jpg ), e o ean no nome do arquivo de imagem deve corresponder ao ean de um produto descrito no catálogo.
um diretório pages contendo páginas personalizadas usando o formato MDX. Os nomes dos arquivos de página devem corresponder ao seguinte padrão: {slug}.mdx , onde slug será usado para o URL da página personalizada. Um arquivo about.mdx estará disponível em /pages/about . MDX é uma extensão para o formato markdown que suporta JSX e permite importar componentes React.

Especificação do arquivo de configuração do site

Personalize a configuração do seu site adicionando um arquivo site.yaml no diretório do seu projeto.

 # O título do site, conforme exibido no cabeçalho do site e no tabtitle do navegador: Les Éditions Paronymie# O URL base do site, sem slashbaseUrl: https://paronymie.elytre.app# Os menus do site: # O slot do menu pode ser cabeçalho, navegação ou rodapé
  cabeçalho: rodapé:…
  nav:# Menu contém uma lista de entradas com um rótulo (texto) e um link (url)- rótulo: Sobre link: /pages/about- rótulo: link de contato: /contato/

Especificação do arquivo de catálogo

Personalize seu catálogo de produtos adicionando um arquivo catalog.yaml no diretório do seu projeto.

global: # propriedades globais são aplicadas a todos os produtos
buyLink: https://www.librairiepartenaire.com/buy/:eanproducts: # Um produto
- ean: 9781234567890título: Chaussons d'oursautor: Laetitia Manicontribuidores:
- nome: Claude Monetrole: Artista da capa # ou "Autor" ou "Tradutor" ou "Fotógrafo"data de lançamento: 2021-01-04pageCount: 641originalLanguage: en # ou "fr" ou "de"backCoverText: | # Formato Markdown *« Lorem ipsum dolor sit amet, consectetur adipiscing elit. »* Vivamus pharetra e tortor nec cursus. Proin accumsan sagitis molestie. Suspendisse euismod dolor quis elit egestas vulputate. Mecenas 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. Nome eu eleifend ipsum. extras:
- digite: youtube # Adicione um vídeo incorporado do YouTube à página do produtohref: https://www.youtube.com/watch?v=dQw4w9WgXcQreviews:
- texto: Un très grand tale de la littérature poire.autor: Mélodiesource: Librairie L'Arbre à Nèfles – ParissourceUrl: https://www.arbreanefles.com

# Outro produto
- ean: 9781234567811título: Sous-solautor: Matt Yassenar

Especificação do arquivo de folha de estilo

Personalize a aparência do seu site adicionando um arquivo styles.css no diretório do seu projeto.

 .ElytreSite { /* Este é um wrapper global para todo o seu site. Aqui você pode definir a largura da página, margens, etc. */}

.Header { /* Como o cabeçalho do site é exibido */}

.Header .Menu { /* Como o menu do cabeçalho é exibido */}

.Header .Menu .MenuEntry { /* Como uma única entrada é exibida no menu de cabeçalho */}

.Product { /* Como um produto é exibido */}

.Product .Product-cover-image { /* Como a imagem da capa de um produto é exibida */}

.Product .Product-infos { /* Como as informações de um produto (título, autor, ean) são exibidas */}

.Product .Product-title { /* Como o título de um produto é exibido */}

.ProductList { /* Como uma lista de produtos é exibida */}

.ProductList .Product { /* Como um produto é exibido em uma lista de produtos */}

.HomeView .ProductList .Product { /* Como um produto aparece quando está em uma lista na página inicial */}

.ProductView .Product { /* Como um produto é exibido em uma única página de produto */}

.Error404View .Error404View-title { /* Como um título aparece em uma página de erro 404 */}

.Error404View .Error404View-reason { /* Como os motivos aparecem se fornecidos em uma página de erro 404 */}

.Footer { /* Como o rodapé do site é exibido */}

.Footer-powered-by { /* O texto "Powered by Elytre" no rodapé pode ser ocultado (por favor, não!) ou tornado mais discreto aqui */}

Depois de criar esses arquivos, você pode:

Construa seu site elytre para produção

 $ construção de fio

Isso criará seu site para produção em um diretório build , pronto para implantação. Você pode servir este diretório usando qualquer servidor web ou host de site estático.

Inicie o elytre no modo de desenvolvimento:

 $ início do fio

Isso irá gerar um servidor web local para desenvolvimento. Abra http://localhost:1854/ para visualizá-lo em seu navegador. A página será recarregada automaticamente se você editar os arquivos no diretório do seu projeto.

Testes

Código Lint dentro deste repositório com:

 $ fio fiapo

Execute testes dentro deste repositório com:

 $ teste de fio

Desenvolvimento

Elytre é feito de duas partes principais:

template/src : um modelo de site React que é mesclado com os arquivos de personalização do usuário para construir o site elytre final
build/src : uma ferramenta de nó que constrói o site elytre final usando o modelo React e o arquivo de personalização do usuário

Ambos são escritos em Typescript e precisam ser transpilados antes de serem usados.