From 940b40688a7cf595eee061b696187e2fe4a578e2 Mon Sep 17 00:00:00 2001 From: Jieiku Date: Mon, 22 May 2023 22:31:34 -0700 Subject: Json-Index and config.toml optional --- config.toml | 391 ++++++++++++++++++++--------------- sass/_imports.scss | 7 + sass/abridge-auto.scss | 31 +++ sass/abridge-blue-dark.scss | 21 -- sass/abridge-blue-light.scss | 21 -- sass/abridge-blue-switcher.scss | 34 --- sass/abridge-blue.scss | 36 ---- sass/abridge-blueshade-dark.scss | 21 -- sass/abridge-blueshade-light.scss | 21 -- sass/abridge-blueshade-switcher.scss | 34 --- sass/abridge-blueshade.scss | 36 ---- sass/abridge-dark.scss | 29 ++- sass/abridge-light.scss | 29 ++- sass/abridge-switcher.scss | 34 --- sass/abridge.scss | 59 +++--- sass/font.scss | 5 - sass/fonts/_Abridge.scss | 7 +- sass/fonts/_Roboto-Mono.scss | 11 + sass/include/_embedded.scss | 4 +- sass/include/_hr.scss | 2 +- sass/include/_icons.scss | 2 +- sass/include/_nav.scss | 2 +- sass/include/_sectioning.scss | 4 +- static/font/Roboto-Mono-Italic.woff2 | Bin 0 -> 13572 bytes static/font/Roboto-Mono.woff2 | Bin 0 -> 12312 bytes static/search.js | 20 +- templates/base.html | 19 +- templates/index.html | 3 +- templates/macros/head.html | 240 ++++++++++----------- templates/macros/macros.html | 20 +- templates/macros/social.html | 2 +- templates/page.html | 3 +- 32 files changed, 492 insertions(+), 656 deletions(-) create mode 100644 sass/abridge-auto.scss delete mode 100644 sass/abridge-blue-dark.scss delete mode 100644 sass/abridge-blue-light.scss delete mode 100644 sass/abridge-blue-switcher.scss delete mode 100644 sass/abridge-blue.scss delete mode 100644 sass/abridge-blueshade-dark.scss delete mode 100644 sass/abridge-blueshade-light.scss delete mode 100644 sass/abridge-blueshade-switcher.scss delete mode 100644 sass/abridge-blueshade.scss delete mode 100644 sass/abridge-switcher.scss delete mode 100644 sass/font.scss create mode 100644 sass/fonts/_Roboto-Mono.scss create mode 100644 static/font/Roboto-Mono-Italic.woff2 create mode 100644 static/font/Roboto-Mono.woff2 diff --git a/config.toml b/config.toml index aebb62b..715e18e 100644 --- a/config.toml +++ b/config.toml @@ -1,14 +1,14 @@ # do NOT include a trailing slash on the base URL for web urls base_url = "https://abridge.netlify.app" -#base_url = "/home/jieiku/.dev/abridge/public/" # for locally usable build directly from disk, also set in [extra] section uglyurls = true -title = "Abridge" -description = "Abridge is a fast and lightweight Zola theme using semantic html, abridge.css class-light CSS, and No Mandatory JS." -default_language = "en" +#base_url = "/home/jieiku/.dev/abridge/public/" # Usable site directly from disk, also set in [extra] uglyurls = true +#title = "Abridge" +#description = "Abridge is a fast and lightweight Zola theme using semantic html, abridge.css class-light CSS, and No Mandatory JS." +#default_language = "en" output_dir = "public" compile_sass = true -minify_html = false -generate_feed = true -feed_filename = "atom.xml" +#minify_html = false +#generate_feed = true +#feed_filename = "atom.xml" #ignored_content = ["*.{graphml,xlsx}", "temp.*"] #hard_link_static = false # set to true to hard link instead of copying, useful for very large files. taxonomies = [ @@ -20,202 +20,259 @@ taxonomies = [ build_search_index = true [search] # Options specific to elasticlunr search. +index_format = "elasticlunr_json" include_title = true # include title of page/section in index include_description = false # include description of page/section in index include_content = true # include rendered content of page/section in index -# Truncate content at nth character. Useful if index size significantly slows down the site. -# truncate_content_length = 100 - -[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 - -[extra] -uglyurls = false # if set to true then links are generated with the full path. eg https://abridge.netlify.app/index.html -language_code = "en-US" -title_separator = "|" # Separator between title and title_addition, set as |, -, _, etc -# 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 the below line (not recommend, bad for SEO) -title_addition = "Fast & Lightweight Zola Theme" # a default value for title addition -recent = true # TOC / index -recent_items = 9 -author = "Jake G" # Put Your Name here - -title_size_index = "s85" # size: s95, s90, s85, s80, s75, s70, false(full size) -meta_index = { position="bottom", size="s90", author=false, readtime=false, readstring="min", date=true, categories_tags=true, divider=" " } -meta_post = { position="top", size="s95", author=true, readtime=false, readstring="min read", date=true, categories_tags=true, divider=" " } -## position: top, bottom, both, false(hidden) ## size: s95, s90, s85, s80, s75, s70, false(full size) -## divider: "·" "•" " " - -footer_size = "s90" # size: s95, s90, s85, s80, s75, s70, false(full size) -footer_credit = true +# 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 + +#[extra] +#uglyurls = false # if set to true then links are generated with the full path. eg https://abridge.netlify.app/index.html +#language_code = "en-US" + + +############################################################################### +### 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 = "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 + + +############################################################################### +### Layout & Format +### position: top, bottom, both, false(hidden) +### size: s95, s90, s85, s80, s75, s70, false(full size) +### divider: " " "·" "•" +############################################################################### + +#recent = true # TOC / index +#recent_items = 9 + +#meta_index = { position="bottom", size="s90", author=false, readtime=false, readstring="min", date=true, categories_tags=true, divider=" " } +#meta_post = { position="top", size="s95", author=true, readtime=false, readstring="min read", date=true, categories_tags=true, divider=" " } + +#title_size_index = "s85" # size: s95, s90, s85, s80, s75, s70, false(full size) +#footer_size = "s90" # size: s95, s90, s85, s80, s75, s70, false(full size) +#footer_credit = false #footer_credit_override = '

Powered by Zola & Abridge

