Halve-Z Zola theme

Information

2024-01-01T15:00:00+00:00

#</a>Features</h2>
Halve-Z</a> is a retro two-column theme for Zola</a>. It features search, taxonomies, automatic color schemes, media shortcodes, project cards, and a comment system (Mastodon</a>/Giscus</a>).</p>

Available (extra</code>) options:</p>


subtitle</code></li>
image</code></li>
csp_img</code></li>
disable_comments</code></li>
disable_toc</code></li>

music</code></li>
</ul>
h1</code> headers are reserved for page title (left/top block) and subtitle (optional, right/bottom block).</p>
In addition to default variables, a page can have an image, a subtitle, a category, a song, CSP strings, and multiple tags.</p>

+++</span></span>
title = "Example"</span></span>
date = 2009-09-09</span></span>
[taxonomies]</span></span>
categories = ["general"]</span></span>
tags = ["tag"]</span></span>
[extra]</span></span>
subtitle = "Example subtitle"</span></span>
disable_comments = true</span></span>
disable_toc = true</span></span>
image = "https://example.com/image.png"</span></span>
csp_img = ["example.com/", "foo.org/example"]</span></span>
music = ["Michael Pitt", "Death to Birth"]</span></span>
+++</span></span></code></pre>
music</code> variable takes an array that includes an artist and a track name. If LASTFM_KEY</code> environment variable is present, names are autocorrected and linked to the Last.fm</a> website.</p>
#</a>Configuration</h2>
Set theme</code> to halve-z</code> in your project's config.toml</code> and adjust options according to the example below:</p>
###</span></span>
base_url</span> =</span> "https://halve-z.netlify.app"</span></span>
title</span> =</span> "Halve-Z Zola theme"</span></span>
description</span> =</span> "Two-column retro theme for Zola"</span></span>
default_language</span> =</span> "en"</span></span>
author</span> =</span> "charlesrocket"</span></span>
#theme = "halve-z"</span></span>
</span>
compile_sass</span> =</span> true</span></span>
minify_html</span> =</span> true</span></span>
generate_feeds</span> =</span> true</span></span>
build_search_index</span> =</span> true</span></span>
generate_sitemap</span> =</span> true</span></span>
</span>
taxonomies</span> = [</span></span>
    {</span> name</span> =</span> "categories"</span>,</span> feed</span> =</span> true</span> },</span></span>
    {</span> name</span> =</span> "tags"</span>,</span> feed</span> =</span> true</span> },</span></span>
]</span></span>
</span>
[</span>search</span>]</span></span>
include_title</span> =</span> true</span></span>
include_description</span> =</span> true</span></span>
include_path</span> =</span> false</span></span>
include_content</span> =</span> true</span></span>
index_format</span> =</span> "elasticlunr_json"</span></span>
</span>
[</span>markdown</span>]</span></span>
render_emoji</span> =</span> false</span></span>
external_links_target_blank</span> =</span> true</span></span>
</span>
[</span>markdown</span>.</span>highlighting</span>]</span></span>
style</span> =</span> "class"</span></span>
error_on_missing_language</span> =</span> false</span></span>
theme</span> =</span> "one-dark-pro"</span></span>
</span>
[</span>slugify</span>]</span></span>
paths</span> =</span> "safe"</span></span>
taxonomies</span> =</span> "safe"</span></span>
anchors</span> =</span> "safe"</span></span>
</span>
[</span>extra</span>]</span></span>
locale</span> =</span> "en_US"</span></span>
logo</span> =</span> "icon-192x192.png"</span></span>
manifest</span> =</span> "manifest.json"</span></span>
read_time</span> =</span> true</span></span>
toc</span> =</span> true</span></span>
csp</span> =</span> true</span></span>
</span>
[</span>extra</span>.</span>placeholders</span>]</span></span>
tags</span> =</span> false</span></span>
subtitle</span> =</span> false</span></span>
</span>
[</span>extra</span>.</span>home</span>]</span></span>
title</span> =</span> "Halve-Z"</span></span>
subtitle</span> =</span> "Zola theme"</span></span>
glitch</span> =</span> false</span></span>
logo</span> = {</span> enabled</span> =</span> false</span>,</span> height</span> =</span> "100"</span>,</span> width</span> =</span> "100"</span> }</span></span>
footer</span> =</span> true</span></span>
</span>
[</span>extra</span>.</span>images</span>]</span></span>
home</span> =</span> "c1tyh4ll.png"</span> #https://failsafe.monster/c1tyh4ll.png</span></span>
post_list</span> =</span> "bk-prk.png"</span> #https://failsafe.monster/bk-prk.jpg</span></span>
default_post</span> =</span> "bk-prk.png"</span> #https://failsafe.monster/bk-prk.jpg</span></span>
categories</span> = [</span></span>
    {</span> name</span> =</span> "media"</span>,</span> image</span> =</span> "https://raw.githubusercontent.com/bearcott/8bit-art/master/cities/urban.gif"</span> },</span></span>
]</span></span>
</span>
[</span>extra</span>.</span>menu</span>]</span></span>
posts</span> =</span> true</span></span>
posts_label</span> =</span> "Posts"</span></span>
links</span> = [</span></span>
    {</span> name</span> =</span> "Code"</span>,</span> url</span> =</span> "/projects/"</span> },</span></span>
]</span></span>
</span>
[</span>extra</span>.</span>footer</span>]</span></span>
enabled</span> =</span> true</span></span>
author</span> =</span> true</span></span>
copyright</span> =</span> true</span></span>
hash</span> =</span> true</span></span>
stack</span> =</span> true</span></span>
links</span> = [</span></span>
    {</span> name</span> =</span> "posts"</span>,</span> url</span> =</span> "/posts/"</span> },</span></span>
]</span></span>
</span>
[</span>extra</span>.</span>social</span>]</span></span>
email</span> =</span> "user_email"</span></span>
mastodon</span> =</span> "server/@user_name"</span></span>
twitter</span> =</span> "user_name"</span></span>
facebook</span> =</span> "user_name"</span></span>
codeberg</span> =</span> "username"</span></span>
github</span> =</span> "user_name"</span></span>
gitlab</span> =</span> "user_name"</span></span>
bitbucket</span> =</span> "user_name"</span></span>
stackoverflow</span> =</span> "12345/user_name"</span></span>
linkedin</span> =</span> "user_name"</span></span>
instagram</span> =</span> "user_name"</span></span>
lastfm</span> =</span> "user_name"</span></span>
twitch</span> =</span> "user_name"</span></span>
reddit</span> =</span> "user_name"</span></span>
#flickr = "user_name"</span></span>
keybase</span> =</span> "user_name"</span></span>
hackernews</span> =</span> "user_name"</span></span>
</span>
[</span>extra</span>.</span>mastodon</span>]</span></span>
author</span> =</span> "@user@server"</span></span>
</span>
[</span>extra</span>.</span>comments</span>]</span></span>
system</span> =</span> ""</span></span>
</span>
[</span>extra</span>.</span>comments</span>.</span>mastodon</span>]</span></span>
username</span> =</span> "user"</span></span>
server</span> =</span> "server"</span></span>
</span>
[</span>extra</span>.</span>comments</span>.</span>giscus</span>]</span></span>
repo</span> =</span> "user_name/repo"</span></span>
repo_id</span> =</span> ""</span></span>
category</span> =</span> "Comments"</span></span>
category_id</span> =</span> ""</span></span>
mapping</span> =</span> "pathname"</span></span>
strict</span> =</span> "1"</span></span>
reactions</span> =</span> "1"</span></span>
lang</span> =</span> "en"</span></span>
</span></code></pre>


