guillem/newblog
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Bring all from the abridged repo

Browse source
This commit is contained in:
Guillem Borrell 2024-07-01 13:20:09 +00:00
parent a7397854ea
commit b533295562
230 changed files with 18052 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
COPY-TO-ROOT-SASS/_extra.scss Normal file
View file

@ -0,0 +1,3 @@
/******************************************************************************
* Extra - Put your extra SASS/CSS here, it will get bundled with abridge.css
*****************************************************************************/

206
COPY-TO-ROOT-SASS/abridge.scss Normal file
View file

@ -0,0 +1,206 @@
@use '../themes/abridge/sass/abridge' with (
/// LINES HERE END WITH COMMA AFTER THE VALUE!
/// The things your less likely to need to override have been commented out.
/// Enable a centered viewport for <header>, <main>, <footer> inside <body>
/// Fluid layout until a defined size, then becomes centered viewport.
//$enable-maxwidth: true,
$mw: 70%,// max-width
//$mb: 1200px,// value at which to switch from fluid layout to max-width
$abridgeMode: "switcher",//valid values: switcher, auto, dark, light
$syntax-mode: "auto",// Force syntax mode: auto, dark, light
$switcherDefault: "dark",// default nojs switcher mode: dark, light (make sure to also set js_switcher_default in config.toml)
$color: "orange",// color template to use/override: orange, blue, blueshade
$color-syntax: "abridge",// syntax color template to use/override: abridge,
$syntax: true,//syntax highlighting for Code Blocks.
$enable-icons: true,// false disables ALL icons
$ic: true,// true for colorized icons, otherwise #888 is used.
$icon-rss: true,
$icon-mail: false,// e-mail
$icon-mastodon: false,
$icon-element: false,
$icon-matrix: false,
$icon-buymeacoffee: false,
$icon-kofi: false,
$icon-twitter: false,
$icon-facebook: false,
$icon-linkedin: false,
$icon-codeberg: false,
$icon-gitlab: false,
$icon-github: false,
$icon-github-sponsor: false,
$icon-bitbucket: false,
$icon-python: false,
$icon-docker: false,
$icon-stack: false,
$icon-instagram: false,
$icon-pixelfed: false,
$icon-pinterest: false,
$icon-discord: false,
$icon-twitch: false,
$icon-youtube: false,
$icon-peertube: false,
$icon-researchgate: false,
//$icon-x: true,// x symbol, used to close search results page.
//$icon-search: true,//search, spyglass search button in search box.
//$icon-adjust: true,//theme switcher dark/light toggle button.
//$icon-angll: true,//pagination, goto first page
//$icon-angl: true,//pagination, goto previous page
//$icon-angr: true,//pagination, goto next page
//$icon-angrr: true,//pagination, goto last page
//$icon-angu: true,//back to top button, appears after scrolling down.
//$icon-world: true,//language select menu
//$icon-copy: true,//copy to clipboard, for code blocks.
//$icon-ffolder: false,
//$icon-folder: false,// categories folder
//$icon-ftag: false,
//$icon-tag: false,// tag
//$icon-check: false,// check mark
//$icon-chevron: false,// chevron down
//$icon-clock: false,// time analog clock
//$icon-date: false,// calendar
//$icon-globe: false,
//$icon-home: false,
//$icon-minus: false,// minus symbol
//$icon-moon: false,// dark moon
//$icon-sun: false,// light sun
/// The colors below can be overrided individually as needed.
/// Dark Colors
//$f1d: #ccc,// Font Color Primary
//$f2d: #ddd,// Font Color Headers
//$c1d: #111,// Background Color Primary
//$c2d: #222,// Background Color Secondary
//$c3d: #333,// Table Rows, Block quote edge, Borders
//$c4d: #777,// Disabled Buttons, Borders, mark background
//$a1d: #f90,// link color
//$a2d: #fb0,// link hover/focus color
//$a3d: #f90,// link h1-h2 hover/focus color
//$a4d: #f90,// link visited color
//$cgd: #593,// ins green, success
//$crd: #e33,// del red, errors
/// Light Colors
//$f1: #333,// Font Color Primary
//$f2: #222,// Font Color Headers
//$c1: #fff,// Background Color Primary
//$c2: #eee,// Background Color Secondary
//$c3: #ddd,// Table Rows, Block quote edge, Borders
//$c4: #555,// Disabled Buttons, Borders, mark background
//$a1: #c40,// link color
//$a2: #e60,// link hover/focus color
//$a3: #f90,// link h1-h2 hover/focus color
//$a4: #c40,// link visited color
//$cg: #373,// ins green, success
//$cr: #d33,// del red, errors
/// Dark Syntax Colors
//$h0d: #191919,// background color
//$h1d: #ddd,// unstyled text
//$h2d: #888,// comments
//$h3d: #e65,// red, support function
//$h4d: #e83,// orange, punctuation, constant, variable, json-key
//$h5d: #eb6,// tan, entity/function name
//$h6d: #ac3,// green, string
//$h7d: #8db,// teal, escape character
//$h8d: #6ae,// blue, declaration, tag, property
//$h9d: #d6e,// purple, operators
//$had: 160%,// mark/highlight line
/// Light Syntax Colors
//$h0: #f7f7f7,// background color
//$h1: #222,// unstyled text
//$h2: #666,// comments
//$h3: #a21,// red, support function
//$h4: #930,// orange, punctuation, constant, variable, json-key
//$h5: #a50,// tan, entity/function name
//$h6: #350,// green, string
//$h7: #286,// teal, escape character
//$h8: #059,// blue, declaration, tag, property
//$h9: #a3c,// purple, operators
//$ha: 92%,// mark/highlight line
/// These lines find the spot at which to insert your appended fonts.
//$findFont-Main: "Segoe UI", // ← APPEND custom MAIN font(s) AFTER this
//$findFont-Code: "Segoe UI Mono",// ← APPEND custom CODE font(s) AFTER this
/// If you want to prepend the font list, then use null instead:
//$findFont-Main: null, // ← PREPEND custom MAIN font(s)
//$findFont-Code: null, // ← PREPEND custom CODE font(s)
/// These lines specify the fonts to add.
//$fontExt-Main: (ExampleFont1, "Example Font 2"),// MAIN font(s) to add
//$fontExt-Code: (ExampleCode1, "Example Code 2"),// CODE font(s) to add
/// If relying on installed fonts alone, then the above is all you need, if the visiting system has the intended font installed then it will use it!
/// However, if you want to load the Font File resource to ensure it is loaded if they do not have it, then use @use at the VERY Bottom of this file.
/// For a Sans based system font stack, I measured the least Cumulative Layout Shift with: Roboto, Lato, Arimo
/// If prepending/appending fonts above, then no need to change them with the 2 below lines.
/// The following 2 below lines give a way to hard code a font list if you prefer.
//$font: Roboto system-ui -apple-system BlinkMacSystemFont "Segoe UI" Oxygen Ubuntu Cantarell "Fira Sans" "Droid Sans" "Helvetica Neue" "Noto Sans" Helvetica Arial sans-serif,
//$font-mono: ui-monospace Menlo Monaco Consolas "SF Mono" "Cascadia Mono" "Segoe UI Mono" "DejaVu Sans Mono" "Liberation Mono" "Roboto Mono" "Oxygen Mono" "Ubuntu Monospace" "Ubuntu Mono" "Source Code Pro" "Fira Mono" "Droid Sans Mono" "Courier New" Courier monospace,
/// Enable <header>, <main>, <footer> inside <body> as a container
//$enable-semantic-container: true,
/// Enable responsive typography, Fixed root element size if disabled
//$enable-responsive-typography: true,
/// Enable responsive spacings for <header>, <main>, <footer>, <section>
//$enable-responsive-spacings: false,
/// Enable a centered viewport for <header>, <main>, <footer> inside <body>
/// This option will only work if $enable-maxwidth: false
//$enable-viewport: false,
/// xs: Extra small (portrait phones)
/// sm: Small(landscape phones)
/// md: Medium(tablets)
/// lg: Large(desktops)
/// xl: Extra large (large desktops)
/// Breakpoints
//$breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px),
/// Viewports
//$viewports: (sm: 510px, md: 700px, lg: 920px, xl: 1130px),
//$document: true,//Content-box & Responsive typography
//$typography: true,//a, headings, p, ul, blockquote
//$sectioning: true,//responsive Container, header, main, footer
//$nav: true,//Horizontal Navigation at top of page
//$embedded: true,//Embedded content, iframe, video, images, etc.
//$table: true,//table specific elements
//$code: true,//codeblocks, code, pre, kbd
//$hr: true,//Horizontal Rule
//$scroller: true,//Horizontal scroller (<figure>)
//$button: true,//Form elements (button)
//$form: true,//Form elements (non-button)
//$top: true,//back to top button using CSS
//$search: true,//search feature
//$blocks: true,//css classes for block formatting, eg: recent posts, table of contents, series navigation
//$series: true,//series navigation list
//$modifiers: true,//tiny modifier classes for sizing, spacing, etc.
//$misc: false,
//$grid: true,//Infinity Grid, column based layouts.
//$syntax: true,//syntax highlighting for code blocks
);
@use "extra";
/******************************************************************************
* FONTS - Abridge by default uses the System Font Stack
* https://css-tricks.com/snippets/css/system-font-stack/
* However if you need you can load a specific font below,
* make sure to have the relevant woff2 fonts in your static/fonts folder
* I measured the least Cumulative Layout Shift with: Roboto, Lato, Arimo
*****************************************************************************/
//@use "fonts/Roboto";
//@use "fonts/Arimo";

17
COPY-TO-ROOT-SASS/fonts/_Arimo.scss Normal file
View file

@ -0,0 +1,17 @@
@font-face {
font-family: 'Arimo';
src: local("Arimo"), url("fonts/Arimo.woff2");//latin regular
font-display: swap;
}
@font-face {
font-family: 'Arimo';
src: local("Arimo-Italic"), url("fonts/Arimo-Italic.woff2");//latin italic
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Arimo';
src: local("Arimo-Bold"), url("fonts/Arimo-Bold.woff2");//latin bold
font-weight: bold;
font-display: swap;
}

1
abridge.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#f90" viewBox="0 0 96 96" width="192" height="192"><path stroke-width="14" d="M14 99 46 7h4l32 92"/><path stroke-width="9" d="M-3 82c43-26 59-26 102 0"/><path stroke-linecap="round" stroke-width="1.5" d="M94 72v7m-5-9.8v7m-5-9.8v7.1M79 64v7M63 57.7v7m-5-8.2v7m-5-7.8v7m-5-7.2v7m-5-6.7v7m-5-6.3v7m-5-5.8v7M17 64v7m-5-4.6v7m-5-4.2v7M2 72v7"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 406 B

375
config.toml Normal file
View file

