refo
1.0.0
Um modelo de site para a web moderna.
A poderosa experiência do desenvolvedor encontra resultados leves.
Geração de sites estáticos sem esforço e com flexibilidade
Sentindo-se sobrecarregado pelo cenário do gerador de sites estáticos? Refo oferece uma abordagem simples e personalizável construída inteiramente em Node.js.
Ao contrário de Jekyll, Gatsby, Astro e outros, permitimos que você aproveite o poder dos módulos Node.js diretamente. Isso significa que você pode gerar qualquer tipo de site que imaginar, tudo com a flexibilidade de suas bibliotecas e servidores Node.js favoritos.
Principais benefícios:
SVG , utilize importações raw e style seus componentes com facilidade.Vá além das limitações dos geradores tradicionais de sites estáticos. Aproveite o poder e a flexibilidade do Refo para o seu próximo projeto!
‼️ Estrela para apoiar nosso trabalho!
Seja notificado sobre novos lançamentos por e-mail.
rawa , b , c , ..., aa , ab , ...)development usando stack-tracerMarkdown para strings em arquivos JSON com markdown-itPDF usando 
Marionetista com localizador de cromo JSON .PDF , document HTML e/ou como página de um site.HTML e CSS .PDF suportando diferentes formatos como Letter e A4 .PDF depois de salvar as alterações para ver o PDF atualizado. Instale dependências:
pnpm install
Você está em algum tipo de sistema baseado em Unix? Mac? Linux? Nesse caso, você pode querer alterar a
portno móduloindex, que está definido como80, que funciona no Windows. O padrão do Superstatic é3474, então você pode removê-lo se preferir.
Inicie o servidor em modo de desenvolvimento:
pnpm dev
Visite http://localhost/ para acessar o site.
Gere um site estático:
pnpm static Abra index.html na pasta static para acessar o site.
import | arquivo gerado | |
|---|---|---|
| índice/ | static / | |
• favicon .ico ( file de ícone (módulo Node.js)) | • .ico | |
• main .js .js ( module Node.js) | → | • .js principal |
• index .html .jsx ( module Node.js) | • índice .html | |
firebase .json .js ( module Node.js) | .json |
Os
fileimportados (que possuem uma determinada extensão de arquivo (ico,png)) (Node.js) módulos) copiam os próprios arquivos para a pastastaticquando os módulos são carregados. No modo de relacionamento de módulos eles os removem se não forem mais importados.
A
exportdefaultdosmodule(Node.js) (que possuem uma determinada extensão de arquivo (js,json,html) em seu nome de arquivo base) é gravada como o conteúdo dos arquivos de saída (na pastastatic). Os nomes completos dos arquivos de saída são os nomes dos arquivos base dosmodule(Node.js).
‼️ Estrela para apoiar nosso trabalho!
index .html .jsx ( import module ed):
import template from '#@SolidJS/template'
import use from '#@style'
const [ { styled } , extract ] = use ( )
const Body = styled . body `
font-weight: bold;
`
export default < >
{ template ( `<!DOCTYPE HTML>` ) }
< html lang = "en" >
{ template ( `<head>` ) }
< style > { extract ( ) } </ style >
{ template ( `</head>` ) }
< Body >
example content
</ Body >
</ html >
</ > index .html (arquivo gerado):
<!DOCTYPE HTML > < html lang = en > < head > < style > .a{font-weight:700} </ style > </ head > < body class = a > example content </ body > </ html > Você pode implantar a pasta docs estáticos como ela está.
Você pode querer alterar o prefixum nos seguintes arquivos de acordo com o nome do repositório do project site : index/index/site/ main/
index/resume/index/index Você pode remover completamente o prefixum caso esteja publicando um user or an organization site .
prefixum dos arquivos listados acima em GitHub Pages Deployment..firebaserc com o ID do projeto do Firebase: {
"projects" : {
"default" : " <projectId> "
}
}Implante seu site no Firebase Hosting:
pnpm deploy
Pode ser útil separar o modelo de currículo e publicá-lo como um novo pacote Refo.
Abra uma nova edição se achar que sim e vamos discutir isso. Definitivamente, podemos implementar isso se for útil.
Este exemplo usa o manipulador JSON do Refo. Assim, você pode controlar como e se determinadas propriedades são exibidas no arquivo index/index/site/index/resume/data.js, conforme descrito no leia-me do Refo na seção Uso do manipulador JSON.
Este projeto usa superestático para servir os arquivos estáticos gerados. Você pode usar qualquer biblioteca semelhante para servir os arquivos ou nenhuma biblioteca, caso queira navegar diretamente pelos arquivos. Isto pode ser útil para documentações off-line, por exemplo.
Você pode remover superestático e usar firebase-tools (que usa superestático), se preferir. Nesse caso, você pode modificar os scripts no arquivo package.json e substituir superstatic pelos comandos firebase serve .
Este projeto usa simultaneamente para executar o Refo no modo de observação e servir os arquivos com superestático. Você pode usar qualquer biblioteca semelhante como npm-run-all para executar o Refo e um servidor em paralelo ou nenhuma biblioteca se não precisar de um servidor de arquivos.
O arquivo firebase.json pode ser nomeado superstatic.json se você preferir. Este modelo não depende do próprio Firebase. No entanto, eles fornecem uma das soluções de hospedagem estática consistentemente mais rápida, se não a mais rápida.
Literais de modelo JavaScript são usados para modelar documentos HTML.
Este exemplo também usa tags comuns em certos modelos, o que permite usar uma sintaxe mais curta em muitos casos.
Aqui estão alguns cenários comumente usados neste exemplo:
Por padrão você pode exibir um valor opcional e usar um operador condicional para evitar a exibição de valores falsos como undefined , por exemplo:
module . exports = `
${ item ? item : '' }
`Common-tags faz isso por você. Portanto, você pode usar uma sintaxe mais curta com um literal de modelo marcado:
const { html } = require ( 'common-tags' )
module . exports = html `
${ item }
` Por padrão, você pode exibir uma parte opcional do modelo e usar um operador condicional para evitar a exibição de valores falsos como undefined , por exemplo:
module . exports = `
${ item ? `
<div>
` + item + `
</div>
` : '' }
`Com tags comuns você pode usar uma condição simples com um operador lógico para conseguir o mesmo:
const { html } = require ( 'common-tags' )
module . exports = html `
${ item && `
<div>
` + item + `
</div>
` }
` Por padrão, você pode join o resultado ao percorrer uma matriz de itens para evitar a exibição de vírgulas entre os itens retornados:
module . exports = `<section>
${ items . map ( item => `
<div>
${ item }
</div>
` ) . join ( '' ) }
</section>`Common-tags faz isso por você. Então você pode usar uma sintaxe mais curta:
const { html } = require ( 'common-tags' )
module . exports = html ` < section >
${ items . map ( item => `
<div>
${ item }
</div>
` ) }
</ section > ` Quando você não estiver usando um modelo literal marcado com tags comuns ou com uma biblioteca semelhante, você poderá concatenar partes do modelo com o operador + , se preferir:
module . exports = `
<div>
` + item + `
</div>
` Ou você pode usar um espaço reservado com a sintaxe ${expression} :
module . exports = `
<div>
${ item }
</div>
`Em alguns casos, um deles pode ser mais fácil de ler do que o outro, então você pode usar o estilo de acordo com o contexto ou pode escolher um em vez do outro e permanecer consistente. Este exemplo usa ambos.
Alguns editores de código como Atom e GitHub, por exemplo, destacam literais de modelo marcados com html como HTML, como você também pode ver acima.
Preferencies / Package Settings / JS Custom / Settings .JS Custom.sublime-settings — User : {
"configurations" : {
"jsx" : true
, "custom_templates" : {
"styled_components" : true
, "lookaheads" : {
" \ <" : " scope:text.html.basic "
, " \ .|height|padding|margin" : " scope:source.js.css "
, "import|minify|await|export|if|window| \ (|," : " scope:source.js "
}
, "tags" : {
"injectGlobal" : " scope:source.js.css "
, "css" : " scope:source.js.css "
, "html" : " scope:text.html.basic "
}
}
}
} Agora você pode usar a opção de realce de sintaxe JS Custom - Default para arquivos JavaScript.
O manipulador JSON é um pacote independente. É útil principalmente para lidar com dados relacionados ao currículo, mas você também pode usá-lo para qualquer outra coisa.
Você também pode usá-lo como pode ver no exemplo (asset/resume/getHandledJson.js):
const handleJSON = require ( 'refo-handle-json' )
var json = JSON . parse ( JSON . stringify ( require ( './data' ) ) )
json = handleJSON ( json ) É recomendado criar uma cópia do JSON necessário usando as funções JSON.parse(JSON.stringify(json)) por exemplo, quando você estiver usando Refo no modo watch (comentário relacionado), porque o manipulador JSON está alterando as propriedades do objeto.
O manipulador JSON está analisando valores de objetos de string como Markdown usando markdown-it. Exemplo: exemplo/asset/resume/data.json#L7
Propriedades que terminam com -private são removido . Exemplo: exemplo/asset/resume/data.json#L4
Objetos que possuem uma propriedade chamada private também são removidos.
Propriedades que terminam com -full são incluídas apenas quando um segundo parâmetro de valor verdadeiro é passado para a função manipuladora. Exemplo: exemplo/asset/resume/data.json#L8, exemplo/asset/resume/getHandledJson.js#L9
Objetos que possuem uma propriedade chamada full são incluídos apenas quando um segundo parâmetro de valor verdadeiro é passado para a função manipuladora.
Quando um objeto contém uma propriedade startDate sem uma propriedade endDate , uma propriedade hidePresent pode ser usada para ocultar um rótulo atual e mostrar o ano atual.
Uma propriedade hideEndDate pode ser usada para ocultar o ano atual mostrado em vez de um rótulo atual.
Uma propriedade hideDuration pode ser usada para ocultar a duração calculada. Caso contrário, uma propriedade duration é definida com a duração calculada (exemplos: 7 meses, 1 ano, 1,5 anos, 2 anos).
Pode ser útil criar documentação detalhada sobre cada pacote Refo.
Abra uma nova edição se achar que sim e vamos discutir isso. Definitivamente, podemos implementar isso se for útil.
Proponha alteração de arquivo para adicionar seu projeto aqui.
Currículo + portofo lio = Refo