Markup
2023-06-12T15:00:00+00:00
Use Markdown</strong> and HTML</strong> to style the content:</p>
#</a>Header one</h1>
Reserved for post title/subtitle.</em></p>
#</a>Header two</h2>
#</a>Header three</h3>
#</a>Header four</h4>
#</a>Header five</h5>
#</a>Header six</h6>
#</a>Blockquotes</h2>

You could sit at home, and do like absolutely nothing, and your name goes through like 17 computers a day. 1984? Yeah right, man. That's a typo. Orwell is here now. He's livin' large. We have no names, man. No names. We are nameless!</p>
</blockquote>

Hack the planet!

Dade Murphy</cite></p>
</blockquote>
#</a>Tables</h2>
OS</th> Base</th></tr></thead>

OpenBSD</a></td> NetBSD 1.0</td></tr>
NetBSD</a></td> 4.3BSD</td></tr>
FreeBSD</a></td> 4.4BSD-Lite</td></tr>
</tbody></table>
#</a>Large tables</h3>
Surround large tables with <figure></figure></code> so they can scroll horizontally.</p>

Company</strong></th> Amstrad</th> Apparat</th> Be</th> Calma</th> Datapoint</th> Elxsi</th> Fortune Systems</th> Gateway</th> Noval</th> Jonos</th> Kaypro</th> Lap Power</th> Léanord</th> NeXT</th> Norsk Data</th> Ohio Scientific</th> Omnidata</th> OCC</th> Psystar</th> Symbolics</th> Terak</th> TRW</th> Wicat Systems</th></tr></thead>

