krashna site

Sitio web de Krashna Musica

Generador de sitios estáticos para el sitio de la asociación de música estudiantil de Delft, Krashna Musika, construido con React y Gatsby.js.

Instalación

Para comenzar, necesitará el entorno Node.js y el administrador de paquetes Yarn. Una vez que los tenga instalados, ejecute los siguientes comandos desde el directorio raíz de este repositorio:

yarn
yarn global add gatsby-cli

Correr

Desarrollo

Para iniciar un servidor de desarrollo (con recarga en vivo), ejecute:

yarn develop

¡Ahora habrá un servidor escuchando en localhost:8000!

Producción

Para crear un paquete de producción, ejecute:

yarn build

Los cambios en la rama master se implementan automáticamente en el sitio activo (en krashna.nl), a través del servicio de compilación Netlify.

Documentación

Estructura general

En general, este proyecto sigue la estructura de carpetas común de Gatsby.js:

• Las páginas se definen en /src/pages . El nombre de archivo de cada archivo JS (excluyendo la extensión .js ) se utiliza como la URL de la página correspondiente.
• Las plantillas de página (estructuras repetitivas sobre cómo deben verse los diferentes tipos de páginas) se encuentran en /src/templates .
• Los componentes que utilizan estas páginas y plantillas están contenidos en la carpeta /src/components .

Sin embargo, hay algunas cosas en las que se diferencia, para ofrecer internacionalización y otras características:

• Todas las traducciones están contenidas en los archivos YAML de la carpeta /src/locales . Cada subcarpeta contiene una copia de cada archivo de definición de traducción, en un idioma específico. Estos archivos de traducción se compilan en JSON, que se sirve junto con el resto del contenido y se inserta dinámicamente en la página en tiempo de ejecución. Usamos la biblioteca react-intl , integrada por gatsby-plugin-intl , para la traducción.
• Todos los datos en los que se basa la generación de páginas, como la lista de conciertos, están contenidos en /src/data .

Agregar contenido

Se puede agregar contenido fácilmente agregando texto u otros datos a archivos predefinidos; a continuación se brindan algunos ejemplos. Todo el contenido está escrito en Markdown. Si no está familiarizado con Markdown o necesita ayuda, consulte este útil enlace

Agregar una página

Para agregar una página...

1. Agregue un archivo JS en /src/pages con el nombre de la URL en la que desea colocar esa página. En caso de duda sobre cómo estructurar este archivo, eche un vistazo a las otras páginas existentes en esa carpeta.
2. Agregue las traducciones necesarias para cualquier clave de traducción que utilice, en /src/locales . Consulte las páginas y traducciones existentes para ver ejemplos de cómo se puede acceder a dicha clave de traducción en el archivo de página y cómo se puede definir en el archivo de traducción.

Agregar un concierto

Para agregar un concierto...

1. Agregue una entrada a la lista /src/data/concerts.yaml siguiendo el mismo formato que las otras entradas.
2. Agregue textos dependientes del idioma a los archivos concerts.yaml en la carpeta /src/locales , en ambos idiomas.

Agregar una publicación de noticias

Para agregar una publicación de noticias...

1. Agregue una entrada a la lista /src/data/news.yaml siguiendo el mismo formato que las otras entradas.
2. Agregue textos dependientes del idioma a los archivos news.yaml en la carpeta /src/locales , en ambos idiomas.