tuto-leptos. premier jet

2025-11-21 22:46:15 -05:00
parent 44c4ac7290
commit 28d95cb568
2 changed files with 407 additions and 0 deletions
--- a/articles/non-trivial-tuto-leptos/search-and-notes.md
+++ b/articles/non-trivial-tuto-leptos/search-and-notes.md
@@ -0,0 +1,304 @@
+# Notes de travail 
+
+## Ce que chatGPT pense
+
+
+QUESTION
+
+why should I consider using leptos, a web framework in rust?
+
+RÉPONSE
+
+You should consider using Leptos because it offers fine-grained reactivity, enabling high performance by updating only the exact parts of the DOM that change—often outperforming React, Svelte, and Vue in benchmarks. It eliminates the need for a virtual DOM, reducing overhead and improving speed.
+
+Leptos supports full-stack development with server-side rendering (SSR), hydration, and isomorphic server functions, allowing seamless integration of frontend and backend logic in Rust. This simplifies architecture and reduces the need for separate APIs.
+
+Built for WebAssembly (Wasm), it leverages Rust’s memory safety and zero-cost abstractions, making web apps both fast and secure. With strong ecosystem support via wasm-bindgen and wasm-pack, and growing production use, Leptos is a modern, stable choice for high-performance web applications.
+
+
+
+
+
+QUESTION
+
+Énumère et décrit des noms de tempos de musique à consonance italienne.
+
+Si tu avais à en choisir un pour leptos, ce serait lequel et pourquoi?
+
+RÉPONSE
+
+Voici quelques noms de tempos italiens courants avec leur signification :
+
+- Largo : Très lent, ample et solennel (40–60 BPM)
+- Adagio : Lent et expressif (60–80 BPM)
+- Andante : Allant, comme une marche tranquille (76–100 BPM)
+- Moderato : Rythme modéré, équilibré (88–112 BPM)
+- Allegro : Vif, rapide et joyeux (112–160 BPM)
+- Vivace : Très vif et énergique (120–140 BPM)
+- Presto : Très rapide (140–200 BPM)
+- Prestissimo : Extrêmement rapide (>188 BPM)
+
+Brave logo
+Demander
+Tout
+Images
+Actualités
+Vidéos
+Recherche personnalisée
+
+New conversation
+
+
+I use nvim and I want to insert emojis in my text. 
+Terminé
+
+🌐
+🌐
+🌐
+🌐
+6
+You can insert emojis in Neovim using built-in methods or plugins. Below are the most effective approaches:
+
+1. Built-in Unicode Insertion
+Use Vim's native Unicode input method:
+
+Enter insert mode.
+Press <C-v> (Ctrl+V), then:
+For emojis with 4-digit hex codes: u + 4-digit code (e.g., <C-v>u2615 → ☕).
+For emojis with longer codes: U + 8-digit code (e.g., <C-v>U1F60A → 😊).
+Note: Leading zeros can be omitted, but you may need to press a non-digit key (like Space) to finalize input.
+
+
+Vim insert Unicode character
+
+
+
+
+
+2. Digraphs
+Define shortcuts for frequently used emojis:
+
+" In your init.vim or .vimrc
+digraph sm 128512  " <C-k>sm → 😀
+
+In insert mode, press <C-k> followed by the digraph (e.g., sm).
+
+
+Vim digraphs emoji
+
+
+
+
+
+3. Abbreviations
+Set up text replacements:
+
+" Example abbreviations
+ab :smile: 😀
+ab :coffee: ☕
+ab :thumbsup: 👍
+
+Type :smile: and press Space to expand.
+
+
+Neovim emoji abbreviations site:reddit.com
+
+
+
+
+
+4. Plugins for Emoji Picker & Completion
+📦 emoji.nvim (Recommended)
+A modern plugin with search and auto-completion:
+
+-- Using Lazy.nvim
+{
+  "Allaman/emoji.nvim",
+  config = true,
+  cmd = { "Emoji", "EmojiByGroup" },
+  keys = {
+    { "<leader>e", "<cmd>Emoji<cr>", desc = "Emoji picker" },
+  },
+}
+
+Use :Emoji to open a searchable list.
+Supports nvim-cmp: type : and search by name (e.g., :smile:).
+
+emoji.nvim, Neovim plugin
+
+
+
+
+
+🔍 telescope-emoji.nvim (For Telescope Users)
+Integrates with telescope.nvim:
+
+{
+  "xiyaowong/telescope-emoji.nvim",
+  dependencies = { "nvim-telescope/telescope.nvim" }
+}
+
+After setup, use :Telescope emoji to search and insert.
+
+
+telescope-emoji.nvim, Neovim plugin
+
+
+
+
+
+🧩 smoji.nvim (For Git Commit Messages)
+Ideal for gitmoji-style commits:
+
+{
+  "zakissimo/smoji.nvim",
+  cmd = "Smoji",
+  keys = { { "<leader>e", "<cmd>Smoji<cr>", desc = "Insert emoji" } },
+}
+
+
+smoji.nvim, Neovim plugin
+
+
+
+
+
+5. OS-Level Emoji Picker
+macOS: Press Ctrl+Cmd+Space in insert mode.
+Windows: Press Win + ..
+Linux: Depends on terminal (e.g., Kitty has built-in picker).
+
+How to use emoji picker in Neovim
+
+
+
+
+
+Requirements
+Ensure your terminal/font supports Unicode (e.g., Nerd Fonts).
+Set UTF-8 encoding in Neovim:
+set encoding=utf-8
+
+
+Neovim Unicode font support
+
+
+
+
+
+1. Built-in Unicode Insertion
+2. Digraphs
+3. Abbreviations
+4. Plugins for Emoji Picker & Completion
+5. OS-Level Emoji Picker
+Requirements
+
+Copier
+
+
+find me a recent article from a good reputation source that explain why it have been a good thing that the linux core use rust now.
+
+Terminé
+The integration of Rust into the Linux kernel has been a significant step toward improving system security and stability. A March 2025 article from LinuxSecurity.com highlights that Rust's memory safety features—such as its ownership model and compile-time checks—help prevent common vulnerabilities like buffer overflows and use-after-free errors, which account for a large portion of historical kernel bugs.
+
+Key benefits include:
+
+Enhanced security: Rust eliminates many memory-related bugs by design, reducing the attack surface.
+Hybrid approach: New kernel components are written in Rust while maintaining stable C code, ensuring backward compatibility.
+Support from core developers: Maintainers like Greg Kroah-Hartman and Kees Cook back the initiative, emphasizing safety without sacrificing performance.
+Performance overhead is minimal—studies show only 0.7% to 3% increase in certain components—making Rust a practical and forward-looking addition.
+
+
+Rust for Linux
+project for adding a second language to the Linux kernel
+Wikipedia
+rust-for-linux.com
+Rust for Linux logo
+
+Copier
+
+
+why should I consider using leptos, a web framework in rust?
+
+Terminé
+You should consider using Leptos because it offers fine-grained reactivity, enabling high performance by updating only the exact parts of the DOM that change—often outperforming React, Svelte, and Vue in benchmarks. It eliminates the need for a virtual DOM, reducing overhead and improving speed.
+
+Leptos supports full-stack development with server-side rendering (SSR), hydration, and isomorphic server functions, allowing seamless integration of frontend and backend logic in Rust. This simplifies architecture and reduces the need for separate APIs.
+
+Built for WebAssembly (Wasm), it leverages Rust’s memory safety and zero-cost abstractions, making web apps both fast and secure. With strong ecosystem support via wasm-bindgen and wasm-pack, and growing production use, Leptos is a modern, stable choice for high-performance web applications.
+
+
+Leptos, Rust web framework
+
+
+
+
+
+
+Copier
+
+
+Énumère et décrit des noms de tempos de musique à consonance italienne.
+
+Si tu avais à en choisir un pour leptos, ce serait lequel et pourquoi?
+
+Terminé
+Voici quelques noms de tempos italiens courants avec leur signification :
+
+Largo : Très lent, ample et solennel (40–60 BPM)
+Adagio : Lent et expressif (60–80 BPM)
+Andante : Allant, comme une marche tranquille (76–100 BPM)
+Moderato : Rythme modéré, équilibré (88–112 BPM)
+Allegro : Vif, rapide et joyeux (112–160 BPM)
+Vivace : Très vif et énergique (120–140 BPM)
+Presto : Très rapide (140–200 BPM)
+Prestissimo : Extrêmement rapide (>188 BPM)
+
+Liste des termes italiens employés en musique
+glossaire de Wikimedia
+Wikipedia
+Liste des termes italiens employés en musique — Wikipédia
+Si je devais choisir un tempo pour Leptos, ce serait Allegro.
+
+Pourquoi ?
+Leptos est un framework rapide, réactif et énergique par conception. Il compile en WebAssembly pour des performances maximales, met à jour le DOM avec précision, et permet des applications ultra-réactives. Ce dynamisme correspond parfaitement à l’esprit d’Allegro, qui signifie à la fois vitesse et allégresse — reflétant bien l’expérience de développement et d’exécution avec Leptos.
+
+
+
+
+QUESTION
+
+Can you have a look at this website: nationtech.io and propose me an enhanced and complete color scheme for a website?
+
+RÉPONSE
+
+Sur la base de l’analyse du site nationtech.io, qui met en avant une vision harmonieuse, humaine et technologiquement mature du cloud et des micro-datacenters, voici une palette de couleurs complète et renforcée adaptée à son identité :
+
+🎨 Palette proposée
+Rôle	Couleur	Code	Usage
+Primaire	Bleu profond	#1E3A8A	En-têtes, éléments clés (confiance, stabilité)
+Secondaire	Violet sagesse	#6D28D9	Accents, icônes (innovation, vision)
+Énergie	Orange vif	#F97316	Boutons d'action, appels à l'action (enthousiasme, croissance)
+Neutre clair	Gris perle	#F3F4F6	Arrière-plans, cartes
+Neutre foncé	Gris anthracite	#1F2937	Texte, navigation
+Surbrillance	Blanc pur	#FFFFFF	Contenu principal, espaces aérés
+
+🌿 Pourquoi cette palette ?
+Le bleu-violet allie fiabilité (bleu) et innovation (violet), reflétant une technologie robuste et humaine.
+L’orange ajoute une touche d’énergie sans agressivité, symbolisant la croissance organique évoquée sur le site.
+Les tons neutres assurent lisibilité et élégance, favorisant une expérience apaisante et professionnelle.
+🖌️ Application
+Utilisez le bleu pour la barre de navigation et les titres.
+Le violet pour les liens, badges et indicateurs interactifs.
+L’orange uniquement pour les CTA comme “Get Started” ou “Join the Ecosystem”.
+Arrière-plans en gris perle pour aérer le contenu technique.
+
+
+QUESTION
+RÉPONSE
+QUESTION
+RÉPONSE
+QUESTION
+RÉPONSE
+QUESTION
+RÉPONSE
--- a/articles/non-trivial-tuto-leptos/texte-fr.md
+++ b/articles/non-trivial-tuto-leptos/texte-fr.md
@@ -0,0 +1,103 @@
+# On est tellement fan de rust qu'on a même fait notre site web avec!
+
+À NationTech, on est des vrai fan de rust! 
+
+On sait que c'est pas l'avis de tous... même que des fois il 
+
+On reste quand même pragmatique, et c'est pour ça qu'[on y a bien réfléchi avant d'en faire le language principal de Harmony](https://git.nationtech.io/NationTech/harmony/src/branch/master/adr/001-rust.md). Performance, stabilité, sécurité et un language en plein essor qui a fait déjà ses preuves (voir [les bénéfices observés de l'usage de rust dans le kernel linux](https://www.linuxjournal.com/content/how-rusts-debut-linux-kernel-shoring-system-stability) et [l'effet de l'usage de rust à l'interne de google](https://rust.developpez.com/actu/377658/Google-a-adopte-Rust-pour-des-raisons-de-securite-et-a-constate-une-reduction-de-1-000-fois-des-vulnerabilites-liees-a-la-securite-de-la-memoire-compare-a-C-et-Cplusplus/)). 
+
+Alors, pour Harmony, un outil de gestion de Datacenters auto-hébergés, pour nous le choix était évident: Rust! Mais pour notre page web... Rust?
+
+Dans le cas d'un site web, rust c'est un peu un ovni. N'empêche que [leptos](https://github.com/leptos-rs/leptos) semblait très impressionnant. Alors, on l'a essayé et voici le résultat de quelques-unes de nos expériences.
+
+Spoiler, on l'a adopté! Alors, si vous avez des commentaires ou des retours d'expérience, [n'hésitez pas à venir nous les partager sur Discord](https://discord.com/invite/jKprrek8AF).
+
+Pour la section tutoriel (href) n'hésitez pas à consulter aussi le repo git (url)
+
+## La douce mélodie de Leptos
+
+### Un ovni qui rock (émoji d'alien et de musique)
+
+[a recours aux approche les plus innovantes]
+
+full-stack development with server-side rendering (SSR), hydration, and isomorphic server functions, allowing seamless integration of frontend and backend logic in Rust. This simplifies architecture and reduces the need for separate APIs.
+
+CSR (client) vs SSR (server)
+
+
+### Web typé sans les joies (émoji rire) de TypeScript
+
+On se sent bien, on se sent chez soi! 
+
+tuto sur ce qu'est leptos. Pourquoi c'est intéressant et comment ça marche. 
+
+### Performance, promesse de Rust tenue par Leptos
+
+" fine-grained reactivity, enabling high performance by updating only the exact parts of the DOM that change—often outperforming React, Svelte, and Vue in benchmarks. It eliminates the need for a virtual DOM, reducing overhead and improving speed."
+
+### Utilisez vore logique métier
+
+## Leptos en allegro
+
+Maintenant, passons aux choses sérieuses et construisons un blog multilinque qui complémentera notre site web.
+
+Fonctionnalités:
+
+- Définition de la structure des donnée des sections avec les `struct` rust
+- conversion bidirectionnelle entre markdown et le [format fluent](https://projectfluent.org/) (`.ftl`) pour la traduction
+- une architecture ports et adapteurs avec des fonctionnalités de coeurs utilisables par un cli et par le site web
+- sections et pages
+- quelques routes pour la démo
+
+et voilà!
+
+Ce sera vite, ce sera joyeux: allegro!
+
+### Avant toute chose, un peu de boilerplate
+
+
+
+
+```
+# installe rust
+
+# installe lib pour wasm
+rustup target add wasm32-unknown-unknown
+```
+
+rustup, c'est...
+
+cargo, c'est ...
+
+trunk, c'est ...
+
+
+### On définit les structs
+
+
+### On définit les sections
+
+### Le style dès maintenant parce qu'on va pas au bal tout nu
+
+### Voilà notre première page (émoji de note de musique)
+
+### On traduit parce qu'on vise le marché international
+
+### On ajoute un core et un cli juste pour la démo
+
+Pour ceux qui aiment les clis, on ne vous a pas oublié. Ici, on va ajouter un petit outil en support de la traduction. 
+
+### On peut maintenant servir tous nos articles
+
+Génération d'index.
+
+Ajout des routes.
+
+## Conclusion
+
+Deviez-vous changer de framework web pour leptos? Ça c'est vore affaire, on viendra pas vous dire quoi faire.
+
+Mais nous, on s'amuse bien avec leptos. Ça nous rend heureux de pouvoir recycler nos skills et no tricks de rust un peu partout, alors pourquoi pas sur le web?
+
+Venez en discuter sur le discord de NationTech. Et *funky codage*! (emoji de musique)
+