refo
1.0.0
Una plantilla de sitio web para la web moderna.
Una potente experiencia de desarrollador se combina con resultados ligeros.
Generación de sitios estáticos sin esfuerzo y con flexibilidad
¿Se siente abrumado por el panorama de los generadores de sitios estáticos? Refo ofrece un enfoque refrescante, simple y personalizable construido completamente en Node.js.
A diferencia de Jekyll, Gatsby, Astro y otros, le permitimos aprovechar el poder de los módulos de Node.js directamente. Esto significa que puede generar cualquier tipo de sitio web que pueda imaginar, todo con la flexibilidad de sus bibliotecas y servidores Node.js favoritos.
Beneficios clave:
SVG , utilice importaciones raw y style sus componentes con facilidad.Vaya más allá de las limitaciones de los generadores de sitios estáticos tradicionales. ¡Aproveche el poder y la flexibilidad de Refo para su próximo proyecto!
️ ¡Estrella para apoyar nuestro trabajo!
Reciba notificaciones sobre nuevos lanzamientos a través de correos electrónicos.
rawa , b , c , ..., aa , ab , ...)development usando stack-tracerMarkdown para cadenas en archivos JSON con Markdown-itPDF usando 
Titiritero con buscador de cromo JSON .PDF , document HTML o como página de un sitio web.HTML y CSS .PDF que admitan diferentes formatos como Letter y A4 .PDF después de guardar los cambios para ver el PDF actualizado. Instalar dependencias:
pnpm install
¿Estás en algún tipo de sistema basado en Unix? ¿Impermeable? ¿Linux? Si es así, es posible que desee cambiar el
porten el móduloindex, que está configurado en80y funciona en Windows. El valor predeterminado de Superstatic es3474, por lo que puedes eliminarlo si lo prefieres.
Inicie el servidor en modo de desarrollo:
pnpm dev
Visite http://localhost/ para acceder al sitio web.
Generar un sitio estático:
pnpm static Abra index.html dentro de la carpeta static para acceder al sitio web.
import | archivo generado | |
|---|---|---|
| índice/ | static / | |
• favicon .ico ( file de icono (módulo Node.js)) | • favicon .ico | |
• main .js .js ( module Node.js) | → | • .js principal |
• index .html .jsx ( module Node.js) | • índice .html | |
firebase .json .js ( module Node.js) | base de fuego .json |
Los
fileimportados (que tienen una determinada extensión de archivo (ico,png)) (Node.js) módulos) copian los archivos en la carpetastaticcuando se cargan los módulos. En el modo de relación de módulos, los eliminan si ya no se importan.
La
exportdefaultdemodule(Node.js) (que tienen una determinada extensión de archivo (js,json,html) en su nombre de archivo base) se escriben como el contenido de los archivos de salida (en la carpetastatic). Los nombres completos de los archivos de salida son los nombres de los archivos base de losmodule(Node.js).
️ ¡Estrella para apoyar nuestro trabajo!
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 >
</ > índice .html (archivo generado):
<!DOCTYPE HTML > < html lang = en > < head > < style > .a{font-weight:700} </ style > </ head > < body class = a > example content </ body > </ html > Puede implementar la carpeta de docs estáticos tal como está.
Es posible que desee cambiar el prefixum en los siguientes archivos según el nombre del repositorio del project site : index/index/site/ main/
index/resume/index/index Puede eliminar completamente el prefixum en caso de que esté publicando un user or an organization site .
prefixum de los archivos enumerados anteriormente en Implementación de páginas de GitHub..firebaserc con el ID de tu proyecto de Firebase: {
"projects" : {
"default" : " <projectId> "
}
}Implemente su sitio en Firebase Hosting:
pnpm deploy
Puede resultar útil separar la plantilla de currículum y publicarla como un nuevo paquete Refo.
Abra una nueva edición si así lo cree y analicemos esto. Definitivamente podemos implementar esto si resulta útil.
Este ejemplo utiliza el controlador JSON de Refo. Por lo tanto, puede controlar cómo y si se muestran ciertas propiedades desde el archivo index/index/site/index/resume/data.js como se describe en el archivo Léame de Refo en la sección Uso del controlador JSON.
Este proyecto utiliza superstatic para servir los archivos estáticos generados. Puede utilizar cualquier biblioteca similar para servir los archivos o ninguna biblioteca en caso de que desee explorar los archivos directamente. Esto puede resultar útil, por ejemplo, para documentaciones fuera de línea.
Puede eliminar superstatic y usar firebase-tools en su lugar (que usa superstatic) si lo prefiere. En este caso, puede modificar los scripts en el archivo package.json y reemplazar superstatic con comandos firebase serve .
Este proyecto se utiliza simultáneamente para ejecutar Refo en modo de vigilancia y servir los archivos con superestático. Puede usar cualquier biblioteca similar como npm-run-all para ejecutar Refo y un servidor en paralelo o ninguna biblioteca si no necesita un servidor de archivos.
El archivo firebase.json podría denominarse superstatic.json si lo prefiere. Esta plantilla no depende del propio Firebase. Sin embargo, proporcionan una de las soluciones de alojamiento estático más rápidas, si no la más rápida.
Los literales de plantilla de JavaScript se utilizan para crear plantillas de documentos HTML.
Este ejemplo también utiliza etiquetas comunes en determinadas plantillas, lo que permite utilizar una sintaxis más corta en muchos casos.
A continuación se muestran algunos escenarios utilizados habitualmente en este ejemplo:
De forma predeterminada, puede mostrar un valor opcional y usar un operador condicional para evitar que se muestren valores falsos como, por ejemplo, undefined :
module . exports = `
${ item ? item : '' }
`Las etiquetas comunes hacen esto por usted. Así que puedes usar una sintaxis más corta con un literal de plantilla etiquetado:
const { html } = require ( 'common-tags' )
module . exports = html `
${ item }
` De forma predeterminada, puede mostrar una parte de plantilla opcional y usar un operador condicional para evitar mostrar valores falsos como undefined por ejemplo:
module . exports = `
${ item ? `
<div>
` + item + `
</div>
` : '' }
`Con etiquetas comunes puedes usar una condición simple con un operador lógico para lograr lo mismo:
const { html } = require ( 'common-tags' )
module . exports = html `
${ item && `
<div>
` + item + `
</div>
` }
` De forma predeterminada, puede join el resultado al recorrer una serie de elementos para evitar que se muestren comas entre los elementos devueltos:
module . exports = `<section>
${ items . map ( item => `
<div>
${ item }
</div>
` ) . join ( '' ) }
</section>`Las etiquetas comunes hacen esto por usted. Entonces puedes usar una sintaxis más corta:
const { html } = require ( 'common-tags' )
module . exports = html ` < section >
${ items . map ( item => `
<div>
${ item }
</div>
` ) }
</ section > ` Cuando no esté utilizando un literal de plantilla etiquetado con etiquetas comunes o con una biblioteca similar, puede concatenar partes de la plantilla con el operador + si lo prefiere:
module . exports = `
<div>
` + item + `
</div>
` O puedes usar un marcador de posición con la sintaxis ${expression} en su lugar:
module . exports = `
<div>
${ item }
</div>
`En algunos casos, uno de ellos puede ser más fácil de leer que el otro, por lo que puedes usar el estilo según el contexto o puedes elegir uno sobre el otro y mantener la coherencia. Este ejemplo utiliza ambos.
Algunos editores de código como Atom y GitHub, por ejemplo, resaltan los literales de plantilla etiquetados con html como HTML, como también puede ver arriba.
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 "
}
}
}
} Ahora puede utilizar la opción JS Custom - Default para archivos JavaScript.
El controlador JSON es un paquete independiente. Es principalmente útil para manejar datos relacionados con el currículum, pero también puedes usarlo para cualquier otra cosa.
También puedes usarlo como puedes ver en el ejemplo (asset/resume/getHandledJson.js):
const handleJSON = require ( 'refo-handle-json' )
var json = JSON . parse ( JSON . stringify ( require ( './data' ) ) )
json = handleJSON ( json ) Se recomienda crear una copia del JSON requerido usando las funciones JSON.parse(JSON.stringify(json)) , por ejemplo, cuando usa Refo en modo watch (comentario relacionado), porque el controlador JSON está cambiando las propiedades del objeto.
El controlador JSON está analizando valores de objetos de cadena como Markdown usando Markdown-it. Ejemplo: ejemplo/activo/resume/data.json#L7
Las propiedades que terminan en -private son remoto . Ejemplo: ejemplo/activo/resume/data.json#L4
Los objetos que tienen una propiedad denominada private también se eliminan.
Las propiedades que terminan en -full solo se incluyen cuando se pasa un segundo parámetro de valor verdadero a la función del controlador. Ejemplo: ejemplo/asset/resume/data.json#L8, ejemplo/asset/resume/getHandledJson.js#L9
Los objetos que tienen una propiedad denominada full solo se incluyen cuando se pasa un segundo parámetro de valor verdadero a la función del controlador.
Cuando un objeto contiene una propiedad startDate sin una propiedad endDate , se puede usar una propiedad hidePresent para ocultar una etiqueta actual y mostrar el año actual.
Se puede utilizar una propiedad hideEndDate para ocultar el año actual que se muestra en lugar de una etiqueta actual.
Se puede utilizar una propiedad hideDuration para ocultar la duración calculada. De lo contrario, se define una propiedad duration con la duración calculada (ejemplos: 7 meses, 1 año, 1,5 años, 2 años).
Puede resultar útil crear documentación detallada sobre cada paquete Refo.
Abra una nueva edición si así lo cree y analicemos esto. Definitivamente podemos implementar esto si resulta útil.
Proponga un cambio de archivo para agregar su proyecto aquí.
Curriculum vitae + port fo lio = Refo
