refo
1.0.0
Un modèle de site Web pour le Web moderne.
Une expérience de développement puissante alliée à une sortie légère.
Génération de sites statiques sans effort et flexible
Vous vous sentez dépassé par le paysage des générateurs de sites statiques ? Refo propose une approche rafraîchissante, simple et personnalisable entièrement construite sur Node.js.
Contrairement à Jekyll, Gatsby, Astro et autres, nous vous permettons d'exploiter directement la puissance des modules Node.js. Cela signifie que vous pouvez générer n'importe quel type de site Web que vous pouvez imaginer, le tout avec la flexibilité de vos bibliothèques et serveurs Node.js préférés.
Avantages clés :
SVG , utilisez les importations raw et style vos composants en toute simplicité.Allez au-delà des limites des générateurs de sites statiques traditionnels. Profitez de la puissance et de la flexibilité de Refo pour votre prochain projet !
️ Étoile pour soutenir notre travail !
Soyez informé des nouvelles versions par e-mail.
rawa , b , c , ..., aa , ab , ...)development à l'aide de stack-tracerMarkdown pour les chaînes dans les fichiers JSON avec markdown-itPDF à l'aide 
Marionnettiste avec chercheur chromé JSON .PDF , document HTML et/ou sous forme de page sur un site Web.HTML et CSS .PDF prenant en charge différents formats comme Letter et A4 .PDF après avoir enregistré les modifications pour voir le PDF à jour. Installer les dépendances :
pnpm install
Êtes-vous sur une sorte de système basé sur Unix ? Mac ? Linux ? Si tel est le cas, vous souhaiterez peut-être modifier le
portdans le moduleindex, qui est défini sur80ce qui fonctionne sous Windows. La valeur par défaut de Superstatic est3474, vous pouvez donc la supprimer si vous préférez.
Démarrez le serveur en mode développement :
pnpm dev
Visitez http://localhost/ pour accéder au site Web.
Générez un site statique :
pnpm static Ouvrez le index.html dans le dossier static pour accéder au site Web.
import | fichier généré | |
|---|---|---|
| indice/ | static / | |
• favicon .ico ( file icône (module Node.js)) | • favicon .ico | |
• principal .js .js ( module Node.js) | → | • .js principal |
• index .html .jsx ( module Node.js) | • indexer .html | |
firebase .json .js ( module Node.js) | firebase .json |
Les
fileimportés (qui ont une certaine extension de fichier (ico,png)) (Node.js) modules) copient les fichiers eux-mêmes dans le dossierstaticlorsque les modules sont chargés. En mode rechargement de module, ils les suppriment s'ils ne sont plus importés.
L'
exportdefaultdesmodule(Node.js) (qui ont une certaine extension de fichier (js,json,html) dans leur nom de fichier de base) est écrite en tant que contenu des fichiers de sortie (dans le dossierstatic). Les noms de fichiers complets des fichiers de sortie sont les noms de fichiers de base desmodule(Node.js).
️ Étoile pour soutenir notre travail !
index .html .jsx ( module import ):
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 (fichier généré) :
<!DOCTYPE HTML > < html lang = en > < head > < style > .a{font-weight:700} </ style > </ head > < body class = a > example content </ body > </ html > Vous pouvez déployer le dossier statique docs tel quel.
Vous souhaiterez peut-être modifier le prefixum dans les fichiers suivants en fonction du nom du référentiel de votre project site : index/index/site/ main/
index/resume/index/index Vous pouvez supprimer complètement le prefixum si vous publiez un user or an organization site .
prefixum des fichiers répertoriés ci-dessus sous Déploiement des pages GitHub..firebaserc avec votre ID de projet Firebase : {
"projects" : {
"default" : " <projectId> "
}
}Déployez votre site sur Firebase Hosting :
pnpm deploy
Il peut être utile de séparer le modèle de CV et de le publier en tant que nouveau package Refo.
Ouvrez un nouveau numéro si vous le pensez et discutons-en. Nous pouvons certainement mettre en œuvre cela si cela s’avère utile.
Cet exemple utilise le gestionnaire JSON de Refo. Vous pouvez ainsi contrôler comment et si certaines propriétés sont affichées à partir du fichier index/index/site/index/resume/data.js comme décrit dans le fichier readme de Refo dans la section Utilisation du gestionnaire JSON.
Ce projet utilise superstatic pour servir les fichiers statiques générés. Vous pouvez utiliser n'importe quelle bibliothèque similaire pour servir les fichiers ou aucune bibliothèque du tout au cas où vous souhaiteriez parcourir les fichiers directement. Cela peut être utile pour les documentations hors ligne par exemple.
Vous pouvez supprimer superstatic et utiliser Firebase-tools à la place (qui utilise superstatic) si vous préférez. Dans ce cas, vous pouvez modifier les scripts dans le fichier package.json et remplacer superstatic par les commandes firebase serve .
Ce projet utilise simultanément pour exécuter Refo en mode surveillance et servir les fichiers avec superstatic. Vous pouvez utiliser n'importe quelle bibliothèque similaire comme npm-run-all pour exécuter Refo et un serveur en parallèle ou aucune bibliothèque du tout si vous n'avez pas besoin d'un serveur de fichiers.
Le fichier firebase.json peut être nommé superstatic.json si vous préférez. Ce modèle ne dépend pas de Firebase lui-même. Cependant, ils fournissent l’une des solutions d’hébergement statique les plus rapides, sinon la plus rapide.
Les littéraux de modèles JavaScript sont utilisés pour créer des modèles de documents HTML.
Cet exemple utilise également des balises communes dans certains modèles, ce qui permet d'utiliser une syntaxe plus courte dans de nombreux cas.
Voici quelques scénarios couramment utilisés dans cet exemple :
Par défaut vous pouvez afficher une valeur facultative et utiliser un opérateur conditionnel pour éviter d'afficher de fausses valeurs comme undefined par exemple :
module . exports = `
${ item ? item : '' }
`Common-tags fait cela pour vous. Vous pouvez donc utiliser une syntaxe plus courte avec un littéral de modèle balisé :
const { html } = require ( 'common-tags' )
module . exports = html `
${ item }
` Par défaut, vous pouvez afficher une partie de modèle facultative et utiliser un opérateur conditionnel pour éviter d'afficher de fausses valeurs comme undefined par exemple :
module . exports = `
${ item ? `
<div>
` + item + `
</div>
` : '' }
`Avec les balises communes, vous pouvez utiliser une condition simple avec un opérateur logique pour obtenir le même résultat :
const { html } = require ( 'common-tags' )
module . exports = html `
${ item && `
<div>
` + item + `
</div>
` }
` Par défaut, vous pouvez join le résultat lors d'une boucle sur un tableau d'éléments pour éviter l'affichage de virgules entre les éléments renvoyés :
module . exports = `<section>
${ items . map ( item => `
<div>
${ item }
</div>
` ) . join ( '' ) }
</section>`Common-tags fait cela pour vous. Vous pouvez donc utiliser une syntaxe plus courte :
const { html } = require ( 'common-tags' )
module . exports = html ` < section >
${ items . map ( item => `
<div>
${ item }
</div>
` ) }
</ section > ` Lorsque vous n'utilisez pas un littéral de modèle balisé avec des balises communes ou avec une bibliothèque similaire, vous pouvez concaténer des parties de modèle avec l'opérateur + si vous préférez :
module . exports = `
<div>
` + item + `
</div>
` Ou vous pouvez utiliser un espace réservé avec la syntaxe ${expression} :
module . exports = `
<div>
${ item }
</div>
`Dans certains cas, l’un d’eux peut être plus facile à lire que l’autre, vous pouvez donc utiliser le style en fonction du contexte ou choisir l’un plutôt que l’autre et rester cohérent. Cet exemple utilise les deux.
Certains éditeurs de code comme Atom et GitHub, par exemple, mettent en évidence les littéraux de modèles balisés html au format HTML, comme vous pouvez également le voir ci-dessus.
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 "
}
}
}
} Vous pouvez désormais utiliser l'option de surbrillance de la syntaxe JS Custom - Default pour les fichiers JavaScript.
Le gestionnaire JSON est un package autonome. Il est principalement utile pour gérer les données liées aux CV, mais vous pouvez également l'utiliser pour autre chose.
Vous pouvez également l'utiliser comme vous pouvez le voir dans l'exemple (asset/resume/getHandledJson.js) :
const handleJSON = require ( 'refo-handle-json' )
var json = JSON . parse ( JSON . stringify ( require ( './data' ) ) )
json = handleJSON ( json ) Il est recommandé de créer une copie du JSON requis à l'aide des fonctions JSON.parse(JSON.stringify(json)) par exemple lorsque vous utilisez Refo en mode watch (commentaire associé), car le gestionnaire JSON modifie les propriétés de l'objet.
Le gestionnaire JSON analyse les valeurs des objets chaîne en tant que Markdown à l'aide de markdown-it. Exemple : exemple/asset/resume/data.json#L7
Les propriétés qui se terminent par -private sont supprimé . Exemple : exemple/asset/resume/data.json#L4
Les objets qui ont une propriété nommée private sont également supprimés.
Les propriétés qui se terminent par -full ne sont incluses que lorsqu'un deuxième paramètre de valeur vraie est transmis à la fonction de gestionnaire. Exemple : exemple/asset/resume/data.json#L8, exemple/asset/resume/getHandledJson.js#L9
Les objets qui ont une propriété nommée full ne sont inclus que lorsqu'un deuxième paramètre de valeur vraie est transmis à la fonction de gestionnaire.
Lorsqu'un objet contient une propriété startDate sans propriété endDate , une propriété hidePresent peut être utilisée pour masquer une étiquette présente et afficher l'année en cours à la place.
Une propriété hideEndDate peut être utilisée pour masquer l’année en cours affichée à la place d’une étiquette actuelle.
Une propriété hideDuration peut être utilisée pour masquer la durée calculée. Sinon, une propriété duration est définie avec la durée calculée (exemples : 7 mois, 1 an, 1,5 an, 2 ans).
Il peut être utile de créer une documentation détaillée sur chaque package Refo.
Ouvrez un nouveau numéro si vous le pensez et discutons-en. Nous pouvons certainement mettre en œuvre cela si cela s’avère utile.
Proposez une modification de fichier pour ajouter votre projet ici.
Reprendre + port folio = Refo