@ -0,0 +1,375 @@
# do NOT include a trailing slash on the base URL
base_url = "https://abridge.netlify.app"
# Usable site directly from disk, Including Search: "/home/jieiku/.dev/abridge/public"
# Also set index format = "elasticlunr_javascript", and in [extra] uglyurls = true, integrity = false
# If you use the npm/node script then all you have to do is set offline = true, and everything else is automatic.
title = "Abridge"
description = "Abridge is a fast and lightweight Zola theme using semantic html, abridge.css class-light CSS, and No Mandatory JS."
#theme = "abridge"
default_language = "en"
compile_sass = true
minify_html = false
build_search_index = true
generate_feeds = true
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.
[search] # Options specific to elasticlunr search.
# index format can be: elasticlunr_json or elasticlunr_javascript
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_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.
[markdown]
highlight_code = true
highlight_theme = "css"
render_emoji = false
external_links_target_blank = true # rel="noopener"
external_links_no_follow = false # rel="nofollow"
external_links_no_referrer = false # rel="noreferrer"
smart_punctuation = false # `...` to `…`, `"quote"` to `“curly”` etc
# Any Extra language you do not use, delete or comment out the extra language sections:
[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_feeds = true
build_search_index = true
search.include_title = true # include title of page/section in index
search.include_description = true # include description of page/section in index
search.include_content = true # include rendered content of page/section in index
# search.truncate_content_length = 100 # Truncate at nth character. May be useful if index is getting too large.
taxonomies = [
# {name = "categories", feed = true},
{name = "tags", feed = true},
]
[languages.es]
title = "Abridge"
description = "Abridge es un tema de Zola rápido y liviano que utiliza HTML semántico, CSS ligero de clase abridge.css y JS no obligatorio."
generate_feeds = true
build_search_index = true
search.include_title = true # include title of page/section in index
search.include_description = true # include description of page/section in index
search.include_content = true # include rendered content of page/section in index
# search.truncate_content_length = 100 # Truncate at nth character. May be useful if index is getting too large.
taxonomies = [
# {name = "categories", feed = true},
{name = "tags", feed = true},
]
[extra]
###############################################################################
### Layout & Format
### position: top, bottom, both, false(hidden)
### size: s150, s140, s130, s120, s110, s95, s90, s85, s80, s75, s70, false(full size)
### divider: " " "&middot;" "&bull;"
###############################################################################
menu = [
# {url = "blog", name = "Blog", slash = true, blank = false, size="s110"},
{url = "about", name = "About", slash = true, blank = false, size="s110"},
{url = "archive", name = "Posts", slash = true, blank = false, size="s110"},
# {url = "categories", name = "Categories", slash = true, blank = false, size="s110"},
{url = "tags", name = "Tags", slash = true, blank = false, size="s110"},
]
menu_footer = [
{url = "about", name = "About", slash = true, blank = false, size="s90"},
{url = "contact", name = "Contact", slash = true, blank = false, size="s90"},
{url = "privacy", name = "Privacy", slash = true, blank = false, size="s90"},
{url = "sitemap.xml", name = "Sitemap", slash = false, blank = true, size="s90"},
]
toc = true
recent = true # TOC / index
recent_items = 15
series = true
series_items = 9 # Max number of items to display in series list, use 0 to disable
#Series_parts = "$NUMBER_OF_PARTS part Series"
meta_index = { position="bottom", size="s90", author=false, readtime=false, readstring="min", date=true, updated=false, categories_tags=true, divider="" }
meta_post = { position="top", size="s95", author=true, readtime=false, readstring="min read", date=true, updated=true, categories_tags=true, divider="" }
hide_section_dates = false # hides the date for sections that use posts.html as their template.
hide_page_nextprev_titles = false # hides the next/previous titles for pages that use page.html as their template.
title_size_index = "s85"
footer_size = "s80" # the size of the copyright and powered by text
footer_credit = true
#footer_credit_override = '<p class="s90">Powered by <a href="https://www.getzola.org/" target="_blank">Zola</a> &#38; <a href="https://github.com/Jieiku/abridge/" target="_blank">Abridge</a></p>'
#archive_reverse = true # Set to True to sort posts chronologically per year instead of newest first on the archive page: example.com/archive/
### Uncomment one of the below lines, or neither, depending on which type of logo you want to use:
#logo = { file="logo.svg", width="32", height="32", alt="Abridge", text="bridge" }
#textlogo = '<font color="#f90">A</font>bridge'
textlogo = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#f90" viewBox="0 0 96 96" width="28" height="28"><path stroke-width="14" d="M14 99 46 7h4l32 92"/><path stroke-width="9" d="M-3 82c43-26 59-26 102 0"/><path stroke-linecap="round" stroke-width="1.5" d="M94 72v7m-5-9.8v7m-5-9.8v7.1M79 64v7M63 57.7v7m-5-8.2v7m-5-7.8v7m-5-7.2v7m-5-6.7v7m-5-6.3v7m-5-5.8v7M17 64v7m-5-4.6v7m-5-4.2v7M2 72v7"/></svg>bridge'
sitedesc = false # enables or disables the display of the site description below the logo.
headhr = false # show or hide horizontal rule below header
foothr = false # show or hide horizontal rule above footer
### $CURRENT_YEAR and $SITE_TITLE can be used anywhere within the copyright, you can change their position or you can also delete them and type whatever you want instead.
#copyright = false # set to false to disable the copyright.
#copyright_override = '© 2019-$CURRENT_YEAR $SITE_TITLE'
#copyright_override = '© $CURRENT_YEAR $SITE_TITLE • Website content is licensed <a rel="noopener" target="_blank" href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.'
###############################################################################
### 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
#dev = false # development mode, if true then robots.txt should prevent search indexing.
#head_extra = '<meta name="analytics" content="my-analytics-id" /><meta name="advertising" content="my-advertising-id" />'
###############################################################################
### 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 = "name@example.com"
mastodon = "https://mastodon.example.com/@username"
element = "matrix.example.com"
buymeacoffee = "your-user-name"
kofi = "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"
#pixelfed = "https://pixelfed.example.com/" # Heaviest icon, off by default
pinterest = "your-user-name"
twitch = "your-user-name"
youtube = "channel/your-channel-id"
peertube = "https://peertube.example.com/@username"
researchgate = "your-profile-id"
###############################################################################
### Resource Files
### You can load extra css files if you need to, just separate by comma:
### stylesheets = [ "abridge.css", "extra.css" ]
### search_library, library to use. valid values:
### false, "elasticlunr", "tinysearch", "stork"
### offline: implies uglyurls=true and integrity=false, when true NPM/node will
### automatically set the path for the base_url, it will build the site,
### then set the base_url back to what it was. This is a way to build a completely
### offline site, a feature not possible with Zola alone.
### The PWA feature is another way to build an offline site, so there are now two
### different ways to build an offline site with Abridge.
###
### For most people the value of online_url will be the same as base_url.
### online_url is used to restore the base_url after generating an Offline site.
### When you set offline = true and run the npm script, the base_url is set to the absolute path on disk.
### Once you set offline = false, the base_url will be set back to the value of online_url when you run the npm script again.
###############################################################################
# do NOT include a trailing slash on the online URL
#online_url = "https://abridge.netlify.app"
online_indexformat = "elasticlunr_json"# used to restore your preferred index format when offline = false
offline = false # implies uglyurls=true and integrity=false, when true NPM/node will automatically set the path for the base_url, it will build the site, then set the base_url back to what it was.
uglyurls = false # if set to true then links are generated with the full path. eg https://abridge.netlify.app/index.html
integrity = true # increases site security, should normally be true. (setting to false is useful during js development)
js_bundle = true # multiple javascript files combined into a single file (setting to false is useful during js development)
js_copycode = true # The copy button on code blocks that allows you to copy them to the clipboard.
js_email_encode = true # obfuscates email address in footer
js_prestyle = true # used to preload: FontAwesome, Katex, external Google Fonts
js_switcher = true # The button that allows manually changing between light/dark mode.
js_switcher_default = "dark" # default nojs switcher mode: dark, light (make sure to also set $switcherDefault in abridge.scss)
search_library = 'elasticlunr'
stylesheets = ["abridge.css"]
webmanifest = "manifest.min.json" # Required for PWAs
###############################################################################
### PWA (Progressive Web Application)
### By default Abridge has pwa_NORM_TTL and pwa_LONG_TTL set to 0, this essential turns the PWA cache strategy into network first.
### Abridge uses cachebust hashing on js and css files, so anytime a page cache is updated, these resources would also get updated if changed.
### Media files rarely change, especially font files, so it is a good idea cache indefinitely.
### For pwa_TTL_EXEMPT indefinitely cached resources, you can force a new cache by incrementing the pwa_VER (cache version number).
### If you would like to try a cache first strategy then set a value higher than 0 for pwa_NORM_TTL and pwa_LONG_TTL.
### The options below other than pwa=true, only come into play when the npm/node script is ran.
###############################################################################
pwa = true # true to load the service worker
pwa_VER = '3.11.0' # Service Worker cache version. (increment if you need to force a new cache)
### 3600=1hour, 28800=8hours, 86400=1day, 604800=1week, 1209600=2weeks
pwa_NORM_TTL = 0 # 86400 is reasonable. html, json, xml, anything else undefined
pwa_LONG_TTL = 0 # 604800 is reasonable.
### list of files that overrides TTL_LONG/TTL_EXEMPT to be a NORM TTL.
pwa_TTL_NORM = '"sw.min.js", "sw_load.min.js"'
### TTL_LONG file extensions will be cached for the LONG_TTL duration.
pwa_TTL_LONG = '"jpg", "jpeg", "png", "gif", "webp", "avif", "ico", "svg", "xsl", "txt"'
### TTL_EXEMPT file extensions will be cached indefinitely unless sw_load version is incremented, which would invalidate any existing cache. (and a new cache would be started)
pwa_TTL_EXEMPT = '"js", "css", "otf", "eot", "ttf", "woff", "woff2", "mp4", "webm", "mp3", "ogg"'
### If set to true then the entire site is cached. (useful for making an entire site usable while offline)
pwa_cache_all = true
### List of Files for the PWA to initially Cache, used if pwa_cache_all = false
pwa_BASE_CACHE_FILES = "'/js/theme.min.js','/js/theme_light.min.js','/abridge.css','/js/abridge.min.js','/','/404.html','/offline/','/manifest.min.json'"
###############################################################################
### Favicons, comment out a line to disable loading some or all of these if needed.
###############################################################################
favicon_theme_color = "#333333"
favicon_ms_color = "#333333"
favicon_mask = "safari-pinned-tab.svg" # safari-pinned-tab.svg
favicon_mask_color = "#ff9900"
favicon_svg = "favicon.svg" # favicon.svg
favicon180 = "apple-touch-icon.png" # apple-touch-icon.png
favicon32 = "favicon-32x32.png" # favicon-32x32.png
favicon16 = "favicon-16x16.png" # favicon-16x16.png
###############################################################################
### Commenting System for visitors to leave comments on pages.
### hyvor talk
###############################################################################
#comments.hyvor = "9366" # hyvor website id, comment out to disable.
#comments.hyvorcolor = "os" # set the color property for hyvor
###############################################################################
### Icons
### Loading the entire fontawesome icon collection will negatively impact your sites performance.
### For a lightweight solution consider adding only the icons that you need to the following file:
### https://github.com/Jieiku/abridge/blob/master/sass/include/_icons.scss
###############################################################################
### To disable any of these icons set them to "false" (will default to unicode icons instead)
#icon_search = "svgs svgm search" # Search button in search box.
#icon_adjust = "svgs adjust" # Theme Switcher button in top menu. (add class svgh to change colors on hover)
#icon_first = "svgs svgh angll" # Pagination First Page.
#icon_prev = "svgs svgh angl" # Pagination Previous Page.
#icon_next = "svgs svgh angr" # Pagination Next Page.
#icon_last = "svgs svgh angrr" # Pagination Last Page.
#icon_top = "svgs svgh angu" # Back to Top Button.
#icon_read = "svgs fa-solid fa-glasses" # displayed in metadata on index and below title on page.
#icon_date = "svgs fa-solid fa-calendar" # displayed in metadata on index and below title on page.
#icon_info = "svgs fa-solid fa-circle-info" # displayed in metadata on index and below title on page for categories/tags
#icon_author = "svgs fa-solid fa-pen-fancy" # displayed in metadata on index and below title on page.
### Uncomment below line to load fontawesome, eg: <i class="fa-solid fa-heart"></i>
#fontawesome = "https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.1/css/all.min.css"
#icon_read = "svgs fa-solid fa-glasses" # displayed in metadata on index and below title on page.
#icon_date = "svgs fa-solid fa-calendar" # displayed in metadata on index and below title on page.
#icon_info = "svgs fa-solid fa-circle-info" # displayed in metadata on index and below title on page for categories/tags
#icon_author = "svgs fa-solid fa-pen-fancy" # displayed in metadata on index and below title on page.
###############################################################################
### Security Settings
### Security Headers should preferably be set by your webserver (Nginx, Apache)
### https://observatory.mozilla.org https://csp-evaluator.withgoogle.com/
### If you are unable to load your security headers with your webserver, this will load a couple of them as meta tags.
### There are many other security related headers most of which can only be set by the webserver method.
### If you happen to use Netlify, you can define all the headers in your netlify.toml file:
### https://github.com/Jieiku/abridge/blob/master/netlify.toml
### UnComment any of these lines to enable their meta tags.
###############################################################################
#security_header_referrer = "strict-origin-when-cross-origin"
#security_header_csp = "default-src 'none'; object-src 'none'; base-uri 'self'; manifest-src 'self'; connect-src 'self'; form-action 'self'; script-src 'self'; img-src 'self' data: cdn.cloudflare.com; frame-src 'self' www.youtube-nocookie.com player.vimeo.com; media-src 'self' data: cdn.cloudflare.com www.youtube-nocookie.com player.vimeo.com; font-src 'self' cdn.cloudflare.com cdn.jsdelivr.net fonts.gstatic.com; style-src 'self' cdn.cloudflare.com cdn.jsdelivr.net fonts.googleapis.com;"
###############################################################################
### FONTS - Abridge by default uses the System Font Stack
### https://css-tricks.com/snippets/css/system-font-stack/
### However if you need you can load a specific font below,
### make sure to have the relevant woff2 fonts in your static/fonts folder
### I measured the least Cumulative Layout Shift with: Roboto, Lato, Arimo
###############################################################################
### For externally loaded Fonts, make sure to include the FULL url including the https prefix:
#fonts = [ {url = "https://fonts.googleapis.com/css?family=Roboto:400,700,italic|Roboto+Mono:400,italic"} ]
### Local fonts are defined in the css, https://github.com/Jieiku/abridge/tree/master/COPY-TO-ROOT-SASS/fonts/_Arimo.scss
### To load a local font resource, look at the bottom of this file: https://github.com/Jieiku/abridge/blob/master/COPY-TO-ROOT-SASS/abridge.scss
### After loading them in the CSS, You can also define them below and it will add the preload tag to the head.
### preloading fonts will eliminate Content Layout Shift, but will hurt with page load time. (not recommended)
#fonts = [
# {url = "fonts/Roboto-Mono.woff2"},
# {url = "fonts/Roboto-Mono-Italic.woff2"},
# {url = "fonts/Roboto.woff2"},
# {url = "fonts/Roboto-Italic.woff2"},
# {url = "fonts/Roboto-Bold.woff2"},
#]
###############################################################################
### Katex - math js library, used to to render mathematical notations
### It's best to enable katex on a per page bases as I did here:
### https://abridge.netlify.app/overview-math/
### https://github.com/Jieiku/abridge/blob/master/content/overview-math.md?plain=1#L11-L13
### Otherwise you will load the katex related javascript on every page!
###############################################################################
#katex_options = "js/katexoptions.js"
#katex_bundle = "js/katexbundle.min.js"
### Load Katex Local Resources
#katex_css = "katex.min.css" # Fonts - load the css/fonts locally
#katex_js = "js/katex.min.js" # use local js, so that we dont have to whitelist cdn.jsdelivr.net for script src in CSP
#mathtex_js = "js/mathtex-script-type.min.js" # use local js, so that we dont have to whitelist cdn.jsdelivr.net for script src in CSP
#katex_autorender_js = "js/katex-auto-render.min.js"
### Load Katex External Resources
#katex_css = "https://cdn.jsdelivr.net/npm/katex@0.15.6/dist/katex.min.css" # Fonts - use remote fonts
#katex_css_integrity = "sha384-ZPe7yZ91iWxYumsBEOn7ieg8q/o+qh/hQpSaPow8T6BwALcXSCS6C6fSRPIAnTQs"
#katex_js = "https://cdn.jsdelivr.net/npm/katex@0.15.6/dist/katex.min.js"
#katex_js_integrity = "sha384-ljao5I1l+8KYFXG7LNEA7DyaFvuvSCmedUf6Y6JI7LJqiu8q5dEivP2nDdFH31V4"
#katex_autorender_js = "https://cdn.jsdelivr.net/npm/katex@0.15.6/dist/contrib/auto-render.min.js"
#katex_autorender_js_integrity = "sha384-+XBljXPPiv+OzfbB3cVmLHf4hdUFHlWNZN5spNQ7rmHTXpd7WvJum6fIACpNNfIR"
#mathtex_js = "https://cdn.jsdelivr.net/npm/katex@0.15.6/dist/contrib/mathtex-script-type.min.js"
#mathtex_js_integrity = "sha384-jiBVvJ8NGGj5n7kJaiWwWp9AjC+Yh8rhZY3GtAX8yU28azcLgoRo4oukO87g7zDT"
#math = false # Recommended setting false, and enable on per page bases instead.
#math_auto_render = false # Recommended setting false, and enable on per page bases instead.

5
content/_index.es.md Normal file
View file

@ -0,0 +1,5 @@
+++
paginate_by = 3
sort_by = "date"
template = "index.html"
+++

5
content/_index.fr.md Normal file
View file

@ -0,0 +1,5 @@
+++
paginate_by = 3
sort_by = "date"
template = "index.html"
+++

5
content/_index.md Normal file
View file

@ -0,0 +1,5 @@
+++
paginate_by = 3
sort_by = "date"
template = "index.html"
+++

6
content/archive/_index.es.md Normal file
View file

@ -0,0 +1,6 @@
+++
template = "archive.html"
[extra]
sec = ""
+++

6
content/archive/_index.fr.md Normal file
View file

@ -0,0 +1,6 @@
+++
template = "archive.html"
[extra]
sec = ""
+++

6
content/archive/_index.md Normal file
View file

@ -0,0 +1,6 @@
+++
template = "archive.html"
[extra]
sec = ""
+++

5
content/blog/_index.es.md Normal file
View file

@ -0,0 +1,5 @@
+++
paginate_by = 3
sort_by = "date"
template = "index.html"
+++

5
content/blog/_index.fr.md Normal file
View file

@ -0,0 +1,5 @@
+++
paginate_by = 3
sort_by = "date"
template = "index.html"
+++

5
content/blog/_index.md Normal file
View file

@ -0,0 +1,5 @@
+++
paginate_by = 3
sort_by = "date"
template = "index.html"
+++

3
content/images/_index.md Normal file
View file

@ -0,0 +1,3 @@
+++
render = false
+++

1
content/images/ferris-gesture.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 400" width="600" height="400"><path fill="#a52b00" d="M327 173c-57 0-109 7-148 18v-3c-39 13-64 30-64 50l2 9-4 7s-3 4 2 13a1191 1191 0 0 0 54 67c0-1-4-16-15-34l-16-31c11 7 25 13 41 18 39 11 91 18 148 18 66 0 124-9 164-23v-86c-40-14-98-23-164-23m223 79-7-14v-1c0-16-16-31-44-42v84c13-6 24-12 31-18-2 9-10 26-16 39-9 18-13 34-13 34a1239 1239 0 0 0 46-69c6-9 3-13 3-13"/><path fill="#f74c00" d="m589 252-44-32-1-5 14-21c2-2 2-5 1-7s-3-4-6-5l-24-4-3-6 10-23v-7c-2-3-4-4-7-4l-25 1-4-5 6-25c1-3 0-5-2-7s-4-3-7-2l-24 6-5-4 1-26c0-3-1-6-3-7s-5-2-7-1l-23 11-5-3-4-26c-1-2-2-4-5-5-2-1-5-1-7 1l-20 15-6-2-8-24c-1-3-3-5-6-5-2-1-5 0-7 2l-17 19-6-1-13-22c-1-2-4-3-6-3-3 0-5 1-6 3l-13 22-7 1-16-19a7 7 0 0 0-13 3l-8 24-6 2-20-15c-3-2-5-2-8-1-2 1-4 3-4 5l-4 26-5 3-23-11c-2-1-5 0-7 1s-3 4-3 7l1 26-5 4-24-6c-3-1-6 0-7 2-2 2-3 4-2 7l5 25-3 5-25-1c-3 0-5 1-7 4v7l10 23-3 6-24 4c-3 1-5 3-6 5s-1 5 1 7l14 21v1l-41 44s-6 5 3 17a1639 1639 0 0 0 87 88c2-1-4-20-22-43-14-21-32-53-28-56 0 0 5-6 14-11 1 0 0 0 0 0s206 95 397 2c22-4 35 8 35 8 4 2-7 35-17 56a98 98 0 0 0-14 45l12-19c17-23 49-68 55-79 7-12 0-16 0-16"/><path d="m398 312 1-1-67-6c55-73 99-14 103-8v15z"/><path fill="#f74c00" d="M139 232s-55-21-65-44c0 0 65-52-13-107l-2 70s-23-23-22-62c0 0-72 35 12 96 0 0 3 33 79 73z"/><path d="M365 203s21-23 41 0c0 0 16 30 0 45 0 0-26 21-41 0 0 0-18-17 0-45"/><path fill="#fff" d="M389 211c0 9-5 16-12 16-6 0-11-7-11-16s5-16 11-16c7 0 12 7 12 16"/><path d="M273 197s35-16 45 19c0 0 10 40-29 43 0 0-50-10-16-62"/><path fill="#fff" d="M291 211c0 9-5 16-12 16s-12-7-12-16 5-17 12-17 12 8 12 17"/><path fill="#f74c00" d="M501 241s-7 29-53 60l-13 3s-41-76-100 10c0 0 18-11 67 2 0 0-22 35-68 34 0 0 44 52 110-24 0 0 70-27 76-85z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 1.7 KiB

1
content/images/ferris.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 400" width="600" height="400"><path fill="#a52b00" d="M299 179c-61 0-116 7-157 19v101c41 12 96 20 157 20 69 0 131-10 173-25v-91c-42-15-104-24-173-24m235 82-7-15v-1c0-17-17-32-46-45v89c13-6 24-12 32-19-2 9-10 28-16 42-11 19-14 35-14 36l9-14 40-59c5-9 2-14 2-14M75 246l1 9-4 8s-3 4 3 14a1259 1259 0 0 0 56 70c1-1-4-17-16-35l-16-33c11 7 26 13 43 19V194c-42 13-67 31-67 52"/><path fill="#f74c00" d="m576 261-47-34-1-5 15-22c2-2 2-5 1-8-1-2-3-4-6-5l-26-4-3-6 11-25c1-3 1-6-1-8-1-2-4-4-7-4l-26 1-4-5 6-27c1-2 0-5-2-7s-5-3-7-2l-26 6-5-4 1-28c0-3-1-5-3-7-3-1-5-2-8 0l-24 11-6-3-4-27c0-3-2-5-5-6-2-2-5-1-7 0l-21 16-7-2-9-25c-1-3-3-5-6-5-2-1-5 0-7 2l-18 20h-6l-14-24c-1-2-4-4-7-4-2 0-5 2-6 4l-14 24h-7l-17-20a8 8 0 0 0-13 3l-10 25-6 2-21-16c-2-1-5-2-8 0-2 1-4 3-4 6l-5 27-5 3-24-11c-3-2-6-1-8 0-2 2-3 4-3 7l1 28-5 4-26-6c-3-1-5 0-7 2s-3 5-2 7l6 27-4 5-27-1c-2 0-5 2-6 4-2 2-2 5-1 8l11 25-3 6-26 4c-3 1-5 3-6 5-1 3-1 6 1 8l15 22v1l-44 46s-6 6 4 18a1732 1732 0 0 0 92 94c1-1-4-22-24-46-15-22-34-56-29-60 0 0 5-6 15-11 0 1 0 0 0 0s218 101 420 2c23-4 37 8 37 8 4 3-8 37-18 60-14 26-16 46-15 47s6-7 13-19l58-84c7-13 0-17 0-17"/><path d="m225 325-1-1 71-5c-58-77-105-16-110-9v15zm149 0 1-1-69-5c59-80 102-17 107-10v16z"/><path fill="#f74c00" d="M483 249s-8 31-56 63l-14 3s-44-80-106 10c0 0 19-11 71 3 0 0-23 37-72 35 0 0 47 56 117-24 0 0 74-29 80-90z"/><path d="M339 209s21-24 43 0c0 0 17 32 0 47 0 0-28 23-43 0 0 0-19-17 0-47"/><path fill="#fff" d="M364 218c0 9-6 16-12 16-7 0-13-7-13-16 0-10 6-17 13-17 6 0 12 7 12 17"/><path d="M242 202s37-16 47 21c0 0 11 43-31 45 0 0-52-10-16-66"/><path fill="#fff" d="M260 217c0 10-5 18-12 18s-13-8-13-18c0-9 6-17 13-17s12 8 12 17"/><path fill="#f74c00" d="M221 331c46-6 72-6 72-6-61-81-111-8-111-8-13-4-25-22-35-38l-38-11c44 75 77 76 77 76 68 87 100 17 100 17-38-4-65-30-65-30"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 1.8 KiB

452
content/overview-abridge/index.fr.md Normal file
View file

@ -0,0 +1,452 @@
+++
title = "Abridge Zola Thème"
description = "Abridge est un thème Zola rapide et léger utilisant du HTML sémantique, du CSS léger de classe abridge.css et No Mandatory JS."
date = 2022-05-17
updated = 2023-07-21
draft = false
[taxonomies]
tags = ["Features","Config"]
[extra]
toc = true
series = "Features"
+++
Un thème [Zola](https://getzola.org) rapide, léger et moderne utilisant [abridge.css](https://github.com/Jieiku/abridge.css) (un framework HTML CSS sémantique léger en classe ). Scores parfait [Lighthouse](https://pagespeed.web.dev/report?url=abridge.netlify.app), [YellowLabTools](https://yellowlab.tools/) et [Observatory](https://observatory.mozilla.org/analyze/abridge.netlify.app). Voici une page [Zola Themes Benchmarks](https://github.com/Jieiku/zola-themes-benchmarks/blob/main/README.md).
<!-- more -->
![lighthouse](lighthouse.png)
## Features
- [X] Scores parfait [Lighthouse](https://pagespeed.web.dev/report?url=abridge.netlify.app), [YellowLabTools](https://yellowlab.tools/) et [Observatory](https://observatory.mozilla.org/analyze/abridge.netlify.app)
- [X] [Prise en charge des PWA](#pwa-application-web-progressive) (Application Web progressive).
- [X] Tout JavaScript peut être [entièrement désactivé](https://abridge.netlify.app/overview-abridge/#javascript-files).
- [X] Thèmes sombre, clair, automatique et Switcher. (les couleurs peuvent être personnalisées, variables CSS)
- [X] Code [surlignage de la syntaxe](https://abridge.netlify.app/overview-code-blocks/). (les couleurs peuvent être personnalisées, variables CSS)
- [X] Blocs de code numérotés avec [mise en évidence des lignes](https://abridge.netlify.app/overview-code-blocks/#toml).
- [X] Site entièrement hors ligne en utilisant la PWA **ou** en définissant `offline = true` dans `config.toml` (prise en charge complète de la recherche).
- [X] Prise en charge multilingue.
- [X] Aide à la recherche. (elasticlunr, tinysearch, cigogne)
- [X] Suggestions de recherche touches de navigation, focus `/`, déplacement `flèche`, sélection `entrée`, fermeture `évasion`.
- [X] Page des résultats de recherche, tapez la requête de recherche, puis appuyez sur `Entrée` ou `cliquez` sur l'icône du bouton de recherche.
- [X] [SEO](#seo-et-balises-d-en-tete) soutien. (Optimisation du moteur de recherche)
- [X] [Pagination](#pagination) avec paginateur numéroté sur index.
- [X] Liens vers les articles précédents et suivants basés sur le titre au bas de l'article.
- [X] Table des matières dans la page Index (liens facultatifs cliquables)
- [X] Blocage des messages récents. (Facultatif)
- [X] Bouton Retour en haut. (utilise uniquement CSS)
- [X] Bouton de copie des blocs de code.
- [X] Lien d’e-mail dans l’obscurcissement du pied de page. (anti-spam)
- [X] [KaTeX](https://katex.org/) soutien.
- [X] [Page d'archives](https://abridge.netlify.app/archive/).
- [x] [Mots clés](https://abridge.netlify.app/tags/).
- [x] Catégories. (similaire aux Tags, désactivés/commentés par défaut)
- [x] Liens vers les icônes sociales dans le pied de page.
- [X] Conception réactive. (mobile d'abord)
- [X] Vidéo Shortcodes: [Youtube](https://abridge.netlify.app/video-streaming-sites/overview-embed-youtube/), [Vimeo](https://abridge.netlify.app/video-streaming-sites/overview-embed-vimeo/), [Streamable](https://abridge.netlify.app/video-streaming-sites/overview-embed-streamable/).
- [X] Médias Shortcodes: [video](https://abridge.netlify.app/overview-rich-content/#video), [img](https://abridge.netlify.app/overview-images/#img-shortcode), [imgswap](https://abridge.netlify.app/overview-images/#imgswap-shortcode), [image](https://abridge.netlify.app/overview-rich-content/#image), [gif](https://abridge.netlify.app/overview-rich-content/#gif), [audio](https://abridge.netlify.app/overview-rich-content/#audio).
- [X] Autre Shortcodes: [showdata](https://abridge.netlify.app/overview-showdata/), [katex](https://abridge.netlify.app/overview-math/#usage-1).
## Démarrage rapide
Ce thème nécessite une version {{ showdata(src="https://raw.githubusercontent.com/Jieiku/abridge/master/theme.toml" key="min_version" type="toml") }} ou plus tard de [Zola](https://www.getzola.org/documentation/getting-started/installation/)
```bash
git clone https://github.com/jieiku/abridge.git
cd abridge
zola serve
# open http://127.0.0.1:1111/ in the browser
```
## Installation
Le démarrage rapide montre comment exécuter le thème directement. Ensuite, nous utiliserons abridge comme thème pour un NOUVEAU site.
### 1: Créer un nouveau site zola
```bash
zola init mysite
cd mysite
```
### 2: Installer abridge
Ajoutez le thème en tant que sous-module git :
```bash
git init # si votre projet est déjà un dépôt git, ignorez cette commande
git submodule add https://github.com/jieiku/abridge.git themes/abridge
```
Ou clonez le thème dans votre répertoire de thèmes:
```bash
git clone https://github.com/jieiku/abridge.git themes/abridge
```
### 3: Configuration
Copiez certains fichiers du répertoire du thème vers le répertoire racine de votre projet:
```bash
touch templates/.gitkeep
rsync themes/abridge/config.toml config.toml
rsync themes/abridge/content/_index.md content/
rsync themes/abridge/COPY-TO-ROOT-SASS/* sass/
rsync themes/abridge/netlify.toml netlify.toml
rsync themes/abridge/package_abridge.js package_abridge.js
rsync themes/abridge/package.json package.json
```
- `templates/.gitkeep` le répertoire des modèles est requis dans votre site de base. [#2150](https://github.com/getzola/zola/issues/2150)
- `config.toml` configuration de base avec toutes les valeurs de configuration.
- `content/_index.md` requis pour définir la pagination.
- `COPY-TO-ROOT-SASS/abridge.scss` remplace pour personnaliser les variables Abridge.
- `netlify.toml` paramètres pour déployer votre dépôt avec netlify
- `package_abridge.js` script de nœud pour: mettre à jour la liste des fichiers de cache dans PWA, réduire js, regrouper js
- `package.json` pour basculer entre nosearch, elasticlunr, tinysearch, stork.
Décommentez la ligne de thème dans le fichier racine config.toml de votre projet:
```bash
sed -i 's/^#theme = "abridge"/theme = "abridge"/' config.toml
```
### 4: Ajouter du nouveau contenu
Copiez le contenu du répertoire du thème dans votre projet ou créez un nouveau message:
```bash
rsync -r themes/abridge/content .
```
### 5: Exécuter le projet
Exécutez simplement `zola serve` dans le chemin racine du projet:
```bash
zola serve
```
Zola démarrera le serveur web de développement, accessible par défaut à `http://127.0.0.1:1111`.
Les modifications enregistrées seront rechargées en direct dans le navigateur. (appuyez sur `ctrl+f5`, ou pendant le développement, définissez `pwa=false` dans `config.toml`)
## Pagination
Vous pouvez définir le nombre d'éléments de la page d'accueil en éditant le fichier `content\_index.md` et en ajustant `paginate_by`
## Remplacements Sass
Les variables Abridge SASS peuvent être remplacées en éditant le fichier `sass\abridge.scss` dans le dossier sass racine de votre projet.
### Largeur de page
```scss
$mw:75%,// largeur maximale
```
### Modes thématiques abrégés
```scss
$abridgeMode: "switcher",//valeurs valides: switcher, auto, dark, light
```
- switcher: affiche automatiquement une version sombre ou claire en fonction des paramètres du navigateur/système d'exploitation et dispose d'un sélecteur de thème javascript cliquable par l'utilisateur.
- auto: affiche automatiquement une version sombre ou claire en fonction des paramètres du navigateur/système d'exploitation.
- dark: est toujours le thème sombre.
- light: est toujours le thème de la lumière.
### Couleurs et styles
Vous pouvez spécifier le modèle de couleur que vous souhaitez utiliser comme base:
```scss
$color: "orange",// modèle de couleur à utiliser/remplacer: orange, blue, blueshade
```
Remplacez ensuite les couleurs individuelles si nécessaire:
```scss
/// Couleurs sombres
$f1d: #ccc,// Couleur de police principale
$f2d: #ddd,// En-têtes de couleur de police
$c1d: #111,// Couleur d'arrière-plan primaire
$c2d: #222,// Couleur d'arrière-plan secondaire
...
```
### Icônes sociales de pied de page
Vous devez configurer les icônes sociales que vous envisagez d'utiliser. (rend la taille du fichier CSS plus petite)
Pour simplement les désactiver tous, vous pouvez définir `$enable-icons: false` (désactive TOUTES les icônes, la navigation, la recherche, etc.)
Sinon, activez uniquement les icônes dont vous avez besoin, par exemple pour le courrier que vous définiriez `$icon-mail: true`
Vous devez ensuite désactiver toutes les autres icônes que vous n'utilisez pas.
### Thème des visites noscript
Si vous avez configuré Abridge pour utiliser le mode de commutation au lieu de auto/dark/light, alors votre site aura un bouton qui permettra au visiteur de basculer le thème.
Si votre visiteur utilise noscript ou un autre module complémentaire de navigateur bloquant Javascript, il sera alors bloqué avec le thème par défaut configuré pour le mode de commutation.
Pour ajuster ce mode, vous devez définir les deux valeurs de configuration suivantes dans `abridge.scss` **ET** `config.toml`:
```scss
$switcherDefault: "dark",// mode de commutation nojs par défaut: dark, light (assurez-vous de définir également js_switcher_default dans config.toml)
```
```toml
js_switcher_default = "dark" # mode de commutation nojs par défaut: dark, light (assurez-vous de définir également $switcherDefault dans abridge.scss)
```
Par défaut, abridge utilise le mode sombre pour le sélecteur, donc à moins que vous ne souhaitiez définir le mode par défaut sur clair pour les visiteurs nojs/noscript, vous n'avez pas à vous soucier de ces paramètres.
## Config.toml Configuration
La plupart des options de `config.toml` sont auto-documentées. (évident entre le nom de la valeur de configuration et les commentaires)
Abridge fonctionnera avec un `config.toml` barebones car les valeurs par défaut sont fournies dans les fichiers modèles.
Je recommande de copier l'intégralité du fichier config.toml comme indiqué à l'étape 3 car il fournit toutes les valeurs configurables.
### Menus du haut et du pied de page
Définissez un champ dans `extra` avec une clé de `menu` et `menu_footer`.
Si vous souhaitez que le lien s'ouvre dans un nouvel onglet/navigateur, définissez `blank = true`.
taille : s150, s140, s130, s120, s110, s95, s90, s85, s80, s75, s70, faux (pleine taille)
Si un lien doit avoir une barre oblique à la fin de l'URL définie `slash = true`.
(généralement, tous les liens doivent avoir une barre oblique finale, sauf s'il s'agit d'un lien de fichier tel que `sitemap.xml`)
```toml
menu = [
{url = "about", name = "About", slash = true, blank = false, size="s110"},
{url = "posts", name = "Posts", slash = true, blank = false, size="s110"},
{url = "categories", name = "Categories", slash = true, blank = false, size="s110"},
{url = "tags", name = "Tags", slash = true, blank = false, size="s110"},
]
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},
]
```
### SEO et balises d’en-tête
Vous pouvez consulter les balises SEO dans la macro SEO située dans `templates/macros/seo.html`, toutes les valeurs configurables doivent être dans `config.toml` sous `config.extra` ou dans les fichiers de démarque de contenu.
Dans votre fichier de démarque, vous devez définir un titre de moins de 60 caractères et une description entre 80 et 160 caractères. La description est ce qui est affiché dans les résultats de recherche sous le titre de la page. Partout où vous ne définissez pas de description de page, le fichier config.description du site principal sera utilisé à la place.
Vous devez également définir des mots-clés spécifiques à la page, à moins que vos mots-clés définis dans config.toml suffisent, tous les mots-clés que vous ajoutez à la page s'ajoutent à ceux définis dans config.toml, n'ajoutez donc pas ces mêmes mots-clés aux mots-clés de votre page.
Vous pouvez éventuellement également définir une image spécifique à la page pour les résultats de recherche en utilisant page.extra.thumbnail. Les cartes Facebook, Twitter et OpenGraph sont prises en charge (image et description automatiques pour les liens publiés). OpenGraph recommande 1200 x 630 (1,9:1). Twitter recommande 2:1 pour les grands et 1:1 pour les petits. Si vous ne définissez pas de miniature spécifique à la page, la bannière définie dans config.toml sera utilisée à la place.
Faire référence à [overview-images](https://raw.githubusercontent.com/Jieiku/abridge/master/content/overview-images/index.md) à titre d'exemple:
```md
+++
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]
tags = ["Features","Shortcodes","Images"]
[extra]
toc = true
keywords = "Image, Markdown, Shortcodes, Swap"
thumbnail = "ferris-gesture.png"
+++
```
### Notation mathématique KaTeX
KaTeX peut être utilisé pour afficher des mathématiques complexes, il s'agit d'une « composition mathématique rapide pour le Web ».
Vous pouvez voir une démo sur [cette page](https://abridge.netlify.app/overview-math/).
Pour de meilleures performances, je recommande d'activer uniquement les mathématiques sur une [base par page dans vos fichiers post.md](https://github.com/Jieiku/abridge/blob/master/content/overview-math.md?plain=1#L11-L13), au lieu de dans votre fichier config.toml principal.
### PWA, application Web progressive
Le thème Abridge prend en charge PWA. Vous pouvez installer l’intégralité du site en tant qu’application et le faire fonctionner hors ligne. Pour l'essayer, utilisez simplement Google Chrome ou votre téléphone et allez ici: [abridge.netlify.app](https://abridge.netlify.app/)
Si vous utilisez Chrome sur un ordinateur de bureau, regardez à la fin de la barre d'adresse le bouton d'installation. Sur Android, vous devriez obtenir une fenêtre contextuelle à installer, vous pouvez également installer à partir du menu à 3 points dans le coin supérieur droit. Une fois la PWA installée, vous pouvez vous déconnecter complètement et vous pourrez toujours parcourir ou rechercher sur le site!
Pour l'utiliser dans votre propre instance, vous devrez éditer `static/sw.js` pour la liste des fichiers à mettre en cache. Techniquement, vous n'avez pas besoin de modifier `sw.js`, mais si même un seul fichier est manquant dans la liste de cache, la liste ne sera pas pré-mise en cache, elle ne sera donc mise en cache que pendant votre navigation.
Il existe un script npm pour générer la liste de cache de fichiers et la minification `npm run abridge`. Mon fichier `netlify.toml` exécute automatiquement ce script npm lors du déploiement du site, donc tout est automatique. Si Zola était capable de modéliser un fichier js, il serait peut-être possible de générer dynamiquement la liste des fichiers cache lors de la construction.
La fonctionnalité PWA est également facile à désactiver en définissant simplement `pwa = false` dans `config.toml`
## Optimisation des performances
### Fichiers Javascript
Tout javascript peut être désactivé dans `config.toml`:
```toml
build_search_index = false
js_bundle = false
js_copycode = false
js_email_encode = false
js_prestyle = false
js_switcher = false
pwa = false
```
Voici les fichiers javascript utilisés par Abridge :
- search_index.en.js: index de recherche généré par zola à chaque build pour elasticlunr.
- elasticlunr.min.js: bibliothèque de recherche pour la recherche côté client.
- search.js: pour utiliser elasticlunr depuis le champ de recherche de nos sites pour les suggestions et la page de résultats.
- email.js: utilise javascript pour masquer votre véritable adresse e-mail grâce à l'icône de courrier en bas de la page.
- codecopy.js: ajoutez un bouton Copier aux blocs de code, pour copier le contenu du bloc de code dans le presse-papiers.
- theme.js: petit script pour faciliter le stockage local du sélecteur de thème. (jamais groupé, toujours séparé)
- theme_button.js: petit script pour la fonction de changement de thème lorsque vous cliquez sur le bouton de changement de thème.
- prestyle.js: Utilisé pour précharger les fichiers CSS `<link rel="preload"` - ce script les change en `<link rel="stylesheet"` une fois le chargement de la page terminé, cela nous permet de charger des feuilles de style pour les polices externes , fontawesome ou katex de manière non bloquante.
- sw.js: il s'agit du fichier Service Worker pour la PWA.
- sw_load.js: ce fichier gère le chargement du Service Worker pour la PWA.
#### option js_bundle
`js_bundle` lorsqu'il est défini sur true sert un fichier bundle au lieu de tous les fichiers js individuels.
Tous les bundles nécessaires sont générés dynamiquement par le script de nœud [package_abridge.js](https://github.com/Jieiku/abridge/blob/master/package_abridge.js)
Le script de nœud analysera votre config.toml pour rechercher les valeurs de configuration pertinentes, puis, en fonction de votre config.tomnl, générera les bundles requis.
Tout ce qui est nécessaire est `zola build && npm run abridge`.
#### Changer de bibliothèque de recherche
En plus d'elasticlunr, abridge prend également en charge tinysearch et stork.
tinysearch démo: https://jieiku.github.io/abridge-tinysearch/
stork démo: https://jieiku.github.io/abridge-stork/
Pour utiliser tinysearch/stork, des étapes supplémentaires sont nécessaires.
**Basculer vers tinysearch:**
Vous devez d’abord installer tinysearch pour pouvoir créer l’index:
```bash
git clone https://github.com/tinysearch/tinysearch
cd tinysearch
cargo build --release
sudo cp ./target/release/tinysearch /usr/local/bin/tinysearch
exit # recharger l'environnement shell
```
Basculer Abridge vers tinysearch:
```bash
npm run tinysearch
zola build
tinysearch --optimize --path static public/data_tinysearch/index.html
# zola serve
```
**Basculer vers stork:**
Vous devez d’abord installer stork pour pouvoir construire l’index:
```bash
git clone https://github.com/jameslittle230/stork
cd stork
cargo build --release
sudo cp ./target/release/stork /usr/local/bin/stork
exit # recharger l'environnement shell
```
Remplacer Abréger par Cigogne:
```bash
npm run stork
zola build
stork build --input public/data_stork/index.html --output static/stork.st
# zola serve
```
**Basculer vers elasticlunr:**
```bash
npm run elasticlunr
```
**Basculer vers nosearch:**
```bash
npm run nosearch
```
#### Changeur de thème
Le sélecteur de thème s'appuie sur javascript pour fonctionner, il applique la classe .light au documentElement racine. Le fichier qui gère cela (`theme.js`) est petit et optimisé et c'est le premier fichier chargé dans la tête, donc l'impact sur les performances est minime. Sans le sélecteur de thème, vous pouvez toujours utiliser le thème automatique qui utilise les paramètres de préférence du navigateur/système d'exploitation. Vous pouvez même installer un [plugin Firefox](https://addons.mozilla.org/en-US/firefox/addon/theme-switcher-for-firefox/) pour basculer rapidement entre les deux.
### Optimiser les fichiers PNG/ICO
Bon outil pour générer des icônes masquables pour `manifest.json`: [maskable.app](https://maskable.app/editor)
Tous les fichiers png peuvent être optimisés à l'aide de [oxipng](https://github.com/shssoichiro/oxipng):
```bash
cd static
oxipng -o max --strip all -a -Z *.png
```
Avec des écrans plus grands et une plus grande densité de pixels devenant monnaie courante, c'est probablement une bonne idée d'utiliser au moins un peu de compression avec perte. Par exemple, vous pouvez utiliser pngquant avec une qualité de 93% et vous obtiendrez souvent des images environ la moitié de la taille. Comprenez que pngquant est cumulatif, vous devez donc conserver vos images originales quelque part et n'utiliser pngquant qu'une seule fois par image, si vous l'utilisez encore et encore sur la même image, vous réduirez la qualité de l'image à chaque fois. Utilisez toujours oxipng par la suite, l'oxipng est sans perte.
```bash
pngquant --skip-if-larger --strip --quality=93-93 --speed 1 *.png
oxipng -o max --strip all -a -Z *.png
```
leanify peut compresser davantage pour les fichiers png et ico:
```bash
git clone https://github.com/JayXon/Leanify
cd Leanify
make
sudo cp leanify /usr/local/bin/leanify
exit #lancer un nouveau terminal
leanify -i 7777 *.png
leanify -i 7777 *.ico
```
### Contenu pré-gzip/brotli
Si vous diffusez votre site avec nginx, vous pouvez pré-gzipper votre contenu.
(Netlify brotli compresse automatiquement vos fichiers, aucun travail supplémentaire n'est requis.)
Configurez d’abord nginx:
```bash
sudo nano /etc/nginx/nginx.conf
gzip on;
gzip_vary on;
gzip_proxied expired no-cache no-store private auth;
#gzip_proxied any;
gzip_comp_level 9;
gzip_buffers 64 16k;
#gzip_buffers 16 8k;
gzip_http_version 1.1;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript image/svg+xml application/xhtml+xml application/x-javascript application/x-font-ttf application/vnd.ms-fontobject font/opentype font/ttf font/eot font/otf;
#gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
```
Ensuite, vous pouvez gzip/brotli vos fichiers:
```bash
zola build
find ~/.dev/abridge/public -type f -regextype posix-extended -regex '.*\.(htm|html|css|js|xml|xsl|txt|woff|woff2|svg|otf|eot|ttf)' -exec gzip --best -k -f {} \+ -exec brotli --best -f {} \;
rsync -zvrh ~/.dev/abridge/public/ web:/var/www/abridge
```
Nginx n'est pas livré par défaut avec le support brotli, mais l'ajouter n'a pas été difficile.

454
content/overview-abridge/index.md Normal file
View file

@ -0,0 +1,454 @@
+++
title = "Abridge Zola Theme"
description = "Abridge is a fast and lightweight Zola theme using semantic html, abridge.css class-light CSS, and No Mandatory JS."
date = 2022-05-17
updated = 2023-07-21
draft = false
[taxonomies]
tags = ["Features","Config"]
[extra]
toc = true
series = "Features"
+++
A fast, lightweight, and modern [Zola](https://getzola.org) theme utilizing [abridge.css](https://github.com/Jieiku/abridge.css) (a class-light semantic HTML CSS Framework). Perfect [Lighthouse](https://pagespeed.web.dev/report?url=abridge.netlify.app), [YellowLabTools](https://yellowlab.tools/), and [Observatory](https://observatory.mozilla.org/analyze/abridge.netlify.app) scores. Here is a [Zola Themes Benchmarks](https://github.com/Jieiku/zola-themes-benchmarks/blob/main/README.md) Page.
<!-- more -->
![lighthouse](lighthouse.png)
## Features
- [X] Perfect [Lighthouse](https://pagespeed.web.dev/report?url=abridge.netlify.app), [YellowLabTools](https://yellowlab.tools/), and [Observatory](https://observatory.mozilla.org/analyze/abridge.netlify.app) scores.
- [X] [PWA support](#pwa-progressive-web-app) (Progressive Web Application).
- [X] All JavaScript can be [fully disabled](https://abridge.netlify.app/overview-abridge/#javascript-files).
- [X] Dark, Light, Auto, and Switcher themes. (colors can be customized, css variables)
- [X] Code [syntax highlighting](https://abridge.netlify.app/overview-code-blocks/). (colors can be customized, css variables)
- [X] Numbered code blocks with [line highlighting](https://abridge.netlify.app/overview-code-blocks/#toml).
- [X] Entirely Offline Site by using the PWA **or** by setting `offline = true` in `config.toml` (full search support).
- [X] Multi-language support.
- [X] Search support. (elasticlunr, tinysearch, stork)
- [X] Search Suggestions navigation keys, `/` focus, `arrow` move, `enter` select, `escape` close.
- [X] Search Results Page, type search query then hit `Enter Key` or `click` the search button icon.
- [X] [SEO](#seo-and-header-tags) support. (Search Engine Optimization)
- [X] [Pagination](#pagination) with numbered paginator on index.
- [X] Title Based Previous and Next Article links at bottom of Article.
- [X] Table of Contents in page Index (Optional, clickable links)
- [X] Recent Posts Block. (Optional)
- [X] Back to Top button. (uses css only)
- [X] Code Blocks copy button.
- [X] Email link in footer obfuscation. (anti-spam)
- [X] [KaTeX](https://katex.org/) support.
- [X] [Archive page](https://abridge.netlify.app/archive/).
- [x] [Tags](https://abridge.netlify.app/tags/).
- [x] Categories. (similar to Tags, disabled/commented out by default)
- [x] Social icon links in footer.
- [X] Responsive design. (mobile first)
- [X] Video Shortcodes: [Youtube](https://abridge.netlify.app/video-streaming-sites/overview-embed-youtube/), [Vimeo](https://abridge.netlify.app/video-streaming-sites/overview-embed-vimeo/), [Streamable](https://abridge.netlify.app/video-streaming-sites/overview-embed-streamable/).
- [X] Media Shortcodes: [video](https://abridge.netlify.app/overview-rich-content/#video), [img](https://abridge.netlify.app/overview-images/#img-shortcode), [imgswap](https://abridge.netlify.app/overview-images/#imgswap-shortcode), [image](https://abridge.netlify.app/overview-rich-content/#image), [gif](https://abridge.netlify.app/overview-rich-content/#gif), [audio](https://abridge.netlify.app/overview-rich-content/#audio).
- [X] Other Shortcodes: [showdata](https://abridge.netlify.app/overview-showdata/), [katex](https://abridge.netlify.app/overview-math/#usage-1).
## Quick Start
This theme requires version {{ showdata(src="https://raw.githubusercontent.com/Jieiku/abridge/master/theme.toml" key="min_version" type="toml") }} or later of [Zola](https://www.getzola.org/documentation/getting-started/installation/)
```bash
git clone https://github.com/jieiku/abridge.git
cd abridge
zola serve
# open http://127.0.0.1:1111/ in the browser
```
## Installation
The Quick Start shows how to run the theme directly. Next we will use abridge as a theme to a NEW site.
### 1: Create a new zola site
```bash
yes "" | zola init mysite
cd mysite
```
### 2: Install Abridge
Add the theme as a git submodule:
```bash
git init # if your project is a git repository already, ignore this command
git submodule add https://github.com/jieiku/abridge.git themes/abridge
git submodule update --init --recursive
git submodule update --remote --merge
```
Or clone the theme into your themes directory:
```bash
git clone https://github.com/jieiku/abridge.git themes/abridge
```
### 3: Configuration
Copy some files from the theme directory to your project's root directory:
```bash
rsync themes/abridge/.gitignore .gitignore
rsync themes/abridge/config.toml config.toml
rsync themes/abridge/content/_index.md content/
rsync -r themes/abridge/COPY-TO-ROOT-SASS/* sass/
rsync themes/abridge/netlify.toml netlify.toml
rsync themes/abridge/package_abridge.js package_abridge.js
rsync themes/abridge/package.json package.json
```
- `config.toml` base configuration with all config values.
- `content/_index.md` required to set pagination.
- `COPY-TO-ROOT-SASS/abridge.scss` overrides to customize Abridge variables.
- `netlify.toml` settings to deploy your repo with netlfiy.
- `package_abridge.js` node script to: update cache files list in PWA, minify js, bundle js
- `package.json` to switch between nosearch, elasticlunr, tinysearch, stork.
Uncomment the theme line in your project's root config.toml:
```bash
sed -i 's/^#theme = "abridge"/theme = "abridge"/' config.toml
```
### 4: Add new content
Copy the content from the theme directory to your project or make a new post:
```bash
rsync -r themes/abridge/content .
```
### 5: Run the project
Just run `zola serve` in the root path of the project:
```bash
zola serve
```
Zola will start the dev web server, accessible by default at `http://127.0.0.1:1111`.
Saved changes will live reload in the browser. (press `ctrl+f5`, or while developing set `pwa=false` in `config.toml`)
## Pagination
You can set the number of home page items by editing `content\_index.md` file and adjusting `paginate_by`
## Sass Overrides
Abridge SASS variables can be overrided by editing `sass\abridge.scss` file in your project's root sass folder.
### Page Width
```scss
$mw:75%,// max-width
```
### Abridge Theme Modes
```scss
$abridgeMode: "switcher",//valid values: switcher, auto, dark, light
```
- switcher: automatically displays a dark or light version depending on browser/OS settings, and has a javascript user clickable theme switcher.
- auto: automatically displays a dark or light version depending on browser/OS settings.
- dark: is the dark theme always.
- light: is the light theme always.
### Colors and Styles
You can specify which color template you want to use as a base:
```scss
$color: "orange",// color template to use/override: orange, blue, blueshade
```
Then override individual colors as needed:
```scss
/// Dark Colors
$f1d: #ccc,// Font Color Primary
$f2d: #ddd,// Font Color Headers
$c1d: #111,// Background Color Primary
$c2d: #222,// Background Color Secondary
...
```
### Footer Social Icons
You should configure which social icons you plan to use. (makes the css file size smaller)
To simply turn them all off you can set `$enable-icons: false` (disables ALL icons, navigation, search, etc.)
Otherwise enable only the icons you need, eg for mail you would set `$icon-mail: true`
You should then disable all the other icons that you do not use.
### Theme for noscript visits
If you have abridge configured to use the switcher mode instead of auto/dark/light, then your site will have a button that allows the visitor to toggle the theme.
If your visitor uses noscript or some other javascript blocking browser addon, then they will be stuck with whatever the configured default theme is for the switcher mode.
To adjust this mode you would set the following two config values in `abridge.scss` **AND** `config.toml`:
```scss
$switcherDefault: "dark",// default nojs switcher mode: dark, light (make sure to also set js_switcher_default in config.toml)
```
```toml
js_switcher_default = "dark" # default nojs switcher mode: dark, light (make sure to also set $switcherDefault in abridge.scss)
```
By default abridge uses dark mode for the switcher, so unless you want to set the default mode to light for nojs/noscript visitors, then you do not need to worry about these settings.
## Config.toml Configuration
Most Options in `config.toml` are self documenting. (obvious between name of config value and comments)
Abridge will work with a barebones `config.toml` because default values are provided in the template files.
I recommend copying the entire config.toml file as outlined in Step 3 as it provides all configurable values.
### Top and Footer menus
Set a field in `extra` with a key of `menu` and `menu_footer`.
If you want the link to open in a new tab/browser then set `blank = true`.
size: s150, s140, s130, s120, s110, s95, s90, s85, s80, s75, s70, false(full size)
If a link should have a trailing slash at the end of the url set `slash = true`.
(generally all links should have a trailing slash unless its a file link such as `sitemap.xml`)
```toml
menu = [
{url = "about", name = "About", slash = true, blank = false, size="s110"},
{url = "posts", name = "Posts", slash = true, blank = false, size="s110"},
{url = "categories", name = "Categories", slash = true, blank = false, size="s110"},
{url = "tags", name = "Tags", slash = true, blank = false, size="s110"},
]
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},
]
```
### SEO and Header Tags
You can review the SEO tags in the seo macro located at `templates/macros/seo.html`, all configurable values should be in `config.toml` under `config.extra` or in the content markdown files.
In your post markdown file you should set a title less than 60 characters and a description between 80 and 160 characters in length. The description is what is displayed in search results below the page title. Anywhere that you do not set a page description, the primary site config.description will be used instead.
You should also set page specific keywords unless your keywords defined in config.toml suffice, any keywords that you add to the page are in addition to the ones defined in config.toml, so do not add those same keywords to your page keywords.
You can optionally also set a page specific image for search results by using page.extra.thumbnail. Facebook, Twitter, and OpenGraph Cards are supported (automatic image & description for posted links). OpenGraph recommends 1200 x 630 (1.9:1). Twitter recommends 2:1 for large and 1:1 for small. If you do not set a page specific thumbnail then the banner defined in config.toml will be used instead.
Refer to [overview-images](https://raw.githubusercontent.com/Jieiku/abridge/master/content/overview-images/index.md) for an example:
```md
+++
title = "Image Shortcodes"
description = "Images can be embedded directly using markdown `![Ferris](ferris.svg)`, but using a shortcode prevents CLS by explicitly setting the width and height."
date = 2021-05-19
draft = false
[taxonomies]
tags = ["Features","Shortcodes","Images"]
[extra]
toc = true
keywords = "Image, Markdown, Shortcodes, Swap"
thumbnail = "ferris-gesture.png"
+++
```
### KaTeX Math Notation
KaTeX can be used to display complex mathematics, it is a "Fast math typesetting for the web."
You can see a demo on [this page](https://abridge.netlify.app/overview-math/).
For better performance I recommend only enabling math on a [per page bases in your post.md files](https://github.com/Jieiku/abridge/blob/master/content/overview-math.md?plain=1#L11-L13), instead of in your main config.toml file.
### PWA, Progressive Web App
Abridge theme has PWA support. You can install the entire site as an app and have it work offline. To try it out simply use google chrome or your phone and go here: [abridge.netlify.app](https://abridge.netlify.app/)
If using Chrome on desktop then look at the end of the address bar for the install button. On Android you should get a popup to install, you can also install from the 3 dot menu in the top right corner. Once you have the PWA installed, you can go completely offline and you will still be able to browse or search the site!
There is an npm script to generate the file cache list and minification `npm run abridge`. My [netlify.toml](https://github.com/Jieiku/abridge/blob/master/netlify.toml) file automatically runs this npm script during site deployment, so everything is automatic. If Zola was able to template a js file then it might be possible to generate the list of cache files dynamically at build instead of relying on node/npm.
To use a specific list of files instead of all files edit the `pwa_BASE_CACHE_FILES` entry in `config.toml`. If even a single file in the cache list is missing then it wont pre cache the list, so it will only cache as you browse. (If just initially setting up, test with only a couple pages.)
The PWA feature is also easy to disable by simply setting `pwa = false` in `config.toml`
## Performance Optimization
### Javascript files
All javascript can be disabled in `config.toml`:
```toml
build_search_index = false
js_bundle = false
js_copycode = false
js_email_encode = false
js_prestyle = false
js_switcher = false
pwa = false
```
These are the javascript files used by Abridge:
- search_index.en.js: search index generated by zola at each build for elasticlunr.
- elasticlunr.min.js: search library for client side searching.
- search.js: to make use of elasticlunr from our sites search box for both suggestions and the results page.
- email.js: uses javascript to obfuscate your real email address for the mail icon at the bottom of the page.
- codecopy.js: add a Copy Button to code blocks, to copy contents of the code block to clipboard.
- theme.js: tiny script to facilitate local storage for the theme switcher. (never bundle, always separate)
- theme_button.js: tiny script for the theme switcher function when you click the theme switch button.
- prestyle.js: Used to preload css files `<link rel="preload"` - this script changes these to `<link rel="stylesheet"` once the page has finished loading, this allows us to load stylesheets for external fonts, fontawesome, or katex in a non blocking fashion.
- sw.js: this is the Service Worker file for the PWA.
- sw_load.js: this file handles loading the Service Worker for the PWA.
#### js_bundle option
`js_bundle` when set to true serves a bundle file instead of all of the individual js files.
All necessary bundles are dynamically generated by the node script [package_abridge.js](https://github.com/Jieiku/abridge/blob/master/package_abridge.js)
The node script will scan your config.toml for relevant config values, and then based on your config.tomnl generate your required bundles.
All that is necessary is `zola build && npm run abridge`.
#### Switch Search Library
In addition to elasticlunr abridge also supports tinysearch and stork.
tinysearch demo: https://jieiku.github.io/abridge-tinysearch/
stork demo: https://jieiku.github.io/abridge-stork/
To use tinysearch/stork extra steps are required.
**Switch to tinysearch:**
First you have to install tinysearch so that you can build the index:
```bash
git clone https://github.com/tinysearch/tinysearch
cd tinysearch
cargo build --release
sudo cp ./target/release/tinysearch /usr/local/bin/tinysearch
exit # reload shell environment
```
Switch Abridge to tinysearch:
```bash
npm run tinysearch
zola build
tinysearch --optimize --path static public/data_tinysearch/index.html
# zola serve
```
**Switch to stork:**
First you have to install stork so that you can build the index:
```bash
git clone https://github.com/jameslittle230/stork
cd stork
cargo build --release
sudo cp ./target/release/stork /usr/local/bin/stork
exit # reload shell environment
```
Switch Abridge to stork:
```bash
npm run stork
zola build
stork build --input public/data_stork/index.html --output static/stork.st
# zola serve
```
**Switch to elasticlunr:**
```bash
npm run elasticlunr
```
**Switch to nosearch:**
```bash
npm run nosearch
```
#### Theme-Switcher
The theme switcher relies on javascript to work, it applies the .light class to the root documentElement. The file that handles this (`theme.js`) is tiny and optimized and it is the first file loaded in the head, so the performance hit is minimal. Without the Theme switcher you can still use The automatic Theme which uses the Browser/OS preference settings. You can even install a [Firefox plugin](https://addons.mozilla.org/en-US/firefox/addon/theme-switcher-for-firefox/) to quickly switch between the two.
### Optimize PNG/ICO files
Good tool to generate maskable icons for `manifest.json`: [maskable.app](https://maskable.app/editor)
All png files can be optimized using [oxipng](https://github.com/shssoichiro/oxipng):
```bash
cd static
oxipng -o max --strip all -a -Z *.png
```
With larger displays and greater pixel density becoming common it is probably a good idea to use atleast a littly bit of lossy compression. For example you can use pngquant with a 93% quality and you will often get images around 1/2 the size. Understand that pngquant is cumulative, so you should keep your original images somewhere, and only ever use pngquant once per image, if you use it again and again on the same image then you will lower the image quality each time. Always use oxipng afterwards, oxipng is lossless.
```bash
pngquant --skip-if-larger --strip --quality=93-93 --speed 1 *.png
oxipng -o max --strip all -a -Z *.png
```
leanify can compress farther for both png and ico files:
```bash
git clone https://github.com/JayXon/Leanify
cd Leanify
make
sudo cp leanify /usr/local/bin/leanify
exit #launch new terminal
leanify -i 7777 *.png
leanify -i 7777 *.ico
```
### Pre gzip/brotli content
If you are serving your site with nginx, you can pre gzip your content.
(Netlify brotli gzips your files automatically, no exta work required.)
First configure nginx:
```bash
sudo nano /etc/nginx/nginx.conf
gzip on;
gzip_vary on;
gzip_proxied expired no-cache no-store private auth;
#gzip_proxied any;
gzip_comp_level 9;
gzip_buffers 64 16k;
#gzip_buffers 16 8k;
gzip_http_version 1.1;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript image/svg+xml application/xhtml+xml application/x-javascript application/x-font-ttf application/vnd.ms-fontobject font/opentype font/ttf font/eot font/otf;
#gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
```
Then you can gzip/brotli your files:
```bash
zola build
find ~/.dev/abridge/public -type f -regextype posix-extended -regex '.*\.(htm|html|css|js|xml|xsl|txt|woff|woff2|svg|otf|eot|ttf)' -exec gzip --best -k -f {} \+ -exec brotli --best -f {} \;
rsync -zvrh ~/.dev/abridge/public/ web:/var/www/abridge
```
Nginx does not come by default with brotli support, but adding it was not difficult.

BIN
content/overview-abridge/lighthouse.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.5 KiB

387
content/overview-code-blocks.fr.md Normal file
View file

@ -0,0 +1,387 @@
+++
title = "Blocs de code et thème"
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]
tags = ["Features","Markdown"]
[extra]
keywords = "Code, Code Blocks, Syntax, Syntax Highlighting, Theme"
toc = true
series = "Features"
+++
Cet article présente différents Code Blocks permettant de comparer facilement des thèmes sublimes.
<!-- more -->
## 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
fn main() {
let greetings = ["Hello", "Hola", "Bonjour",
"Ciao", "こんにちは", "안녕하세요",
"Cześć", "Olá", "Здравствуйте",
"Chào bạn", "您好", "Hallo",
"Hej", "Ahoj", "سلام",
"Hej", "Hallo", "Hei",
"Helló", "Hallo", "Buna ziua",
"Merhaba"];
for (num, greeting) in greetings.iter().enumerate() {
print!("{} : ", greeting);
match num {
0 => println!("This code is editable and runnable!"),//en English
1 => println!("¡Este código es editable y ejecutable!"),//es Spanish
2 => println!("Ce code est modifiable et exécutable !"),//fr French
3 => println!("Questo codice è modificabile ed eseguibile!"),//it Italian
4 => println!("このコードは編集して実行出来ます！"),//jp Japanese
5 => println!("여기에서 코드를 수정하고 실행할 수 있습니다!"),//ko Korean
6 => println!("Ten kod można edytować oraz uruchomić!"),//pl Polish
7 => println!("Este código é editável e executável!"),//pt Portuguese
8 => println!("Этот код можно отредактировать и запустить!"),//ru Russian
9 => println!("Bạn có thể edit và run code trực tiếp!"),//vi Vietnamese
10 => println!("这段代码是可以编辑并且能够运行的！"),//zh Chinese
11 => println!("Dieser Code kann bearbeitet und ausgeführt werden!"),//de German
12 => println!("Den här koden kan redigeras och köras!"),//sv Swedish
13 => println!("Tento kód můžete upravit a spustit"),//cs Czech
14 => println!("این کد قابلیت ویرایش و اجرا دارد!"),//fa Persian
15 => println!("Denne kode kan redigeres og køres!"),//da Danish
16 => println!("Deze code is bewerkbaar en uitvoerbaar!"),//du Dutch
17 => println!("Tämä koodi on muokattavissa ja ajettavissa!"),//fi Finnish
18 => println!("Ez a kód szerkeszthető és futtatható!"),//hu Hungarian
19 => println!("Denne koden er redigerbar og kjørbar!"),//no Norwegian
20 => println!("Acest cod este editabil și rulabil!"),//ro Romanian
21 => println!("Bu kod düzenlenebilir ve çalıştırılabilir!"),//tr Turkish
_ => {},
}
}
}
```
### Bash
```bash
#!/bin/bash
for d in /sys/kernel/iommu_groups/*/devices/*; do
n=${d#*/iommu_groups/*}; n=${n%%/*}
printf 'IOMMU Group %s ' "$n"
lspci -nns "${d##*/}"
done
```
### 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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example HTML5 Document</title>
</head>
<body>
<!--Main Content Area-->
<p>Test</p>
</body>
</html>
```
### CSS
```css
html {
font-size: var(--fs);
}
.c {
text-align: center;
}
```
### SCSS
```scss
$font: Roboto system-ui -apple-system BlinkMacSystemFont "Segoe UI" Oxygen Ubuntu Cantarell "Fira Sans" "Droid Sans" "Helvetica Neue" "Noto Sans" Helvetica Arial sans-serif !default;
$font-mono: ui-monospace Menlo Monaco Consolas "SF Mono" "Cascadia Mono" "Segoe UI Mono" "DejaVu Sans Mono" "Liberation Mono" "Roboto Mono" "Oxygen Mono" "Ubuntu Monospace" "Ubuntu Mono" "Source Code Pro" "Fira Mono" "Droid Sans Mono" "Courier New" Courier monospace !default;
@mixin font {
// convert space separated list to comma separated list
$font: list.join($font, "", $separator: comma);
$font: functions.remove($font, "");
$font-mono: list.join($font-mono, "", $separator: comma);
$font-mono: functions.remove($font-mono, "");
$font: functions.font-var($font, $fontExt-Main, $findFont-Main);
$font-mono: functions.font-var($font-mono, $fontExt-Code, $findFont-Code);
#{--ff}: $font;
#{--fm}: $font-mono;//code
}
```
### 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 = '<h2><button type="button" title="Close Search" onclick="closeSearch()"><i class="svgs x"></i></button> <i class="svgs search"></i> '.concat(document.getElementById("searchinput").value, "</h2>");
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
<?php
/**
* Postfix Admin
*/
require_once('common.php');
$CONF = Config::getInstance()->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 <stdio.h>
int main() {
int a;
/* actual initialization */
a = 10;
printf("Hello, World!");
return 0;
}
```
### C++
```cpp
// Your First C++ Program
#include <iostream>
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 <a href="https://metrics.example.com">Dashboard</a>'
elif humidity > 55:
emailSubject = "Humidity>55: " + str(int(humidity)) + "%H"
emailContent = 'Humidity: ' + str(int(humidity)) + '%H , Temperature: ' + str(int(tempF)) + 'F <a href="https://metrics.example.com">Dashboard</a>'
elif tempF > 90:
emailSubject = "Temperature>90: " + str(int(tempF)) + "F"
emailContent = 'Humidity: ' + str(int(humidity)) + '%H , Temperature: ' + str(int(tempF)) + 'F <a href="https://metrics.example.com">Dashboard</a>'
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)
```
### Ruby
```ruby
=begin
Ruby program to check whether the
year is leap year or not between range.
=end
puts "Enter the lower limit:"
lwr = gets.chomp.to_i
puts "Enter the upper limit:"
upr = gets.chomp.to_i
for yr in lwr..upr do
if yr % 400 == 0
puts "#{yr} is a leap year"
elsif yr % 4 == 0 && yr % 100 !=0
puts "#{yr} is a leap year"
else
puts "#{yr} is not a leap year"
end
end
```

387
content/overview-code-blocks.md Normal file
View file

@ -0,0 +1,387 @@
+++
title = "Code Blocks Theme"
description = "Sample article showcasing syntax highlighting and formatting for Code Blocks with a custom theme."
date = 2022-05-16
draft = false
[taxonomies]
tags = ["Features","Markdown"]
[extra]
keywords = "Code, Code Blocks, Syntax, Syntax Highlighting, Theme"
toc = true
series = "Features"
+++
This article shows various Code Blocks allowing to easily compare sublime themes.
<!-- more -->
## Code Blocks
Code blocks.. ❤️ with automatic syntax highlighting ✨‍
See [the docs](https://www.getzola.org/documentation/content/syntax-highlighting/) for options.
### Inline Code block
If we want, we can also `specify inline code` which is useful for `the small stuff`.
### Rust
```rust
fn main() {
let greetings = ["Hello", "Hola", "Bonjour",
"Ciao", "こんにちは", "안녕하세요",
"Cześć", "Olá", "Здравствуйте",
"Chào bạn", "您好", "Hallo",
"Hej", "Ahoj", "سلام",
"Hej", "Hallo", "Hei",
"Helló", "Hallo", "Buna ziua",
"Merhaba"];
for (num, greeting) in greetings.iter().enumerate() {
print!("{} : ", greeting);
match num {
0 => println!("This code is editable and runnable!"),//en English
1 => println!("¡Este código es editable y ejecutable!"),//es Spanish
2 => println!("Ce code est modifiable et exécutable !"),//fr French
3 => println!("Questo codice è modificabile ed eseguibile!"),//it Italian
4 => println!("このコードは編集して実行出来ます！"),//jp Japanese
5 => println!("여기에서 코드를 수정하고 실행할 수 있습니다!"),//ko Korean
6 => println!("Ten kod można edytować oraz uruchomić!"),//pl Polish
7 => println!("Este código é editável e executável!"),//pt Portuguese
8 => println!("Этот код можно отредактировать и запустить!"),//ru Russian
9 => println!("Bạn có thể edit và run code trực tiếp!"),//vi Vietnamese
10 => println!("这段代码是可以编辑并且能够运行的！"),//zh Chinese
11 => println!("Dieser Code kann bearbeitet und ausgeführt werden!"),//de German
12 => println!("Den här koden kan redigeras och köras!"),//sv Swedish
13 => println!("Tento kód můžete upravit a spustit"),//cs Czech
14 => println!("این کد قابلیت ویرایش و اجرا دارد!"),//fa Persian
15 => println!("Denne kode kan redigeres og køres!"),//da Danish
16 => println!("Deze code is bewerkbaar en uitvoerbaar!"),//du Dutch
17 => println!("Tämä koodi on muokattavissa ja ajettavissa!"),//fi Finnish
18 => println!("Ez a kód szerkeszthető és futtatható!"),//hu Hungarian
19 => println!("Denne koden er redigerbar og kjørbar!"),//no Norwegian
20 => println!("Acest cod este editabil și rulabil!"),//ro Romanian
21 => println!("Bu kod düzenlenebilir ve çalıştırılabilir!"),//tr Turkish
_ => {},
}
}
}
```
### Bash
```bash
#!/bin/bash
for d in /sys/kernel/iommu_groups/*/devices/*; do
n=${d#*/iommu_groups/*}; n=${n%%/*}
printf 'IOMMU Group %s ' "$n"
lspci -nns "${d##*/}"
done
```
### TOML
```toml,linenos,hl_lines=3
base_url = "https://abridge.netlify.app/"
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"
#theme = "abridge"
build_search_index = true
minify_html = false
feed_filename = "atom.xml"
taxonomies = [
{name = "categories", feed = true},
{name = "tags", feed = true},
]
```
### HTML
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example HTML5 Document</title>
</head>
<body>
<!--Main Content Area-->
<p>Test</p>
</body>
</html>
```
### CSS
```css
html {
font-size: var(--fs);
}
.c {
text-align: center;
}
```
### SCSS
```scss
$font: Roboto system-ui -apple-system BlinkMacSystemFont "Segoe UI" Oxygen Ubuntu Cantarell "Fira Sans" "Droid Sans" "Helvetica Neue" "Noto Sans" Helvetica Arial sans-serif !default;
$font-mono: ui-monospace Menlo Monaco Consolas "SF Mono" "Cascadia Mono" "Segoe UI Mono" "DejaVu Sans Mono" "Liberation Mono" "Roboto Mono" "Oxygen Mono" "Ubuntu Monospace" "Ubuntu Mono" "Source Code Pro" "Fira Mono" "Droid Sans Mono" "Courier New" Courier monospace !default;
@mixin font {
// convert space separated list to comma separated list
$font: list.join($font, "", $separator: comma);
$font: functions.remove($font, "");
$font-mono: list.join($font-mono, "", $separator: comma);
$font-mono: functions.remove($font-mono, "");
$font: functions.font-var($font, $fontExt-Main, $findFont-Main);
$font-mono: functions.font-var($font-mono, $fontExt-Code, $findFont-Code);
#{--ff}: $font;
#{--fm}: $font-mono;//code
}
```
### 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 = '<h2><button type="button" title="Close Search" onclick="closeSearch()"><i class="svgs x"></i></button> <i class="svgs search"></i> '.concat(document.getElementById("searchinput").value, "</h2>");
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
<?php
/**
* Postfix Admin
*/
require_once('common.php');
$CONF = Config::getInstance()->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 <stdio.h>
int main() {
int a;
/* actual initialization */
a = 10;
printf("Hello, World!");
return 0;
}
```
### C++
```cpp
// Your First C++ Program
#include <iostream>
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 <a href="https://metrics.example.com">Dashboard</a>'
elif humidity > 55:
emailSubject = "Humidity>55: " + str(int(humidity)) + "%H"
emailContent = 'Humidity: ' + str(int(humidity)) + '%H , Temperature: ' + str(int(tempF)) + 'F <a href="https://metrics.example.com">Dashboard</a>'
elif tempF > 90:
emailSubject = "Temperature>90: " + str(int(tempF)) + "F"
emailContent = 'Humidity: ' + str(int(humidity)) + '%H , Temperature: ' + str(int(tempF)) + 'F <a href="https://metrics.example.com">Dashboard</a>'
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)
```
### Ruby
```ruby
=begin
Ruby program to check whether the
year is leap year or not between range.
=end
puts "Enter the lower limit:"
lwr = gets.chomp.to_i
puts "Enter the upper limit:"
upr = gets.chomp.to_i
for yr in lwr..upr do
if yr % 400 == 0
puts "#{yr} is a leap year"
elsif yr % 4 == 0 && yr % 100 !=0
puts "#{yr} is a leap year"
else
puts "#{yr} is not a leap year"
end
end
```

1
content/overview-images/corro.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 489" width="600" height="489"><g fill="#8f1f1d"><path d="M70 324c1 3 3 4 6 4l24 4 2 5-10 20v5l7 4 24-1 4 4-7 21c0 2 0 4 3 6 1 2 4 2 7 2l24-5 4 4-1 22c-1 2 0 4 3 5h6l23-8 6 3 4 22c0 2 1 3 3 4h7l21-13 6 2 8 20 5 5c3 0 5 0 7-2l18-15h5l13 18c1 2 3 4 6 4l5-3 14-18h6l17 16c1 1 4 2 6 1 3 0 5-1 6-3l9-21 6-1 19 14h7c3 0 5-3 5-5l4-21 6-2 22 9 7-1c2-1 3-2 3-5v-21l5-4 24 6c3 0 5 0 6-2 2-2 3-4 2-6l-4-21 3-5 24 2c4 0 6 0 7-3v-5l-9-21 3-5 25-2 5-5-1-5-14-18c0-1-1-19-12-33v-1c-26-36-106-64-201-65-100-2-184 26-206 64-10 10-12 26-11 26l-15 17c-1 3-2 5-1 7z"/><path d="M565 247c-1-3-12-2-14-3l-38 1-4-7 26-38c1-2 7-7 6-9-3-3-12 1-14 1l-39 7-4-6 22-49c0-3 7-15 5-18-2-2-11 6-13 6l-43 28-4-5 11-43c0-3 7-18 5-19-2-2-9 5-12 6l-38 30-5-4 9-51c0-3 3-18 1-19s-15 13-17 14l-30 38-6-3-3-56c0-3 0-14-3-14-3-1-5 8-8 11l-25 50-7-1-13-57c-1-3-2-12-4-12-4 0-5 10-7 13l-15 56-7 1-22-52c-1-2-4-12-7-12-3 1-2 9-3 12l-7 61-6 3-19-27c-3-1-15-19-18-18-2 1 0 21-1 23l1 40-6 4-36-35c-3-1-7-7-10-5-2 2 0 10 0 13l13 53-4 5-41-26c-2-1-10-7-12-4-2 2 3 4 3 7l22 56-5 6-65-22c-3-1-10-5-12-1-1 2 5 6 6 9l49 53-3 7-47-6c-3 0-9-1-11 1-1 4 6 7 7 9l36 40a116 116 0 0 0 14 46c27 50 110 87 209 87 105 0 193-41 214-95 11-15 13-37 12-38l29-31c2-4 9-9 8-11z"/><path d="m99 289-67 10c-13 3-5 5 0 6 14 2 84 3 85 4zm402 3 67 10c13 4 5 6 0 6-14 2-84 5-86 5z"/></g><path d="M227 293s-24-26-47 0c0 0-18 35 0 52 0 0 30 24 47 0 0 0 21-20 0-52z"/><path fill="#fff" d="M200 302c0 11 6 19 14 19 7 0 12-8 12-19 0-10-5-18-12-18-8 0-14 8-14 18z"/><path d="M360 283s-40-17-52 22c0 0-11 47 33 49 0 0 58-10 19-71z"/><path fill="#fff" d="M339 299c0 10 7 20 14 20 8 0 14-10 14-20s-6-18-14-18c-7 0-14 8-14 18z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
content/overview-images/ferris-gesture.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 6.5 KiB

1
content/overview-images/ferris-gesture.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 400" width="600" height="400"><path fill="#a52b00" d="M327 173c-57 0-109 7-148 18v-3c-39 13-64 30-64 50l2 9-4 7s-3 4 2 13a1191 1191 0 0 0 54 67c0-1-4-16-15-34l-16-31c11 7 25 13 41 18 39 11 91 18 148 18 66 0 124-9 164-23v-86c-40-14-98-23-164-23m223 79-7-14v-1c0-16-16-31-44-42v84c13-6 24-12 31-18-2 9-10 26-16 39-9 18-13 34-13 34a1239 1239 0 0 0 46-69c6-9 3-13 3-13"/><path fill="#f74c00" d="m589 252-44-32-1-5 14-21c2-2 2-5 1-7s-3-4-6-5l-24-4-3-6 10-23v-7c-2-3-4-4-7-4l-25 1-4-5 6-25c1-3 0-5-2-7s-4-3-7-2l-24 6-5-4 1-26c0-3-1-6-3-7s-5-2-7-1l-23 11-5-3-4-26c-1-2-2-4-5-5-2-1-5-1-7 1l-20 15-6-2-8-24c-1-3-3-5-6-5-2-1-5 0-7 2l-17 19-6-1-13-22c-1-2-4-3-6-3-3 0-5 1-6 3l-13 22-7 1-16-19a7 7 0 0 0-13 3l-8 24-6 2-20-15c-3-2-5-2-8-1-2 1-4 3-4 5l-4 26-5 3-23-11c-2-1-5 0-7 1s-3 4-3 7l1 26-5 4-24-6c-3-1-6 0-7 2-2 2-3 4-2 7l5 25-3 5-25-1c-3 0-5 1-7 4v7l10 23-3 6-24 4c-3 1-5 3-6 5s-1 5 1 7l14 21v1l-41 44s-6 5 3 17a1639 1639 0 0 0 87 88c2-1-4-20-22-43-14-21-32-53-28-56 0 0 5-6 14-11 1 0 0 0 0 0s206 95 397 2c22-4 35 8 35 8 4 2-7 35-17 56a98 98 0 0 0-14 45l12-19c17-23 49-68 55-79 7-12 0-16 0-16"/><path d="m398 312 1-1-67-6c55-73 99-14 103-8v15z"/><path fill="#f74c00" d="M139 232s-55-21-65-44c0 0 65-52-13-107l-2 70s-23-23-22-62c0 0-72 35 12 96 0 0 3 33 79 73z"/><path d="M365 203s21-23 41 0c0 0 16 30 0 45 0 0-26 21-41 0 0 0-18-17 0-45"/><path fill="#fff" d="M389 211c0 9-5 16-12 16-6 0-11-7-11-16s5-16 11-16c7 0 12 7 12 16"/><path d="M273 197s35-16 45 19c0 0 10 40-29 43 0 0-50-10-16-62"/><path fill="#fff" d="M291 211c0 9-5 16-12 16s-12-7-12-16 5-17 12-17 12 8 12 17"/><path fill="#f74c00" d="M501 241s-7 29-53 60l-13 3s-41-76-100 10c0 0 18-11 67 2 0 0-22 35-68 34 0 0 44 52 110-24 0 0 70-27 76-85z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 1.7 KiB

1
content/overview-images/ferris-happy.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 400" width="600" height="400"><path fill="#a52b00" d="m505 250-6-13v-1c0-15-15-28-40-38v9l-7-3v-4c-36-13-89-21-147-21-52 0-99 6-133 16v14-17c-36 11-58 27-58 44l2 9-4 6s-3 4 2 12a1069 1069 0 0 0 48 60c1-1-3-15-13-30l-14-28c9 6 65 34 179 34 116-1 167-37 173-42-2 8-9 24-14 35-9 17-12 31-12 31l8-11c10-15 30-43 34-51s2-11 2-11"/><path fill="#f74c00" d="m540 250-40-30-1-4 13-18c1-2 2-5 1-7s-3-4-5-4l-22-4-3-5 9-21v-7c-1-2-4-3-6-3l-22 1-4-5 5-22c1-3 0-5-1-7l-7-2-21 6-5-4 1-23c0-3-1-5-3-6s-4-2-6-1l-20 10-5-3-4-23c0-2-2-4-4-5s-4-1-6 1l-18 13-6-1-8-22c0-2-2-4-4-4-3-1-5 0-6 2l-16 17-5-1-12-20c-1-2-3-3-6-3-2 0-4 1-5 3l-12 20-5 1-16-17a6 6 0 0 0-11 2l-7 22-6 1-18-13c-2-2-4-2-6-1s-4 3-4 5l-4 23-5 3-20-10c-2-1-5 0-6 1-2 1-3 3-3 6v23l-4 4-22-6-6 2c-1 2-2 4-1 7l5 22-4 5-22-1c-3 0-5 1-6 3v7l9 21-3 5-22 4c-2 0-4 2-5 4s0 5 1 7l13 18v1l-37 40s-6 4 2 14a1471 1471 0 0 0 79 80c1-1-4-18-20-39-13-18-29-47-25-50 0 0 4-6 13-10 0 0-1 0 0 0 0 0 185 85 356 2 20-4 31 7 31 7 4 2-6 31-15 51-12 22-13 39-12 40l11-17 49-71c6-11 0-14 0-14"/><path fill="#f74c00" d="M459 239s27-2 61-37l5-11s-54-54 30-91c0 0-7 12-5 58 0 0 26-8 33-50 0 0 37 49-40 95 0 0-36 58-88 53z"/><path d="M338 205s19-20 37 0c0 0 15 27 0 41 0 0-23 18-37 0 0 0-15-15 0-41"/><path fill="#fff" d="M360 213c0 7-5 14-10 14-6 0-11-7-11-14 0-8 5-15 11-15 5 0 10 7 10 15"/><path d="M256 200s32-14 40 17c0 0 9 36-26 38 0 0-44-8-14-55"/><path fill="#fff" d="M272 213c0 8-5 15-11 15s-10-7-10-15 4-15 10-15 11 7 11 15"/><path d="m297 268 40-3s-1 6-7 11c0 0-13 16-29-1 0 0-3-3-4-7"/><path fill="#f74c00" d="M135 231h-1c-13-3-50-13-60-28 0 0 50-57-28-93l9 63s-24-16-29-51c0 0-58 42 26 83 0 0 8 28 81 51a12 12 0 0 0 14-13c0-7-5-12-12-12"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 1.7 KiB

1
content/overview-images/ferris.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 400" width="600" height="400"><path fill="#a52b00" d="M299 179c-61 0-116 7-157 19v101c41 12 96 20 157 20 69 0 131-10 173-25v-91c-42-15-104-24-173-24m235 82-7-15v-1c0-17-17-32-46-45v89c13-6 24-12 32-19-2 9-10 28-16 42-11 19-14 35-14 36l9-14 40-59c5-9 2-14 2-14M75 246l1 9-4 8s-3 4 3 14a1259 1259 0 0 0 56 70c1-1-4-17-16-35l-16-33c11 7 26 13 43 19V194c-42 13-67 31-67 52"/><path fill="#f74c00" d="m576 261-47-34-1-5 15-22c2-2 2-5 1-8-1-2-3-4-6-5l-26-4-3-6 11-25c1-3 1-6-1-8-1-2-4-4-7-4l-26 1-4-5 6-27c1-2 0-5-2-7s-5-3-7-2l-26 6-5-4 1-28c0-3-1-5-3-7-3-1-5-2-8 0l-24 11-6-3-4-27c0-3-2-5-5-6-2-2-5-1-7 0l-21 16-7-2-9-25c-1-3-3-5-6-5-2-1-5 0-7 2l-18 20h-6l-14-24c-1-2-4-4-7-4-2 0-5 2-6 4l-14 24h-7l-17-20a8 8 0 0 0-13 3l-10 25-6 2-21-16c-2-1-5-2-8 0-2 1-4 3-4 6l-5 27-5 3-24-11c-3-2-6-1-8 0-2 2-3 4-3 7l1 28-5 4-26-6c-3-1-5 0-7 2s-3 5-2 7l6 27-4 5-27-1c-2 0-5 2-6 4-2 2-2 5-1 8l11 25-3 6-26 4c-3 1-5 3-6 5-1 3-1 6 1 8l15 22v1l-44 46s-6 6 4 18a1732 1732 0 0 0 92 94c1-1-4-22-24-46-15-22-34-56-29-60 0 0 5-6 15-11 0 1 0 0 0 0s218 101 420 2c23-4 37 8 37 8 4 3-8 37-18 60-14 26-16 46-15 47s6-7 13-19l58-84c7-13 0-17 0-17"/><path d="m225 325-1-1 71-5c-58-77-105-16-110-9v15zm149 0 1-1-69-5c59-80 102-17 107-10v16z"/><path fill="#f74c00" d="M483 249s-8 31-56 63l-14 3s-44-80-106 10c0 0 19-11 71 3 0 0-23 37-72 35 0 0 47 56 117-24 0 0 74-29 80-90z"/><path d="M339 209s21-24 43 0c0 0 17 32 0 47 0 0-28 23-43 0 0 0-19-17 0-47"/><path fill="#fff" d="M364 218c0 9-6 16-12 16-7 0-13-7-13-16 0-10 6-17 13-17 6 0 12 7 12 17"/><path d="M242 202s37-16 47 21c0 0 11 43-31 45 0 0-52-10-16-66"/><path fill="#fff" d="M260 217c0 10-5 18-12 18s-13-8-13-18c0-9 6-17 13-17s12 8 12 17"/><path fill="#f74c00" d="M221 331c46-6 72-6 72-6-61-81-111-8-111-8-13-4-25-22-35-38l-38-11c44 75 77 76 77 76 68 87 100 17 100 17-38-4-65-30-65-30"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 1.8 KiB

1
content/overview-images/img/ferris-gesture.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 400" width="600" height="400"><path fill="#a52b00" d="M327 173c-57 0-109 7-148 18v-3c-39 13-64 30-64 50l2 9-4 7s-3 4 2 13a1191 1191 0 0 0 54 67c0-1-4-16-15-34l-16-31c11 7 25 13 41 18 39 11 91 18 148 18 66 0 124-9 164-23v-86c-40-14-98-23-164-23m223 79-7-14v-1c0-16-16-31-44-42v84c13-6 24-12 31-18-2 9-10 26-16 39-9 18-13 34-13 34a1239 1239 0 0 0 46-69c6-9 3-13 3-13"/><path fill="#f74c00" d="m589 252-44-32-1-5 14-21c2-2 2-5 1-7s-3-4-6-5l-24-4-3-6 10-23v-7c-2-3-4-4-7-4l-25 1-4-5 6-25c1-3 0-5-2-7s-4-3-7-2l-24 6-5-4 1-26c0-3-1-6-3-7s-5-2-7-1l-23 11-5-3-4-26c-1-2-2-4-5-5-2-1-5-1-7 1l-20 15-6-2-8-24c-1-3-3-5-6-5-2-1-5 0-7 2l-17 19-6-1-13-22c-1-2-4-3-6-3-3 0-5 1-6 3l-13 22-7 1-16-19a7 7 0 0 0-13 3l-8 24-6 2-20-15c-3-2-5-2-8-1-2 1-4 3-4 5l-4 26-5 3-23-11c-2-1-5 0-7 1s-3 4-3 7l1 26-5 4-24-6c-3-1-6 0-7 2-2 2-3 4-2 7l5 25-3 5-25-1c-3 0-5 1-7 4v7l10 23-3 6-24 4c-3 1-5 3-6 5s-1 5 1 7l14 21v1l-41 44s-6 5 3 17a1639 1639 0 0 0 87 88c2-1-4-20-22-43-14-21-32-53-28-56 0 0 5-6 14-11 1 0 0 0 0 0s206 95 397 2c22-4 35 8 35 8 4 2-7 35-17 56a98 98 0 0 0-14 45l12-19c17-23 49-68 55-79 7-12 0-16 0-16"/><path d="m398 312 1-1-67-6c55-73 99-14 103-8v15z"/><path fill="#f74c00" d="M139 232s-55-21-65-44c0 0 65-52-13-107l-2 70s-23-23-22-62c0 0-72 35 12 96 0 0 3 33 79 73z"/><path d="M365 203s21-23 41 0c0 0 16 30 0 45 0 0-26 21-41 0 0 0-18-17 0-45"/><path fill="#fff" d="M389 211c0 9-5 16-12 16-6 0-11-7-11-16s5-16 11-16c7 0 12 7 12 16"/><path d="M273 197s35-16 45 19c0 0 10 40-29 43 0 0-50-10-16-62"/><path fill="#fff" d="M291 211c0 9-5 16-12 16s-12-7-12-16 5-17 12-17 12 8 12 17"/><path fill="#f74c00" d="M501 241s-7 29-53 60l-13 3s-41-76-100 10c0 0 18-11 67 2 0 0-22 35-68 34 0 0 44 52 110-24 0 0 70-27 76-85z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 1.7 KiB

1
content/overview-images/img/ferris.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 400" width="600" height="400"><path fill="#a52b00" d="M299 179c-61 0-116 7-157 19v101c41 12 96 20 157 20 69 0 131-10 173-25v-91c-42-15-104-24-173-24m235 82-7-15v-1c0-17-17-32-46-45v89c13-6 24-12 32-19-2 9-10 28-16 42-11 19-14 35-14 36l9-14 40-59c5-9 2-14 2-14M75 246l1 9-4 8s-3 4 3 14a1259 1259 0 0 0 56 70c1-1-4-17-16-35l-16-33c11 7 26 13 43 19V194c-42 13-67 31-67 52"/><path fill="#f74c00" d="m576 261-47-34-1-5 15-22c2-2 2-5 1-8-1-2-3-4-6-5l-26-4-3-6 11-25c1-3 1-6-1-8-1-2-4-4-7-4l-26 1-4-5 6-27c1-2 0-5-2-7s-5-3-7-2l-26 6-5-4 1-28c0-3-1-5-3-7-3-1-5-2-8 0l-24 11-6-3-4-27c0-3-2-5-5-6-2-2-5-1-7 0l-21 16-7-2-9-25c-1-3-3-5-6-5-2-1-5 0-7 2l-18 20h-6l-14-24c-1-2-4-4-7-4-2 0-5 2-6 4l-14 24h-7l-17-20a8 8 0 0 0-13 3l-10 25-6 2-21-16c-2-1-5-2-8 0-2 1-4 3-4 6l-5 27-5 3-24-11c-3-2-6-1-8 0-2 2-3 4-3 7l1 28-5 4-26-6c-3-1-5 0-7 2s-3 5-2 7l6 27-4 5-27-1c-2 0-5 2-6 4-2 2-2 5-1 8l11 25-3 6-26 4c-3 1-5 3-6 5-1 3-1 6 1 8l15 22v1l-44 46s-6 6 4 18a1732 1732 0 0 0 92 94c1-1-4-22-24-46-15-22-34-56-29-60 0 0 5-6 15-11 0 1 0 0 0 0s218 101 420 2c23-4 37 8 37 8 4 3-8 37-18 60-14 26-16 46-15 47s6-7 13-19l58-84c7-13 0-17 0-17"/><path d="m225 325-1-1 71-5c-58-77-105-16-110-9v15zm149 0 1-1-69-5c59-80 102-17 107-10v16z"/><path fill="#f74c00" d="M483 249s-8 31-56 63l-14 3s-44-80-106 10c0 0 19-11 71 3 0 0-23 37-72 35 0 0 47 56 117-24 0 0 74-29 80-90z"/><path d="M339 209s21-24 43 0c0 0 17 32 0 47 0 0-28 23-43 0 0 0-19-17 0-47"/><path fill="#fff" d="M364 218c0 9-6 16-12 16-7 0-13-7-13-16 0-10 6-17 13-17 6 0 12 7 12 17"/><path d="M242 202s37-16 47 21c0 0 11 43-31 45 0 0-52-10-16-66"/><path fill="#fff" d="M260 217c0 10-5 18-12 18s-13-8-13-18c0-9 6-17 13-17s12 8 12 17"/><path fill="#f74c00" d="M221 331c46-6 72-6 72-6-61-81-111-8-111-8-13-4-25-22-35-38l-38-11c44 75 77 76 77 76 68 87 100 17 100 17-38-4-65-30-65-30"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 1.8 KiB

109
content/overview-images/index.fr.md Normal file
View file

@ -0,0 +1,109 @@
+++
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]
tags = ["Features","Shortcodes","Images"]
[extra]
keywords = "Image, Markdown, Shortcodes, Swap"
thumbnail = "ferris-gesture.png"
toc = true
series = "Features"
+++
Cet article couvre les **shortcodes imgswap 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.
<!-- more -->
# 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.
- w est la largeur de l'image.
- h est la hauteur de l'image.
** google lighthouse recommande de définir les attributs alt, w et h. Si alt est omis, le nom du fichier est utilisé. Si w ou h sont omis alors get_image_metadata() remplit ces valeurs. **
## Utilisation (même chemin)
```rs
{{/* img(src="ferris-happy.svg" alt="Ferris est heureux") */}}
```
**Sortir**
```html
{{ img(src="ferris-happy.svg" alt="Ferris est heureux") }}
```
{{ img(src="ferris-happy.svg" alt="Ferris est heureux") }}
## Utilisation (chemin relatif ./)
```rs
{{/* img(src="./img/ferris-gesture.svg" alt="Ferris dit bonjour") */}}
```
**Sortir**
```html
{{ img(src="./img/ferris-gesture.svg" alt="Ferris dit bonjour") }}
```
{{ img(src="./img/ferris-gesture.svg" alt="Ferris dit bonjour") }}
## Utilisation (chemin racine /)
```rs
{{/* img(src="/images/ferris.svg" alt="Ferris le Rustacé") */}}
```
**Sortir**
```html
{{ img(src="/images/ferris.svg" alt="Ferris le Rustacé") }}
```
{{ img(src="/images/ferris.svg" alt="Ferris le Rustacé") }}
# Image SVG directement dans le code
```html
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 489" width="600" height="489"><g fill="#8f1f1d"><path d="M70 324c1 3 3 4 6 4l24 4 2 5-10 20v5l7 4 24-1 4 4-7 21c0 2 0 4 3 6 1 2 4 2 7 2l24-5 4 4-1 22c-1 2 0 4 3 5h6l23-8 6 3 4 22c0 2 1 3 3 4h7l21-13 6 2 8 20 5 5c3 0 5 0 7-2l18-15h5l13 18c1 2 3 4 6 4l5-3 14-18h6l17 16c1 1 4 2 6 1 3 0 5-1 6-3l9-21 6-1 19 14h7c3 0 5-3 5-5l4-21 6-2 22 9 7-1c2-1 3-2 3-5v-21l5-4 24 6c3 0 5 0 6-2 2-2 3-4 2-6l-4-21 3-5 24 2c4 0 6 0 7-3v-5l-9-21 3-5 25-2 5-5-1-5-14-18c0-1-1-19-12-33v-1c-26-36-106-64-201-65-100-2-184 26-206 64-10 10-12 26-11 26l-15 17c-1 3-2 5-1 7z"/><path d="M565 247c-1-3-12-2-14-3l-38 1-4-7 26-38c1-2 7-7 6-9-3-3-12 1-14 1l-39 7-4-6 22-49c0-3 7-15 5-18-2-2-11 6-13 6l-43 28-4-5 11-43c0-3 7-18 5-19-2-2-9 5-12 6l-38 30-5-4 9-51c0-3 3-18 1-19s-15 13-17 14l-30 38-6-3-3-56c0-3 0-14-3-14-3-1-5 8-8 11l-25 50-7-1-13-57c-1-3-2-12-4-12-4 0-5 10-7 13l-15 56-7 1-22-52c-1-2-4-12-7-12-3 1-2 9-3 12l-7 61-6 3-19-27c-3-1-15-19-18-18-2 1 0 21-1 23l1 40-6 4-36-35c-3-1-7-7-10-5-2 2 0 10 0 13l13 53-4 5-41-26c-2-1-10-7-12-4-2 2 3 4 3 7l22 56-5 6-65-22c-3-1-10-5-12-1-1 2 5 6 6 9l49 53-3 7-47-6c-3 0-9-1-11 1-1 4 6 7 7 9l36 40a116 116 0 0 0 14 46c27 50 110 87 209 87 105 0 193-41 214-95 11-15 13-37 12-38l29-31c2-4 9-9 8-11z"/><path d="m99 289-67 10c-13 3-5 5 0 6 14 2 84 3 85 4zm402 3 67 10c13 4 5 6 0 6-14 2-84 5-86 5z"/></g><path d="M227 293s-24-26-47 0c0 0-18 35 0 52 0 0 30 24 47 0 0 0 21-20 0-52z"/><path fill="#fff" d="M200 302c0 11 6 19 14 19 7 0 12-8 12-19 0-10-5-18-12-18-8 0-14 8-14 18z"/><path d="M360 283s-40-17-52 22c0 0-11 47 33 49 0 0 58-10 19-71z"/><path fill="#fff" d="M339 299c0 10 7 20 14 20 8 0 14-10 14-20s-6-18-14-18c-7 0-14 8-14 18z"/></svg>
```
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 489" width="600" height="489"><g fill="#8f1f1d"><path d="M70 324c1 3 3 4 6 4l24 4 2 5-10 20v5l7 4 24-1 4 4-7 21c0 2 0 4 3 6 1 2 4 2 7 2l24-5 4 4-1 22c-1 2 0 4 3 5h6l23-8 6 3 4 22c0 2 1 3 3 4h7l21-13 6 2 8 20 5 5c3 0 5 0 7-2l18-15h5l13 18c1 2 3 4 6 4l5-3 14-18h6l17 16c1 1 4 2 6 1 3 0 5-1 6-3l9-21 6-1 19 14h7c3 0 5-3 5-5l4-21 6-2 22 9 7-1c2-1 3-2 3-5v-21l5-4 24 6c3 0 5 0 6-2 2-2 3-4 2-6l-4-21 3-5 24 2c4 0 6 0 7-3v-5l-9-21 3-5 25-2 5-5-1-5-14-18c0-1-1-19-12-33v-1c-26-36-106-64-201-65-100-2-184 26-206 64-10 10-12 26-11 26l-15 17c-1 3-2 5-1 7z"/><path d="M565 247c-1-3-12-2-14-3l-38 1-4-7 26-38c1-2 7-7 6-9-3-3-12 1-14 1l-39 7-4-6 22-49c0-3 7-15 5-18-2-2-11 6-13 6l-43 28-4-5 11-43c0-3 7-18 5-19-2-2-9 5-12 6l-38 30-5-4 9-51c0-3 3-18 1-19s-15 13-17 14l-30 38-6-3-3-56c0-3 0-14-3-14-3-1-5 8-8 11l-25 50-7-1-13-57c-1-3-2-12-4-12-4 0-5 10-7 13l-15 56-7 1-22-52c-1-2-4-12-7-12-3 1-2 9-3 12l-7 61-6 3-19-27c-3-1-15-19-18-18-2 1 0 21-1 23l1 40-6 4-36-35c-3-1-7-7-10-5-2 2 0 10 0 13l13 53-4 5-41-26c-2-1-10-7-12-4-2 2 3 4 3 7l22 56-5 6-65-22c-3-1-10-5-12-1-1 2 5 6 6 9l49 53-3 7-47-6c-3 0-9-1-11 1-1 4 6 7 7 9l36 40a116 116 0 0 0 14 46c27 50 110 87 209 87 105 0 193-41 214-95 11-15 13-37 12-38l29-31c2-4 9-9 8-11z"/><path d="m99 289-67 10c-13 3-5 5 0 6 14 2 84 3 85 4zm402 3 67 10c13 4 5 6 0 6-14 2-84 5-86 5z"/></g><path d="M227 293s-24-26-47 0c0 0-18 35 0 52 0 0 30 24 47 0 0 0 21-20 0-52z"/><path fill="#fff" d="M200 302c0 11 6 19 14 19 7 0 12-8 12-19 0-10-5-18-12-18-8 0-14 8-14 18z"/><path d="M360 283s-40-17-52 22c0 0-11 47 33 49 0 0 58-10 19-71z"/><path fill="#fff" d="M339 299c0 10 7 20 14 20 8 0 14-10 14-20s-6-18-14-18c-7 0-14 8-14 18z"/></svg>
# imgswap Shortcode
Par défaut, main_src est l'image affichée, swap_src est affiché au survol de la souris.
Lorsque vous passez votre souris sur l'image, l'image à comparer s'affiche.
- main_src est le chemin et le nom de fichier de l'image par défaut. (obligatoire)
- swap_src est le chemin et le nom de fichier de l'image d'échange. (obligatoire)
- class définit une classe pour l'image. (facultatif)
- alt définit la note alt pour l'image.
- w est la largeur de l'image.
- h est la hauteur de l'image.
** google lighthouse recommande de définir les attributs alt, w et h. Si alt est omis, le nom du fichier est utilisé. Si w ou h sont omis alors get_image_metadata() remplit ces valeurs. **
## Utilisation (même chemin)
```rs
{{/* imgswap(main_src="ferris.svg" swap_src="ferris-happy.svg") */}}
```
**Sortir**
```html
{{ imgswap(main_src="ferris.svg" swap_src="ferris-happy.svg") }}
```
{{ imgswap(main_src="ferris.svg" swap_src="ferris-happy.svg") }}
## Utilisation (chemin relatif ./)
```rs
{{/* imgswap(main_src="./img/ferris.svg" swap_src="./img/ferris-gesture.svg") */}}
```
**Sortir**
```html
{{ imgswap(main_src="./img/ferris.svg" swap_src="./img/ferris-gesture.svg") }}
```
{{ imgswap(main_src="./img/ferris.svg" swap_src="./img/ferris-gesture.svg") }}
## Utilisation (chemin racine /)
```rs
{{/* imgswap(main_src="/images/ferris.svg" swap_src="/images/ferris-gesture.svg") */}}
```
**Sortir**
```html
{{ imgswap(main_src="/images/ferris.svg" swap_src="/images/ferris-gesture.svg") }}
```
{{ imgswap(main_src="/images/ferris.svg" swap_src="/images/ferris-gesture.svg") }}

109
content/overview-images/index.md Normal file
View file

@ -0,0 +1,109 @@
+++
title = "Image Shortcodes"
description = "Images can be embedded directly using markdown `![Ferris](ferris.svg)`, but using a shortcode prevents CLS by explicitly setting the width and height."
date = 2021-05-19
draft = false
[taxonomies]
tags = ["Features","Shortcodes","Images"]
[extra]
keywords = "Image, Markdown, Shortcodes, Swap"
thumbnail = "ferris-gesture.png"
toc = true
series = "Features"
+++
This post covers the **imgswap and img shortcodes**. Images can also be embedded directly using markdown `![Ferris](ferris.svg)`, but it is better to use a shortcode so you can explicitly set the width and height, this will help prevent content layout shift which improves user experience and the google lighthouse score.
<!-- more -->
# img Shortcode
- src is the path and filename of the image. (mandatory)
- class sets a class for the image. (optional)
- alt sets the alt note for the image.
- w is the width of the image.
- h is the height of the image.
** google lighthouse recommends setting alt, w, and h attributes. If alt is omitted then the filename is used. If w or h are omitted then get_image_metadata() fills these values. **
## Usage (same path)
```rs
{{/* img(src="ferris-happy.svg" alt="Ferris is Happy") */}}
```
**Output**
```html
{{ img(src="ferris-happy.svg" alt="Ferris is Happy") }}
```
{{ img(src="ferris-happy.svg" alt="Ferris is Happy") }}
## Usage (relative path ./)
```rs
{{/* img(src="./img/ferris-gesture.svg" alt="Ferris says Hello") */}}
```
**Output**
```html
{{ img(src="./img/ferris-gesture.svg" alt="Ferris says Hello") }}
```
{{ img(src="./img/ferris-gesture.svg" alt="Ferris says Hello") }}
## Usage (root path /)
```rs
{{/* img(src="/images/ferris.svg" alt="Ferris the Rustacean") */}}
```
**Output**
```html
{{ img(src="/images/ferris.svg" alt="Ferris the Rustacean") }}
```
{{ img(src="/images/ferris.svg" alt="Ferris the Rustacean") }}
# SVG image directly in code
```html
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 489" width="600" height="489"><g fill="#8f1f1d"><path d="M70 324c1 3 3 4 6 4l24 4 2 5-10 20v5l7 4 24-1 4 4-7 21c0 2 0 4 3 6 1 2 4 2 7 2l24-5 4 4-1 22c-1 2 0 4 3 5h6l23-8 6 3 4 22c0 2 1 3 3 4h7l21-13 6 2 8 20 5 5c3 0 5 0 7-2l18-15h5l13 18c1 2 3 4 6 4l5-3 14-18h6l17 16c1 1 4 2 6 1 3 0 5-1 6-3l9-21 6-1 19 14h7c3 0 5-3 5-5l4-21 6-2 22 9 7-1c2-1 3-2 3-5v-21l5-4 24 6c3 0 5 0 6-2 2-2 3-4 2-6l-4-21 3-5 24 2c4 0 6 0 7-3v-5l-9-21 3-5 25-2 5-5-1-5-14-18c0-1-1-19-12-33v-1c-26-36-106-64-201-65-100-2-184 26-206 64-10 10-12 26-11 26l-15 17c-1 3-2 5-1 7z"/><path d="M565 247c-1-3-12-2-14-3l-38 1-4-7 26-38c1-2 7-7 6-9-3-3-12 1-14 1l-39 7-4-6 22-49c0-3 7-15 5-18-2-2-11 6-13 6l-43 28-4-5 11-43c0-3 7-18 5-19-2-2-9 5-12 6l-38 30-5-4 9-51c0-3 3-18 1-19s-15 13-17 14l-30 38-6-3-3-56c0-3 0-14-3-14-3-1-5 8-8 11l-25 50-7-1-13-57c-1-3-2-12-4-12-4 0-5 10-7 13l-15 56-7 1-22-52c-1-2-4-12-7-12-3 1-2 9-3 12l-7 61-6 3-19-27c-3-1-15-19-18-18-2 1 0 21-1 23l1 40-6 4-36-35c-3-1-7-7-10-5-2 2 0 10 0 13l13 53-4 5-41-26c-2-1-10-7-12-4-2 2 3 4 3 7l22 56-5 6-65-22c-3-1-10-5-12-1-1 2 5 6 6 9l49 53-3 7-47-6c-3 0-9-1-11 1-1 4 6 7 7 9l36 40a116 116 0 0 0 14 46c27 50 110 87 209 87 105 0 193-41 214-95 11-15 13-37 12-38l29-31c2-4 9-9 8-11z"/><path d="m99 289-67 10c-13 3-5 5 0 6 14 2 84 3 85 4zm402 3 67 10c13 4 5 6 0 6-14 2-84 5-86 5z"/></g><path d="M227 293s-24-26-47 0c0 0-18 35 0 52 0 0 30 24 47 0 0 0 21-20 0-52z"/><path fill="#fff" d="M200 302c0 11 6 19 14 19 7 0 12-8 12-19 0-10-5-18-12-18-8 0-14 8-14 18z"/><path d="M360 283s-40-17-52 22c0 0-11 47 33 49 0 0 58-10 19-71z"/><path fill="#fff" d="M339 299c0 10 7 20 14 20 8 0 14-10 14-20s-6-18-14-18c-7 0-14 8-14 18z"/></svg>
```
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 489" width="600" height="489"><g fill="#8f1f1d"><path d="M70 324c1 3 3 4 6 4l24 4 2 5-10 20v5l7 4 24-1 4 4-7 21c0 2 0 4 3 6 1 2 4 2 7 2l24-5 4 4-1 22c-1 2 0 4 3 5h6l23-8 6 3 4 22c0 2 1 3 3 4h7l21-13 6 2 8 20 5 5c3 0 5 0 7-2l18-15h5l13 18c1 2 3 4 6 4l5-3 14-18h6l17 16c1 1 4 2 6 1 3 0 5-1 6-3l9-21 6-1 19 14h7c3 0 5-3 5-5l4-21 6-2 22 9 7-1c2-1 3-2 3-5v-21l5-4 24 6c3 0 5 0 6-2 2-2 3-4 2-6l-4-21 3-5 24 2c4 0 6 0 7-3v-5l-9-21 3-5 25-2 5-5-1-5-14-18c0-1-1-19-12-33v-1c-26-36-106-64-201-65-100-2-184 26-206 64-10 10-12 26-11 26l-15 17c-1 3-2 5-1 7z"/><path d="M565 247c-1-3-12-2-14-3l-38 1-4-7 26-38c1-2 7-7 6-9-3-3-12 1-14 1l-39 7-4-6 22-49c0-3 7-15 5-18-2-2-11 6-13 6l-43 28-4-5 11-43c0-3 7-18 5-19-2-2-9 5-12 6l-38 30-5-4 9-51c0-3 3-18 1-19s-15 13-17 14l-30 38-6-3-3-56c0-3 0-14-3-14-3-1-5 8-8 11l-25 50-7-1-13-57c-1-3-2-12-4-12-4 0-5 10-7 13l-15 56-7 1-22-52c-1-2-4-12-7-12-3 1-2 9-3 12l-7 61-6 3-19-27c-3-1-15-19-18-18-2 1 0 21-1 23l1 40-6 4-36-35c-3-1-7-7-10-5-2 2 0 10 0 13l13 53-4 5-41-26c-2-1-10-7-12-4-2 2 3 4 3 7l22 56-5 6-65-22c-3-1-10-5-12-1-1 2 5 6 6 9l49 53-3 7-47-6c-3 0-9-1-11 1-1 4 6 7 7 9l36 40a116 116 0 0 0 14 46c27 50 110 87 209 87 105 0 193-41 214-95 11-15 13-37 12-38l29-31c2-4 9-9 8-11z"/><path d="m99 289-67 10c-13 3-5 5 0 6 14 2 84 3 85 4zm402 3 67 10c13 4 5 6 0 6-14 2-84 5-86 5z"/></g><path d="M227 293s-24-26-47 0c0 0-18 35 0 52 0 0 30 24 47 0 0 0 21-20 0-52z"/><path fill="#fff" d="M200 302c0 11 6 19 14 19 7 0 12-8 12-19 0-10-5-18-12-18-8 0-14 8-14 18z"/><path d="M360 283s-40-17-52 22c0 0-11 47 33 49 0 0 58-10 19-71z"/><path fill="#fff" d="M339 299c0 10 7 20 14 20 8 0 14-10 14-20s-6-18-14-18c-7 0-14 8-14 18z"/></svg>
# imgswap Shortcode
By default main_src is the image displayed, swap_src is displayed on mouse hover.
When you hover your mouse over the image it will display the image to compare.
- main_src is the path and filename for the default image. (mandatory)
- swap_src is the path and filename for the swap image. (mandatory)
- class sets a class for the image. (optional)
- alt sets the alt note for the image.
- w is the width of the image.
- h is the height of the image.
** google lighthouse recommends setting alt, w, and h attributes. If alt is omitted then the filename is used. If w or h are omitted then get_image_metadata() fills these values. **
## Usage (same path)
```rs
{{/* imgswap(main_src="ferris.svg" swap_src="ferris-happy.svg") */}}
```
**Output**
```html
{{ imgswap(main_src="ferris.svg" swap_src="ferris-happy.svg") }}
```
{{ imgswap(main_src="ferris.svg" swap_src="ferris-happy.svg") }}
## Usage (relative path ./)
```rs
{{/* imgswap(main_src="./img/ferris.svg" swap_src="./img/ferris-gesture.svg") */}}
```
**Output**
```html
{{ imgswap(main_src="./img/ferris.svg" swap_src="./img/ferris-gesture.svg") }}
```
{{ imgswap(main_src="./img/ferris.svg" swap_src="./img/ferris-gesture.svg") }}
## Usage (root path /)
```rs
{{/* imgswap(main_src="/images/ferris.svg" swap_src="/images/ferris-gesture.svg") */}}
```
**Output**
```html
{{ imgswap(main_src="/images/ferris.svg" swap_src="/images/ferris-gesture.svg") }}
```
{{ imgswap(main_src="/images/ferris.svg" swap_src="/images/ferris-gesture.svg") }}

275
content/overview-markdown-and-style.fr.md Normal file
View file

@ -0,0 +1,275 @@
+++
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]
tags = ["Features","Markdown"]
[extra]
keywords = "Markdown, Style, Syntax, Syntax Highlighting"
toc = true
series = "Features"
+++
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.
<!-- more -->
# Rubriques
Les éléments HTML `<h1>`—`<h6>` suivants représentent six niveaux d'en-têtes de section.
`<h1>` est le niveau de section le plus élevé alors qu'il `<h6>` 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.<br>
> — <cite>Rob Pike[^1]</cite>
> Tous les hommes, par nature, désirent savoir.<br>
> ― <cite>Aristotle[^2]</cite>
> Le pouvoir vient en réponse à un besoin, pas à un désir.<br>
> — *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 `<figure></figure>` pour qu'elles puissent défiler horizontalement.
<figure>
| **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 |
</figure>
*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
<details>
<summary>Titre 1</summary>
<p>C'EST UN SECRET POUR TOUT LE MONDE.</p>
</details>
<details>
<summary>Titre 2</summary>
<p>Reste un moment et écoute!</p>
</details>
# 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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example HTML5 Document</title>
</head>
<body>
<p>Test</p>
</body>
</html>
```
## Numéros de ligne, faits saillants
```html,linenos,hl_lines=5 7-9
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example HTML5 Document</title>
</head>
<body>
<p>Test</p>
</body>
</html>
```
## 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
<abbr title="Graphics Interchange Format">GIF</abbr> est un format d'image bitmap.
H<sub>2</sub>O
X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup>
Appuyez sur pour terminer la session. <kbd><kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>Delete</kbd></kbd>
La plupart <mark>salamanders</mark> sont nocturnes et chassent les insectes, les vers et autres petites créatures.
---
<!-- Note: There must be a blank line between every two lines of the footnote definition. -->
[^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. La navigation est réactive, réduisez la largeur de la page pour la voir en action.
## Formes
<form name="contact" method="POST" >
<p><label for="name">Nom</label>
<input type="text" placeholder="Name" id="name" required data-validation-required-message="Please enter your name." />
</p>
<p><label for="email">Adresse e-mail</label>
<input type="email" placeholder="name@example.com" id="email" required data-validation-required-message="Please enter your email address." />
</p>
<p><label for="message">Message</label>
<textarea rows="5" placeholder="Message" id="message" required data-validation-required-message="Please enter a message."></textarea>
</p>
<div id="success"></div>
<p><button type="submit" id="sendMessageButton">Envoyer</button></p>
<br>
<!-- Select -->
<label for="fruit">Fruit</label>
<select id="fruit" required>
<option value="" selected>Choisissez un fruit…</option>
<option>Banane</option>
<option>Pastèque</option>
<option>Pomme</option>
<option>Orange</option>
<option>mangue</option>
</select>
<!-- Radios -->
<fieldset>
<legend>Taille</legend>
<label for="small">
<input type="radio" id="small" name="size" value="small" checked>
Petit
</label>
<label for="medium">
<input type="radio" id="medium" name="size" value="medium">
Moyen
</label>
<label for="large">
<input type="radio" id="large" name="size" value="large">
Grand
</label>
<label for="extralarge">
<input type="radio" id="extralarge" name="size" value="extralarge" disabled>
Extra Large
</label>
</fieldset>
<!-- Checkboxes -->
<fieldset>
<label for="terms">
<input type="checkbox" id="terms" name="terms">
J'accepte les termes et conditions
</label>
<label for="terms_sharing">
<input type="checkbox" id="terms_sharing" name="terms_sharing" disabled checked>
J'accepte de partager mes informations avec des partenaires
</label>
</fieldset>
<!-- Switches -->
<fieldset>
<label for="switch">
<input type="checkbox" id="switch" name="switch" role="switch">
Publier sur mon profil
</label>
<label for="switch_disabled">
<input type="checkbox" id="switch_disabled" name="switch_disabled" disabled checked>
Publier sur mon profil mes réalisations
</label>
</fieldset>
<br>
<!-- Search -->
<p><input type="search" id="search" name="search" placeholder="Search" title="Search"></p>
<!-- File browser -->
<label for="file">Navigateur de fichiers
<input type="file" id="file" name="file">
</label>
<!-- Range slider -->
<label for="range">Curseur de plage
<input type="range" min="0" max="100" value="50" id="range" name="range">
</label>
<!-- Date -->
<label for="date">Date
<input type="date" id="date" name="date">
</label>
<!-- Time -->
<label for="time">Temps
<input type="time" id="time" name="time">
</label>
<!-- Color -->
<label for="color">Couleur
<input type="color" id="color" name="color" value="#0eaaaa">
</label>
</form>

290
content/overview-markdown-and-style.md Normal file
View file

@ -0,0 +1,290 @@
+++
title = "Markdown and Style"
description = "Sample article showcasing basic Markdown syntax and formatting for HTML elements."
date = 2022-05-15
draft = false
[taxonomies]
tags = ["Features","Markdown"]
[extra]
keywords = "Markdown, Style, Syntax, Syntax Highlighting"
toc = true
series = "Features"
+++
This article offers a sample of basic Markdown syntax that can be used in Zola content files, also it shows if basic HTML elements are decorated with CSS in a Zola theme.
<!-- more -->
# Headings
The following HTML `<h1>`—`<h6>` elements represent six levels of section
headings. `<h1>` is the highest section level while `<h6>` is the lowest.
# H1
## H2
### H3
#### H4
##### H5
###### H6
# Paragraph
Xerum, quo qui aut unt expliquam 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 evelectur, 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 is sinveli squiatum, core et que aut hariosam ex eat.
# Blockquotes
The blockquote element represents content that is quoted from another source,
optionally with a citation which must be within a `footer` or `cite` element,
and optionally with in-line changes such as annotations and abbreviations.
## Blockquote no attribution
> Tiam, ad mint andaepu dandae nostion secatur sequo quae.
> **Note** that you can use *Markdown syntax* within a blockquote.
## Blockquote attribution
> Don't communicate by sharing memory, share memory by communicating.<br>
> — <cite>Rob Pike[^1]</cite>
> All men by nature desire to know.<br>
> ― <cite>Aristotle[^2]</cite>
> Power comes in response to a need, not a desire.<br>
> — *Goku*
# Tables
Tables aren't part of the core Markdown spec, but Zola supports them
out-of-the-box.
Name | Age
--------|------
Alice | 23
Bob | 27
Cody | 33
John | 59
Kerry | 23
## Table Inline Markdown
| Italics | Bold | Code | StrikeThrough |
| -------- | -------- | ------ | ----------------- |
| *italics* | **bold** | `code` | ~~strikethrough~~ |
## Large table within figure
Surround very Large tables with `<figure></figure>` so they can scroll horizontally.
<figure>
| **Manufacturer** | Volkswagen | Toyota | Ford | Honda | Chevrolet | BMW | Hyundai | Audi | Nissan | Kia | Mercedes | Tesla | Mitsubishi | Suzuki | Volvo | Subaru | Mazda | Jaguar | Buick | Lexus | GMC | Porsche | Cadillac |
| ---------- | ---- | ---- | ---- | ---- | ---- | ---- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- |
| **Revenue $B** | $254 | $249 | $127 | $124 | $123 | $113 | $88 | $83 | $74 | $61 | $55 | $54 | $38 | $31 | $30 | $28 | $27 | $22 | $21 | $19 | $17 | $16 | $12 |
</figure>
*revenue values found on search engine and not verified, for figure scroller table demonstration purposes only.*
# Foldable Text
<details>
<summary>Title 1</summary>
<p>IT'S A SECRET TO EVERYBODY.</p>
</details>
<details>
<summary>Title 2</summary>
<p>Stay awhile, and listen!</p>
</details>
# Code Blocks
Code blocks.. ❤️ with automatic syntax highlighting ✨‍
See [the docs](https://www.getzola.org/documentation/content/syntax-highlighting/) for options.
## Code block with backticks
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example HTML5 Document</title>
</head>
<body>
<p>Test</p>
</body>
</html>
```
## Line Numbers, Highlights
```html,linenos,hl_lines=5 7-9
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example HTML5 Document</title>
</head>
<body>
<p>Test</p>
</body>
</html>
```
## Inline Code block
If we want, we can also `specify inline code` which is useful for `the small stuff`.
# List Types
## Ordered List
1. First item
2. Second item
3. Third item
## Unordered List
- List item
- Another item
- And another item
## Nested list
- Fruit
- Apple
- Orange
- Banana
- Dairy
- Milk
- Cheese
# Other Elements — abbr, sub, sup, kbd, mark, link
<abbr title="Graphics Interchange Format">GIF</abbr> is a bitmap image format.
H<sub>2</sub>O
X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup>
Press <kbd><kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>Delete</kbd></kbd> to end the
session.
Most <mark>salamanders</mark> are nocturnal, and hunt for insects, worms, and
other small creatures.
---
<!-- Note: There must be a blank line between every two lines of the footnote definition. -->
[^1]: The above quote is excerpted from Rob Pike's [talk](https://www.youtube.com/watch?v=PAAkCSZUG1c)
during Gopherfest, November 18, 2015.
[^2]: The quote is the first sentence of Aristotle's [Metaphysics](https://en.wikipedia.org/wiki/Metaphysics_(Aristotle)).
## Navs
Site primary menu is created by nesting the nav under a header tag. Refer to the top of this site for an example. Navigation is responsive, shrink the page width to see it in action.
## Forms
<form name="contact" method="POST" >
<p><label for="name">Name</label>
<input type="text" placeholder="Name" id="name" required data-validation-required-message="Please enter your name." />
</p>
<p><label for="email">Email Address</label>
<input type="email" placeholder="name@example.com" id="email" required data-validation-required-message="Please enter your email address." />
</p>
<p><label for="message">Message</label>
<textarea rows="5" placeholder="Message" id="message" required data-validation-required-message="Please enter a message."></textarea>
</p>
<div id="success"></div>
<p><button type="submit" id="sendMessageButton">Send</button></p>
<br>
<!-- Select -->
<label for="fruit">Fruit</label>
<select id="fruit" required>
<option value="" selected>Select a fruit…</option>
<option>Banana</option>
<option>Watermelon</option>
<option>Apple</option>
<option>Orange</option>
<option>Mango</option>
</select>
<!-- Radios -->
<fieldset>
<legend>Size</legend>
<label for="small">
<input type="radio" id="small" name="size" value="small" checked>
Small
</label>
<label for="medium">
<input type="radio" id="medium" name="size" value="medium">
Medium
</label>
<label for="large">
<input type="radio" id="large" name="size" value="large">
Large
</label>
<label for="extralarge">
<input type="radio" id="extralarge" name="size" value="extralarge" disabled>
Extra Large
</label>
</fieldset>
<!-- Checkboxes -->
<fieldset>
<label for="terms">
<input type="checkbox" id="terms" name="terms">
I agree to the Terms and Conditions
</label>
<label for="terms_sharing">
<input type="checkbox" id="terms_sharing" name="terms_sharing" disabled checked>
I agree to share my information with partners
</label>
</fieldset>
<!-- Switches -->
<fieldset>
<label for="switch">
<input type="checkbox" id="switch" name="switch" role="switch">
Publish on my profile
</label>
<label for="switch_disabled">
<input type="checkbox" id="switch_disabled" name="switch_disabled" disabled checked>
Publish on my profile my accomplishments
</label>
</fieldset>
<br>
<!-- Search -->
<p><input type="search" id="search" name="search" placeholder="Search" title="Search"></p>
<!-- File browser -->
<label for="file">File browser
<input type="file" id="file" name="file">
</label>
<!-- Range slider -->
<label for="range">Range slider
<input type="range" min="0" max="100" value="50" id="range" name="range">
</label>
<!-- Date -->
<label for="date">Date
<input type="date" id="date" name="date">
</label>
<!-- Time -->
<label for="time">Time
<input type="time" id="time" name="time">
</label>
<!-- Color -->
<label for="color">Color
<input type="color" id="color" name="color" value="#0eaaaa">
</label>
</form>

112
content/overview-math.fr.md Normal file
View file

@ -0,0 +1,112 @@
+++
title = "Notation 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]
tags = ["Features","Shortcodes","Mathematics"]
[extra]
math = true
math_auto_render = true
keywords = "Math, Matematics, Notation, KaTeX, Mathematical Notation"
toc = true
series = "Features"
+++
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.
<!-- more -->
## 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'ai 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 %}
### Bloquer les mathématiques
Certaines 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 %}
### Rendu automatique en ligne
```
$ e^{i\pi}+1=0 $
```
$ e^{i\pi}+1=0 $
### 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
$$

115
content/overview-math.md Normal file
View file

@ -0,0 +1,115 @@
+++
title = "Mathematical Notation"
description = "Sample article showcasing the display of Mathematical Notations, made possible by the KaTeX library."
date = 2021-05-05
updated = 2022-01-01
draft = false
[taxonomies]
tags = ["Features","Shortcodes","Mathematics"]
[extra]
math = true
math_auto_render = true
keywords = "Math, Matematics, Notation, KaTeX, Mathematical Notation"
toc = true
series = "Features"
+++
You can use [KaTeX](https://katex.org) to render mathematical notations.
You can enable the $\KaTeX$ support globally, per-section or per-page basis.
<!-- more -->
## Enable Globally
To enable the $\KaTeX$ support globally, add `math = true` under `[extra]` of the `config.toml`
at your site root. Now the katex shortcode will be rendered, you can also add `math_auto_render = true`
and every section and page of your site will load the KaTeX [autorender extension](https://katex.org/docs/autorender.html).
```toml
[extra]
math = true
math_auto_render = false
```
## Per-section Basis
To enable the $\KaTeX$ support in a particular section, add `math = true` under `[extra]` in the `[SECTION_NAME]/_index.md`.
Now the katex shortcode will be rendered, you can also add `math_auto_render = true`
and the section of your site will load the KaTeX [autorender extension](https://katex.org/docs/autorender.html).
```toml
+++
[extra]
math = true
+++
```
## Per-page Basis
To enable the $\KaTeX$ support in a particular page, add `math = true` under `[extra]` in the page's
frontmatter. Now the katex shortcode will be rendered, you can also add `math_auto_render = true`
and the page of your site will load the KaTeX [autorender extension](https://katex.org/docs/autorender.html).
```toml
+++
[extra]
math = true
math_auto_render = true
+++
```
It is a good practice to enable $\KaTeX$ support on a per-page basis, since this will only load the
required files on that particular page, without affecting the page load speed of other pages.
If your site is not math-heavy, please do NOT enable this feature globally or per-section basis.
## Usage
Wrap any [valid](https://katex.org/docs/supported.html) $\KaTeX$ syntax with `$...$` for inline
Mathematics and `$$...$$` for block Mathematics.
### Inline Mathematics
This is the most beautiful equation I've ever seen:
### Usage
```rs
{%/* katex(block=false) */%} e^{i\pi}+1=0 {%/* end */%}
```
### Output
```html
{% katex(block=false) %} e^{i\pi}+1=0 {% end %}
```
{% katex(block=false) %} e^{i\pi}+1=0 {% end %}
### Block Mathematics
Some Mathematics in display mode is fair enough:
### Usage
```rs
{%/* katex(block=true) */%} \int_0^1 x^2 dx {%/* end */%}
```
### Output
```html
{% katex(block=true) %} \int_0^1 x^2 dx {% end %}
```
{% katex(block=true) %} \int_0^1 x^2 dx {% end %}
### Auto Render Inline
```
$ e^{i\pi}+1=0 $
```
$ e^{i\pi}+1=0 $
### Auto Render Block
```
$$
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
$$

79
content/overview-rich-content/index.fr.md Normal file
View file

@ -0,0 +1,79 @@
+++
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-15
draft = false
[taxonomies]
tags = ["Features","Video","Audio","Images","Shortcodes"]
[extra]
keywords = "Images, Videos, Audio, Gif, Rich Content, Shortcodes"
toc = true
series = "Features"
+++
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/)). `video`, `image`, `gif`, et `audio` ont été créés pour vous aider à tirer parti des éléments HTML modernes dans votre écriture.
<!-- more -->
## Vidéo
Le `video` shortcode prend un `sources` paramètre (un tableau de chaînes) et renvoie une `<video>` balise. Chaque chaîne du `sources` tableau doit être un chemin vers un fichier vidéo d'un type différent (`webm`, `mp4`, etc). Chaque source individuelle est ensuite convertie en `<source>` balise et l'élément est renvoyé.
### Usage
```rs
{{/* video(sources=["over9000_av1.mp4", "over9000_vp9.webm"]) */}}
```
### Sortir
```html
{{ video(sources=["over9000_av1.mp4", "over9000_vp9.webm"]) }}
```
{{ video(sources=["over9000_av1.mp4", "over9000_vp9.webm"]) }}
## Image
Le `image` shortcode renvoie une `<picture>` balise et accepte trois paramètres : `sources` (un tableau de chaînes), `fallback_path`, et `fallback_alt` (les deux chaînes).
Chaque chaîne du `sources` tableau doit être un chemin vers un fichier image d'un type différent (`avif`, `webp`, `png`, `jpg`, etc). `fpath` et
`falt` sont utilisés pour créer une `<img>` balise sur laquelle le navigateur peut se replier si les autres formats ne sont pas encore pris en charge, fw et fh définissent la largeur et la hauteur de la solution de repli
### Usage
```rs
{{/* image(sources=["over9000-960.avif", "over9000-640.avif", "over9000-400.avif"], fpath="over9000-640.webp", fw=640, fh=480, falt="ITS OVER 9000!") */}}
```
### Sortir
```html
{{ image(sources=["over9000-960.avif", "over9000-640.avif", "over9000-400.avif"], fpath="over9000-640.webp", fw=640, fh=480, falt="ITS OVER 9000!") }}
```
{{ image(sources=["over9000-960.avif", "over9000-640.avif", "over9000-400.avif"], fpath="over9000-640.webp", fw=640, fh=480, falt="ITS OVER 9000!") }}
## GIF
Le `gif` shortcode est exactement le même que le [shortcode vidéo][#video]
– il prend un tableau de chaînes appelées `sources` et renvoie une `<video>` balise. La seule différence réside dans la balise la plus à l'extérieur, qui a quatre propriétés supplémentaires : `autoplay`, `loop`, `muted`, `playsinline`.
L'utilisation de la `<video>` balise à la place des gifs permet de réduire la taille des fichiers, ce qui est particulièrement important dans les régions où Internet est plus lent ou moins fiable.
### Usage
```rs
{{/* gif(sources=["over9000_av1.mp4", "over9000_vp9.webm"]) */}}
```
### Sortir
```html
{{ gif(sources=["over9000_av1.mp4", "over9000_vp9.webm"]) }}
```
{{ gif(sources=["over9000_av1.mp4", "over9000_vp9.webm"]) }}
## l'audio
Le `audio` shortcode prend un `sources` tableau de chaînes et renvoie une `<audio>` balise. Chaque chaîne du `sources` tableau doit être un chemin vers un fichier audio d'un type différent (`ogg`, `mp3`, `flac`, `wav`, etc). Le navigateur jouera le premier type qu'il prend en charge, donc les placer dans l'ordre de la taille la plus petite à la plus grande utilisera le moins de bande passante si tel est votre objectif.
### Usage
```rs
{{/* audio(sources=["over9000.ogg", "over9000.mp3", "over9000.flac", "over9000.wav"]) */}}
```
### Sortir
```html
{{ audio(sources=["over9000.ogg", "over9000.mp3", "over9000.flac", "over9000.wav"]) }}
```
{{ audio(sources=["over9000.ogg", "over9000.mp3"]) }}

94
content/overview-rich-content/index.md Normal file
View file

@ -0,0 +1,94 @@
+++
title = "Rich Content"
description = "A brief description of custom Shortcodes for Zola that implement modern html elements: video, image, gif, audio."
date = 2021-05-15
draft = false
[taxonomies]
tags = ["Features","Video","Audio","Images","Shortcodes"]
[extra]
keywords = "Images, Videos, Audio, Gif, Rich Content, Shortcodes"
toc = true
series = "Features"
+++
Several custom shortcodes are included to augment CommonMark (courtesy of [d3c3nt theme](https://d3c3nt.figbert.com/posts/rich-content/)). `video`, `image`, `gif`, and `audio` were created to help you take advantage of modern HTML elements in your writing.
<!-- more -->
## Video
The `video` shortcode takes a `sources` parameter (an array of strings)
and returns a `<video>` tag. Each string in the `sources` array should
be a path to a video file of a different type (`webm`, `mp4`, etc). Each
individual source is then converted into a `<source>` tag, and the
element is returned.
### Usage
```rs
{{/* video(sources=["over9000_av1.mp4", "over9000_vp9.webm"]) */}}
```
### Output
```html
{{ video(sources=["over9000_av1.mp4", "over9000_vp9.webm"]) }}
```
{{ video(sources=["over9000_av1.mp4", "over9000_vp9.webm"]) }}
## Image
The `image` shortcode returns a `<picture>` tag and accepts three
parameters: `sources` (an array of strings), `fallback_path`, and
`fallback_alt` (both strings).
Each string in the `sources` array should be a path to an image file of
a different type (`avif`, `webp`, `png`, `jpg`, etc). `fpath` and
`falt` are used to create an `<img>` tag for the browser to fall
back on if the other formats aren't yet supported, fw and fh set the width and height of the fallback
### Usage
```rs
{{/* image(sources=["over9000-960.avif", "over9000-640.avif", "over9000-400.avif"], fpath="over9000-640.webp", fw=640, fh=480, falt="ITS OVER 9000!") */}}
```
### Output
```html
{{ image(sources=["over9000-960.avif", "over9000-640.avif", "over9000-400.avif"], fpath="over9000-640.webp", fw=640, fh=480, falt="ITS OVER 9000!") }}
```
{{ image(sources=["over9000-960.avif", "over9000-640.avif", "over9000-400.avif"], fpath="over9000-640.webp", fw=640, fh=480, falt="ITS OVER 9000!") }}
## GIF
The `gif` shortcode is exactly the same as the [video shortcode](#video)
– it takes an array of strings called `sources` and returns a
`<video>` tag. The only difference is in the outermost tag, which has
four additional properties: `autoplay`, `loop`, `muted`, `playsinline`.
Using the `<video>` tag in place of gifs allows for reduced file sizes,
which is especially important in regions where internet is slower or
less reliable.
### Usage
```rs
{{/* gif(sources=["over9000_av1.mp4", "over9000_vp9.webm"]) */}}
```
### Output
```html
{{ gif(sources=["over9000_av1.mp4", "over9000_vp9.webm"]) }}
```
{{ gif(sources=["over9000_av1.mp4", "over9000_vp9.webm"]) }}
## Audio
The `audio` shortcode takes a `sources` array of strings and returns an
`<audio>` tag. Each string in the `sources` array should be a path to an
audio file of a different type (`ogg`, `mp3`, `flac`, `wav`, etc).
The browser will play the first type it supports, so placing them in order of size smallest to largest will use the least bandwidth if that is your goal.
### Usage
```rs
{{/* audio(sources=["over9000.ogg", "over9000.mp3", "over9000.flac", "over9000.wav"]) */}}
```
### Output
```html
{{ audio(sources=["over9000.ogg", "over9000.mp3", "over9000.flac", "over9000.wav"]) }}
```
{{ audio(sources=["over9000.ogg", "over9000.mp3"]) }}

BIN
content/overview-rich-content/over9000-400.avif Normal file
View file

Binary file not shown.

BIN
content/overview-rich-content/over9000-640.avif Normal file
View file

Binary file not shown.

BIN
content/overview-rich-content/over9000-640.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 30 KiB

BIN
content/overview-rich-content/over9000-960.avif Normal file
View file

Binary file not shown.

BIN
content/overview-rich-content/over9000.mp3 Normal file
View file

Binary file not shown.

BIN
content/overview-rich-content/over9000.ogg Normal file
View file

Binary file not shown.

BIN
content/overview-rich-content/over9000_av1.mp4 Normal file
View file

Binary file not shown.

BIN
content/overview-rich-content/over9000_vp9.webm Normal file
View file

Binary file not shown.

31
content/overview-showdata.fr.md Normal file
View file

@ -0,0 +1,31 @@
+++
title = "Code court Showdata"
description = "Une brève description d'un shortcode personnalisé pour Zola qui implémente le chargement et l'affichage de données externes."
date = 2021-05-04
draft = false
[taxonomies]
tags = ["Features","Data","Shortcodes"]
[extra]
keywords = "Data, Load, External, Shortcodes"
toc = true
series = "Features"
+++
Le shortcode `showdata` peut charger et afficher des données provenant d'une source externe via la fonction [load_data()](https://www.getzola.org/documentation/templates/overview/#load-data) de Zola.
<!-- more -->
Ce sont les paramètres, actuellement tous les 3 sont requis.
- `src` chemin ou URL du fichier (si URL, doit inclure le préfixe http(s)://).
- `type` le type de fichier à charger. ([supported types](https://www.getzola.org/documentation/templates/overview/#load-data))
- `key` le champ dans les données que vous souhaitez afficher.
### Usage
Ce thème nécessite une version &#123;&#123; showdata(src="../theme.toml" type="toml" key="min_version") &#125;&#125; ou plus tard de Zola.
### Sortir
Ce thème nécessite une version {{ showdata(src="../theme.toml" type="toml" key="min_version") }} ou plus tard de Zola.

31
content/overview-showdata.md Normal file
View file

@ -0,0 +1,31 @@
+++
title = "Showdata Shortcode"
description = "A brief description of a custom Shortcode for Zola that implements loading and displaying external data."
date = 2021-05-04
draft = false
[taxonomies]
tags = ["Features","Data","Shortcodes"]
[extra]
keywords = "Data, Load, External, Shortcodes"
toc = true
series = "Features"
+++
The `showdata` shortcode can load and display data from an external source via Zola's [load_data()](https://www.getzola.org/documentation/templates/overview/#load-data) function.
<!-- more -->
These are the parameters, currently all 3 are required.
- `src` path or url to file (if url, must include the http(s):// prefix).
- `type` the type of file to load. ([supported types](https://www.getzola.org/documentation/templates/overview/#load-data))
- `key` the field in the data that you want to display.
### Usage
This theme requires version &#123;&#123; showdata(src="../theme.toml" type="toml" key="min_version") &#125;&#125; or later of Zola.
### Output
This theme requires version {{ showdata(src="../theme.toml" type="toml" key="min_version") }} or later of Zola.

3
content/pages/_index.md Normal file
View file

@ -0,0 +1,3 @@
+++
render = false
+++

14
content/pages/about.fr.md Normal file
View file

@ -0,0 +1,14 @@
+++
title = "À propos"
path = "fr/about"
template = "pages.html"
draft = false
+++
Ce site fournit une démo pour le thème [Abridge](https://github.com/Jieiku/abridge) de [Zola](https://www.getzola.org/), le générateur de site statique.
Abridge a été créé par [Jake G (jieiku)](https://github.com/Jieiku) pour être rapide et léger, en utilisant du HTML sémantique, un [abridge.css](https://github.com/Jieiku/abridge.css) léger de classe et No Mandatory JS.
Près de la moitié des thèmes Zola MIT existants ont inspiré les fonctionnalités et la conception de ce thème.
Abridge est sous licence [MIT](https://opensource.org/licenses/MIT).

14
content/pages/about.md Normal file
View file

@ -0,0 +1,14 @@
+++
title = "About"
path = "about"
template = "pages.html"
draft = false
+++
This site provides a demo for the [abridge theme](https://github.com/Jieiku/abridge) for [Zola](https://www.getzola.org/) the static site generator.
Abridge was created by [Jake G (jieiku)](https://github.com/Jieiku) to be fast and lightweight, using semantic html, a class-light [abridge.css](https://github.com/Jieiku/abridge.css), and No Mandatory JS.
Nearly half of the existing Zola MIT themes were inspiration for features and design of this theme.
Abridge is licensed under the [MIT license](https://opensource.org/licenses/MIT).

27
content/pages/contact.fr.md Normal file
View file

@ -0,0 +1,27 @@
+++
title = "Contact"
description = "Pour nous joindre, veuillez utiliser le formulaire de contact sur cette page."
path = "fr/contact"
template = "pages.html"
draft = false
+++
<p>Vous voulez entrer en contact ? Remplissez le formulaire ci-dessous pour m'envoyer un message et je vous répondrai dans les plus brefs délais !</p>
<form name="contact" method="POST">
<p>
<label for="name">Nom</label>
<input type="text" placeholder="Nom" id="name" required data-validation-required-message="S'il vous plaît entrez votre nom." />
</p>
<p>
<label for="email">Adresse e-mail</label>
<input type="email" placeholder="nom@example.com" id="email" required data-validation-required-message="Veuillez saisir votre adresse e-mail." />
</p>
<p>
<label for="message">Message</label>
<textarea rows="5" placeholder="Message" id="message" required data-validation-required-message="Veuillez entrer un message."></textarea>
</p>
<div id="success"></div>
<p>
<button type="submit" id="sendMessageButton">Envoyer</button>
</p>
</form>

27
content/pages/contact.md Normal file
View file

@ -0,0 +1,27 @@
+++
title = "Contact"
description = "To reach us please use the contact form on this page."
path = "contact"
template = "pages.html"
draft = false
+++
<p>Want to get in touch? Fill out the form below to send me a message and I will get back to you as soon as possible!</p>
<form name="contact" method="POST">
<p>
<label for="name">Name</label>
<input type="text" placeholder="Name" id="name" required data-validation-required-message="Please enter your name." />
</p>
<p>
<label for="email">Email Address</label>
<input type="email" placeholder="name@example.com" id="email" required data-validation-required-message="Please enter your email address." />
</p>
<p>
<label for="message">Message</label>
<textarea rows="5" placeholder="Message" id="message" required data-validation-required-message="Please enter a message."></textarea>
</p>
<div id="success"></div>
<p>
<button type="submit" id="sendMessageButton">Send</button>
</p>
</form>

10
content/pages/offline.fr.md Normal file
View file

@ -0,0 +1,10 @@
+++
title = "Mode hors-ligne"
path = "fr/offline"
template = "pages.html"
draft = false
+++
## Mode hors-ligne
Désolé, aucun cache n'a été trouvé et il semble que vous soyez hors ligne, une connexion est requise.

10
content/pages/offline.md Normal file
View file

@ -0,0 +1,10 @@
+++
title = "Offline Mode"
path = "offline"
template = "pages.html"
draft = false
+++
## Offline Mode
Sorry, no cache found and it looks like you’re offline, a connection is required.

15
content/pages/privacy.fr.md Normal file
View file

@ -0,0 +1,15 @@
+++
title = "politique de confidentialité"
description = "Cette page décrit la politique de confidentialité de ce site et la date à laquelle cette politique a été mise en vigueur."
path = "fr/privacy"
template = "pages.html"
draft = false
+++
## Confidentialité
- Ce site ne crée ni n'utilise de cookies.
- Ce site ne stocke pas de données dans le navigateur pour être partagées, envoyées ou vendues à des tiers.
- Aucune information personnelle n'est partagée, envoyée ou vendue à des tiers.
**Date d'entrée en vigueur:** _1er janvier 2022_

15
content/pages/privacy.md Normal file
View file

@ -0,0 +1,15 @@
+++
title = "Privacy Policy"
description = "This page outlines the Privacy Policy for this site, and the date at which this policy was put into affect."
path = "privacy"
template = "pages.html"
draft = false
+++
## Privacy
- This site does not set or use cookies.
- This site does not store data in the browser to be shared, sent, or sold to third-parties.
- No personal information is shared, sent, or sold to third-parties.
**Effective Date:** _1st Jan 2022_

5
content/static/stork_toml.md Normal file
View file

@ -0,0 +1,5 @@
+++
path = "data_stork"
template = "stork_toml.html"
draft = true
+++

5
content/static/tinysearch_json.md Normal file
View file

@ -0,0 +1,5 @@
+++
path = "data_tinysearch"
template = "tinysearch_json.html"
draft = true
+++

7
content/video-streaming-sites/_index.es.md Normal file
View file

@ -0,0 +1,7 @@
+++
render = false
transparent = true
template = "pages.html"
+++
Esta es una página sobre códigos cortos para sitios de transmisión de video.

7
content/video-streaming-sites/_index.fr.md Normal file
View file

@ -0,0 +1,7 @@
+++
render = false
transparent = true
template = "pages.html"
+++
Ceci est une page sur les shortcodes pour les sites de streaming vidéo.

7
content/video-streaming-sites/_index.md Normal file
View file

@ -0,0 +1,7 @@
+++
render = false
transparent = true
template = "pages.html"
+++
This is a page about shortcodes for video streaming sites.

34
content/video-streaming-sites/overview-embed-streamable.es.md Normal file
View file

@ -0,0 +1,34 @@
+++
title = "Incrustar Streamable"
description = "Artículo de ejemplo que muestra un shortcode personalizado de Zola para incrustar vídeos Streamable en tus páginas."
date = 2021-05-06
draft = false
[taxonomies]
tags = ["Features","Shortcodes","Video"]
[extra]
keywords = "Video, Shortcodes, Embed, Embedded, Streamable"
toc = true
series = "Features"
+++
Zola tiene muchos shortcodes, y nuevos son facilmente añadidos, este ejemplo muestra streamable.
<!-- más -->
## Streamable
### Uso
```rs
{{/* streamable(id="92ok4") */}}
```
- `id`: el id del vídeo (obligatorio)
- `class`: una clase para añadir al &lt;div&gt; que rodea al iframe (opcional)
- `title`: establecer el título alt para el iframe (opcional, por defecto "Streamable")
### Salida
```html
{{ streamable(id="92ok4") }}
```
{{ streamable(id="92ok4") }}

35
content/video-streaming-sites/overview-embed-streamable.fr.md Normal file
View file

@ -0,0 +1,35 @@
+++
title = "Streamable intégrées"
description = "Exemple d'article présentant un code abrégé Zola personnalisé pour intégrer des vidéos Streamable dans vos pages."
date = 2021-05-06
draft = false
[taxonomies]
tags = ["Features","Shortcodes","Video"]
[extra]
keywords = "Video, Shortcodes, Embed, Embedded, Streamable"
toc = true
series = "Features"
+++
Zola a de nombreux shortcodes, et de nouveaux sont facilement ajoutés, cet exemple montre streamable.
<!-- more -->
## Streamable
### Usage
```rs
{{/* streamable(id="92ok4") */}}
```
- `id`: l'identifiant de la vidéo (obligatoire)
- `class`: une classe à ajouter au &lt;div&gt; entourant l'iframe (optionnel)
- `title` - définir le titre alt pour l'iframe (facultatif, par défaut sur "Streamable")
### Output
```html
{{ streamable(id="92ok4") }}
```
{{ streamable(id="92ok4") }}

35
content/video-streaming-sites/overview-embed-streamable.md Normal file
View file

@ -0,0 +1,35 @@
+++
title = "Embed Streamable"
description = "Sample article showcasing a custom Zola shortcode for embedding Streamable Videos into your pages."
date = 2021-05-06
draft = false
[taxonomies]
tags = ["Features","Shortcodes","Video"]
[extra]
keywords = "Video, Shortcodes, Embed, Embedded, Streamable"
toc = true
series = "Features"
+++
Zola has many shortcodes, and new are easily added, this example shows streamable.
<!-- more -->
## Streamable
### Usage
```rs
{{/* streamable(id="92ok4") */}}
```
- `id`: the video id (mandatory)
- `class`: a class to add to the &lt;div&gt; surrounding the iframe (optional)
- `title` - set alt title for the iframe (optional, defaults to "Streamable")
### Output
```html
{{ streamable(id="92ok4") }}
```
{{ streamable(id="92ok4") }}

39
content/video-streaming-sites/overview-embed-vimeo.fr.md Normal file
View file

@ -0,0 +1,39 @@
+++
title = "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]
tags = ["Features","Shortcodes","Video"]
[extra]
keywords = "Video, Shortcodes, Embed, Embedded, Vimeo"
toc = true
series = "Features"
+++
Zola a de nombreux shortcodes, et de nouveaux sont facilement ajoutés, cet exemple montre vimeo.
<!-- more -->
## Vimeo
### Usage
```rs
{{/* vimeo(id="514402648") */}}
```
- `id`: l'identifiant de la vidéo (obligatoire)
- `class`: une classe à ajouter au &lt;div&gt; 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.
### Output
```html
{{ vimeo(id="514402648") }}
```
{{ vimeo(id="514402648") }}

39
content/video-streaming-sites/overview-embed-vimeo.md Normal file
View file

@ -0,0 +1,39 @@
+++
title = "Embed Vimeo"
description = "Sample article showcasing a custom Zola shortcode for embedding Vimeo Videos into your pages."
date = 2021-05-07
draft = false
[taxonomies]
tags = ["Features","Shortcodes","Video"]
[extra]
keywords = "Video, Shortcodes, Embed, Embedded, Vimeo"
toc = true
series = "Features"
+++
Zola has many shortcodes, and new are easily added, this example shows vimeo.
<!-- more -->
## Vimeo
### Usage
```rs
{{/* vimeo(id="514402648") */}}
```
- `id`: the video id (mandatory)
- `class`: a class to add to the &lt;div&gt; surrounding the iframe (optional)
- `autoplay`: when set to "true", the video autoplays on load (optional)
- `loop`: when set to "true", the video plays on a loop (optional)
- `noautopause`: when set to "true", the video will not autopause (optional)
- `title` - set alt title for the iframe (optional, defaults to "Vimeo")
- `cookie` - set to "true" if you want tracking cookies, otherwise it defaults to false.
### Output
```html
{{ vimeo(id="514402648") }}
```
{{ vimeo(id="514402648") }}

38
content/video-streaming-sites/overview-embed-youtube.fr.md Normal file
View file

@ -0,0 +1,38 @@
+++
title = "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]
tags = ["Features","Shortcodes","Video"]
[extra]
keywords = "Video, Shortcodes, Embed, Embedded, Youtube"
toc = true
series = "Features"
+++
Zola a de nombreux shortcodes, et de nouveaux sont facilement ajoutés, cet exemple montre youtube.
<!-- more -->
## Youtube
### Usage
```rs
{{/* youtube(id="32gyFIWecuw") */}}
```
- `id`: l'identifiant de la vidéo (obligatoire)
- `playlist`: l'identifiant de la playlist (optionnel)
- `class`: une classe à ajouter au &lt;div&gt; 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.
### Output
```html
{{ youtube(id="32gyFIWecuw") }}
```
{{ youtube(id="32gyFIWecuw") }}

38
content/video-streaming-sites/overview-embed-youtube.md Normal file
View file

@ -0,0 +1,38 @@
+++
title = "Embed Youtube"
description = "Sample article showcasing a custom Zola shortcode for embedding Youtube Videos into your pages."
date = 2021-05-08
draft = false
[taxonomies]
tags = ["Features","Shortcodes","Video"]
[extra]
keywords = "Video, Shortcodes, Embed, Embedded, Youtube"
toc = true
series = "Features"
+++
Zola has many shortcodes, and new are easily added, this example shows youtube.
<!-- more -->
## Youtube
### Usage
```rs
{{/* youtube(id="32gyFIWecuw") */}}
```
- `id`: the video id (mandatory)
- `playlist`: the playlist id (optional)
- `class`: a class to add to the &lt;div&gt; surrounding the iframe (optional)
- `autoplay`: when set to "true", the video autoplays on load (optional)
- `title` - set alt title for the iframe (optional, defaults to "Youtube")
- `cookie` - set to "true" if you want tracking cookies, otherwise it defaults to false.
### Output
```html
{{ youtube(id="32gyFIWecuw") }}
```
{{ youtube(id="32gyFIWecuw") }}

32
i18n/en.toml Normal file
View file

@ -0,0 +1,32 @@
language_name = "English" # Shown in language picker for multi-language sites.
date_locale = "en_US"
full_stop = "." # Used at the end of a sentence.
# Menu items should match the names in config.extra.menu
Blog = "Blog"
About = "About"
Posts = "Posts"
Tags = "Tags"
Categories = "Categories"
Contact = "Contact"
Privacy = "Privacy"
Sitemap = "Sitemap"
Search = "Search"
Updated = "Updated"
Index = "Index"
Recent = "Recent"
Powered_by = "Powered by"
and = "&"
more = "more" # "...more" read more links
series_parts = "Series" # $NUMBER_OF_PARTS Part Series : 10 Part Series
### © $CURRENT_YEAR $SITE_TITLE • Website content is licensed <a rel="noopener" target="_blank" href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
copyright_override = '© $CURRENT_YEAR $SITE_TITLE • Website content is licensed <a rel="noopener" target="_blank" href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.'
### Page not found, maybe moved or not in this language
404_not_found = "Page not found, maybe moved or not in this language"
### Try searching or
404_try_search = "Try searching or"
### go to homepage
404_go_home = "go to homepage"

32
i18n/es.toml Normal file
View file

@ -0,0 +1,32 @@
language_name = "Español" # Shown in language picker for multi-language sites.
date_locale = "es_ES"
full_stop = "." # Used at the end of a sentence.
# Menu items should match the names in config.extra.menu
Blog = "Blog"
About = "Sobre mí"
Posts = "Publicaciones"
Tags = "Etiquetas"
Categories = "Categorías"
Contact = "Contacto"
Privacy = "Privacidad"
Sitemap = "Mapa del sitio"
Search = "Buscar"
Updated = "Actualizado"
Index = "Índice"
Recent = "Reciente"
Powered_by = "Impulsado por"
and = "y"
more = "más" # "...more" read more links
series_parts = "Serie" # $NUMBER_OF_PARTS Serie de piezas : 10 Part Series
### © $CURRENT_YEAR $SITE_TITLE • Website content is licensed <a rel="noopener" target="_blank" href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
copyright_override = '© $CURRENT_YEAR $SITE_TITLE • El contenido del sitio web tiene licencia. <a rel="noopener" target="_blank" href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.'
### Page not found, maybe moved or not in this language
404_not_found = "Página no encontrada, tal vez movida o no en este idioma"
### Try searching or
404_try_search = "Intente buscar o"
### go to homepage
404_go_home = "ir a la página de inicio"

32
i18n/fr.toml Normal file
View file

@ -0,0 +1,32 @@
language_name = "Français" # Shown in language picker for multi-language sites.
date_locale = "fr_FR"
full_stop = "." # Used at the end of a sentence.
# Menu items should match the names in config.extra.menu
Blog = "Blog"
About = "Sur"
Posts = "Articles"
Tags = "Mots-clés"
Categories = "Catégories"
Contact = "Contact"
Privacy = "Confidentialité"
Sitemap = "Plan du site"
Search = "Recherche"
Updated = "Modifié"
Index = "Indice"
Recent = "Récent"
Powered_by = "Propulsé"
and = "et"
more = "plus" # "...more" read more links
series_parts = "Série" # Série de $NUMBER_OF_PARTS parties : 10 Part Series
### © $CURRENT_YEAR $SITE_TITLE • Website content is licensed <a rel="noopener" target="_blank" href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
copyright_override = '© $CURRENT_YEAR $SITE_TITLE • Le contenu du site Web est sous licence <a rel="noopener" target="_blank" href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.'
### Page not found, maybe moved or not in this language
404_not_found = "Page introuvable, peut-être déplacée ou non dans cette langue"
### Try searching or
404_try_search = "Essayez de rechercher ou"
### go to homepage
404_go_home = "allez à la page d'accueil"

98
netlify.toml Normal file
View file

@ -0,0 +1,98 @@
[build]
publish = "public"
command = "npm run abridge -- '--base-url https://abridge.netlify.app'"
[build.environment]
ZOLA_VERSION = "0.19.1"
[context.deploy-preview]
command = "npm run abridge -- '--drafts --base-url https://abridge.netlify.app'"
[[headers]]
for = "/*"
[headers.values]
X-Frame-Options = "DENY"
X-Content-Type-Options = "nosniff"
X-XSS-Protection = "1; mode=block"
Referrer-Policy = "strict-origin-when-cross-origin"
Strict-Transport-Security = "max-age=63072000; includeSubdomains"
# https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Permissions-Policy (disabled everything except autoplay, local-fonts, screen-wake-lock, speaker-selection)
# opt out of Federated Learning of Cohorts (aka "FLoC") - https://amifloced.org/
Permissions-Policy = "interest-cohort=(), accelerometer=(), ambient-light-sensor=(), battery=(), bluetooth=(), browsing-topics=(), camera=(), display-capture=(), document-domain=(), encrypted-media=(), execution-while-not-rendered=(), execution-while-out-of-viewport=(), fullscreen=(), gamepad=(), geolocation=(), gyroscope=(), hid=(), identity-credentials-get=(), idle-detection=(), magnetometer=(), microphone=(), midi=(), otp-credentials=(), payment=(), picture-in-picture=(), publickey-credentials-create=(), publickey-credentials-get=(), serial=(), storage-access=(), sync-xhr=(), usb=(), web-share=(), window-management=(), xr-spatial-tracking=()"
Content-Security-Policy = "default-src 'none'; frame-ancestors 'none'; object-src 'none'; base-uri 'self'; manifest-src 'self'; worker-src 'self'; form-action 'self'; connect-src 'self' *.hyvor.com ws://*.hyvor.com; script-src 'self' talk.hyvor.com; img-src 'self' data: talk.hyvor.com cdn.cloudflare.com; frame-src 'self' www.youtube-nocookie.com player.vimeo.com streamable.com www.streamable.com; media-src 'self' data: cdn.cloudflare.com www.youtube-nocookie.com player.vimeo.com; font-src 'self' cdn.cloudflare.com cdn.jsdelivr.net fonts.gstatic.com; style-src 'self' talk.hyvor.com cdn.cloudflare.com cdn.jsdelivr.net fonts.googleapis.com;"
[[headers]]
for = "*.js"#javascript
[headers.values]
Cache-Control = "public, max-age=604800, must-revalidate"
[[headers]]
for = "*.css"#stylesheet
[headers.values]
Cache-Control = "public, max-age=604800, must-revalidate"
[[headers]]
for = "*.svg"#image/favicon
[headers.values]
Cache-Control = "public, max-age=604800"
[[headers]]
for = "*.png"#image/favicon
[headers.values]
Cache-Control = "public, max-age=604800"
[[headers]]
for = "*.ico"#image/favicon
[headers.values]
Cache-Control = "public, max-age=604800"
[[headers]]
for = "*.jpg"#image
[headers.values]
Cache-Control = "public, max-age=604800"
[[headers]]
for = "*.jpeg"#image
[headers.values]
Cache-Control = "public, max-age=604800"
[[headers]]
for = "*.gif"#image
[headers.values]
Cache-Control = "public, max-age=604800"
[[headers]]
for = "*.webp"#image
[headers.values]
Cache-Control = "public, max-age=604800"
[[headers]]
for = "*.avif"#image
[headers.values]
Cache-Control = "public, max-age=604800"
[[headers]]
for = "*.mp4"#video
[headers.values]
Cache-Control = "public, max-age=604800"
[[headers]]
for = "*.webm"#video
[headers.values]
Cache-Control = "public, max-age=604800"
[[headers]]
for = "*.mp3"#audio
[headers.values]
Cache-Control = "public, max-age=604800"
[[headers]]
for = "*.ogg"#audio
[headers.values]
Cache-Control = "public, max-age=604800"
[[headers]]
for = "*.otf"#font
[headers.values]
Cache-Control = "public, max-age=604800"
[[headers]]
for = "*.eot"#font
[headers.values]
Cache-Control = "public, max-age=604800"
[[headers]]
for = "*.ttf"#font
[headers.values]
Cache-Control = "public, max-age=604800"
[[headers]]
for = "*.woff"#font
[headers.values]
Cache-Control = "public, max-age=604800"
[[headers]]
for = "*.woff2"#font
[headers.values]
Cache-Control = "public, max-age=604800"

17
package.json Normal file
View file

@ -0,0 +1,17 @@
{
"name": "abridge-bundle",
"version": "2.0.0",
"description": "Abridge - set PWA cache files list, bundle and minify js",
"author": "Jake G <106644+Jieiku@users.noreply.github.com>",
"license": "MIT",
"homepage": "https://github.com/Jieiku/abridge",
"scripts": {
"abridge": "node -e \"if ( require('fs').existsSync('./themes/abridge/package_abridge.js')) {require('fs').copyFileSync('./themes/abridge/package_abridge.js', './package_abridge.js')}\" && node package_abridge.js"
},
"dependencies": {
"fast-toml": "^0.5.4",
"uglify-js": "^3.17.4",
"jsonminify": "^0.4.2",
"replace-in-file": "^7.0.1"
}
}

295
package_abridge.js Normal file
View file

@ -0,0 +1,295 @@
const fs = require('fs');
const path = require("path");
const TOML = require('fast-toml');
const UglifyJS = require('uglify-js');
const jsonminify = require("jsonminify");
const replace = require('replace-in-file');
const util = require("util");
const { exec } = require("child_process");
const execPromise = util.promisify(exec);
if (!(fs.existsSync('config.toml'))) {
throw new Error('ERROR: cannot find config.toml!');
}
const tomlString = String(fs.readFileSync('config.toml'));
const data = TOML.parse(tomlString);
const js_prestyle = data.extra.js_prestyle;
const js_switcher = data.extra.js_switcher;
const js_email_encode = data.extra.js_email_encode;
const js_copycode = data.extra.js_copycode;
const search_library = data.extra.search_library;
const index_format = data.search.index_format;
const uglyurls = data.extra.uglyurls;
const js_bundle = data.extra.js_bundle;
const offline = data.extra.offline;
const online_url = data.extra.online_url;
const online_indexformat = data.extra.online_indexformat;
const pwa = data.extra.pwa;
const pwa_VER = data.extra.pwa_VER;
const pwa_NORM_TTL = data.extra.pwa_NORM_TTL;
const pwa_LONG_TTL = data.extra.pwa_LONG_TTL;
const pwa_TTL_NORM = data.extra.pwa_TTL_NORM;
const pwa_TTL_LONG = data.extra.pwa_TTL_LONG;
const pwa_TTL_EXEMPT = data.extra.pwa_TTL_EXEMPT;
const pwa_cache_all = data.extra.pwa_cache_all;
const pwa_BASE_CACHE_FILES = data.extra.pwa_BASE_CACHE_FILES;
// This is used to pass arguments to zola via npm, for example:
// npm run abridge -- "--base-url https://abridge.pages.dev"
const args = process.argv[2] ? ' '+process.argv[2] : '';
async function execWrapper(cmd) {
const { stdout, stderr } = await execPromise(cmd);
if (stdout) {
console.log(stdout);
}
if (stderr) {
console.log('ERROR: '+stderr);
}
}
async function abridge() {
if (offline === false) {
if (typeof online_url !== 'undefined' && typeof online_indexformat !== 'undefined') {
replace.sync({files: 'config.toml', from: /base_url.*=.*/g, to: "base_url = \""+online_url+"\""});
replace.sync({files: 'config.toml', from: /index_format.*=.*/g, to: "index_format = \""+online_indexformat+"\""});
}
} else if (offline === true) {
if (typeof online_url !== 'undefined' && typeof online_indexformat !== 'undefined') {
replace.sync({files: 'config.toml', from: /base_url.*=.*/g, to: "base_url = \""+__dirname+"\/public\""});
replace.sync({files: 'config.toml', from: /index_format.*=.*/g, to: "index_format = \"elasticlunr_javascript\""});
} else {
throw new Error('ERROR: offline = true requires that online_url and online_indexformat are set in config.toml, so that the base_url and index_format can be restored if offline is later set to false.');
}
}
console.log('Zola Build to generate files for minification:');
await execWrapper('zola build'+args);
//check that static/js exists, do this after zola build, it will handle creating static if missing.
var jsdir = 'static/js';
try {
fs.mkdirSync(jsdir);
} catch(e) {
if (e.code != 'EEXIST') throw e;
}
// check if abridge is used directly or as a theme.
bpath = '';
if (fs.existsSync('./themes')) {
bpath = 'themes/abridge/';
}
base_url = data.base_url;
if (base_url.slice(-1) == "/") {
base_url = base_url.slice(0, -1);
}
if (search_library === 'elasticlunr') {
if (fs.existsSync('content/static/stork_toml.md')) {
replace.sync({files: 'content/static/stork_toml.md', from: /draft.*=.*/g, to: "draft = true"});
}
if (fs.existsSync('content/static/tinysearch_json.md')) {
replace.sync({files: 'content/static/tinysearch_json.md', from: /draft.*=.*/g, to: "draft = true"});
}
} else if (search_library === 'tinysearch') {
if (!fs.existsSync('content/static/tinysearch_json.md')) {// 'content/static/tinysearch_json.md' file is missing, copy from abridge theme.
fs.copyFileSync(bpath+'content/static/tinysearch_json.md', 'content/static/tinysearch_json.md',fs.constants.COPYFILE_EXCL);
}
if (fs.existsSync('content/static/stork_toml.md')) {
replace.sync({files: 'content/static/stork_toml.md', from: /draft.*=.*/g, to: "draft = true"});
}
if (fs.existsSync('content/static/tinysearch_json.md')) {
replace.sync({files: 'content/static/tinysearch_json.md', from: /draft.*=.*/g, to: "draft = false"});
}
// zola build && mkdir -p tmp && tinysearch --optimize --path tmp public/data_tinysearch/index.html && rsync -avz tmp/*.wasm static/ && rm -rf tmp
} else if (search_library === 'stork') {
if (!fs.existsSync('content/static/stork_toml.md')) {// 'content/static/stork_toml.md' file is missing, copy from abridge theme.
fs.copyFileSync(bpath+'content/static/stork_toml.md', 'content/static/stork_toml.md',fs.constants.COPYFILE_EXCL);
}
if (fs.existsSync('content/static/stork_toml.md')) {
replace.sync({files: 'content/static/stork_toml.md', from: /draft.*=.*/g, to: "draft = false"});
}
if (fs.existsSync('content/static/tinysearch_json.md')) {
replace.sync({files: 'content/static/tinysearch_json.md', from: /draft.*=.*/g, to: "draft = true"});
}
// zola build && stork build --input public/data_stork/index.html --output static/stork.st
}
if (pwa) {// Update pwa settings, file list, and hashes.
if (typeof pwa_VER !== 'undefined' && typeof pwa_NORM_TTL !== 'undefined' && typeof pwa_LONG_TTL !== 'undefined' && typeof pwa_TTL_NORM !== 'undefined' && typeof pwa_TTL_LONG !== 'undefined' && typeof pwa_TTL_EXEMPT !== 'undefined') {
// update from abridge theme.
fs.copyFileSync(bpath+'static/sw.js', 'static/sw.js');
fs.copyFileSync(bpath+'static/js/sw_load.js', 'static/js/sw_load.js');
// Update settings in PWA javascript file, using options parsed from config.toml. sw.min.js?v=3.10.0", "++"
if (fs.existsSync('static/js/sw_load.js')) {
sw_load_min = '.js?v=';
if (js_bundle) {
sw_load_min = '.min.js?v=';
}
replace.sync({files: 'static/js/sw_load.js', from: /sw.*v=.*/g, to: "sw"+sw_load_min+pwa_VER+"\","});
}
if (fs.existsSync('static/sw.js')) {
replace.sync({files: 'static/sw.js', from: /NORM_TTL.*=.*/g, to: "NORM_TTL = "+pwa_NORM_TTL+";"});
replace.sync({files: 'static/sw.js', from: /LONG_TTL.*=.*/g, to: "LONG_TTL = "+pwa_LONG_TTL+";"});
replace.sync({files: 'static/sw.js', from: /TTL_NORM.*=.*/g, to: "TTL_NORM = ["+pwa_TTL_NORM+"];"});
replace.sync({files: 'static/sw.js', from: /TTL_LONG.*=.*/g, to: "TTL_LONG = ["+pwa_TTL_LONG+"];"});
replace.sync({files: 'static/sw.js', from: /TTL_EXEMPT.*=.*/g, to: "TTL_EXEMPT = ["+pwa_TTL_EXEMPT+"];"});
}
if (pwa_cache_all === true) {
console.log('info: pwa_cache_all = true in config.toml, so caching the entire site.\n');
// Generate array from the list of files, for the entire site.
var dir = 'public';
try {
fs.mkdirSync(dir);
} catch(e) {
if (e.code != 'EEXIST') throw e;
}
const path = './public/';
cache = 'this.BASE_CACHE_FILES = [';
files = fs.readdirSync(path, { recursive: true, withFileTypes: false })
.forEach(
(file) => {
// check if is directory, if not then add the path/file
if (!fs.lstatSync(path+file).isDirectory()) {
// format output
item = "/"+file.replace(/index\.html$/i,'');// strip index.html from path
item = item.replace(/\\/g,'/');// replace backslash with forward slash for Windows
item = item.replace(/^\/sw(\.min)?\.js/i,'');// dont cache service worker
// if formatted output is not empty line then append it to cache var
if (item != '') {// skip empty lines
cache = cache+"'"+item+"',";
}
}
}
);
cache = cache.slice(0, -1)+'];'// remove the last comma and close the array
} else if (pwa_BASE_CACHE_FILES) {
cache = 'this.BASE_CACHE_FILES = ['+pwa_BASE_CACHE_FILES+'];';
}
// update the BASE_CACHE_FILES variable in the sw.js service worker file
results = replace.sync({
files: 'static/sw.js',
from: /this\.BASE_CACHE_FILES =.*/g,
to: cache,
countMatches: true,
});
} else {
throw new Error('ERROR: pwa requires that pwa_VER, pwa_NORM_TTL, pwa_LONG_TTL, pwa_TTL_NORM, pwa_TTL_LONG, pwa_TTL_EXEMPT are set in config.toml.');
}
}
if (bpath === '') {// abridge used directly
// These are truely static js files, so they should only need to be updated by abridge maintainer or contributors.
minify(['static/js/theme.js']);
minify(['static/js/theme_light.js']);
minify(['static/js/katex.min.js','static/js/mathtex-script-type.min.js','static/js/katex-auto-render.min.js','static/js/katexoptions.js'],'static/js/katexbundle.min.js');
minify(['static/js/elasticlunr.min.js','static/js/search.js'],'static/js/search_elasticlunr.min.js');
minify(['static/js/stork.js','static/js/stork_config.js'],'static/js/search_stork.min.js');
minify(['static/js/tinysearch.js'],'static/js/search_tinysearch.min.js');
minify(['static/js/prestyle.js','static/js/theme_button.js','static/js/email.js','static/js/codecopy.js','static/js/sw_load.js'],'static/js/abridge_nosearch.min.js');
minify(['static/js/prestyle.js','static/js/theme_button.js','static/js/email.js','static/js/codecopy.js'],'static/js/abridge_nosearch_nopwa.min.js');
minify(['static/js/sw_load.js']);
minify(['static/sw.js']);
} else if (pwa) {
minify(['static/js/sw_load.js']);
minify(['static/sw.js']);
}
// if manifest.json is present, then minify it.
if (fs.existsSync('static/manifest.json')) {
let out;
try {
out = JSON.minify(fs.readFileSync('static/manifest.json', {encoding:"utf-8"}));
} catch(err) {
console.log(err);
}
fs.writeFileSync('static/manifest.min.json', out);
}
abridge_bundle = bundle(bpath,js_prestyle,js_switcher,js_email_encode,js_copycode,search_library,index_format,uglyurls,false);
minify(abridge_bundle,'static/js/abridge_nopwa.min.js');
abridge_bundle = bundle(bpath,js_prestyle,js_switcher,js_email_encode,js_copycode,search_library,index_format,uglyurls,pwa);
minify(abridge_bundle,'static/js/abridge.min.js');
console.log('Zola Build to generate new integrity hashes for the previously minified files:');
await execWrapper('zola build'+args);
}
function bundle(bpath,js_prestyle,js_switcher,js_email_encode,js_copycode,search_library,index_format,uglyurls,pwa) {
minify_files = [];
if (js_prestyle) {
minify_files.push(bpath+'static/js/prestyle.js');
}
if (js_switcher) {
minify_files.push(bpath+'static/js/theme_button.js');
}
if (js_email_encode) {
minify_files.push(bpath+'static/js/email.js');
}
if (js_copycode) {
minify_files.push(bpath+'static/js/codecopy.js');
}
if (search_library) {
if ((search_library === 'elasticlunr' && offline === true) || (search_library === 'elasticlunr' && index_format === 'elasticlunr_javascript' && uglyurls === true)) {
minify_files.push('public/search_index.en.js');
minify_files.push(bpath+'static/js/elasticlunr.min.js');
minify_files.push(bpath+'static/js/searchjavaugly.js');
} else if (search_library === 'elasticlunr' && index_format === 'elasticlunr_javascript') {
minify_files.push('public/search_index.en.js');
minify_files.push(bpath+'static/js/elasticlunr.min.js');
minify_files.push(bpath+'static/js/searchjava.js');
} else if (search_library === 'elasticlunr') {//abridge default
minify_files.push(bpath+'static/js/elasticlunr.min.js');
minify_files.push(bpath+'static/js/search.js');
} else if (search_library === 'stork') {
minify_files.push(bpath+'static/js/stork.js');
minify_files.push(bpath+'static/js/stork_config.js');
} else if (search_library === 'tinysearch') {
minify_files.push(bpath+'static/js/tinysearch.js');
}
}
if (pwa) {
minify_files.push('static/js/sw_load.js');
}
return minify_files;
}
function minify(fileA,outfile) {
const options = {
mangle: true,
compress: {
//expression: true,//Parse a single expression, rather than a program (for parsing JSON).
//global_defs: false,// a way to pass parameters
//module: true,//Process input as ES module (implies --toplevel)
//toplevel: true,//Compress and/or mangle variables in top level scope.
hoist_funs: true,//hoist function declarations
unsafe: true,
unsafe_comps: true,
unsafe_Function: true,
unsafe_math: true,
unsafe_proto: true,
unsafe_regexp: true,
unsafe_undefined: true,
drop_console: true
}
}
if (!outfile) {// outfile parameter omitted, infer based on input
outfile = fileA[0].slice(0,-2)+'min.js';
}
var filesContents = fileA.map(function (file) {// array input to support multiple files
return fs.readFileSync(file, 'utf8');
});
result = UglifyJS.minify(filesContents, options);
fs.writeFileSync(outfile, result.code);
}
abridge();

121
sass/_colors-syntax.scss Normal file
View file

@ -0,0 +1,121 @@
// Syntax Highlighting
@mixin syndark($h0,$h1,$h2,$h3,$h4,$h5,$h6,$h7,$h8,$h9,$ha) {
#{--h0}: $h0;// background color
#{--h1}: $h1;// unstyled text
#{--h2}: $h2;// comments
#{--h3}: $h3;// red, support function
#{--h4}: $h4;// orange, punctuation, constant, variable, json-key
#{--h5}: $h5;// tan, entity/function name
#{--h6}: $h6;// green, string
#{--h7}: $h7;// teal, escape character
#{--h8}: $h8;// blue, declaration, tag, property
#{--h9}: $h9;// purple, operators
#{--ha}: $ha;// mark/highlight line
}
@mixin synlight($h0,$h1,$h2,$h3,$h4,$h5,$h6,$h7,$h8,$h9,$ha) {
#{--h0}: $h0;// background color
#{--h1}: $h1;// unstyled text
#{--h2}: $h2;// comments
#{--h3}: $h3;// red, support function
#{--h4}: $h4;// orange, punctuation, constant, variable, json-key
#{--h5}: $h5;// tan, entity/function name
#{--h6}: $h6;// green, string
#{--h7}: $h7;// teal, escape character
#{--h8}: $h8;// blue, declaration, tag, property
#{--h9}: $h9;// purple, operators
#{--ha}: $ha;// mark/highlight line
}
@function color($color-syntax,$dark,$h0,$h1,$h2,$h3,$h4,$h5,$h6,$h7,$h8,$h9,$ha) {
@if $color-syntax == "charcoal" {//placeholder, this is actuall a copy of abridge syntax
@if $dark {/// Dark Syntax Colors
$h0: #191919 !default;// background color
$h1: #ddd !default;// unstyled text
$h2: #888 !default;// comments
$h3: #e65 !default;// red, support function
$h4: #e83 !default;// orange, punctuation, constant, variable, json-key
$h5: #eb6 !default;// tan, entity/function name
$h6: #ac3 !default;// green, string
$h7: #8db !default;// teal, escape character
$h8: #6ae !default;// blue, declaration, tag, property
$h9: #d6e !default;// purple, operators
$ha: 160% !default;// mark/highlight line
$result: $h0 $h1 $h2 $h3 $h4 $h5 $h6 $h7 $h8 $h9 $ha;
@return $result;
} @else {/// Light Syntax Colors
$h0: #f7f7f7 !default;// background color
$h1: #222 !default;// unstyled text
$h2: #666 !default;// comments
$h3: #a21 !default;// red, support function
$h4: #930 !default;// orange, punctuation, constant, variable, json-key
$h5: #a50 !default;// tan, entity/function name
$h6: #350 !default;// green, string
$h7: #286 !default;// teal, escape character
$h8: #059 !default;// blue, declaration, tag, property
$h9: #a3c !default;// purple, operators
$ha: 92% !default;// mark/highlight line
$result: $h0 $h1 $h2 $h3 $h4 $h5 $h6 $h7 $h8 $h9 $ha;
@return $result;
}
} @else if $color-syntax == "dracula" {//placeholder, this is actuall a copy of abridge syntax
@if $dark {/// Dark Syntax Colors
$h0: #191919 !default;// background color
$h1: #ddd !default;// unstyled text
$h2: #888 !default;// comments
$h3: #e65 !default;// red, support function
$h4: #e83 !default;// orange, punctuation, constant, variable, json-key
$h5: #eb6 !default;// tan, entity/function name
$h6: #ac3 !default;// green, string
$h7: #8db !default;// teal, escape character
$h8: #6ae !default;// blue, declaration, tag, property
$h9: #d6e !default;// purple, operators
$ha: 160% !default;// mark/highlight line
$result: $h0 $h1 $h2 $h3 $h4 $h5 $h6 $h7 $h8 $h9 $ha;
@return $result;
} @else {/// Light Syntax Colors
$h0: #f7f7f7 !default;// background color
$h1: #222 !default;// unstyled text
$h2: #666 !default;// comments
$h3: #a21 !default;// red, support function
$h4: #930 !default;// orange, punctuation, constant, variable, json-key
$h5: #a50 !default;// tan, entity/function name
$h6: #350 !default;// green, string
$h7: #286 !default;// teal, escape character
$h8: #059 !default;// blue, declaration, tag, property
$h9: #a3c !default;// purple, operators
$ha: 92% !default;// mark/highlight line
$result: $h0 $h1 $h2 $h3 $h4 $h5 $h6 $h7 $h8 $h9 $ha;
@return $result;
}
} @else {//abridge syntax colors (default)
@if $dark {/// Dark Syntax Colors
$h0: #191919 !default;// background color
$h1: #ddd !default;// unstyled text
$h2: #888 !default;// comments
$h3: #e65 !default;// red, support function
$h4: #e83 !default;// orange, punctuation, constant, variable, json-key
$h5: #eb6 !default;// tan, entity/function name
$h6: #ac3 !default;// green, string
$h7: #8db !default;// teal, escape character
$h8: #6ae !default;// blue, declaration, tag, property
$h9: #d6e !default;// purple, operators
$ha: 160% !default;// mark/highlight line
$result: $h0 $h1 $h2 $h3 $h4 $h5 $h6 $h7 $h8 $h9 $ha;
@return $result;
} @else {/// Light Syntax Colors
$h0: #f7f7f7 !default;// background color
$h1: #222 !default;// unstyled text
$h2: #666 !default;// comments
$h3: #a21 !default;// red, support function
$h4: #930 !default;// orange, punctuation, constant, variable, json-key
$h5: #a50 !default;// tan, entity/function name
$h6: #350 !default;// green, string
$h7: #286 !default;// teal, escape character
$h8: #059 !default;// blue, declaration, tag, property
$h9: #a3c !default;// purple, operators
$ha: 92% !default;// mark/highlight line
$result: $h0 $h1 $h2 $h3 $h4 $h5 $h6 $h7 $h8 $h9 $ha;
@return $result;
}
}
}

136
sass/_colors.scss Normal file
View file

@ -0,0 +1,136 @@
@mixin dark($cs,$f1,$f2,$c1,$c2,$c3,$c4,$a1,$a2,$a3,$a4,$cg,$cr) {
#{--cs}: $cs;// color-scheme Variable for scrollbars, required for Chrome.
#{--f1}: $f1;// Font Color Primary
#{--f2}: $f2;// Font Color Headers
#{--c1}: $c1;// Background Color Primary
#{--c2}: $c2;// Background Color Secondary
#{--c3}: $c3;// Table Rows, Block quote edge, Borders
#{--c4}: $c4;// Disabled Buttons, Borders, mark background
#{--a1}: $a1;// link color
#{--a2}: $a2;// link hover/focus color
#{--a3}: $a3;// link h1-h2 hover/focus color
#{--a4}: $a4;// link visited color
#{--cg}: $cg;// ins green, success
#{--cr}: $cr;// del red, errors
}
@mixin light($cs,$f1,$f2,$c1,$c2,$c3,$c4,$a1,$a2,$a3,$a4,$cg,$cr) {
#{--cs}: $cs;// color-scheme Variable for scrollbars, required for Chrome.
#{--f1}: $f1;// Font Color Primary
#{--f2}: $f2;// Font Color Headers
#{--c1}: $c1;// Background Color Primary
#{--c2}: $c2;// Background Color Secondary
#{--c3}: $c3;// Table Rows, Block quote edge, Borders
#{--c4}: $c4;// Disabled Buttons, Borders, mark background
#{--a1}: $a1;// link color
#{--a2}: $a2;// link hover/focus color
#{--a3}: $a3;// link h1-h2 hover/focus color
#{--a4}: $a4;// link visited color
#{--cg}: $cg;// ins green, success
#{--cr}: $cr;// del red, errors
}
@function color($color,$dark,$cs,$f1,$f2,$c1,$c2,$c3,$c4,$a1,$a2,$a3,$a4,$cg,$cr) {
@if $color == "blue" {
@if $dark {/// Dark Colors
$cs: dark !default;// color-scheme Variable for scrollbars, required for Chrome.
$f1: #ccc !default;// Font Color Primary
$f2: #ddd !default;// Font Color Headers
$c1: #111 !default;// Background Color Primary
$c2: #222 !default;// Background Color Secondary
$c3: #333 !default;// Table Rows, Block quote edge, Borders
$c4: #888 !default;// Disabled Buttons, Borders, mark background
$a1: #09f !default;// link color
$a2: #0bf !default;// link hover/focus color
$a3: #0af !default;// link h1-h2 hover/focus color
$a4: #09f !default;// link visited color
$cg: #593 !default;// ins green, success
$cr: #e33 !default;// del red, errors
$result: $cs $f1 $f2 $c1 $c2 $c3 $c4 $a1 $a2 $a3 $a4 $cg $cr;
@return $result;
} @else {/// Light Colors
$cs: light !default;// color-scheme Variable for scrollbars, required for Chrome.
$f1: #333 !default;// Font Color Primary
$f2: #222 !default;// Font Color Headers
$c1: #fff !default;// Background Color Primary
$c2: #eee !default;// Background Color Secondary
$c3: #ddd !default;// Table Rows, Block quote edge, Borders
$c4: #555 !default;// Disabled Buttons, Borders, mark background
$a1: #06e !default;// link color
$a2: #09f !default;// link hover/focus color
$a3: #07f !default;// link h1-h2 hover/focus color
$a4: #06e !default;// link visited color
$cg: #373 !default;// ins green, success
$cr: #d33 !default;// del red, errors
$result: $cs $f1 $f2 $c1 $c2 $c3 $c4 $a1 $a2 $a3 $a4 $cg $cr;
@return $result;
}
} @else if $color == "blueshade" {
@if $dark {/// Dark Colors
$cs: dark !default;// color-scheme Variable for scrollbars, required for Chrome.
$f1: #ccc !default;// Font Color Primary
$f2: #ddd !default;// Font Color Headers
$c1: #111 !default;// Background Color Primary
$c2: #123 !default;// Background Color Secondary
$c3: #345 !default;// Table Rows, Block quote edge, Borders
$c4: #789 !default;// Disabled Buttons, Borders, mark background
$a1: #09f !default;// link color
$a2: #0bf !default;// link hover/focus color
$a3: #0af !default;// link h1-h2 hover/focus color
$a4: #09f !default;// link visited color
$cg: #593 !default;// ins green, success
$cr: #e33 !default;// del red, errors
$result: $cs $f1 $f2 $c1 $c2 $c3 $c4 $a1 $a2 $a3 $a4 $cg $cr;
@return $result;
} @else {/// Light Colors
$cs: light !default;// color-scheme Variable for scrollbars, required for Chrome.
$f1: #333 !default;// Font Color Primary
$f2: #222 !default;// Font Color Headers
$c1: #fff !default;// Background Color Primary
$c2: #def !default;// Background Color Secondary
$c3: #cde !default;// Table Rows, Block quote edge, Borders
$c4: #013 !default;// Disabled Buttons, Borders, mark background
$a1: #06e !default;// link color
$a2: #09f !default;// link hover/focus color
$a3: #07f !default;// link h1-h2 hover/focus color
$a4: #06e !default;// link visited color
$cg: #373 !default;// ins green, success
$cr: #d33 !default;// del red, errors
$result: $cs $f1 $f2 $c1 $c2 $c3 $c4 $a1 $a2 $a3 $a4 $cg $cr;
@return $result;
}
} @else {//orange (default)
@if $dark {/// Dark Colors
$cs: dark !default;// color-scheme Variable for scrollbars, required for Chrome.
$f1: #ccc !default;// Font Color Primary
$f2: #ddd !default;// Font Color Headers
$c1: #111 !default;// Background Color Primary
$c2: #222 !default;// Background Color Secondary
$c3: #333 !default;// Table Rows, Block quote edge, Borders
$c4: #888 !default;// Disabled Buttons, Borders, mark background
$a1: #f90 !default;// link color
$a2: #fb0 !default;// link hover/focus color
$a3: #f90 !default;// link h1-h2 hover/focus color
$a4: #f90 !default;// link visited color
$cg: #593 !default;// ins green, success
$cr: #e33 !default;// del red, errors
$result: $cs $f1 $f2 $c1 $c2 $c3 $c4 $a1 $a2 $a3 $a4 $cg $cr;
@return $result;
} @else {/// Light Colors
$cs: light !default;// color-scheme Variable for scrollbars, required for Chrome.
$f1: #333 !default;// Font Color Primary
$f2: #222 !default;// Font Color Headers
$c1: #fff !default;// Background Color Primary
$c2: #eee !default;// Background Color Secondary
$c3: #ddd !default;// Table Rows, Block quote edge, Borders
$c4: #555 !default;// Disabled Buttons, Borders, mark background
$a1: #c40 !default;// link color
$a2: #e60 !default;// link hover/focus color
$a3: #f90 !default;// link h1-h2 hover/focus color
$a4: #c40 !default;// link visited color
$cg: #373 !default;// ins green, success
$cr: #d33 !default;// del red, errors
$result: $cs $f1 $f2 $c1 $c2 $c3 $c4 $a1 $a2 $a3 $a4 $cg $cr;
@return $result;
}
}
}

139
sass/_functions.scss Normal file
View file

File diff suppressed because one or more lines are too long

1615
sass/abridge.scss Normal file
View file

File diff suppressed because it is too large Load diff

17
sass/fonts/_Arimo.scss Normal file
View file

@ -0,0 +1,17 @@
@font-face {
font-family: 'Arimo';
src: local("Arimo"), url("fonts/Arimo.woff2");//latin regular
font-display: swap;
}
@font-face {
font-family: 'Arimo';
src: local("Arimo-Italic"), url("fonts/Arimo-Italic.woff2");//latin italic
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Arimo';
src: local("Arimo-Bold"), url("fonts/Arimo-Bold.woff2");//latin bold
font-weight: bold;
font-display: swap;
}

11
sass/fonts/_Roboto-Mono.scss Normal file
View file

@ -0,0 +1,11 @@
@font-face {
font-family: 'Roboto Mono';
src: local("Roboto Mono"), local("Roboto-Mono"), local("RobotoMono"), local("Roboto-Mono-Regular"), local("RobotoMono-Regular"), url("fonts/Roboto-Mono.woff2");//latin regular
font-display: swap;
}
@font-face {
font-family: 'Roboto Mono';
src: local("Roboto Mono Italic"), local("Roboto-Mono-Italic"), local("RobotoMono-Italic"), url("fonts/Roboto-Mono-Italic.woff2");//latin italic
font-style: italic;
font-display: swap;
}

17
sass/fonts/_Roboto.scss Normal file
View file

@ -0,0 +1,17 @@
@font-face {
font-family: 'Roboto';
src: local("Roboto"), url("fonts/Roboto.woff2");//latin regular
font-display: swap;
}
@font-face {
font-family: 'Roboto';
src: local("Roboto-Italic"), url("fonts/Roboto-Italic.woff2");//latin italic
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Roboto';
src: local("Roboto-Bold"), url("fonts/Roboto-Bold.woff2");//latin bold
font-weight: bold;
font-display: swap;
}

BIN
screenshot.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 55 KiB

68
static/_headers Normal file
View file

@ -0,0 +1,68 @@
# This _headers file is used to set headers on cloudflare pages: https://developers.cloudflare.com/pages/configuration/headers/
# https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Permissions-Policy (disabled everything except autoplay, local-fonts, screen-wake-lock, speaker-selection)
# opt out of Federated Learning of Cohorts (aka "FLoC") - https://amifloced.org/
/*
X-Frame-Options: DENY
X-Content-Type-Options: nosniff
X-XSS-Protection: 1; mode=block
Referrer-Policy: strict-origin-when-cross-origin
Strict-Transport-Security: max-age=63072000; includeSubdomains
Permissions-Policy: interest-cohort=(), accelerometer=(), ambient-light-sensor=(), battery=(), bluetooth=(), browsing-topics=(), camera=(), display-capture=(), document-domain=(), encrypted-media=(), execution-while-not-rendered=(), execution-while-out-of-viewport=(), fullscreen=(), gamepad=(), geolocation=(), gyroscope=(), hid=(), identity-credentials-get=(), idle-detection=(), magnetometer=(), microphone=(), midi=(), otp-credentials=(), payment=(), picture-in-picture=(), publickey-credentials-create=(), publickey-credentials-get=(), serial=(), storage-access=(), sync-xhr=(), usb=(), web-share=(), window-management=(), xr-spatial-tracking=()
Content-Security-Policy: default-src 'none'; frame-ancestors 'none'; object-src 'none'; base-uri 'self'; manifest-src 'self'; worker-src 'self'; form-action 'self'; connect-src 'self' *.hyvor.com ws://*.hyvor.com; script-src 'self' talk.hyvor.com; img-src 'self' data: talk.hyvor.com cdn.cloudflare.com; frame-src 'self' www.youtube-nocookie.com player.vimeo.com streamable.com www.streamable.com; media-src 'self' data: cdn.cloudflare.com www.youtube-nocookie.com player.vimeo.com; font-src 'self' cdn.cloudflare.com cdn.jsdelivr.net fonts.gstatic.com; style-src 'self' talk.hyvor.com cdn.cloudflare.com cdn.jsdelivr.net fonts.googleapis.com;
/*.js
Cache-Control: public, max-age=604800, must-revalidate
/*.css
Cache-Control: public, max-age=604800, must-revalidate
/*.svg
Cache-Control: public, max-age=604800
/*.png
Cache-Control: public, max-age=604800
/*.ico
Cache-Control: public, max-age=604800
/*.jpg
Cache-Control: public, max-age=604800
/*.jpeg
Cache-Control: public, max-age=604800
/*.gif
Cache-Control: public, max-age=604800
/*.webp
Cache-Control: public, max-age=604800
/*.avif
Cache-Control: public, max-age=604800
/*.mp4
Cache-Control: public, max-age=604800
/*.webm
Cache-Control: public, max-age=604800
/*.mp3
Cache-Control: public, max-age=604800
/*.ogg
Cache-Control: public, max-age=604800
/*.otf
Cache-Control: public, max-age=604800
/*.eot
Cache-Control: public, max-age=604800
/*.ttf
Cache-Control: public, max-age=604800
/*.woff
Cache-Control: public, max-age=604800
/*.woff2
Cache-Control: public, max-age=604800

BIN
static/android-chrome-192x192.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
static/android-chrome-512x512.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.8 KiB

BIN
static/apple-touch-icon.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
static/banner.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 4.4 KiB

9
static/browserconfig.xml Normal file
View file

@ -0,0 +1,9 @@
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square150x150logo src="/mstile-150x150.png"/>
<TileColor>#333333</TileColor>
</tile>
</msapplication>
</browserconfig>

BIN
static/favicon-16x16.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 366 B

BIN
static/favicon-32x32.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 395 B

BIN
static/favicon.ico Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.9 KiB

1
static/favicon.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#f90" viewBox="0 0 96 96"><path stroke-width="14" d="M14 99 46 7h4l32 92"/><path stroke-width="9" d="M-3 82c43-26 59-26 102 0"/><path stroke-linecap="round" stroke-width="1.5" d="M94 72v7m-5-9.8v7m-5-9.8v7.1M79 64v7M63 57.7v7m-5-8.2v7m-5-7.8v7m-5-7.2v7m-5-6.7v7m-5-6.3v7m-5-5.8v7M17 64v7m-5-4.6v7m-5-4.2v7M2 72v7"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 381 B

BIN
static/fonts/KaTeX_AMS-Regular.woff2 Normal file
View file

Binary file not shown.

BIN
static/fonts/KaTeX_Caligraphic-Bold.woff2 Normal file
View file

Binary file not shown.

BIN
static/fonts/KaTeX_Caligraphic-Regular.woff2 Normal file
View file

Binary file not shown.

BIN
static/fonts/KaTeX_Fraktur-Bold.woff2 Normal file
View file

Binary file not shown.

BIN
static/fonts/KaTeX_Fraktur-Regular.woff2 Normal file
View file

Binary file not shown.

BIN
static/fonts/KaTeX_Main-Bold.woff2 Normal file
View file

Binary file not shown.

BIN
static/fonts/KaTeX_Main-BoldItalic.woff2 Normal file
View file

Binary file not shown.

BIN
static/fonts/KaTeX_Main-Italic.woff2 Normal file
View file

Binary file not shown.

Some files were not shown because too many files have changed in this diff Show more