static timeline generator
1.0.0
Crie facilmente uma página de linha do tempo estática como minha linha do tempo da Wikimedia. Confira uma prévia deste site de exemplo, implantado com GitHub Pages: https://molly.github.io/static-timeline-generator/.
Conteúdo
Clone este repositório e execute npm install no diretório.
npm run-script serve construirá o projeto e servirá os arquivos estáticos localmente em http://localhost:8080. npm run-script build apenas executa a etapa de construção sem iniciar o servidor de desenvolvimento.
Quase todo o conteúdo que você precisa alterar está em src/_data/content.js .
header (HTML, opcional): o conteúdo a ser exibido no cabeçalho na parte superior da página.footer (HTML, opcional): o conteúdo a ser exibido no rodapé na parte inferior da página.entries (matriz de objetos, obrigatórios ): A lista de entradas a serem exibidas na linha do tempo, na ordem em que devem ser exibidas.id (string, require ): Um ID exclusivo para esta entrada na linha do tempo.categories (matriz de strings, opcional): uma lista de categorias que se aplicam a esta entrada. Eles aparecerão como caixas de seleção na parte superior da página e permitirão que os leitores filtrem a linha do tempo. Eles não podem conter vírgulas. Eles podem ser separados por hífen ou espaço ( sample category ou sample-category serão exibidas na página como Sample category ). As entradas sem nenhuma categoria serão sempre exibidas.color (string, opcional): A cor do círculo exibido na linha do tempo. As opções já definidas são green , red e grey . Você pode definir cores adicionais em css/custom.css (veja abaixo).faicon (string, opcional): O nome de um ícone Font Awesome para usar no círculo na linha do tempo. Explore as opções. Este é apenas o nome do ícone (sem o prefixo fa- ). Por exemplo: anchor .datetime (string, datetime ou date deve estar presente): um especificador de data e hora para o item. Pode estar em qualquer formato que moment.js reconheça. Normalmente faço "AAAA-MM-DD HH-SS". Se não houver hora, apenas data, use o parâmetro date em vez de datetime .date (string, datetime ou date deve estar presente): um especificador de data para o item. "AAAA-MM-DD".title (HTML, obrigatório ): O título da entrada da linha do tempo.image (opcional): uma imagem a ser exibida na entradasrc (string, obrigatório): uma URL direta para o arquivo de imagem a ser incorporado na página ou um link relativo para uma imagem neste diretório (por exemplo img/filename.png ).link (string, opcional): Um hiperlink para a página que contém a imagem, se você quiser que as pessoas possam clicar nela para ver uma versão maior, etc.alt (string, opcional): texto alternativo que descreve a imagem.caption (HTML, opcional): uma legenda que descreve a imagem.body (HTML, obrigatório ): O texto da entrada da linha do tempo. Se quiser vários parágrafos, você mesmo deverá incluir as tags <p> ; caso contrário, será adicionado.links (matriz de objetos, opcional): uma matriz de links a serem exibidos na parte inferior da entrada.href (string, obrigatório ): O destino do link.linkText (HTML, obrigatório ): Texto do link.extra (HTML, opcional): HTML extra para exibir no final do link.pageTitle (string, obrigatório ): O texto a ser inserido na tag <title> , para definir o título da página no navegador.pageDescription (string, opcional): descrição da página para inserir meta tags.pageAuthor (string, opcional): Autor da página para entrar em meta tags. Se desejar adicionar mais opções de cores para os círculos na linha do tempo, você pode editar o arquivo src/css/custom.css para adicionar o seu próprio. Você pode usar esta ferramenta para escolher cores e obter seus códigos hexadecimais de cores. Eles são definidos assim:
. timeline-icon . yourcolorhere {
background-color : # hexcol or code;
} Você usaria então color: yourcolorhere no arquivo content.js.
Substitua as imagens na pasta src/img para personalizar o favicon da página e a imagem OpenGraph.
Depois de executar npm run-script buld , você verá um diretório _site contendo arquivos HTML/CSS/JS estáticos com o conteúdo do seu site. Agora você pode usar qualquer hospedagem de site estático para implantar esses arquivos!
Para implantar seu site estático nas páginas do GitHub (gratuito), crie uma ramificação contendo os arquivos estáticos no diretório raiz executando git subtree push --prefix _site origin gh-pages . Em seguida, você pode ir para Configurações> Opções de páginas do seu repositório e escolher "Implantar a partir de uma ramificação" e selecionar gh-pages como ramificação.
Existem alguns bons tutoriais para implantar um site estático em vários outros serviços gratuitos. Alguns estão listados abaixo.
Você também pode procurar tutoriais sobre como implantar um site construído com onze, já que é isso que impulsiona este projeto. Alguns serviços de hospedagem na web, como o Vercel, oferecem suporte específico a onze de maneiras realmente úteis.
npm run-script build_site Os cronogramas serão renderizados bem em tablets:
ou dispositivos móveis:
Isto deve funcionar bem em todos os navegadores modernos. IE <9 não é compatível.
Sem o JavaScript ativado, a página degrada normalmente. No entanto, as postagens serão exibidas em uma linha do tempo de coluna única e os filtros não serão exibidos.
Este projeto usa
É lançado sob a licença do MIT.