Defunct</strong></td> 2010</td> 1988</td> 2001</td> 1988</td> 2000</td> 1989</td> 2011</td> 2007</td> 1979</td> 1992</td> 1992</td> 2000</td> 1989</td> 1997</td> 1992</td> 1980</td> 1988</td> 1985</td> 2012</td> 1996</td> 1985</td> 2002</td> 1992</td></tr>
</tbody></table>
</figure>
#</a>Code blocks</h2>
#include</span> <stdio.h></span></span>
</span>
int</span> main</span>() {</span></span>
  printf</span>(</span>"Hello, World!</span>\n</span>"</span>);</span></span>
  return</span> 0</span>;</span></span>
}</span></span></code></pre>#</a>Unordered Lists (Nested)</h2>

List item one

List item one

List item one</li>
List item two</li>
List item three</li>
List item four</li>
</ul>
</li>
List item two</li>
List item three</li>
List item four</li>
</ul>
</li>
List item two</li>
List item three</li>
List item four</li>
</ul>
#</a>Ordered List (Nested)</h2>

List item one

List item one

List item one</li>
List item two</li>
List item three</li>
List item four</li>
</ol>
</li>
List item two</li>
List item three</li>
List item four</li>
</ol>
</li>
List item two</li>
List item three</li>
List item four</li>
</ol>
#</a>HTML Tags</h2>
#</a>Buttons</h3>
Primary Button</a>Info Button</a>Warning Button</a>Success Button</a>Danger Button</a></p>
#</a>Definition Lists</h3>

  Nmap</dt>
  
    Nmap is a tool for network discovery and security scanning.
  </dd>
</dl>
#</a>Notices</h3>
Attention! Link!</a> </strong>This is notice</strong>.</p>
Attention!</strong> This is info</code> notice</strong>.</p>
Attention!</strong> This is warning</code> notice</strong>.</p>
Attention!</strong> This is success</code> notice</strong>.</p>
Attention!</strong> This is danger</code> notice</strong>.</p>
#</a>Address Tag</h3>

  3980 Broadway Street
 Boulder, CO 80304
 United States
</address>
#</a>Anchor Tag (aka. Link)</h3>
This is an example of a link</a>.</p>
#</a>Abbreviation Tag</h3>
GIF</abbr> is a bitmap image format.</p>
#</a>Cite Tag</h3>
"Code is poetry." Automattic</cite></p>
#</a>Code Tag</h3>
You will learn later on in these tests that word-wrap: break-word;</code> will be your best friend.</p>
#</a>Strike Tag</h3>
This tag will let you strikeout text</strike>.</p>
#</a>Emphasize Tag</h3>
The emphasize tag should italicize</em> text.</p>
#</a>Insert Tag</h3>
This tag should denote inserted</ins> text.</p>
#</a>Keyboard Tag</h3>
This scarcely known tag</kbd> emulates keyboard text.</p>
#</a>Quote Tag</h3>
We have just gotten a wake-up call from the Nintendo Generation.</q> –Cereal Killer</p>
#</a>Strong Tag</h3>
This tag shows bold text</strong>.</p>
#</a>Subscript Tag</h3>
Getting our science styling on with H_{2</sub>O, which should push the "2" down.</p>}#</a>Superscript Tag</h3>
Still sticking with science and Isaac Newton's E = MC^{2</sup>, which should lift the "2" up.</p>}#</a>Variable Tag</h3>
This allows you to denote variables</var>.</p>


