From 28d95cb568a1b8c2d184a8457d4b8d37fd2f2a14 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9my=20Viau-Trudel?= Date: Fri, 21 Nov 2025 22:46:15 -0500 Subject: [PATCH] tuto-leptos. premier jet --- .../search-and-notes.md | 304 ++++++++++++++++++ articles/non-trivial-tuto-leptos/texte-fr.md | 103 ++++++ 2 files changed, 407 insertions(+) create mode 100644 articles/non-trivial-tuto-leptos/search-and-notes.md create mode 100644 articles/non-trivial-tuto-leptos/texte-fr.md diff --git a/articles/non-trivial-tuto-leptos/search-and-notes.md b/articles/non-trivial-tuto-leptos/search-and-notes.md new file mode 100644 index 0000000..dda5caf --- /dev/null +++ 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 (Ctrl+V), then: +For emojis with 4-digit hex codes: u + 4-digit code (e.g., u2615 → ☕). +For emojis with longer codes: U + 8-digit code (e.g., 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 " sm → 😀 + +In insert mode, press 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 = { + { "e", "Emoji", 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 = { { "e", "Smoji", 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 diff --git a/articles/non-trivial-tuto-leptos/texte-fr.md b/articles/non-trivial-tuto-leptos/texte-fr.md new file mode 100644 index 0000000..d37cc7a --- /dev/null +++ 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) +