awebsite/public/features/index.html
2025-04-29 21:13:41 +02:00

51 lines
No EOL
23 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html><html lang=en><head data-base-url=https://aron.petau.net/ data-build-search-index=true data-comments-enabled=false data-giscus-category=General data-giscus-category-id=DIC_kwDOLIfXYM4Ccn56 data-giscus-crossorigin=anonymous data-giscus-emit-metadata=0 data-giscus-input-position=top data-giscus-lang=en data-giscus-mapping=title data-giscus-nonce=${aron_allows_this} data-giscus-reactions-enabled=0 data-giscus-repo=arontaupe/awebsite data-giscus-repo-id=R_kgDOLIfXYA data-giscus-src=https://giscus.app/client.js data-giscus-strict=0><meta charset=utf-8><title>Features</title><meta content="Some description, if you somehow didn't set it in page / section settings" name=description><meta content="Aron Petau" name=author><meta content="zola, theme" name=keywords><link href="https://aron.petau.net/css/grid.css?v=29042025204957" rel=stylesheet><link href="https://aron.petau.net/css/style.css?v=29042025204957" rel=stylesheet><link href=https://aron.petau.net/images/favicon.webp rel=icon type=image/png><link href=https://aron.petau.net/images/favicon.webp rel=mask-icon type=image/png><script src="https://aron.petau.net/js/codecopy.js?v=29042025204957" nonce=${aron_allows_this}></script><script src="https://aron.petau.net/js/mermaid.min.js?v=29042025204957" nonce=${aron_allows_this}></script><script src="https://aron.petau.net/elasticlunr.min.js?v=29042025204957" nonce=${aron_allows_this}></script><script src="https://aron.petau.net/js/search.js?v=29042025204957" nonce=${aron_allows_this}></script><link href=/favicon-96x96.png rel=icon sizes=96x96 type=image/png><link href=/favicon.svg rel=icon type=image/svg+xml><link rel="shortcut icon" href=/favicon.ico><link href=/apple-touch-icon.png rel=apple-touch-icon sizes=180x180><meta content=aron.petau.net name=apple-mobile-web-app-title><link href=/site.webmanifest rel=manifest><body><header><div class=container id=header-container><div class=row><div class=col-2></div><div class=col-8 id=top><div id=menu><ul><li><a href=https://aron.petau.net/>index</a><li><a class=active href=https://aron.petau.net/features>features</a><li><a href=https://aron.petau.net/notes>notes</a></ul></div><div id=searchBox><span class="icon icon-search head"></span><input id=searchInput name=search></div><span class="icon head" id=cIcon></span></div><div class=col-2></div></div></div></header><div class=row><div class=col-12><div id=sResults><ul class=search-results id=sResultsUL></ul></div></div></div><main><div class=container id=main-container><div class=row><div class=col-2></div><div class="col-8 content"><h1 class=center>Features</h1><span class=post-tags> <ul></ul> </span><div><details><summary><span class=toc-header>Contents</span></summary> <ul class=toc><li class=toc><a href=https://aron.petau.net/features/#general>General</a><li class=toc><a href=https://aron.petau.net/features/#light-mode>Light mode</a><li class=toc><a href=https://aron.petau.net/features/#important>Important</a><li class=toc><a href=https://aron.petau.net/features/#comments>Comments</a><li class=toc><a href=https://aron.petau.net/features/#page-configurations>Page configurations</a><li class=toc><a href=https://aron.petau.net/features/#blog>Blog</a><li class=toc><a href=https://aron.petau.net/features/#search>Search</a><li class=toc><a href=https://aron.petau.net/features/#config-toml-extras>config.toml extras</a><li class=toc><a href=https://aron.petau.net/features/#timeline>timeline</a><li class=toc><a href=https://aron.petau.net/features/#callouts>Callouts</a><li class=toc><a href=https://aron.petau.net/features/#mermaid>Mermaid</a></ul></details><h1 id=general>General</h1><p>I am not the best webmaster, but should be somewhat responsive. I intentionally using the bigger fonts to make, feel free to change it in main.css<h1 id=light-mode>Light mode</h1><p>Now light mode also supported.<h1 id=important>Important</h1><p>Please make sure to set up your base_url with trailing slash:<pre class="language-toml z-code" data-lang=toml><code class=language-toml data-lang=toml><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">base_url</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>https://kuznetsov17.github.io/pico/<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span>
</span></code></pre><h1 id=comments>Comments</h1><p>Theme supports <a href=https://giscuss.app>Giscuss</a> for comments. The configuration is done via config.toml. Here you can see the example section used for this page deployment:<pre class="language-toml z-code" data-lang=toml><code class=language-toml data-lang=toml><span class="z-source z-toml"><span class="z-punctuation z-definition z-table z-begin z-toml">[</span><span class="z-meta z-tag z-table z-toml"><span class="z-entity z-name z-table z-toml">extra</span><span class="z-punctuation z-separator z-table z-toml">.</span><span class="z-entity z-name z-table z-toml">giscus</span></span><span class="z-punctuation z-definition z-table z-end z-toml">]</span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">data_repo</span></span><span class="z-punctuation z-definition z-key-value z-toml">=</span><span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>kuznetsov17/pico<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">data_repo_id</span></span><span class="z-punctuation z-definition z-key-value z-toml">=</span><span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>R_kgDOLIfXYA<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">data_category</span></span><span class="z-punctuation z-definition z-key-value z-toml">=</span><span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>General<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">data_category_id</span></span><span class="z-punctuation z-definition z-key-value z-toml">=</span><span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>DIC_kwDOLIfXYM4Ccn56<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">data_mapping</span></span><span class="z-punctuation z-definition z-key-value z-toml">=</span><span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>title<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">data_strict</span></span><span class="z-punctuation z-definition z-key-value z-toml">=</span><span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>0<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">data_reactions_enabled</span></span><span class="z-punctuation z-definition z-key-value z-toml">=</span><span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>0<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">data_emit_metadata</span></span><span class="z-punctuation z-definition z-key-value z-toml">=</span><span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>0<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">data_input_position</span></span><span class="z-punctuation z-definition z-key-value z-toml">=</span><span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>top<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">data_theme</span></span><span class="z-punctuation z-definition z-key-value z-toml">=</span><span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>//kuznetsov17.github.io/pico/css/gs_dark.css<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">data_lang</span></span><span class="z-punctuation z-definition z-key-value z-toml">=</span><span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>en<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">crossorigin</span></span><span class="z-punctuation z-definition z-key-value z-toml">=</span><span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>anonymous<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">nonce</span></span><span class="z-punctuation z-definition z-key-value z-toml">=</span><span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span><span class="z-punctuation z-definition z-string z-end z-toml">"</span></span>
</span></code></pre><h1 id=page-configurations>Page configurations</h1><p>Customize the page blocks by setting configuration in <strong>[extra]</strong> section:<pre class="language-toml z-code" data-lang=toml><code class=language-toml data-lang=toml><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">show_copyright</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-constant z-language z-toml">true</span><span class="z-invalid z-illegal z-trailing z-toml"> / false # enables / disables footer with copyright</span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">show_comments</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-constant z-language z-toml">true</span><span class="z-invalid z-illegal z-trailing z-toml"> / false # enables / disables comments</span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">show_shares</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-constant z-language z-toml">true</span><span class="z-invalid z-illegal z-trailing z-toml"> / false # enables / disables section with social share buttons</span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">show_toc</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-constant z-language z-toml">true</span><span class="z-invalid z-illegal z-trailing z-toml"> / false # enables / disable TOC</span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">show_date</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-constant z-language z-toml">true</span><span class="z-invalid z-illegal z-trailing z-toml"> / false # displays publication date in page</span>
</span></code></pre><h1 id=blog>Blog</h1><p>I am using this theme for my <a href=https://viku.me/notes/>notes</a>, or probably blog. The section template supports pagination, tags, sorts the pages by publication date. You may see the working example <a href=https://aron.petau.net/notes/>here</a><h1 id=search>Search</h1><p>The theme supports the search using <a href=http://elasticlunr.com>elasticrunrjs</a>. To enable the search, you will need the following configuration in <strong>config.toml</strong>:<pre class="language-toml z-code" data-lang=toml><code class=language-toml data-lang=toml><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">build_search_index</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-constant z-language z-toml">true</span>
</span><span class="z-source z-toml">
</span><span class="z-source z-toml"><span class="z-punctuation z-definition z-table z-begin z-toml">[</span><span class="z-meta z-tag z-table z-toml"><span class="z-entity z-name z-table z-toml">search</span></span><span class="z-punctuation z-definition z-table z-end z-toml">]</span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">index_format</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>elasticlunr_json<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span>
</span></code></pre><h1 id=config-toml-extras>config.toml extras</h1><pre class="language-toml z-code" data-lang=toml><code class=language-toml data-lang=toml><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">author</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>John Doe<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span> <span class="z-comment z-line z-number-sign z-toml"><span class="z-punctuation z-definition z-comment z-toml">#</span> author. Will be puth in page metadata</span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">description</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>Some description, if you somehow didn't set it in page / section settings<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">logo_src</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>images/logo.svg<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span> <span class="z-comment z-line z-number-sign z-toml"><span class="z-punctuation z-definition z-comment z-toml">#</span> logo src</span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">avatar_src</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>images/avatar.png<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span> <span class="z-comment z-line z-number-sign z-toml"><span class="z-punctuation z-definition z-comment z-toml">#</span> avatar src</span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">index_page</span></span><span class="z-punctuation z-definition z-key-value z-toml">=</span><span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>index<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span> <span class="z-comment z-line z-number-sign z-toml"><span class="z-punctuation z-definition z-comment z-toml">#</span> name of the index page. Should be one of top_menu to make things work</span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">top_menu</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-punctuation z-definition z-array z-begin z-toml">[</span><span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>index<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span><span class="z-punctuation z-separator z-array z-toml">,</span><span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>features<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span><span class="z-punctuation z-separator z-array z-toml">,</span><span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>notes<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span><span class="z-punctuation z-definition z-array z-end z-toml">]</span> <span class="z-comment z-line z-number-sign z-toml"><span class="z-punctuation z-definition z-comment z-toml">#</span> Menu items</span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">copyright_string</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>Сreated by John Doe in 2024 %YEAR% for fun.<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span> <span class="z-comment z-line z-number-sign z-toml"><span class="z-punctuation z-definition z-comment z-toml">#</span> footer content. %YEAR% will be replaced with current year</span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">nonce</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>${SOME_HASH_VALUE}<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span> <span class="z-comment z-line z-number-sign z-toml"><span class="z-punctuation z-definition z-comment z-toml">#</span> used for JavaScript src nonce</span>
</span></code></pre><h1 id=timeline>timeline</h1><div id=timeline-content><ul class=timeline><li class=event data-date=Jul-2023><h3><p>Lorem Ipsum Event</p></h3> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p><li class=event data-date=Jun-2022><h3><p>Lorem Ipsum event 2</p></h3> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p></ul></div><h1 id=callouts>Callouts</h1><p><div class=co-container><div class="callout warning"><span class=co-img><svg viewbox="0 0 16 16" xmlns=http://www.w3.org/2000/svg><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4m.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2"/></svg></span><span class=co-body> <p>This is an example of <strong>Warning</strong> callout. <a href=#>Some link</a></p> </span></div></div><div class=co-container><div class="callout alert"><span class=co-img><svg viewbox="0 0 16 16" xmlns=http://www.w3.org/2000/svg><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M4.5 7.5a.5.5 0 0 0 0 1h7a.5.5 0 0 0 0-1z"/></svg></span><span class=co-body> <p>This is an example of <strong>Alert</strong> callout. <a href=#>Some link</a></p> </span></div></div><div class=co-container><div class="callout info"><span class=co-img><svg viewbox="0 0 16 16" xmlns=http://www.w3.org/2000/svg><path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2"/></svg></span><span class=co-body> <p>This is an example of <strong>Info</strong> callout. <a href=#>Some link</a></p> </span></div></div><h1 id=mermaid>Mermaid</h1><p>Read more on how to use mermaid in their <a href=https://mermaid.js.org/syntax/examples.html>documentation</a><pre class=mermaid>
gitGraph
commit
commit
branch develop
checkout develop
commit
commit
checkout main
merge develop
commit
commit
</pre><pre class=mermaid>
graph LR
A[Square Rect] -- Link text --> B((Circle))
A --> C(Round Rect)
B --> D{Rhombus}
C --> D
</pre></div></div><div class=col-2></div></div><div class="row postnav"><div class=col-2></div><div class=col-8><div class="col-6 left"></div><div class="col-6 right"></div></div><div class=col-2></div></div></div><div class=row><div class=col-2></div><div class="col-8 center shares"><ul><li><a class="icon icon-linkedin shares" href="https://www.linkedin.com/sharing/share-offsite/?url=https://aron.petau.net/features/"></a><li><a class="icon icon-fb shares" href="http://www.facebook.com/sharer.php?u=https://aron.petau.net/features/"></a><li><a class="icon icon-tg shares" href="https://t.me/share/url?url=https://aron.petau.net/features/"></a><li><a class="icon icon-wa shares" href="https://api.whatsapp.com/send?text=https://aron.petau.net/features/"></a></ul></div><div class=col-2></div></div></main><footer class=row><div class=col-2></div><div class=col-8 id=footer-wrapper><div class=footer-text><p>Сreated by Aron Petau in 2024 2025</div></div><div class=col-2></div></footer><script src="https://aron.petau.net/js/colortheme.js?v=29042025204957" nonce=${aron_allows_this}></script><script src="https://aron.petau.net/js/init.js?v=29042025204957" nonce=${aron_allows_this}></script>