tabi/blog/javascript/index.html

<!doctype html><html lang=en><head><meta charset=UTF-8><meta content="default-src 'self';font-src 'self' data:;img-src 'self' https://* data:;media-src 'self' https://cdn.jsdelivr.net/;style-src 'self';frame-src player.vimeo.com https://www.youtube-nocookie.com;connect-src 'self' https://tabi-stats.osc.garden vhiweeypifbwacashxjz.supabase.co;script-src 'self' https://tabi-stats.osc.garden  cdn.jsdelivr.net 'self'" http-equiv=Content-Security-Policy><meta content="width=device-width,initial-scale=1.0" name=viewport><meta content=https://welpo.github.io/tabi name=base><title>
~/tabi • No mandatory JavaScript</title><link href=https://welpo.github.io/tabi/img/seedling.png rel=icon type=image/png><link href='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text y="50%" x="50%" dominant-baseline="central" text-anchor="middle" font-size="88">🌱</text></svg>' rel=icon><link title="~/tabi - Atom Feed" href=https://welpo.github.io/tabi/atom.xml rel=alternate type=application/atom+xml><link href="https://welpo.github.io/tabi/custom_subset.css?h=0b9535a28bc3d5bf2321" rel=stylesheet><link href="https://welpo.github.io/tabi/main.css?h=e9648e8ea2820aa9b15b" rel=stylesheet><meta content="light dark" name=color-scheme><meta content=#087e96 name=theme-color><meta content="JavaScript is only used when HTML and CSS aren't enough." name=description><meta content="JavaScript is only used when HTML and CSS aren't enough." property=og:description><meta content="No mandatory JavaScript" property=og:title><meta content=article property=og:type><meta content="https://welpo.github.io/tabi/blog/javascript/social_cards/blog_javascript.jpg?h=5bfbb2dc0e3e5b622445" property=og:image><meta content=1400 property=og:image:width><meta content=800 property=og:image:height><meta content="https://welpo.github.io/tabi/blog/javascript/social_cards/blog_javascript.jpg?h=5bfbb2dc0e3e5b622445" name=twitter:image><meta content=summary_large_image name=twitter:card><meta content=en_GB property=og:locale:alternate><link href=https://welpo.github.io/tabi/blog/javascript/ hreflang=en rel=alternate><meta content=ca_ES property=og:locale:alternate><link href=https://welpo.github.io/tabi/ca/blog/javascript/ hreflang=ca rel=alternate><meta content=es_ES property=og:locale:alternate><link href=https://welpo.github.io/tabi/es/blog/javascript/ hreflang=es rel=alternate><meta content=https://welpo.github.io/tabi/blog/javascript/ property=og:url><meta content=~/tabi property=og:site_name><noscript><link href=https://welpo.github.io/tabi/no_js.css rel=stylesheet></noscript><script src=https://welpo.github.io/tabi/js/initializeTheme.min.js></script><script defer src=https://welpo.github.io/tabi/js/themeSwitcher.min.js></script><script async data-goatcounter=https://tabi-stats.osc.garden/count src=https://tabi-stats.osc.garden/count.js></script><script src="https://welpo.github.io/tabi/js/searchElasticlunr.min.js?h=3626c0ef99daa745b31e" defer></script><body><header><nav class=navbar><div class=nav-title><a class=home-title href=https://welpo.github.io/tabi/>~/tabi</a></div><div class=nav-navs><ul><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/blog/>blog </a><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/archive/>archive </a><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/tags/>tags </a><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/projects/>projects </a><li class=menu-icons-container><ul class=menu-icons-group><li class="js menu-icon"><div aria-label="Click or press $SHORTCUT to open search" class="search-icon interactive-icon" title="Click or press $SHORTCUT to open search" id=search-button role=button tabindex=0><svg viewbox="0 -960 960 960" xmlns=http://www.w3.org/2000/svg><path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/></svg></div><li class=language-switcher><details class=dropdown><summary aria-label="Language selection" title="Language selection" aria-haspopup=true role=button><div class=language-switcher-icon></div></summary> <div class=dropdown-content role=menu>English<a aria-label=Català href=https://welpo.github.io/tabi/ca/blog/javascript/ lang=ca role=menuitem>Català</a><a aria-label=Español href=https://welpo.github.io/tabi/es/blog/javascript/ lang=es role=menuitem>Español</a><a aria-label=العربية href=https://welpo.github.io/tabi/ar/blog/javascript/ lang=ar role=menuitem>العربية</a></div></details><li class="theme-switcher-wrapper js"><div aria-label="Toggle dark mode" title="Toggle dark/light mode" aria-pressed=false class=theme-switcher role=button tabindex=0></div><div aria-label="Reset mode to default" class="theme-resetter arrow" title="Reset mode to default" aria-hidden=true role=button tabindex=0></div></ul></ul></div></nav></header><div class=content><main><article class=h-entry><h1 class="p-name article-title">No mandatory JavaScript</h1><a class="u-url u-uid" href=https://welpo.github.io/tabi/blog/javascript/></a><ul class=meta><li><time class=dt-published datetime=2023-01-06>6th Jan 2023</time><li title="406 words"><span aria-hidden=true class=separator>•</span>3 min read<li class=tag><span aria-hidden=true class=separator>•</span>Tags: <li class=tag><a class=p-category href=https://welpo.github.io/tabi/tags/showcase/>showcase</a>, <li class=tag><a class=p-category href=https://welpo.github.io/tabi/tags/tutorial/>tutorial</a></ul><ul class="meta last-updated"><li><time class=dt-updated datetime=2025-02-21>Updated on 21st Feb 2025</time><li><span aria-hidden=true class=separator>•</span><a class=external href=https://github.com/welpo/tabi/commits/main/content/blog/javascript/index.md>See changes</a></ul><p class=p-summary hidden>JavaScript is only used when HTML and CSS aren't enough.<section class="e-content body"><p>This theme has no mandatory JavaScript. Optionally, it can load a minimal amount to add some features that are impossible to achieve with HTML and CSS.<h2 id=globally-enabled-settings><a aria-label="Anchor link for: globally-enabled-settings" class="header-anchor no-hover-padding" href=#globally-enabled-settings><span aria-hidden=true class=link-icon></span></a> Globally enabled settings</h2><ul><li><p><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#search><strong>Search</strong></a>. Enabled by setting a default language and <code>build_search_index = true</code> on the main section of <code>config.toml</code>. (~23KB of JavaScript)</p><li><p>The <strong>light/dark mode switch</strong> can be enabled by setting <code>theme_switcher = true</code> in the <code>[extra]</code> section of your <code>config.toml</code> (~1KB of JavaScript).</p><li><p><strong>E-mail decoding</strong> (~400 bytes). To protect against spambots scraping your e-mail from your website, you can set <code>encode_plaintext_email = true</code>. If your site is on a public repository, for extra protection, consider setting your <code>email</code> as a base64-encoded string<sup class=footnote-reference id=fr-1-1><a href=#fn-1>1</a></sup> directly.</p></ul><h2 id=settings-with-hierarchical-override-capability><a aria-label="Anchor link for: settings-with-hierarchical-override-capability" class="header-anchor no-hover-padding" href=#settings-with-hierarchical-override-capability><span aria-hidden=true class=link-icon></span></a> Settings with hierarchical override capability</h2><p>The following settings can be specified for posts, sections and globally, following the hierarchy of <code>page > section > config.toml</code>:<ul><li><a href=https://welpo.github.io/tabi/blog/markdown/#katex><strong>KaTeX support</strong></a>. Enabled by setting <code>katex = true</code> (274 KB). To render math without JS, check out <a class=external href=https://developer.mozilla.org/docs/Web/MathML/>MathML</a>.<li><a href=https://welpo.github.io/tabi/blog/shortcodes/#mermaid-diagrams><strong>Mermaid diagrams</strong></a>. Enabled by setting <code>mermaid = true</code> (~2.5 MB).<li><a href=https://welpo.github.io/tabi/blog/markdown/#code-block><strong>One-click copy of code blocks</strong></a>. Enabled by setting <code>copy_button = true</code>. (~700 bytes)<li><a href=https://welpo.github.io/tabi/blog/shortcodes/#show-source-or-path><strong>Clickable code block names</strong></a>. Enabled by setting <code>code_block_name_links = true</code>. (~300 bytes)<li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#filtering-projects><strong>Tag filtering</strong> for card grids</a> (e.g. <a href=https://welpo.github.io/tabi/projects/>projects</a>) (~2KB). Enabled by setting <code>enable_cards_tag_filtering = true</code>.</ul><p>To specify these settings:<ul><li><strong>Globally</strong>: Add them under the <code>[extra]</code> section in your <code>config.toml</code> file.<li><strong>For a section</strong>: Add them under the <code>[extra]</code> section in the front matter of the section’s <code>_index.md</code>.<li><strong>For an individual post</strong>: Set the corresponding variables in the <code>[extra]</code> section of the post’s front matter.</ul><h2 id=settings-that-can-be-enabled-globally-or-for-individual-posts><a aria-label="Anchor link for: settings-that-can-be-enabled-globally-or-for-individual-posts" class="header-anchor no-hover-padding" href=#settings-that-can-be-enabled-globally-or-for-individual-posts><span aria-hidden=true class=link-icon></span></a> Settings that can be enabled globally or for individual posts</h2><ul><li><a href=https://welpo.github.io/tabi/blog/comments/><strong>Comments</strong></a>. giscus (2 KB), utterances (1 KB), Hyvor Talk (~800 bytes) or Isso (1KB) can be globally enabled by setting <code>enabled_for_all_posts = true</code> in the right section of your <code>config.toml</code> (i.e. <code>[extra.giscus]</code>, <code>[extra.utterances]</code>, <code>[extra.hyvortalk]</code> or <code>[extra.isso]</code>). To enable comments on individual posts, set the name of the system <code>= true</code> (e.g. <code>hyvortalk = true</code>) in the post’s front matter.</ul><p>Other than that, it’s a fast theme with HTML and CSS which works with JavaScript disabled. Just the way (most of) the web should be :-)<hr><section class=footnotes><ol class=footnotes-list><li id=fn-1><p>To encode your email in base64 you can use <a class=external href=https://www.base64encode.org/>online tools</a> or, on your terminal, run: <code>printf 'mail@example.com' | base64</code>. <a href=#fr-1-1>↩</a></p></ol></section></section><form action="https://vhiweeypifbwacashxjz.supabase.co/rest/v1/rpc/increment_hits?apikey=sb_publishable_EoB7MFJhCmb6PiAk-GPJ4w_PGhQ44Ru" class=iine-form method=post><input name=page_slug type=hidden value=/blog/javascript/><button aria-label="Like this post" title="Like this post" class=iine-button data-icon=thumbs_up data-slug=/blog/javascript/>👍</button></form><nav class="full-width article-navigation"><div><a aria-describedby=left_title aria-label=Next href=https://welpo.github.io/tabi/blog/markdown/><span class=arrow>←</span> Next</a><p aria-hidden=true id=left_title>Markdown examples</div><div><a aria-describedby=right_title aria-label=Prev href=https://welpo.github.io/tabi/blog/toc/>Prev <span class=arrow>→</span></a><p aria-hidden=true id=right_title>Table of Contents</div></nav></article></main><span class=hidden id=copy-success> Copied! </span><span class=hidden id=copy-init> Copy code to clipboard </span><script defer src=https://welpo.github.io/tabi/js/copyCodeToClipboard.min.js></script><script defer src=https://cdn.jsdelivr.net/gh/welpo/iine@main/iine.mini.js></script></div><footer><section><nav class="socials nav-navs"><ul><li><a class="nav-links no-hover-padding social" href=https://welpo.github.io/tabi/atom.xml> <img alt=feed loading=lazy src=https://welpo.github.io/tabi/social_icons/rss.svg title=feed> </a><li class=js><a class="nav-links no-hover-padding social" data-encoded-email=dGFiaUBvc2MuZ2FyZGVu href=#><img alt=email loading=lazy src=https://welpo.github.io/tabi/social_icons/email.svg title=email> </a><li><a class="nav-links no-hover-padding social" rel=" me" href=https://github.com/welpo/> <img alt=github loading=lazy src=https://welpo.github.io/tabi/social_icons/github.svg title=github> </a><li><a class="nav-links no-hover-padding social" rel=" me" href=https://soundcloud.com/oskerwyld> <img alt=soundcloud loading=lazy src=https://welpo.github.io/tabi/social_icons/soundcloud.svg title=soundcloud> </a><li><a class="nav-links no-hover-padding social" rel=" me" href=https://instagram.com/oskerwyld> <img alt=instagram loading=lazy src=https://welpo.github.io/tabi/social_icons/instagram.svg title=instagram> </a><li><a class="nav-links no-hover-padding social" rel=" me" href=https://youtube.com/@oskerwyld> <img alt=youtube loading=lazy src=https://welpo.github.io/tabi/social_icons/youtube.svg title=youtube> </a><li><a class="nav-links no-hover-padding social" rel=" me" href=https://open.spotify.com/artist/5Hv2bYBhMp1lUHFri06xkE> <img alt=spotify loading=lazy src=https://welpo.github.io/tabi/social_icons/spotify.svg title=spotify> </a></ul></nav><nav class=nav-navs><small> <ul><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/about/> about </a><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/privacy/> privacy policy </a><li><a class="nav-links no-hover-padding" href=https://tabi-stats.osc.garden/> site statistics </a><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/sitemap.xml> sitemap </a></ul> </small></nav><div class=credits><small> Powered by <a href=https://www.getzola.org>Zola</a> & <a href=https://github.com/welpo/tabi>tabi</a> • <a href=https://github.com/welpo/tabi> Site source </a></small></div></section><script async src=https://welpo.github.io/tabi/js/decodeMail.min.js></script><div class="search-modal js" aria-labelledby=modalTitle id=searchModal role=dialog><h1 class=visually-hidden id=modalTitle>Search</h1><div id=modal-content><div id=searchBar><div aria-hidden=true class=search-icon><svg viewbox="0 -960 960 960" xmlns=http://www.w3.org/2000/svg><path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/></svg></div><input aria-controls=results-container aria-expanded=false autocomplete=off id=searchInput placeholder=Search… role=combobox spellcheck=false><div class="close-icon interactive-icon" title="Clear search" id=clear-search role=button tabindex=0><svg viewbox="0 -960 960 960" xmlns=http://www.w3.org/2000/svg><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg></div></div><div id=results-container><div id=results-info><span id=zero_results> No results</span><span id=one_results> $NUMBER result</span><span id=many_results> $NUMBER results</span><span id=two_results> $NUMBER results</span><span id=few_results> $NUMBER results</span></div><div id=results role=listbox></div></div></div></div></footer>
		<!doctype html><html lang=en><head><meta charset=UTF-8><meta content="default-src 'self';font-src 'self' data:;img-src 'self' https://* data:;media-src 'self' https://cdn.jsdelivr.net/;style-src 'self';frame-src player.vimeo.com https://www.youtube-nocookie.com;connect-src 'self' https://tabi-stats.osc.garden vhiweeypifbwacashxjz.supabase.co;script-src 'self' https://tabi-stats.osc.garden cdn.jsdelivr.net 'self'" http-equiv=Content-Security-Policy><meta content="width=device-width,initial-scale=1.0" name=viewport><meta content=https://welpo.github.io/tabi name=base><title>
		~/tabi • No mandatory JavaScript</title><link href=https://welpo.github.io/tabi/img/seedling.png rel=icon type=image/png><link href='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text y="50%" x="50%" dominant-baseline="central" text-anchor="middle" font-size="88">🌱</text></svg>' rel=icon><link title="~/tabi - Atom Feed" href=https://welpo.github.io/tabi/atom.xml rel=alternate type=application/atom+xml><link href="https://welpo.github.io/tabi/custom_subset.css?h=0b9535a28bc3d5bf2321" rel=stylesheet><link href="https://welpo.github.io/tabi/main.css?h=e9648e8ea2820aa9b15b" rel=stylesheet><meta content="light dark" name=color-scheme><meta content=#087e96 name=theme-color><meta content="JavaScript is only used when HTML and CSS aren't enough." name=description><meta content="JavaScript is only used when HTML and CSS aren't enough." property=og:description><meta content="No mandatory JavaScript" property=og:title><meta content=article property=og:type><meta content="https://welpo.github.io/tabi/blog/javascript/social_cards/blog_javascript.jpg?h=5bfbb2dc0e3e5b622445" property=og:image><meta content=1400 property=og:image:width><meta content=800 property=og:image:height><meta content="https://welpo.github.io/tabi/blog/javascript/social_cards/blog_javascript.jpg?h=5bfbb2dc0e3e5b622445" name=twitter:image><meta content=summary_large_image name=twitter:card><meta content=en_GB property=og:locale:alternate><link href=https://welpo.github.io/tabi/blog/javascript/ hreflang=en rel=alternate><meta content=ca_ES property=og:locale:alternate><link href=https://welpo.github.io/tabi/ca/blog/javascript/ hreflang=ca rel=alternate><meta content=es_ES property=og:locale:alternate><link href=https://welpo.github.io/tabi/es/blog/javascript/ hreflang=es rel=alternate><meta content=https://welpo.github.io/tabi/blog/javascript/ property=og:url><meta content=~/tabi property=og:site_name><noscript><link href=https://welpo.github.io/tabi/no_js.css rel=stylesheet></noscript><script src=https://welpo.github.io/tabi/js/initializeTheme.min.js></script><script defer src=https://welpo.github.io/tabi/js/themeSwitcher.min.js></script><script async data-goatcounter=https://tabi-stats.osc.garden/count src=https://tabi-stats.osc.garden/count.js></script><script src="https://welpo.github.io/tabi/js/searchElasticlunr.min.js?h=3626c0ef99daa745b31e" defer></script><body><header><nav class=navbar><div class=nav-title><a class=home-title href=https://welpo.github.io/tabi/>~/tabi</a></div><div class=nav-navs><ul><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/blog/>blog </a><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/archive/>archive </a><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/tags/>tags </a><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/projects/>projects </a><li class=menu-icons-container><ul class=menu-icons-group><li class="js menu-icon"><div aria-label="Click or press $SHORTCUT to open search" class="search-icon interactive-icon" title="Click or press $SHORTCUT to open search" id=search-button role=button tabindex=0><svg viewbox="0 -960 960 960" xmlns=http://www.w3.org/2000/svg><path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/></svg></div><li class=language-switcher><details class=dropdown><summary aria-label="Language selection" title="Language selection" aria-haspopup=true role=button><div class=language-switcher-icon></div></summary> <div class=dropdown-content role=menu>English<a aria-label=Català href=https://welpo.github.io/tabi/ca/blog/javascript/ lang=ca role=menuitem>Català</a><a aria-label=Español href=https://welpo.github.io/tabi/es/blog/javascript/ lang=es role=menuitem>Español</a><a aria-label=العربية href=https://welpo.github.io/tabi/ar/blog/javascript/ lang=ar role=menuitem>العربية</a></div></details><li class="theme-switcher-wrapper js"><div aria-label="Toggle dark mode" title="Toggle dark/light mode" aria-pressed=false class=theme-switcher role=button tabindex=0></div><div aria-label="Reset mode to default" class="theme-resetter arrow" title="Reset mode to default" aria-hidden=true role=button tabindex=0></div></ul></ul></div></nav></header><div class=content><main><article class=h-entry><h1 class="p-name article-title">No mandatory JavaScript</h1><a class="u-url u-uid" href=https://welpo.github.io/tabi/blog/javascript/></a><ul class=meta><li><time class=dt-published datetime=2023-01-06>6th Jan 2023</time><li title="406 words"><span aria-hidden=true class=separator>•</span>3 min read<li class=tag><span aria-hidden=true class=separator>•</span>Tags: <li class=tag><a class=p-category href=https://welpo.github.io/tabi/tags/showcase/>showcase</a>, <li class=tag><a class=p-category href=https://welpo.github.io/tabi/tags/tutorial/>tutorial</a></ul><ul class="meta last-updated"><li><time class=dt-updated datetime=2025-02-21>Updated on 21st Feb 2025</time><li><span aria-hidden=true class=separator>•</span><a class=external href=https://github.com/welpo/tabi/commits/main/content/blog/javascript/index.md>See changes</a></ul><p class=p-summary hidden>JavaScript is only used when HTML and CSS aren't enough.<section class="e-content body"><p>This theme has no mandatory JavaScript. Optionally, it can load a minimal amount to add some features that are impossible to achieve with HTML and CSS.<h2 id=globally-enabled-settings><a aria-label="Anchor link for: globally-enabled-settings" class="header-anchor no-hover-padding" href=#globally-enabled-settings><span aria-hidden=true class=link-icon></span></a> Globally enabled settings</h2><ul><li><p><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#search><strong>Search</strong></a>. Enabled by setting a default language and <code>build_search_index = true</code> on the main section of <code>config.toml</code>. (~23KB of JavaScript)</p><li><p>The <strong>light/dark mode switch</strong> can be enabled by setting <code>theme_switcher = true</code> in the <code>[extra]</code> section of your <code>config.toml</code> (~1KB of JavaScript).</p><li><p><strong>E-mail decoding</strong> (~400 bytes). To protect against spambots scraping your e-mail from your website, you can set <code>encode_plaintext_email = true</code>. If your site is on a public repository, for extra protection, consider setting your <code>email</code> as a base64-encoded string<sup class=footnote-reference id=fr-1-1><a href=#fn-1>1</a></sup> directly.</p></ul><h2 id=settings-with-hierarchical-override-capability><a aria-label="Anchor link for: settings-with-hierarchical-override-capability" class="header-anchor no-hover-padding" href=#settings-with-hierarchical-override-capability><span aria-hidden=true class=link-icon></span></a> Settings with hierarchical override capability</h2><p>The following settings can be specified for posts, sections and globally, following the hierarchy of <code>page > section > config.toml</code>:<ul><li><a href=https://welpo.github.io/tabi/blog/markdown/#katex><strong>KaTeX support</strong></a>. Enabled by setting <code>katex = true</code> (274 KB). To render math without JS, check out <a class=external href=https://developer.mozilla.org/docs/Web/MathML/>MathML</a>.<li><a href=https://welpo.github.io/tabi/blog/shortcodes/#mermaid-diagrams><strong>Mermaid diagrams</strong></a>. Enabled by setting <code>mermaid = true</code> (~2.5 MB).<li><a href=https://welpo.github.io/tabi/blog/markdown/#code-block><strong>One-click copy of code blocks</strong></a>. Enabled by setting <code>copy_button = true</code>. (~700 bytes)<li><a href=https://welpo.github.io/tabi/blog/shortcodes/#show-source-or-path><strong>Clickable code block names</strong></a>. Enabled by setting <code>code_block_name_links = true</code>. (~300 bytes)<li><a href=https://welpo.github.io/tabi/blog/mastering-tabi-settings/#filtering-projects><strong>Tag filtering</strong> for card grids</a> (e.g. <a href=https://welpo.github.io/tabi/projects/>projects</a>) (~2KB). Enabled by setting <code>enable_cards_tag_filtering = true</code>.</ul><p>To specify these settings:<ul><li><strong>Globally</strong>: Add them under the <code>[extra]</code> section in your <code>config.toml</code> file.<li><strong>For a section</strong>: Add them under the <code>[extra]</code> section in the front matter of the section’s <code>_index.md</code>.<li><strong>For an individual post</strong>: Set the corresponding variables in the <code>[extra]</code> section of the post’s front matter.</ul><h2 id=settings-that-can-be-enabled-globally-or-for-individual-posts><a aria-label="Anchor link for: settings-that-can-be-enabled-globally-or-for-individual-posts" class="header-anchor no-hover-padding" href=#settings-that-can-be-enabled-globally-or-for-individual-posts><span aria-hidden=true class=link-icon></span></a> Settings that can be enabled globally or for individual posts</h2><ul><li><a href=https://welpo.github.io/tabi/blog/comments/><strong>Comments</strong></a>. giscus (2 KB), utterances (1 KB), Hyvor Talk (~800 bytes) or Isso (1KB) can be globally enabled by setting <code>enabled_for_all_posts = true</code> in the right section of your <code>config.toml</code> (i.e. <code>[extra.giscus]</code>, <code>[extra.utterances]</code>, <code>[extra.hyvortalk]</code> or <code>[extra.isso]</code>). To enable comments on individual posts, set the name of the system <code>= true</code> (e.g. <code>hyvortalk = true</code>) in the post’s front matter.</ul><p>Other than that, it’s a fast theme with HTML and CSS which works with JavaScript disabled. Just the way (most of) the web should be :-)<hr><section class=footnotes><ol class=footnotes-list><li id=fn-1><p>To encode your email in base64 you can use <a class=external href=https://www.base64encode.org/>online tools</a> or, on your terminal, run: <code>printf 'mail@example.com' \| base64</code>. <a href=#fr-1-1>↩</a></p></ol></section></section><form action="https://vhiweeypifbwacashxjz.supabase.co/rest/v1/rpc/increment_hits?apikey=sb_publishable_EoB7MFJhCmb6PiAk-GPJ4w_PGhQ44Ru" class=iine-form method=post><input name=page_slug type=hidden value=/blog/javascript/><button aria-label="Like this post" title="Like this post" class=iine-button data-icon=thumbs_up data-slug=/blog/javascript/>👍</button></form><nav class="full-width article-navigation"><div><a aria-describedby=left_title aria-label=Next href=https://welpo.github.io/tabi/blog/markdown/><span class=arrow>←</span> Next</a><p aria-hidden=true id=left_title>Markdown examples</div><div><a aria-describedby=right_title aria-label=Prev href=https://welpo.github.io/tabi/blog/toc/>Prev <span class=arrow>→</span></a><p aria-hidden=true id=right_title>Table of Contents</div></nav></article></main><span class=hidden id=copy-success> Copied! </span><span class=hidden id=copy-init> Copy code to clipboard </span><script defer src=https://welpo.github.io/tabi/js/copyCodeToClipboard.min.js></script><script defer src=https://cdn.jsdelivr.net/gh/welpo/iine@main/iine.mini.js></script></div><footer><section><nav class="socials nav-navs"><ul><li><a class="nav-links no-hover-padding social" href=https://welpo.github.io/tabi/atom.xml> <img alt=feed loading=lazy src=https://welpo.github.io/tabi/social_icons/rss.svg title=feed> </a><li class=js><a class="nav-links no-hover-padding social" data-encoded-email=dGFiaUBvc2MuZ2FyZGVu href=#><img alt=email loading=lazy src=https://welpo.github.io/tabi/social_icons/email.svg title=email> </a><li><a class="nav-links no-hover-padding social" rel=" me" href=https://github.com/welpo/> <img alt=github loading=lazy src=https://welpo.github.io/tabi/social_icons/github.svg title=github> </a><li><a class="nav-links no-hover-padding social" rel=" me" href=https://soundcloud.com/oskerwyld> <img alt=soundcloud loading=lazy src=https://welpo.github.io/tabi/social_icons/soundcloud.svg title=soundcloud> </a><li><a class="nav-links no-hover-padding social" rel=" me" href=https://instagram.com/oskerwyld> <img alt=instagram loading=lazy src=https://welpo.github.io/tabi/social_icons/instagram.svg title=instagram> </a><li><a class="nav-links no-hover-padding social" rel=" me" href=https://youtube.com/@oskerwyld> <img alt=youtube loading=lazy src=https://welpo.github.io/tabi/social_icons/youtube.svg title=youtube> </a><li><a class="nav-links no-hover-padding social" rel=" me" href=https://open.spotify.com/artist/5Hv2bYBhMp1lUHFri06xkE> <img alt=spotify loading=lazy src=https://welpo.github.io/tabi/social_icons/spotify.svg title=spotify> </a></ul></nav><nav class=nav-navs><small> <ul><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/about/> about </a><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/privacy/> privacy policy </a><li><a class="nav-links no-hover-padding" href=https://tabi-stats.osc.garden/> site statistics </a><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/sitemap.xml> sitemap </a></ul> </small></nav><div class=credits><small> Powered by <a href=https://www.getzola.org>Zola</a> & <a href=https://github.com/welpo/tabi>tabi</a> • <a href=https://github.com/welpo/tabi> Site source </a></small></div></section><script async src=https://welpo.github.io/tabi/js/decodeMail.min.js></script><div class="search-modal js" aria-labelledby=modalTitle id=searchModal role=dialog><h1 class=visually-hidden id=modalTitle>Search</h1><div id=modal-content><div id=searchBar><div aria-hidden=true class=search-icon><svg viewbox="0 -960 960 960" xmlns=http://www.w3.org/2000/svg><path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/></svg></div><input aria-controls=results-container aria-expanded=false autocomplete=off id=searchInput placeholder=Search… role=combobox spellcheck=false><div class="close-icon interactive-icon" title="Clear search" id=clear-search role=button tabindex=0><svg viewbox="0 -960 960 960" xmlns=http://www.w3.org/2000/svg><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg></div></div><div id=results-container><div id=results-info><span id=zero_results> No results</span><span id=one_results> $NUMBER result</span><span id=many_results> $NUMBER results</span><span id=two_results> $NUMBER results</span><span id=few_results> $NUMBER results</span></div><div id=results role=listbox></div></div></div></div></footer>