Comments
2023-06-09T15:00:00+00:00
Halve-Z</strong> supports Mastodon</a> and Giscus</a> comment systems. Set the extra.comments.system</code> setting to mastodon</code> or giscus</code> to enable the corresponding system on the post pages.</p>
 
Mastodon</strong> requires extra.mastodon_id</code> variable to be set to a related status/post ID.</p>
To disable comments on a specific page, set disable_comments</code> to true</code> in the page's front matter</strong>:</p>
+++</span></span>
title = "Information"</span></span>
date = 2024-01-01</span></span>
[taxonomies]</span></span>
categories = ["usage"]</span></span>
tags = ["content", "configuration"]</span></span>
[extra]</span></span>
subtitle = "Usage guide"</span></span>
mastodon_id = "114633405176781965"</span></span>
disable_comments = true</span></span>
+++</span></span></code></pre>


PWA
2023-06-07T15:00:00+00:00
#</a>Setup</h2>
Service worker cannot cache external assets.</p>
To deploy the site as a PWA</strong>, set the filename in config.extra.manifest</code> and configure the manifest in the project's static</code> directory:</p>
{</span></span>
  "name"</span>:</span> "Halve-Z"</span>,</span></span>
  "short_name"</span>:</span> "Halve"</span>,</span></span>
  "description"</span>:</span> "Retro theme for Zola"</span>,</span></span>
  "lang"</span>:</span> "en-US"</span>,</span></span>
  "display"</span>:</span> "standalone"</span>,</span></span>
  "start_url"</span>:</span> "/"</span>,</span></span>
  "id"</span>:</span> "/"</span>,</span></span>
  "scope"</span>:</span> "/"</span>,</span></span>
  "orientation"</span>:</span> "any"</span>,</span></span>
  "prefer_related_applications"</span>:</span> false</span>,</span></span>
  "background_color"</span>:</span> "#2C2D32"</span>,</span></span>
  "theme_color"</span>:</span> "#2C2D32"</span>,</span></span>
  "categories"</span>: [</span></span>
    "developer"</span></span>
  ],</span></span>
  "shortcuts"</span>: [</span></span>
    {</span></span>
      "name"</span>:</span> "Journal"</span>,</span></span>
      "url"</span>:</span> "/posts"</span></span>
    },</span></span>
    {</span></span>
      "name"</span>:</span> "Projects"</span>,</span></span>
      "url"</span>:</span> "/projects"</span></span>
    }</span></span>
  ],</span></span>
  "icons"</span>: [</span></span>
    {</span></span>
      "src"</span>:</span> "/icon-192x192.png"</span>,</span></span>
      "sizes"</span>:</span> "192x192"</span>,</span></span>
      "type"</span>:</span> "image/png"</span></span>
    },</span></span>
    {</span></span>
      "src"</span>:</span> "/icon-512x512.png"</span>,</span></span>
      "sizes"</span>:</span> "512x512"</span>,</span></span>
      "type"</span>:</span> "image/png"</span></span>
    }</span></span>
  ]</span></span>
}</span></span>
</span></code></pre>


Audio
2023-06-05T15:00:00+00:00
#</a>Usage</h2>

