congo/docs/partials/index.html

254 lines
25 KiB
HTML

<!doctype html><html lang=en-au dir=ltr class=scroll-smooth data-auto-appearance=true><head>
<meta charset=utf-8>
<meta http-equiv=content-language content="en-au">
<meta name=viewport content="width=device-width,initial-scale=1">
<meta http-equiv=x-ua-compatible content="ie=edge">
<title>Partials &#183; Congo</title>
<meta name=title content="Partials &#183; Congo">
<meta name=description content="A powerful, lightweight theme for Hugo built with Tailwind CSS.">
<link rel=canonical href=https://jpanther.github.io/congo/docs/partials/>
<link type=text/css rel=stylesheet href=/congo/css/main.bundle.min.9b253ddfacfebf2bc0e3f42afb0c2d8b458f751b3e08c100f4eceb03f1d561676be97c329374cd7904bb700647b0197f85fc20298a8ee3ffdc467d4c43bb20a9.css integrity="sha512-myU936z+vyvA4/Qq+wwti0WPdRs+CMEA9OzrA/HVYWdr6Xwyk3TNeQS7cAZHsBl/hfwgKYqO4//cRn1MQ7sgqQ==">
<script defer type=text/javascript id=script-bundle src=/congo/js/main.bundle.min.fde17ba078f800524d6eab2ac173ba8fe5a928afc7c814f55e68e50f59909e51eaeded8e3464e460f50765057ecc8f0ad5393495b36a17be9dad3cb9c7c646e2.js integrity="sha512-/eF7oHj4AFJNbqsqwXO6j+WpKK/HyBT1XmjlD1mQnlHq7e2ONGTkYPUHZQV+zI8K1Tk0lbNqF76drTy5x8ZG4g==" data-copy=Copy data-copied=Copied></script>
<link rel=apple-touch-icon sizes=180x180 href=/congo/apple-touch-icon.png>
<link rel=icon type=image/png sizes=32x32 href=/congo/favicon-32x32.png>
<link rel=icon type=image/png sizes=16x16 href=/congo/favicon-16x16.png>
<link rel=manifest href=/congo/site.webmanifest>
<meta property="og:title" content="Partials">
<meta property="og:description" content="All the partials available in Congo.">
<meta property="og:type" content="article">
<meta property="og:url" content="https://jpanther.github.io/congo/docs/partials/"><meta property="article:section" content="docs">
<meta property="article:published_time" content="2020-08-10T00:00:00+00:00">
<meta property="article:modified_time" content="2020-08-10T00:00:00+00:00"><meta property="og:site_name" content="Congo">
<meta name=twitter:card content="summary">
<meta name=twitter:title content="Partials">
<meta name=twitter:description content="All the partials available in Congo.">
<script type=application/ld+json>[{"@context":"https://schema.org","@type":"Article","articleSection":"Documentation","name":"Partials","headline":"Partials","description":"All the partials available in Congo.","abstract":"Analytics # Congo provides built-in support for Fathom Analytics and Google Analytics.","inLanguage":"en-au","url":"https:\/\/jpanther.github.io\/congo\/docs\/partials\/","author":{"@type":"Person","name":"Congo"},"copyrightYear":"2020","dateCreated":"2020-08-10T00:00:00\u002b00:00","datePublished":"2020-08-10T00:00:00\u002b00:00","dateModified":"2020-08-10T00:00:00\u002b00:00","keywords":["partials","analytics","privacy","comments","favicons","icon","docs"],"mainEntityOfPage":"true","wordCount":"656"}]</script>
<meta name=generator content="Hugo 0.92.1">
<meta name=author content="Congo">
<link href=https://twitter.com/ rel=me>
<link href=https://facebook.com/ rel=me>
<link href=https://linkedin.com/ rel=me>
<link href=https://youtube.com/ rel=me>
</head>
<body class="flex flex-col h-screen px-6 m-auto text-lg leading-7 bg-neutral text-neutral-900 sm:px-14 md:px-24 lg:px-32 dark:bg-neutral-800 dark:text-neutral max-w-7xl">
<div id=the-top class="absolute flex self-center">
<a class="px-3 py-1 text-sm -translate-y-8 rounded-b-lg bg-primary-200 dark:bg-neutral-600 focus:translate-y-0" href=#main-content><span class="font-bold ltr:pr-2 rtl:pl-2 text-primary-600 dark:text-primary-400">&darr;</span>Skip to main content</a>
</div><header class="flex justify-between py-6 font-semibold sm:items-center sm:py-10 text-neutral-900 dark:text-neutral">
<div>
<a class="hover:underline hover:decoration-primary-500 hover:decoration-2 hover:underline-offset-2" rel=me href=/congo/>Congo</a>
</div>
<nav>
<ul class="flex flex-col list-none sm:flex-row">
<li class="mb-1 ltr:text-right rtl:text-left sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0">
<a class="hover:underline hover:decoration-primary-500 hover:decoration-2 hover:underline-offset-2" href=/congo/docs/ title=Documentation>Docs</a>
</li>
<li class="mb-1 ltr:text-right rtl:text-left sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0">
<a class="hover:underline hover:decoration-primary-500 hover:decoration-2 hover:underline-offset-2" href=/congo/samples/ title="Content Samples">Samples</a>
</li>
<li class="mb-1 ltr:text-right rtl:text-left sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0">
<a class="hover:underline hover:decoration-primary-500 hover:decoration-2 hover:underline-offset-2" href=/congo/users/ title=Users>Users</a>
</li>
<li class="mb-1 ltr:text-right rtl:text-left sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0">
<a class="hover:underline hover:decoration-primary-500 hover:decoration-2 hover:underline-offset-2" href=https://github.com/jpanther/congo title>GitHub</a>
</li>
<li class="ltr:text-right rtl:text-left ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0">
<button id=search-button class="text-base hover:text-primary-600 dark:hover:text-primary-400" title="Search (/)">
<span class="relative inline-block align-text-bottom icon"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="search" class="svg-inline--fa fa-search fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentcolor" d="M505 442.7 405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9.0 208 0S0 93.1.0 208s93.1 208 208 208c48.3.0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9.0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7.0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7.0 128 57.2 128 128 0 70.7-57.2 128-128 128z"/></svg>
</span>
</button>
</li>
</ul>
</nav>
</header>
<main id=main-content class=relative>
<article>
<header class=max-w-prose>
<ol class="text-sm text-neutral-500 dark:text-neutral-400">
<li class="inline hidden">
<a class="hover:underline hover:decoration-neutral-300 dark:underline-neutral-600" href=/congo/>Welcome to Congo! :tada:</a><span class="px-1 text-primary-500">/</span>
</li>
<li class=inline>
<a class="hover:underline hover:decoration-neutral-300 dark:underline-neutral-600" href=/congo/docs/>Documentation</a><span class="px-1 text-primary-500">/</span>
</li>
<li class="inline hidden">
<a class="hover:underline hover:decoration-neutral-300 dark:underline-neutral-600" href=/congo/docs/partials/>Partials</a><span class="px-1 text-primary-500">/</span>
</li>
</ol>
<h1 class="mt-0 text-4xl font-extrabold text-neutral-900 dark:text-neutral">
Partials
</h1>
<div class="mt-8 mb-12 text-base text-neutral-500 dark:text-neutral-400">
<div class="flex flex-row flex-wrap items-center">
<span title="Reading time">4 mins</span><span class="px-2 text-primary-500">&#183;</span>
<span class=mb-[2px]>
<a href=https://github.com/jpanther/congo/tree/dev/exampleSite/content/docs/partials.md class="text-lg hover:text-primary-500" rel="noopener noreferrer" target=_blank title="Edit content">
<span class="relative inline-block align-text-bottom icon"><svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="edit" class="svg-inline--fa fa-edit fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentcolor" d="M402.3 344.9l32-32c5-5 13.7-1.5 13.7 5.7V464c0 26.5-21.5 48-48 48H48c-26.5.0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h273.5c7.1.0 10.7 8.6 5.7 13.7l-32 32c-1.5 1.5-3.5 2.3-5.7 2.3H48v352h352V350.5c0-2.1.8-4.1 2.3-5.6zm156.6-201.8L296.3 405.7l-90.4 10c-26.2 2.9-48.5-19.2-45.6-45.6l10-90.4L432.9 17.1c22.9-22.9 59.9-22.9 82.7.0l43.2 43.2c22.9 22.9 22.9 60 .1 82.8zM460.1 174 402 115.9 216.2 301.8l-7.3 65.3 65.3-7.3L460.1 174zm64.8-79.7-43.2-43.2c-4.1-4.1-10.8-4.1-14.8.0L436 82l58.1 58.1 30.9-30.9c4-4.2 4-10.8-.1-14.9z"/></svg>
</span>
</a>
</span>
</div>
</div>
</header>
<section class="flex flex-col max-w-full mt-0 prose lg:flex-row dark:prose-invert">
<div class="order-first px-0 lg:max-w-xs ltr:lg:pl-8 rtl:lg:pr-8 lg:order-last">
<div class="ltr:pl-5 rtl:pr-5 toc lg:sticky lg:top-10">
<details open class="mt-0 overflow-hidden rounded-lg rtl:pr-5 ltr:pl-5 ltr:-ml-5 rtl:-mr-5 lg:mt-3">
<summary class="block py-1 text-lg font-semibold cursor-pointer rtl:pr-5 ltr:pl-5 ltr:-ml-5 rtl:-mr-5 text-neutral-800 dark:text-neutral-100 lg:hidden bg-neutral-100 dark:bg-neutral-700">
Table of Contents
</summary>
<div class="py-2 border-dotted ltr:border-l rtl:border-r rtl:pr-5 ltr:pl-5 ltr:-ml-5 rtl:-mr-5 border-neutral-300 dark:border-neutral-600">
<nav id=TableOfContents>
<ul>
<li><a href=#analytics>Analytics</a>
<ul>
<li><a href=#fathom-analytics>Fathom Analytics</a></li>
<li><a href=#google-analytics>Google Analytics</a></li>
<li><a href=#custom-analytics-providers>Custom analytics providers</a></li>
</ul>
</li>
<li><a href=#comments>Comments</a></li>
<li><a href=#favicons>Favicons</a></li>
<li><a href=#icon>Icon</a></li>
<li><a href=#extensions>Extensions</a>
<ul>
<li><a href=#article-link>Article link</a></li>
<li><a href=#head-and-footer>Head and Footer</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</details>
</div>
</div>
<div class="min-w-0 min-h-0 max-w-prose">
<h2 id=analytics class="relative group">Analytics <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#analytics aria-label=Anchor>#</a></span></h2>
<p>Congo provides built-in support for Fathom Analytics and Google Analytics. Fathom is a paid alternative to Google Analytics that respects user privacy. If you&rsquo;re interested you can use this affiliate link to <a href=https://usefathom.com/ref/RLAJSV>receive $10 credit</a> and try the service.</p>
<h3 id=fathom-analytics class="relative group">Fathom Analytics <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#fathom-analytics aria-label=Anchor>#</a></span></h3>
<p>To enable Fathom Analytics support, simply provide your Fathom site code in the <code>config/_default/params.toml</code> file. If you also use the custom domain feature of Fathom and would like to serve their script from your domain, you can also additionally provide the <code>domain</code> configuration value. If you don&rsquo;t provide a <code>domain</code> value, the script will load directly from Fathom DNS.</p>
<div class=highlight><pre tabindex=0 class=chroma><code class=language-toml data-lang=toml><span class=c># config/_default/params.toml</span>
<span class=p>[</span><span class=nx>fathomAnalytics</span><span class=p>]</span>
<span class=nx>site</span> <span class=p>=</span> <span class=s2>&#34;ABC12345&#34;</span>
<span class=nx>domain</span> <span class=p>=</span> <span class=s2>&#34;llama.yoursite.com&#34;</span>
</code></pre></div><h3 id=google-analytics class="relative group">Google Analytics <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#google-analytics aria-label=Anchor>#</a></span></h3>
<p>Google Analytics support is provided through the internal Hugo partial. Simply provide the <code>googleAnalytics</code> key in the <code>config/_default/config.toml</code> file and the script will be added automatically.</p>
<div class=highlight><pre tabindex=0 class=chroma><code class=language-toml data-lang=toml><span class=c># config/_default/config.toml</span>
<span class=nx>googleAnalytics</span> <span class=p>=</span> <span class=s2>&#34;UA-PROPERTY_ID&#34;</span>
</code></pre></div><h3 id=custom-analytics-providers class="relative group">Custom analytics providers <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#custom-analytics-providers aria-label=Anchor>#</a></span></h3>
<p>If you wish to use a different analytics provider on your website you can also override the analytics partial and provide your own script. Simply create the file <code>layouts/partials/analytics.html</code> in your project and it will automatically include it in the <code>&lt;head></code> of the website.</p>
<h2 id=comments class="relative group">Comments <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#comments aria-label=Anchor>#</a></span></h2>
<p>To add comments to your articles, Congo includes support for a comments partial that is included at the base of each article page. Simply provide a <code>layouts/partials/comments.html</code> which contains the code required to display your chosen comments.</p>
<p>You can use either the built-in Hugo Disqus template, or provide your own custom code. Refer to the <a href=https://gohugo.io/content-management/comments/>Hugo docs</a> for further information.</p>
<h2 id=favicons class="relative group">Favicons <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#favicons aria-label=Anchor>#</a></span></h2>
<p>Congo provides a default set of blank favicons to get started but you can provide your own assets to override them. The easiest way to obtain new favicon assets is to generate them using a third-party provider like <a href=https://favicon.io>favicon.io</a>.</p>
<p>Icon assets should be placed directly in the <code>static/</code> folder of your website and named as per the listing below. If you use <a href=https://favicon.io>favicon.io</a>, these will be the filenames that are automatically generated for you, but you can provide your own assets if you wish.</p>
<div class=highlight><pre tabindex=0 class=chroma><code class=language-shell data-lang=shell>static/
├─ android-chrome-192x192.png
├─ android-chrome-512x512.png
├─ apple-touch-icon.png
├─ favicon-16x16.png
├─ favicon-32x32.png
├─ favicon.ico
└─ site.webmanifest
</code></pre></div><p>Alternatively, you can also completely override the default favicon behaviour and provide your own favicon HTML tags and assets. Simply provide a <code>layouts/partials/favicons.html</code> file in your project and this will be injected into the site <code>&lt;head></code> in place of the default assets.</p>
<h2 id=icon class="relative group">Icon <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#icon aria-label=Anchor>#</a></span></h2>
<p>Similar to the <a href=https://jpanther.github.io/congo/docs/shortcodes/#icon>icon shortcode</a>, you can include icons in your own templates and partials by using Congo&rsquo;s <code>icon.html</code> partial. The partial takes one parameter which is the name of the icon to be included.</p>
<p><strong>Example:</strong></p>
<div class=highlight><pre tabindex=0 class=chroma><code class=language-go data-lang=go> <span class=p>{{</span> <span class=nx>partial</span> <span class=s>&#34;icon.html&#34;</span> <span class=s>&#34;github&#34;</span> <span class=p>}}</span>
</code></pre></div><p>Icons are populated using Hugo pipelines which makes them very flexible. Congo includes a number of built-in icons for social, links and other purposes. Check the <a href=https://jpanther.github.io/congo/samples/icons/>icon samples</a> page for a full list of supported icons.</p>
<p>Custom icons can be added by providing your own icon assets in the <code>assets/icons/</code> directory of your project. The icon can then be referenced in the partial by using the SVG filename without the <code>.svg</code> extension.</p>
<p>Icons can also be used in article content by calling the <a href=https://jpanther.github.io/congo/docs/shortcodes/#icon>icon shortcode</a>.</p>
<h2 id=extensions class="relative group">Extensions <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#extensions aria-label=Anchor>#</a></span></h2>
<p>Congo also provides for a number of extension partials that allow for expanding upon base functionality.</p>
<h3 id=article-link class="relative group">Article link <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#article-link aria-label=Anchor>#</a></span></h3>
<p>If you wish to insert additional code after article links, create a <code>layouts/partials/extend-article-link.html</code> file. This is especially powerful when combined with the <a href=https://jpanther.github.io/congo/docs/shortcodes/#badge><code>badge</code></a> shortcode which can be used to highlight metadata for certain articles.</p>
<h3 id=head-and-footer class="relative group">Head and Footer <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#head-and-footer aria-label=Anchor>#</a></span></h3>
<p>The theme allows for inserting additional code directly into the <code>&lt;head></code> and <code>&lt;footer></code> sections of the template. These can be useful for providing scripts or other logic that isn&rsquo;t part of the theme.</p>
<p>Simply create either <code>layouts/partials/extend-head.html</code> or <code>layouts/partials/extend-footer.html</code> and these will automatically be included in your website build. Both partials are injected as the last items in <code>&lt;head></code> and <code>&lt;footer></code> so they can be used to override theme defaults.</p>
</div>
</section>
<footer class="pt-8 max-w-prose">
<div class=pt-8>
<hr class="border-dotted border-neutral-300 dark:border-neutral-600">
<div class="flex justify-between pt-3">
<span>
<a class="flex group" href=/congo/docs/shortcodes/>
<span class="mr-3 ltr:inline rtl:hidden text-neutral-700 dark:text-neutral group-hover:text-primary-600 dark:group-hover:text-primary-400">&larr;</span>
<span class="ml-3 ltr:hidden rtl:inline text-neutral-700 dark:text-neutral group-hover:text-primary-600 dark:group-hover:text-primary-400">&rarr;</span>
<span class="flex flex-col">
<span class="mt-[0.1rem] leading-6 group-hover:underline group-hover:decoration-primary-500">Shortcodes</span>
<span class="mt-[0.1rem] text-xs text-neutral-500 dark:text-neutral-400">
</span>
</span>
</a>
</span>
<span>
<a class="flex text-right group" href=/congo/docs/content-examples/>
<span class="flex flex-col">
<span class="mt-[0.1rem] leading-6 group-hover:underline group-hover:decoration-primary-500">Content Examples</span>
<span class="mt-[0.1rem] text-xs text-neutral-500 dark:text-neutral-400">
</span>
</span>
<span class="ml-3 ltr:inline rtl:hidden text-neutral-700 dark:text-neutral group-hover:text-primary-600 dark:group-hover:text-primary-400">&rarr;</span>
<span class="mr-3 ltr:hidden rtl:inline text-neutral-700 dark:text-neutral group-hover:text-primary-600 dark:group-hover:text-primary-400">&larr;</span>
</a>
</span>
</div>
</div>
</footer>
</article>
<div class="absolute top-[110vh] ltr:right-0 rtl:left-0 w-12 pointer-events-none bottom-[-5.5rem]">
<a href=#the-top class="w-12 h-12 sticky pointer-events-auto top-[calc(100vh-5rem)] bg-neutral/50 dark:bg-neutral-800/50 backdrop-blur rounded-full text-xl flex items-center justify-center text-neutral-700 dark:text-neutral hover:text-primary-600 dark:hover:text-primary-400" aria-label="Scroll to top" title="Scroll to top">
&uarr;
</a>
</div>
</main>
<div id=search-wrapper class="fixed inset-0 z-50 flex flex-col p-4 sm:p-6 md:p-[10vh] lg:p-[12vh] w-screen h-screen cursor-default bg-neutral-500/50 backdrop-blur-sm dark:bg-neutral-900/50 invisible" data-url=https://jpanther.github.io/congo/>
<div id=search-modal class="flex flex-col w-full max-w-3xl min-h-0 mx-auto border rounded-md shadow-lg border-neutral-200 top-20 bg-neutral dark:bg-neutral-800 dark:border-neutral-700">
<header class="relative z-10 flex items-center justify-between flex-none px-2">
<form class="flex items-center flex-auto min-w-0">
<div class="flex items-center justify-center w-8 h-8 text-neutral-400">
<span class="relative inline-block align-text-bottom icon"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="search" class="svg-inline--fa fa-search fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentcolor" d="M505 442.7 405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9.0 208 0S0 93.1.0 208s93.1 208 208 208c48.3.0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9.0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7.0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7.0 128 57.2 128 128 0 70.7-57.2 128-128 128z"/></svg>
</span>
</div>
<input type=search id=search-query class="flex flex-auto h-12 mx-1 bg-transparent appearance-none focus:outline-dotted focus:outline-transparent focus:outline-2" placeholder=Search tabindex=0>
</form>
<button id=close-search-button class="flex items-center justify-center w-8 h-8 text-neutral-700 dark:text-neutral hover:text-primary-600 dark:hover:text-primary-400" title="Close (Esc)">
<span class="relative inline-block align-text-bottom icon"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="times" class="svg-inline--fa fa-times fa-w-11" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512"><path fill="currentcolor" d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19.0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48.0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48.0L9.21 111.45c-12.28 12.28-12.28 32.19.0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19.0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48.0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48.0l22.24-22.24c12.28-12.28 12.28-32.19.0-44.48L242.72 256z"/></svg>
</span>
</button>
</header>
<section class="flex-auto px-2 overflow-auto">
<ul id=search-results>
</ul>
</section>
</div>
</div>
<footer class=py-10>
<div class="flex justify-between">
<div>
<p class="text-sm text-neutral-500 dark:text-neutral-400">
© 2022 Congo contributors
</p>
<p class="text-xs text-neutral-500 dark:text-neutral-400">
Powered by <a class="hover:underline hover:decoration-primary-400 hover:text-primary-500" href=https://gohugo.io/ target=_blank rel="noopener noreferrer">Hugo</a> & <a class="hover:underline hover:decoration-primary-400 hover:text-primary-500" href=https://git.io/hugo-congo target=_blank rel="noopener noreferrer">Congo</a>
</p>
</div>
<div class="text-sm cursor-pointer text-neutral-700 dark:text-neutral hover:text-primary-600 dark:hover:text-primary-400 ltr:mr-14 rtl:ml-14">
<button id=appearance-switcher class="w-12 h-12" type=button title="Switch to dark appearance">
<span class="inline dark:hidden">
<span class="relative inline-block align-text-bottom icon"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="moon" class="svg-inline--fa fa-moon fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentcolor" d="M283.211 512c78.962.0 151.079-35.925 198.857-94.792 7.068-8.708-.639-21.43-11.562-19.35-124.203 23.654-238.262-71.576-238.262-196.954.0-72.222 38.662-138.635 101.498-174.394 9.686-5.512 7.25-20.197-3.756-22.23A258.156 258.156.0 00283.211.0c-141.309.0-256 114.511-256 256 0 141.309 114.511 256 256 256z"/></svg>
</span>
</span>
<span class="hidden dark:inline">
<span class="relative inline-block align-text-bottom icon"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="sun" class="svg-inline--fa fa-sun fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentcolor" d="M256 160c-52.9.0-96 43.1-96 96s43.1 96 96 96 96-43.1 96-96-43.1-96-96-96zm246.4 80.5-94.7-47.3 33.5-100.4c4.5-13.6-8.4-26.5-21.9-21.9l-100.4 33.5-47.4-94.8c-6.4-12.8-24.6-12.8-31 0l-47.3 94.7L92.7 70.8c-13.6-4.5-26.5 8.4-21.9 21.9l33.5 100.4-94.7 47.4c-12.8 6.4-12.8 24.6.0 31l94.7 47.3-33.5 100.5c-4.5 13.6 8.4 26.5 21.9 21.9l100.4-33.5 47.3 94.7c6.4 12.8 24.6 12.8 31 0l47.3-94.7 100.4 33.5c13.6 4.5 26.5-8.4 21.9-21.9l-33.5-100.4 94.7-47.3c13-6.5 13-24.7.2-31.1zm-155.9 106c-49.9 49.9-131.1 49.9-181 0s-49.9-131.1.0-181 131.1-49.9 181 0 49.9 131.1.0 181z"/></svg>
</span>
</span>
</button>
</div>
</div>
</footer>
</body>
</html>