Référence Nue

Fichier de contexte pour Gemini

Fichier à intégrer dans vos projets Nue pour faciliter les interactions avec Gemini

Qu'est-ce que Nue ?

Nue est un framework web moderne conçu pour les développeurs UX qui privilégient une approche HTML/CSS-first. C'est un générateur de sites statiques (SSG) qui met l'accent sur la simplicité et les standards web.

Philosophie Nue

HTML/CSS-first : Privilégie le HTML sémantique et le CSS pur
Simplicité : Évite la complexité inutile et le sur-engineering
Standards web : S'appuie sur les technologies web natives
Performance : Génère des sites statiques optimisés
Développeur UX friendly : Conçu pour ceux qui maîtrisent HTML/CSS

Liens de référence

Site officiel : https://nuejs.org/
Documentation : https://nuejs.org/docs/
GitHub : https://github.com/nuejs/nue

Architecture de projet type

Doc: https://nuejs.org/docs/project-structure.html

mon-site-nue/
├── @global/          ^{# .html, .css, .js composants globaux}
├── @library/         ^{# .html, .css, .js composants réutilisables}
├── images/           ^{# images}
├── site.yaml         ^{# fichier pour la configuration de Nue}
├── index.md          ^{# contenu de la page d'accueil index.html}
└── GEMINI.md         ^{# ce fichier}

Configuration de base pour le fichier site.yaml

Doc: https://nuejs.org/docs/settings.html

yaml-language-server: $schema=https://json.schemastore.org/nuejs-site.json
globals: ["@global"]
libs: ["@library"]
inline_css: true

Code HTML produit par Nue pour le layout de base

Doc: https://nuejs.org/docs/layout.html

Il ne faut pas intégrer le code HTML de base dans les comosants layout, celui-ci est automatiquement créé par Nue:

<!doctype html>
<html lang="en-US" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
^{<title>Titre</title> <!-- titre dans le frontmatter du fichier Markdown -->}
  </head>
  <body>
    <main>
      <article>
^{<slot/> <!-- remplacé par le contenu du fichier Markdown -->}
      </article>
    </main>
  </body>
</html>

Navigation principale

Doc: https://nuejs.org/docs/core-components.html#navi

Les liens pour la navigation principale sont dans le fichier site.yaml:

nav:
  - Home: /
  - À propos: /apropos.html
  - Contact: /contact.html

Ensuite, le composant core <navi/> est utilisé dans un fichier /@global/layout.html pour produire le code:

<header>
  <navi :items="nav"/>
</header

Syntaxe des composants Nue

Les composants Nue utilisent une syntaxe proche du HTML standard, sans JSX :

^{<!-- Exemple de composant simple -->}
<div @name="card" class="card">
  <h2>{ card_title }</h2>
  <p>{ card_description }</p>
</div>

Intégration dans un fichier Markdown:

[card]

Intégration dans un composants HTML:

<card/>

CSS dans Nue

CSS vanilla privilégié
Support des CSS custom properties
Architecture CSS modulaire recommandée
Pas de CSS-in-JS

Templates de prompts

Pour du développement :

Je développe avec Nue (SSG HTML/CSS-first). Mon projet suit cette structure :
[décrire votre structure]

J'ai besoin d'aide pour [problème spécifique] en respectant la philosophie Nue 
(simplicité, HTML sémantique, CSS pur).

Pour du debugging :

Sur mon site Nue, j'ai ce problème : [description]
Nue génère du HTML standard et privilégie le CSS pur.
Voici le code concerné : [code]

Pour de l'architecture :

Je structure un site Nue avec [description du projet].
Comment organiser mes composants et CSS en suivant les bonnes pratiques Nue ?

Notes importantes

Toujours mentionner que Nue est HTML/CSS-first
Préciser qu'il n'y a pas de JSX ou de JavaScript complexe
Insister sur la simplicité et les standards web
Nue n'est pas React, Vue ou un framework JS traditionnel

3. Référence dans le README principal

#^{# Développement avec IA}
Ce projet inclut un fichier de contexte (`GEMINI.md`) 
pour faciliter les interactions avec Gemini lors du développement.

4. Commandes principales

Nue utilise Bun pour le développement local et Node pour le déploiement sur Netlify. Bun est installé sur ce PC en version 1.2.20 et Nue en version 1.0.0-RC.4.

Serve project: il sera dans le dossier ~/.dev/

nue

Build project: il sera dans le dossier ~/.build/

nue build -p