src</code>: an array of audio file paths (mandatory)</li>
</ul>
#</a>Example</h3>
#</a>Input</h4>
{{</span> audio</span>(</span>src</span>=</span>[</span>"over9000.ogg"</span>,</span> "over9000.mp3"</span>]) }}</span></span></code></pre>#</a>Output</h4>
<</span>audio</span> controls</span>></span></span>
  <</span>source</span> src</span>=</span>"/posts/audio/over9000.ogg?v=1c06112e9211b10fc4f64fe25f9121b3d938ab0726f1ab95ea75dc72d9bfff2df617e1da166a753c31693577037aa46e641366a25194a2097341fd02e932a886"</span> type</span>=</span>"audio/ogg"</span> /></span></span>
  <</span>source</span> src</span>=</span>"/posts/audio/over9000.mp3?v=696e6c7cab3638572cb92077610e5fad9aae1b9dcf659fc5c6d3d21bae0444d0207ae51fe33b1c61a04f347b54312c42eda4c0da7cb511371023ddd204af2edf"</span> type</span>=</span>"audio/mp3"</span> /></span></span>
  Your browser does not support the audio formats in use.</span></span>
</</span>audio</span>></span></span>
</span></code></pre>
  
  
  Your browser does not support the audio formats in use.
</audio>


Video
2023-06-04T15:00:00+00:00
#</a>Video</h2>
#</a>Usage</h3>

src</code>: an array of video file paths (mandatory)</li>
width</code>: the width of the video (optional)</li>
height</code>: the height of the video (optional)</li>
autoplay</code>: when set to "true", the video autoplays on load (optional)</li>
loop</code>: when set to "true", the video plays on a loop (optional)</li>
muted</code>: when set to "true", the audio will be initially silenced (optional)</li>
</ul>
#</a>Input</h4>
{{</span> video</span>(</span>src</span>=</span>[</span>"over9000.mp4"</span>,</span> "over9000.webm"</span>]) }}</span></span></code></pre>#</a>Output</h4>
<</span>div</span> class</span>=</span>"video-local"</span>></span></span>
  <</span>video</span> controls</span>></span></span>
      <</span>source</span> src</span>=</span>"/posts/video/over9000.mp4?v=14901c9ff1b7ed2de1fc3110dbf76eb3fb1f07338b57eca03524248062806b33cf2ae89164d97ec005393027c27d97b9e33f5bb38879a5cb32ad2f420985acde"</span> type</span>=</span>"video/mp4"</span>/></span></span>
      <</span>source</span> src</span>=</span>"/posts/video/over9000.webm?v=6c41618a856aaa7ef5895eed705e7519f05d31dde3fc6bc3f70e1c15cb430edeb24fff56dd1d48151cd26f45fab4bfeb520ea4249ac90ebf4c44a855bdf25eb6"</span> type</span>=</span>"video/webm"</span>/></span></span>
      Your browser does not support the video formats in use.</span></span>
  </</span>video</span>></span></span>
</</span>div</span>></span></span>
</span></code></pre>
  
      
      
      Your browser does not support the video formats in use.
  </video>
</div>
#</a>Input</h4>
{{</span> video</span>(</span>src</span>=</span>[</span>"over9000.mp4"</span>],</span> muted</span>=</span>"true"</span>) }}</span></span></code></pre>#</a>Output</h4>
<</span>div</span> class</span>=</span>"video-local"</span>></span></span>
  <</span>video</span> controls muted</span>=</span>true</span>></span></span>
      <</span>source</span> src</span>=</span>"/posts/video/over9000.mp4?v=14901c9ff1b7ed2de1fc3110dbf76eb3fb1f07338b57eca03524248062806b33cf2ae89164d97ec005393027c27d97b9e33f5bb38879a5cb32ad2f420985acde"</span> type</span>=</span>"video/mp4"</span>/></span></span>
      Your browser does not support the video formats in use.</span></span>
  </</span>video</span>></span></span>
</</span>div</span>></span></span>
</span></code></pre>
  
      
      Your browser does not support the video formats in use.
  </video>
</div>
#</a>Vimeo</h2>
#</a>Usage</h3>

