From 940b40688a7cf595eee061b696187e2fe4a578e2 Mon Sep 17 00:00:00 2001 From: Jieiku Date: Mon, 22 May 2023 22:31:34 -0700 Subject: Json-Index and config.toml optional --- sass/include/_nav.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'sass/include/_nav.scss') diff --git a/sass/include/_nav.scss b/sass/include/_nav.scss index 08f1ec1..f3a9b29 100644 --- a/sass/include/_nav.scss +++ b/sass/include/_nav.scss @@ -106,7 +106,7 @@ footer nav { margin: var(--s2) 0 var(--s1); } div { - margin: auto; // keeps top menu/search centered in mobile view + margin: auto // keeps top menu/search centered in mobile view } } } -- cgit v1.3.1 From 2d0788c3981328f1fbd9de4274d2925bf9586e03 Mon Sep 17 00:00:00 2001 From: Jieiku Date: Mon, 22 May 2023 22:39:16 -0700 Subject: Add multi-lingual Support --- config.toml | 173 +++-- content/_index.fr.md | 4 + content/overview-abridge.fr.md | 26 + content/overview-code-blocks.fr.md | 295 ++++++++ content/overview-embedded-vimeo.fr.md | 29 + content/overview-embedded-youtube.fr.md | 28 + content/overview-images/index.fr.md | 107 +++ content/overview-markdown-and-style.fr.md | 286 ++++++++ content/overview-markdown-and-style.md | 2 +- content/overview-math.fr.md | 111 +++ content/overview-rich-content/index.fr.md | 82 +++ content/pages/about.fr.md | 21 + content/pages/contact.fr.md | 7 + content/pages/privacy.fr.md | 15 + content/posts/_index.fr.md | 4 + sass/fonts/_Lato.scss | 17 - sass/include/_nav.scss | 21 + static/font/Lato-Bold.woff2 | Bin 23040 -> 0 bytes static/font/Lato-Italic.woff2 | Bin 24408 -> 0 bytes static/font/Lato.woff2 | Bin 23580 -> 0 bytes static/lunr.da.js | 280 ++++++++ static/lunr.de.js | 380 ++++++++++ static/lunr.du.js | 444 ++++++++++++ static/lunr.es.js | 595 ++++++++++++++++ static/lunr.fi.js | 536 +++++++++++++++ static/lunr.fr.js | 698 +++++++++++++++++++ static/lunr.hu.js | 561 +++++++++++++++ static/lunr.it.js | 612 +++++++++++++++++ static/lunr.jp.js | 118 ++++ static/lunr.no.js | 253 +++++++ static/lunr.pt.js | 566 +++++++++++++++ static/lunr.ro.js | 554 +++++++++++++++ static/lunr.ru.js | 387 +++++++++++ static/lunr.stemmer.support.js | 295 ++++++++ static/lunr.sv.js | 252 +++++++ static/lunr.tr.js | 1070 +++++++++++++++++++++++++++++ static/lunr.zh.js | 156 +++++ static/search.js | 4 +- templates/404.html | 6 +- templates/base.html | 56 +- templates/categories/list.html | 2 +- templates/contact.fr.html | 49 ++ templates/index.html | 6 +- templates/macros/head.html | 17 +- templates/macros/macros.html | 30 +- templates/macros/social.html | 97 ++- templates/page.html | 2 +- templates/posts.html | 6 +- templates/tags/list.html | 2 +- 49 files changed, 9092 insertions(+), 170 deletions(-) create mode 100644 content/_index.fr.md create mode 100644 content/overview-abridge.fr.md create mode 100644 content/overview-code-blocks.fr.md create mode 100644 content/overview-embedded-vimeo.fr.md create mode 100644 content/overview-embedded-youtube.fr.md create mode 100644 content/overview-images/index.fr.md create mode 100644 content/overview-markdown-and-style.fr.md create mode 100644 content/overview-math.fr.md create mode 100644 content/overview-rich-content/index.fr.md create mode 100644 content/pages/about.fr.md create mode 100644 content/pages/contact.fr.md create mode 100644 content/pages/privacy.fr.md create mode 100644 content/posts/_index.fr.md delete mode 100644 sass/fonts/_Lato.scss delete mode 100644 static/font/Lato-Bold.woff2 delete mode 100644 static/font/Lato-Italic.woff2 delete mode 100644 static/font/Lato.woff2 create mode 100644 static/lunr.da.js create mode 100644 static/lunr.de.js create mode 100644 static/lunr.du.js create mode 100644 static/lunr.es.js create mode 100644 static/lunr.fi.js create mode 100644 static/lunr.fr.js create mode 100644 static/lunr.hu.js create mode 100644 static/lunr.it.js create mode 100644 static/lunr.jp.js create mode 100644 static/lunr.no.js create mode 100644 static/lunr.pt.js create mode 100644 static/lunr.ro.js create mode 100644 static/lunr.ru.js create mode 100644 static/lunr.stemmer.support.js create mode 100644 static/lunr.sv.js create mode 100644 static/lunr.tr.js create mode 100644 static/lunr.zh.js create mode 100644 templates/contact.fr.html (limited to 'sass/include/_nav.scss') diff --git a/config.toml b/config.toml index e4cb885..09a7c0d 100644 --- a/config.toml +++ b/config.toml @@ -1,29 +1,63 @@ # do NOT include a trailing slash on the base URL for web urls base_url = "https://abridge.netlify.app" #base_url = "/home/jieiku/.dev/abridge/public/" # Usable site directly from disk, also set in [extra] uglyurls = true -title = "Abridge" -description = "Abridge is a fast and lightweight Zola theme using semantic html, abridge.css class-light CSS, and No Mandatory JS." default_language = "en" compile_sass = true minify_html = false +build_search_index = true + +title = "Abridge" +description = "Abridge is a fast and lightweight Zola theme using semantic html, abridge.css class-light CSS, and No Mandatory JS." generate_feed = true -feed_filename = "atom.xml" -output_dir = "public" -#ignored_content = ["*.{graphml,xlsx}", "temp.*"] -#hard_link_static = false # set to true to hard link instead of copying, useful for very large files. taxonomies = [ {name = "categories", feed = true}, {name = "tags", feed = true}, ] +#feed_filename = "atom.xml" +#output_dir = "public" +#ignored_content = ["*.{graphml,xlsx}", "temp.*"] +#hard_link_static = false # set to true to hard link instead of copying, useful for very large files. + #theme = "abridge" +[languages.fr] +title = "Abridge" +description = "Abridge est un thème Zola rapide et léger utilisant le html sémantique, le CSS abridge.css class-light et aucun JS obligatoire." +generate_feed = true build_search_index = true +taxonomies = [ + {name = "categories", feed = true}, + {name = "tags", feed = true}, +] + +[languages.fr.translations] +flag = "🇫🇷" +date_locale = "fr_FR" +Search = "Recherche" +Recent_Posts = "Articles Récents" +Index = "Indice" +Powered_by = "Propulsé" +and = "et" +About = "À propos" +Posts = "Articles" +Categories = "Catégories" +Tags = "Mots-clés" +Contact = "Contact" +Privacy = "Confidentialité" +Sitemap = "Plan du site" + +#[languages.es.translations] +#flag = "🇪🇸" +#about = "Acerca de" +#posts = "Publicaciones" +#categories = "Categorías" +#tags = "Etiquetas" [search] # Options specific to elasticlunr search. index_format = "elasticlunr_json" include_title = true # include title of page/section in index -include_description = true # include description of page/section in index +include_description = false # include description of page/section in index include_content = true # include rendered content of page/section in index # truncate_content_length = 100 # Truncate at nth character. May be useful if index is getting too large. @@ -40,22 +74,14 @@ smart_punctuation = false # `...` to `…`, `"quote"` to `“curly”` uglyurls = false # if set to true then links are generated with the full path. eg https://abridge.netlify.app/index.html ############################################################################### -### meta/seo/analytic tags -### To disable title_addition but keep built in page additions eg, Posts page: "Posts | Abridge" set title_addition to an empty string -### To always set the page title exactly eg "Abridge" then comment out title_addition or set to false (not recommend, bad for SEO) +### Language +### https://www.w3schools.com/tags/ref_country_codes.asp +### https://tera.netlify.app/docs#date ############################################################################### - -language_code = "en-US" -title_separator = "|" # Separator between title and title_addition, set as |, -, _, etc -title_addition = "Fast & Lightweight Zola Theme" # a default value for title addition -author = "Jake G" # Put Your Name here -keywords = "Abridge, Abridge.css, Zola, Theme, Zola Theme, getzola, Semantic Html, Fast, lightweight" # used for the primary site index -banner = "banner.png" # Used as default image for OpenGraph/Twitter if page specific image is undefined. -twitter = "your-user-name" # for SEO: twitter:site and twitter:creator -google = "Your Google Site verification code." -bing = "Your Bing Site verification code." -seo = true # enable or disable seo-related meta tags: opengraph, facebook, twitter - +date_locale = "en_US" +flag.en = "🇬🇧" +flag.fr = "🇫🇷" +#flag.es = "🇪🇸" ############################################################################### ### Layout & Format @@ -64,6 +90,19 @@ seo = true # enable or disable seo-related meta tags: opengraph, facebook, twit ### divider: " " "·" "•" ############################################################################### +menu = [ + {url = "about", name = "About", slash = true, blank = false}, + {url = "posts", name = "Posts", slash = true, blank = false}, + {url = "categories", name = "Categories", slash = true, blank = false}, + {url = "tags", name = "Tags", slash = true, blank = false}, +] +menu_footer = [ + {url = "about", name = "About", slash = true, blank = false}, + {url = "contact", name = "Contact", slash = true, blank = false}, + {url = "privacy", name = "Privacy", slash = true, blank = false}, + {url = "sitemap.xml", name = "Sitemap", slash = false, blank = true}, +] + recent = true # TOC / index recent_items = 9 @@ -86,18 +125,52 @@ sitedesc = false # enables or disables the display of the site description below headhr = false # show or hide horizontal rule below header foothr = true # show or hide horizontal rule above footer -menu = [ - {url = "/about/", name = "About", slash = true, blank = false}, - {url = "/posts/", name = "Posts", slash = true, blank = false}, - {url = "/categories/", name = "Categories", slash = true, blank = false}, - {url = "/tags/", name = "Tags", slash = true, blank = false}, -] -menu_footer = [ - {url = "/about/", name = "About", slash = true, blank = false}, - {url = "/contact/", name = "Contact", slash = true, blank = false}, - {url = "/privacy/", name = "Privacy", slash = true, blank = false}, - {url = "/sitemap.xml", name = "Sitemap", slash = false, blank = true}, -] + +############################################################################### +### meta/seo/analytic tags +### To disable title_addition but keep built in page additions eg, Posts page: "Posts | Abridge" set title_addition to an empty string +### To always set the page title exactly eg "Abridge" then comment out title_addition or set to false (not recommend, bad for SEO) +############################################################################### + +title_separator = "|" # Separator between title and title_addition, set as |, -, _, etc +title_addition = "Fast & Lightweight Zola Theme" # a default value for title addition +author = "Jake G" # Put Your Name here +keywords = "Abridge, Abridge.css, Zola, Theme, Zola Theme, getzola, Semantic Html, Fast, lightweight" # used for the primary site index +banner = "banner.png" # Used as default image for OpenGraph/Twitter if page specific image is undefined. +twitter_meta = "your-user-name" # for SEO: twitter:site and twitter:creator +google = "Your Google Site verification code." +bing = "Your Bing Site verification code." +seo = true # enable or disable seo-related meta tags: opengraph, facebook, twitter + + +############################################################################### +### Footer social links; these are used in macros/social.html +### https://github.com/Jieiku/abridge/blob/master/templates/macros/social.html +############################################################################### + +feed = true # this adds the RSS feed icon in the footer. +mail_encode = true # This obfuscates your email address, javascript is used to decode it at page load. +mail = "name@example.com" +mastodon = "@your-user-name" +element = "matrix.example.com" +buymeacoffee = "your-user-name" +discord = "your-discord" # Everything after https://discord.com/ eg: invite/my-server *or* servers/my-server-id +twitter = "your-user-name" +facebook = "your-user-name" +linkedin = "your-user-name" +gitlab = "your-user-name" +github = "your-user-name" +codeberg = "your-user-name" # Everything after https://codeberg.org/ eg: username *or* username/repository +github_sponsor = "your-user-name" +bitbucket = "your-user-name" +python = "your-user-name" +docker = "your-user-name" +stack = "your-user-name" +instagram = "your-user-name" +pinterest = "your-user-name" +twitch = "your-user-name" +youtube = "channel/your-channel-id" +researchgate = "your-profile-id" ############################################################################### @@ -173,38 +246,6 @@ favicon16 = "favicon-16x16.png" # favicon-16x16.png #icon_author = "svgs fa-solid fa-pen-fancy" # displayed in metadata on index and below title on page. -############################################################################### -### Footer social links; these are used in macros/social.html -### https://github.com/Jieiku/abridge/blob/master/templates/macros/social.html -############################################################################### - -#[extra.social] -#feed = true # this adds the RSS feed icon in the footer. -#mail_encode = true # This obfuscates your email address, javascript is used to decode it at page load. -#mail = "name@example.com" -#mastodon = "@your-user-name" -#element = "matrix.example.com" -#matrix = "matrix.example.com" -#buymeacoffee = "your-user-name" -#discord = "your-discord" # Everything after https://discord.com/ eg: invite/my-server *or* servers/my-server-id -#twitter = "your-user-name" -#facebook = "your-user-name" -#linkedin = "your-user-name" -#gitlab = "your-user-name" -#github = "your-user-name" -#codeberg = "your-user-name" # Everything after https://codeberg.org/ eg: username *or* username/repository -#github_sponsor = "your-user-name" -#bitbucket = "your-user-name" -#python = "your-user-name" -#docker = "your-user-name" -#stack = "your-user-name" -#instagram = "your-user-name" -#pinterest = "your-user-name" -#twitch = "your-user-name" -#youtube = "channel/your-channel-id" -#researchgate = "your-profile-id" - - ############################################################################### ### Security Settings ### Security Headers should preferably be set by your webserver (Nginx, Apache) diff --git a/content/_index.fr.md b/content/_index.fr.md new file mode 100644 index 0000000..3511f76 --- /dev/null +++ b/content/_index.fr.md @@ -0,0 +1,4 @@ ++++ +paginate_by = 3 +sort_by = "date" ++++ diff --git a/content/overview-abridge.fr.md b/content/overview-abridge.fr.md new file mode 100644 index 0000000..d38ced9 --- /dev/null +++ b/content/overview-abridge.fr.md @@ -0,0 +1,26 @@ ++++ +title = "Abridge Zola Thème" +date = 2022-05-17 +draft = false + +[taxonomies] +categories = ["Features"] +tags = ["config"] ++++ + +Abridge est un thème Zola rapide et léger utilisant du HTML sémantique, seulement ~6kb css avant les icônes svg et la coloration syntaxique, pas de JS obligatoire, et des scores parfaits [Lighthouse](https://pagespeed.web.dev/report?url=abridge.netlify.app), [YellowLabTools](https://yellowlab.tools/), et [Observatory](https://observatory.mozilla.org/analyze/abridge.netlify.app) scores. Voici une page [de références des thèmes Zola](https://github.com/Jieiku/zola-themes-benchmarks/blob/main/README.md). + +Pour une configuration rapide, copiez le fichier config.toml du thème abrégé à la racine de votre site zola, cela vous donnera une configuration de base avec toutes les valeurs de configuration utilisées. + +Vous pouvez ensuite modifier ou commenter les valeurs de ce fichier si nécessaire. + +Vous devez également décommenter la ligne #theme = "abridge" dans votre fichier racine zola config.toml. Cela indique à votre site racine zola d'utiliser le thème abrégé dans le dossier des thèmes. + +Vous pouvez définir le nombre d'éléments qui apparaissent sur la page d'accueil en modifiant `themes\abridge\content\_index.md` le fichier et en ajustant `paginate_by = 5` + +Vous pouvez définir la largeur globale de la page en éditant `themes\abridge\sass\_variables.scss` le fichier et en ajustant ces deux lignes: + +```scss +$mw:50% !default;// largeur maximale +$mb:1200px !default;// valeur à laquelle passer de la disposition fluide à l'utilisation de la largeur maximale +``` diff --git a/content/overview-code-blocks.fr.md b/content/overview-code-blocks.fr.md new file mode 100644 index 0000000..e527251 --- /dev/null +++ b/content/overview-code-blocks.fr.md @@ -0,0 +1,295 @@ ++++ +title = "Blocs de code et thèmes" +description = "Exemple d'article présentant la coloration syntaxique et la mise en forme des blocs de code avec un thème personnalisé." +date = 2022-05-16 +draft = false + +[taxonomies] +categories = ["Features"] +tags = ["Markdown"] +[extra] +toc = true +keywords = "Code, Code Blocks, Syntax, Syntax Highlighting, Theme" ++++ + +Cet article présente différents Code Blocks permettant de comparer facilement des thèmes sublimes. + +## Blocs de codes + +Blocs de code.. ❤️ avec coloration syntaxique automatique ✨‍ + +Voir [les docs](https://www.getzola.org/documentation/content/syntax-highlighting/) pour les options. + +### Bloc de code en ligne + +Si nous voulons, nous pouvons aussi `spécifier le code en ligne` ce qui est utile pour `les petites choses`. + +### rust +```rust,linenos,hl_lines=3 +//! jelly-actix-web-starter - Un modèle de démarrage pour les projets actix-web qui ressemble beaucoup à Django. Évitez les trucs ennuyeux et avancez plus vite. + +use jelly::actix_web; +use mainlib; +use std::io; + +#[actix_web::main] +async fn main() -> io::Result<()> { + mainlib::main().await +} + +let context = Context::new(); +``` + +### TOML +```toml,linenos,hl_lines=3 +base_url = "https://abridge.netlify.app/" +title = "Abridge" +description = "Abridge est un thème Zola rapide et léger utilisant le HTML sémantique, le CSS abridge.css class-light et aucun JS obligatoire." +default_language = "en" +#theme = "abridge" + +build_search_index = true +minify_html = false +feed_filename = "atom.xml" +taxonomies = [ + {name = "categories", feed = true}, + {name = "tags", feed = true}, +] +``` + +### html +```html + + + + + Example HTML5 Document + + + +

Test

+ + +``` + +### javascript +```javascript +function closeSearch() {//close the search displaying the regular page. + const e = document.querySelector("main"); + e.innerHTML = window.main +} + +function goSearch() {// on enter key or search icon click display results to the page. + const e = document.querySelector("main"); + window.main || (window.main = e.innerHTML); + var t = document.getElementById("suggestions"), + n = ((ResultsClone = t.cloneNode(!0)).id = "results", document.createElement("div")), + o = '

Results For: '.concat(document.getElementById("searchinput").value, "

"); + return n.innerHTML = o, ResultsClone.insertBefore(n, ResultsClone.firstChild), e.innerHTML = ResultsClone.outerHTML, t.innerHTML = "", document.getElementById("searchinput").value = "", !1 +}! function() { + // search function code goes here +} +``` + +### php +```php +getAll(); + +if ($_SERVER['REQUEST_METHOD'] == "POST") { + if (!isset($_SESSION['PFA_token'])) { + die("Invalid token (session timeout; refresh the page and try again?)"); + } + $fUsername = trim(safepost('fUsername')); + if ($lang != check_language(false)) { # only set cookie if language selection was changed + setcookie('lang', $lang, time() + 60*60*24*30); # language cookie, lifetime 30 days + } +} + +$_SESSION['PFA_token'] = md5(uniqid("pfa" . rand(), true)); + +/* vim: set expandtab softtabstop=4 tabstop=4 shiftwidth=4: */ +``` + + +### json +```json +{ + "name": "Abridge Zola Theme", + "short_name": "Abridge", + "description": "Fast & Lightweight Zola Theme", + "start_url": "/index.html", + "scope": "/", + "background_color": "#111111", + "theme_color": "#222222", + "display": "standalone", + "icons": [ + { + "src": "/android-chrome-192x192.png", + "sizes": "192x192", + "type": "image/png" + }, + { + "src": "/android-chrome-512x512.png", + "sizes": "512x512", + "type": "image/png" + }, + { + "src": "/android-chrome-192x192m.png", + "sizes": "192x192", + "type": "image/png", + "purpose": "maskable" + } + ] +} +``` + +### SQL +```sql +-- jelly-actix-web-starter - Creates an accounts table, along with some associated helpers. + +create or replace function update_timestamp() returns trigger as $$ +begin + new.updated = now(); + return new; +end; +$$ language 'plpgsql'; + +create table if not exists accounts ( + id serial primary key, + name text not null, + email text not null unique, + password text not null, + profile jsonb not null default '{}', + plan integer not null default 0, + is_active boolean not null default true, + is_admin boolean not null default false, + has_verified_email boolean not null default false, + last_login timestamp with time zone, + created timestamp with time zone not null default now(), + updated timestamp with time zone not null default now() +); + +create unique index accounts_unique_lower_email_idx on accounts (lower(email)); + +create trigger user_updated before insert or update on accounts +for each row execute procedure update_timestamp(); +``` + +### Lua +```lua +function square(x) + return x * x +end + +print(square(2)) -- prints '4' + +function getPlayerInformation() + playerName = UnitName("player") + playerLevel = UnitLevel("player") + specId, specName = GetSpecializationInfo(GetSpecialization()) + + return "Hey, I'm " .. playerName .. " (Level " .. playerLevel .. "). I'm currently in spec " .. specName .. "." +end + +print(getPlayerInformation()) +``` + +### C +```c +#include +int main() { + int a; + /* actual initialization */ + a = 10; + printf("Hello, World!"); + return 0; +} +``` + +### C++ +```cpp +// Your First C++ Program + +#include + +int main() { + int a; + /* actual initialization */ + a = 10; + std::cout << "Hello World!"; + return 0; +} +``` + +### Go +```go +package main + +import "fmt" + +func main() { + var myvariable1 = 20 + var myvariable2 = "hello world" + fmt.Println("hello world") +} +``` + +### Python +```python +#!/usr/bin/env python3 +import smtplib, socket +from influxdb import InfluxDBClient + +while True: + send = 1 + later = time.time() + 25200 + iso = time.ctime(later) + tempF = round(bme280.temperature * 1.8 + 29, 3) #C to F formula is +32, difference is to correct bme280 temperature offset + humidity = round(bme280.humidity, 3) + pressure = round(bme280.pressure, 3) + # serialize data as JSON + data = [ + { + "measurement": measurement, + "tags": { + "location": location, + }, + "time": iso, + "fields": { + "temperature" : tempF, + "humidity": humidity, + "pressure": pressure + } + } + ] + # Send the JSON data to InfluxDB + try: + client.write_points(data) + except socket.error as e: + print("Could Not Connect to InfluxDB!") + if tempF > 90 and humidity > 55: + emailSubject = "Humidity>55: " + str(int(humidity)) + "%H , Temperature>90: " + str(int(tempF)) + "F" + emailContent = 'Humidity: ' + str(int(humidity)) + '%H , Temperature: ' + str(int(tempF)) + 'F Dashboard' + elif humidity > 55: + emailSubject = "Humidity>55: " + str(int(humidity)) + "%H" + emailContent = 'Humidity: ' + str(int(humidity)) + '%H , Temperature: ' + str(int(tempF)) + 'F Dashboard' + elif tempF > 90: + emailSubject = "Temperature>90: " + str(int(tempF)) + "F" + emailContent = 'Humidity: ' + str(int(humidity)) + '%H , Temperature: ' + str(int(tempF)) + 'F Dashboard' + else: + send = 0 + if send == 1: + try: + if time.time() > lastEmailTime or abs(lastTemp-int(tempF)) > 1: + lastEmailTime = time.time()+emailInterval + lastTemp = int(tempF) + sender.sendmail('jake@example.com', emailSubject, emailContent) + except socket.error as e: + print("Could Not Connect to SMTP server!") + time.sleep(interval) +``` diff --git a/content/overview-embedded-vimeo.fr.md b/content/overview-embedded-vimeo.fr.md new file mode 100644 index 0000000..ef29b86 --- /dev/null +++ b/content/overview-embedded-vimeo.fr.md @@ -0,0 +1,29 @@ ++++ +title = "Vidéos Vimeo intégrées" +description = "Exemple d'article présentant un code abrégé Zola personnalisé pour intégrer des vidéos Vimeo dans vos pages." +date = 2021-05-07 +draft = false + +[taxonomies] +categories = ["Features"] +tags = ["shortcodes","video"] +[extra] +keywords = "Video, Shortcodes, Embed, Embedded, Vimeo" ++++ + +Zola a de nombreux shortcodes, et de nouveaux sont facilement ajoutés, cet exemple montre vimeo. + + +## Vimeo + +with `vm(id="id_here")` + +- `id`: l'identifiant de la vidéo (obligatoire) +- `class`: une classe à ajouter au <div> entourant l'iframe (optionnel) +- `autoplay`: lorsqu'il est défini sur "true", la vidéo se lance automatiquement au chargement (facultatif) +- `loop`: lorsqu'il est défini sur "true", la vidéo est lue en boucle (optionnel) +- `noautopause`: lorsqu'il est défini sur "true", la vidéo ne s'arrêtera pas automatiquement (optionnel) +- `title` - définir le titre alt pour l'iframe (facultatif, par défaut sur "Vimeo") +- `cookie` - défini sur "true" si vous voulez des cookies de suivi, sinon il est par défaut sur false. + +{{ vm(id="514402648") }} diff --git a/content/overview-embedded-youtube.fr.md b/content/overview-embedded-youtube.fr.md new file mode 100644 index 0000000..b1c8cab --- /dev/null +++ b/content/overview-embedded-youtube.fr.md @@ -0,0 +1,28 @@ ++++ +title = "Vidéos Youtube intégrées" +description = "Exemple d'article présentant un code court Zola personnalisé pour intégrer des vidéos Youtube dans vos pages." +date = 2021-05-08 +draft = false + +[taxonomies] +categories = ["Features"] +tags = ["shortcodes","video"] +[extra] +keywords = "Video, Shortcodes, Embed, Embedded, Youtube" ++++ + +Zola a de nombreux shortcodes, et de nouveaux sont facilement ajoutés, cet exemple montre youtube. + + +## Youtube + +avec `yt(id="the_id_here")` + +- `id`: l'identifiant de la vidéo (obligatoire) +- `playlist`: l'identifiant de la playlist (optionnel) +- `class`: une classe à ajouter au <div> entourant l'iframe (optionnel) +- `autoplay`: lorsqu'il est défini sur "true", la vidéo se lance automatiquement au chargement (facultatif) +- `title` - définir le titre alt pour l'iframe (facultatif, par défaut sur "Youtube") +- `cookie` - défini sur "true" si vous voulez des cookies de suivi, sinon il est par défaut sur false. + +{{ yt(id="32gyFIWecuw") }} diff --git a/content/overview-images/index.fr.md b/content/overview-images/index.fr.md new file mode 100644 index 0000000..130b061 --- /dev/null +++ b/content/overview-images/index.fr.md @@ -0,0 +1,107 @@ ++++ +title = "Codes courts d'image" +description = "Les images peuvent être intégrées directement à l'aide de markdown `![Ferris](ferris.svg)`, mais l'utilisation d'un shortcode empêche CLS en définissant explicitement la largeur et la hauteur." +date = 2021-05-19 +draft = false + +[taxonomies] +categories = ["Features"] +tags = ["shortcodes","images"] +[extra] +toc = true +keywords = "Image, Markdown, Shortcodes, Hover" +thumbnail = "ferris-gesture.png" ++++ + +Cet article couvre les **shortcodes imghover et img**. Les images peuvent également être intégrées directement à l'aide de markdown `![Ferris](ferris.svg)`, mais il est préférable d'utiliser un shortcode afin de pouvoir définir explicitement la largeur et la hauteur, cela aidera à empêcher le changement de mise en page du contenu, ce qui améliore l'expérience utilisateur et le score Google Lighthouse. + + +# img Shortcode + +- src est le chemin et le nom de fichier de l'image. (obligatoire) +- class définit une classe pour l'image. (facultatif) +- alt définit la note alt pour l'image. (recommandé pour google phare) +- w est la largeur de l'image. (recommandé pour google phare) +- h est la hauteur de l'image. (recommandé pour google phare) + +## Utilisation (même chemin) +```rs +{{/* img(src="ferris-happy.svg" alt="Ferris est heureux" w=600 h=400) */}} +``` +**Sortir** +```html +{{ img(src="ferris-happy.svg" alt="Ferris est heureux" w=600 h=400) }} +``` +{{ img(src="ferris-happy.svg" alt="Ferris est heureux" w=600 h=400) }} + +## Utilisation (chemin relatif ./) +```rs +{{/* img(src="./img/ferris-gesture.svg" alt="Ferris dit bonjour" w=600 h=400) */}} +``` +**Sortir** +```html +{{ img(src="./img/ferris-gesture.svg" alt="Ferris dit bonjour" w=600 h=400) }} +``` +{{ img(src="./img/ferris-gesture.svg" alt="Ferris dit bonjour" w=600 h=400) }} + +## Utilisation (chemin racine /) +```rs +{{/* img(src="/overview-rich-content/ferris.svg" alt="Ferris le Rustacé" w=600 h=400) */}} +``` +**Sortir** +```html +{{ img(src="/overview-rich-content/ferris.svg" alt="Ferris le Rustacé" w=600 h=400) }} +``` +{{ img(src="/overview-rich-content/ferris.svg" alt="Ferris le Rustacé" w=600 h=400) }} + +# Image SVG directement dans le code : +```html + +``` + + + +# imghover Shortcode + +La première image du tableau src est celle comparée à toutes les autres. + +Lorsque vous passez votre souris sur une image, celle-ci affiche l'image à comparer. + +Cela peut être utilisé pour comparer une seule image avec une autre en passant seulement deux src dans le tableau. + +- src est un tableau de chemins et de noms de fichiers pour les images. (obligatoire) +- w est la largeur de l'image. +- h est la hauteur de l'image. +- p est la taille en pourcentage que vous souhaitez que l'image utilise sur la page. (50 est la valeur par défaut) + +*w et h ne sont utilisés que pour calculer le rapport d'aspect, la taille globale est définie par p* + +## Utilisation (même chemin) +```rs +{{/* imghover(src=["ferris.svg", "ferris-gesture.svg", "ferris-happy.svg"] w=600 h=400 p=45) */}} +``` +**Sortir** +```html +{{ imghover(src=["ferris.svg", "ferris-gesture.svg", "ferris-happy.svg"] w=600 h=400 p=45) }} +``` +{{ imghover(src=["ferris.svg", "ferris-gesture.svg", "ferris-happy.svg"] w=600 h=400 p=45) }} + +## Utilisation (chemin relatif ./) +```rs +{{/* imghover(src=["./img/ferris.svg", "./img/ferris-gesture.svg"] w=600 h=400 p=45) */}} +``` +**Sortir** +```html +{{ imghover(src=["./img/ferris.svg", "./img/ferris-gesture.svg"] w=600 h=400 p=45) }} +``` +{{ imghover(src=["./img/ferris.svg", "./img/ferris-gesture.svg"] w=600 h=400 p=45) }} + +## Utilisation (chemin racine /) +```rs +{{/* imghover(src=["/overview-rich-content/ferris.svg", "/overview-rich-content/ferris-gesture.svg"] w=600 h=400 p=45) */}} +``` +**Sortir** +```html +{{ imghover(src=["/overview-rich-content/ferris.svg", "/overview-rich-content/ferris-gesture.svg"] w=600 h=400 p=45) }} +``` +{{ imghover(src=["/overview-rich-content/ferris.svg", "/overview-rich-content/ferris-gesture.svg"] w=600 h=400 p=45) }} diff --git a/content/overview-markdown-and-style.fr.md b/content/overview-markdown-and-style.fr.md new file mode 100644 index 0000000..827c2e6 --- /dev/null +++ b/content/overview-markdown-and-style.fr.md @@ -0,0 +1,286 @@ ++++ +title = "Markdown et Style" +description = "Exemple d'article présentant la syntaxe et le formatage de base de Markdown pour les éléments HTML." +date = 2022-05-15 +draft = false + +[taxonomies] +categories = ["Features"] +tags = ["Markdown"] +[extra] +toc = true +keywords = "Markdown, Style, Syntax, Syntax Highlighting" ++++ + +Cet article propose un exemple de syntaxe Markdown de base pouvant être utilisée dans les fichiers de contenu Zola. Il indique également si les éléments HTML de base sont décorés avec CSS dans un thème Zola. + +# Rubriques + +Les éléments HTML `

`—`

` suivants représentent six niveaux d'en-têtes de section. +`

` est le niveau de section le plus élevé alors qu'il `

` est le plus bas. + +# H1 +## H2 +### H3 +#### H4 +##### H5 +###### H6 + +# Paragraphe + +Xerum, quo qui aut unt expliquéam qui dolut labo. Aque venitatiusda cum, voluptionse latur sitiae dolessi aut parist aut dollo enim qui voluptate ma dolestendit peritin re plis aut quas inctum laceat est volestemque commosa as cus endigna tectur, offic to cor sequas etum rerum idem sintibus eiur ? Quianimin porecus evelectrur, cum que nis nust voloribus ratem aut omnimi, sitatur ? Quiatem. Nam, omnis sum am facea corem alique molestrunt et eos evelece arcillit ut aut eos eos nus, sin conecerem erum fuga. Ri oditatquam, ad quibus unda veliamenimin cusam et facea ipsamus es exerum sitate dolores editium rerore eost, temped molorro ratiae volorro te reribus dolorer sperchicium faceata tiustia prat. + +Itatur ? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sapicia est sinveli squiatum, core et que aut hariosam ex eat. + +# Citations en bloc + +L'élément blockquote représente le contenu qui est cité à partir d'une autre source, éventuellement avec une citation qui doit être dans un élément `footer` ou `cite` et éventuellement avec des modifications en ligne telles que des annotations et des abréviations. + +## Blockquote sans attribution + +> Tiam, ad mint andaepu dandae nostion secatur sequo quae. +> **Notez** que vous pouvez utiliser *la syntaxe Markdown* dans un blockquote. + +## Blockquote avec attribution + +> Ne communiquez pas en partageant la mémoire, partagez la mémoire en communiquant.
+> — Rob Pike[^1] + +> Tous les hommes, par nature, désirent savoir.
+> ― Aristotle[^2] + +> Le pouvoir vient en réponse à un besoin, pas à un désir.
+> — *Goku* + +# Les Tables + +Les tables ne font pas partie de la spécification principale de Markdown, mais Zola les prend en charge prêtes à l'emploi. + + Nom | Âge +--------|------ + Alice | 23 + Bob | 27 + Cody | 33 + John | 59 + Kerry | 23 + +## Tableau avec Markdown en ligne + +| Italique | Gras | Code | Barré | +| -------- | -------- | ------ | ----------------- | +| *italique* | **gras** | `code` | ~~barré~~ | + + +## Grand tableau dans l'étiquette de la figure + +Entourez les très grandes tables `
` pour qu'elles puissent défiler horizontalement. +
+ +| **Fabricant** | Volkswagen | Toyota | Ford | Honda | Chevrolet | BMW | Hyundai | Audi | Nissan | Kia | Mercedes | Tesla | Mitsubishi | Suzuki | Volvo | Subaru | Mazda | Jaguar | Buick | Lexus | GMC | Porsche | Cadillac | +| ---------- | ---- | ---- | ---- | ---- | ---- | ---- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | +| **Revenu $B** | $254 | $249 | $127 | $124 | $123 | $113 | $88 | $83 | $74 | $61 | $55 | $54 | $38 | $31 | $30 | $28 | $27 | $22 | $21 | $19 | $17 | $16 | $12 | + +
+*valeurs de revenus trouvées sur le moteur de recherche et non vérifiées, uniquement à des fins de démonstration du tableau de défilement des figures.* + +# Texte pliable + +
+ Titre 1 +

C'EST UN SECRET POUR TOUT LE MONDE.

+
+ +
+ Titre 2 +

Reste un moment et écoute!

+
+ +# Blocs de codes + +Blocs de code.. ❤️ avec coloration syntaxique automatique ✨‍ + +Voir [les docs](https://www.getzola.org/documentation/content/syntax-highlighting/) pour les options. + +## Bloc de code avec backticks + +```html + + + + + Example HTML5 Document + + +

Test

+ + +``` + +## Numéros de ligne, mise en surbrillance + +```html,linenos,hl_lines=5 7-9 + + + + + Example HTML5 Document + + +

Test

+ + +``` + +## Bloc de code en ligne + +Si nous voulons, nous pouvons aussi `spécifier le code en ligne` ce qui est utile pour `les petites choses`. + +# Types de liste + +## Liste ordonnée + +1. Premier élément +2. Deuxième élément +3. Troisième élément + +## Liste non ordonnée + +- Élément de liste +- Un autre article +- Et un autre article + +## Liste imbriquée + +- Fruit + - Pomme + - Orange + - Banane +- Laitier + - Lait + - Fromage + +# Autres éléments — abbr, sub, sup, kbd, mark, link + +GIF est un format d'image bitmap. + +H2O + +Xn + Yn = Zn + +Appuyez sur pour terminer la session. CTRL+ALT+Delete + +La plupart salamanders sont nocturnes et chassent les insectes, les vers et autres petites créatures. + +--- + +[^1]: La citation ci-dessus est extraite du [discours](https://www.youtube.com/watch?v=PAAkCSZUG1c) +de Rob Pike lors du Gopherfest, le 18 novembre 2015. + +[^2]: La citation est la première phrase de [la Métaphysique](https://en.wikipedia.org/wiki/Metaphysics_(Aristotle)) d'Aristotle. + +## Navs + +Le menu principal du site est créé en imbriquant la navigation sous une balise d'en-tête. Reportez-vous au haut de ce site pour un exemple. + +Si la balise de navigation se trouve sous la balise principale au lieu de la balise d'en-tête, les liens auront une bordure : + +
+ +
+ +## Formes + +
+

+ +

+

+ +

+

+ +

+
+

+
+ + + + +
+ Taille + + + + +
+ +
+ + +
+ +
+ + +
+
+ + + + + + + + + + + + +
diff --git a/content/overview-markdown-and-style.md b/content/overview-markdown-and-style.md index befe1ed..78177db 100644 --- a/content/overview-markdown-and-style.md +++ b/content/overview-markdown-and-style.md @@ -1,5 +1,5 @@ +++ -title = "Markdown and Style Guide" +title = "Markdown and Style" description = "Sample article showcasing basic Markdown syntax and formatting for HTML elements." date = 2022-05-15 draft = false diff --git a/content/overview-math.fr.md b/content/overview-math.fr.md new file mode 100644 index 0000000..ed0720a --- /dev/null +++ b/content/overview-math.fr.md @@ -0,0 +1,111 @@ ++++ +title = "Notations mathématiques" +description = "Exemple d'article présentant l'affichage des notations mathématiques, rendu possible par la bibliothèque KaTeX." +date = 2021-05-05 +updated = 2022-01-01 +draft = false + +[taxonomies] +categories = ["Features"] +tags = ["shortcodes","Mathematics"] +[extra] +math = true +math_auto_render = true +keywords = "Math, Matematics, Notation, KaTeX, Mathematical Notation" ++++ + +Vous pouvez utiliser [KaTeX](https://katex.org) pour rendre des notations mathématiques. + +Vous pouvez activer le $\KaTeX$ prise en charge globale, par section ou par page. + + +## Activer globalement + +Pour activer le $\KaTeX$ prise en charge dans le monde entier, ajoutez `math = true` sous `[extra]` à la `config.toml` +racine de votre site. Maintenant, le shortcode katex sera rendu, vous pouvez également ajouter `math_auto_render = true` +et chaque section et page de votre site chargera l' [extension KaTeX autorender](https://katex.org/docs/autorender.html). + +```toml +[extra] +math = true +math_auto_render = false +``` + +## Base par section + +Pour activer le $\KaTeX$ support dans une section particulière, ajoutez `math = true` sous `[extra]` dans le fichier `[SECTION_NAME]/_index.md`. +Maintenant, le shortcode katex sera rendu, vous pouvez également ajouter `math_auto_render = true` +et la section de votre site chargera l' [extension KaTeX autorender](https://katex.org/docs/autorender.html). + +```toml ++++ +[extra] +math = true ++++ +``` + +## Base par page + +Pour activer le $\KaTeX$ support dans une page particulière, ajouter `math = true` sous `[extra]` dans le frontmatter de la page. +Maintenant, le shortcode katex sera rendu, vous pouvez également ajouter `math_auto_render = true` +et la page de votre site chargera l' [extension KaTeX autorender](https://katex.org/docs/autorender.html). + +```toml ++++ +[extra] +math = true +math_auto_render = true ++++ +``` + +C'est une bonne pratique de permettre $\KaTeX$ prise en charge par page, car cela ne chargera que les fichiers requis sur cette page particulière, sans affecter la vitesse de chargement des autres pages. Si votre site n'est pas lourd en mathématiques, veuillez ne PAS activer cette fonctionnalité globalement ou par section. + +## Usage + +Enveloppez tout [valide](https://katex.org/docs/supported.html) $\KaTeX$ syntaxe avec `$...$` pour les mathématiques en ligne et `$$...$$` pour les mathématiques par blocs. + +### Mathématiques en ligne + +C'est la plus belle équation que j'aie jamais vue : + +### Usage +```rs +{%/* katex(block=false) */%} e^{i\pi}+1=0 {%/* end */%} +``` +### Sortir +```html +{% katex(block=false) %} e^{i\pi}+1=0 {% end %} +``` +{% katex(block=false) %} e^{i\pi}+1=0 {% end %} + +### Bloc Mathématiques + +Quelques Mathématiques en mode affichage sont assez justes : + +### Usage +```rs +{%/* katex(block=true) */%} \int_0^1 x^2 dx {%/* end */%} +``` +### Sortir +```html +{% katex(block=true) %} \int_0^1 x^2 dx {% end %} +``` +{% katex(block=true) %} \int_0^1 x^2 dx {% end %} + +### Exemple de rendu automatique en ligne +``` +$ e^{i\pi}+1=0 $ +``` + +$ e^{i\pi}+1=0 $ + +### Exemple de bloc de rendu automatique +``` +$$ +f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi +$$ +``` + +$$ +f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi +$$ diff --git a/content/overview-rich-content/index.fr.md b/content/overview-rich-content/index.fr.md new file mode 100644 index 0000000..43425fa --- /dev/null +++ b/content/overview-rich-content/index.fr.md @@ -0,0 +1,82 @@ ++++ +title = "Contenu riche" +description = "Une brève description des Shortcodes personnalisés pour Zola qui implémentent des éléments html modernes : vidéo, image, gif, audio." +date = 2021-05-18 +draft = false + +[taxonomies] +categories = ["Features"] +tags = ["video", "audio", "images", "shortcodes"] +[extra] +toc = true +keywords = "Images, Videos, Audio, Gif, Rich Content, Shortcodes" ++++ + +Plusieurs codes abrégés personnalisés sont inclus pour augmenter CommonMark (avec l'aimable autorisation du [theme d3c3nt](https://d3c3nt.figbert.com/posts/rich-content/)), en plus de ceux [déjà fournis par Zola][built-in]. `video`, `image`, `gif`, et `audio` ont été créés pour vous aider à tirer parti des éléments HTML modernes dans votre écriture. + + + +## Vidéo + +Le `video` shortcode prend un `sources` paramètre (un tableau de chaînes) et renvoie une `