krashna site

Site da Krashna Musica

Gerador de site estático para o site da associação estudantil de música de Delft, Krashna Musika, construído com React e Gatsby.js.

Instalação

Para começar, você precisará do ambiente Node.js e do gerenciador de pacotes Yarn. Depois de instalá-los, execute os seguintes comandos no diretório raiz deste repositório:

yarn
yarn global add gatsby-cli

Correndo

Desenvolvimento

Para iniciar um servidor de desenvolvimento (com recarregamento ao vivo), execute:

yarn develop

Agora haverá um servidor escutando em localhost:8000!

Produção

Para construir um pacote de produção, execute:

yarn build

As alterações na ramificação master são implantadas automaticamente no site ativo (em krashna.nl), por meio do serviço de compilação Netlify.

Documentação

Estrutura Geral

Em geral, este projeto segue a estrutura de pastas comum Gatsby.js:

• As páginas são definidas em /src/pages . O nome de arquivo de cada arquivo JS (excluindo a extensão .js ) é usado como o URL da página correspondente.
• Os modelos de página (estruturas padronizadas para a aparência dos diferentes tipos de páginas) estão localizados em /src/templates .
• Os componentes usados ​​por essas páginas e modelos estão contidos na pasta /src/components .

No entanto, existem algumas diferenças em oferecer internacionalização e outros recursos:

• Todas as traduções estão contidas nos arquivos YAML da pasta /src/locales . Cada subpasta contém uma cópia de cada arquivo de definição de tradução, em um idioma específico. Esses arquivos de tradução são compilados em JSON, que é servido junto com o restante do conteúdo e inserido dinamicamente na página em tempo de execução. Usamos a biblioteca react-intl , integrada por gatsby-plugin-intl , para tradução.
• Todos os dados nos quais se baseia a geração da página, como a lista de shows, estão contidos em /src/data .

Adicionando conteúdo

A adição de conteúdo pode ser feita facilmente adicionando texto ou outros dados a arquivos predefinidos. Alguns exemplos são fornecidos abaixo. Todo o conteúdo é escrito em Markdown. Se você não está familiarizado com Markdown ou precisa de ajuda, verifique este link útil

Adicionando uma página

Para adicionar uma página...

1. Adicione um arquivo JS em /src/pages com o nome da URL na qual você deseja colocar essa página. Na dúvida de como estruturar esse arquivo, dê uma olhada nas demais páginas existentes nessa pasta.
2. Adicione as traduções necessárias para quaisquer chaves de tradução que você usar, em /src/locales . Consulte as páginas e traduções existentes para obter exemplos de como alguém pode acessar tal chave de tradução no arquivo de página e como isso pode ser definido no arquivo de tradução.

Adicionando um concerto

Para adicionar um concerto...

1. Adicione uma entrada à lista /src/data/concerts.yaml seguindo o mesmo formato das outras entradas.
2. Adicione textos dependentes do idioma aos arquivos concerts.yaml na pasta /src/locales , em ambos os idiomas.

Adicionando uma postagem de notícias

Para adicionar uma postagem de notícias...

1. Adicione uma entrada à lista /src/data/news.yaml seguindo o mesmo formato das outras entradas.
2. Adicione textos dependentes do idioma aos arquivos news.yaml na pasta /src/locales , em ambos os idiomas.