id</code>: the video id (mandatory)</li>
autoplay</code>: when set to "true", the video autoplays on load (optional)</li>
loop</code>: when set to "true", the video plays on a loop (optional)</li>
noautopause</code>: when set to "true", the video will not autopause (optional)</li>
title</code> - set alt title for the iframe (optional, defaults to "Vimeo")</li>
cookie</code> - set to "true" if you want tracking cookies, otherwise it defaults to false.</li>
</ul>
#</a>Input</h4>
{{</span> vimeo</span>(</span>id</span>=</span>"4340383"</span>) }}</span></span></code></pre>#</a>Output</h4>
<</span>div</span> class</span>=</span>"video-embedded"</span>></span></span>
  <</span>iframe</span></span>
    src</span>=</span>"https://player.vimeo.com/video/4340383?embedded=true&dnt=1"</span></span>
    class</span>=</span>"video-iframe"</span></span>
    title</span>=</span>"Vimeo"</span></span>
    webkitallowfullscreen</span></span>
    mozallowfullscreen</span></span>
    allowfullscreen</span>></span></span>
  </</span>iframe</span>></span></span>
</</span>div</span>></span></span></code></pre>
  
  </iframe>
</div>#</a>YouTube</h2>
#</a>Usage</h3>

id</code>: the video id (mandatory)</li>
playlist</code>: the playlist id (optional)</li>
autoplay</code>: when set to "true", the video autoplays on load (optional)</li>
title</code> - set alt title for the iframe (optional, defaults to "Youtube")</li>
cookie</code> - set to "true" if you want tracking cookies, otherwise it defaults to false.</li>
</ul>
#</a>Input</h4>
{{</span> youtube</span>(</span>id</span>=</span>"frBzlP6t9Gw"</span>) }}</span></span></code></pre>#</a>Output</h4>
<</span>div</span> class</span>=</span>"video-embedded"</span>></span></span>
  <</span>iframe</span></span>
    src</span>=</span>"https://www.youtube-nocookie.com/embed/frBzlP6t9Gw"</span></span>
    class</span>=</span>"video-iframe"</span></span>
    title</span>=</span>"Youtube"</span></span>
    webkitallowfullscreen</span></span>
    mozallowfullscreen</span></span>
    allowfullscreen</span>></span></span>
  </</span>iframe</span>></span></span>
</</span>div</span>></span></span></code></pre>
  
  </iframe>
</div>


Image
2023-06-03T15:00:00+00:00
#</a>Usage</h2>

src</code>: the path/URL to the image file (mandatory)</li>
link</code>: destination URL</li>
caption</code>: set the image caption</li>
alt</code>: set alternative text</li>
</ul>
#</a>Local</h3>
Example of a local image with a link and caption.</p>
#</a>Input</h4>
{{</span> image</span>(</span>src</span>=</span>"/fireball.gif"</span>,</span> link</span>=</span>"https://halve-z.netlify.app/"</span>,</span> alt</span>=</span>"Fireball"</span>,</span> caption</span>=</span>"8bit fireball"</span>) }}</span></span></code></pre>#</a>Output</h4>
<</span>figure</span>></span></span>
  <</span>a</span> href</span>=</span>https://halve-z.netlify.app</span>/</span>></span></span>
    <</span>img</span> class</span>=</span>"align-center page-image"</span> src</span>=</span>"/fireball.gif?v=569e393374f2af74d6c575090904aaf51e641e5eb5ea89ae7c7de01f7293abc165b3a7e8685690a8b951c778603fec98ae6822ff2f7ea86a536776966cb65d5d"</span> width</span>=</span>"256"</span> height</span>=</span>"256"</span> alt</span>=</span>"Fireball"</span>/></</span>a</span>><</span>figcaption</span>>8bit fireball</</span>figcaption</span>></span></span>
</</span>figure</span>></span></span>
</span></code></pre>
  
    </a>8bit fireball</figcaption>
</figure>
#</a>Image only</h3>
Example of an image without any text or links.</p>
#</a>Input</h4>
{{</span> image</span>(</span>src</span>=</span>"yawn.gif"</span>) }}</span></span></code></pre>#</a>Output</h4>
<</span>figure</span>></span></span>
    <</span>img</span> class</span>=</span>"align-center page-image"</span> src</span>=</span>"/posts/image/yawn.gif?v=fc35cb63ddbc00ff34411448bfe5100240b9a4691f45c0c2b245359fcbbd4f1d7c11617cd9cd3e8b7a03d5151cd590f421a1de41690f1d1d040c26738037afc1"</span> width</span>=</span>"32"</span> height</span>=</span>"32"</span>/></span></span>