' -#uncomment one of the two lines, or neither, depending on which type of logo you want to use: +### 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 = 'Abridge' -textlogo = 'bridge' +#textlogo = 'bridge' -sitedesc = false # enables or disables the display of the site description below the logo. +#sitedesc = false # enables or disables the display of the site description below the logo. #copyright_start_year = 2019 # optional #copyright_end_year = 2020 # optional, recommend leaving unset, zola build will set this to current year by default -headhr = false # show or hide horizontal rule below header -foothr = true # show or hide horizontal rule above footer - -menu = [ - {url = "/about/", name = "About", slash = true, blank = false}, - {url = "/posts/", name = "Posts", slash = true, blank = false}, - {url = "/categories/", name = "Categories", slash = true, blank = false}, - {url = "/tags/", name = "Tags", slash = true, blank = false}, -] -menu_footer = [ - {url = "/about/", name = "About", slash = true, blank = false}, - {url = "/contact/", name = "Contact", slash = true, blank = false}, - {url = "/privacy/", name = "Privacy", slash = true, blank = false}, - {url = "/sitemap.xml", name = "Sitemap", slash = false, blank = true}, -] +#headhr = false # show or hide horizontal rule below header +#foothr = true # show or hide horizontal rule above footer -# 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. -# Comment out either of these meta headers and they wont be used. +#menu = [ +# {url = "/about/", name = "About", slash = true, blank = false}, +# {url = "/posts/", name = "Posts", slash = true, blank = false}, +# {url = "/categories/", name = "Categories", slash = true, blank = false}, +# {url = "/tags/", name = "Tags", slash = true, blank = false}, +#] +#menu_footer = [ +# {url = "/about/", name = "About", slash = true, blank = false}, +# {url = "/contact/", name = "Contact", slash = true, blank = false}, +# {url = "/privacy/", name = "Privacy", slash = true, blank = false}, +# {url = "/sitemap.xml", name = "Sitemap", slash = false, blank = true}, +#] -#security_header_referrer = "strict-origin-when-cross-origin" -#security_header_csp = "default-src 'none'; frame-ancestors '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' 'unsafe-inline' cdn.cloudflare.com cdn.jsdelivr.net fonts.googleapis.com;" +############################################################################### +### Resource Files +### You can load extra css files if you need to, just separate by comma: +### stylesheets = [ "abridge.css", "extra.css" ] +############################################################################### + +#integrity = true # increases site security, should normally be true. (setting to false is useful during js development) +#js_bundle = false # multiple javascript files combined into a single file (setting to false is useful during js development) + +#js_switcher = true # The button that allows manually changing between light/dark mode. + +#search_library = false # search library to use, valid values are: false, "elasticlunr", "tinysearch", "stork" (false/elasticlunr causes issues) -################# -# Resource Files -################# -integrity = true # setting this to false is useful for developing, should normally be true. -js_bundle = true # multiple javascript files combined into a single file -js_switcher = true -js_search_facade = true # Do not load search until user interaction with search. -# search library to use, valid values are: false, "elasticlunr", "tinysearch", "stork" -search_library = false - -js_search_index = "search_index.en.js" # Separate Always, generated each build -js_prestyle = "prestyle.js"# Bundleable - used to preload: FontAwesome, Katex, external Google Fonts -js_codecopy = "codecopy.js"# Bundleable -js_email = "email.js"# Bundleable -js_theme = "theme.min.js" # Separate Always, comment out if using -auto/-light/-dark stylesheet. (required for switcher) -js_themeButton = "theme_button.js"# Bundleable +#js_search_index = "search_index.en.json" # Separate Always, generated each build +#js_theme = "theme.min.js" # Separate Always, comment out if using -auto/-light/-dark stylesheet. (required for switcher) +#js_themeButton = "theme_button.js"# Bundleable - light/dark switcher button +#js_prestyle = "prestyle.js"# Bundleable - used to preload: FontAwesome, Katex, external Google Fonts +#js_codecopy = "codecopy.js"# Bundleable - copy code block to clipboard button +#js_email = "email.js"# Bundleable - obfuscates email address in footer ########## Switcher ########## (comment this block out if NOT using switcher): -stylesheets = [ "abridge-switcher.css" ] # Orange Automatic Dark/Light Theme based on browser/system preference with switcher -#stylesheets = [ "abridge-blue-switcher.css" ] # Blue Automatic Night/Light Theme based on browser/system preference with switcher -#stylesheets = [ "abridge-blueshade-switcher.css" ] # BlueShade Automatic Night/Light Theme based on browser/system preference with switcher -#stylesheets = [ "abridge-switcher.css", "font.css" ] # include your own font! -#stylesheets = [ "abridge-switcher.css", "iconfont.css" ] # include your own font icons! -#stylesheets = [ "abridge-switcher.css", "font.css", "iconfont.css" ] # include your own font, and font icons! +#stylesheets = [ "abridge.css" ] # Orange Automatic Dark/Light Theme based on browser/system preference with switcher ########## No Switcher ########## -#stylesheets = [ "abridge.css" ] # Orange Automatic Dark/Light Theme based on browser/system preference -#stylesheets = [ "abridge-blue.css" ] # Blue Automatic Night/Light Theme based on browser/system preference -#stylesheets = [ "abridge-blueshade.css" ] # BlueShade Automatic Night/Light Theme based on browser/system preference +#stylesheets = [ "abridge-auto.css" ] # Orange Automatic Dark/Light Theme based on browser/system preference #stylesheets = [ "abridge-dark.css" ] # Orange Dark Theme #stylesheets = [ "abridge-light.css" ] # Orange Light Theme -#stylesheets = [ "abridge-blue-dark.css" ] # Blue Dark Theme -#stylesheets = [ "abridge-blue-light.css" ] # Blue Light Theme -#stylesheets = [ "abridge-blueshade-dark.css" ] # BlueShade Dark Theme -#stylesheets = [ "abridge-blueshade-light.css" ] # BlueShade Light Theme -#stylesheets = [ "abridge.css", "extra.css" ] # example loading extra css -#stylesheets = [ "abridge.css", "syntax/syntax-abridge.css" ] - -banner = "banner.png" # Used as default image for OpenGraph/Twitter if page specific image is undefined. -# favicons, comment out a line to disable loading some or all of these. -favicon_theme_color = "#333333" -favicon_ms_color = "#333333" -favicon_webmanifest = "site.webmanifest" # Used for android-chrome-512x512.png and android-chrome-192x192.png -favicon_mask = "safari-pinned-tab.svg" # safari-pinned-tab.svg -favicon_mask_color = "#ff9900" -favicon180 = "apple-touch-icon.png" # apple-touch-icon.png -favicon32 = "favicon-32x32.png" # favicon-32x32.png -favicon16 = "favicon-16x16.png" # favicon-16x16.png - -icon_search = "svgs 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. - -# Uncomment below line to load fontawesome, eg: -#fontawesome = "https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.1/css/all.min.css" -# Icons, by default fontawesome classes, but you can specify any icon you want here. + +############################################################################### +### Favicons, comment out a line to disable loading some or all of these if needed. +############################################################################### + +#favicon_theme_color = "#333333" +#favicon_ms_color = "#333333" +#favicon_webmanifest = "site.webmanifest" # Used for android-chrome-512x512.png and android-chrome-192x192.png +#favicon_mask = "safari-pinned-tab.svg" # safari-pinned-tab.svg +#favicon_mask_color = "#ff9900" +#favicon180 = "apple-touch-icon.png" # apple-touch-icon.png +#favicon32 = "favicon-32x32.png" # favicon-32x32.png +#favicon16 = "favicon-16x16.png" # favicon-16x16.png + + +############################################################################### +### 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 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. -# For externally loaded Fonts, make sure to include the FULL url including the http/https prefix -#fonts = [ {url = "https://fonts.googleapis.com/css?family=Montserrat:400,700,italic|Fira+Code:400,italic"} ] +### Uncomment below line to load fontawesome, eg: +#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. + + +############################################################################### +### Footer social links; these are used in macros/social.html +### https://github.com/Jieiku/abridge/blob/master/templates/macros/social.html +############################################################################### + +#[extra.social] +#feed = true # this adds the RSS feed icon in the footer. +#mail_encode = true # This obfuscates your email address, javascript is used to decode it at page load. +#mail = "name@example.com" +#mastodon = "@your-user-name" +#element = "matrix.example.com" +#matrix = "matrix.example.com" +#buymeacoffee = "your-user-name" +#discord = "your-discord" # Everything after https://discord.com/ eg: invite/my-server *or* servers/my-server-id +#twitter = "your-user-name" +#facebook = "your-user-name" +#linkedin = "your-user-name" +#gitlab = "your-user-name" +#github = "your-user-name" +#codeberg = "your-user-name" # Everything after https://codeberg.org/ eg: username *or* username/repository +#github_sponsor = "your-user-name" +#bitbucket = "your-user-name" +#python = "your-user-name" +#docker = "your-user-name" +#stack = "your-user-name" +#instagram = "your-user-name" +#pinterest = "your-user-name" +#twitch = "your-user-name" +#youtube = "channel/your-channel-id" +#researchgate = "your-profile-id" + + +############################################################################### +### Security Settings +### Security Headers should preferably be set by your webserver (Nginx, Apache) +### 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'; frame-ancestors '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' 'unsafe-inline' 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/ +### The System Font Stack offers the best performance, but if you need you can load a specific font. +############################################################################### + +### 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/blob/master/sass/fonts/_Roboto.scss +### To import one include in the imports file: https://github.com/Jieiku/abridge/blob/master/sass/_imports.scss + +### After importing 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) -# Local fonts are defined in the css, defining them here only adds the preload tag to the head. -# preload will eliminate Content Layout Shift, but will hurt with page load time. (not recommended) #fonts = [ -# {url = "font/FiraCode.woff2"}, +# {url = "font/Roboto-Mono.woff2"}, +# {url = "font/Roboto-Mono-Italic.woff2"}, # {url = "font/Roboto.woff2"}, # {url = "font/Roboto-Italic.woff2"}, # {url = "font/Roboto-Bold.woff2"}, #] -math = false # katex math js library, used to to render mathematical notations, requires javascript -math_auto_render = false +############################################################################### +### 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 = "katexoptions.js" +#katex_bundle = "katexbundle.min.js" + +### Load Katex Local Resources +#katex_css = "katex.min.css" # Fonts - load the css/fonts locally +#katex_js = "katex.min.js" # use local js, so that we dont have to whitelist cdn.jsdelivr.net for script src in CSP +#mathtex_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 = "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" -katex_css = "katex.min.css" # Fonts - to load the css locally, you also need to have all the fonts. -katex_js = "katex.min.js" # use local js, so that we dont have to whitelist cdn.jsdelivr.net for script src in CSP -mathtex_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 = "auto-render.min.js" -katex_options = "katexoptions.js" -katex_bundle = "katexbundle.min.js" - - -########################## -# meta/seo/analytic tags -########################## -keywords = "Abridge, Abridge.css, Zola, Theme, Zola Theme, getzola, Semantic Html, Fast, lightweight" # used for the primary site index -twitter = "your-user-name" # used for twitter related -#google = "Your Google Site verification code." -#bing = "Your Bing Site verification code." -seo = true # enable or disable seo-related meta tags: opengraph, facebook, twitter - -# Footer social links; full options listed in macros/social.html -[extra.social] -feed = true -mail_encode = true # This obfuscates your email address, javascript is used to decode it at page load. -mail = "name@example.com" -mastodon = "@your-user-name" -element = "matrix.example.com" -#matrix = "matrix.example.com" -buymeacoffee = "your-user-name" -discord = "your-discord" # Everything after https://discord.com/ eg: invite/my-server *or* servers/my-server-id -twitter = "your-user-name" -facebook = "your-user-name" -linkedin = "your-user-name" -gitlab = "your-user-name" -github = "your-user-name" -codeberg = "your-user-name" # Everything after https://codeberg.org/ eg: username *or* username/repository -github_sponsor = "your-user-name" -bitbucket = "your-user-name" -python = "your-user-name" -docker = "your-user-name" -stack = "your-user-name" -instagram = "your-user-name" -pinterest = "your-user-name" -twitch = "your-user-name" -youtube = "channel/your-channel-id" -researchgate = "your-profile-id" +#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. diff --git a/sass/_imports.scss b/sass/_imports.scss index 6e61b8e..3c2630c 100644 --- a/sass/_imports.scss +++ b/sass/_imports.scss @@ -15,6 +15,13 @@ // Config @import "variables"; +//@import "fonts/Roboto"; +//@import "fonts/Roboto-Mono"; // Monospaced +//@import "fonts/Arimo"; +//@import "fonts/Lato"; +//@import "fonts/FiraCode"; // Monospaced +//@import "fonts/Abridge"; // Icon Font (don't recommend, CSS only icons are in my opinion better.) + // Includes - Sorted by importance/category (includes at top are needed most frequently) @import "include/document"; // html @import "include/typography"; // a, headings, p, ul, blockquote, ... diff --git a/sass/abridge-auto.scss b/sass/abridge-auto.scss new file mode 100644 index 0000000..93440c8 --- /dev/null +++ b/sass/abridge-auto.scss @@ -0,0 +1,31 @@ +@import "imports"; +@import "syntax/syntax-abridge"; +// In parenthesis at the end of each comment are tested colors separated by commma, the first value is the default. +:root { + --f1: #ccc;// Font Color Primary (ccc) + --f2: #ddd;// Font color Headers (ddd) + --c1: #111;// Background Color Primary (111) + --c2: #222;// Background Color Secondary (222,123) + --c3: #333;// Table Rows, Block quote edge, Borders (333,345) + --c4: #888;// Disabled Buttons, Borders, mark background (888,789) + --a1: #f90;// link color (f90,09f) + --a2: #fb0;// link hover/focus color (fb0,0bf) + --a3: #f90;// link h1-h2 hover/focus color (f90,0af) + --cg: #593;// ins green, success (593) + --cr: #e33;// del red, errors (e33) +} +@media (prefers-color-scheme: light) { + :root { + --f1: #444;// Font Color Primary (444) + --f2: #333;// Font color Headers (333) + --c1: #fff;// Background Color Primary (fff) + --c2: #eee;// Background Color Secondary (eee,def) + --c3: #ddd;// Table Rows, Block quote edge, Borders (ddd,137) + --c4: #677;// Disabled Buttons, Borders, mark background (677,013) + --a1: #c40;// link color (c40,06e) + --a2: #e60;// link hover/focus color (e60,09f) + --a3: #f90;// link h1-h2 hover/focus color (f90,07f) + --cg: #373;// ins green, success (373) + --cr: #d33;// del red, errors (d33) + } +} diff --git a/sass/abridge-blue-dark.scss b/sass/abridge-blue-dark.scss deleted file mode 100644 index 7b7a352..0000000 --- a/sass/abridge-blue-dark.scss +++ /dev/null @@ -1,21 +0,0 @@ -//@import "fonts/Abridge"; -//@import "fonts/Roboto"; -//@import "fonts/Arimo"; -//@import "fonts/Lato"; -//@import "fonts/FiraCode"; // Monospaced -@import "imports"; -@import "syntax/syntax-abridge-dark"; - -:root { - --f1: #ccc;// Font Color Primary - --f2: #ddd;// Font color Headers - --c1: #111;// Background Color Primary - --c2: #222;// Background Color Secondary - --c3: #333;// Table Rows, Block quote edge, Borders - --c4: #888;// Disabled Buttons, Borders, mark background - --a1: #09f;// link color - --a2: #0bf;// link hover/focus color - --a3: #0af;// link h1-h2 hover/focus color - --cg: #593; // ins green, success - --cr: #e33; // del red, errors -} diff --git a/sass/abridge-blue-light.scss b/sass/abridge-blue-light.scss deleted file mode 100644 index 1ae982b..0000000 --- a/sass/abridge-blue-light.scss +++ /dev/null @@ -1,21 +0,0 @@ -//@import "fonts/Abridge"; -//@import "fonts/Roboto"; -//@import "fonts/Arimo"; -//@import "fonts/Lato"; -//@import "fonts/FiraCode"; // Monospaced -@import "imports"; -@import "syntax/syntax-abridge-light"; - -:root { - --f1: #444;// Font Color Primary - --f2: #333;// Font color Headers - --c1: #fff;// Background Color Primary - --c2: #eee;// Background Color Secondary - --c3: #ddd;// Table Rows, Block quote edge, Borders - --c4: #677;// Disabled Buttons, Borders, mark background - --a1: #06e;// link color - --a2: #09f;// link hover/focus color - --a3: #07f;// link h1-h2 hover/focus color - --cg: #373; // ins green, success - --cr: #d33; // del red, errors -} diff --git a/sass/abridge-blue-switcher.scss b/sass/abridge-blue-switcher.scss deleted file mode 100644 index bed7958..0000000 --- a/sass/abridge-blue-switcher.scss +++ /dev/null @@ -1,34 +0,0 @@ -//@import "fonts/Abridge"; -//@import "fonts/Roboto"; -//@import "fonts/Arimo"; -//@import "fonts/Lato"; -//@import "fonts/FiraCode"; // Monospaced -@import "imports"; -@import "syntax/syntax-abridge-switcher"; - -:root:not(.light) { - --f1: #ccc;// Font Color Primary - --f2: #ddd;// Font color Headers - --c1: #111;// Background Color Primary - --c2: #222;// Background Color Secondary - --c3: #333;// Table Rows, Block quote edge, Borders - --c4: #888;// Disabled Buttons, Borders, mark background - --a1: #09f;// link color - --a2: #0bf;// link hover/focus color - --a3: #0af;// link h1-h2 hover/focus color - --cg: #593; // ins green, success - --cr: #e33; // del red, errors -} -:root.light { - --f1: #444;// Font Color Primary - --f2: #333;// Font color Headers - --c1: #fff;// Background Color Primary - --c2: #eee;// Background Color Secondary - --c3: #ddd;// Table Rows, Block quote edge, Borders - --c4: #677;// Disabled Buttons, Borders, mark background - --a1: #06e;// link color - --a2: #09f;// link hover/focus color - --a3: #07f;// link h1-h2 hover/focus color - --cg: #373; // ins green, success - --cr: #d33; // del red, errors -} diff --git a/sass/abridge-blue.scss b/sass/abridge-blue.scss deleted file mode 100644 index 02cb58f..0000000 --- a/sass/abridge-blue.scss +++ /dev/null @@ -1,36 +0,0 @@ -//@import "fonts/Abridge"; -//@import "fonts/Roboto"; -//@import "fonts/Arimo"; -//@import "fonts/Lato"; -//@import "fonts/FiraCode"; // Monospaced -@import "imports"; -@import "syntax/syntax-abridge"; - -:root { - --f1: #ccc;// Font Color Primary - --f2: #ddd;// Font color Headers - --c1: #111;// Background Color Primary - --c2: #222;// Background Color Secondary - --c3: #333;// Table Rows, Block quote edge, Borders - --c4: #888;// Disabled Buttons, Borders, mark background - --a1: #09f;// link color - --a2: #0bf;// link hover/focus color - --a3: #0af;// link h1-h2 hover/focus color - --cg: #593; // ins green, success - --cr: #e33; // del red, errors -} -@media (prefers-color-scheme: light) { - :root { - --f1: #444;// Font Color Primary - --f2: #333;// Font color Headers - --c1: #fff;// Background Color Primary - --c2: #eee;// Background Color Secondary - --c3: #ddd;// Table Rows, Block quote edge, Borders - --c4: #677;// Disabled Buttons, Borders, mark background - --a1: #06e;// link color - --a2: #09f;// link hover/focus color - --a3: #07f;// link h1-h2 hover/focus color - --cg: #373; // ins green, success - --cr: #d33; // del red, errors - } -} diff --git a/sass/abridge-blueshade-dark.scss b/sass/abridge-blueshade-dark.scss deleted file mode 100644 index 627f777..0000000 --- a/sass/abridge-blueshade-dark.scss +++ /dev/null @@ -1,21 +0,0 @@ -//@import "fonts/Abridge"; -//@import "fonts/Roboto"; -//@import "fonts/Arimo"; -//@import "fonts/Lato"; -//@import "fonts/FiraCode"; // Monospaced -@import "imports"; -@import "syntax/syntax-abridge-dark"; - -:root { - --f1: #ccc;// Font Color Primary - --f2: #ddd;// Font color Headers - --c1: #111;// Background Color Primary - --c2: #123;// Background Color Secondary - --c3: #345;// Table Rows, Block quote edge, Borders - --c4: #789;// Disabled Buttons, Borders, mark background - --a1: #09f;// link color - --a2: #0bf;// link hover/focus color - --a3: #0af;// link h1-h2 hover/focus color - --cg: #593; // ins green, success - --cr: #e33; // del red, errors -} diff --git a/sass/abridge-blueshade-light.scss b/sass/abridge-blueshade-light.scss deleted file mode 100644 index 8fdf66c..0000000 --- a/sass/abridge-blueshade-light.scss +++ /dev/null @@ -1,21 +0,0 @@ -//@import "fonts/Abridge"; -//@import "fonts/Roboto"; -//@import "fonts/Arimo"; -//@import "fonts/Lato"; -//@import "fonts/FiraCode"; // Monospaced -@import "imports"; -@import "syntax/syntax-abridge-light"; - -:root { - --f1: #444;// Font Color Primary - --f2: #333;// Font color Headers - --c1: #fff;// Background Color Primary - --c2: #def;// Background Color Secondary - --c3: #137;// Table Rows, Block quote edge, Borders - --c4: #013;// Disabled Buttons, Borders, mark background - --a1: #06e;// link color - --a2: #09f;// link hover/focus color - --a3: #07f;// link h1-h2 hover/focus color - --cg: #373; // ins green, success - --cr: #d33; // del red, errors -} diff --git a/sass/abridge-blueshade-switcher.scss b/sass/abridge-blueshade-switcher.scss deleted file mode 100644 index 379468b..0000000 --- a/sass/abridge-blueshade-switcher.scss +++ /dev/null @@ -1,34 +0,0 @@ -//@import "fonts/Abridge"; -//@import "fonts/Roboto"; -//@import "fonts/Arimo"; -//@import "fonts/Lato"; -//@import "fonts/FiraCode"; // Monospaced -@import "imports"; -@import "syntax/syntax-abridge-switcher"; - -:root:not(.light) { - --f1: #ccc;// Font Color Primary - --f2: #ddd;// Font color Headers - --c1: #111;// Background Color Primary - --c2: #123;// Background Color Secondary - --c3: #345;// Table Rows, Block quote edge, Borders - --c4: #789;// Disabled Buttons, Borders, mark background - --a1: #09f;// link color - --a2: #0bf;// link hover/focus color - --a3: #0af;// link h1-h2 hover/focus color - --cg: #593; // ins green, success - --cr: #e33; // del red, errors -} -:root.light { - --f1: #444;// Font Color Primary - --f2: #333;// Font color Headers - --c1: #fff;// Background Color Primary - --c2: #def;// Background Color Secondary - --c3: #137;// Table Rows, Block quote edge, Borders - --c4: #013;// Disabled Buttons, Borders, mark background - --a1: #06e;// link color - --a2: #09f;// link hover/focus color - --a3: #07f;// link h1-h2 hover/focus color - --cg: #373; // ins green, success - --cr: #d33; // del red, errors -} diff --git a/sass/abridge-blueshade.scss b/sass/abridge-blueshade.scss deleted file mode 100644 index 93f47e0..0000000 --- a/sass/abridge-blueshade.scss +++ /dev/null @@ -1,36 +0,0 @@ -//@import "fonts/Abridge"; -//@import "fonts/Roboto"; -//@import "fonts/Arimo"; -//@import "fonts/Lato"; -//@import "fonts/FiraCode"; // Monospaced -@import "imports"; -@import "syntax/syntax-abridge"; - -:root { - --f1: #ccc;// Font Color Primary - --f2: #ddd;// Font color Headers - --c1: #111;// Background Color Primary - --c2: #123;// Background Color Secondary - --c3: #345;// Table Rows, Block quote edge, Borders - --c4: #789;// Disabled Buttons, Borders, mark background - --a1: #09f;// link color - --a2: #0bf;// link hover/focus color - --a3: #0af;// link h1-h2 hover/focus color - --cg: #593; // ins green, success - --cr: #e33; // del red, errors -} -@media (prefers-color-scheme: light) { - :root { - --f1: #444;// Font Color Primary - --f2: #333;// Font color Headers - --c1: #fff;// Background Color Primary - --c2: #def;// Background Color Secondary - --c3: #137;// Table Rows, Block quote edge, Borders - --c4: #013;// Disabled Buttons, Borders, mark background - --a1: #06e;// link color - --a2: #09f;// link hover/focus color - --a3: #07f;// link h1-h2 hover/focus color - --cg: #373; // ins green, success - --cr: #d33; // del red, errors - } -} diff --git a/sass/abridge-dark.scss b/sass/abridge-dark.scss index 212b4fc..eaf1474 100644 --- a/sass/abridge-dark.scss +++ b/sass/abridge-dark.scss @@ -1,21 +1,16 @@ -//@import "fonts/Abridge"; -//@import "fonts/Roboto"; -//@import "fonts/Arimo"; -//@import "fonts/Lato"; -//@import "fonts/FiraCode"; // Monospaced @import "imports"; @import "syntax/syntax-abridge-dark"; - +// In parenthesis at the end of each comment are tested colors separated by commma, the first value is the default. :root { - --f1: #ccc;// Font Color Primary - --f2: #ddd;// Font color Headers - --c1: #111;// Background Color Primary - --c2: #222;// Background Color Secondary - --c3: #333;// Table Rows, Block quote edge, Borders - --c4: #888;// Disabled Buttons, Borders, mark background - --a1: #f90;// link color - --a2: #fb0;// link hover/focus color - --a3: #f90;// link h1-h2 hover/focus color - --cg: #593; // ins green, success - --cr: #e33; // del red, errors + --f1: #ccc;// Font Color Primary (ccc) + --f2: #ddd;// Font color Headers (ddd) + --c1: #111;// Background Color Primary (111) + --c2: #222;// Background Color Secondary (222,123) + --c3: #333;// Table Rows, Block quote edge, Borders (333,345) + --c4: #888;// Disabled Buttons, Borders, mark background (888,789) + --a1: #f90;// link color (f90,09f) + --a2: #fb0;// link hover/focus color (fb0,0bf) + --a3: #f90;// link h1-h2 hover/focus color (f90,0af) + --cg: #593;// ins green, success (593) + --cr: #e33;// del red, errors (e33) } diff --git a/sass/abridge-light.scss b/sass/abridge-light.scss index d0f204c..34c9bbc 100644 --- a/sass/abridge-light.scss +++ b/sass/abridge-light.scss @@ -1,21 +1,16 @@ -//@import "fonts/Abridge"; -//@import "fonts/Roboto"; -//@import "fonts/Arimo"; -//@import "fonts/Lato"; -//@import "fonts/FiraCode"; // Monospaced @import "imports"; @import "syntax/syntax-abridge-light"; - +// In parenthesis at the end of each comment are tested colors separated by commma, the first value is the default. :root { - --f1: #444;// Font Color Primary - --f2: #333;// Font color Headers - --c1: #fff;// Background Color Primary - --c2: #eee;// Background Color Secondary - --c3: #ddd;// Table Rows, Block quote edge, Borders - --c4: #677;// Disabled Buttons, Borders, mark background - --a1: #c40;// link color - --a2: #e60;// link hover/focus color - --a3: #f90;// link h1-h2 hover/focus color - --cg: #373; // ins green, success - --cr: #d33; // del red, errors + --f1: #444;// Font Color Primary (444) + --f2: #333;// Font color Headers (333) + --c1: #fff;// Background Color Primary (fff) + --c2: #eee;// Background Color Secondary (eee,def) + --c3: #ddd;// Table Rows, Block quote edge, Borders (ddd,137) + --c4: #677;// Disabled Buttons, Borders, mark background (677,013) + --a1: #c40;// link color (c40,06e) + --a2: #e60;// link hover/focus color (e60,09f) + --a3: #f90;// link h1-h2 hover/focus color (f90,07f) + --cg: #373;// ins green, success (373) + --cr: #d33;// del red, errors (d33) } diff --git a/sass/abridge-switcher.scss b/sass/abridge-switcher.scss deleted file mode 100644 index 37e0cef..0000000 --- a/sass/abridge-switcher.scss +++ /dev/null @@ -1,34 +0,0 @@ -//@import "fonts/Abridge"; -//@import "fonts/Roboto"; -//@import "fonts/Arimo"; -//@import "fonts/Lato"; -//@import "fonts/FiraCode"; // Monospaced -@import "imports"; -@import "syntax/syntax-abridge-switcher"; - -:root:not(.light) { - --f1: #ccc;// Font Color Primary - --f2: #ddd;// Font color Headers - --c1: #111;// Background Color Primary - --c2: #222;// Background Color Secondary - --c3: #333;// Table Rows, Block quote edge, Borders - --c4: #888;// Disabled Buttons, Borders, mark background - --a1: #f90;// link color - --a2: #fb0;// link hover/focus color - --a3: #f90;// link h1-h2 hover/focus color - --cg: #593; // ins green, success - --cr: #e33; // del red, errors -} -:root.light { - --f1: #444;// Font Color Primary - --f2: #333;// Font color Headers - --c1: #fff;// Background Color Primary - --c2: #eee;// Background Color Secondary - --c3: #ddd;// Table Rows, Block quote edge, Borders - --c4: #677;// Disabled Buttons, Borders, mark background - --a1: #c40;// link color - --a2: #e60;// link hover/focus color - --a3: #f90;// link h1-h2 hover/focus color - --cg: #373; // ins green, success - --cr: #d33; // del red, errors -} diff --git a/sass/abridge.scss b/sass/abridge.scss index e99e5d9..af1bf5d 100644 --- a/sass/abridge.scss +++ b/sass/abridge.scss @@ -1,36 +1,29 @@ -//@import "fonts/Abridge"; -//@import "fonts/Roboto"; -//@import "fonts/Arimo"; -//@import "fonts/Lato"; -//@import "fonts/FiraCode"; // Monospaced @import "imports"; -@import "syntax/syntax-abridge"; - -:root { - --f1: #ccc;// Font Color Primary - --f2: #ddd;// Font color Headers - --c1: #111;// Background Color Primary - --c2: #222;// Background Color Secondary - --c3: #333;// Table Rows, Block quote edge, Borders - --c4: #888;// Disabled Buttons, Borders, mark background - --a1: #f90;// link color - --a2: #fb0;// link hover/focus color - --a3: #f90;// link h1-h2 hover/focus color - --cg: #593; // ins green, success - --cr: #e33; // del red, errors +@import "syntax/syntax-abridge-switcher"; +// In parenthesis at the end of each comment are tested colors separated by commma, the first value is the default. +:root:not(.light) { + --f1: #ccc;// Font Color Primary (ccc) + --f2: #ddd;// Font color Headers (ddd) + --c1: #111;// Background Color Primary (111) + --c2: #222;// Background Color Secondary (222,123) + --c3: #333;// Table Rows, Block quote edge, Borders (333,345) + --c4: #888;// Disabled Buttons, Borders, mark background (888,789) + --a1: #f90;// link color (f90,09f) + --a2: #fb0;// link hover/focus color (fb0,0bf) + --a3: #f90;// link h1-h2 hover/focus color (f90,0af) + --cg: #593;// ins green, success (593) + --cr: #e33;// del red, errors (e33) } -@media (prefers-color-scheme: light) { - :root { - --f1: #444;// Font Color Primary - --f2: #333;// Font color Headers - --c1: #fff;// Background Color Primary - --c2: #eee;// Background Color Secondary - --c3: #ddd;// Table Rows, Block quote edge, Borders - --c4: #677;// Disabled Buttons, Borders, mark background - --a1: #c40;// link color - --a2: #e60;// link hover/focus color - --a3: #f90;// link h1-h2 hover/focus color - --cg: #373; // ins green, success - --cr: #d33; // del red, errors - } +:root.light { + --f1: #444;// Font Color Primary (444) + --f2: #333;// Font color Headers (333) + --c1: #fff;// Background Color Primary (fff) + --c2: #eee;// Background Color Secondary (eee,def) + --c3: #ddd;// Table Rows, Block quote edge, Borders (ddd,137) + --c4: #677;// Disabled Buttons, Borders, mark background (677,013) + --a1: #c40;// link color (c40,06e) + --a2: #e60;// link hover/focus color (e60,09f) + --a3: #f90;// link h1-h2 hover/focus color (f90,07f) + --cg: #373;// ins green, success (373) + --cr: #d33;// del red, errors (d33) } diff --git a/sass/font.scss b/sass/font.scss deleted file mode 100644 index 56d7b54..0000000 --- a/sass/font.scss +++ /dev/null @@ -1,5 +0,0 @@ -//@import "fonts/Abridge"; -@import "fonts/Roboto"; -//@import "fonts/Arimo"; -//@import "fonts/Lato"; -//@import "fonts/FiraCode"; // Monospaced \ No newline at end of file diff --git a/sass/fonts/_Abridge.scss b/sass/fonts/_Abridge.scss index 3085236..6626626 100644 --- a/sass/fonts/_Abridge.scss +++ b/sass/fonts/_Abridge.scss @@ -1,3 +1,8 @@ +// This is for the Abridge icon font, the css for this is adapted from fontello. +// I experimented using this, it is still here for those that want it, but not used by default. +// It is a pretty lightweight solution, but still not as good as svg icons directly in the css. +// The loading of icon fonts is blocked by noscript type browser addons, but css icons are not. + @font-face { font-family: 'Abridge'; src: url('font/Abridge.woff2') format('woff2'); @@ -23,4 +28,4 @@ .i-last:before { content: '\f101'; } // pagination last page .i-prev:before { content: '\f104'; } // pagination previous page .i-next:before { content: '\f105'; } // pagination next page -.i-up:before { content: '\f106'; } // back to top button \ No newline at end of file +.i-up:before { content: '\f106'; } // back to top button diff --git a/sass/fonts/_Roboto-Mono.scss b/sass/fonts/_Roboto-Mono.scss new file mode 100644 index 0000000..0685c3d --- /dev/null +++ b/sass/fonts/_Roboto-Mono.scss @@ -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("font/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("font/Roboto-Mono-Italic.woff2");//latin italic + font-style: italic; + font-display: swap; +} diff --git a/sass/include/_embedded.scss b/sass/include/_embedded.scss index 93de17d..fc1dd3c 100644 --- a/sass/include/_embedded.scss +++ b/sass/include/_embedded.scss @@ -2,13 +2,13 @@ .yvi {//youtube and vimeo iframe position: absolute; top: 0; - left: 0; + left: 0 } .yv {//youtube and vimeo div position: relative; padding-bottom: 56.25%; height: 0; - overflow: hidden; + overflow: hidden } img, video, diff --git a/sass/include/_hr.scss b/sass/include/_hr.scss index 98e536e..aaa9f4e 100644 --- a/sass/include/_hr.scss +++ b/sass/include/_hr.scss @@ -10,6 +10,6 @@ hr { height: 0; // 1 overflow: visible; // 2 border: none; - border-top: 1px solid var(--f1); + border-top: 1px solid var(--f1) } header hr, footer hr {border-top: 1px solid var(--c4)} diff --git a/sass/include/_icons.scss b/sass/include/_icons.scss index 10a2c05..df0f5d3 100644 --- a/sass/include/_icons.scss +++ b/sass/include/_icons.scss @@ -116,7 +116,7 @@ display: inline-block; //overflow: hidden; text-align: center; - vertical-align: middle; + vertical-align: middle } .svgs { width: var(--fs); diff --git a/sass/include/_nav.scss b/sass/include/_nav.scss index 08f1ec1..f3a9b29 100644 --- a/sass/include/_nav.scss +++ b/sass/include/_nav.scss @@ -106,7 +106,7 @@ footer nav { margin: var(--s2) 0 var(--s1); } div { - margin: auto; // keeps top menu/search centered in mobile view + margin: auto // keeps top menu/search centered in mobile view } } } diff --git a/sass/include/_sectioning.scss b/sass/include/_sectioning.scss index cd5540d..dd1026e 100644 --- a/sass/include/_sectioning.scss +++ b/sass/include/_sectioning.scss @@ -77,12 +77,12 @@ header, main { padding-bottom: 0; margin-bottom: 0; hr { - margin:0.1rem 0; + margin:0.1rem 0 } } footer{ line-height: var(--lhh); hr, p { - margin: 0.1rem 0 .3rem; + margin: 0.1rem 0 .3rem } } \ No newline at end of file diff --git a/static/font/Roboto-Mono-Italic.woff2 b/static/font/Roboto-Mono-Italic.woff2 new file mode 100644 index 0000000..ece53bd Binary files /dev/null and b/static/font/Roboto-Mono-Italic.woff2 differ diff --git a/static/font/Roboto-Mono.woff2 b/static/font/Roboto-Mono.woff2 new file mode 100644 index 0000000..f8894ba Binary files /dev/null and b/static/font/Roboto-Mono.woff2 differ diff --git a/static/search.js b/static/search.js index 61c67c0..e6adedf 100644 --- a/static/search.js +++ b/static/search.js @@ -165,11 +165,24 @@ Source: - https://github.com/aaranxu/adidoks/blob/main/static/js/search.js */ (function(){ - var index = elasticlunr.Index.load(window.searchIndex); + //var index = elasticlunr.Index.load(window.searchIndex); + var index; searchinput.addEventListener('input', show_results, true); suggestions.addEventListener('click', accept_suggestion, true); - function show_results(){ + async function show_results(){ + var initIndex = async function () { + if (index === undefined) { + index = fetch("/search_index.en.json") + .then( + async function(response) { + return await elasticlunr.Index.load(await response.json()); + } + ); + } + let res = await index; + return res; + } var value = this.value.trim(); var options = { bool: "OR", @@ -178,7 +191,8 @@ Source: body: {boost: 1}, } }; - var results = index.search(value, options); + //var results = index.search(value, options); + var results = (await initIndex()).search(value, options); var entry, childs = suggestions.childNodes; var i = 0, len = results.length; diff --git a/templates/base.html b/templates/base.html index 0177ea1..642239b 100644 --- a/templates/base.html +++ b/templates/base.html @@ -51,20 +51,27 @@
{%- if config.build_search_index %} + {%- set icon_search=config.extra.icon_search | default(value="svgs search") -%}
@@ -91,7 +98,9 @@
{%- endif %}
+ {%- if config.extra.social %} {{- social_macros::social_links(social_config=config.extra.social, config=config) }} + {%- endif %} {#- Copyright START #} {%- set copyright_start_year=config.extra.copyright_start_year | default(value="") %} @@ -99,6 +108,7 @@ {%- set copyright_end_year=config.extra.copyright_end_year | default(value=now() | date(format="%Y")) %} Copyright © {{ copyright_start_year ~ copyright_end_year }} {{ config.title }}

{#- Copyright END #} + {%- if config.extra.menu_footer %} + {%- endif %} {%- if config.extra.footer_credit | default(value=true) %} {%- if config.extra.footer_credit_override %} {{ config.extra.footer_credit_override | safe }} @@ -119,4 +130,4 @@ {%- block gotop %} {%- endblock gotop %} - \ No newline at end of file + diff --git a/templates/index.html b/templates/index.html index 7c8c45a..4702e16 100644 --- a/templates/index.html +++ b/templates/index.html @@ -59,7 +59,8 @@

Recent Posts

- {%- for page in section_item.pages | slice(end=config.extra.recent_items) %} + {%- set recent_items=config.extra.recent_items | default(value=9) -%} + {%- for page in section_item.pages | slice(end=recent_items) %} {{- page_macros::page_listing(page=page, config=config) }} {%- endfor %}
diff --git a/templates/macros/head.html b/templates/macros/head.html index 528577a..3767a16 100644 --- a/templates/macros/head.html +++ b/templates/macros/head.html @@ -1,20 +1,24 @@ {#- Theme Switcher Button to toggle between dark/light #} {%- macro theme(config) %} - {%- if config.extra.js_theme %} - {%- if config.extra.js_themeButton or config.extra.js_bundle %} - + {%- if config.extra.js_switcher | default(value=true) %} + {%- set js_theme=config.extra.js_theme | default(value="theme.min.js") -%} + {%- if js_theme %} + {%- endif %} {%- endif %} {%- endmacro %} -{%- macro stylesheets(config) %} - {%- if config.extra.stylesheets %}{%- for i in config.extra.stylesheets %} + +{%- macro stylesheets(config) %} + {%- set stylesheets=config.extra.stylesheets | default(value=[ "abridge.css" ]) -%} + {%- if stylesheets %}{%- for i in stylesheets %} {%- endfor %}{%- endif %} - {%- endmacro %} + + {%- macro stylesheets_preload(config) %} {%- if config.extra.fonts %}{%- for i in config.extra.fonts %} @@ -31,10 +35,11 @@ {%- if config.extra.math or page.extra.math %} - {%- if config.extra.katex_css %}{%- if config.extra.katex_css is matching("^http[s]?://") %} - + {%- set katex_css=config.extra.katex_css | default(value="katex.min.css") -%} + {%- if katex_css %}{%- if katex_css is matching("^http[s]?://") %} + {%- else %} - + {%- endif %}{%- endif %} {%- endif %} @@ -51,7 +56,21 @@ + + + + + + + + + + + + + {%- macro js(config) %} + {%- set search_library=config.extra.search_library | default(value="elasticlunr") -%} {%- set preStyle = false %} @@ -66,141 +85,60 @@ {%- endif %} {%- if config.extra.math or page.extra.math %} - {%- if config.extra.katex_css %} + {%- set katex_css=config.extra.katex_css | default(value="katex.min.css") -%} + {%- if katex_css %} {%- set preStyle = true %} {%- endif %} {%- endif %} -{%- if config.extra.js_bundle and config.build_search_index or config.extra.js_bundle and config.extra.search_library %} - - {%- if config.extra.js_search_facade %} - {#- dont load the index #} - {%- elif config.extra.search_library == "tinysearch" or config.extra.search_library == "stork" %} - {#- dont load the index #} - {%- elif config.extra.js_search_index %} - - {%- endif %} - - {%- if not config.extra.js_search_facade %} +{%- if config.extra.js_bundle %} + - {%- if config.extra.js_switcher %} - - {%- else %} - - {%- endif %} - - {%- elif config.extra.search_library == "tinysearch" %} - - {%- elif config.extra.search_library == "stork" %} - - {%- else %} - - {%- if config.extra.js_switcher %} - - {%- else %} - - {%- endif %} - - {%- endif %} - - -{%- elif config.build_search_index or config.extra.search_library %} - - {#- no bundle #} +{%- else %} {%- if preStyle == true %} - {%- if config.extra.js_prestyle %} - + {%- set js_prestyle=config.extra.js_prestyle | default(value="prestyle.js") -%} + {%- if js_prestyle %} + {%- endif %} {%- endif %} - {%- if config.extra.js_theme %} - {%- if config.extra.js_themeButton %} - + {%- if config.extra.js_switcher | default(value=true) %} + {%- set js_theme=config.extra.js_theme | default(value="theme.min.js") -%} + {%- if js_theme %} + {%- set js_themeButton=config.extra.js_themeButton | default(value="theme_button.js") -%} + {%- if js_themeButton %} + {%- endif %} {%- endif %} - - {%- if config.extra.js_email %} - {%- if config.extra.social.mail_encode %} - - {%- endif %} - {%- endif %} - - {%- if config.extra.js_codecopy %} - {%- endif %} - {%- if config.extra.js_search_facade %} - {%- if config.extra.search_library %} - {%- if config.extra.search_library == "tinysearch" %} - - {%- elif config.extra.search_library == "stork" %} - + {%- set js_email=config.extra.js_email | default(value="email.js") -%} + {%- if js_email %} + {%- if config.extra.social.mail_encode | default(value=true) %} + {%- endif %} {%- endif %} - - {%- endif %} - {%- if config.extra.js_search_facade or config.extra.search_library %} - {#- dont load the index/search #} - {%- elif config.extra.js_search_index %} - + {%- set js_codecopy=config.extra.js_codecopy | default(value="codecopy.js") -%} + {%- if js_codecopy %} + {%- endif %} - {%- if config.extra.js_search_facade %} - {#- dont load the index/search #} - {%- else %} - {%- if config.extra.search_library == "tinysearch" %} - - {%- elif config.extra.search_library == "stork" %} - + {%- if search_library == "tinysearch" %} + + {%- elif search_library == "stork" %} + {%- else %} - - - {%- endif %} + + {%- endif %} -{%- elif config.extra.js_bundle %} - - {#- no search #} - - {%- if config.extra.js_switcher %} - - - {%- else %} - - - {%- endif %} - -{%- else %} - - {#- no bundle or search #} - - {%- if preStyle == true %} - {%- if config.extra.js_prestyle %} - - {%- endif %} - {%- endif %} - - {%- if config.extra.js_theme %} - {%- if config.extra.js_themeButton or config.extra.js_bundle %} - - {%- endif %} - {%- endif %} - - {%- if config.extra.js_email %} - {%- if config.extra.social.mail_encode %} - - {%- endif %} - {%- endif %} +{%- endif %} - {%- if config.extra.js_codecopy %} - - {%- endif %} -{%- endif %} {#- https://katex.org/docs/autorender.html #} @@ -208,31 +146,38 @@ {#- https://github.com/KaTeX/KaTeX/tree/main/contrib/mathtex-script-type/ #} {%- if config.extra.math or page.extra.math %} -{%- if config.extra.katex_bundle %} - +{%- set katex_bundle=config.extra.katex_bundle | default(value="katexbundle.min.js") -%} +{%- if katex_bundle %} + {%- else %} - {%- if config.extra.katex_js %}{%- if config.extra.katex_js is matching("^http[s]?://") %} - + {%- set katex_js=config.extra.katex_js | default(value="katex.min.js") -%} + {%- if katex_js %}{%- if katex_js is matching("^http[s]?://") %} + {%- else %} - + {%- endif %}{%- endif %} - {%- if config.extra.mathtex_js %}{%- if config.extra.mathtex_js is matching("^http[s]?://") %} - + {%- set mathtex_js=config.extra.mathtex_js | default(value="mathtex-script-type.min.js") -%} + {%- if mathtex_js %}{%- if mathtex_js is matching("^http[s]?://") %} + {%- else %} - + {%- endif %}{%- endif %} {%- if config.extra.math_auto_render or page.extra.math_auto_render %} - {%- if config.extra.katex_autorender_js %} - {%- if config.extra.katex_autorender_js is matching("^http[s]?://") %} - + {%- set katex_autorender_js=config.extra.katex_autorender_js | default(value="auto-render.min.js") -%} + {%- if katex_autorender_js %} + {%- if katex_autorender_js is matching("^http[s]?://") %} + {%- else %} - + + {%- endif %} {%- endif %} + {%- set katex_options=config.extra.katex_options | default(value="katexoptions.js") -%} + {%- if katex_options %} + {%- endif %} - {%- endif %} {%- endif %} @@ -242,6 +187,33 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + {%- macro favicons(config) %} {%- if config.extra.favicon_theme_color %} @@ -321,9 +293,11 @@ {%- endif %} -{%- if page.extra.keywords %} +{%- if page.extra.keywords and config.extra.keywords %} -{%- else %} +{%- elif page.extra.keywords %} + +{%- elif config.extra.keywords %} {%- endif %} diff --git a/templates/macros/macros.html b/templates/macros/macros.html index 2c17530..95c922c 100644 --- a/templates/macros/macros.html +++ b/templates/macros/macros.html @@ -142,15 +142,19 @@ {%- endif %}
    - {%- set js_theme=config.extra.js_theme | default(value=true) -%} - {%- if config.extra.menu or js_theme %} + {%- set js_switcher=config.extra.js_switcher | default(value=true) -%} + {%- if config.extra.menu or js_switcher %} {%- if config.extra.menu %} {%- for i in config.extra.menu -%}

  • {{ i.name | safe }}

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

    Test

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

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

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

    `—`

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

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

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

    C'EST UN SECRET POUR TOUT LE MONDE.

    +
    + +
    + Titre 2 +

    Reste un moment et écoute!

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

    Test

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

    Test

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

    + +

    +

    + +

    +

    + +

    +
    +

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

Recent Posts

+

{%- if lang != config.default_language %}{{ trans(key="Recent_Posts" | safe, lang=lang) }}{% else %}Recent Posts{% endif %}

{%- set recent_items=config.extra.recent_items | default(value=9) -%} {%- for page in section_item.pages | slice(end=recent_items) %} {{- page_macros::page_listing(page=page, config=config) }} diff --git a/templates/macros/head.html b/templates/macros/head.html index 8da09cb..0690bc1 100644 --- a/templates/macros/head.html +++ b/templates/macros/head.html @@ -103,7 +103,7 @@ {%- set js_email=config.extra.js_email | default(value="email.js") -%} {%- if js_email %} - {%- if config.extra.social.mail_encode | default(value=true) %} + {%- if config.extra.mail_encode | default(value=true) %} {%- endif %} {%- endif %} @@ -120,12 +120,15 @@ {%- else %} - {%- endif %} - -{%- endif %} + {%- if lang != "en" %} + + + {%- endif %} + {%- endif %} +{%- endif %} {#- https://katex.org/docs/autorender.html #} @@ -344,9 +347,9 @@ {%- endif %} -{%- if config.extra.social.twitter %} - - +{%- if config.extra.twitter_meta %} + + {%- endif %} diff --git a/templates/macros/macros.html b/templates/macros/macros.html index 95c922c..e909b06 100644 --- a/templates/macros/macros.html +++ b/templates/macros/macros.html @@ -36,16 +36,24 @@ {%- if config.extra.meta_post.divider %}{{ config.extra.meta_post.divider | safe }}{%- else %}   {%- endif %}{%- endif %}{%- endif %} {#- Date #} - {%- if config.extra.meta_post.date %} {%- if config.extra.icon_date %} {% endif %} {{ page.date | date(format="%B %d, %Y") }} + {%- if config.extra.meta_post.date %} {%- if config.extra.icon_date %} {% endif %} + {%- if config.extra.date_locale %} + {%- if lang != config.default_language -%} + {%- set lang_locale = trans(key="date_locale" | safe, lang=lang) -%} + {%- else -%} + {%- set lang_locale = config.extra.date_locale -%} + {%- endif -%} + {{ page.date | date(format="%B %d, %Y", locale=lang_locale) }} + {%- else %} {{ page.date | date(format="%B %d, %Y") }} {%- endif %} {#- divider #} {%- if config.extra.meta_post.categories_tags %} {%- if config.extra.meta_post.divider %}{{ config.extra.meta_post.divider | safe }}{%- else %}   {%- endif %}{%- endif %}{% endif %} {#- Categories #} - {%- if page.taxonomies.categories %} {%- if config.extra.icon_info %} {% endif %} [{% for cat in page.taxonomies.categories %}{{ cat }}{% endfor %}]{% endif %} + {%- if page.taxonomies.categories %} {%- if config.extra.icon_info %} {% endif %} [{% for cat in page.taxonomies.categories %}{{ cat }}{% endfor %}]{% endif %} {#- Tags #} - {%- if page.taxonomies.tags %} {%- for tag in page.taxonomies.tags %} #{{ tag }} {% endfor -%}{%- endif %} + {%- if page.taxonomies.tags %} {%- for tag in page.taxonomies.tags %} #{{ tag }} {% endfor -%}{%- endif %} {%- endmacro meta_post %} {%- macro title_index(page, config) %} @@ -60,7 +68,7 @@ {%- if page.taxonomies.authors and config.taxonomies %} {%- for author in page.taxonomies.authors %} {%- if author_flag %}, {% endif %} - {{ author }} + {{ author }} {%- set_global author_flag = true %} {%- endfor %} {%- elif page.extra.authors and config.extra.meta_index.author %} @@ -87,16 +95,24 @@ {%- if config.extra.meta_index.divider %}{{ config.extra.meta_index.divider | safe }}{%- else %}   {%- endif %}{%- endif %}{%- endif %} {#- Date #} - {%- if config.extra.meta_index.date %} {%- if config.extra.icon_date %} {% endif %} {{ page.date | date(format="%B %d, %Y") }} + {%- if config.extra.meta_index.date %} {%- if config.extra.icon_date %} {% endif %} + {%- if config.extra.date_locale %} + {%- if lang != config.default_language -%} + {%- set lang_locale = trans(key="date_locale" | safe, lang=lang) -%} + {%- else -%} + {%- set lang_locale = config.extra.date_locale -%} + {%- endif -%} + {{ page.date | date(format="%B %d, %Y", locale=lang_locale) }} + {%- else %} {{ page.date | date(format="%B %d, %Y") }} {%- endif %} {#- divider #} {%- if config.extra.meta_index.categories_tags %} {%- if config.extra.meta_index.divider %}{{ config.extra.meta_index.divider | safe }}{%- else %}   {%- endif %}{%- endif %}{% endif %} {#- Categories #} - {%- if page.taxonomies.categories %} {%- if config.extra.icon_info %} {% endif %} [{% for cat in page.taxonomies.categories %}{{ cat }}{% endfor %}]{% endif %} + {%- if page.taxonomies.categories %} {%- if config.extra.icon_info %} {% endif %} [{% for cat in page.taxonomies.categories %}{{ cat }}{% endfor %}]{% endif %} {#- Tags #} - {%- if page.taxonomies.tags %} {%- for tag in page.taxonomies.tags %} #{{ tag }} {% endfor -%}{%- endif %} + {%- if page.taxonomies.tags %} {%- for tag in page.taxonomies.tags %} #{{ tag }} {% endfor -%}{%- endif %} {%- endmacro meta_index %} diff --git a/templates/macros/social.html b/templates/macros/social.html index 67e05a3..1c4b3fd 100644 --- a/templates/macros/social.html +++ b/templates/macros/social.html @@ -1,59 +1,58 @@ -{%- macro social_links(social_config, config) %} +{%- macro social_links(config) %} {%- endmacro %} diff --git a/templates/page.html b/templates/page.html index da4fdd6..6d5188d 100644 --- a/templates/page.html +++ b/templates/page.html @@ -57,7 +57,7 @@ {%- if toc %}
- {%- set js_switcher=config.extra.js_switcher | default(value=true) -%} - {%- if config.extra.menu or js_switcher %} - {%- if config.extra.menu %} - {%- for i in config.extra.menu -%} - - {%- if lang != config.default_language %} {{ trans(key=i.name | safe, lang=lang) }} {% else %} {{ i.name | safe }} {% endif -%} - - {%- endfor -%} - {%- endif -%} - {%- if js_switcher -%} - {%- set icon_adjust=config.extra.icon_adjust | default(value="svgs adjust") -%} - {%- if icon_adjust -%}{%- else -%}☀{%- endif -%} + {% set js_switcher=config.extra.js_switcher | default(value=true) %} + {%- if config.extra.menu or js_switcher %} + {%- if config.extra.menu %} + {%- for i in config.extra.menu -%} + + {%- if lang != config.default_language %} {{ trans(key=i.name | safe, lang=lang) }} {% else %} {{ i.name | safe }} {% endif -%} + + {%- endfor -%} + {%- endif -%} + {%- if js_switcher -%} + {%- set icon_adjust=config.extra.icon_adjust | default(value="svgs adjust") -%} + {%- if icon_adjust -%}{%- else -%}☀{%- endif -%} + {%- endif -%} + {%- endif -%} + {%- if config.languages | length > 0 %} +
{%- if lang != config.default_language %}{{ trans(key="flag" | safe, lang=lang) }}{% else %}{{ config.extra.flag.en }}{% endif %} + {%- if current_url %} +
+ {%- for lcode,flag in config.extra.flag -%} + {%- if lang != lcode -%} + {%- if lcode == config.default_language -%} + {{ flag }}
+ {%- else -%} + {{ flag }}
{%- endif -%} {%- endif -%} - {%- if config.languages | length > 0 %} -
{%- if lang != config.default_language %}{{ trans(key="flag" | safe, lang=lang) }}{% else %}{{ config.extra.flag.en }}{% endif %} - {%- if current_url %} -
- {%- for lcode,flag in config.extra.flag -%} - {%- if lang != lcode -%} - {%- if lcode == config.default_language -%} - {{ flag }}
- {%- else -%} - {{ flag }}
- {%- endif -%} - {%- endif -%} - {%- endfor -%} -
- {%- endif %} + {%- endfor -%}
- {%- endif -%} + {%- endif %} +
+ {%- endif %}
{%- if config.build_search_index %} {%- set icon_search=config.extra.icon_search | default(value="svgs search") %} @@ -127,21 +127,21 @@ {#- Copyright END #} {%- if config.extra.menu_footer %} {%- endif %} {%- if config.extra.footer_credit | default(value=true) %} {%- if config.extra.footer_credit_override %} {{ config.extra.footer_credit_override | safe }} {%- else %} - {%- if lang != config.default_language %} {{ trans(key="Powered_by" | safe, lang=lang) }} {% else %} Powered by {% endif %} Zola {%- if lang != config.default_language %} {{ trans(key="and" | safe, lang=lang) }} {% else %} and {% endif %} Abridge

+ {% if lang != config.default_language -%} {{ trans(key="Powered_by" | safe, lang=lang) }} {% else -%} Powered by {% endif %}Zola {%- if lang != config.default_language %} {{ trans(key="and" | safe, lang=lang) }} {% else %} and {% endif -%} Abridge

{%- endif %} {%- endif %}
diff --git a/templates/macros/macros.html b/templates/macros/macros.html index bc38935..4c86aac 100644 --- a/templates/macros/macros.html +++ b/templates/macros/macros.html @@ -1,9 +1,9 @@ {%- macro title_post(page, config) %} -

{{ page.title }}

+

{{ page.title }}

{%- endmacro title_post %} {%- macro meta_post(page, config) %} - + {#- Author #} {%- if page.taxonomies.authors and config.taxonomies %} @@ -119,25 +119,26 @@ {%- macro footer(page, config) %} -{%- if page.reading_time and page.reading_time > 2 %} -

Back to top

-{%- endif %} - + {%- if page.reading_time and page.reading_time > 2 %} +

Back to top

+ {%- endif %} + {#- prev/next content page nextprev title pagination #} + {%- if not config.extra.hide_page_nextprev_titles | default(value=false) %} + {%- if page.lower or page.higher %} + + {%- endif %} + {%- endif %} {%- endmacro footer %} diff --git a/templates/page.html b/templates/page.html index 979e0a1..7b645ca 100644 --- a/templates/page.html +++ b/templates/page.html @@ -39,7 +39,7 @@ {{- macros::meta_post(page=page, config=config) }} {%- endif %}{%- endif %} - {{ page.content | safe }} +{{ page.content | safe }} {%- if config.extra.meta_post.position %} {%- if config.extra.meta_post.position == "bottom" or config.extra.meta_post.position == "both" %} diff --git a/templates/pages.html b/templates/pages.html index 87c9adb..4ef44f5 100644 --- a/templates/pages.html +++ b/templates/pages.html @@ -26,6 +26,7 @@ {%- block content %}
- {{ page.content | safe }} + +{{ page.content | safe }}
{%- endblock content %} diff --git a/templates/posts.html b/templates/posts.html index b4e123e..f9befe5 100644 --- a/templates/posts.html +++ b/templates/posts.html @@ -51,9 +51,7 @@ This Template can also be used as the rendering template for Sections, eg: examp {%- if section_item.title %}

{{ section_item.title }}

{%- endif %} - - {{ section_item.content | safe }} - + {{- section_item.content | safe }} {%- for year, posts in section_item.pages | group_by(attribute="year") %} {%- if not hide_section_dates %} {%- if section_item.title %} -- cgit v1.3.1 From 01359d82330caded871aa7d178b00d7bc2cd16f2 Mon Sep 17 00:00:00 2001 From: Jieiku Date: Sat, 17 Jun 2023 08:50:42 -0700 Subject: Simplify Logic --- templates/macros/create_stork_toml.html | 6 +++--- templates/macros/create_tinysearch_json.html | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/templates/macros/create_stork_toml.html b/templates/macros/create_stork_toml.html index f754e2e..ee1d765 100644 --- a/templates/macros/create_stork_toml.html +++ b/templates/macros/create_stork_toml.html @@ -7,9 +7,9 @@ {% endif -%} {%- endif -%} {%- endfor -%} -{%- if found -%}{%- if section.subsections -%}, +{%- if found and section.subsections -%}, {% for subsection in section.subsections -%} {{ self::from_section(section=subsection) }} {%- endfor -%} -{%- endif -%}{%- endif -%} -{%- endmacro from_section -%} \ No newline at end of file +{%- endif -%} +{%- endmacro from_section -%} diff --git a/templates/macros/create_tinysearch_json.html b/templates/macros/create_tinysearch_json.html index 0e6ece4..fcc1f5a 100644 --- a/templates/macros/create_tinysearch_json.html +++ b/templates/macros/create_tinysearch_json.html @@ -18,10 +18,10 @@ {%- if not loop.last -%},{%- endif %} {%- endif -%} {%- endfor -%} -{%- if found -%}{%- if section.subsections -%} +{%- if found and section.subsections -%} , {%- for subsection in section.subsections -%} {{ self::from_section(section=subsection) }} {%- endfor -%} -{%- endif -%}{%- endif -%} +{%- endif -%} {%- endmacro from_section -%} -- cgit v1.3.1 From d367a4b79c801ac0ac084032aaee388616ffe97c Mon Sep 17 00:00:00 2001 From: Jieiku Date: Sun, 2 Jul 2023 09:16:42 -0700 Subject: Fix Dynamic Colors --- sass/_colors-syntax.scss | 121 +++++++++++++++++++++++++++++++++++ sass/_colors.scss | 120 +++++++++++++++++++++++++++++++++++ sass/abridge.scss | 132 +++++++++++++++++++-------------------- sass/colors-syntax/_abridge.scss | 51 --------------- sass/colors/_blue.scss | 50 --------------- sass/colors/_blueshade.scss | 50 --------------- sass/colors/_orange.scss | 50 --------------- 7 files changed, 306 insertions(+), 268 deletions(-) create mode 100644 sass/_colors-syntax.scss create mode 100644 sass/_colors.scss delete mode 100644 sass/colors-syntax/_abridge.scss delete mode 100644 sass/colors/_blue.scss delete mode 100644 sass/colors/_blueshade.scss delete mode 100644 sass/colors/_orange.scss diff --git a/sass/_colors-syntax.scss b/sass/_colors-syntax.scss new file mode 100644 index 0000000..f3d219f --- /dev/null +++ b/sass/_colors-syntax.scss @@ -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; + } + } +} diff --git a/sass/_colors.scss b/sass/_colors.scss new file mode 100644 index 0000000..497919d --- /dev/null +++ b/sass/_colors.scss @@ -0,0 +1,120 @@ +@mixin dark($f1,$f2,$c1,$c2,$c3,$c4,$a1,$a2,$a3,$cg,$cr) { + #{--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 + #{--cg}: $cg;// ins green, success + #{--cr}: $cr;// del red, errors +} +@mixin light($f1,$f2,$c1,$c2,$c3,$c4,$a1,$a2,$a3,$cg,$cr) { + #{--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 + #{--cg}: $cg;// ins green, success + #{--cr}: $cr;// del red, errors +} + +@function color($color,$dark,$f1,$f2,$c1,$c2,$c3,$c4,$a1,$a2,$a3,$cg,$cr) { + @if $color == "blue" { + @if $dark {/// Dark Colors + $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: #777 !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 + $cg: #593 !default;// ins green, success + $cr: #e33 !default;// del red, errors + $result: $f1 $f2 $c1 $c2 $c3 $c4 $a1 $a2 $a3 $cg $cr; + @return $result; + } @else {/// Light Colors + $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 + $cg: #373 !default;// ins green, success + $cr: #d33 !default;// del red, errors + $result: $f1 $f2 $c1 $c2 $c3 $c4 $a1 $a2 $a3 $cg $cr; + @return $result; + } + } @else if $color == "blueshade" { + @if $dark {/// Dark Colors + $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 + $cg: #593 !default;// ins green, success + $cr: #e33 !default;// del red, errors + $result: $f1 $f2 $c1 $c2 $c3 $c4 $a1 $a2 $a3 $cg $cr; + @return $result; + } @else {/// Light Colors + $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: #137 !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 + $cg: #373 !default;// ins green, success + $cr: #d33 !default;// del red, errors + $result: $f1 $f2 $c1 $c2 $c3 $c4 $a1 $a2 $a3 $cg $cr; + @return $result; + } + } @else {//orange (default) + @if $dark {/// Dark Colors + $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: #777 !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 + $cg: #593 !default;// ins green, success + $cr: #e33 !default;// del red, errors + $result: $f1 $f2 $c1 $c2 $c3 $c4 $a1 $a2 $a3 $cg $cr; + @return $result; + } @else {/// Light Colors + $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 + $cg: #373 !default;// ins green, success + $cr: #d33 !default;// del red, errors + $result: $f1 $f2 $c1 $c2 $c3 $c4 $a1 $a2 $a3 $cg $cr; + @return $result; + } + } +} diff --git a/sass/abridge.scss b/sass/abridge.scss index 3ffa404..f5e623e 100644 --- a/sass/abridge.scss +++ b/sass/abridge.scss @@ -2,6 +2,8 @@ @use "sass:list"; @use "functions"; +@use "colors"; +@use "colors-syntax"; /****************************************************************************** * Variables @@ -16,13 +18,9 @@ $mb: 1200px !default;// value at which to switch from fluid layout to max-width $abridgeMode: "switcher" !default;//valid values: switcher, auto, dark, light $syntax-mode: "auto" !default;// Force syntax mode: auto, dark, light -$path: "colors/" !default; $color: "orange" !default;// color template to use/override: orange, blue, blueshade -@include meta.load-css(#{$path}#{$color}); -$spath: "colors-syntax/" !default; $color-syntax: "abridge" !default;// syntax color template to use/override: abridge, -@include meta.load-css(#{$spath}#{$color-syntax}); $syntax: true !default;//syntax highlighting for Code Blocks. $enable-icons: true !default; // false disables ALL icons @@ -76,60 +74,60 @@ $icon-moon: false !default;// dark moon $icon-sun: false !default;// light sun /// Dark Colors -$f1d: #ccc !default;// Font Color Primary -$f2d: #ddd !default;// Font Color Headers -$c1d: #111 !default;// Background Color Primary -$c2d: #222 !default;// Background Color Secondary -$c3d: #333 !default;// Table Rows, Block quote edge, Borders -$c4d: #777 !default;// Disabled Buttons, Borders, mark background -$a1d: #f90 !default;// link color -$a2d: #fb0 !default;// link hover/focus color -$a3d: #f90 !default;// link h1-h2 hover/focus color -$cgd: #593 !default;// ins green, success -$crd: #e33 !default;// del red, errors -$dark: $f1d $f2d $c1d $c2d $c3d $c4d $a1d $a2d $a3d $cgd $crd; +$f1d: null !default;// Font Color Primary +$f2d: null !default;// Font Color Headers +$c1d: null !default;// Background Color Primary +$c2d: null !default;// Background Color Secondary +$c3d: null !default;// Table Rows, Block quote edge, Borders +$c4d: null !default;// Disabled Buttons, Borders, mark background +$a1d: null !default;// link color +$a2d: null !default;// link hover/focus color +$a3d: null !default;// link h1-h2 hover/focus color +$cgd: null !default;// ins green, success +$crd: null !default;// del red, errors +$dark: colors.color($color,true,$f1d,$f2d,$c1d,$c2d,$c3d,$c4d,$a1d,$a2d,$a3d,$cgd,$crd); /// Light Colors -$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 -$cg: #373 !default;// ins green, success -$cr: #d33 !default;// del red, errors -$light: $f1 $f2 $c1 $c2 $c3 $c4 $a1 $a2 $a3 $cg $cr; +$f1: null !default;// Font Color Primary +$f2: null !default;// Font Color Headers +$c1: null !default;// Background Color Primary +$c2: null !default;// Background Color Secondary +$c3: null !default;// Table Rows, Block quote edge, Borders +$c4: null !default;// Disabled Buttons, Borders, mark background +$a1: null !default;// link color +$a2: null !default;// link hover/focus color +$a3: null !default;// link h1-h2 hover/focus color +$cg: null !default;// ins green, success +$cr: null !default;// del red, errors +$light: colors.color($color,false,$f1,$f2,$c1,$c2,$c3,$c4,$a1,$a2,$a3,$cg,$cr); /// Dark Syntax Colors -$h0d: #191919 !default;// background color -$h1d: #ddd !default;// unstyled text -$h2d: #888 !default;// comments -$h3d: #e65 !default;// red, support function -$h4d: #e83 !default;// orange, punctuation, constant, variable, json-key -$h5d: #eb6 !default;// tan, entity/function name -$h6d: #ac3 !default;// green, string -$h7d: #8db !default;// teal, escape character -$h8d: #6ae !default;// blue, declaration, tag, property -$h9d: #d6e !default;// purple, operators -$had: 160% !default;// mark/highlight line -$syntax-dark: $h0d $h1d $h2d $h3d $h4d $h5d $h6d $h7d $h8d $h9d $had; +$h0d: null !default;// background color +$h1d: null !default;// unstyled text +$h2d: null !default;// comments +$h3d: null !default;// red, support function +$h4d: null !default;// orange, punctuation, constant, variable, json-key +$h5d: null !default;// tan, entity/function name +$h6d: null !default;// green, string +$h7d: null !default;// teal, escape character +$h8d: null !default;// blue, declaration, tag, property +$h9d: null !default;// purple, operators +$had: null !default;// mark/highlight line +$syntax-dark: colors-syntax.color($color-syntax,true,$h0d,$h1d,$h2d,$h3d,$h4d,$h5d,$h6d,$h7d,$h8d,$h9d,$had); /// 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 -$syntax-light: $h0 $h1 $h2 $h3 $h4 $h5 $h6 $h7 $h8 $h9 $ha; +$h0: null !default;// background colorq +$h1: null !default;// unstyled text +$h2: null !default;// comments +$h3: null !default;// red, support function +$h4: null !default;// orange, punctuation, constant, variable, json-key +$h5: null !default;// tan, entity/function name +$h6: null !default;// green, string +$h7: null !default;// teal, escape character +$h8: null !default;// blue, declaration, tag, property +$h9: null !default;// purple, operators +$ha: null !default;// mark/highlight line +$syntax-light: colors-syntax.color($color-syntax,false,$h0,$h1,$h2,$h3,$h4,$h5,$h6,$h7,$h8,$h9,$ha); /// These lines find the spot at which to insert your appended fonts. //$findFont-Main : "Segoe UI"; // ← append custom MAIN font(s) AFTER this @@ -294,21 +292,21 @@ $syntax: true !default;//syntax highlighting for code blocks :root { @include font; @include root; - @include dark($dark...); + @include colors.dark($dark...); @if $syntax { @if $syntax-mode == "light" { - @include synlight($syntax-light...); + @include colors-syntax.synlight($syntax-light...); } @else { - @include syndark($syntax-dark...); + @include colors-syntax.syndark($syntax-dark...); } } } @media (prefers-color-scheme: light) { :root { - @include light($light...); + @include colors.light($light...); @if $syntax { @if $syntax-mode == "auto" { - @include synlight($syntax-light...); + @include colors-syntax.synlight($syntax-light...); } } } @@ -317,18 +315,18 @@ $syntax: true !default;//syntax highlighting for code blocks :root { @include font; @include root; - @include dark($dark...); + @include colors.dark($dark...); @if $syntax { - @include syndark($syntax-dark...); + @include colors-syntax.syndark($syntax-dark...); } } } @else if $abridgeMode == "light" { :root { @include font; @include root; - @include light($light...); + @include colors.light($light...); @if $syntax { - @include synlight($syntax-light...); + @include colors-syntax.synlight($syntax-light...); } } } @else {//switcher (default) @@ -337,25 +335,25 @@ $syntax: true !default;//syntax highlighting for code blocks @include root; @if $syntax { @if $syntax-mode == "light" { - @include synlight($syntax-light...); + @include colors-syntax.synlight($syntax-light...); } @else if $syntax-mode == "dark" { - @include syndark($syntax-dark...); + @include colors-syntax.syndark($syntax-dark...); } } } :root:not(.light) { - @include dark($dark...); + @include colors.dark($dark...); @if $syntax { @if $syntax-mode == "auto" { - @include syndark($syntax-dark...); + @include colors-syntax.syndark($syntax-dark...); } } } :root.light { - @include light($light...); + @include colors.light($light...); @if $syntax { @if $syntax-mode == "auto" { - @include synlight($syntax-light...); + @include colors-syntax.synlight($syntax-light...); } } } diff --git a/sass/colors-syntax/_abridge.scss b/sass/colors-syntax/_abridge.scss deleted file mode 100644 index 3f37726..0000000 --- a/sass/colors-syntax/_abridge.scss +++ /dev/null @@ -1,51 +0,0 @@ -// Syntax Highlighting -@mixin syndark( - $h0: #191919, - $h1: #ddd, - $h2: #888, - $h3: #e65, - $h4: #e83, - $h5: #eb6, - $h6: #ac3, - $h7: #8db, - $h8: #6ae, - $h9: #d6e, - $ha: 160% -) { - #{--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: #f7f7f7, - $h1: #222, - $h2: #666, - $h3: #a21, - $h4: #930, - $h5: #a50, - $h6: #350, - $h7: #286, - $h8: #059, - $h9: #a3c, - $ha: 92% -) { - #{--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 -} diff --git a/sass/colors/_blue.scss b/sass/colors/_blue.scss deleted file mode 100644 index 3a79074..0000000 --- a/sass/colors/_blue.scss +++ /dev/null @@ -1,50 +0,0 @@ -@mixin dark( - $f1: #ccc, - $f2: #ddd, - $c1: #111, - $c2: #222, - $c3: #333, - $c4: #888, - $a1: #09f, - $a2: #0bf, - $a3: #0af, - $cg: #593, - $cr: #e33 -) { - #{--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 - #{--cg}: $cg;// ins green, success - #{--cr}: $cr;// del red, errors -} -@mixin light( - $f1: #333, - $f2: #222, - $c1: #fff, - $c2: #eee, - $c3: #ddd, - $c4: #555, - $a1: #06e, - $a2: #09f, - $a3: #07f, - $cg: #373, - $cr: #d33 -) { - #{--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 - #{--cg}: $cg;// ins green, success - #{--cr}: $cr;// del red, errors -} diff --git a/sass/colors/_blueshade.scss b/sass/colors/_blueshade.scss deleted file mode 100644 index 2bb7355..0000000 --- a/sass/colors/_blueshade.scss +++ /dev/null @@ -1,50 +0,0 @@ -@mixin dark( - $f1: #ccc, - $f2: #ddd, - $c1: #111, - $c2: #123, - $c3: #345, - $c4: #789, - $a1: #09f, - $a2: #0bf, - $a3: #0af, - $cg: #593, - $cr: #e33 -) { - #{--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 - #{--cg}: $cg;// ins green, success - #{--cr}: $cr;// del red, errors -} -@mixin light( - $f1: #333, - $f2: #222, - $c1: #fff, - $c2: #def, - $c3: #137, - $c4: #013, - $a1: #06e, - $a2: #09f, - $a3: #07f, - $cg: #373, - $cr: #d33 -) { - #{--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 - #{--cg}: $cg;// ins green, success - #{--cr}: $cr;// del red, errors -} diff --git a/sass/colors/_orange.scss b/sass/colors/_orange.scss deleted file mode 100644 index 635da31..0000000 --- a/sass/colors/_orange.scss +++ /dev/null @@ -1,50 +0,0 @@ -@mixin dark( - $f1: #ccc, - $f2: #ddd, - $c1: #111, - $c2: #222, - $c3: #333, - $c4: #888, - $a1: #f90, - $a2: #fb0, - $a3: #f90, - $cg: #593, - $cr: #e33 -) { - #{--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 - #{--cg}: $cg;// ins green, success - #{--cr}: $cr;// del red, errors -} -@mixin light( - $f1: #333, - $f2: #222, - $c1: #fff, - $c2: #eee, - $c3: #ddd, - $c4: #555, - $a1: #c40, - $a2: #e60, - $a3: #f90, - $cg: #373, - $cr: #d33 -) { - #{--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 - #{--cg}: $cg;// ins green, success - #{--cr}: $cr;// del red, errors -} -- cgit v1.3.1 From 9b05dfd7276c3cf88f1446fe0892cbe743eab7c7 Mon Sep 17 00:00:00 2001 From: Jieiku Date: Mon, 17 Jul 2023 15:11:26 -0700 Subject: Code Blocks Improvements --- COPY-TO-ROOT-SASS/abridge.scss | 1 + sass/_functions.scss | 12 + sass/abridge.scss | 38 ++- static/js/abridge.min.js | 2 +- static/js/codecopy.js | 100 ++---- static/js/elasticlunr.js | 691 ----------------------------------------- 6 files changed, 67 insertions(+), 777 deletions(-) delete mode 100644 static/js/elasticlunr.js diff --git a/COPY-TO-ROOT-SASS/abridge.scss b/COPY-TO-ROOT-SASS/abridge.scss index b442102..0fd51e9 100644 --- a/COPY-TO-ROOT-SASS/abridge.scss +++ b/COPY-TO-ROOT-SASS/abridge.scss @@ -50,6 +50,7 @@ //$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-copy: true,//copy to clipboard, for code blocks. //$icon-ffolder: false, //$icon-folder: false,// categories folder diff --git a/sass/_functions.scss b/sass/_functions.scss index 13fd8be..2f4029a 100644 --- a/sass/_functions.scss +++ b/sass/_functions.scss @@ -61,6 +61,15 @@ } } +/** + * SVG Icons + * https://github.com/feathericons/feather + * https://github.com/tabler/tabler-icons/find/master + * + * https://yqnn.github.io/svg-path-editor/ + * https://jakearchibald.github.io/svgomg/ + * https://codepen.io/yoksel/pen/MWKeKK + */ @function icon($icon-name,$stroke,$stroke-width:1,$fill:'none',$ic) { $sc:"%23888";//stroke color @if $ic { @@ -115,6 +124,9 @@ angr: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='m8 4 8 8-8 8'/%3E%3C/svg%3E", angrr: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='m4 4 8 8-8 8m9-16 8 8-8 8'/%3E%3C/svg%3E", angu: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='m4 16 8-8 8 8'/%3E%3C/svg%3E", + copy: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='M11 1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1ZM7 9H3a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1v-4'/%3E%3C/svg%3E", + copy-yes: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E", + copy-err: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='M1 12a1 1 0 0 0 22 0 1 1 0 0 0-22 0m11-7v9m0 5v-2'/%3E%3C/svg%3E", search: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Ccircle cx='9.5' cy='9.5' r='8'/%3E%3Cpath d='m23 23-9-9'/%3E%3C/svg%3E" ); $icon: map-get($icons, $icon-name); diff --git a/sass/abridge.scss b/sass/abridge.scss index f5e623e..b50d2b6 100644 --- a/sass/abridge.scss +++ b/sass/abridge.scss @@ -58,6 +58,7 @@ $icon-angl: true !default;//pagination, goto previous page $icon-angr: true !default;//pagination, goto next page $icon-angrr: true !default;//pagination, goto last page $icon-angu: true !default;//back to top button, appears after scrolling down. +$icon-copy: true !default;//copy to clipboard, for code blocks. $icon-ffolder: false !default; $icon-folder: false !default;// categories folder @@ -859,6 +860,8 @@ $syntax: true !default;//syntax highlighting for code blocks padding: .3rem .2rem; } pre { + position: relative; + padding: 2rem .5rem .3rem; display: block; overflow-x: auto; -ms-overflow-style: scrollbar; @@ -1158,27 +1161,29 @@ $syntax: true !default;//syntax highlighting for code blocks .rpad {padding-right: .2rem} .si {font-size: 1.5em} pre code[data-lang]::before { + content: attr(data-lang); + padding: .3rem; + display: block; + background-color: var(--c3); color: var(--h1); + width: 100%; + position: absolute; + top: 0; + left: 0; + padding-left: 1rem; text-transform: uppercase; - content: ' [' attr(data-lang) '] ' "\a\a"; - } - // code copy wrapper - .ccw { - position: relative; - } - .ccw:hover { - .cc { - opacity: 1; - } } // code copy button .cc { - opacity: 0; + cursor: pointer; z-index: 9; position: absolute; - right: 9px; - top: 9px; - font-size: .8rem; + top: .3rem; + right: .5rem; + } + .cc:hover { + background: var(--a3); + opacity: 1; } // Table Override, this is used for Zola's linenos and hl_lines code { @@ -1246,6 +1251,11 @@ $syntax: true !default;//syntax highlighting for code blocks @if $icon-angr {.angr { -webkit-mask: functions.icon(angr, "%23000", 3, "none", $ic) ; background: var(--f2) }}//angle right @if $icon-angrr {.angrr { -webkit-mask: functions.icon(angrr, "%23000", 3, "none", $ic) ; background: var(--f2) }}//angle right right @if $icon-angu {.angu { -webkit-mask: functions.icon(angu, "%23000", 3, "none", $ic) ; background: var(--f2) }}//angle up + @if $icon-copy {//copy icons for code blocks + .copy { -webkit-mask: functions.icon(copy, "%23000", 2, "none", $ic) ; background: var(--f2) } + .copy.yes { -webkit-mask: functions.icon(copy-yes, "%23000", 2, "none", $ic) ; background: var(--f2) } + .copy.err { -webkit-mask: functions.icon(copy-err, "%23000", 2, "none", $ic) ; background: var(--f2) } + } @if $icon-search {.search { -webkit-mask: functions.icon(search, "%23000", 3, "none", $ic) ; background: var(--f2) }}//search @if $icon-bitbucket {.bitbucket { background-image: functions.icon(bitbucket, "%2328f", 2, "none", $ic) }} @if $icon-buymeacoffee {.buymeacoffee { background-image: functions.icon(buymeacoffee, "%23777", 1, "%23fd0", $ic) }} diff --git a/static/js/abridge.min.js b/static/js/abridge.min.js index c438a71..4cfe749 100644 --- a/static/js/abridge.min.js +++ b/static/js/abridge.min.js @@ -1 +1 @@ -const items=document.querySelectorAll(".preStyle");items.forEach(e=>{e.rel="stylesheet"}),document.getElementById("mode")&&document.getElementById("mode").addEventListener("click",()=>{document.documentElement.classList.toggle("light"),localStorage.setItem("theme",document.documentElement.classList.contains("light")?"light":"dark")}),function(){function g(e){var t=new g.Index;return t.pipeline.add(g.trimmer,g.stopWordFilter,g.stemmer),e&&e.call(t,t),t}var a,c,e,t,d,h,f,p,m,v,y,S,x,w,b,E,I,C,D,F,k,L,N,_,n;g.version="0.9.5",((lunr=g).utils={}).warn=(n=this,function(e){n.console&&console.warn&&console.warn(e)}),g.utils.toString=function(e){return null==e?"":e.toString()},(g.EventEmitter=function(){this.events={}}).prototype.addListener=function(){var e=Array.prototype.slice.call(arguments),t=e.pop();if("function"!=typeof t)throw new TypeError("last argument must be a function");e.forEach(function(e){this.hasHandler(e)||(this.events[e]=[]),this.events[e].push(t)},this)},g.EventEmitter.prototype.removeListener=function(e,t){this.hasHandler(e)&&-1!==(t=this.events[e].indexOf(t))&&(this.events[e].splice(t,1),0==this.events[e].length)&&delete this.events[e]},g.EventEmitter.prototype.emit=function(e){var t;this.hasHandler(e)&&(t=Array.prototype.slice.call(arguments,1),this.events[e].forEach(function(e){e.apply(void 0,t)},this))},g.EventEmitter.prototype.hasHandler=function(e){return e in this.events},(g.tokenizer=function(e){var t,n;return arguments.length&&null!=e?Array.isArray(e)?(t=(t=e.filter(function(e){return null!=e})).map(function(e){return g.utils.toString(e).toLowerCase()}),n=[],t.forEach(function(e){e=e.split(g.tokenizer.seperator),n=n.concat(e)},this),n):e.toString().trim().toLowerCase().split(g.tokenizer.seperator):[]}).defaultSeperator=/[\s\-]+/,g.tokenizer.seperator=g.tokenizer.defaultSeperator,g.tokenizer.setSeperator=function(e){null!=e&&"object"==typeof e&&(g.tokenizer.seperator=e)},g.tokenizer.resetSeperator=function(){g.tokenizer.seperator=g.tokenizer.defaultSeperator},g.tokenizer.getSeperator=function(){return g.tokenizer.seperator},(g.Pipeline=function(){this._queue=[]}).registeredFunctions={},g.Pipeline.registerFunction=function(e,t){t in g.Pipeline.registeredFunctions&&g.utils.warn("Overwriting existing registered function: "+t),e.label=t,g.Pipeline.registeredFunctions[t]=e},g.Pipeline.getRegisteredFunction=function(e){return e in g.Pipeline.registeredFunctions!=1?null:g.Pipeline.registeredFunctions[e]},g.Pipeline.warnIfFunctionNotRegistered=function(e){e.label&&e.label in this.registeredFunctions||g.utils.warn("Function is not registered with pipeline. This may cause problems when serialising the index.\n",e)},g.Pipeline.load=function(e){var n=new g.Pipeline;return e.forEach(function(e){var t=g.Pipeline.getRegisteredFunction(e);if(!t)throw new Error("Cannot load un-registered function: "+e);n.add(t)}),n},g.Pipeline.prototype.add=function(){Array.prototype.slice.call(arguments).forEach(function(e){g.Pipeline.warnIfFunctionNotRegistered(e),this._queue.push(e)},this)},g.Pipeline.prototype.after=function(e,t){if(g.Pipeline.warnIfFunctionNotRegistered(t),-1===(e=this._queue.indexOf(e)))throw new Error("Cannot find existingFn");this._queue.splice(e+1,0,t)},g.Pipeline.prototype.before=function(e,t){if(g.Pipeline.warnIfFunctionNotRegistered(t),-1===(e=this._queue.indexOf(e)))throw new Error("Cannot find existingFn");this._queue.splice(e,0,t)},g.Pipeline.prototype.remove=function(e){-1!==(e=this._queue.indexOf(e))&&this._queue.splice(e,1)},g.Pipeline.prototype.run=function(e){for(var t=[],n=e.length,o=this._queue.length,i=0;iu[o]&&o++:(t.add(s[n]),n++,o++);return t},lunr.SortedSet.prototype.clone=function(){var e=new lunr.SortedSet;return e.elements=this.toArray(),e.length=e.elements.length,e},lunr.SortedSet.prototype.union=function(e){for(var t,e=this.length>=e.length?(t=this,e):(t=e,this),n=t.clone(),o=0,i=e.toArray();o",a=n.querySelector("a"),t=n.querySelector("span:first-child"),d=n.querySelector("span:nth-child(2)"),a.href=e.ref,t.textContent=e.doc.title,d.innerHTML=function(e){var t=x.map(function(e){return elasticlunr.stemmer(e.toLowerCase())}),n=!1,o=0,i=[],r=e.toLowerCase().split(". ");for(f in r){var s,u=r[f].split(/[\s\n]/),l=8;for(s in u){if(0<(g=u[s]).length){for(var a in t)elasticlunr.stemmer(g).startsWith(t[a])&&(l=40,n=!0);i.push([g,l,o]),l=2}o=o+g.length+1}o+=1}if(0===i.length)return void 0!==e.length&&300"),S=g[2]+g[0].length,40!==g[1]&&12<=g[0].length&&!/^[\x00-\xff]+$/.test(g[0])?(v=function(e){for(var t="",n=!1,o=0,i=0,r=0,s=0;s");return y.push("…"),y.join("")}(e.doc.body),s.appendChild(n))});i.length>r;)s.removeChild(i[0])},!0),s.addEventListener("click",function(){for(;s.lastChild;)s.removeChild(s.lastChild);return!1},!0),document.goSearch.onsubmit=function(){var e=document.querySelector("main"),t=(window.main||(window.main=e.innerHTML),document.getElementById("suggestions")),n=t.cloneNode(!0),o=(n.id="results",document.createElement("div")),i='

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

");return o.innerHTML=i,n.insertBefore(o,n.firstChild),e.innerHTML=n.outerHTML,t.innerHTML="",document.getElementById("searchinput").value="",document.body.contains(document.closeSearch)&&(document.closeSearch.onsubmit=function(){document.querySelector("main").innerHTML=window.main}),!1})},function(){for(var e=document.getElementsByClassName("m-protected"),t=0;tasync function(e,t){var n=t.querySelectorAll("table")["length"];let o="";0 tr > td:last-child").forEach(e=>{o+=e.innerText}):o=t.querySelector(":last-child > code").innerText;try{"granted"==(result=await navigator.permissions.query({name:"clipboard-write"})).state||"prompt"==result.state?await navigator.clipboard.writeText(o):i(o,t)}catch(e){i(o,t)}finally{e.innerHTML="Copied",setTimeout(function(){e.innerHTML="Copy"},2e3)}}(t,e));var n=document.createElement("div");n.className="ccw",n.appendChild(t),e.parentNode.insertBefore(n,e),n.appendChild(e)}function i(e,t){var n=document.createElement("textArea"),e=(n.contentEditable="true",n.readOnly="false",n.className="copyable-text-area",n.value=e,t.insertBefore(n,t.firstChild),document.createRange()),o=(e.selectNodeContents(n),window.getSelection());o.removeAllRanges(),o.addRange(e),n.setSelectionRange(0,999999),document.execCommand("copy"),t.removeChild(n)}document.querySelectorAll("pre").forEach(e=>t(e))}(); \ No newline at end of file +const items=document.querySelectorAll(".preStyle"),changeIcon=(items.forEach(e=>{e.rel="stylesheet"}),document.getElementById("mode")&&document.getElementById("mode").addEventListener("click",()=>{document.documentElement.classList.toggle("light"),localStorage.setItem("theme",document.documentElement.classList.contains("light")?"light":"dark")}),!function(){function g(e){var t=new g.Index;return t.pipeline.add(g.trimmer,g.stopWordFilter,g.stemmer),e&&e.call(t,t),t}var a,c,e,t,d,h,f,p,m,v,y,S,x,b,w,I,E,C,D,F,k,L,_,N,n;g.version="0.9.5",((lunr=g).utils={}).warn=(n=this,function(e){n.console&&console.warn&&console.warn(e)}),g.utils.toString=function(e){return null==e?"":e.toString()},(g.EventEmitter=function(){this.events={}}).prototype.addListener=function(){var e=Array.prototype.slice.call(arguments),t=e.pop();if("function"!=typeof t)throw new TypeError("last argument must be a function");e.forEach(function(e){this.hasHandler(e)||(this.events[e]=[]),this.events[e].push(t)},this)},g.EventEmitter.prototype.removeListener=function(e,t){this.hasHandler(e)&&-1!==(t=this.events[e].indexOf(t))&&(this.events[e].splice(t,1),0==this.events[e].length)&&delete this.events[e]},g.EventEmitter.prototype.emit=function(e){var t;this.hasHandler(e)&&(t=Array.prototype.slice.call(arguments,1),this.events[e].forEach(function(e){e.apply(void 0,t)},this))},g.EventEmitter.prototype.hasHandler=function(e){return e in this.events},(g.tokenizer=function(e){var t,n;return arguments.length&&null!=e?Array.isArray(e)?(t=(t=e.filter(function(e){return null!=e})).map(function(e){return g.utils.toString(e).toLowerCase()}),n=[],t.forEach(function(e){e=e.split(g.tokenizer.seperator),n=n.concat(e)},this),n):e.toString().trim().toLowerCase().split(g.tokenizer.seperator):[]}).defaultSeperator=/[\s\-]+/,g.tokenizer.seperator=g.tokenizer.defaultSeperator,g.tokenizer.setSeperator=function(e){null!=e&&"object"==typeof e&&(g.tokenizer.seperator=e)},g.tokenizer.resetSeperator=function(){g.tokenizer.seperator=g.tokenizer.defaultSeperator},g.tokenizer.getSeperator=function(){return g.tokenizer.seperator},(g.Pipeline=function(){this._queue=[]}).registeredFunctions={},g.Pipeline.registerFunction=function(e,t){t in g.Pipeline.registeredFunctions&&g.utils.warn("Overwriting existing registered function: "+t),e.label=t,g.Pipeline.registeredFunctions[t]=e},g.Pipeline.getRegisteredFunction=function(e){return e in g.Pipeline.registeredFunctions!=1?null:g.Pipeline.registeredFunctions[e]},g.Pipeline.warnIfFunctionNotRegistered=function(e){e.label&&e.label in this.registeredFunctions||g.utils.warn("Function is not registered with pipeline. This may cause problems when serialising the index.\n",e)},g.Pipeline.load=function(e){var n=new g.Pipeline;return e.forEach(function(e){var t=g.Pipeline.getRegisteredFunction(e);if(!t)throw new Error("Cannot load un-registered function: "+e);n.add(t)}),n},g.Pipeline.prototype.add=function(){Array.prototype.slice.call(arguments).forEach(function(e){g.Pipeline.warnIfFunctionNotRegistered(e),this._queue.push(e)},this)},g.Pipeline.prototype.after=function(e,t){if(g.Pipeline.warnIfFunctionNotRegistered(t),-1===(e=this._queue.indexOf(e)))throw new Error("Cannot find existingFn");this._queue.splice(e+1,0,t)},g.Pipeline.prototype.before=function(e,t){if(g.Pipeline.warnIfFunctionNotRegistered(t),-1===(e=this._queue.indexOf(e)))throw new Error("Cannot find existingFn");this._queue.splice(e,0,t)},g.Pipeline.prototype.remove=function(e){-1!==(e=this._queue.indexOf(e))&&this._queue.splice(e,1)},g.Pipeline.prototype.run=function(e){for(var t=[],n=e.length,o=this._queue.length,i=0;iu[o]&&o++:(t.add(s[n]),n++,o++);return t},lunr.SortedSet.prototype.clone=function(){var e=new lunr.SortedSet;return e.elements=this.toArray(),e.length=e.elements.length,e},lunr.SortedSet.prototype.union=function(e){for(var t,e=this.length>=e.length?(t=this,e):(t=e,this),n=t.clone(),o=0,i=e.toArray();o",a=n.querySelector("a"),t=n.querySelector("span:first-child"),d=n.querySelector("span:nth-child(2)"),a.href=e.ref,t.textContent=e.doc.title,d.innerHTML=function(e){var t=x.map(function(e){return elasticlunr.stemmer(e.toLowerCase())}),n=!1,o=0,i=[],r=e.toLowerCase().split(". ");for(f in r){var s,u=r[f].split(/[\s\n]/),l=8;for(s in u){if(0<(g=u[s]).length){for(var a in t)elasticlunr.stemmer(g).startsWith(t[a])&&(l=40,n=!0);i.push([g,l,o]),l=2}o=o+g.length+1}o+=1}if(0===i.length)return void 0!==e.length&&300"),S=g[2]+g[0].length,40!==g[1]&&12<=g[0].length&&!/^[\x00-\xff]+$/.test(g[0])?(v=function(e){for(var t="",n=!1,o=0,i=0,r=0,s=0;s");return y.push("…"),y.join("")}(e.doc.body),s.appendChild(n))});i.length>r;)s.removeChild(i[0])},!0),s.addEventListener("click",function(){for(;s.lastChild;)s.removeChild(s.lastChild);return!1},!0),document.goSearch.onsubmit=function(){var e=document.querySelector("main"),t=(window.main||(window.main=e.innerHTML),document.getElementById("suggestions")),n=t.cloneNode(!0),o=(n.id="results",document.createElement("div")),i='

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

");return o.innerHTML=i,n.insertBefore(o,n.firstChild),e.innerHTML=n.outerHTML,t.innerHTML="",document.getElementById("searchinput").value="",document.body.contains(document.closeSearch)&&(document.closeSearch.onsubmit=function(){document.querySelector("main").innerHTML=window.main}),!1})},!function(){for(var e=document.getElementsByClassName("m-protected"),t=0;t{e.classList.add(t),setTimeout(()=>e.classList.remove(t),2500)}),copyCodeAndChangeIcon=async(t,e)=>{e=(e.querySelector("table")?getTableCode:getNonTableCode)(e);try{await navigator.clipboard.writeText(e),changeIcon(t,"yes")}catch(e){changeIcon(t,"err")}},getNonTableCode=e=>[...e.querySelectorAll("code")].map(e=>e.textContent).join(""),getTableCode=e=>[...e.querySelectorAll("tr")].map(e=>e.querySelector("td:last-child")?.innerText??"").join("");document.querySelectorAll("pre").forEach(e=>{const t=document.createElement("div");t.className="cc svgs svgh copy",t.innerHTML=" ",e.prepend(t),t.addEventListener("click",()=>copyCodeAndChangeIcon(t,e))}); \ No newline at end of file diff --git a/static/js/codecopy.js b/static/js/codecopy.js index c1f3a75..9e00c79 100644 --- a/static/js/codecopy.js +++ b/static/js/codecopy.js @@ -1,76 +1,34 @@ -// https://aaronluna.dev/blog/add-copy-button-to-code-blocks-hugo-chroma/ -// Further modified for Zola by Jieiku: https://github.com/Jieiku -(function() { - // create copy button - function ccb(highlightDiv) { - const button = document.createElement("button"); - button.className = "cc "; - button.type = "button"; - button.innerHTML = "Copy"; - button.addEventListener("click", () => - ccc(button, highlightDiv) - ); +const changeIcon = (copyDiv, className) => { + copyDiv.classList.add(className); + setTimeout(() => copyDiv.classList.remove(className), 2500); +}; - // addCopyButtonToDom - const wrapper = document.createElement("div"); - wrapper.className = "ccw"; - wrapper.appendChild(button); - highlightDiv.parentNode.insertBefore(wrapper, highlightDiv); - wrapper.appendChild(highlightDiv); - } - - // copy code clipboard - async function ccc(button, highlightDiv) { - //look for table, if so do it different - const { length } = highlightDiv.querySelectorAll("table"); - let codeToCopy = ""; - if (length > 0) { - const items = highlightDiv.querySelectorAll(":last-child > tr > td:last-child"); - items.forEach(item => { - codeToCopy = codeToCopy + item.innerText; - //console.log(codeToCopy); - }); - } else { - codeToCopy = highlightDiv.querySelector(":last-child > code").innerText; - } +const copyCodeAndChangeIcon = async (copyDiv, block) => { + const code = block.querySelector('table') ? getTableCode(block) : getNonTableCode(block); try { - result = await navigator.permissions.query({ name: "clipboard-write" }); - if (result.state == "granted" || result.state == "prompt") { - await navigator.clipboard.writeText(codeToCopy); - } else { - cce(codeToCopy, highlightDiv);//copyCodeBlockExecCommand - } - } catch (_) { - cce(codeToCopy, highlightDiv);//copyCodeBlockExecCommand - } finally { - //codeWasCopied - //button.blur(); - button.innerHTML = "Copied"; - setTimeout(function () { - button.innerHTML = "Copy"; - }, 2000); + await navigator.clipboard.writeText(code); + changeIcon(copyDiv, "yes"); + } catch (error) { + changeIcon(copyDiv, "err"); } - } +}; + +const getNonTableCode = (block) => { + return [...block.querySelectorAll('code')] + .map(code => code.textContent) + .join(''); +}; - //copyCodeBlockExecCommand - function cce(codeToCopy, highlightDiv) { - const textArea = document.createElement("textArea"); - textArea.contentEditable = "true"; - textArea.readOnly = "false"; - textArea.className = "copyable-text-area"; - textArea.value = codeToCopy; - highlightDiv.insertBefore(textArea, highlightDiv.firstChild); - const range = document.createRange(); - range.selectNodeContents(textArea); - const sel = window.getSelection(); - sel.removeAllRanges(); - sel.addRange(range); - textArea.setSelectionRange(0, 999999); - document.execCommand("copy"); - highlightDiv.removeChild(textArea); - } +const getTableCode = (block) => { + return [...block.querySelectorAll('tr')] + .map(row => row.querySelector('td:last-child')?.innerText ?? '') + .join(''); +}; - document - .querySelectorAll("pre") - .forEach((highlightDiv) => ccb(highlightDiv)); -})(); \ No newline at end of file +document.querySelectorAll("pre").forEach((block) => { + const copyDiv = document.createElement("div"); + copyDiv.className = "cc svgs svgh copy"; + copyDiv.innerHTML = " "; + block.prepend(copyDiv); + copyDiv.addEventListener("click", () => copyCodeAndChangeIcon(copyDiv, block));; +}); diff --git a/static/js/elasticlunr.js b/static/js/elasticlunr.js deleted file mode 100644 index d96ce65..0000000 --- a/static/js/elasticlunr.js +++ /dev/null @@ -1,691 +0,0 @@ -/** - * elasticlunr - http://weixsong.github.io - * Lightweight full-text search engine in Javascript for browser search and offline search. - 0.9.6 - * - * Copyright (C) 2017 Oliver Nightingale - * Copyright (C) 2017 Wei Song - * MIT Licensed - * @license - */ -! function() { - function e(e) { - if (null === e || "object" != typeof e) return e; - var t = e.constructor(); - for (var n in e) e.hasOwnProperty(n) && (t[n] = e[n]); - return t - } - var t = function(e) { - var n = new t.Index; - return n.pipeline.add(t.trimmer, t.stopWordFilter, t.stemmer), e && e.call(n, n), n - }; - t.version = "0.9.5", lunr = t, t.utils = {}, t.utils.warn = function(e) { - return function(t) { - e.console && console.warn && console.warn(t) - } - }(this), t.utils.toString = function(e) { - return void 0 === e || null === e ? "" : e.toString() - }, t.EventEmitter = function() { - this.events = {} - }, t.EventEmitter.prototype.addListener = function() { - var e = Array.prototype.slice.call(arguments), - t = e.pop(), - n = e; - if ("function" != typeof t) throw new TypeError("last argument must be a function"); - n.forEach(function(e) { - this.hasHandler(e) || (this.events[e] = []), this.events[e].push(t) - }, this) - }, t.EventEmitter.prototype.removeListener = function(e, t) { - if (this.hasHandler(e)) { - var n = this.events[e].indexOf(t); - 1 !== n && (this.events[e].splice(n, 1), 0 == this.events[e].length && delete this.events[e]) - } - }, t.EventEmitter.prototype.emit = function(e) { - if (this.hasHandler(e)) { - var t = Array.prototype.slice.call(arguments, 1); - this.events[e].forEach(function(e) { - e.apply(void 0, t) - }, this) - } - }, t.EventEmitter.prototype.hasHandler = function(e) { - return e in this.events - }, t.tokenizer = function(e) { - if (!arguments.length || null === e || void 0 === e) return []; - if (Array.isArray(e)) { - var n = e.filter(function(e) { - return null === e || void 0 === e ? !1 : !0 - }); - n = n.map(function(e) { - return t.utils.toString(e).toLowerCase() - }); - var i = []; - return n.forEach(function(e) { - var n = e.split(t.tokenizer.seperator); - i = i.concat(n) - }, this), i - } - return e.toString().trim().toLowerCase().split(t.tokenizer.seperator) - }, t.tokenizer.defaultSeperator = /[\s\-]+/, t.tokenizer.seperator = t.tokenizer.defaultSeperator, t.tokenizer.setSeperator = function(e) { - null !== e && void 0 !== e && "object" == typeof e && (t.tokenizer.seperator = e) - }, t.tokenizer.resetSeperator = function() { - t.tokenizer.seperator = t.tokenizer.defaultSeperator - }, t.tokenizer.getSeperator = function() { - return t.tokenizer.seperator - }, t.Pipeline = function() { - this._queue = [] - }, t.Pipeline.registeredFunctions = {}, t.Pipeline.registerFunction = function(e, n) { - n in t.Pipeline.registeredFunctions && t.utils.warn("Overwriting existing registered function: " + n), e.label = n, t.Pipeline.registeredFunctions[n] = e - }, t.Pipeline.getRegisteredFunction = function(e) { - return e in t.Pipeline.registeredFunctions != !0 ? null : t.Pipeline.registeredFunctions[e] - }, t.Pipeline.warnIfFunctionNotRegistered = function(e) { - var n = e.label && e.label in this.registeredFunctions; - n || t.utils.warn("Function is not registered with pipeline. This may cause problems when serialising the index.\n", e) - }, t.Pipeline.load = function(e) { - var n = new t.Pipeline; - return e.forEach(function(e) { - var i = t.Pipeline.getRegisteredFunction(e); - if (!i) throw new Error("Cannot load un-registered function: " + e); - n.add(i) - }), n - }, t.Pipeline.prototype.add = function() { - var e = Array.prototype.slice.call(arguments); - e.forEach(function(e) { - t.Pipeline.warnIfFunctionNotRegistered(e), this._queue.push(e) - }, this) - }, t.Pipeline.prototype.after = function(e, n) { - t.Pipeline.warnIfFunctionNotRegistered(n); - var i = this._queue.indexOf(e); - if (-1 === i) throw new Error("Cannot find existingFn"); - this._queue.splice(i + 1, 0, n) - }, t.Pipeline.prototype.before = function(e, n) { - t.Pipeline.warnIfFunctionNotRegistered(n); - var i = this._queue.indexOf(e); - if (-1 === i) throw new Error("Cannot find existingFn"); - this._queue.splice(i, 0, n) - }, t.Pipeline.prototype.remove = function(e) { - var t = this._queue.indexOf(e); - 1 !== t && this._queue.splice(t, 1) - }, t.Pipeline.prototype.run = function(e) { - for (var t = [], n = e.length, i = this._queue.length, o = 0; n > o; o++) { - for (var r = e[o], s = 0; i > s && (r = this._queue[s](r, o, e), void 0 !== r && null !== r); s++); - void 0 !== r && null !== r && t.push(r) - } - return t - }, t.Pipeline.prototype.reset = function() { - this._queue = [] - }, t.Pipeline.prototype.get = function() { - return this._queue - }, t.Pipeline.prototype.toJSON = function() { - return this._queue.map(function(e) { - return t.Pipeline.warnIfFunctionNotRegistered(e), e.label - }) - }, t.Index = function() { - this._fields = [], this._ref = "id", this.pipeline = new t.Pipeline, this.documentStore = new t.DocumentStore, this.index = {}, this.eventEmitter = new t.EventEmitter, this._idfCache = {}, this.on("add", "remove", "update", function() { - this._idfCache = {} - }.bind(this)) - }, t.Index.prototype.on = function() { - var e = Array.prototype.slice.call(arguments); - return this.eventEmitter.addListener.apply(this.eventEmitter, e) - }, t.Index.prototype.off = function(e, t) { - return this.eventEmitter.removeListener(e, t) - }, t.Index.load = function(e) { - e.version !== t.version && t.utils.warn("version mismatch: current " + t.version + " importing " + e.version); - var n = new this; - n._fields = e.fields, n._ref = e.ref, n.documentStore = t.DocumentStore.load(e.documentStore), n.pipeline = t.Pipeline.load(e.pipeline), n.index = {}; - for (var i in e.index) n.index[i] = t.InvertedIndex.load(e.index[i]); - return n - }, t.Index.prototype.addField = function(e) { - return this._fields.push(e), this.index[e] = new t.InvertedIndex, this - }, t.Index.prototype.setRef = function(e) { - return this._ref = e, this - }, t.Index.prototype.saveDocument = function(e) { - return this.documentStore = new t.DocumentStore(e), this - }, t.Index.prototype.addDoc = function(e, n) { - if (e) { - var n = void 0 === n ? !0 : n, - i = e[this._ref]; - this.documentStore.addDoc(i, e), this._fields.forEach(function(n) { - var o = this.pipeline.run(t.tokenizer(e[n])); - this.documentStore.addFieldLength(i, n, o.length); - var r = {}; - o.forEach(function(e) { - e in r ? r[e] += 1 : r[e] = 1 - }, this); - for (var s in r) { - var u = r[s]; - u = Math.sqrt(u), this.index[n].addToken(s, { - ref: i, - tf: u - }) - } - }, this), n && this.eventEmitter.emit("add", e, this) - } - }, t.Index.prototype.removeDocByRef = function(e) { - if (e && this.documentStore.isDocStored() !== !1 && this.documentStore.hasDoc(e)) { - var t = this.documentStore.getDoc(e); - this.removeDoc(t, !1) - } - }, t.Index.prototype.removeDoc = function(e, n) { - if (e) { - var n = void 0 === n ? !0 : n, - i = e[this._ref]; - this.documentStore.hasDoc(i) && (this.documentStore.removeDoc(i), this._fields.forEach(function(n) { - var o = this.pipeline.run(t.tokenizer(e[n])); - o.forEach(function(e) { - this.index[n].removeToken(e, i) - }, this) - }, this), n && this.eventEmitter.emit("remove", e, this)) - } - }, t.Index.prototype.updateDoc = function(e, t) { - var t = void 0 === t ? !0 : t; - this.removeDocByRef(e[this._ref], !1), this.addDoc(e, !1), t && this.eventEmitter.emit("update", e, this) - }, t.Index.prototype.idf = function(e, t) { - var n = "@" + t + "/" + e; - if (Object.prototype.hasOwnProperty.call(this._idfCache, n)) return this._idfCache[n]; - var i = this.index[t].getDocFreq(e), - o = 1 + Math.log(this.documentStore.length / (i + 1)); - return this._idfCache[n] = o, o - }, t.Index.prototype.getFields = function() { - return this._fields.slice() - }, t.Index.prototype.search = function(e, n) { - if (!e) return []; - e = "string" == typeof e ? { - any: e - } : JSON.parse(JSON.stringify(e)); - var i = null; - null != n && (i = JSON.stringify(n)); - for (var o = new t.Configuration(i, this.getFields()).get(), r = {}, s = Object.keys(e), u = 0; u < s.length; u++) { - var a = s[u]; - r[a] = this.pipeline.run(t.tokenizer(e[a])) - } - var l = {}; - for (var c in o) { - var d = r[c] || r.any; - if (d) { - var f = this.fieldSearch(d, c, o), - h = o[c].boost; - for (var p in f) f[p] = f[p] * h; - for (var p in f) p in l ? l[p] += f[p] : l[p] = f[p] - } - } - var v, g = []; - for (var p in l) v = { - ref: p, - score: l[p] - }, this.documentStore.hasDoc(p) && (v.doc = this.documentStore.getDoc(p)), g.push(v); - return g.sort(function(e, t) { - return t.score - e.score - }), g - }, t.Index.prototype.fieldSearch = function(e, t, n) { - var i = n[t].bool, - o = n[t].expand, - r = n[t].boost, - s = null, - u = {}; - return 0 !== r ? (e.forEach(function(e) { - var n = [e]; - 1 == o && (n = this.index[t].expandToken(e)); - var r = {}; - n.forEach(function(n) { - var o = this.index[t].getDocs(n), - a = this.idf(n, t); - if (s && "AND" == i) { - var l = {}; - for (var c in s) c in o && (l[c] = o[c]); - o = l - } - n == e && this.fieldSearchStats(u, n, o); - for (var c in o) { - var d = this.index[t].getTermFrequency(n, c), - f = this.documentStore.getFieldLength(c, t), - h = 1; - 0 != f && (h = 1 / Math.sqrt(f)); - var p = 1; - n != e && (p = .15 * (1 - (n.length - e.length) / n.length)); - var v = d * a * h * p; - c in r ? r[c] += v : r[c] = v - } - }, this), s = this.mergeScores(s, r, i) - }, this), s = this.coordNorm(s, u, e.length)) : void 0 - }, t.Index.prototype.mergeScores = function(e, t, n) { - if (!e) return t; - if ("AND" == n) { - var i = {}; - for (var o in t) o in e && (i[o] = e[o] + t[o]); - return i - } - for (var o in t) o in e ? e[o] += t[o] : e[o] = t[o]; - return e - }, t.Index.prototype.fieldSearchStats = function(e, t, n) { - for (var i in n) i in e ? e[i].push(t) : e[i] = [t] - }, t.Index.prototype.coordNorm = function(e, t, n) { - for (var i in e) - if (i in t) { - var o = t[i].length; - e[i] = e[i] * o / n - } - return e - }, t.Index.prototype.toJSON = function() { - var e = {}; - return this._fields.forEach(function(t) { - e[t] = this.index[t].toJSON() - }, this), { - version: t.version, - fields: this._fields, - ref: this._ref, - documentStore: this.documentStore.toJSON(), - index: e, - pipeline: this.pipeline.toJSON() - } - }, t.Index.prototype.use = function(e) { - var t = Array.prototype.slice.call(arguments, 1); - t.unshift(this), e.apply(this, t) - }, t.DocumentStore = function(e) { - this._save = null === e || void 0 === e ? !0 : e, this.docs = {}, this.docInfo = {}, this.length = 0 - }, t.DocumentStore.load = function(e) { - var t = new this; - return t.length = e.length, t.docs = e.docs, t.docInfo = e.docInfo, t._save = e.save, t - }, t.DocumentStore.prototype.isDocStored = function() { - return this._save - }, t.DocumentStore.prototype.addDoc = function(t, n) { - this.hasDoc(t) || this.length++, this.docs[t] = this._save === !0 ? e(n) : null - }, t.DocumentStore.prototype.getDoc = function(e) { - return this.hasDoc(e) === !1 ? null : this.docs[e] - }, t.DocumentStore.prototype.hasDoc = function(e) { - return e in this.docs - }, t.DocumentStore.prototype.removeDoc = function(e) { - this.hasDoc(e) && (delete this.docs[e], delete this.docInfo[e], this.length--) - }, t.DocumentStore.prototype.addFieldLength = function(e, t, n) { - null !== e && void 0 !== e && 0 != this.hasDoc(e) && (this.docInfo[e] || (this.docInfo[e] = {}), this.docInfo[e][t] = n) - }, t.DocumentStore.prototype.updateFieldLength = function(e, t, n) { - null !== e && void 0 !== e && 0 != this.hasDoc(e) && this.addFieldLength(e, t, n) - }, t.DocumentStore.prototype.getFieldLength = function(e, t) { - return null === e || void 0 === e ? 0 : e in this.docs && t in this.docInfo[e] ? this.docInfo[e][t] : 0 - }, t.DocumentStore.prototype.toJSON = function() { - return { - docs: this.docs, - docInfo: this.docInfo, - length: this.length, - save: this._save - } - }, t.stemmer = function() { - var e = { - ational: "ate", - tional: "tion", - enci: "ence", - anci: "ance", - izer: "ize", - bli: "ble", - alli: "al", - entli: "ent", - eli: "e", - ousli: "ous", - ization: "ize", - ation: "ate", - ator: "ate", - alism: "al", - iveness: "ive", - fulness: "ful", - ousness: "ous", - aliti: "al", - iviti: "ive", - biliti: "ble", - logi: "log" - }, - t = { - icate: "ic", - ative: "", - alize: "al", - iciti: "ic", - ical: "ic", - ful: "", - ness: "" - }, - n = "[^aeiou]", - i = "[aeiouy]", - o = n + "[^aeiouy]*", - r = i + "[aeiou]*", - s = "^(" + o + ")?" + r + o, - u = "^(" + o + ")?" + r + o + "(" + r + ")?$", - a = "^(" + o + ")?" + r + o + r + o, - l = "^(" + o + ")?" + i, - c = new RegExp(s), - d = new RegExp(a), - f = new RegExp(u), - h = new RegExp(l), - p = /^(.+?)(ss|i)es$/, - v = /^(.+?)([^s])s$/, - g = /^(.+?)eed$/, - m = /^(.+?)(ed|ing)$/, - y = /.$/, - S = /(at|bl|iz)$/, - x = new RegExp("([^aeiouylsz])\\1$"), - w = new RegExp("^" + o + i + "[^aeiouwxy]$"), - I = /^(.+?[^aeiou])y$/, - b = /^(.+?)(ational|tional|enci|anci|izer|bli|alli|entli|eli|ousli|ization|ation|ator|alism|iveness|fulness|ousness|aliti|iviti|biliti|logi)$/, - E = /^(.+?)(icate|ative|alize|iciti|ical|ful|ness)$/, - D = /^(.+?)(al|ance|ence|er|ic|able|ible|ant|ement|ment|ent|ou|ism|ate|iti|ous|ive|ize)$/, - F = /^(.+?)(s|t)(ion)$/, - _ = /^(.+?)e$/, - P = /ll$/, - k = new RegExp("^" + o + i + "[^aeiouwxy]$"), - z = function(n) { - var i, o, r, s, u, a, l; - if (n.length < 3) return n; - if (r = n.substr(0, 1), "y" == r && (n = r.toUpperCase() + n.substr(1)), s = p, u = v, s.test(n) ? n = n.replace(s, "$1$2") : u.test(n) && (n = n.replace(u, "$1$2")), s = g, u = m, s.test(n)) { - var z = s.exec(n); - s = c, s.test(z[1]) && (s = y, n = n.replace(s, "")) - } else if (u.test(n)) { - var z = u.exec(n); - i = z[1], u = h, u.test(i) && (n = i, u = S, a = x, l = w, u.test(n) ? n += "e" : a.test(n) ? (s = y, n = n.replace(s, "")) : l.test(n) && (n += "e")) - } - if (s = I, s.test(n)) { - var z = s.exec(n); - i = z[1], n = i + "i" - } - if (s = b, s.test(n)) { - var z = s.exec(n); - i = z[1], o = z[2], s = c, s.test(i) && (n = i + e[o]) - } - if (s = E, s.test(n)) { - var z = s.exec(n); - i = z[1], o = z[2], s = c, s.test(i) && (n = i + t[o]) - } - if (s = D, u = F, s.test(n)) { - var z = s.exec(n); - i = z[1], s = d, s.test(i) && (n = i) - } else if (u.test(n)) { - var z = u.exec(n); - i = z[1] + z[2], u = d, u.test(i) && (n = i) - } - if (s = _, s.test(n)) { - var z = s.exec(n); - i = z[1], s = d, u = f, a = k, (s.test(i) || u.test(i) && !a.test(i)) && (n = i) - } - return s = P, u = d, s.test(n) && u.test(n) && (s = y, n = n.replace(s, "")), "y" == r && (n = r.toLowerCase() + n.substr(1)), n - }; - return z - }(), t.Pipeline.registerFunction(t.stemmer, "stemmer"), t.stopWordFilter = function(e) { - return e && t.stopWordFilter.stopWords[e] !== !0 ? e : void 0 - }, t.clearStopWords = function() { - t.stopWordFilter.stopWords = {} - }, t.addStopWords = function(e) { - null != e && Array.isArray(e) !== !1 && e.forEach(function(e) { - t.stopWordFilter.stopWords[e] = !0 - }, this) - }, t.resetStopWords = function() { - t.stopWordFilter.stopWords = t.defaultStopWords - }, t.defaultStopWords = { - "": !0, - a: !0, - able: !0, - about: !0, - across: !0, - after: !0, - all: !0, - almost: !0, - also: !0, - am: !0, - among: !0, - an: !0, - and: !0, - any: !0, - are: !0, - as: !0, - at: !0, - be: !0, - because: !0, - been: !0, - but: !0, - by: !0, - can: !0, - cannot: !0, - could: !0, - dear: !0, - did: !0, - "do": !0, - does: !0, - either: !0, - "else": !0, - ever: !0, - every: !0, - "for": !0, - from: !0, - get: !0, - got: !0, - had: !0, - has: !0, - have: !0, - he: !0, - her: !0, - hers: !0, - him: !0, - his: !0, - how: !0, - however: !0, - i: !0, - "if": !0, - "in": !0, - into: !0, - is: !0, - it: !0, - its: !0, - just: !0, - least: !0, - let: !0, - like: !0, - likely: !0, - may: !0, - me: !0, - might: !0, - most: !0, - must: !0, - my: !0, - neither: !0, - no: !0, - nor: !0, - not: !0, - of: !0, - off: !0, - often: !0, - on: !0, - only: !0, - or: !0, - other: !0, - our: !0, - own: !0, - rather: !0, - said: !0, - say: !0, - says: !0, - she: !0, - should: !0, - since: !0, - so: !0, - some: !0, - than: !0, - that: !0, - the: !0, - their: !0, - them: !0, - then: !0, - there: !0, - these: !0, - they: !0, - "this": !0, - tis: !0, - to: !0, - too: !0, - twas: !0, - us: !0, - wants: !0, - was: !0, - we: !0, - were: !0, - what: !0, - when: !0, - where: !0, - which: !0, - "while": !0, - who: !0, - whom: !0, - why: !0, - will: !0, - "with": !0, - would: !0, - yet: !0, - you: !0, - your: !0 - }, t.stopWordFilter.stopWords = t.defaultStopWords, t.Pipeline.registerFunction(t.stopWordFilter, "stopWordFilter"), t.trimmer = function(e) { - if (null === e || void 0 === e) throw new Error("token should not be undefined"); - return e.replace(/^\W+/, "").replace(/\W+$/, "") - }, t.Pipeline.registerFunction(t.trimmer, "trimmer"), t.InvertedIndex = function() { - this.root = { - docs: {}, - df: 0 - } - }, t.InvertedIndex.load = function(e) { - var t = new this; - return t.root = e.root, t - }, t.InvertedIndex.prototype.addToken = function(e, t, n) { - for (var n = n || this.root, i = 0; i <= e.length - 1;) { - var o = e[i]; - o in n || (n[o] = { - docs: {}, - df: 0 - }), i += 1, n = n[o] - } - var r = t.ref; - n.docs[r] ? n.docs[r] = { - tf: t.tf - } : (n.docs[r] = { - tf: t.tf - }, n.df += 1) - }, t.InvertedIndex.prototype.hasToken = function(e) { - if (!e) return !1; - for (var t = this.root, n = 0; n < e.length; n++) { - if (!t[e[n]]) return !1; - t = t[e[n]] - } - return !0 - }, t.InvertedIndex.prototype.getNode = function(e) { - if (!e) return null; - for (var t = this.root, n = 0; n < e.length; n++) { - if (!t[e[n]]) return null; - t = t[e[n]] - } - return t - }, t.InvertedIndex.prototype.getDocs = function(e) { - var t = this.getNode(e); - return null == t ? {} : t.docs - }, t.InvertedIndex.prototype.getTermFrequency = function(e, t) { - var n = this.getNode(e); - return null == n ? 0 : t in n.docs ? n.docs[t].tf : 0 - }, t.InvertedIndex.prototype.getDocFreq = function(e) { - var t = this.getNode(e); - return null == t ? 0 : t.df - }, t.InvertedIndex.prototype.removeToken = function(e, t) { - if (e) { - var n = this.getNode(e); - null != n && t in n.docs && (delete n.docs[t], n.df -= 1) - } - }, t.InvertedIndex.prototype.expandToken = function(e, t, n) { - if (null == e || "" == e) return []; - var t = t || []; - if (void 0 == n && (n = this.getNode(e), null == n)) return t; - n.df > 0 && t.push(e); - for (var i in n) "docs" !== i && "df" !== i && this.expandToken(e + i, t, n[i]); - return t - }, t.InvertedIndex.prototype.toJSON = function() { - return { - root: this.root - } - }, t.Configuration = function(e, n) { - var e = e || ""; - if (void 0 == n || null == n) throw new Error("fields should not be null"); - this.config = {}; - var i; - try { - i = JSON.parse(e), this.buildUserConfig(i, n) - } catch (o) { - t.utils.warn("user configuration parse failed, will use default configuration"), this.buildDefaultConfig(n) - } - }, t.Configuration.prototype.buildDefaultConfig = function(e) { - this.reset(), e.forEach(function(e) { - this.config[e] = { - boost: 1, - bool: "OR", - expand: !1 - } - }, this) - }, t.Configuration.prototype.buildUserConfig = function(e, n) { - var i = "OR", - o = !1; - if (this.reset(), "bool" in e && (i = e.bool || i), "expand" in e && (o = e.expand || o), "fields" in e) - for (var r in e.fields) - if (n.indexOf(r) > -1) { - var s = e.fields[r], - u = o; - void 0 != s.expand && (u = s.expand), this.config[r] = { - boost: s.boost || 0 === s.boost ? s.boost : 1, - bool: s.bool || i, - expand: u - } - } else t.utils.warn("field name in user configuration not found in index instance fields"); - else this.addAllFields2UserConfig(i, o, n) - }, t.Configuration.prototype.addAllFields2UserConfig = function(e, t, n) { - n.forEach(function(n) { - this.config[n] = { - boost: 1, - bool: e, - expand: t - } - }, this) - }, t.Configuration.prototype.get = function() { - return this.config - }, t.Configuration.prototype.reset = function() { - this.config = {} - }, lunr.SortedSet = function() { - this.length = 0, this.elements = [] - }, lunr.SortedSet.load = function(e) { - var t = new this; - return t.elements = e, t.length = e.length, t - }, lunr.SortedSet.prototype.add = function() { - var e, t; - for (e = 0; e < arguments.length; e++) t = arguments[e], ~this.indexOf(t) || this.elements.splice(this.locationFor(t), 0, t); - this.length = this.elements.length - }, lunr.SortedSet.prototype.toArray = function() { - return this.elements.slice() - }, lunr.SortedSet.prototype.map = function(e, t) { - return this.elements.map(e, t) - }, lunr.SortedSet.prototype.forEach = function(e, t) { - return this.elements.forEach(e, t) - }, lunr.SortedSet.prototype.indexOf = function(e) { - for (var t = 0, n = this.elements.length, i = n - t, o = t + Math.floor(i / 2), r = this.elements[o]; i > 1;) { - if (r === e) return o; - e > r && (t = o), r > e && (n = o), i = n - t, o = t + Math.floor(i / 2), r = this.elements[o] - } - return r === e ? o : -1 - }, lunr.SortedSet.prototype.locationFor = function(e) { - for (var t = 0, n = this.elements.length, i = n - t, o = t + Math.floor(i / 2), r = this.elements[o]; i > 1;) e > r && (t = o), r > e && (n = o), i = n - t, o = t + Math.floor(i / 2), r = this.elements[o]; - return r > e ? o : e > r ? o + 1 : void 0 - }, lunr.SortedSet.prototype.intersect = function(e) { - for (var t = new lunr.SortedSet, n = 0, i = 0, o = this.length, r = e.length, s = this.elements, u = e.elements;;) { - if (n > o - 1 || i > r - 1) break; - s[n] !== u[i] ? s[n] < u[i] ? n++ : s[n] > u[i] && i++ : (t.add(s[n]), n++, i++) - } - return t - }, lunr.SortedSet.prototype.clone = function() { - var e = new lunr.SortedSet; - return e.elements = this.toArray(), e.length = e.elements.length, e - }, lunr.SortedSet.prototype.union = function(e) { - var t, n, i; - this.length >= e.length ? (t = this, n = e) : (t = e, n = this), i = t.clone(); - for (var o = 0, r = n.toArray(); o < r.length; o++) i.add(r[o]); - return i - }, lunr.SortedSet.prototype.toJSON = function() { - return this.toArray() - }, - function(e, t) { - "function" == typeof define && define.amd ? define(t) : "object" == typeof exports ? module.exports = t() : e.elasticlunr = t() - }(this, function() { - return t - }) -}(); -- cgit v1.3.1 From 06c5fd1a0c11cb4ae252873a95100d8069ae26df Mon Sep 17 00:00:00 2001 From: Jieiku Date: Tue, 18 Jul 2023 08:19:21 -0700 Subject: Lighthouse Fixes --- config.toml | 4 +++- sass/_colors.scss | 6 +++--- sass/abridge.scss | 2 +- templates/robots.txt | 8 ++++---- 4 files changed, 11 insertions(+), 9 deletions(-) diff --git a/config.toml b/config.toml index 6b65a04..9b818e0 100644 --- a/config.toml +++ b/config.toml @@ -154,6 +154,7 @@ 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. ############################################################################### @@ -209,7 +210,8 @@ search_library = 'elasticlunr' #js_codecopy = "js/codecopy.js"# Bundleable - copy code block to clipboard button #js_email = "js/email.js"# Bundleable - obfuscates email address in footer -stylesheets = [ "abridge.css" ] +stylesheets = ["abridge.css"] + ############################################################################### ### Favicons, comment out a line to disable loading some or all of these if needed. diff --git a/sass/_colors.scss b/sass/_colors.scss index 497919d..d8de34b 100644 --- a/sass/_colors.scss +++ b/sass/_colors.scss @@ -33,7 +33,7 @@ $c1: #111 !default;// Background Color Primary $c2: #222 !default;// Background Color Secondary $c3: #333 !default;// Table Rows, Block quote edge, Borders - $c4: #777 !default;// Disabled Buttons, Borders, mark background + $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 @@ -76,7 +76,7 @@ $f2: #222 !default;// Font Color Headers $c1: #fff !default;// Background Color Primary $c2: #def !default;// Background Color Secondary - $c3: #137 !default;// Table Rows, Block quote edge, Borders + $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 @@ -93,7 +93,7 @@ $c1: #111 !default;// Background Color Primary $c2: #222 !default;// Background Color Secondary $c3: #333 !default;// Table Rows, Block quote edge, Borders - $c4: #777 !default;// Disabled Buttons, Borders, mark background + $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 diff --git a/sass/abridge.scss b/sass/abridge.scss index b50d2b6..539e377 100644 --- a/sass/abridge.scss +++ b/sass/abridge.scss @@ -1178,7 +1178,7 @@ $syntax: true !default;//syntax highlighting for code blocks cursor: pointer; z-index: 9; position: absolute; - top: .3rem; + top: .2rem; right: .5rem; } .cc:hover { diff --git a/templates/robots.txt b/templates/robots.txt index 09aba30..7977154 100644 --- a/templates/robots.txt +++ b/templates/robots.txt @@ -1,9 +1,9 @@ -{%- if config.extra.prod %} +{%- if config.extra.dev %} +User-Agent: * +Disallow: / +{%- else %} Sitemap: {{ get_url(path="sitemap.xml", trailing_slash=false) }} User-Agent: * Allow: / Host: {{ get_url(path="/", trailing_slash=false) }} -{%- else %} -User-Agent: * -Disallow: / {%- endif %} -- cgit v1.3.1 From b53294f7fb8afbb9565dcd46f2985257c8075e5c Mon Sep 17 00:00:00 2001 From: Jieiku Date: Tue, 18 Jul 2023 09:24:20 -0700 Subject: Additional Copyright Configuration --- config.toml | 7 +++++-- templates/base.html | 7 ++++++- 2 files changed, 11 insertions(+), 3 deletions(-) diff --git a/config.toml b/config.toml index 9b818e0..8dd0442 100644 --- a/config.toml +++ b/config.toml @@ -133,11 +133,14 @@ footer_credit = true textlogo = 'bridge' sitedesc = false # enables or disables the display of the site description below the logo. -#copyright_start_year = 2019 # optional -#copyright_end_year = 2020 # optional, recommend leaving unset, zola build will set this to current year by default headhr = false # show or hide horizontal rule below header foothr = true # show or hide horizontal rule above footer +#copyright_start_string = "©" +#copyright_start_year = 2019 # optional +#copyright_end_year = "" # optional, recommend leaving unset, zola build will set this to current year by default, can use empty string to omit the year. +#copyright_entity = "MyName." # optional, if ommited then the config.title is used. +#copyright_end_string = 'Unless otherwise noted, the content in this website is available under the CC BY-ND 3.0 license.' ############################################################################### ### meta/seo/analytic tags diff --git a/templates/base.html b/templates/base.html index e8706a6..b39bbc0 100644 --- a/templates/base.html +++ b/templates/base.html @@ -120,10 +120,15 @@ {{- social_macros::social_links(config=config) }} {#- Copyright START #} + {%- set copyright_start_string=config.extra.copyright_start_string | default(value="©") %} + {%- if copyright_start_string %}{%- set copyright_start_string=copyright_start_string ~ " " %}{%- endif %} {%- set copyright_start_year=config.extra.copyright_start_year | default(value="") %} {%- if copyright_start_year %}{%- set copyright_start_year=copyright_start_year ~ "-" %}{%- endif %} {%- set copyright_end_year=config.extra.copyright_end_year | default(value=now() | date(format="%Y")) %} - © {{ copyright_start_year ~ copyright_end_year }} {{ config.title }}

+ {%- if config.extra.copyright_entity %}{%- set copyright_entity= " " ~ config.extra.copyright_entity %}{%- else %}{%- set copyright_entity= " " ~ config.title %}{%- endif %} + {%- set copyright_end_string=config.extra.copyright_end_string | default(value="") %} + {%- if copyright_end_string %}{%- set copyright_end_string= " " ~ copyright_end_string %}{%- endif %} + {{ copyright_start_string ~ copyright_start_year ~ copyright_end_year ~ copyright_entity ~ copyright_end_string }}

{#- Copyright END #} {%- if config.extra.menu_footer %}
{%- endblock content %} diff --git a/templates/macros/head.html b/templates/macros/head.html index 25e981d..603c341 100644 --- a/templates/macros/head.html +++ b/templates/macros/head.html @@ -228,6 +228,10 @@ {%- endif %} + {%- if config.extra.favicon_svg %} + + {%- endif %} + {%- if config.extra.favicon180 %} {%- endif %} -- cgit v1.3.1 From ecc9421cc66a31f082a3a5266385f0e552894742 Mon Sep 17 00:00:00 2001 From: Jieiku Date: Fri, 21 Jul 2023 11:34:11 -0700 Subject: updated date --- config.toml | 5 +++-- content/overview-abridge.fr.md | 1 + content/overview-abridge.md | 1 + templates/macros/macros.html | 37 +++++++++++++++++++++++++++++++++---- 4 files changed, 38 insertions(+), 6 deletions(-) diff --git a/config.toml b/config.toml index 3d5addf..ebeba67 100644 --- a/config.toml +++ b/config.toml @@ -41,6 +41,7 @@ flag = "🇫🇷" date_locale = "fr_FR" Search = "Recherche" Recent_Posts = "Articles Récents" +Updated = "Modifié" Index = "Indice" Powered_by = "Propulsé" and = "et" @@ -117,8 +118,8 @@ menu_footer = [ recent = true # TOC / index recent_items = 9 -meta_index = { position="bottom", size="s90", author=false, readtime=false, readstring="min", date=true, categories_tags=true, divider=" " } -meta_post = { position="top", size="s95", author=true, readtime=false, readstring="min read", date=true, categories_tags=true, divider=" " } +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. diff --git a/content/overview-abridge.fr.md b/content/overview-abridge.fr.md index 1fda697..388ff69 100644 --- a/content/overview-abridge.fr.md +++ b/content/overview-abridge.fr.md @@ -1,6 +1,7 @@ +++ title = "Abridge Zola Thème" date = 2022-05-17 +updated = 2023-07-21 draft = false [taxonomies] diff --git a/content/overview-abridge.md b/content/overview-abridge.md index f68ef2f..e3f0b58 100644 --- a/content/overview-abridge.md +++ b/content/overview-abridge.md @@ -1,6 +1,7 @@ +++ title = "Abridge Zola Theme" date = 2022-05-17 +updated = 2023-07-21 draft = false [taxonomies] diff --git a/templates/macros/macros.html b/templates/macros/macros.html index 4c86aac..f994bdb 100644 --- a/templates/macros/macros.html +++ b/templates/macros/macros.html @@ -24,7 +24,7 @@ {#- divider #} {%- if config.extra.meta_post.author %} - {%- if config.extra.meta_post.readtime or config.extra.meta_post.date or config.extra.meta_post.categories_tags %} + {%- if config.extra.meta_post.readtime or config.extra.meta_post.date or config.extra.meta_post.updated or config.extra.meta_post.categories_tags %} {%- if config.extra.meta_post.divider %}{{ config.extra.meta_post.divider | safe }}{%- else %}   {%- endif %} {%- endif %} {%- endif %} @@ -32,7 +32,7 @@ {#- ReadTime #} {%- if config.extra.meta_post.readtime %} {%- if config.extra.icon_read %} {% endif %} {{ page.reading_time }} {{ config.extra.meta_post.readstring | default(value="min") }} {#- divider #} - {%- if config.extra.meta_post.date or config.extra.meta_post.categories_tags %} + {%- if config.extra.meta_post.date or config.extra.meta_post.updated or config.extra.meta_post.categories_tags %} {%- if config.extra.meta_post.divider %}{{ config.extra.meta_post.divider | safe }}{%- else %}   {%- endif %}{%- endif %}{%- endif %} {#- Date #} @@ -46,6 +46,20 @@ {{ page.date | date(format="%B %d, %Y", locale=lang_locale) }} {%- else %} {{ page.date | date(format="%B %d, %Y") }} {%- endif %} {#- divider #} + {%- if config.extra.meta_post.updated or config.extra.meta_post.categories_tags %} + {%- if config.extra.meta_post.divider %}{{ config.extra.meta_post.divider | safe }}{%- else %}   {%- endif %}{%- endif %}{% endif %} + + {#- Updated #} + {%- if config.extra.meta_post.updated and page.updated %} {%- if config.extra.icon_date %} {% endif -%} + {%- if lang != config.default_language %} {{ trans(key="Updated" | safe, lang=lang) }}{% else %} Updated{% endif %}: + {%- if config.extra.date_locale %} + {%- if lang != config.default_language -%} + {%- set lang_locale = trans(key="date_locale" | safe, lang=lang) -%} + {%- else -%} + {%- set lang_locale = config.extra.date_locale -%} + {%- endif %} {{ page.updated | date(format="%B %d, %Y", locale=lang_locale) }} + {%- else %} {{ page.updated | date(format="%B %d, %Y") }} {%- endif %} + {#- divider #} {%- if config.extra.meta_post.categories_tags %} {%- if config.extra.meta_post.divider %}{{ config.extra.meta_post.divider | safe }}{%- else %}   {%- endif %}{%- endif %}{% endif %} @@ -83,7 +97,7 @@ {#- divider #} {%- if config.extra.meta_index.author %} - {%- if config.extra.meta_index.readtime or config.extra.meta_index.date or config.extra.meta_index.categories_tags %} + {%- if config.extra.meta_index.readtime or config.extra.meta_index.date or config.extra.meta_index.updated or config.extra.meta_index.categories_tags %} {%- if config.extra.meta_index.divider %}{{ config.extra.meta_index.divider | safe }}{%- else %}   {%- endif %} {%- endif %} {%- endif %} @@ -91,7 +105,7 @@ {#- ReadTime #} {%- if config.extra.meta_index.readtime %} {%- if config.extra.icon_read %} {% endif %} {{ page.reading_time }} {{ config.extra.meta_index.readstring | default(value="min") }} {#- divider #} - {%- if config.extra.meta_index.date or config.extra.meta_index.categories_tags %} + {%- if config.extra.meta_index.date or config.extra.meta_index.updated or config.extra.meta_index.categories_tags %} {%- if config.extra.meta_index.divider %}{{ config.extra.meta_index.divider | safe }}{%- else %}   {%- endif %}{%- endif %}{%- endif %} {#- Date #} @@ -104,6 +118,21 @@ {%- endif -%} {{ page.date | date(format="%B %d, %Y", locale=lang_locale) }} {%- else %} {{ page.date | date(format="%B %d, %Y") }} {%- endif %} + {#- divider #} + {%- if config.extra.meta_index.updated or config.extra.meta_index.categories_tags %} + {%- if config.extra.meta_index.divider %}{{ config.extra.meta_index.divider | safe }}{%- else %}   {%- endif %}{%- endif %}{% endif %} + + {#- Updated #} + {%- if config.extra.meta_index.updated and page.updated %} {%- if config.extra.icon_date %} {% endif -%} + {%- if lang != config.default_language %} {{ trans(key="Updated" | safe, lang=lang) }}{% else %} Updated{% endif %}: + {%- if config.extra.date_locale %} + {%- if lang != config.default_language -%} + {%- set lang_locale = trans(key="date_locale" | safe, lang=lang) -%} + {%- else -%} + {%- set lang_locale = config.extra.date_locale -%} + {%- endif %} {{ page.updated | date(format="%B %d, %Y", locale=lang_locale) }} + {%- else %} {{ page.updated | date(format="%B %d, %Y") }} {%- endif %} + {#- divider #} {%- if config.extra.meta_index.categories_tags %} {%- if config.extra.meta_index.divider %}{{ config.extra.meta_index.divider | safe }}{%- else %}   {%- endif %}{%- endif %}{% endif %} -- cgit v1.3.1 From 15ed680b4f7e1540fb09360dbd755f27403364f0 Mon Sep 17 00:00:00 2001 From: Jieiku Date: Sat, 22 Jul 2023 09:58:11 -0700 Subject: kofi icon --- COPY-TO-ROOT-SASS/abridge.scss | 1 + config.toml | 1 + sass/_functions.scss | 1 + sass/abridge.scss | 2 ++ templates/macros/social.html | 2 ++ 5 files changed, 7 insertions(+) diff --git a/COPY-TO-ROOT-SASS/abridge.scss b/COPY-TO-ROOT-SASS/abridge.scss index a680fdd..6ab3895 100644 --- a/COPY-TO-ROOT-SASS/abridge.scss +++ b/COPY-TO-ROOT-SASS/abridge.scss @@ -26,6 +26,7 @@ $icon-element: false, $icon-matrix: false, $icon-buymeacoffee: false, + $icon-kofi: false, $icon-twitter: false, $icon-facebook: false, $icon-linkedin: false, diff --git a/config.toml b/config.toml index ebeba67..eebc404 100644 --- a/config.toml +++ b/config.toml @@ -173,6 +173,7 @@ mail = "name@example.com" mastodon = "@your-user-name" 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" diff --git a/sass/_functions.scss b/sass/_functions.scss index 2f4029a..dd6880a 100644 --- a/sass/_functions.scss +++ b/sass/_functions.scss @@ -102,6 +102,7 @@ home: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='M9 22V12h6v10M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z'/%3E%3C/svg%3E", instagram: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Crect x='2' y='2' width='20' height='20' rx='5' ry='5'/%3E%3Cpath d='M16 11.4A4 4 0 1 1 12.6 8a4 4 0 0 1 3.4 3.4zm1.5-4.9h.01'/%3E%3C/svg%3E", linkedin: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6zM2 9h4v12H2z'/%3E%3Ccircle cx='4' cy='4' r='2'/%3E%3C/svg%3E", + kofi: "%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='%23fff' d='M2 5h15c8 0 8 10 0 10-1 0-1 0-1 1v2q0 1-1 1H2q-1 0-1-1V6q0-1 1-1m14 4v2c0 1 0 1 1 1 4 0 4-4 0-4-1 0-1 0-1 1'/%3E%3Cpath fill='#{map-get($p, f)}' d='M9 16C2 11 5 6 9 9c4-3 7 2 0 7' /%3E%3C/svg%3E", mail: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='m22 6-10 7L2 6m2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6c0-1.1.9-2 2-2Z'/%3E%3C/svg%3E", mastodon: "%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='M2 8c0 5.7-.2 12.6 5 14 2 .6 3.7.7 5 .6 2.4-.1 3.8-.9 3.8-.9l-.1-1.8s-1.7.6-3.7.5c-1.9 0-4-.2-4.2-2.6a5 5 90 0 1 0-.7c4 1 7.5.5 8.4.4 2.7-.4 5-2 5.3-3.6.5-2.4.4-5.8.4-5.8C22 3.4 19 2 19 2 15.9.6 8 .6 5.1 2c0 0-3 1.4-3 6zm4.5-2.3c1.2-1.4 3.8-1.5 5 .3l.5.9.6-1c1.1-1.7 3.7-1.6 4.9-.2 1.1 1.3.9 2.5.9 8.4H16V8.6c0-2.4-3-2.5-3 .3v3h-2V9c0-2.8-3-2.7-3-.3V14H5.6c0-5.9-.2-7.1 1-8.4z'/%3E%3C/svg%3E", matrix: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='M.6.6v22.8H3v.6H0V0h3v.6zm7 7.2V9h.1c3.2-2.3 4.3 0 4.8.3C14.9 6.7 18 8 18 11v5h-1.5v-5a1 1 0 0 0-3.5 0v5h-1.7v-5a1 1 0 0 0-3.7 0v5H6V7.8zm15.8 15.7V.4H21V0h3v24h-3v-.6z'/%3E%3C/svg%3E", diff --git a/sass/abridge.scss b/sass/abridge.scss index ac01c1a..e457c5c 100644 --- a/sass/abridge.scss +++ b/sass/abridge.scss @@ -33,6 +33,7 @@ $icon-mastodon: true !default; $icon-element: true !default; $icon-matrix: false !default; $icon-buymeacoffee: true !default; +$icon-kofi: true !default; $icon-twitter: true !default; $icon-facebook: true !default; $icon-linkedin: true !default; @@ -1284,6 +1285,7 @@ $syntax: true !default;//syntax highlighting for code blocks @if $icon-globe {.globe { background-image: functions.icon(globe, "%23888", 2, "none", $ic) }} @if $icon-home {.home { background-image: functions.icon(home, "%23888", 2, "none", $ic) }} @if $icon-instagram {.instagram { background-image: functions.icon(instagram, "%23e07", 2, "none", $ic) }} + @if $icon-kofi {.kofi { background-image: functions.icon(kofi, "%23888", 1.5, "%23f55", $ic) }} @if $icon-linkedin {.linkedin { background-image: functions.icon(linkedin, "%2326a", 2, "none", $ic) }} @if $icon-mail {.mail { background-image: functions.icon(mail, "%23888", 2, "none", $ic) }} @if $icon-mastodon {.mastodon { background-image: functions.icon(mastodon, "none", 1, "%2328c", $ic) }} diff --git a/templates/macros/social.html b/templates/macros/social.html index 2b8f841..6ad83de 100644 --- a/templates/macros/social.html +++ b/templates/macros/social.html @@ -48,6 +48,8 @@ {% endif -%} {%- if config.extra.youtube -%} {% endif -%} + {%- if config.extra.kofi -%} + {% endif -%} {%- if config.extra.buymeacoffee -%} {% endif -%} {%- if config.extra.github_sponsor -%} -- cgit v1.3.1 From e326d4ddb03a2736c6b9a5c41b9441afa8a37053 Mon Sep 17 00:00:00 2001 From: Jieiku Date: Wed, 26 Jul 2023 14:58:47 -0700 Subject: config value optional --- templates/macros/head.html | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/templates/macros/head.html b/templates/macros/head.html index 603c341..35afa5b 100644 --- a/templates/macros/head.html +++ b/templates/macros/head.html @@ -3,10 +3,9 @@ {%- if config.extra.js_switcher | default(value=true) %} {%- set js_theme=config.extra.js_theme | default(value="") -%} {%- if not js_theme %} + {%- set js_theme="js/theme.min.js" -%} {%- if config.extra.js_switcher_default %}{%- if config.extra.js_switcher_default == "light" %} {%- set js_theme="js/theme_light.min.js" -%} - {%- else %} - {%- set js_theme="js/theme.min.js" -%} {%- endif %}{%- endif %} {%- endif %} -- cgit v1.3.1 From 05894a731f29e7d473481ec850a2b154c32befdb Mon Sep 17 00:00:00 2001 From: Jieiku Date: Sun, 30 Jul 2023 22:51:57 -0700 Subject: Update Documentation --- COPY-TO-ROOT-SASS/abridge.scss | 2 +- README.md | 18 ++++++++++++++++++ config.toml | 2 +- 3 files changed, 20 insertions(+), 2 deletions(-) diff --git a/COPY-TO-ROOT-SASS/abridge.scss b/COPY-TO-ROOT-SASS/abridge.scss index 6ab3895..103d91e 100644 --- a/COPY-TO-ROOT-SASS/abridge.scss +++ b/COPY-TO-ROOT-SASS/abridge.scss @@ -10,7 +10,7 @@ $abridgeMode: "switcher",//valid values: switcher, auto, dark, light $syntax-mode: "auto",// Force syntax mode: auto, dark, light - $switcherDefault: "dark",// default for nojs switcher: 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 diff --git a/README.md b/README.md index 55dddc1..0db22ce 100644 --- a/README.md +++ b/README.md @@ -105,6 +105,24 @@ Saved changes will live reload in the browser. A lot of effort has been made to ensure Abridge features can be easily customized. +### Default Theme for nojs/noscript visitors. + +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 abrdige uses dark mode for the switcher, so unless you want to set the default mode to light for nojs visitors, then you do not need to worry about these settings. + ### Number of Items per page for pagination To change the number of items per page edit: `content/_index.md` and change the value for `paginate_by` diff --git a/config.toml b/config.toml index eebc404..495a088 100644 --- a/config.toml +++ b/config.toml @@ -205,7 +205,7 @@ integrity = true # increases site security, should normally be true. (setting to js_bundle = true # multiple javascript files combined into a single file (setting to false is useful during js development) js_switcher = true # The button that allows manually changing between light/dark mode. -js_switcher_default = "dark" # default switcher mode: dark, light +js_switcher_default = "dark" # default nojs switcher mode: dark, light (make sure to also set $switcherDefault in abridge.scss) js_copycode = true # The copy button on code blocks that allows you to copy them to the clipboard. -- cgit v1.3.1 From 24e4b49edfbbe0b51786606f9c434e8ba860e28d Mon Sep 17 00:00:00 2001 From: Jieiku Date: Wed, 2 Aug 2023 17:02:13 -0700 Subject: always load nojs.css for noscript --- templates/base.html | 2 -- 1 file changed, 2 deletions(-) diff --git a/templates/base.html b/templates/base.html index b39bbc0..2ab46f8 100644 --- a/templates/base.html +++ b/templates/base.html @@ -27,9 +27,7 @@ {{- macros_head::security(config=config) }} {{- macros_head::favicons(config=config) }} - {%- if config.build_search_index %} - {%- endif %} {%- block header %} -- cgit v1.3.1 From 729f7cda12340aabce5d0faab8d306b5e0d59568 Mon Sep 17 00:00:00 2001 From: Jieiku Date: Wed, 9 Aug 2023 18:44:31 -0700 Subject: imghover > imgswap, reduce complexity, fix CSP --- content/overview-images/index.fr.md | 36 +++++++------- content/overview-images/index.md | 36 +++++++------- netlify.toml | 2 +- sass/abridge.scss | 17 +++++++ templates/shortcodes/imghover.html | 95 ------------------------------------- templates/shortcodes/imgswap.html | 59 +++++++++++++++++++++++ 6 files changed, 109 insertions(+), 136 deletions(-) delete mode 100644 templates/shortcodes/imghover.html create mode 100644 templates/shortcodes/imgswap.html diff --git a/content/overview-images/index.fr.md b/content/overview-images/index.fr.md index 130b061..9a68006 100644 --- a/content/overview-images/index.fr.md +++ b/content/overview-images/index.fr.md @@ -9,11 +9,11 @@ categories = ["Features"] tags = ["shortcodes","images"] [extra] toc = true -keywords = "Image, Markdown, Shortcodes, Hover" +keywords = "Image, Markdown, Shortcodes, Swap" thumbnail = "ferris-gesture.png" +++ -Cet article couvre les **shortcodes imghover et img**. Les images peuvent également être intégrées directement à l'aide de markdown `![Ferris](ferris.svg)`, mais il est préférable d'utiliser un shortcode afin de pouvoir définir explicitement la largeur et la hauteur, cela aidera à empêcher le changement de mise en page du contenu, ce qui améliore l'expérience utilisateur et le score Google Lighthouse. +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. # img Shortcode @@ -61,47 +61,43 @@ Cet article couvre les **shortcodes imghover et img**. Les images peuvent égale -# imghover Shortcode +# imgswap Shortcode -La première image du tableau src est celle comparée à toutes les autres. +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 une image, celle-ci affiche l'image à comparer. +Lorsque vous passez votre souris sur l'image, l'image à comparer s'affiche. -Cela peut être utilisé pour comparer une seule image avec une autre en passant seulement deux src dans le tableau. - -- src est un tableau de chemins et de noms de fichiers pour les images. (obligatoire) +- 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) - w est la largeur de l'image. - h est la hauteur de l'image. -- p est la taille en pourcentage que vous souhaitez que l'image utilise sur la page. (50 est la valeur par défaut) - -*w et h ne sont utilisés que pour calculer le rapport d'aspect, la taille globale est définie par p* ## Utilisation (même chemin) ```rs -{{/* imghover(src=["ferris.svg", "ferris-gesture.svg", "ferris-happy.svg"] w=600 h=400 p=45) */}} +{{/* imgswap(main_src="ferris.svg" swap_src="ferris-happy.svg" w=600 h=400) */}} ``` **Sortir** ```html -{{ imghover(src=["ferris.svg", "ferris-gesture.svg", "ferris-happy.svg"] w=600 h=400 p=45) }} +{{ imgswap(main_src="ferris.svg" swap_src="ferris-happy.svg" w=600 h=400) }} ``` -{{ imghover(src=["ferris.svg", "ferris-gesture.svg", "ferris-happy.svg"] w=600 h=400 p=45) }} +{{ imgswap(main_src="ferris.svg" swap_src="ferris-happy.svg" w=600 h=400) }} ## Utilisation (chemin relatif ./) ```rs -{{/* imghover(src=["./img/ferris.svg", "./img/ferris-gesture.svg"] w=600 h=400 p=45) */}} +{{/* imgswap(main_src="./img/ferris.svg" swap_src="./img/ferris-gesture.svg" w=600 h=400) */}} ``` **Sortir** ```html -{{ imghover(src=["./img/ferris.svg", "./img/ferris-gesture.svg"] w=600 h=400 p=45) }} +{{ imgswap(main_src="./img/ferris.svg" swap_src="./img/ferris-gesture.svg" w=600 h=400) }} ``` -{{ imghover(src=["./img/ferris.svg", "./img/ferris-gesture.svg"] w=600 h=400 p=45) }} +{{ imgswap(main_src="./img/ferris.svg" swap_src="./img/ferris-gesture.svg" w=600 h=400) }} ## Utilisation (chemin racine /) ```rs -{{/* imghover(src=["/overview-rich-content/ferris.svg", "/overview-rich-content/ferris-gesture.svg"] w=600 h=400 p=45) */}} +{{/* imgswap(main_src="/overview-rich-content/ferris.svg" swap_src="/overview-rich-content/ferris-gesture.svg" w=600 h=400) */}} ``` **Sortir** ```html -{{ imghover(src=["/overview-rich-content/ferris.svg", "/overview-rich-content/ferris-gesture.svg"] w=600 h=400 p=45) }} +{{ imgswap(main_src="/overview-rich-content/ferris.svg" swap_src="/overview-rich-content/ferris-gesture.svg" w=600 h=400) }} ``` -{{ imghover(src=["/overview-rich-content/ferris.svg", "/overview-rich-content/ferris-gesture.svg"] w=600 h=400 p=45) }} +{{ imgswap(main_src="/overview-rich-content/ferris.svg" swap_src="/overview-rich-content/ferris-gesture.svg" w=600 h=400) }} diff --git a/content/overview-images/index.md b/content/overview-images/index.md index 3d60a91..efa8843 100644 --- a/content/overview-images/index.md +++ b/content/overview-images/index.md @@ -9,11 +9,11 @@ categories = ["Features"] tags = ["shortcodes","images"] [extra] toc = true -keywords = "Image, Markdown, Shortcodes, Hover" +keywords = "Image, Markdown, Shortcodes, Swap" thumbnail = "ferris-gesture.png" +++ -This post covers the **imghover 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. +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. # img Shortcode @@ -61,47 +61,43 @@ This post covers the **imghover and img shortcodes**. Images can also be embedde -# imghover Shortcode +# imgswap Shortcode -The first image in the src array is the one compared to all the others. +By default main_src is the image displayed, swap_src is displayed on mouse hover. -When you hover your mouse over an image it will display the image to compare. +When you hover your mouse over the image it will display the image to compare. -This can be used to compare only one image with another by passing only two src in the array. - -- src is an array of paths and filenames for the images. (mandatory) +- main_src is the path and filename for the default image. (mandatory) +- swap_src is the path and filename for the swap image. (mandatory) - w is the width of the image. - h is the height of the image. -- p is the percent size that you want the image to use on the page. (50 is the default) - -*w and h are used only to calculate the aspect ratio, overall size is set by p* ## Usage (same path) ```rs -{{/* imghover(src=["ferris.svg", "ferris-gesture.svg", "ferris-happy.svg"] w=600 h=400 p=45) */}} +{{/* imgswap(main_src="ferris.svg" swap_src="ferris-happy.svg" w=600 h=400) */}} ``` **Output** ```html -{{ imghover(src=["ferris.svg", "ferris-gesture.svg", "ferris-happy.svg"] w=600 h=400 p=45) }} +{{ imgswap(main_src="ferris.svg" swap_src="ferris-happy.svg" w=600 h=400) }} ``` -{{ imghover(src=["ferris.svg", "ferris-gesture.svg", "ferris-happy.svg"] w=600 h=400 p=45) }} +{{ imgswap(main_src="ferris.svg" swap_src="ferris-happy.svg" w=600 h=400) }} ## Usage (relative path ./) ```rs -{{/* imghover(src=["./img/ferris.svg", "./img/ferris-gesture.svg"] w=600 h=400 p=45) */}} +{{/* imgswap(main_src="./img/ferris.svg" swap_src="./img/ferris-gesture.svg" w=600 h=400) */}} ``` **Output** ```html -{{ imghover(src=["./img/ferris.svg", "./img/ferris-gesture.svg"] w=600 h=400 p=45) }} +{{ imgswap(main_src="./img/ferris.svg" swap_src="./img/ferris-gesture.svg" w=600 h=400) }} ``` -{{ imghover(src=["./img/ferris.svg", "./img/ferris-gesture.svg"] w=600 h=400 p=45) }} +{{ imgswap(main_src="./img/ferris.svg" swap_src="./img/ferris-gesture.svg" w=600 h=400) }} ## Usage (root path /) ```rs -{{/* imghover(src=["/overview-rich-content/ferris.svg", "/overview-rich-content/ferris-gesture.svg"] w=600 h=400 p=45) */}} +{{/* imgswap(main_src="/overview-rich-content/ferris.svg" swap_src="/overview-rich-content/ferris-gesture.svg" w=600 h=400) */}} ``` **Output** ```html -{{ imghover(src=["/overview-rich-content/ferris.svg", "/overview-rich-content/ferris-gesture.svg"] w=600 h=400 p=45) }} +{{ imgswap(main_src="/overview-rich-content/ferris.svg" swap_src="/overview-rich-content/ferris-gesture.svg" w=600 h=400) }} ``` -{{ imghover(src=["/overview-rich-content/ferris.svg", "/overview-rich-content/ferris-gesture.svg"] w=600 h=400 p=45) }} +{{ imgswap(main_src="/overview-rich-content/ferris.svg" swap_src="/overview-rich-content/ferris-gesture.svg" w=600 h=400) }} diff --git a/netlify.toml b/netlify.toml index 9c492bb..3356614 100644 --- a/netlify.toml +++ b/netlify.toml @@ -16,4 +16,4 @@ command = "zola build --base-url $DEPLOY_PRIME_URL && npm run abridge-demo && zo X-XSS-Protection = "1; mode=block" Referrer-Policy = "strict-origin-when-cross-origin" Strict-Transport-Security = "max-age=63072000; includeSubdomains" - Content-Security-Policy = "default-src 'none'; frame-ancestors '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' 'unsafe-inline' cdn.cloudflare.com cdn.jsdelivr.net fonts.googleapis.com;" + Content-Security-Policy = "default-src 'none'; frame-ancestors '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;" diff --git a/sass/abridge.scss b/sass/abridge.scss index e457c5c..5573482 100644 --- a/sass/abridge.scss +++ b/sass/abridge.scss @@ -200,6 +200,7 @@ $top: true !default;//back to top button using CSS $search: true !default;//search feature $toc: true !default;//Table of Contents, page index / recent posts block $zola: true !default;//Zola Specific +$imgswap: true !default;//Image Swap on hover/click $misc: false !default; $grid: false !default;//Infinity Grid, column based layouts. $syntax: true !default;//syntax highlighting for code blocks @@ -1224,6 +1225,22 @@ $syntax: true !default;//syntax highlighting for code blocks } } } +@if $imgswap { + .img-swap-div { + .img-main { + display: block; + } + .img-swap { + display: none; + } + &:hover .img-swap { + display: block; + } + &:hover .img-main { + display: none; + } + } +} @if $misc { // https://github.com/picocss/pico // Add the correct display in IE 10+ diff --git a/templates/shortcodes/imghover.html b/templates/shortcodes/imghover.html deleted file mode 100644 index 1ad733c..0000000 --- a/templates/shortcodes/imghover.html +++ /dev/null @@ -1,95 +0,0 @@ -{%- set_global bg = "" %} - -{%- for source in src %} - - {%- set dirtest = source | trim_start_matches(pat="./") %} - {%- if dirtest is containing("/") %} - {%- set reldir = true %} - {%- endif %} - - {%- if source is starting_with("./") and reldir %} {# Relative Path #} - {%- set pathtype = "rel-" %} - {%- set path = source | trim_start_matches(pat="./") | split(pat="/") | slice(end=-1) | join(sep="/") | trim_start_matches(pat="/") %} - {%- set path = path ~ "/" %} - - {%- elif source is starting_with("/") %} {# Root Path #} - {%- set pathtype = "root-" %} - {%- set rootpath = source | split(pat="/") | slice(end=-1) | join(sep="/") %} - {%- set path = config.base_url ~ rootpath ~ "/" %} - - {%- else %} {# Same Directory Path #} - {%- set pathtype = "same-" %} - {%- set path = "" %} - {%- endif %} - - {%- set sourcepath = source | split(pat="/") | last %} - {%- set sourcename = pathtype ~ sourcepath | split(pat=".") | first %} - - {%- if loop.first %} - {%- set_global bg = source | split(pat="/") | last %} - {%- else %} -
{{ sourcename }} on hover
-
- {%- endif %} - -{%- endfor %} - - diff --git a/templates/shortcodes/imgswap.html b/templates/shortcodes/imgswap.html new file mode 100644 index 0000000..f8c983c --- /dev/null +++ b/templates/shortcodes/imgswap.html @@ -0,0 +1,59 @@ +
+ {%- set dirtest = main_src | trim_start_matches(pat="./") %} + {%- if dirtest is containing("/") %} + {%- set reldir = true %} + {%- endif %} + + {%- if main_src is starting_with("./") and reldir %} {# Relative Path #} + {%- set path = main_src | trim_start_matches(pat="./") | split(pat="/") | slice(end=-1) | join(sep="/") | trim_start_matches(pat="/") %} + {%- set path = path ~ "/" %} + + {%- elif main_src is starting_with("/") %} {# Root Path #} + {%- set rootpath = main_src | split(pat="/") | slice(end=-1) | join(sep="/") %} + {%- set path = config.base_url ~ rootpath ~ "/" %} + + {%- else %} {# Same Directory Path #} + {%- set path = "" %} + + {%- endif %} + + {%- if not w or not h %} + {%- set metafile = page.path ~ path ~ main_src %} + {%- set meta = get_image_metadata(path=metafile) %} + {%- set w = meta.width %} + {%- set h = meta.height %} + {%- endif %} + + {%- set img = main_src | split(pat="/") | last %} + {%- set name = img | split(pat=".") | first %} + + + {%- set dirtest = swap_src | trim_start_matches(pat="./") %} + {%- if dirtest is containing("/") %} + {%- set reldir = true %} + {%- endif %} + + {%- if swap_src is starting_with("./") and reldir %} {# Relative Path #} + {%- set path = swap_src | trim_start_matches(pat="./") | split(pat="/") | slice(end=-1) | join(sep="/") | trim_start_matches(pat="/") %} + {%- set path = path ~ "/" %} + + {%- elif swap_src is starting_with("/") %} {# Root Path #} + {%- set rootpath = swap_src | split(pat="/") | slice(end=-1) | join(sep="/") %} + {%- set path = config.base_url ~ rootpath ~ "/" %} + + {%- else %} {# Same Directory Path #} + {%- set path = "" %} + + {%- endif %} + + {%- if not w or not h %} + {%- set metafile = page.path ~ path ~ swap_src %} + {%- set meta = get_image_metadata(path=metafile) %} + {%- set w = meta.width %} + {%- set h = meta.height %} + {%- endif %} + + {%- set img = swap_src | split(pat="/") | last %} + {%- set name = img | split(pat=".") | first %} + +
-- cgit v1.3.1 From 0983915e23793c28dd0bee149fd2ec05a7e96a94 Mon Sep 17 00:00:00 2001 From: Jieiku Date: Tue, 15 Aug 2023 21:10:25 -0700 Subject: Lighthouse and YellowLabTools optimizations --- README.md | 7 +++++++ content/overview-images/ferris-gesture.png | Bin 18429 -> 6741 bytes content/overview-rich-content/index.fr.md | 8 ++++---- content/overview-rich-content/index.md | 8 ++++---- content/overview-rich-content/over9000-400.avif | Bin 0 -> 20795 bytes content/overview-rich-content/over9000-400.webp | Bin 24322 -> 0 bytes content/overview-rich-content/over9000-640.avif | Bin 0 -> 31511 bytes content/overview-rich-content/over9000-960.avif | Bin 0 -> 43170 bytes content/overview-rich-content/over9000-960.webp | Bin 39488 -> 0 bytes sass/abridge.scss | 20 +------------------- screenshot.png | Bin 122329 -> 53621 bytes static/android-chrome-192x192.png | Bin 2535 -> 1609 bytes static/android-chrome-192x192m.png | Bin 2273 -> 1170 bytes static/android-chrome-512x512.png | Bin 5377 -> 3937 bytes static/apple-touch-icon.png | Bin 2606 -> 1542 bytes static/banner.png | Bin 13241 -> 4582 bytes static/favicon-32x32.png | Bin 663 -> 559 bytes static/mstile-150x150.png | Bin 2251 -> 1202 bytes templates/base.html | 2 +- templates/macros/social.html | 4 ++-- templates/shortcodes/image.html | 2 +- templates/shortcodes/img.html | 7 +++++-- templates/shortcodes/imgswap.html | 14 ++++++++++---- 23 files changed, 35 insertions(+), 37 deletions(-) create mode 100644 content/overview-rich-content/over9000-400.avif delete mode 100644 content/overview-rich-content/over9000-400.webp create mode 100644 content/overview-rich-content/over9000-640.avif create mode 100644 content/overview-rich-content/over9000-960.avif delete mode 100644 content/overview-rich-content/over9000-960.webp diff --git a/README.md b/README.md index 0db22ce..be9f552 100644 --- a/README.md +++ b/README.md @@ -356,6 +356,13 @@ leanify -i 7777 *.png leanify -i 7777 *.ico ``` +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 +``` + ### Pre gzip/brotli content to serve with nginx: If you are serving your site with nginx, you can pre gzip your content. diff --git a/content/overview-images/ferris-gesture.png b/content/overview-images/ferris-gesture.png index e9c8708..67f6cd1 100644 Binary files a/content/overview-images/ferris-gesture.png and b/content/overview-images/ferris-gesture.png differ diff --git a/content/overview-rich-content/index.fr.md b/content/overview-rich-content/index.fr.md index 819b2db..e768252 100644 --- a/content/overview-rich-content/index.fr.md +++ b/content/overview-rich-content/index.fr.md @@ -34,18 +34,18 @@ Le `video` shortcode prend un `sources` paramètre (un tableau de chaînes) et r Le `image` shortcode renvoie une `` 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 (`webp`, `png`, `jpg`, etc). `fpath` et +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 `` 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.webp", "over9000-640.webp", "over9000-400.webp"], 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!") */}} ``` ### Sortir ```html -{{ image(sources=["over9000-960.webp", "over9000-640.webp", "over9000-400.webp"], 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!") }} ``` -{{ image(sources=["over9000-960.webp", "over9000-640.webp", "over9000-400.webp"], 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 diff --git a/content/overview-rich-content/index.md b/content/overview-rich-content/index.md index 8f86d3b..4dc2285 100644 --- a/content/overview-rich-content/index.md +++ b/content/overview-rich-content/index.md @@ -41,19 +41,19 @@ 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 (`webp`, `png`, `jpg`, etc). `fpath` and +a different type (`avif`, `webp`, `png`, `jpg`, etc). `fpath` and `falt` are used to create an `` 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.webp", "over9000-640.webp", "over9000-400.webp"], 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!") */}} ``` ### Output ```html -{{ image(sources=["over9000-960.webp", "over9000-640.webp", "over9000-400.webp"], 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!") }} ``` -{{ image(sources=["over9000-960.webp", "over9000-640.webp", "over9000-400.webp"], 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 diff --git a/content/overview-rich-content/over9000-400.avif b/content/overview-rich-content/over9000-400.avif new file mode 100644 index 0000000..e4c6b1d Binary files /dev/null and b/content/overview-rich-content/over9000-400.avif differ diff --git a/content/overview-rich-content/over9000-400.webp b/content/overview-rich-content/over9000-400.webp deleted file mode 100644 index 1b2876f..0000000 Binary files a/content/overview-rich-content/over9000-400.webp and /dev/null differ diff --git a/content/overview-rich-content/over9000-640.avif b/content/overview-rich-content/over9000-640.avif new file mode 100644 index 0000000..38d314b Binary files /dev/null and b/content/overview-rich-content/over9000-640.avif differ diff --git a/content/overview-rich-content/over9000-960.avif b/content/overview-rich-content/over9000-960.avif new file mode 100644 index 0000000..ae3584d Binary files /dev/null and b/content/overview-rich-content/over9000-960.avif differ diff --git a/content/overview-rich-content/over9000-960.webp b/content/overview-rich-content/over9000-960.webp deleted file mode 100644 index 28fba9c..0000000 Binary files a/content/overview-rich-content/over9000-960.webp and /dev/null differ diff --git a/sass/abridge.scss b/sass/abridge.scss index 5573482..2cde0d3 100644 --- a/sass/abridge.scss +++ b/sass/abridge.scss @@ -711,23 +711,9 @@ $syntax: true !default;//syntax highlighting for code blocks margin-bottom: 0; margin-top: 0.2rem; } - li { - display: inline-block; - margin: 0 .2rem; - } } main nav { - ul { - display: flex; - padding-left: 0; - } margin-top: var(--s2);//pagination margin - li { - margin: .2rem; - } - li.inp { - padding-top: .1rem; - } } .outp { padding: 0 .26rem .2rem; @@ -751,11 +737,7 @@ $syntax: true !default;//syntax highlighting for code blocks color: var(--a1);//pagination color current page } footer nav { - ul { - margin: 0; - padding: 0; - } - li { + i { margin: 0 .2rem .4rem; } } diff --git a/screenshot.png b/screenshot.png index cd3a293..ec8d65f 100644 Binary files a/screenshot.png and b/screenshot.png differ diff --git a/static/android-chrome-192x192.png b/static/android-chrome-192x192.png index 4eba45e..3a075c3 100644 Binary files a/static/android-chrome-192x192.png and b/static/android-chrome-192x192.png differ diff --git a/static/android-chrome-192x192m.png b/static/android-chrome-192x192m.png index f7e37a2..f1e485d 100644 Binary files a/static/android-chrome-192x192m.png and b/static/android-chrome-192x192m.png differ diff --git a/static/android-chrome-512x512.png b/static/android-chrome-512x512.png index 371daf4..b671d86 100644 Binary files a/static/android-chrome-512x512.png and b/static/android-chrome-512x512.png differ diff --git a/static/apple-touch-icon.png b/static/apple-touch-icon.png index b872d32..2923e41 100644 Binary files a/static/apple-touch-icon.png and b/static/apple-touch-icon.png differ diff --git a/static/banner.png b/static/banner.png index 775bff2..a4a46d5 100644 Binary files a/static/banner.png and b/static/banner.png differ diff --git a/static/favicon-32x32.png b/static/favicon-32x32.png index e68ac3c..df1736f 100644 Binary files a/static/favicon-32x32.png and b/static/favicon-32x32.png differ diff --git a/static/mstile-150x150.png b/static/mstile-150x150.png index 41ce573..7a18d2b 100644 Binary files a/static/mstile-150x150.png and b/static/mstile-150x150.png differ diff --git a/templates/base.html b/templates/base.html index 2ab46f8..fd3c553 100644 --- a/templates/base.html +++ b/templates/base.html @@ -9,7 +9,7 @@ {{- macros_head::stylesheets(config=config) }} - + {{- macros_head::stylesheets_preload(config=config) }} {{- macros_head::js(config=config) }} diff --git a/templates/macros/social.html b/templates/macros/social.html index 6ad83de..1221ce7 100644 --- a/templates/macros/social.html +++ b/templates/macros/social.html @@ -1,5 +1,5 @@ {%- macro social_links(config) %} -
{%- endmacro %} diff --git a/templates/shortcodes/image.html b/templates/shortcodes/image.html index 8452ce9..4f9d3de 100644 --- a/templates/shortcodes/image.html +++ b/templates/shortcodes/image.html @@ -3,5 +3,5 @@ {% set type = source | split(pat=".") | last -%} {% endfor -%} - {{ falt | default(value='Image') }} + {{ falt | default(value='Image') }} diff --git a/templates/shortcodes/img.html b/templates/shortcodes/img.html index cf2a562..f23f783 100644 --- a/templates/shortcodes/img.html +++ b/templates/shortcodes/img.html @@ -24,5 +24,8 @@ {%- endif %} {%- set img = src | split(pat="/") | last %} -{%- set name = img | split(pat=".") | first %} - + +{%- if not alt %} + {%- set alt = img | split(pat=".") | first %} +{%- endif %} + diff --git a/templates/shortcodes/imgswap.html b/templates/shortcodes/imgswap.html index f8c983c..4397b29 100644 --- a/templates/shortcodes/imgswap.html +++ b/templates/shortcodes/imgswap.html @@ -25,8 +25,11 @@ {%- endif %} {%- set img = main_src | split(pat="/") | last %} - {%- set name = img | split(pat=".") | first %} - + + {%- if not alt %} + {%- set alt = img | split(pat=".") | first %} + {%- endif %} + {%- set dirtest = swap_src | trim_start_matches(pat="./") %} {%- if dirtest is containing("/") %} @@ -54,6 +57,9 @@ {%- endif %} {%- set img = swap_src | split(pat="/") | last %} - {%- set name = img | split(pat=".") | first %} - + + {%- if not alt %} + {%- set alt = img | split(pat=".") | first %} + {%- endif %} +
-- cgit v1.3.1