static timeline generator
1.0.0
Cree fácilmente una página web con una línea de tiempo estática como mi línea de tiempo de Wikimedia. Vea una vista previa de este sitio de muestra, implementado con GitHub Pages: https://molly.github.io/static-timeline-generator/.
Contenido
Clona este repositorio, luego ejecuta npm install desde el directorio.
npm run-script serve construirá el proyecto y entregará los archivos estáticos localmente en http://localhost:8080. npm run-script build simplemente ejecuta el paso de compilación sin iniciar el servidor de desarrollo.
Casi todo el contenido que necesita cambiar está en src/_data/content.js .
header (HTML, opcional): el contenido que se mostrará en el encabezado en la parte superior de la página.footer (HTML, opcional): el contenido que se mostrará en el pie de página en la parte inferior de la página.entries (matriz de objetos, requerida ): la lista de entradas que se mostrarán en la línea de tiempo, en el orden en que deben mostrarse.id (cadena, requerida ): una identificación única para esta entrada de la línea de tiempo.categories (matriz de cadenas, opcional): una lista de categorías que se aplican a esta entrada. Estos aparecerán como casillas de verificación en la parte superior de la página y permitirán a los lectores filtrar la línea de tiempo. No pueden contener comas. Pueden estar separados por guiones o espacios ( sample category o sample-category se mostrarán en la página como Sample category ). Las entradas sin ninguna categoría siempre se mostrarán.color (cadena, opcional): el color del círculo que se muestra en la línea de tiempo. Las opciones ya definidas son green , red y grey . Puede definir colores adicionales en css/custom.css (ver más abajo).faicon (cadena, opcional): el nombre de un ícono de Font Awesome para usar en el círculo en la línea de tiempo. Explora las opciones. Este es sólo el nombre del icono (sin el prefijo fa- ). Por ejemplo: anchor .datetime (cadena, ya sea datetime o date debe estar presente): un especificador de fecha y hora para el elemento. Puede estar en cualquier formato que reconozca moment.js . Normalmente hago "AAAA-MM-DD HH-SS". Si no hay hora, solo una fecha, use el parámetro date en lugar de datetime .date (cadena, datetime o date debe estar presente): un especificador de fecha para el elemento. "AAAA-MM-DD".title (HTML, obligatorio ): el título de la entrada de la línea de tiempo.image (opcional): una imagen para mostrar en la entrada.src (cadena, requerido): una URL directa al archivo de imagen que se va a incrustar en la página, o un enlace relativo a una imagen en este directorio (por ejemplo img/filename.png ).link (cadena, opcional): un hipervínculo a la página que contiene la imagen, si desea que las personas puedan hacer clic en ella para ver una versión más grande, etc.alt (cadena, opcional): texto alternativo que describe la imagen.caption (HTML, opcional): un título que describe la imagen.body (HTML, obligatorio ): el texto de la entrada de la línea de tiempo. Si desea varios párrafos, debe incluir etiquetas <p> usted mismo; de lo contrario, se agregará.links (matriz de objetos, opcional): una serie de enlaces que se muestran en la parte inferior de la entrada.href (cadena, requerida ): el destino del enlace.linkText (HTML, requerido ): texto del enlace.extra (HTML, opcional): HTML adicional para mostrar al final del enlace.pageTitle (cadena, requerida ): el texto que debe ir en la etiqueta <title> , para establecer el título de la página en el navegador.pageDescription (cadena, opcional): descripción de la página para incluir en metaetiquetas.pageAuthor (cadena, opcional): autor de la página para incluir metaetiquetas. Si desea agregar más opciones de color para los círculos en la línea de tiempo, puede editar el archivo src/css/custom.css para agregar el suyo propio. Puede utilizar esta herramienta para elegir colores y obtener sus códigos de color hexadecimales. Se definen así:
. timeline-icon . yourcolorhere {
background-color : # hexcol or code;
} Luego usarías color: yourcolorhere en el archivo content.js.
Reemplace las imágenes en la carpeta src/img para personalizar el favicon de la página y la imagen de OpenGraph.
Una vez que ejecute npm run-script buld , verá un directorio _site que contiene archivos HTML/CSS/JS estáticos con el contenido de su sitio. ¡Ahora puede utilizar cualquier alojamiento de sitio estático para implementar estos archivos!
Para implementar su sitio estático en páginas de GitHub (gratis), cree una rama que contenga los archivos estáticos en el directorio raíz ejecutando git subtree push --prefix _site origin gh-pages . Luego puede ir a las opciones de Configuración > Páginas de su repositorio y elegir "Implementar desde una rama", luego seleccione gh-pages como rama.
Existen algunos buenos tutoriales para implementar un sitio estático en varios otros servicios gratuitos. Algunos se enumeran a continuación.
También puede buscar tutoriales sobre cómo implementar un sitio creado con eleventy, ya que eso es lo que impulsa este proyecto. Algunos servicios de alojamiento web como Vercel admiten específicamente once de formas realmente útiles.
npm run-script build_site Las líneas de tiempo se mostrarán bien en tabletas:
o dispositivos móviles:
Esto debería funcionar bien en todos los navegadores modernos. IE <9 no es compatible.
Sin JavaScript habilitado, la página se degrada con gracia. Sin embargo, las publicaciones se mostrarán en una línea de tiempo de una sola columna y los filtros no se mostrarán.
Este proyecto utiliza
Se publica bajo la licencia MIT.