</</span>figure</span>></span></span>
</span></code></pre>
    
</figure>
#</a>External</h3>
Example of an external image.</p>
#</a>Input</h4>
{{</span> image</span>(</span>src</span>=</span>"https://halve-z.netlify.app/fireball.gif"</span>) }}</span></span></code></pre>#</a>Output</h4>
<</span>figure</span>></span></span>
    <</span>img</span> class</span>=</span>"align-center page-image"</span> src</span>=</span>"https://halve-z.netlify.app/fireball.gif"</span>/></span></span>
</</span>figure</span>></span></span>
</span></code></pre>
    
</figure>
#</a>CSP</h2>
Add csp = enable</code> to the config's extra</code> section to enable Content Security Policy</strong> globally. Use front matter's csp_img</code> to add URLs:</p>
#</a>Example</h3>
+++</span></span>
title = "Image"</span></span>
date = 2023-06-03</span></span>
[taxonomies]</span></span>
categories = ["media"]</span></span>
tags = ["content", "csp", "shortcode"]</span></span>
[extra]</span></span>
subtitle = "Shortcodes for images"</span></span>
csp_img = ["raw.githubusercontent.com/charlesrocket/beastie/"]</span></span>
+++</span></span></code></pre>#</a>Input</h4>
{{</span> image</span>(</span>src</span>=</span>"https://raw.githubusercontent.com/charlesrocket/beastie/master/doc/screenshot.gif"</span>,</span> caption</span>=</span>"CSP test image"</span>) }}</span></span></code></pre>#</a>Output</h4>

    CSP test image</figcaption>
</figure>


Project
2022-12-31T15:00:00+00:00
#</a>Usage</h2>
Use GITHUB_TOKEN</code> environment variable to authenticate GitHub</strong> requests (optional).</p>

link</code>: the address of the repository</li>
</ul>
#</a>Example</h3>
When building with zola serve</code>, project cards are rendered with placeholder text. Use zola build</code> to preview the actual output.</p>
#</a>Input</h4>
{{</span> project</span>(</span>link</span>=</span>"https://github.com/charlesrocket/halve-z"</span>) }}</span></span></code></pre>#</a>Output</h4>
</span>
<</span>div</span> class</span>=</span>"projects frame-dim"</span>></span></span>
  <</span>h2</span>><</span>a</span> href</span>=</span>"https://github.com/charlesrocket/halve-z"</span> target</span>=</span>"_blank"</span>>halve-z</</span>a</span>></</span>h2</span>></span></span>
  <</span>ul</span> class</span>=</span>"project-list"</span>></span></span>
    <</span>li</span>><</span>b</span>><</span>span</span> class</span>=</span>"project-lang"</span>>HTML</</span>span</span>></</span>b</span>><</span>span</span> class</span>=</span>"project-lang HTML"</span>><</span>b</span>></span>&#42;</span></</span>b</span>></</span>span</span>></</span>li</span>></span></span>
    <</span>li</span>><</span>span</span> class</span>=</span>"project-license"</span>>MIT</</span>span</span>></</span>li</span>></span></span>
    <</span>li</span>><</span>span</span> class</span>=</span>"project-description"</span>>Retro two-column theme for Zola</</span>span</span>></</span>li</span>></span></span>
    <</span>li</span>><</span>ul</span> class</span>=</span>"tags project-tags"</span></span>
      ><</span>li</span> id</span>=</span>"info-tag"</span>>8bit</</span>li</span></span>
      ><</span>li</span> id</span>=</span>"info-tag"</span>>giscus</</span>li</span></span>
      ><</span>li</span> id</span>=</span>"info-tag"</span>>lastfm</</span>li</span></span>
      ><</span>li</span> id</span>=</span>"info-tag"</span>>mastodon</</span>li</span></span>
      ><</span>li</span> id</span>=</span>"info-tag"</span>>pwa</</span>li</span></span>
      ><</span>li</span> id</span>=</span>"info-tag"</span>>zola</</span>li</span></span>
    ></</span>ul</span>></</span>li</span>></span></span>
  </</span>ul</span>></span></span>
</</span>div</span>></span></span>
</span></code></pre>

  halve-z</a></h2>
  
    HTML</span></b>*</b></span></li>
    
MIT</span></li>
    
Retro two-column theme for Zola</span></li>
    
8bit</li
      >
giscus</li
      >
lastfm</li
      >
mastodon</li
      >
pwa</li
      >
zola</li
    ></ul></li>
  </ul>
</div>


Data
2022-10-01T15:00:00+00:00
#</a>Usage</h2>

src</code>: the address of the data source (mandatory)</li>
type</code>: the file type of the data source (supported types</a>)</li>
key</code>: an object in the data to display</li>
</ul>
#</a>Example</h3>
#</a>Input</h4>
This theme requires **Zola** version {{ data(src="../theme.toml" type="toml" key="min_version") }} or later.</span></span></code></pre>#</a>Output</h4>
This theme requires Zola</strong> version 0.21.0 or later.</p>

#</a>Buttons</h3>
Primary Button</a>Info Button</a>Warning Button</a>Success Button</a>Danger Button</a></p>

#</a>Anchor Tag (aka. Link)</h3>
This is an example of a link</a>.</p>

Comments

PWA

Audio

Video

Image

#</a>Input</h4>
`{{</span> image</span>(</span>src</span>=</span>"https://raw.githubusercontent.com/charlesrocket/beastie/master/doc/screenshot.gif"</span>,</span> caption</span>=</span>"CSP test image"</span>) }}</span></span></code></pre>`
#</a>Output</h4>

CSP test image</figcaption> </figure>

#</a>Output</h4>

CSP test image</figcaption> </figure>

Project

halve-z</a></h2>

**HTML</span></b>*</b></span></li>
MIT</span></li>
Retro two-column theme for Zola</span></li>
8bit</li >
giscus</li >
lastfm</li >
mastodon</li >
pwa</li >
zola</li ></ul></li> </ul> </div>**

Data

#</a>Example</h3>
#</a>Input</h4>
`This theme requires Zola version {{ data(src="../theme.toml" type="toml" key="min_version") }} or later.</span></span></code></pre>#</a>Output</h4> This theme requires Zola</strong> version 0.21.0 or later.</p>`

#</a>Input</h4>
`This theme requires Zola version {{ data(src="../theme.toml" type="toml" key="min_version") }} or later.</span></span></code></pre>#</a>Output</h4> This theme requires Zola</strong> version 0.21.0 or later.</p>`

#</a>Output</h4>
This theme requires Zola</strong> version 0.21.0 or later.</p>

Halve-Z Zola theme

Information

#</a>Features</h2>
Halve-Z</a> is a retro two-column theme for Zola</a>. It features search, taxonomies, automatic color schemes, media shortcodes, project cards, and a comment system (Mastodon</a>/Giscus</a>).</p>

Markup

Halve-Z Zola theme

Information

Markup

#</a>Variable Tag</h3> This allows you to denote variables</var>.</p> Comments 2023-06-09T15:00:00+00:00 PWA 2023-06-07T15:00:00+00:00 Audio 2023-06-05T15:00:00+00:00 Video 2023-06-04T15:00:00+00:00 Image 2023-06-03T15:00:00+00:00 Project 2022-12-31T15:00:00+00:00 Data 2022-10-01T15:00:00+00:00

Comments

PWA

Audio

Video

#</a>YouTube</h2> #</a>Usage</h3> id</code>: the video id (mandatory)</li> playlist</code>: the playlist id (optional)</li> autoplay</code>: when set to "true", the video autoplays on load (optional)</li> title</code> - set alt title for the iframe (optional, defaults to "Youtube")</li>

#</a>Usage</h3> id</code>: the video id (mandatory)</li> playlist</code>: the playlist id (optional)</li> autoplay</code>: when set to "true", the video autoplays on load (optional)</li> title</code> - set alt title for the iframe (optional, defaults to "Youtube")</li>

Image

#</a>Usage</h2> src</code>: the path/URL to the image file (mandatory)</li> link</code>: destination URL</li> caption</code>: set the image caption</li>

Project

Data