gh-pages
jpanther 2022-02-03 00:52:04 +00:00
parent e90f9db06e
commit d5e6a89618
168 changed files with 19819 additions and 3116 deletions

View File

@ -1,74 +1,114 @@
<!doctype html><html lang=en-au><head>
<!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 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>404 Page not found &#183; Congo</title>
<meta name=title content="404 Page not found &#183; Congo">
<meta name=description content>
<meta name=description content="A powerful, lightweight theme for Hugo built with Tailwind CSS.">
<link rel=canonical href=https://jpanther.github.io/congo/404.html>
<link type=text/css rel=stylesheet href=/congo/css/schemes/congo.min.b48d6ba061dc77186a2524fb8aac5ac3823b2679a9299ca60325abbccc9c1764c884715f0ba24b4e2776cb3814df4af1f4c854b87207cd5d4c7a254da9b55751.css integrity="sha512-tI1roGHcdxhqJST7iqxaw4I7JnmpKZymAyWrvMycF2TIhHFfC6JLTid2yzgU30rx9MhUuHIHzV1MeiVNqbVXUQ==">
<link type=text/css rel=stylesheet href=/congo/css/compiled/main.min.51037225bb3c65887773b052da1e38f105db8f3d9aa6a34ba3c5c40c88fb309724f8cc5ed2871adc7e55dacab9b36c60ce7aa7a61dff2cc638f8b435c898d5a8.css integrity="sha512-UQNyJbs8ZYh3c7BS2h448QXbjz2apqNLo8XEDIj7MJck+Mxe0oca3H5V2sq5s2xgznqnph3/LMY4+LQ1yJjVqA==">
<script>function loadPreferredAppearance(){localStorage.preferredAppearance==="dark"||!("preferredAppearance"in localStorage)&&window.matchMedia("(prefers-color-scheme: dark)").matches?document.documentElement.classList.add("dark"):document.documentElement.classList.remove("dark")}function setPreferredAppearance(a){a=="default"?localStorage.removeItem("preferredAppearance"):localStorage.preferredAppearance=a,loadPreferredAppearance()}loadPreferredAppearance(),window.matchMedia("(prefers-color-scheme: dark)").addListener(loadPreferredAppearance)</script>
<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="404 Page not found">
<meta property="og:description" content>
<meta property="og:description" content="A powerful, lightweight theme for Hugo built with Tailwind CSS.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://jpanther.github.io/congo/404.html">
<meta property="og:url" content="https://jpanther.github.io/congo/404.html"><meta property="og:site_name" content="Congo">
<meta name=twitter:card content="summary">
<meta name=twitter:title content="404 Page not found">
<meta name=twitter:description content>
<meta name=generator content="Hugo 0.92.0">
<meta name=twitter:description content="A powerful, lightweight theme for Hugo built with Tailwind CSS.">
<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"><header class="flex justify-between py-6 font-semibold sm:items-center sm:py-10 text-neutral-900 dark:text-neutral">
<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:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" rel=me href=/congo/>Congo</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=/congo/docs/ title=Documentation>Docs</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=/congo/samples/ title="Content Samples">Samples</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=/congo/users/ title=Users>Users</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=https://github.com/jpanther/congo title>GitHub</a>
<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 class=flex-grow>
<main id=main-content class=relative>
<h1 class="mb-3 text-4xl font-extrabold">Page Not Found 😕</h1>
<p class="mt-8 mb-12 text-neutral-400 dark:text-neutral-500">
Error 404
</p>
<div class="prose dark:prose-light">
<div class="prose dark:prose-invert">
<p>It seems that the page you've requested does not exist.</p>
</div>
</main><footer class=py-10>
</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">
&copy;
2022
Congo
© 2022 Congo contributors
</p>
<p class="text-xs text-neutral-400 dark:text-neutral-600">
Powered by <a class="hover:underline hover:underline-primary-400 hover:text-primary-500" href=https://gohugo.io/ target=_blank rel="noopener noreferrer">Hugo</a> & <a class="hover:underline hover:underline-primary-400 hover:text-primary-500" href=https://git.io/hugo-congo target=_blank rel="noopener noreferrer">Congo</a>
<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>

View File

@ -1 +0,0 @@
:root{--color-neutral:#fff;--color-neutral-50:#fafafa;--color-neutral-100:#f4f4f5;--color-neutral-200:#e4e4e7;--color-neutral-300:#d4d4d8;--color-neutral-400:#a1a1aa;--color-neutral-500:#71717a;--color-neutral-600:#52525b;--color-neutral-700:#3f3f46;--color-neutral-800:#27272a;--color-neutral-900:#18181b;--color-primary-50:#f5f3ff;--color-primary-100:#ede9fe;--color-primary-200:#ddd6fe;--color-primary-300:#c4b5fd;--color-primary-400:#a78bfa;--color-primary-500:#8b5cf6;--color-primary-600:#7c3aed;--color-primary-700:#6d28d9;--color-primary-800:#5b21b6;--color-primary-900:#4c1d95;--color-secondary-50:#fdf4ff;--color-secondary-100:#fae8ff;--color-secondary-200:#f5d0fe;--color-secondary-300:#f0abfc;--color-secondary-400:#e879f9;--color-secondary-500:#d946ef;--color-secondary-600:#c026d3;--color-secondary-700:#a21caf;--color-secondary-800:#86198f;--color-secondary-900:#701a75}

View File

@ -1,15 +1,14 @@
<!doctype html><html lang=en-au><head>
<!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 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>Advanced Customisation &#183; Congo</title>
<meta name=title content="Advanced Customisation &#183; Congo">
<meta name=description content="Learn how to build Congo manually.">
<meta name=description content="A powerful, lightweight theme for Hugo built with Tailwind CSS.">
<link rel=canonical href=https://jpanther.github.io/congo/docs/advanced-customisation/>
<link type=text/css rel=stylesheet href=/congo/css/schemes/congo.min.b48d6ba061dc77186a2524fb8aac5ac3823b2679a9299ca60325abbccc9c1764c884715f0ba24b4e2776cb3814df4af1f4c854b87207cd5d4c7a254da9b55751.css integrity="sha512-tI1roGHcdxhqJST7iqxaw4I7JnmpKZymAyWrvMycF2TIhHFfC6JLTid2yzgU30rx9MhUuHIHzV1MeiVNqbVXUQ==">
<link type=text/css rel=stylesheet href=/congo/css/compiled/main.min.51037225bb3c65887773b052da1e38f105db8f3d9aa6a34ba3c5c40c88fb309724f8cc5ed2871adc7e55dacab9b36c60ce7aa7a61dff2cc638f8b435c898d5a8.css integrity="sha512-UQNyJbs8ZYh3c7BS2h448QXbjz2apqNLo8XEDIj7MJck+Mxe0oca3H5V2sq5s2xgznqnph3/LMY4+LQ1yJjVqA==">
<script>function loadPreferredAppearance(){localStorage.preferredAppearance==="dark"||!("preferredAppearance"in localStorage)&&window.matchMedia("(prefers-color-scheme: dark)").matches?document.documentElement.classList.add("dark"):document.documentElement.classList.remove("dark")}function setPreferredAppearance(a){a=="default"?localStorage.removeItem("preferredAppearance"):localStorage.preferredAppearance=a,loadPreferredAppearance()}loadPreferredAppearance(),window.matchMedia("(prefers-color-scheme: dark)").addListener(loadPreferredAppearance)</script>
<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>
@ -18,52 +17,61 @@
<meta property="og:description" content="Learn how to build Congo manually.">
<meta property="og:type" content="article">
<meta property="og:url" content="https://jpanther.github.io/congo/docs/advanced-customisation/"><meta property="article:section" content="docs">
<meta property="article:published_time" content="2020-08-09T00:00:00+00:00">
<meta property="article:modified_time" content="2020-08-09T00:00:00+00:00">
<meta property="article:published_time" content="2020-08-08T00:00:00+00:00">
<meta property="article:modified_time" content="2020-08-08T00:00:00+00:00"><meta property="og:site_name" content="Congo">
<meta name=twitter:card content="summary">
<meta name=twitter:title content="Advanced Customisation">
<meta name=twitter:description content="Learn how to build Congo manually.">
<script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","articleSection":"Documentation","name":"Advanced Customisation","headline":"Advanced Customisation","description":"Learn how to build Congo manually.","inLanguage":"en-AU","author":{"@type":"Person","name":"Congo"},"creator":{"@type":"Person","name":"Congo"},"copyrightHolder":"Congo","copyrightYear":"2020","dateCreated":"2020-08-09T00:00:00\u002b00:00","datePublished":"2020-08-09T00:00:00\u002b00:00","dateModified":"2020-08-09T00:00:00\u002b00:00","url":"https:\/\/jpanther.github.io\/congo\/docs\/advanced-customisation\/","keywords":["advanced","css","docs"],"wordCount":"913"}</script>
<meta name=generator content="Hugo 0.92.0">
<script type=application/ld+json>[{"@context":"https://schema.org","@type":"Article","articleSection":"Documentation","name":"Advanced Customisation","headline":"Advanced Customisation","description":"Learn how to build Congo manually.","abstract":"There are many ways you can make advanced changes to Congo.","inLanguage":"en-au","url":"https:\/\/jpanther.github.io\/congo\/docs\/advanced-customisation\/","author":{"@type":"Person","name":"Congo"},"copyrightYear":"2020","dateCreated":"2020-08-08T00:00:00\u002b00:00","datePublished":"2020-08-08T00:00:00\u002b00:00","dateModified":"2020-08-08T00:00:00\u002b00:00","keywords":["advanced","css","docs"],"mainEntityOfPage":"true","wordCount":"1519"}]</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"><header class="flex justify-between py-6 font-semibold sm:items-center sm:py-10 text-neutral-900 dark:text-neutral">
<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:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" rel=me href=/congo/>Congo</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=/congo/docs/ title=Documentation>Docs</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=/congo/samples/ title="Content Samples">Samples</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=/congo/users/ title=Users>Users</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=https://github.com/jpanther/congo title>GitHub</a>
<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 class=flex-grow>
<article class=max-w-prose>
<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:underline-neutral-300 dark:underline-neutral-600" href=/congo/>Welcome to Congo! :tada:</a><span class="px-1 text-primary-500">/</span>
<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:underline-neutral-300 dark:underline-neutral-600" href=/congo/docs/>Documentation</a><span class="px-1 text-primary-500">/</span>
<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:underline-neutral-300 dark:underline-neutral-600" href=/congo/docs/advanced-customisation/>Advanced Customisation</a><span class="px-1 text-primary-500">/</span>
<a class="hover:underline hover:decoration-neutral-300 dark:underline-neutral-600" href=/congo/docs/advanced-customisation/>Advanced Customisation</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">
@ -71,7 +79,7 @@ Advanced Customisation
</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">5 mins</span><span class="px-2 text-primary-500">&#183;</span>
<span title="Reading time">8 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/advanced-customisation.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>
@ -81,32 +89,69 @@ Advanced Customisation
</div>
</div>
</header>
<section class="prose dark:prose-light">
<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=#hugo-project-structure>Hugo project structure</a></li>
<li><a href=#colour-schemes>Colour schemes</a></li>
<li><a href=#overriding-the-stylesheet>Overriding the stylesheet</a>
<ul>
<li><a href=#adjusting-the-font-size>Adjusting the font size</a></li>
</ul>
</li>
<li><a href=#building-the-theme-css-from-source>Building the theme CSS from source</a>
<ul>
<li><a href=#tailwind-configuration>Tailwind configuration</a></li>
<li><a href=#project-structure>Project structure</a></li>
<li><a href=#install-dependencies>Install dependencies</a></li>
<li><a href=#run-the-tailwind-compiler>Run the Tailwind compiler</a></li>
<li><a href=#make-a-build-script>Make a build script</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</details>
</div>
</div>
<div class="min-w-0 min-h-0 max-w-prose">
<p>There are many ways you can make advanced changes to Congo. Read below to learn more about what can be customised and the best way of achieving your desired result.</p>
<p>If you need further advice, post your questions on <a href=https://github.com/jpanther/congo/discussions>GitHub Discussions</a>.</p>
<h2 id=hugo-project-structure>Hugo project structure <a class=heading-anchor href=#hugo-project-structure aria-label=Anchor>#</a></h2>
<h2 id=hugo-project-structure class="relative group">Hugo project structure <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=#hugo-project-structure aria-label=Anchor>#</a></span></h2>
<p>Before leaping into it, first a quick note about <a href=https://gohugo.io/getting-started/directory-structure/>Hugo project structure</a> and best practices for managing your content and theme customisations.</p>
<div class="flex px-4 py-3 rounded-md bg-primary-100 dark:bg-primary-900">
<span class="pr-3 text-primary-400">
<span class="ltr:pr-3 rtl:pl-3 text-primary-400">
<span class="relative inline-block align-text-bottom icon"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="exclamation-triangle" class="svg-inline--fa fa-exclamation-triangle fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentcolor" d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937.0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154.0l239.94 416.028zM288 354c-25.405.0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346 7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373.0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884.0-12.356 5.78-11.981 12.654z"/></svg>
</span>
</span>
<span class="no-prose dark:text-neutral-300"><strong>In summary:</strong> Never directly edit the theme files. Only make customisations in your Hugo project&rsquo;s sub-directories, not in the themes directory itself.</span>
<span class=dark:text-neutral-300><strong>In summary:</strong> Never directly edit the theme files. Only make customisations in your Hugo project&rsquo;s sub-directories, not in the themes directory itself.</span>
</div>
<p>Congo is built to take advantage of all the standard Hugo practices. It is designed to allow all aspects of the theme to be customised and overriden without changing any of the core theme files. This allows for a seamless upgrade experience while giving you total control over the look and feel of your website.</p>
<p>In order to achieve this, you should never manually adjust any of the theme files directly. Whether you install using Hugo modules, as a git submodule or manually include the theme in your <code>themes/</code> directory, you should always leave these files intact.</p>
<p>The correct way to adjust any theme behaviour is by overriding files using Hugo&rsquo;s powerful <a href=https://gohugo.io/templates/lookup-order/>file lookup order</a>. In summary, the lookup order ensures any files you include in your project directory will automatically take precedence over any theme files.</p>
<p>For example, if you wanted to override the main article template in Congo, you can simply create your own <code>layouts/_default/single.html</code> file and place it in the root of your project. This file will then override the <code>single.html</code> from the theme without ever changing the theme itself. This works for any theme files - HTML templates, partials, shortcodes, config files, data, assets, etc.</p>
<p>As long as you follow this simple practice, you will always be able to update the theme (or test different theme versions) without worrying that you will lose any of your custom changes.</p>
<h2 id=colour-schemes>Colour schemes <a class=heading-anchor href=#colour-schemes aria-label=Anchor>#</a></h2>
<h2 id=colour-schemes class="relative group">Colour schemes <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=#colour-schemes aria-label=Anchor>#</a></span></h2>
<p>Congo ships with a number of colour schemes out of the box. To change the basic colour scheme, you can set the <code>colorScheme</code> theme parameter. Refer to the <a href=https://jpanther.github.io/congo/docs/getting-started/#colour-schemes>Getting Started</a> section to learn more about the built-in schemes.</p>
<p>In addition to the default schemes, you can also create your own and re-style the entire website to your liking. Schemes are created by by placing a <code>&lt;scheme-name>.css</code> file in the <code>assets/css/schemes/</code> folder. Once the file is created, simply refer to it by name in the theme configuration.</p>
<p>Congo defines a three-colour palette that is used throughout the theme. The three colours are defined as <code>neutral</code>, <code>primary</code> and <code>secondary</code> variants, each containing ten shades of colour.</p>
<p>Due to the way Tailwind CSS 3.0 calculates colour values with opacity, the colours specified in the scheme need to <a href=https://github.com/adamwathan/tailwind-css-variable-text-opacity-demo>conform to a particular format</a> by providing the red, green and blue colour values.</p>
<div class=highlight><pre tabindex=0 class=chroma><code class=language-css data-lang=css><span class=p>:</span><span class=nd>root</span> <span class=p>{</span>
<span class=nv>--color-primary-500</span><span class=p>:</span> <span class=mi>139</span><span class=p>,</span> <span class=mi>92</span><span class=p>,</span> <span class=mi>246</span><span class=p>;</span>
<span class=p>}</span>
</code></pre></div><p>This example defines a CSS variable for the <code>primary-500</code> colour with a red value of <code>139</code>, green value of <code>92</code> and blue value of <code>246</code>.</p>
<p>Use one of the existing theme stylesheets as a template. You are free to define your own colours, but for some inspiration, check out the official <a href=https://tailwindcss.com/docs/customizing-colors#color-palette-reference>Tailwind colour palette reference</a>.</p>
<h2 id=overriding-the-stylesheet>Overriding the stylesheet <a class=heading-anchor href=#overriding-the-stylesheet aria-label=Anchor>#</a></h2>
<h2 id=overriding-the-stylesheet class="relative group">Overriding the stylesheet <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=#overriding-the-stylesheet aria-label=Anchor>#</a></span></h2>
<p>Sometimes you need to add a custom style to style your own HTML elements. Congo provides for this scenario by allowing you to override the default styles in your own CSS stylesheet. Simply create a <code>custom.css</code> file in your project&rsquo;s <code>assets/css/</code> folder.</p>
<p>The <code>custom.css</code> file will be minified by Hugo and loaded automatically after all the other theme styles which means anything in your custom file will take precedence over the defaults.</p>
<h3 id=adjusting-the-font-size>Adjusting the font size <a class=heading-anchor href=#adjusting-the-font-size aria-label=Anchor>#</a></h3>
<h3 id=adjusting-the-font-size class="relative group">Adjusting the font size <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=#adjusting-the-font-size aria-label=Anchor>#</a></span></h3>
<p>Changing the font size of your website is one example of overriding the default stylesheet. Congo makes this simple as it uses scaled font sizes throughout the theme which are derived from the base HTML font size. By default, Tailwind sets the default size to <code>12pt</code>, but it can be changed to whatever value you prefer.</p>
<p>Create a <code>custom.css</code> file using the <a href=#overriding-the-stylesheet>instructions above</a> and add the following CSS declaration:</p>
<div class=highlight><pre tabindex=0 class=chroma><code class=language-css data-lang=css><span class=c>/* Increase the default font size */</span>
@ -114,72 +159,165 @@ Advanced Customisation
<span class=k>font-size</span><span class=p>:</span> <span class=mi>13</span><span class=kt>pt</span><span class=p>;</span>
<span class=p>}</span>
</code></pre></div><p>Simply by changing this one value, all the font sizes on your website will be adjusted to match this new size. Therefore, to increase the overall font sizes used, make the value greater than <code>12pt</code>. Similarly, to decrease the font sizes, make the value less than <code>12pt</code>.</p>
<h2 id=building-from-source>Building from source <a class=heading-anchor href=#building-from-source aria-label=Anchor>#</a></h2>
<p>If you&rsquo;d like to make a major change, you can take advantage of Tailwind CSS&rsquo;s JIT compiler and rebuild the entire theme CSS from scratch.</p>
<h2 id=building-the-theme-css-from-source class="relative group">Building the theme CSS from source <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=#building-the-theme-css-from-source aria-label=Anchor>#</a></span></h2>
<p>If you&rsquo;d like to make a major change, you can take advantage of Tailwind CSS&rsquo;s JIT compiler and rebuild the entire theme CSS from scratch. This is useful if you want to adjust the Tailwind configuration or add extra Tailwind classes to the main stylesheet.</p>
<div class="flex px-4 py-3 rounded-md bg-primary-100 dark:bg-primary-900">
<span class="pr-3 text-primary-400">
<span class="ltr:pr-3 rtl:pl-3 text-primary-400">
<span class="relative inline-block align-text-bottom icon"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="exclamation-triangle" class="svg-inline--fa fa-exclamation-triangle fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentcolor" d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937.0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154.0l239.94 416.028zM288 354c-25.405.0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346 7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373.0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884.0-12.356 5.78-11.981 12.654z"/></svg>
</span>
</span>
<span class="no-prose dark:text-neutral-300"><strong>Note:</strong> Building the theme manually is intended for advanced users.</span>
<span class=dark:text-neutral-300><strong>Note:</strong> Building the theme manually is intended for advanced users.</span>
</div>
<p>Change into the <code>themes/congo/</code> folder and install the project dependencies.</p>
<div class=highlight><pre tabindex=0 class=chroma><code class=language-bash data-lang=bash>npm install
</code></pre></div><p>Once installed, you can edit the <code>themes/congo/tailwind.config.js</code> to change the styles that are applied throughout the theme. You can also adjust specific styles in <code>themes/congo/assets/css/main.css</code>.</p>
<p>To allow for easy theme colour changes, Congo defines a three-colour palette that is used throughout the theme. The three colours are defined as <code>neutral</code>, <code>primary</code> and <code>secondary</code> variants, each containing ten shades of colour. In order to change the colour across the entire theme, simply edit the <code>tailwind.config.js</code> file accordingly.</p>
<p>For a full list of colours available, and their corresponding configuration values, see the official <a href=https://tailwindcss.com/docs/customizing-colors#color-palette-reference>Tailwind docs</a>.</p>
<p>After editing the configuration, you need to rebuild the theme&rsquo;s stylesheets. This will run the Tailwind JIT compiler in watch mode which aids with testing style changes.</p>
<div class=highlight><pre tabindex=0 class=chroma><code class=language-bash data-lang=bash>npm run dev
</code></pre></div><p>This will automatically output a CSS file to <code>/themes/congo/assets/css/compiled/main.css</code>.</p>
<div class="flex px-4 py-3 rounded-md bg-primary-100 dark:bg-primary-900">
<span class="pr-3 text-primary-400">
<span class="relative inline-block align-text-bottom icon"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="exclamation-triangle" class="svg-inline--fa fa-exclamation-triangle fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentcolor" d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937.0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154.0l239.94 416.028zM288 354c-25.405.0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346 7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373.0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884.0-12.356 5.78-11.981 12.654z"/></svg>
</span>
</span>
<span class="no-prose dark:text-neutral-300"><strong>Note:</strong> You should not make manual edits to the compiled CSS file.</span>
<p>Let&rsquo;s step through how building the Tailwind CSS works.</p>
<h3 id=tailwind-configuration class="relative group">Tailwind configuration <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=#tailwind-configuration aria-label=Anchor>#</a></span></h3>
<p>In order to generate a CSS file that only contains the Tailwind classes that are actually being used the JIT compiler needs to scan through all the HTML templates and Markdown content files to check which styles are present in the markup. The compiler does this by looking at the <code>tailwind.config.js</code> file which is included in the root of the theme directory:</p>
<div class=highlight><pre tabindex=0 class=chroma><code class=language-js data-lang=js><span class=c1>// themes/congo/tailwind.config.js
</span><span class=c1></span>
<span class=nx>module</span><span class=p>.</span><span class=nx>exports</span> <span class=o>=</span> <span class=p>{</span>
<span class=nx>content</span><span class=o>:</span> <span class=p>[</span>
<span class=s2>&#34;./layouts/**/*.html&#34;</span><span class=p>,</span>
<span class=s2>&#34;./content/**/*.{html,md}&#34;</span><span class=p>,</span>
<span class=s2>&#34;./themes/congo/layouts/**/*.html&#34;</span><span class=p>,</span>
<span class=s2>&#34;./themes/congo/content/**/*.{html,md}&#34;</span><span class=p>,</span>
<span class=p>],</span>
<span class=c1>// and more...
</span><span class=c1></span><span class=p>};</span>
</code></pre></div><p>This default configuration has been included with these content paths so that you can easily generate your own CSS file without needing to modify it, provided you follow a particular project structure. Namely, <strong>you have to include Congo in your project as a subdirectory at <code>themes/congo/</code></strong>. This means you cannot easily use Hugo Modules to install the theme and you must go down either the git submodule (recommended) or manual install routes. The <a href=https://jpanther.github.io/congo/docs/installation/>Installation docs</a> explain how to install the theme using either of these methods.</p>
<h3 id=project-structure class="relative group">Project structure <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=#project-structure aria-label=Anchor>#</a></span></h3>
<p>In order to take advantage of the default configuration, your project should look something like this&mldr;</p>
<div class=highlight><pre tabindex=0 class=chroma><code class=language-shell data-lang=shell>.
├── assets
│ └── css
│ └── compiled
│ └── main.css <span class=c1># this is the file we will generate</span>
├── config <span class=c1># site config</span>
│ └── _default
├── content <span class=c1># site content</span>
│ ├── _index.md
│ ├── projects
│ │ └── _index.md
│ └── blog
│ └── _index.md
├── layouts <span class=c1># custom layouts for your site</span>
│ ├── partials
│ │ └── extend-article-link.html
│ ├── projects
│ │ └── list.html
│ └── shortcodes
│ └── disclaimer.html
└── themes
└── congo <span class=c1># git submodule or manual theme install</span>
</code></pre></div><p>This example structure adds a new <code>projects</code> content type with its own custom layout along with a custom shortcode and extended partial. Provided the project follows this structure, all that&rsquo;s required is to recompile the <code>main.css</code> file.</p>
<h3 id=install-dependencies class="relative group">Install dependencies <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=#install-dependencies aria-label=Anchor>#</a></span></h3>
<p>In order for this to work you&rsquo;ll need to change into the <code>themes/congo/</code> directory and install the project dependencies. You&rsquo;ll need <a href=https://docs.npmjs.com/cli/v7/configuring-npm/install>npm</a> on your local machine for this step.</p>
<div class=highlight><pre tabindex=0 class=chroma><code class=language-shell data-lang=shell><span class=nb>cd</span> themes/congo
npm install
</code></pre></div><h3 id=run-the-tailwind-compiler class="relative group">Run the Tailwind compiler <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=#run-the-tailwind-compiler aria-label=Anchor>#</a></span></h3>
<p>With the dependencies installed all that&rsquo;s left is to use <a href=https://v2.tailwindcss.com/docs/installation#using-tailwind-cli>Tailwind CLI</a> to invoke the JIT compiler. Navigate back to the root of your Hugo project and issue the following command:</p>
<div class=highlight><pre tabindex=0 class=chroma><code class=language-shell data-lang=shell><span class=nb>cd</span> ../..
./themes/congo/node_modules/tailwindcss/lib/cli.js -c ./themes/congo/tailwind.config.js -i ./themes/congo/assets/css/main.css -o ./assets/css/compiled/main.css --jit
</code></pre></div><p>It&rsquo;s a bit of an ugly command due to the paths involved but essentially you&rsquo;re calling Tailwind CLI and passing it the location of the Tailwind config file (the one we looked at above), where to find the theme&rsquo;s <code>main.css</code> file and then where you want the compiled CSS file to be placed (it&rsquo;s going into the <code>assets/css/compiled/</code> folder of your Hugo project).</p>
<p>The config file will automatically inspect all the content and layouts in your project as well as all those in the theme and build a new CSS file that contains all the CSS required for your website. Due to the way Hugo handles file hierarchy, this file in your project will now automatically override the one that comes with the theme.</p>
<p>Each time you make a change to your layouts and need new Tailwind CSS styles, you can simply re-run the command and generate the new CSS file. You can also add <code>-w</code> to the end of the command to run the JIT compiler in watch mode.</p>
<h3 id=make-a-build-script class="relative group">Make a build script <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=#make-a-build-script aria-label=Anchor>#</a></span></h3>
<p>To fully complete this solution, you can simplify this whole process by adding aliases for these commands, or do what I do and add a <code>package.json</code> to the root of your project which contains the necessary scripts&mldr;</p>
<div class=highlight><pre tabindex=0 class=chroma><code class=language-js data-lang=js><span class=c1>// package.json
</span><span class=c1></span>
<span class=p>{</span>
<span class=s2>&#34;name&#34;</span><span class=o>:</span> <span class=s2>&#34;my-website&#34;</span><span class=p>,</span>
<span class=s2>&#34;version&#34;</span><span class=o>:</span> <span class=s2>&#34;1.0.0&#34;</span><span class=p>,</span>
<span class=s2>&#34;description&#34;</span><span class=o>:</span> <span class=s2>&#34;&#34;</span><span class=p>,</span>
<span class=s2>&#34;scripts&#34;</span><span class=o>:</span> <span class=p>{</span>
<span class=s2>&#34;server&#34;</span><span class=o>:</span> <span class=s2>&#34;hugo server -b http://localhost -p 8000&#34;</span><span class=p>,</span>
<span class=s2>&#34;dev&#34;</span><span class=o>:</span> <span class=s2>&#34;NODE_ENV=development ./themes/congo/node_modules/tailwindcss/lib/cli.js -c ./themes/congo/tailwind.config.js -i ./themes/congo/assets/css/main.css -o ./assets/css/compiled/main.css --jit -w&#34;</span><span class=p>,</span>
<span class=s2>&#34;build&#34;</span><span class=o>:</span> <span class=s2>&#34;NODE_ENV=production ./themes/congo/node_modules/tailwindcss/lib/cli.js -c ./themes/congo/tailwind.config.js -i ./themes/congo/assets/css/main.css -o ./assets/css/compiled/main.css --jit&#34;</span>
<span class=p>},</span>
<span class=c1>// and more...
</span><span class=c1></span><span class=p>}</span>
</code></pre></div><p>Now when you want to work on designing your site, you can invoke <code>npm run dev</code> and the compiler will run in watch mode. When you&rsquo;re ready to deploy, run <code>npm run build</code> and you&rsquo;ll get a clean Tailwind CSS build.</p>
<p>🙋‍♀️ If you need help, feel free to ask a question on <a href=https://github.com/jpanther/congo/discussions>GitHub Discussions</a>.</p>
</div>
<p>Now whenever you make a change, the CSS files will be rebuilt automatically. This mode is useful to run when using <code>hugo server</code> to preview your site during development. Asset files will be minified by Hugo at site build time.</p>
</section>
<footer class=pt-8>
<div class="pt-8 article-pagination">
<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 href=/congo/docs/partials/>
<span class="mr-3 article-pagination-direction">&larr;</span>
<a class="flex group" href=/congo/docs/content-examples/>
<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="article-pagination-title mt-[0.1rem] leading-6">Partials</span>
<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>
</a>
</span>
<span>
<a class="flex text-right" href=/congo/docs/hosting-deployment/>
<a class="flex text-right group" href=/congo/docs/hosting-deployment/>
<span class="flex flex-col">
<span class="article-pagination-title mt-[0.1rem] leading-6">Hosting & Deployment</span>
<span class="mt-[0.1rem] leading-6 group-hover:underline group-hover:decoration-primary-500">Hosting & Deployment</span>
<span class="mt-[0.1rem] text-xs text-neutral-500 dark:text-neutral-400">
</span>
</span>
<span class="ml-3 article-pagination-direction">&rarr;</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>
</main><footer class=py-10>
<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">
&copy;
2022
Congo
© 2022 Congo contributors
</p>
<p class="text-xs text-neutral-400 dark:text-neutral-600">
Powered by <a class="hover:underline hover:underline-primary-400 hover:text-primary-500" href=https://gohugo.io/ target=_blank rel="noopener noreferrer">Hugo</a> & <a class="hover:underline hover:underline-primary-400 hover:text-primary-500" href=https://git.io/hugo-congo target=_blank rel="noopener noreferrer">Congo</a>
<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>

View File

@ -1,15 +1,14 @@
<!doctype html><html lang=en-au><head>
<!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 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>Configuration &#183; Congo</title>
<meta name=title content="Configuration &#183; Congo">
<meta name=description content="All the configuration variables available in 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/configuration/>
<link type=text/css rel=stylesheet href=/congo/css/schemes/congo.min.b48d6ba061dc77186a2524fb8aac5ac3823b2679a9299ca60325abbccc9c1764c884715f0ba24b4e2776cb3814df4af1f4c854b87207cd5d4c7a254da9b55751.css integrity="sha512-tI1roGHcdxhqJST7iqxaw4I7JnmpKZymAyWrvMycF2TIhHFfC6JLTid2yzgU30rx9MhUuHIHzV1MeiVNqbVXUQ==">
<link type=text/css rel=stylesheet href=/congo/css/compiled/main.min.51037225bb3c65887773b052da1e38f105db8f3d9aa6a34ba3c5c40c88fb309724f8cc5ed2871adc7e55dacab9b36c60ce7aa7a61dff2cc638f8b435c898d5a8.css integrity="sha512-UQNyJbs8ZYh3c7BS2h448QXbjz2apqNLo8XEDIj7MJck+Mxe0oca3H5V2sq5s2xgznqnph3/LMY4+LQ1yJjVqA==">
<script>function loadPreferredAppearance(){localStorage.preferredAppearance==="dark"||!("preferredAppearance"in localStorage)&&window.matchMedia("(prefers-color-scheme: dark)").matches?document.documentElement.classList.add("dark"):document.documentElement.classList.remove("dark")}function setPreferredAppearance(a){a=="default"?localStorage.removeItem("preferredAppearance"):localStorage.preferredAppearance=a,loadPreferredAppearance()}loadPreferredAppearance(),window.matchMedia("(prefers-color-scheme: dark)").addListener(loadPreferredAppearance)</script>
<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>
@ -19,51 +18,60 @@
<meta property="og:type" content="article">
<meta property="og:url" content="https://jpanther.github.io/congo/docs/configuration/"><meta property="article:section" content="docs">
<meta property="article:published_time" content="2020-08-14T00:00:00+00:00">
<meta property="article:modified_time" content="2020-08-14T00:00:00+00:00">
<meta property="article:modified_time" content="2020-08-14T00:00:00+00:00"><meta property="og:site_name" content="Congo">
<meta name=twitter:card content="summary">
<meta name=twitter:title content="Configuration">
<meta name=twitter:description content="All the configuration variables available in Congo.">
<script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","articleSection":"Documentation","name":"Configuration","headline":"Configuration","description":"All the configuration variables available in Congo.","inLanguage":"en-AU","author":{"@type":"Person","name":"Congo"},"creator":{"@type":"Person","name":"Congo"},"copyrightHolder":"Congo","copyrightYear":"2020","dateCreated":"2020-08-14T00:00:00\u002b00:00","datePublished":"2020-08-14T00:00:00\u002b00:00","dateModified":"2020-08-14T00:00:00\u002b00:00","url":"https:\/\/jpanther.github.io\/congo\/docs\/configuration\/","keywords":["config","docs"],"wordCount":"1323"}</script>
<meta name=generator content="Hugo 0.92.0">
<script type=application/ld+json>[{"@context":"https://schema.org","@type":"Article","articleSection":"Documentation","name":"Configuration","headline":"Configuration","description":"All the configuration variables available in Congo.","abstract":"Congo is a highly customisable theme and uses some of the latest Hugo features to simplify how it is configured.","inLanguage":"en-au","url":"https:\/\/jpanther.github.io\/congo\/docs\/configuration\/","author":{"@type":"Person","name":"Congo"},"copyrightYear":"2020","dateCreated":"2020-08-14T00:00:00\u002b00:00","datePublished":"2020-08-14T00:00:00\u002b00:00","dateModified":"2020-08-14T00:00:00\u002b00:00","keywords":["config","docs"],"mainEntityOfPage":"true","wordCount":"1785"}]</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"><header class="flex justify-between py-6 font-semibold sm:items-center sm:py-10 text-neutral-900 dark:text-neutral">
<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:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" rel=me href=/congo/>Congo</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=/congo/docs/ title=Documentation>Docs</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=/congo/samples/ title="Content Samples">Samples</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=/congo/users/ title=Users>Users</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=https://github.com/jpanther/congo title>GitHub</a>
<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 class=flex-grow>
<article class=max-w-prose>
<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:underline-neutral-300 dark:underline-neutral-600" href=/congo/>Welcome to Congo! :tada:</a><span class="px-1 text-primary-500">/</span>
<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:underline-neutral-300 dark:underline-neutral-600" href=/congo/docs/>Documentation</a><span class="px-1 text-primary-500">/</span>
<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:underline-neutral-300 dark:underline-neutral-600" href=/congo/docs/configuration/>Configuration</a><span class="px-1 text-primary-500">/</span>
<a class="hover:underline hover:decoration-neutral-300 dark:underline-neutral-600" href=/congo/docs/configuration/>Configuration</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">
@ -71,7 +79,7 @@ Configuration
</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">7 mins</span><span class="px-2 text-primary-500">&#183;</span>
<span title="Reading time">9 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/configuration.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>
@ -81,7 +89,30 @@ Configuration
</div>
</div>
</header>
<section class="prose dark:prose-light">
<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=#site-configuration>Site configuration</a></li>
<li><a href=#language-and-i18n>Language and i18n</a>
<ul>
<li><a href=#configuration>Configuration</a></li>
</ul>
</li>
<li><a href=#theme-parameters>Theme parameters</a></li>
</ul>
</nav>
</div>
</details>
</div>
</div>
<div class="min-w-0 min-h-0 max-w-prose">
<p>Congo is a highly customisable theme and uses some of the latest Hugo features to simplify how it is configured.</p>
<p>The theme ships with a default configuration that gets you up and running with a basic blog or static website.</p>
<blockquote>
@ -89,21 +120,20 @@ Configuration
</blockquote>
<p>The default theme configuration is documented in each file so you can freely adjust the settings to meet your needs.</p>
<div class="flex px-4 py-3 rounded-md bg-primary-100 dark:bg-primary-900">
<span class="pr-3 text-primary-400">
<span class="ltr:pr-3 rtl:pl-3 text-primary-400">
<span class="relative inline-block align-text-bottom icon"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="exclamation-triangle" class="svg-inline--fa fa-exclamation-triangle fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentcolor" d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937.0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154.0l239.94 416.028zM288 354c-25.405.0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346 7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373.0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884.0-12.356 5.78-11.981 12.654z"/></svg>
</span>
</span>
<span class="no-prose dark:text-neutral-300">As outlined in the <a href=https://jpanther.github.io/congo/docs/installation/#set-up-theme-configuration-files>installation instructions</a>, you should adjust your theme configuration by modifying the files in the <code>config/_default/</code> folder of your Hugo project and delete the <code>config.toml</code> file in your project root.</span>
<span class=dark:text-neutral-300>As outlined in the <a href=https://jpanther.github.io/congo/docs/installation/#set-up-theme-configuration-files>installation instructions</a>, you should adjust your theme configuration by modifying the files in the <code>config/_default/</code> folder of your Hugo project and delete the <code>config.toml</code> file in your project root.</span>
</div>
<h2 id=site-configuration>Site configuration <a class=heading-anchor href=#site-configuration aria-label=Anchor>#</a></h2>
<h2 id=site-configuration class="relative group">Site configuration <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=#site-configuration aria-label=Anchor>#</a></span></h2>
<p>Standard Hugo configuration variables are respected throughout the theme, however there are some specific things that should be configured for the best experience.</p>
<p>The site configuration is managed through the <code>config/_default/config.toml</code> file. The table below outlines all the settings that the Congo takes advantage of.</p>
<p>Note that the variable names provided in this table use dot notation to simplify the TOML data structure (ie. <code>author.name</code> refers to <code>[author] name</code>).</p>
<p>Note that the variable names provided in this table use dot notation to simplify the TOML data structure (ie. <code>outputs.home</code> refers to <code>[outputs] home</code>).</p>
<table>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
@ -111,98 +141,196 @@ Configuration
<tbody>
<tr>
<td><code>theme</code></td>
<td>string</td>
<td><code>"congo"</code></td>
<td>When using Hugo Modules this config value should be removed. For all other installation types, this must be set to <code>congo</code> for the theme to function.</td>
</tr>
<tr>
<td><code>baseURL</code></td>
<td>string</td>
<td><em>Not set</em></td>
<td>The URL to the root of the website.</td>
</tr>
<tr>
<td><code>languageCode</code></td>
<td>string</td>
<td><code>"en"</code></td>
<td>The language of the website for site metadata purposes. It can be a top-level language (ie. <code>en</code>) or a sub-variant (ie. <code>en-AU</code>)."</td>
</tr>
<tr>
<td><code>defaultContentLanguage</code></td>
<td>string</td>
<td><code>"en"</code></td>
<td>This value determines the language of theme components."</td>
</tr>
<tr>
<td><code>title</code></td>
<td>string</td>
<td><code>"Congo"</code></td>
<td>The title of the website. This will be displayed in the site header and footer.</td>
</tr>
<tr>
<td><code>copyright</code></td>
<td>string</td>
<td><em>Not set</em></td>
<td>A Markdown string containing the copyright message to be displayed in the site footer. If none is provided, Congo will automatically generate a copyright string using the site <code>title</code>.</td>
<td>This value determines the default language of theme components and content. Refer to the <a href=#language-and-i18n>language and i18n</a> section below for supported language codes.</td>
</tr>
<tr>
<td><code>enableRobotsTXT</code></td>
<td>boolean</td>
<td><code>true</code></td>
<td>When enabled a <code>robots.txt</code> file will be created in the site root that allows search engines to crawl the entire site. Set to <code>false</code> if you wish to provide your own file.</td>
</tr>
<tr>
<td><code>paginate</code></td>
<td><code>10</code></td>
<td>The number of articles listed on each page of the article listing.</td>
</tr>
<tr>
<td><code>summaryLength</code></td>
<td>integer</td>
<td><code>0</code></td>
<td>The number of words that are used to generate the article summary when one is not provided in the <a href=https://jpanther.github.io/congo/docs/front-matter/>front matter</a>. A value of <code>0</code> will use the first sentence. This value has no effect when summaries are hidden.</td>
</tr>
<tr>
<td><code>author.name</code></td>
<td>string</td>
<td><em>Not set</em></td>
<td>The author&rsquo;s name. This will be displayed in article footers, and on the homepage when the profile layout is used.</td>
</tr>
<tr>
<td><code>author.image</code></td>
<td>string</td>
<td><em>Not set</em></td>
<td>Path to the image file of the author. The image should be a 1:1 aspect ratio and placed in the site&rsquo;s <code>static/</code> folder.</td>
</tr>
<tr>
<td><code>author.bio</code></td>
<td>string</td>
<td><em>Not set</em></td>
<td>A Markdown string containing the author&rsquo;s bio. It will be displayed in article footers.</td>
</tr>
<tr>
<td><code>author.links</code></td>
<td>array of objects</td>
<td><em>Not set</em></td>
<td>The links to display alongside the author&rsquo;s details. The config file contains example links which can simply be uncommented to enable. The order that the links are displayed is determined by the order they appear in the array. Custom links can be added by providing corresponding SVG icon assets in <code>assets/icons/</code>.</td>
<td><code>outputs.home</code></td>
<td><code>["HTML", "RSS", "JSON"]</code></td>
<td>The output formats that are generated for the site. Congo requires HTML, RSS and JSON for all theme components to work correctly.</td>
</tr>
<tr>
<td><code>permalinks</code></td>
<td></td>
<td><em>Not set</em></td>
<td>Refer to the <a href=https://gohugo.io/content-management/urls/#permalinks>Hugo docs</a> for permalink configuration.</td>
</tr>
<tr>
<td><code>taxonomies</code></td>
<td></td>
<td><em>Not set</em></td>
<td>Refer to the <a href=https://jpanther.github.io/congo/docs/getting-started/#organising-content>Organising content</a> section for taxonomy configuration.</td>
</tr>
</tbody>
</table>
<h2 id=theme-parameters>Theme parameters <a class=heading-anchor href=#theme-parameters aria-label=Anchor>#</a></h2>
<h2 id=language-and-i18n class="relative group">Language and i18n <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=#language-and-i18n aria-label=Anchor>#</a></span></h2>
<p>Congo is optimised for full multilingual websites and theme assets are translated into several languages out of the box. The language configuration allows you to generate multiple versions of your content to provide a customised experience to your visitors in their native language.</p>
<p>The theme currently supports the following languages by default:</p>
<table>
<thead>
<tr>
<th>Language</th>
<th>Code</th>
</tr>
</thead>
<tbody>
<tr>
<td>🇬🇧 English</td>
<td><code>en</code></td>
</tr>
<tr>
<td>🇨🇳 Chinese</td>
<td><code>zh</code></td>
</tr>
<tr>
<td>🇫🇷 French</td>
<td><code>fr</code></td>
</tr>
<tr>
<td>🇩🇪 German</td>
<td><code>de</code></td>
</tr>
<tr>
<td>🇧🇷 Portuguese (Brazil)</td>
<td><code>pt-br</code></td>
</tr>
<tr>
<td>🇪🇸 Spanish (Spain)</td>
<td><code>es</code></td>
</tr>
<tr>
<td>🇹🇷 Turkish</td>
<td><code>tr</code></td>
</tr>
</tbody>
</table>
<p>The default translations can be overridden by creating a custom file in <code>i18n/[code].yaml</code> that contains the translation strings. You can also use this method to add new languages. If you&rsquo;d like to share a new translation with the community, please <a href=https://github.com/jpanther/congo/pulls>open a pull request</a>.</p>
<h3 id=configuration class="relative group">Configuration <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=#configuration aria-label=Anchor>#</a></span></h3>
<p>In order to be as flexible as possible, a language configuration file needs to be created for each language on the website. By default Congo includes an English language configuration at <code>config/_default/languages.en.toml</code>.</p>
<p>The default file can be used as a template to create additional languages, or renamed if you wish to author your website in a language other than English. Simply name the file using the format <code>languages.[language-code].toml</code>.</p>
<div class="flex px-4 py-3 rounded-md bg-primary-100 dark:bg-primary-900">
<span class="ltr:pr-3 rtl:pl-3 text-primary-400">
<span class="relative inline-block align-text-bottom icon"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="exclamation-triangle" class="svg-inline--fa fa-exclamation-triangle fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentcolor" d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937.0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154.0l239.94 416.028zM288 354c-25.405.0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346 7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373.0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884.0-12.356 5.78-11.981 12.654z"/></svg>
</span>
</span>
<span class=dark:text-neutral-300><strong>Note:</strong> Ensure the <code>defaultContentLanguage</code> parameter in the <a href=#site-configuration>site configuration</a> matches the language code in your language config filename.</span>
</div>
<table>
<thead>
<tr>
<th>Name</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>languageCode</code></td>
<td><code>"en"</code></td>
<td>The Hugo language code for this file. It can be a top-level language (ie. <code>en</code>) or a sub-variant (ie. <code>en-au</code>) and should match the language code in the filename. Hugo expects this value to always be in lowercase. For proper HTML compliance, set the <code>isoCode</code> parameter which is case-sensitive.</td>
</tr>
<tr>
<td><code>languageName</code></td>
<td><code>"English"</code></td>
<td>The name of the language.</td>
</tr>
<tr>
<td><code>displayName</code></td>
<td><code>"EN"</code></td>
<td>The name used when the language appears on the website.</td>
</tr>
<tr>
<td><code>isoCode</code></td>
<td><code>"en"</code></td>
<td>The ISO language code for HTML metadata purposes. It can be a top-level language (ie. <code>en</code>) or a sub-variant (ie. <code>en-AU</code>).</td>
</tr>
<tr>
<td><code>weight</code></td>
<td><code>1</code></td>
<td>The weight determines the order of languages when building multilingual sites.</td>
</tr>
<tr>
<td><code>rtl</code></td>
<td><code>false</code></td>
<td>Whether or not this is a RTL language. Set to <code>true</code> to reflow content from right-to-left. Congo fully supports using RTL and LTR languages at the same time and will dynamically adjust to both.</td>
</tr>
<tr>
<td><code>dateFormat</code></td>
<td><code>"2 January 2006"</code></td>
<td>How dates are formatted in this language. Refer to the <a href=https://gohugo.io/functions/format/#gos-layout-string>Hugo docs</a> for acceptable formats.</td>
</tr>
<tr>
<td><code>title</code></td>
<td><code>"Congo"</code></td>
<td>The title of the website. This will be displayed in the site header and footer.</td>
</tr>
<tr>
<td><code>description</code></td>
<td><em>Not set</em></td>
<td>The website description. This will be used in the site metadata.</td>
</tr>
<tr>
<td><code>copyright</code></td>
<td><em>Not set</em></td>
<td>A Markdown string containing the copyright message to be displayed in the site footer. If none is provided, Congo will automatically generate a copyright string using the site <code>title</code>.</td>
</tr>
<tr>
<td><code>author.name</code></td>
<td><em>Not set</em></td>
<td>The author&rsquo;s name. This will be displayed in article footers, and on the homepage when the profile layout is used.</td>
</tr>
<tr>
<td><code>author.image</code></td>
<td><em>Not set</em></td>
<td>Path to the image file of the author. The image should be a 1:1 aspect ratio and placed in the site&rsquo;s <code>assets/</code> folder.</td>
</tr>
<tr>
<td><code>author.headline</code></td>
<td><em>Not set</em></td>
<td>A Markdown string containing the author&rsquo;s headline. It will be displayed on the profile homepage under the author&rsquo;s name.</td>
</tr>
<tr>
<td><code>author.bio</code></td>
<td><em>Not set</em></td>
<td>A Markdown string containing the author&rsquo;s bio. It will be displayed in article footers.</td>
</tr>
<tr>
<td><code>author.links</code></td>
<td><em>Not set</em></td>
<td>The links to display alongside the author&rsquo;s details. The config file contains example links which can simply be uncommented to enable. The order that the links are displayed is determined by the order they appear in the array. Custom links can be added by providing corresponding SVG icon assets in <code>assets/icons/</code>.</td>
</tr>
</tbody>
</table>
<h2 id=theme-parameters class="relative group">Theme parameters <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=#theme-parameters aria-label=Anchor>#</a></span></h2>
<p>Congo provides a large number of configuration parameters that control how the theme functions. The table below outlines every available parameter in the <code>config/_default/params.toml</code> file.</p>
<p>Many of the article defaults here can be overridden on a per article basis by specifying it in the front matter. Refer to the <a href=https://jpanther.github.io/congo/docs/front-matter/>Front Matter</a> section for further details.</p>
<table>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
@ -210,251 +338,287 @@ Configuration
<tbody>
<tr>
<td><code>colorScheme</code></td>
<td>string</td>
<td><code>"congo"</code></td>
<td>The theme colour scheme to use. Valid values are <code>congo</code> (default), <code>avocado</code>, <code>ocean</code>, <code>fire</code> and <code>slate</code>. Refer to the <a href=https://jpanther.github.io/congo/docs/getting-started/#colour-schemes>Colour Schemes</a> section for more details.</td>
</tr>
<tr>
<td><code>darkMode</code></td>
<td>boolean or string</td>
<td><code>"auto"</code></td>
<td>The preferred theme appearance for dark mode. Set to <code>true</code> to force dark appearance or <code>false</code> to force light appearance. Using <code>"auto"</code> will defer to the user&rsquo;s operating system preference.</td>
<td><code>defaultAppearance</code></td>
<td><code>"light"</code></td>
<td>The default theme appearance, either <code>light</code> or <code>dark</code>.</td>
</tr>
<tr>
<td><code>darkToggle</code></td>
<td>boolean</td>
<td><code>autoSwitchAppearance</code></td>
<td><code>true</code></td>
<td>Whether the theme appearance automatically switches based upon the visitor&rsquo;s operating system preference. Set to <code>false</code> to force the site to always use the <code>defaultAppearance</code>.</td>
</tr>
<tr>
<td><code>showAppearanceSwitcher</code></td>
<td><code>false</code></td>
<td>When <code>darkMode</code> is set to <code>"auto"</code>, this parameter determines whether or not to show the appearance toggle in the site footer. The browser&rsquo;s local storage is used to persist the user&rsquo;s preference.</td>
<td>Whether or not to show the appearance switcher in the site footer. The browser&rsquo;s local storage is used to persist the visitor&rsquo;s preference.</td>
</tr>
<tr>
<td><code>enableSearch</code></td>
<td><code>false</code></td>
<td>Whether site search is enabled. Set to <code>true</code> to enable search functionality. Note that the search feature depends on the <code>outputs.home</code> setting in the <a href=#site-configuration>site configuration</a> being set correctly.</td>
</tr>
<tr>
<td><code>enableCodeCopy</code></td>
<td><code>false</code></td>
<td>Whether copy-to-clipboard buttons are enabled for <code>&lt;code></code> blocks.</td>
</tr>
<tr>
<td><code>logo</code></td>
<td>string</td>
<td><em>Not set</em></td>
<td>The relative path to the site logo file within the <code>assets/</code> folder. The logo file should be provided at 2x resolution and supports any image dimensions.</td>
</tr>
<tr>
<td><code>description</code></td>
<td>string</td>
<td><em>Not set</em></td>
<td>The description of the website for metadata purposes.</td>
</tr>
<tr>
<td><code>mainSections</code></td>
<td>array of strings</td>
<td><em>Not set</em></td>
<td>The sections that should be displayed in the recent articles list. If not provided the section with the greatest number of articles is used.</td>
</tr>
<tr>
<td><code>robots</code></td>
<td>string</td>
<td><em>Not set</em></td>
<td>String that indicates how robots should handle your site. If set, it will be output in the page head. Refer to <a href=https://developers.google.com/search/docs/advanced/robots/robots_meta_tag#directives>Google&rsquo;s docs</a> for valid values.</td>
</tr>
<tr>
<td><code>showScrollToTop</code></td>
<td><code>true</code></td>
<td>When set to <code>true</code> the scroll to top arrow is displayed.</td>
</tr>
<tr>
<td><code>homepage.layout</code></td>
<td>string</td>
<td><code>"page"</code></td>
<td>The layout of the homepage. Valid values are <code>page</code>, <code>profile</code> or <code>custom</code>. When set to <code>custom</code>, you must provide your own layout by creating a <code>/layouts/partials/home/custom.html</code> file. Refer to the <a href=https://jpanther.github.io/congo/docs/homepage-layout/>Homepage Layout</a> section for more details.</td>
</tr>
<tr>
<td><code>homepage.showRecent</code></td>
<td>boolean</td>
<td><code>false</code></td>
<td>Whether or not to display the recent articles list on the homepage.</td>
</tr>
<tr>
<td><code>article.showDate</code></td>
<td>boolean</td>
<td><code>true</code></td>
<td>Whether or not article dates are displayed.</td>
</tr>
<tr>
<td><code>article.showDateUpdated</code></td>
<td>boolean</td>
<td><code>false</code></td>
<td>Whether or not the dates articles were updated are displayed.</td>
</tr>
<tr>
<td><code>article.dateFormat</code></td>
<td>string</td>
<td><code>"2 January 2006"</code></td>
<td>How article dates are formatted. Refer to the <a href=https://gohugo.io/functions/format/#gos-layout-string>Hugo docs</a> for acceptable formats.</td>
</tr>
<tr>
<td><code>article.showAuthor</code></td>
<td>boolean</td>
<td><code>true</code></td>
<td>Whether or not the author box is displayed in the article footer.</td>
</tr>
<tr>
<td><code>article.showBreadcrumbs</code></td>
<td>boolean</td>
<td><code>false</code></td>
<td>Whether or not breadcrumbs are displayed in the article header.</td>
</tr>
<tr>
<td><code>article.showDraftLabel</code></td>
<td>boolean</td>
<td><code>true</code></td>
<td>Whether or not the draft indicator is shown next to articles when site is built with <code>--buildDrafts</code>.</td>
</tr>
<tr>
<td><code>article.showEdit</code></td>
<td>boolean</td>
<td><code>false</code></td>
<td>Whether or not the link to edit the article content should be displayed.</td>
</tr>
<tr>
<td><code>article.editURL</code></td>
<td>string</td>
<td><em>Not set</em></td>
<td>When <code>article.showEdit</code> is active, the URL for the edit link.</td>
</tr>
<tr>
<td><code>article.editAppendPath</code></td>
<td>boolean</td>
<td><code>true</code></td>
<td>When <code>article.showEdit</code> is active, whether or not the path to the current article should be appended to the URL set at <code>article.editURL</code>.</td>
</tr>
<tr>
<td><code>article.showHeadingAnchors</code></td>
<td>boolean</td>
<td><code>true</code></td>
<td>Whether or not heading anchor links are displayed alongside headings within articles.</td>
</tr>
<tr>
<td><code>article.showPagination</code></td>
<td>boolean</td>
<td><code>true</code></td>
<td>Whether or not the next/previous article links are displayed in the article footer.</td>
</tr>
<tr>
<td><code>article.invertPagination</code></td>
<td><code>false</code></td>
<td>Whether or not to flip the direction of the next/previous article links.</td>
</tr>
<tr>
<td><code>article.showReadingTime</code></td>
<td>boolean</td>
<td><code>true</code></td>
<td>Whether or not article reading times are displayed.</td>
</tr>
<tr>
<td><code>article.showTableOfContents</code></td>
<td><code>false</code></td>
<td>Whether or not the table of contents is displayed on articles.</td>
</tr>
<tr>
<td><code>article.showTaxonomies</code></td>
<td><code>false</code></td>
<td>Whether or not the taxonomies related to this article are displayed.</td>
</tr>
<tr>
<td><code>article.showWordCount</code></td>
<td>boolean</td>
<td><code>false</code></td>
<td>Whether or not article word counts are displayed.</td>
</tr>
<tr>
<td><code>article.sharingLinks</code></td>
<td>array of strings</td>
<td><em>Not set</em></td>
<td>Which sharing links to display at the end of each article. When not provided, or set to <code>false</code> no links will be displayed.</td>
</tr>
<tr>
<td><code>list.showBreadcrumbs</code></td>
<td>boolean</td>
<td><code>false</code></td>
<td>Whether or not breadcrumbs are displayed in the header on list pages.</td>
</tr>
<tr>
<td><code>list.showTableOfContents</code></td>
<td><code>false</code></td>
<td>Whether or not the table of contents is displayed on list pages.</td>
</tr>
<tr>
<td><code>list.showSummary</code></td>
<td>boolean</td>
<td><code>false</code></td>
<td>Whether or not article summaries are displayed on list pages. If a summary is not provided in the <a href=https://jpanther.github.io/congo/docs/front-matter/>front matter</a>, one will be auto generated using the <code>summaryLength</code> parameter in the <a href=#site-configuration>site configuration</a>.</td>
</tr>
<tr>
<td><code>list.groupByYear</code></td>
<td>boolean</td>
<td><code>true</code></td>
<td>Whether or not articles are grouped by year on list pages.</td>
</tr>
<tr>
<td><code>sitemap.excludedKinds</code></td>
<td>array of strings</td>
<td><code>["taxonomy", "term"]</code></td>
<td>Kinds of content that should be excluded from the generated <code>/sitemap.xml</code> file. Refer to the <a href=https://gohugo.io/templates/section-templates/#page-kinds>Hugo docs</a> for acceptable values.</td>
</tr>
<tr>
<td><code>taxonomy.showTermCount</code></td>
<td>boolean</td>
<td><code>true</code></td>
<td>Whether or not the number of articles within a taxonomy term is displayed on the taxonomy listing.</td>
</tr>
<tr>
<td><code>fathomAnalytics.site</code></td>
<td>string</td>
<td><em>Not set</em></td>
<td>The site code generated by Fathom Analytics for the website. Refer to the <a href=https://jpanther.github.io/congo/docs/partials/#analytics>Analytics docs</a> for more details.</td>
</tr>
<tr>
<td><code>fathomAnalytics.domain</code></td>
<td>string</td>
<td><em>Not set</em></td>
<td>If using a custom domain with Fathom Analytics, provide it here to serve <code>script.js</code> from the custom domain.</td>
</tr>
<tr>
<td><code>verification.google</code></td>
<td>string</td>
<td><em>Not set</em></td>
<td>The site verification string provided by Google to be included in the site metadata.</td>
</tr>
<tr>
<td><code>verification.bing</code></td>
<td>string</td>
<td><em>Not set</em></td>
<td>The site verification string provided by Bing to be included in the site metadata.</td>
</tr>
<tr>
<td><code>verification.pinterest</code></td>
<td>string</td>
<td><em>Not set</em></td>
<td>The site verification string provided by Pinterest to be included in the site metadata.</td>
</tr>
<tr>
<td><code>verification.yandex</code></td>
<td>string</td>
<td><em>Not set</em></td>
<td>The site verification string provided by Yandex to be included in the site metadata.</td>
</tr>
</tbody>
</table>
</div>
</section>
<footer class=pt-8>
<div class="pt-8 article-pagination">
<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 href=/congo/docs/getting-started/>
<span class="mr-3 article-pagination-direction">&larr;</span>
<a class="flex group" href=/congo/docs/getting-started/>
<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="article-pagination-title mt-[0.1rem] leading-6">Getting Started</span>
<span class="mt-[0.1rem] leading-6 group-hover:underline group-hover:decoration-primary-500">Getting Started</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" href=/congo/docs/homepage-layout/>
<a class="flex text-right group" href=/congo/docs/homepage-layout/>
<span class="flex flex-col">
<span class="article-pagination-title mt-[0.1rem] leading-6">Homepage Layout</span>
<span class="mt-[0.1rem] leading-6 group-hover:underline group-hover:decoration-primary-500">Homepage Layout</span>
<span class="mt-[0.1rem] text-xs text-neutral-500 dark:text-neutral-400">
</span>
</span>
<span class="ml-3 article-pagination-direction">&rarr;</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>
</main><footer class=py-10>
<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">
&copy;
2022
Congo
© 2022 Congo contributors
</p>
<p class="text-xs text-neutral-400 dark:text-neutral-600">
Powered by <a class="hover:underline hover:underline-primary-400 hover:text-primary-500" href=https://gohugo.io/ target=_blank rel="noopener noreferrer">Hugo</a> & <a class="hover:underline hover:underline-primary-400 hover:text-primary-500" href=https://git.io/hugo-congo target=_blank rel="noopener noreferrer">Congo</a>
<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>

View File

@ -0,0 +1,459 @@
<!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>Content Examples &#183; Congo</title>
<meta name=title content="Content Examples &#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/content-examples/>
<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="Content Examples">
<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/content-examples/"><meta property="article:section" content="docs">
<meta property="article:published_time" content="2020-08-09T00:00:00+00:00">
<meta property="article:modified_time" content="2020-08-09T00:00:00+00:00"><meta property="og:site_name" content="Congo">
<meta name=twitter:card content="summary">
<meta name=twitter:title content="Content Examples">
<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":"Content Examples","headline":"Content Examples","description":"All the partials available in Congo.","abstract":"If you\u0026rsquo;ve been reading the documentation in order, you should now know about all the features and configurations available in Congo.","inLanguage":"en-au","url":"https:\/\/jpanther.github.io\/congo\/docs\/content-examples\/","author":{"@type":"Person","name":"Congo"},"copyrightYear":"2020","dateCreated":"2020-08-09T00:00:00\u002b00:00","datePublished":"2020-08-09T00:00:00\u002b00:00","dateModified":"2020-08-09T00:00:00\u002b00:00","keywords":["content","example"],"mainEntityOfPage":"true","wordCount":"1827"}]</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/content-examples/>Content Examples</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">
Content Examples
</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">9 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/content-examples.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=#branch-pages>Branch pages</a>
<ul>
<li><a href=#homepage>Homepage</a></li>
<li><a href=#list-pages>List pages</a></li>
<li><a href=#taxonomy-pages>Taxonomy pages</a></li>
</ul>
</li>
<li><a href=#leaf-pages>Leaf pages</a>
<ul>
<li><a href=#external-links>External links</a></li>
</ul>
</li>
<li><a href=#custom-layouts>Custom layouts</a>
<ul>
<li><a href=#overriding-default-layouts>Overriding default layouts</a></li>
<li><a href=#custom-section-layouts>Custom section layouts</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</details>
</div>
</div>
<div class="min-w-0 min-h-0 max-w-prose">
<p>If you&rsquo;ve been reading the documentation in order, you should now know about all the features and configurations available in Congo. This page is designed to pull everything together and offer some worked examples that you might like to use in your Hugo project.</p>
<div class="flex px-4 py-3 rounded-md bg-primary-100 dark:bg-primary-900">
<span class="ltr:pr-3 rtl:pl-3 text-primary-400">
<span class="relative inline-block align-text-bottom icon"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="exclamation-triangle" class="svg-inline--fa fa-exclamation-triangle fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentcolor" d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937.0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154.0l239.94 416.028zM288 354c-25.405.0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346 7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373.0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884.0-12.356 5.78-11.981 12.654z"/></svg>
</span>
</span>
<span class=dark:text-neutral-300><strong>Tip:</strong> If you&rsquo;re new to Hugo, be sure to check out the <a href=https://gohugo.io/content-management/page-bundles/>official docs</a> to learn more about the concept of page bundles and resources.</span>
</div>
<p>The examples on this page can all be adapted to different scenarios but hopefully give you some ideas about how to approach formatting a particular content item for your individual project.</p>
<h2 id=branch-pages class="relative group">Branch pages <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=#branch-pages aria-label=Anchor>#</a></span></h2>
<p>Branch page bundles in Hugo cover items like the homepage, section listings, and taxonomy pages. The important thing to remember about branch bundles is that the filename for this content type is <strong><code>_index.md</code></strong>.</p>
<p>Congo will honour the front matter parameters specified in branch pages and these will override the default settings for that particular page. For example, setting the <code>title</code> parameter in a branch page will allow overriding the page title.</p>
<h3 id=homepage class="relative group">Homepage <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=#homepage aria-label=Anchor>#</a></span></h3>
<table>
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Layout:</strong></td>
<td><code>layouts/index.html</code></td>
</tr>
<tr>
<td><strong>Content:</strong></td>
<td><code>content/_index.md</code></td>
</tr>
</tbody>
</table>
<p>The homepage in Congo is special in that it&rsquo;s overarching design is controlled by the homepage layout config parameter. You can learn more about this in the <a href=https://jpanther.github.io/congo/docs/homepage-layout/>Homepage Layout</a> section.</p>
<p>If you want to add custom content to this page, you simply need to create a <code>content/_index.md</code> file. Anything in this file will then be included in your homepage.</p>
<p><strong>Example:</strong></p>
<div class=highlight><pre tabindex=0 class=chroma><code class=language-yaml data-lang=yaml><span class=nn>---</span><span class=w>
</span><span class=w></span><span class=nt>title</span><span class=p>:</span><span class=w> </span><span class=s2>&#34;Welcome to Congo!&#34;</span><span class=w>
</span><span class=w></span><span class=nt>description</span><span class=p>:</span><span class=w> </span><span class=s2>&#34;This is a demo of adding content to the homepage.&#34;</span><span class=w>
</span><span class=w></span><span class=nn>---</span><span class=w>
</span><span class=w></span><span class=l>Welcome to my website! I&#39;m really happy you stopped by.</span><span class=w>
</span></code></pre></div><p><em>This example sets a custom title and adds some additional text to the body of the page. Any Markdown formatted text is acceptable, including shortcodes, images and links.</em></p>
<h3 id=list-pages class="relative group">List pages <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=#list-pages aria-label=Anchor>#</a></span></h3>
<table>
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Layout:</strong></td>
<td><code>layouts/_default/list.html</code></td>
</tr>
<tr>
<td><strong>Content:</strong></td>
<td><code>content/../_index.md</code></td>
</tr>
</tbody>
</table>
<p>List pages group all the pages within into a section and provide a way for visitors to reach each page. A blog or portfolio are examples of a list page as they group together posts or projects.</p>
<p>Creating a list page is as simple as making a sub-directory in the content folder. For example, to create a &ldquo;Projects&rdquo; section, you would create <code>content/projects/</code>. Then create a Markdown file for each of your projects.</p>
<p>A list page will be generated by default, however to customise the content, you should also create an <code>_index.md</code> page in this new directory.</p>
<div class=highlight><pre tabindex=0 class=chroma><code class=language-shell data-lang=shell>.
└── content
└── projects
├── _index.md <span class=c1># /projects</span>
├── first-project.md <span class=c1># /projects/first-project</span>
└── another-project
├── index.md <span class=c1># /projects/another-project</span>
└── project.jpg
</code></pre></div><p>Hugo will generate URLs for the pages in your projects folder accordingly.</p>
<p>Just like the homepage, content in the <code>_index.md</code> file will be output into the generated list index. Congo will then list any pages in this section below the content.</p>
<p><strong>Example:</strong></p>
<div class=highlight><pre tabindex=0 class=chroma><code class=language-yaml data-lang=yaml><span class=nn>---</span><span class=w>
</span><span class=w></span><span class=nt>title</span><span class=p>:</span><span class=w> </span><span class=s2>&#34;Projects&#34;</span><span class=w>
</span><span class=w></span><span class=nt>description</span><span class=p>:</span><span class=w> </span><span class=s2>&#34;Learn about some of my projects.&#34;</span><span class=w>
</span><span class=w></span><span class=nt>cascade</span><span class=p>:</span><span class=w>
</span><span class=w> </span><span class=nt>showReadingTime</span><span class=p>:</span><span class=w> </span><span class=kc>false</span><span class=w>
</span><span class=w></span><span class=nn>---</span><span class=w>
</span><span class=w></span><span class=l>This section contains all my current projects.</span><span class=w>
</span></code></pre></div><p><em>In this example, the special <code>cascade</code> parameter is being used to hide the reading time on any sub-pages within this section. By doing this, any project pages will not have their reading time showing. This is a great way to override default theme parameters for an entire section without having to include them in every individual page.</em></p>
<p>The <a href=https://jpanther.github.io/congo/samples/>samples section</a> of this site is an example of a list page.</p>
<h3 id=taxonomy-pages class="relative group">Taxonomy pages <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=#taxonomy-pages aria-label=Anchor>#</a></span></h3>
<table>
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>List layout:</strong></td>
<td><code>layouts/_default/taxonomy.html</code></td>
</tr>
<tr>
<td><strong>Term layout:</strong></td>
<td><code>layouts/_default/term.html</code></td>
</tr>
<tr>
<td><strong>Content:</strong></td>
<td><code>content/../_index.md</code></td>
</tr>
</tbody>
</table>
<p>Taxonomy pages come in two forms - taxonomy lists and taxonomy terms. Lists display a listing of each of the terms within a given taxonomy, while terms display a list of pages that are related to a given term.</p>
<p>The terminology can get a little confusing so let&rsquo;s explore an example using a taxonomy named <code>animals</code>.</p>
<p>Firstly, to use taxonomies in Hugo, they have to be configured. This is done by creating a config file at <code>config/_default/taxonomies.toml</code> and defining the taxonomy name.</p>
<div class=highlight><pre tabindex=0 class=chroma><code class=language-toml data-lang=toml><span class=c># config/_default/taxonomies.toml</span>
<span class=nx>animal</span> <span class=p>=</span> <span class=s2>&#34;animals&#34;</span>
</code></pre></div><p>Hugo expects taxonomies to be listed using their singular and plural forms, so we add the singular <code>animal</code> equals the plural <code>animals</code> to create our example taxonomy.</p>
<p>Now that our <code>animals</code> taxonomy exists, it needs to be added to individual content items. It&rsquo;s as simple as inserting it into the front matter:</p>
<div class=highlight><pre tabindex=0 class=chroma><code class=language-yaml data-lang=yaml><span class=nn>---</span><span class=w>
</span><span class=w></span><span class=nt>title</span><span class=p>:</span><span class=w> </span><span class=s2>&#34;Into the Lion&#39;s Den&#34;</span><span class=w>
</span><span class=w></span><span class=nt>description</span><span class=p>:</span><span class=w> </span><span class=s2>&#34;This week we&#39;re learning about lions.&#34;</span><span class=w>
</span><span class=w></span><span class=nt>animals</span><span class=p>:</span><span class=w> </span><span class=p>[</span><span class=s2>&#34;lion&#34;</span><span class=p>,</span><span class=w> </span><span class=s2>&#34;cat&#34;</span><span class=p>]</span><span class=w>
</span><span class=w></span><span class=nn>---</span><span class=w>
</span></code></pre></div><p>This has now created two <em>terms</em> within our <code>animals</code> taxonomy - <code>lion</code> and <code>cat</code>.</p>
<p>Although it&rsquo;s not obvious at this point, Hugo will now be generating list and term pages for this new taxonomy. By default the listing can be accessed at <code>/animals/</code> and the term pages can be found at <code>/animals/lion/</code> and <code>/animals/cat/</code>.</p>
<p>The list page will list all the terms contained within the taxonomy. In this example, navigating to <code>/animals/</code> will show a page that has links for &ldquo;lion&rdquo; and &ldquo;cat&rdquo; which take visitors to the individual term pages.</p>
<p>The term pages will list all the pages contained within that term. These term lists are essentially the same as normal <a href=#list-pages>list pages</a> and behave in much the same way.</p>
<p>In order to add custom content to taxonomy pages, simply create <code>_index.md</code> files in the content folder using the taxonomy name as the sub-directory name.</p>
<div class=highlight><pre tabindex=0 class=chroma><code class=language-shell data-lang=shell>.
└── content
└── animals
├── _index.md <span class=c1># /animals</span>
└── lion
└── _index.md <span class=c1># /animals/lion</span>
</code></pre></div><p>Anything in these content files will now be placed onto the generated taxonomy pages. As with other content, the front matter variables can be used to override defaults. In this way you could have a tag named <code>lion</code> but override the <code>title</code> to be &ldquo;Lion&rdquo;.</p>
<p>To see how this looks in reality, check out the <a href=https://jpanther.github.io/congo/tags/>tags taxonomy listing</a> on this site.</p>
<h2 id=leaf-pages class="relative group">Leaf pages <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=#leaf-pages aria-label=Anchor>#</a></span></h2>
<table>
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Layout:</strong></td>
<td><code>layouts/_default/single.html</code></td>
</tr>
<tr>
<td><strong>Content (standalone):</strong></td>
<td><code>content/../page-name.md</code></td>
</tr>
<tr>
<td><strong>Content (bundled):</strong></td>
<td><code>content/../page-name/index.md</code></td>
</tr>
</tbody>
</table>
<p>Leaf pages in Hugo are basically standard content pages. They are defined as pages that don&rsquo;t contain any sub-pages. These could be things like an about page, or an individual blog post that lives in the blog section of the website.</p>
<p>The most important thing to remember about leaf pages is that unlike branch pages, leaf pages should be named <code>index.md</code> <em>without</em> an underscore. Leaf pages are also special in that they can be grouped together at the top level of the section and named with a unique name.</p>
<div class=highlight><pre tabindex=0 class=chroma><code class=language-shell data-lang=shell>.
└── content
└── blog
├── first-post.md <span class=c1># /blog/first-post</span>
├── second-post.md <span class=c1># /blog/second-post</span>
└── third-post
├── index.md <span class=c1># /blog/third-post</span>
└── image.jpg
</code></pre></div><p>When including assets in a page, like an image, a page bundle should be used. Page bundles are created using a sub-directory with an <code>index.md</code> file. Grouping the assets with the content in its own directory is important as many of the shortcodes and other theme logic assumes that resources are bundled alongside pages.</p>
<p><strong>Example:</strong></p>
<div class=highlight><pre tabindex=0 class=chroma><code class=language-yaml data-lang=yaml><span class=nn>---</span><span class=w>
</span><span class=w></span><span class=nt>title</span><span class=p>:</span><span class=w> </span><span class=s2>&#34;My First Blog Post&#34;</span><span class=w>
</span><span class=w></span><span class=nt>date</span><span class=p>:</span><span class=w> </span><span class=ld>2022-01-25</span><span class=w>
</span><span class=w></span><span class=nt>description</span><span class=p>:</span><span class=w> </span><span class=s2>&#34;Welcome to my blog!&#34;</span><span class=w>
</span><span class=w></span><span class=nt>summary</span><span class=p>:</span><span class=w> </span><span class=s2>&#34;Learn more about me and why I am starting this blog.&#34;</span><span class=w>
</span><span class=w></span><span class=nt>tags</span><span class=p>:</span><span class=w> </span><span class=p>[</span><span class=s2>&#34;welcome&#34;</span><span class=p>,</span><span class=w> </span><span class=s2>&#34;new&#34;</span><span class=p>,</span><span class=w> </span><span class=s2>&#34;about&#34;</span><span class=p>,</span><span class=w> </span><span class=s2>&#34;first&#34;</span><span class=p>]</span><span class=w>
</span><span class=w></span><span class=nn>---</span><span class=w>
</span><span class=w></span><span class=l>_This_ is the content of my blog post.</span><span class=w>
</span></code></pre></div><p>Leaf pages have a wide variety of <a href=https://jpanther.github.io/congo/docs/front-matter/>front matter</a> parameters that can be used to customise how they are displayed.</p>
<h3 id=external-links class="relative group">External links <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=#external-links aria-label=Anchor>#</a></span></h3>
<p>Congo has a special feature that allows links to external pages to appear alongside articles in the article listings. This is useful if you have content on third party websites like Medium, or research papers that you&rsquo;d like to link to, without replicating the content in your Hugo site.</p>
<p>In order to create an external link article, some special front matter needs to be set:</p>
<div class=highlight><pre tabindex=0 class=chroma><code class=language-yaml data-lang=yaml><span class=nn>---</span><span class=w>
</span><span class=w></span><span class=nt>title</span><span class=p>:</span><span class=w> </span><span class=s2>&#34;My Medium post&#34;</span><span class=w>
</span><span class=w></span><span class=nt>date</span><span class=p>:</span><span class=w> </span><span class=ld>2022-01-25</span><span class=w>
</span><span class=w></span><span class=nt>externalUrl</span><span class=p>:</span><span class=w> </span><span class=s2>&#34;https://medium.com/&#34;</span><span class=w>
</span><span class=w></span><span class=nt>summary</span><span class=p>:</span><span class=w> </span><span class=s2>&#34;I wrote a post on Medium.&#34;</span><span class=w>
</span><span class=w></span><span class=nt>showReadingTime</span><span class=p>:</span><span class=w> </span><span class=kc>false</span><span class=w>
</span><span class=w></span><span class=nt>_build</span><span class=p>:</span><span class=w>
</span><span class=w> </span><span class=nt>render</span><span class=p>:</span><span class=w> </span><span class=s2>&#34;false&#34;</span><span class=w>
</span><span class=w> </span><span class=nt>list</span><span class=p>:</span><span class=w> </span><span class=s2>&#34;local&#34;</span><span class=w>
</span><span class=w></span><span class=nn>---</span><span class=w>
</span></code></pre></div><p>Along with the normal front matter parameters like <code>title</code> and <code>summary</code>, the <code>externalUrl</code> parameter is used to tell Congo that this is not an ordinary article. The URL provided here will be where visitors are directed when they select this article.</p>
<p>Additionally, we use a special Hugo front matter parameter <code>_build</code> to prevent a normal page for this content being generated - there&rsquo;s no point generating a page since we&rsquo;re linking to an external URL!</p>
<p>The theme includes an archetype to make generating these external link articles simple. Just specify <code>-k external</code> when making new content.</p>
<div class=highlight><pre tabindex=0 class=chroma><code class=language-shell data-lang=shell>hugo new -k external posts/my-post.md
</code></pre></div><h2 id=custom-layouts class="relative group">Custom layouts <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-layouts aria-label=Anchor>#</a></span></h2>
<p>One of the benefits of Hugo is that it makes it easy to create custom layouts for the whole site, individual sections or pages.</p>
<p>Layouts follow all the normal Hugo templating rules and more information is available in the <a href=https://gohugo.io/templates/introduction/>official Hugo docs</a>.</p>
<h3 id=overriding-default-layouts class="relative group">Overriding default layouts <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=#overriding-default-layouts aria-label=Anchor>#</a></span></h3>
<p>Each of the content types discussed above lists the layout file that is used to generate each type of page. If this file is created in your local project it will override the theme template and thus can be used to customise the default style of the website.</p>
<p>For example, creating a <code>layouts/_default/single.html</code> file will allow the layout of leaf pages to be completely customised.</p>
<h3 id=custom-section-layouts class="relative group">Custom section layouts <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-section-layouts aria-label=Anchor>#</a></span></h3>
<p>It is also simple to create custom layouts for individual content sections. This is useful when you want to make a section that lists a certain type of content using a particular style.</p>
<p>Let&rsquo;s step through an example that creates a custom &ldquo;Projects&rdquo; page that lists projects using a special layout.</p>
<p>In order to do this, structure your content using the normal Hugo content rules and create a section for your projects. Additionally, create a new layout for the projects section by using the same directory name as the content and adding a <code>list.html</code> file.</p>
<div class=highlight><pre tabindex=0 class=chroma><code class=language-shell data-lang=shell>.
└── content
│ └── projects
│ ├── _index.md
│ ├── first-project.md
│ └── second-project.md
└── layouts
└── projects
└── list.html
</code></pre></div><p>This <code>list.html</code> file will now override the default list template, but only for the <code>projects</code> section. Before we look at this file, lets first look at the individual project files.</p>
<div class=highlight><pre tabindex=0 class=chroma><code class=language-yaml data-lang=yaml><span class=nn>---</span><span class=w>
</span><span class=w></span><span class=nt>title</span><span class=p>:</span><span class=w> </span><span class=s2>&#34;Congo&#34;</span><span class=w>
</span><span class=w></span><span class=nt>date</span><span class=p>:</span><span class=w> </span><span class=ld>2021-08-11</span><span class=w>
</span><span class=w></span><span class=nt>icon</span><span class=p>:</span><span class=w> </span><span class=s2>&#34;github&#34;</span><span class=w>
</span><span class=w></span><span class=nt>description</span><span class=p>:</span><span class=w> </span><span class=s2>&#34;A theme for Hugo built with Tailwind CSS.&#34;</span><span class=w>
</span><span class=w></span><span class=nt>topics</span><span class=p>:</span><span class=w> </span><span class=p>[</span><span class=s2>&#34;Hugo&#34;</span><span class=p>,</span><span class=w> </span><span class=s2>&#34;Web&#34;</span><span class=p>,</span><span class=w> </span><span class=s2>&#34;Tailwind&#34;</span><span class=p>]</span><span class=w>
</span><span class=w></span><span class=nt>externalUrl</span><span class=p>:</span><span class=w> </span><span class=s2>&#34;https://github.com/jpanther/congo/&#34;</span><span class=w>
</span><span class=w></span><span class=nn>---</span><span class=w>
</span></code></pre></div><p><em>In this example we are assigning some metadata for each project that we can then use in our list template. There&rsquo;s no page content, but there&rsquo;s nothing stopping you from including it. It&rsquo;s your own custom template after all!</em></p>
<p>With the projects defined, now we can create a list template that outputs the details of each project.</p>
<div class=highlight><pre tabindex=0 class=chroma><code class=language-go data-lang=go><span class=p>{{</span> <span class=nx>define</span> <span class=s>&#34;main&#34;</span> <span class=p>}}</span>
<span class=p>&lt;</span><span class=nx>section</span> <span class=nx>class</span><span class=p>=</span><span class=s>&#34;mt-8&#34;</span><span class=p>&gt;</span>
<span class=p>{{</span> <span class=k>range</span> <span class=p>.</span><span class=nx>Pages</span> <span class=p>}}</span>
<span class=p>&lt;</span><span class=nx>article</span> <span class=nx>class</span><span class=p>=</span><span class=s>&#34;pb-6&#34;</span><span class=p>&gt;</span>
<span class=p>&lt;</span><span class=nx>a</span> <span class=nx>class</span><span class=p>=</span><span class=s>&#34;flex&#34;</span> <span class=nx>href</span><span class=p>=</span><span class=s>&#34;{{ .Params.externalUrl }}&#34;</span><span class=p>&gt;</span>
<span class=p>&lt;</span><span class=nx>div</span> <span class=nx>class</span><span class=p>=</span><span class=s>&#34;mr-3 text-3xl text-neutral-300&#34;</span><span class=p>&gt;</span>
<span class=p>&lt;</span><span class=nx>span</span> <span class=nx>class</span><span class=p>=</span><span class=s>&#34;relative inline-block align-text-bottom&#34;</span><span class=p>&gt;</span>
<span class=p>{{</span> <span class=nx>partial</span> <span class=s>&#34;icon.html&#34;</span> <span class=p>.</span><span class=nx>Params</span><span class=p>.</span><span class=nx>icon</span> <span class=p>}}</span>
<span class=p>&lt;</span><span class=o>/</span><span class=nx>span</span><span class=p>&gt;</span>
<span class=p>&lt;</span><span class=o>/</span><span class=nx>div</span><span class=p>&gt;</span>
<span class=p>&lt;</span><span class=nx>div</span><span class=p>&gt;</span>
<span class=p>&lt;</span><span class=nx>h3</span> <span class=nx>class</span><span class=p>=</span><span class=s>&#34;flex text-xl font-semibold&#34;</span><span class=p>&gt;</span>
<span class=p>{{</span> <span class=p>.</span><span class=nx>Title</span> <span class=p>}}</span>
<span class=p>&lt;</span><span class=o>/</span><span class=nx>h3</span><span class=p>&gt;</span>
<span class=p>&lt;</span><span class=nx>p</span> <span class=nx>class</span><span class=p>=</span><span class=s>&#34;text-sm text-neutral-400&#34;</span><span class=p>&gt;</span>
<span class=p>{{</span> <span class=p>.</span><span class=nx>Description</span> <span class=p>}}</span>
<span class=p>&lt;</span><span class=o>/</span><span class=nx>p</span><span class=p>&gt;</span>
<span class=p>&lt;</span><span class=o>/</span><span class=nx>div</span><span class=p>&gt;</span>
<span class=p>&lt;</span><span class=o>/</span><span class=nx>a</span><span class=p>&gt;</span>
<span class=p>&lt;</span><span class=o>/</span><span class=nx>article</span><span class=p>&gt;</span>
<span class=p>{{</span> <span class=nx>end</span> <span class=p>}}</span>
<span class=p>&lt;</span><span class=o>/</span><span class=nx>section</span><span class=p>&gt;</span>
<span class=p>{{</span> <span class=nx>end</span> <span class=p>}}</span>
</code></pre></div><p>Although this is quite a straightforward example, you can see that it steps through each of the pages in this section (ie. each project), and then outputs HTML links to each project alongside an icon. The metadata in the front matter for each project is used to determine which information is displayed.</p>
<p>Keep in mind that you&rsquo;ll need to ensure the relevant styles and classes are available, which may require the Tailwind CSS to be recompiled. This is discussed in more detail in the <a href=https://jpanther.github.io/congo/docs/advanced-customisation/>Advanced Customisation</a> section.</p>
<p>When making custom templates like this one, it&rsquo;s always easiest to take a look at how the default Congo template works and then use that as a guide. Remember, the <a href=https://gohugo.io/templates/introduction/>Hugo docs</a> are a great resource to learn more about creating templates too.</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/partials/>
<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">Partials</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/advanced-customisation/>
<span class="flex flex-col">
<span class="mt-[0.1rem] leading-6 group-hover:underline group-hover:decoration-primary-500">Advanced Customisation</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>

View File

@ -1,15 +1,14 @@
<!doctype html><html lang=en-au><head>
<!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 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>Front Matter &#183; Congo</title>
<meta name=title content="Front Matter &#183; Congo">
<meta name=description content="All the front matter variables available in 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/front-matter/>
<link type=text/css rel=stylesheet href=/congo/css/schemes/congo.min.b48d6ba061dc77186a2524fb8aac5ac3823b2679a9299ca60325abbccc9c1764c884715f0ba24b4e2776cb3814df4af1f4c854b87207cd5d4c7a254da9b55751.css integrity="sha512-tI1roGHcdxhqJST7iqxaw4I7JnmpKZymAyWrvMycF2TIhHFfC6JLTid2yzgU30rx9MhUuHIHzV1MeiVNqbVXUQ==">
<link type=text/css rel=stylesheet href=/congo/css/compiled/main.min.51037225bb3c65887773b052da1e38f105db8f3d9aa6a34ba3c5c40c88fb309724f8cc5ed2871adc7e55dacab9b36c60ce7aa7a61dff2cc638f8b435c898d5a8.css integrity="sha512-UQNyJbs8ZYh3c7BS2h448QXbjz2apqNLo8XEDIj7MJck+Mxe0oca3H5V2sq5s2xgznqnph3/LMY4+LQ1yJjVqA==">
<script>function loadPreferredAppearance(){localStorage.preferredAppearance==="dark"||!("preferredAppearance"in localStorage)&&window.matchMedia("(prefers-color-scheme: dark)").matches?document.documentElement.classList.add("dark"):document.documentElement.classList.remove("dark")}function setPreferredAppearance(a){a=="default"?localStorage.removeItem("preferredAppearance"):localStorage.preferredAppearance=a,loadPreferredAppearance()}loadPreferredAppearance(),window.matchMedia("(prefers-color-scheme: dark)").addListener(loadPreferredAppearance)</script>
<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>
@ -19,51 +18,60 @@
<meta property="og:type" content="article">
<meta property="og:url" content="https://jpanther.github.io/congo/docs/front-matter/"><meta property="article:section" content="docs">
<meta property="article:published_time" content="2020-08-12T00:00:00+00:00">
<meta property="article:modified_time" content="2020-08-12T00:00:00+00:00">
<meta property="article:modified_time" content="2020-08-12T00:00:00+00:00"><meta property="og:site_name" content="Congo">
<meta name=twitter:card content="summary">
<meta name=twitter:title content="Front Matter">
<meta name=twitter:description content="All the front matter variables available in Congo.">
<script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","articleSection":"Documentation","name":"Front Matter","headline":"Front Matter","description":"All the front matter variables available in Congo.","inLanguage":"en-AU","author":{"@type":"Person","name":"Congo"},"creator":{"@type":"Person","name":"Congo"},"copyrightHolder":"Congo","copyrightYear":"2020","dateCreated":"2020-08-12T00:00:00\u002b00:00","datePublished":"2020-08-12T00:00:00\u002b00:00","dateModified":"2020-08-12T00:00:00\u002b00:00","url":"https:\/\/jpanther.github.io\/congo\/docs\/front-matter\/","keywords":["front matter","config","docs"],"wordCount":"453"}</script>
<meta name=generator content="Hugo 0.92.0">
<script type=application/ld+json>[{"@context":"https://schema.org","@type":"Article","articleSection":"Documentation","name":"Front Matter","headline":"Front Matter","description":"All the front matter variables available in Congo.","abstract":"In addition to the default Hugo front matter parameters, Congo adds a number of additional options to customise the presentation of individual articles.","inLanguage":"en-au","url":"https:\/\/jpanther.github.io\/congo\/docs\/front-matter\/","author":{"@type":"Person","name":"Congo"},"copyrightYear":"2020","dateCreated":"2020-08-12T00:00:00\u002b00:00","datePublished":"2020-08-12T00:00:00\u002b00:00","dateModified":"2020-08-12T00:00:00\u002b00:00","keywords":["front matter","config","docs"],"mainEntityOfPage":"true","wordCount":"479"}]</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"><header class="flex justify-between py-6 font-semibold sm:items-center sm:py-10 text-neutral-900 dark:text-neutral">
<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:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" rel=me href=/congo/>Congo</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=/congo/docs/ title=Documentation>Docs</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=/congo/samples/ title="Content Samples">Samples</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=/congo/users/ title=Users>Users</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=https://github.com/jpanther/congo title>GitHub</a>
<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 class=flex-grow>
<article class=max-w-prose>
<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:underline-neutral-300 dark:underline-neutral-600" href=/congo/>Welcome to Congo! :tada:</a><span class="px-1 text-primary-500">/</span>
<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:underline-neutral-300 dark:underline-neutral-600" href=/congo/docs/>Documentation</a><span class="px-1 text-primary-500">/</span>
<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:underline-neutral-300 dark:underline-neutral-600" href=/congo/docs/front-matter/>Front Matter</a><span class="px-1 text-primary-500">/</span>
<a class="hover:underline hover:decoration-neutral-300 dark:underline-neutral-600" href=/congo/docs/front-matter/>Front Matter</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">
@ -81,176 +89,217 @@ Front Matter
</div>
</div>
</header>
<section class="prose dark:prose-light">
<section class="flex flex-col max-w-full mt-0 prose lg:flex-row dark:prose-invert">
<div class="min-w-0 min-h-0 max-w-prose">
<p>In addition to the <a href=https://gohugo.io/content-management/front-matter/#front-matter-variables>default Hugo front matter parameters</a>, Congo adds a number of additional options to customise the presentation of individual articles. All the available theme front matter parameters are listed below.</p>
<p>Front matter parameter default values are inherited from the theme&rsquo;s <a href=https://jpanther.github.io/congo/docs/configuration/>base configuration</a>, so you only need to specify these parameters in your front matter when you want to override the default.</p>
<table>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>title</code></td>
<td><em>Not set</em></td>
<td>The name of the article.</td>
</tr>
<tr>
<td><code>description</code></td>
<td>string</td>
<td><em>Not set</em></td>
<td>The text description for the article. It is used in the HTML metadata.</td>
</tr>
<tr>
<td><code>externalUrl</code></td>
<td>string</td>
<td><em>Not set</em></td>
<td>If this article is published on a third-party website, the URL to this article. Providing a URL will prevent a content page being generated and any references to this article will link directly to the third-party website.</td>
</tr>
<tr>
<td><code>editURL</code></td>
<td>string</td>
<td><code>article.editURL</code></td>
<td>When <code>showEdit</code> is active, the URL for the edit link.</td>
</tr>
<tr>
<td><code>editAppendPath</code></td>
<td>boolean</td>
<td><code>article.editAppendPath</code></td>
<td>When <code>showEdit</code> is active, whether or not the path to the current article should be appended to the URL set at <code>editURL</code>.</td>
</tr>
<tr>
<td><code>groupByYear</code></td>
<td>boolean</td>
<td><code>list.groupByYear</code></td>
<td>Whether or not articles are grouped by year on list pages.</td>
</tr>
<tr>
<td><code>menu</code></td>
<td>string or array</td>
<td><em>Not set</em></td>
<td>When a value is provided, a link to this article will appear in the named menus. Valid values are <code>main</code> or <code>footer</code>.</td>
</tr>
<tr>
<td><code>robots</code></td>
<td>string</td>
<td><em>Not set</em></td>
<td>String that indicates how robots should handle this article. If set, it will be output in the page head. Refer to <a href=https://developers.google.com/search/docs/advanced/robots/robots_meta_tag#directives>Google&rsquo;s docs</a> for valid values.</td>
</tr>
<tr>
<td><code>sharingLinks</code></td>
<td>array of strings</td>
<td><code>article.sharingLinks</code></td>
<td>Which sharing links to display at the end of this article. When not provided, or set to <code>false</code> no links will be displayed.</td>
</tr>
<tr>
<td><code>showAuthor</code></td>
<td>boolean</td>
<td><code>article.showAuthor</code></td>
<td>Whether or not the author box is displayed in the article footer.</td>
</tr>
<tr>
<td><code>showDate</code></td>
<td>boolean</td>
<td><code>article.showDate</code></td>
<td>Whether or not the article date is displayed. The date is set using the <code>date</code> parameter.</td>
</tr>
<tr>
<td><code>showDateUpdated</code></td>
<td>boolean</td>
<td><code>article.showDateUpdated</code></td>
<td>Whether or not the date the article was updated is displayed. The date is set using the <code>lastmod</code> parameter.</td>
</tr>
<tr>
<td><code>showEdit</code></td>
<td>boolean</td>
<td><code>article.showEdit</code></td>
<td>Whether or not the link to edit the article content should be displayed.</td>
</tr>
<tr>
<td><code>showHeadingAnchors</code></td>
<td>boolean</td>
<td><code>article.showHeadingAnchors</code></td>
<td>Whether or not heading anchor links are displayed alongside headings within this article.</td>
</tr>
<tr>
<td><code>showPagination</code></td>
<td>boolean</td>
<td><code>article.showPagination</code></td>
<td>Whether or not the next/previous article links are displayed in the article footer.</td>
</tr>
<tr>
<td><code>invertPagination</code></td>
<td><code>article.invertPagination</code></td>
<td>Whether or not to flip the direction of the next/previous article links.</td>
</tr>
<tr>
<td><code>showReadingTime</code></td>
<td>boolean</td>
<td><code>article.showReadingTime</code></td>
<td>Whether or not the article reading time is displayed.</td>
</tr>
<tr>
<td><code>showTaxonomies</code></td>
<td><code>article.showTaxonomies</code></td>
<td>Whether or not the taxonomies that relate to this article are displayed.</td>
</tr>
<tr>
<td><code>showTableOfContents</code></td>
<td><code>article.showTableOfContents</code></td>
<td>Whether or not the table of contents is displayed on this article.</td>
</tr>
<tr>
<td><code>showWordCount</code></td>
<td>boolean</td>
<td><code>article.showWordCount</code></td>
<td>Whether or not the article word count is displayed.</td>
</tr>
<tr>
<td><code>showSummary</code></td>
<td>boolean</td>
<td><code>list.showSummary</code></td>
<td>Whether or not the article summary should be displayed on list pages.</td>
</tr>
<tr>
<td><code>summary</code></td>
<td>string</td>
<td>Auto generated using <code>summaryLength</code> (see <a href=https://jpanther.github.io/congo/docs/configuration/#site-configuration>site configuration</a>)</td>
<td>When <code>showSummary</code> is enabled, this is the Markdown string to be used as the summary for this article.</td>
</tr>
<tr>
<td><code>xml</code></td>
<td>boolean</td>
<td><code>true</code> unless excluded by <code>sitemap.excludedKinds</code></td>
<td>Whether or not this article is included in the generated <code>/sitemap.xml</code> file.</td>
</tr>
</tbody>
</table>
</div>
</section>
<footer class=pt-8>
<div class="pt-8 article-pagination">
<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 href=/congo/docs/homepage-layout/>
<span class="mr-3 article-pagination-direction">&larr;</span>
<a class="flex group" href=/congo/docs/homepage-layout/>
<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="article-pagination-title mt-[0.1rem] leading-6">Homepage Layout</span>
<span class="mt-[0.1rem] leading-6 group-hover:underline group-hover:decoration-primary-500">Homepage Layout</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" href=/congo/docs/shortcodes/>
<a class="flex text-right group" href=/congo/docs/shortcodes/>
<span class="flex flex-col">
<span class="article-pagination-title mt-[0.1rem] leading-6">Shortcodes</span>
<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>
<span class="ml-3 article-pagination-direction">&rarr;</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>
</main><footer class=py-10>
<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">
&copy;
2022
Congo
© 2022 Congo contributors
</p>
<p class="text-xs text-neutral-400 dark:text-neutral-600">
Powered by <a class="hover:underline hover:underline-primary-400 hover:text-primary-500" href=https://gohugo.io/ target=_blank rel="noopener noreferrer">Hugo</a> & <a class="hover:underline hover:underline-primary-400 hover:text-primary-500" href=https://git.io/hugo-congo target=_blank rel="noopener noreferrer">Congo</a>
<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>

View File

@ -1,15 +1,14 @@
<!doctype html><html lang=en-au><head>
<!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 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>Getting Started &#183; Congo</title>
<meta name=title content="Getting Started &#183; Congo">
<meta name=description content="All the front matter variables available in 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/getting-started/>
<link type=text/css rel=stylesheet href=/congo/css/schemes/congo.min.b48d6ba061dc77186a2524fb8aac5ac3823b2679a9299ca60325abbccc9c1764c884715f0ba24b4e2776cb3814df4af1f4c854b87207cd5d4c7a254da9b55751.css integrity="sha512-tI1roGHcdxhqJST7iqxaw4I7JnmpKZymAyWrvMycF2TIhHFfC6JLTid2yzgU30rx9MhUuHIHzV1MeiVNqbVXUQ==">
<link type=text/css rel=stylesheet href=/congo/css/compiled/main.min.51037225bb3c65887773b052da1e38f105db8f3d9aa6a34ba3c5c40c88fb309724f8cc5ed2871adc7e55dacab9b36c60ce7aa7a61dff2cc638f8b435c898d5a8.css integrity="sha512-UQNyJbs8ZYh3c7BS2h448QXbjz2apqNLo8XEDIj7MJck+Mxe0oca3H5V2sq5s2xgznqnph3/LMY4+LQ1yJjVqA==">
<script>function loadPreferredAppearance(){localStorage.preferredAppearance==="dark"||!("preferredAppearance"in localStorage)&&window.matchMedia("(prefers-color-scheme: dark)").matches?document.documentElement.classList.add("dark"):document.documentElement.classList.remove("dark")}function setPreferredAppearance(a){a=="default"?localStorage.removeItem("preferredAppearance"):localStorage.preferredAppearance=a,loadPreferredAppearance()}loadPreferredAppearance(),window.matchMedia("(prefers-color-scheme: dark)").addListener(loadPreferredAppearance)</script>
<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>
@ -19,51 +18,60 @@
<meta property="og:type" content="article">
<meta property="og:url" content="https://jpanther.github.io/congo/docs/getting-started/"><meta property="article:section" content="docs">
<meta property="article:published_time" content="2020-08-15T00:00:00+00:00">
<meta property="article:modified_time" content="2020-08-15T00:00:00+00:00">
<meta property="article:modified_time" content="2020-08-15T00:00:00+00:00"><meta property="og:site_name" content="Congo">
<meta name=twitter:card content="summary">
<meta name=twitter:title content="Getting Started">
<meta name=twitter:description content="All the front matter variables available in Congo.">
<script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","articleSection":"Documentation","name":"Getting Started","headline":"Getting Started","description":"All the front matter variables available in Congo.","inLanguage":"en-AU","author":{"@type":"Person","name":"Congo"},"creator":{"@type":"Person","name":"Congo"},"copyrightHolder":"Congo","copyrightYear":"2020","dateCreated":"2020-08-15T00:00:00\u002b00:00","datePublished":"2020-08-15T00:00:00\u002b00:00","dateModified":"2020-08-15T00:00:00\u002b00:00","url":"https:\/\/jpanther.github.io\/congo\/docs\/getting-started\/","keywords":["installation","docs"],"wordCount":"627"}</script>
<meta name=generator content="Hugo 0.92.0">
<script type=application/ld+json>[{"@context":"https://schema.org","@type":"Article","articleSection":"Documentation","name":"Getting Started","headline":"Getting Started","description":"All the front matter variables available in Congo.","abstract":"This section assumes you have already installed the Congo theme.","inLanguage":"en-au","url":"https:\/\/jpanther.github.io\/congo\/docs\/getting-started\/","author":{"@type":"Person","name":"Congo"},"copyrightYear":"2020","dateCreated":"2020-08-15T00:00:00\u002b00:00","datePublished":"2020-08-15T00:00:00\u002b00:00","dateModified":"2020-08-15T00:00:00\u002b00:00","keywords":["installation","docs"],"mainEntityOfPage":"true","wordCount":"870"}]</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"><header class="flex justify-between py-6 font-semibold sm:items-center sm:py-10 text-neutral-900 dark:text-neutral">
<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:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" rel=me href=/congo/>Congo</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=/congo/docs/ title=Documentation>Docs</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=/congo/samples/ title="Content Samples">Samples</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=/congo/users/ title=Users>Users</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=https://github.com/jpanther/congo title>GitHub</a>
<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 class=flex-grow>
<article class=max-w-prose>
<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:underline-neutral-300 dark:underline-neutral-600" href=/congo/>Welcome to Congo! :tada:</a><span class="px-1 text-primary-500">/</span>
<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:underline-neutral-300 dark:underline-neutral-600" href=/congo/docs/>Documentation</a><span class="px-1 text-primary-500">/</span>
<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:underline-neutral-300 dark:underline-neutral-600" href=/congo/docs/getting-started/>Getting Started</a><span class="px-1 text-primary-500">/</span>
<a class="hover:underline hover:decoration-neutral-300 dark:underline-neutral-600" href=/congo/docs/getting-started/>Getting Started</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">
@ -71,7 +79,7 @@ Getting Started
</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">3 mins</span><span class="px-2 text-primary-500">&#183;</span>
<span title="Reading time">5 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/getting-started.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>
@ -81,78 +89,143 @@ Getting Started
</div>
</div>
</header>
<section class="prose dark:prose-light">
<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=#basic-configuration>Basic configuration</a></li>
<li><a href=#colour-schemes>Colour schemes</a>
<ul>
<li>
<ul>
<li><a href=#congo-default>Congo (default)</a></li>
<li><a href=#avocado>Avocado</a></li>
<li><a href=#fire>Fire</a></li>
<li><a href=#ocean>Ocean</a></li>
<li><a href=#slate>Slate</a></li>
</ul>
</li>
</ul>
</li>
<li><a href=#organising-content>Organising content</a></li>
<li><a href=#menus>Menus</a></li>
<li><a href=#detailed-configuration>Detailed configuration</a></li>
</ul>
</nav>
</div>
</details>
</div>
</div>
<div class="min-w-0 min-h-0 max-w-prose">
<div class="flex px-4 py-3 rounded-md bg-primary-100 dark:bg-primary-900">
<span class="pr-3 text-primary-400">
<span class="ltr:pr-3 rtl:pl-3 text-primary-400">
<span class="relative inline-block align-text-bottom icon"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="exclamation-triangle" class="svg-inline--fa fa-exclamation-triangle fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentcolor" d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937.0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154.0l239.94 416.028zM288 354c-25.405.0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346 7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373.0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884.0-12.356 5.78-11.981 12.654z"/></svg>
</span>
</span>
<span class="no-prose dark:text-neutral-300">This section assumes you have already <a href=https://jpanther.github.io/congo/docs/installation/>installed the Congo theme</a>.</span>
<span class=dark:text-neutral-300>This section assumes you have already <a href=https://jpanther.github.io/congo/docs/installation/>installed the Congo theme</a>.</span>
</div>
<p>The config files that ship with Congo contain all of the possible settings that the theme recognises. By default, many of these are commented out but you can simply uncomment them to activate or change a specific feature.</p>
<p>There are a few things you should set in <code>config.toml</code> for a new installation:</p>
<h2 id=basic-configuration class="relative group">Basic configuration <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=#basic-configuration aria-label=Anchor>#</a></span></h2>
<p>Before creating any content, there are a few things you should set for a new installation. Starting in the <code>config.toml</code> file, set the <code>baseURL</code> and <code>languageCode</code> parameters. The <code>languageCode</code> should be set to the main language that you will be using to author your content.</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>baseURL</span> <span class=p>=</span> <span class=s2>&#34;https://your_domain.com&#34;</span>
<span class=nx>languageCode</span> <span class=p>=</span> <span class=s2>&#34;en-AU&#34;</span>
<span class=nx>languageCode</span> <span class=p>=</span> <span class=s2>&#34;en&#34;</span>
</code></pre></div><p>The next step is to configure the language settings. Although Congo supports multilingual setups, for now, just configure the main language.</p>
<p>Locate the <code>languages.en.toml</code> file in the config folder. If your main language is English you can use this file as is. Otherwise, rename it so that it includes the correct language code in the filename. For example, for French, rename the file to <code>languages.fr.toml</code>.</p>
<div class="flex px-4 py-3 rounded-md bg-primary-100 dark:bg-primary-900">
<span class="ltr:pr-3 rtl:pl-3 text-primary-400">
<span class="relative inline-block align-text-bottom icon"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="exclamation-triangle" class="svg-inline--fa fa-exclamation-triangle fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentcolor" d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937.0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154.0l239.94 416.028zM288 354c-25.405.0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346 7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373.0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884.0-12.356 5.78-11.981 12.654z"/></svg>
</span>
</span>
<span class=dark:text-neutral-300>Note that the language code in the language config filename should match the <code>languageCode</code> setting in <code>config.toml</code>.</span>
</div>
<div class=highlight><pre tabindex=0 class=chroma><code class=language-toml data-lang=toml><span class=c># config/_default/languages.en.toml</span>
<span class=nx>title</span> <span class=p>=</span> <span class=s2>&#34;My awesome website&#34;</span>
<span class=p>[</span><span class=nx>author</span><span class=p>]</span>
<span class=nx>name</span> <span class=p>=</span> <span class=s2>&#34;My name&#34;</span>
<span class=nx>image</span> <span class=p>=</span> <span class=s2>&#34;img/author.jpg&#34;</span>
<span class=nx>headline</span> <span class=p>=</span> <span class=s2>&#34;A generally awesome human&#34;</span>
<span class=nx>bio</span> <span class=p>=</span> <span class=s2>&#34;A little bit about me&#34;</span>
<span class=nx>links</span> <span class=p>=</span> <span class=p>[</span>
<span class=p>{</span> <span class=nx>twitter</span> <span class=p>=</span> <span class=s2>&#34;https://twitter.com/username&#34;</span> <span class=p>}</span>
<span class=p>]</span>
</code></pre></div><p>The <code>[author]</code> configuration determines how the author information is displayed on the website. The image should be placed in the site&rsquo;s <code>static/</code> folder. Links will be displayed in the order they are listed.</p>
<p>Further detail about these configuration options is covered in the <a href=https://jpanther.github.io/congo/docs/configuration/>Configuration</a> section.</p>
<h2 id=colour-schemes>Colour schemes <a class=heading-anchor href=#colour-schemes aria-label=Anchor>#</a></h2>
</code></pre></div><p>The <code>[author]</code> configuration determines how the author information is displayed on the website. The image should be placed in the site&rsquo;s <code>assets/</code> folder. Links will be displayed in the order they are listed.</p>
<p>If you need extra detail, further information about each of these configuration options, is covered in the <a href=https://jpanther.github.io/congo/docs/configuration/>Configuration</a> section.</p>
<h2 id=colour-schemes class="relative group">Colour schemes <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=#colour-schemes aria-label=Anchor>#</a></span></h2>
<p>Congo ships with a number of colour schemes out of the box. To change the scheme, simply set the <code>colorScheme</code> theme parameter. Valid options are <code>congo</code> (default), <code>avocado</code>, <code>fire</code>, <code>ocean</code> and <code>slate</code>.</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=nx>colorScheme</span> <span class=p>=</span> <span class=s2>&#34;congo&#34;</span>
</code></pre></div><p>Congo defines a three-colour palette that is used throughout the theme. Each main colour contains ten shades which are based upon the colours that are included in <a href=https://tailwindcss.com/docs/customizing-colors#color-palette-reference>Tailwind</a>.</p>
<h4 id=congo-default>Congo (default) <a class=heading-anchor href=#congo-default aria-label=Anchor>#</a></h4>
<h4 id=congo-default class="relative group">Congo (default) <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=#congo-default aria-label=Anchor>#</a></span></h4>
<div class="flex justify-between">
<span class="w-full py-6 mr-3 rounded-md" style=background-color:#71717a></span>
<span class="w-full py-6 mr-3 rounded-md" style=background-color:#8b5cf6></span>
<span class="w-full py-6 mr-3 rounded-md" style=background-color:#d946ef></span>
</div>
<h4 id=avocado>Avocado <a class=heading-anchor href=#avocado aria-label=Anchor>#</a></h4>
<h4 id=avocado class="relative group">Avocado <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=#avocado aria-label=Anchor>#</a></span></h4>
<div class="flex justify-between">
<span class="w-full py-6 mr-3 rounded-md" style=background-color:#78716c></span>
<span class="w-full py-6 mr-3 rounded-md" style=background-color:#84cc16></span>
<span class="w-full py-6 mr-3 rounded-md" style=background-color:#10b981></span>
</div>
<h4 id=fire>Fire <a class=heading-anchor href=#fire aria-label=Anchor>#</a></h4>
<h4 id=fire class="relative group">Fire <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=#fire aria-label=Anchor>#</a></span></h4>
<div class="flex justify-between">
<span class="w-full py-6 mr-3 rounded-md" style=background-color:#78716c></span>
<span class="w-full py-6 mr-3 rounded-md" style=background-color:#f97316></span>
<span class="w-full py-6 mr-3 rounded-md" style=background-color:#f43f5e></span>
</div>
<h4 id=ocean>Ocean <a class=heading-anchor href=#ocean aria-label=Anchor>#</a></h4>
<h4 id=ocean class="relative group">Ocean <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=#ocean aria-label=Anchor>#</a></span></h4>
<div class="flex justify-between">
<span class="w-full py-6 mr-3 rounded-md" style=background-color:#64748b></span>
<span class="w-full py-6 mr-3 rounded-md" style=background-color:#3b82f6></span>
<span class="w-full py-6 mr-3 rounded-md" style=background-color:#06b6d4></span>
</div>
<h4 id=slate>Slate <a class=heading-anchor href=#slate aria-label=Anchor>#</a></h4>
<h4 id=slate class="relative group">Slate <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=#slate aria-label=Anchor>#</a></span></h4>
<div class="flex justify-between">
<span class="w-full py-6 mr-3 rounded-md" style=background-color:#6b7280></span>
<span class="w-full py-6 mr-3 rounded-md" style=background-color:#6b7280></span>
<span class="w-full py-6 mr-3 rounded-md" style=background-color:#64748b></span>
<span class="w-full py-6 mr-3 rounded-md" style=background-color:#6b7280></span>
</div>
<p>Although these are the default schemes, you can also create your own. Refer to the <a href=https://jpanther.github.io/congo/docs/advanced-customisation/#colour-schemes>Advanced Customisation</a> section for details.</p>
<h2 id=organising-content>Organising content <a class=heading-anchor href=#organising-content aria-label=Anchor>#</a></h2>
<h2 id=organising-content class="relative group">Organising content <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=#organising-content aria-label=Anchor>#</a></span></h2>
<p>By default, Congo doesn&rsquo;t force you to use a particular content type. In doing so you are free to define your content as you wish. You might prefer <em>pages</em> for a static site, <em>posts</em> for a blog, or <em>projects</em> for a portfolio.</p>
<p>The same logic applies to taxonomies. Some people prefer to use <em>tags</em> and <em>categories</em>, others prefer to use <em>topics</em>.</p>
<p>Hugo defaults to using posts, tags and categories out of the box and this will work fine if that&rsquo;s what you want. If you wish to customise this, however, you can do so by creating the following files:</p>
<p>Here&rsquo;s a quick overview of a basic Congo project. All content is placed within the <code>content</code> folder:</p>
<div class=highlight><pre tabindex=0 class=chroma><code class=language-shell data-lang=shell>.
├── assets
│ └── img
│ └── author.jpg
├── config
│ └── _default
├── content
│ ├── _index.md
│ ├── about.md
│ └── posts
│ ├── _index.md
│ ├── first-post.md
│ └── another-post
│ ├── aardvark.jpg
│ └── index.md
└── themes
└── congo
</code></pre></div><p>It&rsquo;s important to have a firm grasp of how Hugo expects content to be organised as the theme is designed to take full advantage of Hugo page bundles. Be sure to read the <a href=https://gohugo.io/content-management/organization/>official Hugo docs</a> for more information.</p>
<p>Congo is also flexible when it comes to taxonomies. Some people prefer to use <em>tags</em> and <em>categories</em> to group their content, others prefer to use <em>topics</em>.</p>
<p>Hugo defaults to using posts, tags and categories out of the box and this will work fine if that&rsquo;s what you want. If you wish to customise this, however, you can do so by creating a <code>taxonomies.toml</code> configuation file:</p>
<div class=highlight><pre tabindex=0 class=chroma><code class=language-toml data-lang=toml><span class=c># config/_default/taxonomies.toml</span>
<span class=nx>topic</span> <span class=p>=</span> <span class=s2>&#34;topics&#34;</span>
</code></pre></div><p>This will replace the default <em>tags</em> and <em>categories</em> with <em>topics</em>. Refer to the <a href=https://gohugo.io/content-management/taxonomies/>Hugo Taxonomy docs</a> for more information on naming taxonomies.</p>
<p>When you create a new taxonomy, you will need to adjust the navigation links on the website to point to the correct sections.</p>
<h2 id=menus>Menus <a class=heading-anchor href=#menus aria-label=Anchor>#</a></h2>
<p>When you create a new taxonomy, you will need to adjust the navigation links on the website to point to the correct sections, which is covered below.</p>
<h2 id=menus class="relative group">Menus <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=#menus aria-label=Anchor>#</a></span></h2>
<p>Congo has two menus that can be customised to suit the content and layout of your site. The <code>main</code> menu appears in the site header and the <code>footer</code> menu appears at the bottom of the page just above the copyright notice.</p>
<p>Both menus are configured in the <code>menus.toml</code> file.</p>
<div class=highlight><pre tabindex=0 class=chroma><code class=language-toml data-lang=toml><span class=c># config/_default/menus.toml</span>
@ -174,49 +247,89 @@ Getting Started
<p>The <code>pageRef</code> parameter allows you to easily reference Hugo content pages and taxonomies. It is the quickest way to configure the menu as you can simply refer to any Hugo content item and it will automatically build the correct link. To link to external URLs, the <code>url</code> parameter can be used.</p>
<p>Menu links will be sorted from lowest to highest <code>weight</code>, and then alphabetically by <code>name</code>.</p>
<p>Both menus are completely optional and can be commented out if not required. Use the template provided in the file as a guide.</p>
<h2 id=detailed-configuration>Detailed configuration <a class=heading-anchor href=#detailed-configuration aria-label=Anchor>#</a></h2>
<h2 id=detailed-configuration class="relative group">Detailed configuration <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=#detailed-configuration aria-label=Anchor>#</a></span></h2>
<p>The steps above are the bare minimum configuration. If you now run <code>hugo server</code> you will be presented with a blank Congo website. Detailed configuration is covered in the <a href=https://jpanther.github.io/congo/docs/configuration/>Configuration</a> section.</p>
</div>
</section>
<footer class=pt-8>
<div class="pt-8 article-pagination">
<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 href=/congo/docs/installation/>
<span class="mr-3 article-pagination-direction">&larr;</span>
<a class="flex group" href=/congo/docs/installation/>
<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="article-pagination-title mt-[0.1rem] leading-6">Installation</span>
<span class="mt-[0.1rem] leading-6 group-hover:underline group-hover:decoration-primary-500">Installation</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" href=/congo/docs/configuration/>
<a class="flex text-right group" href=/congo/docs/configuration/>
<span class="flex flex-col">
<span class="article-pagination-title mt-[0.1rem] leading-6">Configuration</span>
<span class="mt-[0.1rem] leading-6 group-hover:underline group-hover:decoration-primary-500">Configuration</span>
<span class="mt-[0.1rem] text-xs text-neutral-500 dark:text-neutral-400">
</span>
</span>
<span class="ml-3 article-pagination-direction">&rarr;</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>
</main><footer class=py-10>
<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">
&copy;
2022
Congo
© 2022 Congo contributors
</p>
<p class="text-xs text-neutral-400 dark:text-neutral-600">
Powered by <a class="hover:underline hover:underline-primary-400 hover:text-primary-500" href=https://gohugo.io/ target=_blank rel="noopener noreferrer">Hugo</a> & <a class="hover:underline hover:underline-primary-400 hover:text-primary-500" href=https://git.io/hugo-congo target=_blank rel="noopener noreferrer">Congo</a>
<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>

Binary file not shown.

After

Width:  |  Height:  |  Size: 72 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 114 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 36 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 42 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

View File

@ -1,15 +1,14 @@
<!doctype html><html lang=en-au><head>
<!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 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>Homepage Layout &#183; Congo</title>
<meta name=title content="Homepage Layout &#183; Congo">
<meta name=description content="Configuring the homepage layout in the Congo theme.">
<meta name=description content="A powerful, lightweight theme for Hugo built with Tailwind CSS.">
<link rel=canonical href=https://jpanther.github.io/congo/docs/homepage-layout/>
<link type=text/css rel=stylesheet href=/congo/css/schemes/congo.min.b48d6ba061dc77186a2524fb8aac5ac3823b2679a9299ca60325abbccc9c1764c884715f0ba24b4e2776cb3814df4af1f4c854b87207cd5d4c7a254da9b55751.css integrity="sha512-tI1roGHcdxhqJST7iqxaw4I7JnmpKZymAyWrvMycF2TIhHFfC6JLTid2yzgU30rx9MhUuHIHzV1MeiVNqbVXUQ==">
<link type=text/css rel=stylesheet href=/congo/css/compiled/main.min.51037225bb3c65887773b052da1e38f105db8f3d9aa6a34ba3c5c40c88fb309724f8cc5ed2871adc7e55dacab9b36c60ce7aa7a61dff2cc638f8b435c898d5a8.css integrity="sha512-UQNyJbs8ZYh3c7BS2h448QXbjz2apqNLo8XEDIj7MJck+Mxe0oca3H5V2sq5s2xgznqnph3/LMY4+LQ1yJjVqA==">
<script>function loadPreferredAppearance(){localStorage.preferredAppearance==="dark"||!("preferredAppearance"in localStorage)&&window.matchMedia("(prefers-color-scheme: dark)").matches?document.documentElement.classList.add("dark"):document.documentElement.classList.remove("dark")}function setPreferredAppearance(a){a=="default"?localStorage.removeItem("preferredAppearance"):localStorage.preferredAppearance=a,loadPreferredAppearance()}loadPreferredAppearance(),window.matchMedia("(prefers-color-scheme: dark)").addListener(loadPreferredAppearance)</script>
<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>
@ -19,51 +18,60 @@
<meta property="og:type" content="article">
<meta property="og:url" content="https://jpanther.github.io/congo/docs/homepage-layout/"><meta property="article:section" content="docs">
<meta property="article:published_time" content="2020-08-13T00:00:00+00:00">
<meta property="article:modified_time" content="2020-08-13T00:00:00+00:00">
<meta property="article:modified_time" content="2020-08-13T00:00:00+00:00"><meta property="og:site_name" content="Congo">
<meta name=twitter:card content="summary">
<meta name=twitter:title content="Homepage Layout">
<meta name=twitter:description content="Configuring the homepage layout in the Congo theme.">
<script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","articleSection":"Documentation","name":"Homepage Layout","headline":"Homepage Layout","description":"Configuring the homepage layout in the Congo theme.","inLanguage":"en-AU","author":{"@type":"Person","name":"Congo"},"creator":{"@type":"Person","name":"Congo"},"copyrightHolder":"Congo","copyrightYear":"2020","dateCreated":"2020-08-13T00:00:00\u002b00:00","datePublished":"2020-08-13T00:00:00\u002b00:00","dateModified":"2020-08-13T00:00:00\u002b00:00","url":"https:\/\/jpanther.github.io\/congo\/docs\/homepage-layout\/","keywords":["homepage","layouts","docs"],"wordCount":"478"}</script>
<meta name=generator content="Hugo 0.92.0">
<script type=application/ld+json>[{"@context":"https://schema.org","@type":"Article","articleSection":"Documentation","name":"Homepage Layout","headline":"Homepage Layout","description":"Configuring the homepage layout in the Congo theme.","abstract":"Congo provides a fully flexible homepage layout.","inLanguage":"en-au","url":"https:\/\/jpanther.github.io\/congo\/docs\/homepage-layout\/","author":{"@type":"Person","name":"Congo"},"copyrightYear":"2020","dateCreated":"2020-08-13T00:00:00\u002b00:00","datePublished":"2020-08-13T00:00:00\u002b00:00","dateModified":"2020-08-13T00:00:00\u002b00:00","keywords":["homepage","layouts","docs"],"mainEntityOfPage":"true","wordCount":"478"}]</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"><header class="flex justify-between py-6 font-semibold sm:items-center sm:py-10 text-neutral-900 dark:text-neutral">
<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:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" rel=me href=/congo/>Congo</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=/congo/docs/ title=Documentation>Docs</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=/congo/samples/ title="Content Samples">Samples</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=/congo/users/ title=Users>Users</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=https://github.com/jpanther/congo title>GitHub</a>
<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 class=flex-grow>
<article class=max-w-prose>
<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:underline-neutral-300 dark:underline-neutral-600" href=/congo/>Welcome to Congo! :tada:</a><span class="px-1 text-primary-500">/</span>
<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:underline-neutral-300 dark:underline-neutral-600" href=/congo/docs/>Documentation</a><span class="px-1 text-primary-500">/</span>
<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:underline-neutral-300 dark:underline-neutral-600" href=/congo/docs/homepage-layout/>Homepage Layout</a><span class="px-1 text-primary-500">/</span>
<a class="hover:underline hover:decoration-neutral-300 dark:underline-neutral-600" href=/congo/docs/homepage-layout/>Homepage Layout</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">
@ -81,70 +89,154 @@ Homepage Layout
</div>
</div>
</header>
<section class="prose dark:prose-light">
<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=#page-layout>Page layout</a></li>
<li><a href=#profile-layout>Profile layout</a></li>
<li><a href=#custom-layout>Custom layout</a></li>
<li><a href=#recent-articles>Recent articles</a></li>
</ul>
</nav>
</div>
</details>
</div>
</div>
<div class="min-w-0 min-h-0 max-w-prose">
<p>Congo provides a fully flexible homepage layout. There are two main templates to choose from with additional settings to adjust the design. Alternatively, you can also provide your own template and have complete control over the homepage content.</p>
<p>The layout of the homepage is controlled by the <code>homepage.layout</code> setting in the <code>params.toml</code> configuration file. Additionally, all layouts have the option to include a listing of <a href=#recent-articles>recent articles</a>.</p>
<h2 id=page-layout>Page layout <a class=heading-anchor href=#page-layout aria-label=Anchor>#</a></h2>
<h2 id=page-layout class="relative group">Page layout <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=#page-layout aria-label=Anchor>#</a></span></h2>
<p>The default layout is the page layout. It&rsquo;s simply a normal content page that displays your Markdown content. It&rsquo;s great for static websites and provides a lot of flexibility.</p>
<p><img src=home-page.jpg alt="Profile layout"></p>
<p>
<figure>
<img class="my-0 rounded-md" srcset="/congo/docs/homepage-layout/home-page_hu9ebf2dc0eb5e596beb284e744e4eca5b_246440_330x0_resize_q75_box.jpg 330w,
/congo/docs/homepage-layout/home-page_hu9ebf2dc0eb5e596beb284e744e4eca5b_246440_660x0_resize_q75_box.jpg 660w,
/congo/docs/homepage-layout/home-page_hu9ebf2dc0eb5e596beb284e744e4eca5b_246440_1024x0_resize_q75_box.jpg 1024w,
/congo/docs/homepage-layout/home-page_hu9ebf2dc0eb5e596beb284e744e4eca5b_246440_1320x0_resize_q75_box.jpg 2x" src=/congo/docs/homepage-layout/home-page_hu9ebf2dc0eb5e596beb284e744e4eca5b_246440_660x0_resize_q75_box.jpg alt="Screenshot of homepage layout">
<figcaption></figcaption>
</figure>
</p>
<p>To enable the page layout, set <code>homepage.layout = "page"</code> in the <code>params.toml</code> configuration file.</p>
<h2 id=profile-layout>Profile layout <a class=heading-anchor href=#profile-layout aria-label=Anchor>#</a></h2>
<h2 id=profile-layout class="relative group">Profile layout <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=#profile-layout aria-label=Anchor>#</a></span></h2>
<p>The profile layout is great for personal websites and blogs. It puts the author&rsquo;s details front and centre by providing an image and links to social profiles.</p>
<p><img src=home-profile.jpg alt="Profile layout"></p>
<p>The author information is provided in the <code>config.toml</code> configuration file. Refer to the <a href=https://jpanther.github.io/congo/docs/getting-started/>Getting Started</a> and <a href=https://jpanther.github.io/congo/docs/configuration/#site-configuration>Site Configuration</a> sections for parameter details.</p>
<p>
<figure>
<img class="my-0 rounded-md" srcset="/congo/docs/homepage-layout/home-profile_hueedbd6540c5e7a1ab659695612c95805_79548_330x0_resize_q75_box.jpg 330w,
/congo/docs/homepage-layout/home-profile_hueedbd6540c5e7a1ab659695612c95805_79548_660x0_resize_q75_box.jpg 660w,
/congo/docs/homepage-layout/home-profile_hueedbd6540c5e7a1ab659695612c95805_79548_1024x0_resize_q75_box.jpg 1024w,
/congo/docs/homepage-layout/home-profile_hueedbd6540c5e7a1ab659695612c95805_79548_1320x0_resize_q75_box.jpg 2x" src=/congo/docs/homepage-layout/home-profile_hueedbd6540c5e7a1ab659695612c95805_79548_660x0_resize_q75_box.jpg alt="Screenshot of profile layout">
<figcaption></figcaption>
</figure>
</p>
<p>The author information is provided in the languages configuration file. Refer to the <a href=https://jpanther.github.io/congo/docs/getting-started/>Getting Started</a> and <a href=https://jpanther.github.io/congo/docs/configuration/##language-and-i18n>Language Configuration</a> sections for parameter details.</p>
<p>Additionally, any Markdown content that is provided in the homepage content will be placed below the author profile. This allows extra flexibility for displaying a bio or other custom content using shortcodes.</p>
<p>To enable the profile layout, set <code>homepage.layout = "profile"</code> in the <code>params.toml</code> configuration file.</p>
<h2 id=custom-layout>Custom layout <a class=heading-anchor href=#custom-layout aria-label=Anchor>#</a></h2>
<h2 id=custom-layout class="relative group">Custom layout <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-layout aria-label=Anchor>#</a></span></h2>
<p>If the built-in homepage layouts aren&rsquo;t sufficient for your needs, you have the option to provide your own custom layout. This allows you to have total control over the page content and essentially gives you a blank slate to work with.</p>
<p>To enable the custom layout, set <code>homepage.layout = "custom"</code> in the <code>params.toml</code> configuration file.</p>
<p>With the configuration value set, create a new <code>custom.html</code> file and place it in <code>layouts/partials/home/custom.html</code>. Now whatever is in the <code>custom.html</code> file will be placed in the content area of the site homepage. You may use whatever HTML, Tailwind, or Hugo templating functions you wish to define your layout.</p>
<p>To include <a href=#recent-articles>recent articles</a> on the custom layout, use the <code>recent-articles.html</code> partial.</p>
<p>As an example, the <a href=https://jpanther.github.io/congo/>homepage</a> on this site uses the custom layout to allow toggling between the profile and page layouts. Visit the <a href=https://github.com/jpanther/congo/blob/dev/exampleSite/layouts/partials/home/custom.html>GitHub repo</a> to see how it works.</p>
<h2 id=recent-articles>Recent articles <a class=heading-anchor href=#recent-articles aria-label=Anchor>#</a></h2>
<h2 id=recent-articles class="relative group">Recent articles <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=#recent-articles aria-label=Anchor>#</a></span></h2>
<p>All homepage layouts have the option of displaying recent articles below the main page content. To enable this, simply set the <code>homepage.showRecent</code> setting to <code>true</code> in the <code>params.toml</code> configuration file.</p>
<p><img src=home-profile-list.jpg alt="Profile layout with recent articles"></p>
<p>
<figure>
<img class="my-0 rounded-md" srcset="/congo/docs/homepage-layout/home-profile-list_huf797f5adbd488711c27909ebe8ed8db6_105595_330x0_resize_q75_box.jpg 330w,
/congo/docs/homepage-layout/home-profile-list_huf797f5adbd488711c27909ebe8ed8db6_105595_660x0_resize_q75_box.jpg 660w,
/congo/docs/homepage-layout/home-profile-list_huf797f5adbd488711c27909ebe8ed8db6_105595_1024x0_resize_q75_box.jpg 1024w,
/congo/docs/homepage-layout/home-profile-list_huf797f5adbd488711c27909ebe8ed8db6_105595_1320x0_resize_q75_box.jpg 2x" src=/congo/docs/homepage-layout/home-profile-list_huf797f5adbd488711c27909ebe8ed8db6_105595_660x0_resize_q75_box.jpg alt="Profile layout with recent articles">
<figcaption></figcaption>
</figure>
</p>
<p>The articles listed in this section are derived from the <code>homepage.mainSections</code> setting which allows for whatever content types you are using on your website. For instance, if you had content sections for <em>posts</em> and <em>projects</em> you could set this setting to <code>["posts", "projects"]</code> and all the articles in these two sections would be used to populate the recent list. The theme expects this setting to be an array so if you only use one section for all your content, you should set this accordingly: <code>["blog"]</code>.</p>
</div>
</section>
<footer class=pt-8>
<div class="pt-8 article-pagination">
<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 href=/congo/docs/configuration/>
<span class="mr-3 article-pagination-direction">&larr;</span>
<a class="flex group" href=/congo/docs/configuration/>
<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="article-pagination-title mt-[0.1rem] leading-6">Configuration</span>
<span class="mt-[0.1rem] leading-6 group-hover:underline group-hover:decoration-primary-500">Configuration</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" href=/congo/docs/front-matter/>
<a class="flex text-right group" href=/congo/docs/front-matter/>
<span class="flex flex-col">
<span class="article-pagination-title mt-[0.1rem] leading-6">Front Matter</span>
<span class="mt-[0.1rem] leading-6 group-hover:underline group-hover:decoration-primary-500">Front Matter</span>
<span class="mt-[0.1rem] text-xs text-neutral-500 dark:text-neutral-400">
</span>
</span>
<span class="ml-3 article-pagination-direction">&rarr;</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>
</main><footer class=py-10>
<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">
&copy;
2022
Congo
© 2022 Congo contributors
</p>
<p class="text-xs text-neutral-400 dark:text-neutral-600">
Powered by <a class="hover:underline hover:underline-primary-400 hover:text-primary-500" href=https://gohugo.io/ target=_blank rel="noopener noreferrer">Hugo</a> & <a class="hover:underline hover:underline-primary-400 hover:text-primary-500" href=https://git.io/hugo-congo target=_blank rel="noopener noreferrer">Congo</a>
<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>

View File

@ -1,15 +1,14 @@
<!doctype html><html lang=en-au><head>
<!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 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>Hosting & Deployment &middot; Congo</title>
<meta name=title content="Hosting & Deployment &middot; Congo">
<meta name=description content="Learn how to deploy a Congo site.">
<meta name=description content="A powerful, lightweight theme for Hugo built with Tailwind CSS.">
<link rel=canonical href=https://jpanther.github.io/congo/docs/hosting-deployment/>
<link type=text/css rel=stylesheet href=/congo/css/schemes/congo.min.b48d6ba061dc77186a2524fb8aac5ac3823b2679a9299ca60325abbccc9c1764c884715f0ba24b4e2776cb3814df4af1f4c854b87207cd5d4c7a254da9b55751.css integrity="sha512-tI1roGHcdxhqJST7iqxaw4I7JnmpKZymAyWrvMycF2TIhHFfC6JLTid2yzgU30rx9MhUuHIHzV1MeiVNqbVXUQ==">
<link type=text/css rel=stylesheet href=/congo/css/compiled/main.min.51037225bb3c65887773b052da1e38f105db8f3d9aa6a34ba3c5c40c88fb309724f8cc5ed2871adc7e55dacab9b36c60ce7aa7a61dff2cc638f8b435c898d5a8.css integrity="sha512-UQNyJbs8ZYh3c7BS2h448QXbjz2apqNLo8XEDIj7MJck+Mxe0oca3H5V2sq5s2xgznqnph3/LMY4+LQ1yJjVqA==">
<script>function loadPreferredAppearance(){localStorage.preferredAppearance==="dark"||!("preferredAppearance"in localStorage)&&window.matchMedia("(prefers-color-scheme: dark)").matches?document.documentElement.classList.add("dark"):document.documentElement.classList.remove("dark")}function setPreferredAppearance(a){a=="default"?localStorage.removeItem("preferredAppearance"):localStorage.preferredAppearance=a,loadPreferredAppearance()}loadPreferredAppearance(),window.matchMedia("(prefers-color-scheme: dark)").addListener(loadPreferredAppearance)</script>
<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>
@ -18,52 +17,61 @@
<meta property="og:description" content="Learn how to deploy a Congo site.">
<meta property="og:type" content="article">
<meta property="og:url" content="https://jpanther.github.io/congo/docs/hosting-deployment/"><meta property="article:section" content="docs">
<meta property="article:published_time" content="2020-08-08T00:00:00+00:00">
<meta property="article:modified_time" content="2020-08-08T00:00:00+00:00">
<meta property="article:published_time" content="2020-08-07T00:00:00+00:00">
<meta property="article:modified_time" content="2020-08-07T00:00:00+00:00"><meta property="og:site_name" content="Congo">
<meta name=twitter:card content="summary">
<meta name=twitter:title content="Hosting & Deployment">
<meta name=twitter:description content="Learn how to deploy a Congo site.">
<script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","articleSection":"Documentation","name":"Hosting \u0026 Deployment","headline":"Hosting \u0026 Deployment","description":"Learn how to deploy a Congo site.","inLanguage":"en-AU","author":{"@type":"Person","name":"Congo"},"creator":{"@type":"Person","name":"Congo"},"copyrightHolder":"Congo","copyrightYear":"2020","dateCreated":"2020-08-08T00:00:00\u002b00:00","datePublished":"2020-08-08T00:00:00\u002b00:00","dateModified":"2020-08-08T00:00:00\u002b00:00","url":"https:\/\/jpanther.github.io\/congo\/docs\/hosting-deployment\/","keywords":["hosting","deployment","docs","github","netlify","render"],"wordCount":"619"}</script>
<meta name=generator content="Hugo 0.92.0">
<script type=application/ld+json>[{"@context":"https://schema.org","@type":"Article","articleSection":"Documentation","name":"Hosting \u0026 Deployment","headline":"Hosting \u0026 Deployment","description":"Learn how to deploy a Congo site.","abstract":"There are many ways to deploy your Hugo website built with Congo.","inLanguage":"en-au","url":"https:\/\/jpanther.github.io\/congo\/docs\/hosting-deployment\/","author":{"@type":"Person","name":"Congo"},"copyrightYear":"2020","dateCreated":"2020-08-07T00:00:00\u002b00:00","datePublished":"2020-08-07T00:00:00\u002b00:00","dateModified":"2020-08-07T00:00:00\u002b00:00","keywords":["hosting","deployment","docs","github","netlify","render"],"mainEntityOfPage":"true","wordCount":"619"}]</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"><header class="flex justify-between py-6 font-semibold sm:items-center sm:py-10 text-neutral-900 dark:text-neutral">
<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:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" rel=me href=/congo/>Congo</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=/congo/docs/ title=Documentation>Docs</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=/congo/samples/ title="Content Samples">Samples</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=/congo/users/ title=Users>Users</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=https://github.com/jpanther/congo title>GitHub</a>
<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 class=flex-grow>
<article class=max-w-prose>
<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:underline-neutral-300 dark:underline-neutral-600" href=/congo/>Welcome to Congo! :tada:</a><span class="px-1 text-primary-500">/</span>
<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:underline-neutral-300 dark:underline-neutral-600" href=/congo/docs/>Documentation</a><span class="px-1 text-primary-500">/</span>
<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:underline-neutral-300 dark:underline-neutral-600" href=/congo/docs/hosting-deployment/>Hosting & Deployment</a><span class="px-1 text-primary-500">/</span>
<a class="hover:underline hover:decoration-neutral-300 dark:underline-neutral-600" href=/congo/docs/hosting-deployment/>Hosting & Deployment</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">
@ -81,7 +89,27 @@ Hosting & Deployment
</div>
</div>
</header>
<section class="prose dark:prose-light">
<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=#github-pages>GitHub Pages</a></li>
<li><a href=#netlify>Netlify</a></li>
<li><a href=#render>Render</a></li>
<li><a href=#shared-hosting-vps-or-private-web-server>Shared hosting, VPS or private web server</a></li>
</ul>
</nav>
</div>
</details>
</div>
</div>
<div class="min-w-0 min-h-0 max-w-prose">
<p>There are many ways to deploy your Hugo website built with Congo. The theme is designed to be flexible in almost any deployment scenario.</p>
<p>Congo is built using relative URLs throughout the theme. This enables sites to easily be deployed to sub-folders and hosts like GitHub Pages. There&rsquo;s usually no special configuration required for this to work as long as the <code>baseURL</code> parameter has been configured in the <code>config.toml</code> file.</p>
<p>The official Hugo <a href=https://gohugo.io/hosting-and-deployment/>Hosting and Deployment</a> docs are the best place to learn how to deploy your site. The sections below contain some specific theme configuration details that can help you deploy smoothly with certain providers.</p>
@ -93,7 +121,7 @@ Hosting & Deployment
<li><a href=#shared-hosting-vps-or-private-web-server>Shared hosting, VPS or private web server</a></li>
</ul>
<hr>
<h2 id=github-pages>GitHub Pages <a class=heading-anchor href=#github-pages aria-label=Anchor>#</a></h2>
<h2 id=github-pages class="relative group">GitHub Pages <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=#github-pages aria-label=Anchor>#</a></span></h2>
<p>GitHub allows hosting on <a href=https://docs.github.com/en/pages/getting-started-with-github-pages/about-github-pages>GitHub Pages</a> using Actions. To enable this functionality, enable Pages on your repo and create a new Actions workflow to build and deploy your site.</p>
<p>The file needs to be in YAML format, placed within the <code>.github/workflows/</code> directory of your GitHub repository and named with a <code>.yml</code> extension.</p>
<div class=highlight><pre tabindex=0 class=chroma><code class=language-yaml data-lang=yaml><span class=c># .github/workflows/gh-pages.yml</span><span class=w>
@ -136,7 +164,7 @@ Hosting & Deployment
<figure><img src=/congo/docs/hosting-deployment/github-pages-source.jpg alt="Screen capture of GitHub Pages source" width=100% height=auto style=max-width:565px;max-height:95px>
</figure>
<p>Once the settings are configured, re-run the action and the site should build and deploy correctly. You can consult the actions log to check everything deployed successfully.</p>
<h2 id=netlify>Netlify <a class=heading-anchor href=#netlify aria-label=Anchor>#</a></h2>
<h2 id=netlify class="relative group">Netlify <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=#netlify aria-label=Anchor>#</a></span></h2>
<p>To deploy to <a href=https://www.netlify.com>Netlify</a>, create a new continuous deployment site and link it to your source code. The build settings can be left blank in the Netlify UI. You will only need to configure the domain you&rsquo;ll be using.</p>
<figure><img src=/congo/docs/hosting-deployment/netlify-build-settings.jpg alt="Screen capture of Netlify build settings" width=100% height=auto style=max-width:479px;max-height:331px>
</figure>
@ -157,27 +185,29 @@ Hosting & Deployment
<span class=nx>HUGO_ENV</span> <span class=p>=</span> <span class=s2>&#34;production&#34;</span>
</code></pre></div><p>This configuration assumes you are deploying Congo as a Hugo module. If you have installed the theme using another method, change the build command to simply <code>hugo --gc --minify -b $URL</code>.</p>
<p>When you push the config file to your repo, Netlify should automatically deploy your site. You can check the deploy logs in the Netlify UI to check for any errors.</p>
<h2 id=render>Render <a class=heading-anchor href=#render aria-label=Anchor>#</a></h2>
<h2 id=render class="relative group">Render <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=#render aria-label=Anchor>#</a></span></h2>
<p>Deploying to <a href=https://render.com>Render</a> is very straightforward and all configuration is via the Render UI.</p>
<p>Create a new <strong>Static Site</strong> and link it to your project&rsquo;s code repository. Then simply configure the build command to be <code>hugo --gc --minify</code> and publish directory to be <code>public</code>.</p>
<figure><img src=/congo/docs/hosting-deployment/render-settings.jpg alt="Screen capture of Render settings" width=100% height=auto style=max-width:628px;max-height:227px>
</figure>
<p>The site will automatically build and deploy whenever you push a change to your repo.</p>
<h2 id=shared-hosting-vps-or-private-web-server>Shared hosting, VPS or private web server <a class=heading-anchor href=#shared-hosting-vps-or-private-web-server aria-label=Anchor>#</a></h2>
<h2 id=shared-hosting-vps-or-private-web-server class="relative group">Shared hosting, VPS or private web server <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=#shared-hosting-vps-or-private-web-server aria-label=Anchor>#</a></span></h2>
<p>Using traditional web hosting, or deploying to your own web server, is as simple as building your Hugo site and transferring the files to your host.</p>
<p>Make sure that the <code>baseURL</code> parameter in <code>config.toml</code> is set to the full URL to the root of your website (including any sub domains or sub-folders).</p>
<p>Then build your site using <code>hugo</code> and copy the contents of the output directory to the root of your web server and you will be ready to go. By default, the output directory is named <code>public</code>.</p>
<p><em>If you need a hosting provider, check out <a href="https://www.vultr.com/?ref=8957394-8H">Vultr</a> or <a href=https://m.do.co/c/36841235e565>DigitalOcean</a>. Signing up using these affiliate links will give you up to $100 in free credit so you can try the service.</em></p>
</div>
</section>
<footer class=pt-8>
<div class="pt-8 article-pagination">
<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 href=/congo/docs/advanced-customisation/>
<span class="mr-3 article-pagination-direction">&larr;</span>
<a class="flex group" href=/congo/docs/advanced-customisation/>
<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="article-pagination-title mt-[0.1rem] leading-6">Advanced Customisation</span>
<span class="mt-[0.1rem] leading-6 group-hover:underline group-hover:decoration-primary-500">Advanced Customisation</span>
<span class="mt-[0.1rem] text-xs text-neutral-500 dark:text-neutral-400">
</span>
</span>
@ -189,18 +219,55 @@ Hosting & Deployment
</div>
</footer>
</article>
</main><footer class=py-10>
<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">
&copy;
2022
Congo
© 2022 Congo contributors
</p>
<p class="text-xs text-neutral-400 dark:text-neutral-600">
Powered by <a class="hover:underline hover:underline-primary-400 hover:text-primary-500" href=https://gohugo.io/ target=_blank rel="noopener noreferrer">Hugo</a> & <a class="hover:underline hover:underline-primary-400 hover:text-primary-500" href=https://git.io/hugo-congo target=_blank rel="noopener noreferrer">Congo</a>
<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>

View File

@ -1,16 +1,15 @@
<!doctype html><html lang=en-au><head>
<!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 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>Documentation &#183; Congo</title>
<meta name=title content="Documentation &#183; Congo">
<meta name=description content="Learn how to use Congo and its features.">
<meta name=description content="A powerful, lightweight theme for Hugo built with Tailwind CSS.">
<link rel=canonical href=https://jpanther.github.io/congo/docs/>
<link rel=alternate type=application/rss+xml href=/congo/docs/index.xml title=Congo>
<link type=text/css rel=stylesheet href=/congo/css/schemes/congo.min.b48d6ba061dc77186a2524fb8aac5ac3823b2679a9299ca60325abbccc9c1764c884715f0ba24b4e2776cb3814df4af1f4c854b87207cd5d4c7a254da9b55751.css integrity="sha512-tI1roGHcdxhqJST7iqxaw4I7JnmpKZymAyWrvMycF2TIhHFfC6JLTid2yzgU30rx9MhUuHIHzV1MeiVNqbVXUQ==">
<link type=text/css rel=stylesheet href=/congo/css/compiled/main.min.51037225bb3c65887773b052da1e38f105db8f3d9aa6a34ba3c5c40c88fb309724f8cc5ed2871adc7e55dacab9b36c60ce7aa7a61dff2cc638f8b435c898d5a8.css integrity="sha512-UQNyJbs8ZYh3c7BS2h448QXbjz2apqNLo8XEDIj7MJck+Mxe0oca3H5V2sq5s2xgznqnph3/LMY4+LQ1yJjVqA==">
<script>function loadPreferredAppearance(){localStorage.preferredAppearance==="dark"||!("preferredAppearance"in localStorage)&&window.matchMedia("(prefers-color-scheme: dark)").matches?document.documentElement.classList.add("dark"):document.documentElement.classList.remove("dark")}function setPreferredAppearance(a){a=="default"?localStorage.removeItem("preferredAppearance"):localStorage.preferredAppearance=a,loadPreferredAppearance()}loadPreferredAppearance(),window.matchMedia("(prefers-color-scheme: dark)").addListener(loadPreferredAppearance)</script>
<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>
@ -18,114 +17,81 @@
<meta property="og:title" content="Documentation">
<meta property="og:description" content="Learn how to use Congo and its features.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://jpanther.github.io/congo/docs/">
<meta property="og:url" content="https://jpanther.github.io/congo/docs/"><meta property="og:site_name" content="Congo">
<meta name=twitter:card content="summary">
<meta name=twitter:title content="Documentation">
<meta name=twitter:description content="Learn how to use Congo and its features.">
<meta name=generator content="Hugo 0.92.0">
<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"><header class="flex justify-between py-6 font-semibold sm:items-center sm:py-10 text-neutral-900 dark:text-neutral">
<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:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" rel=me href=/congo/>Congo</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=/congo/docs/ title=Documentation>Docs</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=/congo/samples/ title="Content Samples">Samples</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=/congo/users/ title=Users>Users</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=https://github.com/jpanther/congo title>GitHub</a>
<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 class=flex-grow>
<main id=main-content class=relative>
<header>
<ol class="text-sm text-neutral-500 dark:text-neutral-400">
<li class="inline hidden">
<a class="hover:underline hover:underline-neutral-300 dark:underline-neutral-600" href=/congo/>Welcome to Congo! :tada:</a><span class="px-1 text-primary-500">/</span>
<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 hidden">
<a class="hover:underline hover:underline-neutral-300 dark:underline-neutral-600" href=/congo/docs/>Documentation</a><span class="px-1 text-primary-500">/</span>
<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>
</ol>
<section class="prose dark:prose-light">
<h1 class="mb-3 text-4xl font-extrabold text-neutral-800">Documentation</h1>
<section><div class="!mb-9 text-xl text-neutral-500 dark:text-neutral-400">
<h1 class="mt-0 text-4xl font-extrabold text-neutral-900 dark:text-neutral">Documentation</h1>
</header>
<section class="flex flex-col max-w-full prose lg:flex-row dark:prose-invert mt-0">
<div class="min-w-0 min-h-0 max-w-prose">
<div class="!mb-9 text-xl lead">
Simple, yet powerful. Learn how to use Congo and its features.
</div>
<figure><img src=/congo/docs/screenshot.png>
<p>
<figure>
<img class="my-0 rounded-md" srcset="/congo/docs/screenshot_huf6d0e0a2859ba579263d522407d5f5ad_1218668_330x0_resize_box_3.png 330w,
/congo/docs/screenshot_huf6d0e0a2859ba579263d522407d5f5ad_1218668_660x0_resize_box_3.png 660w,
/congo/docs/screenshot_huf6d0e0a2859ba579263d522407d5f5ad_1218668_1024x0_resize_box_3.png 1024w,
/congo/docs/screenshot_huf6d0e0a2859ba579263d522407d5f5ad_1218668_1320x0_resize_box_3.png 2x" src=/congo/docs/screenshot_huf6d0e0a2859ba579263d522407d5f5ad_1218668_660x0_resize_box_3.png alt="Screenshots of Congo on an iPhone, iPad and MacBook">
<figcaption></figcaption>
</figure>
</p>
<p>This section contains everything you need to know about Congo. If you&rsquo;re new, check out the <a href=https://jpanther.github.io/congo/docs/installation/>Installation</a> guide to begin or visit the <a href=https://jpanther.github.io/congo/samples/>Samples</a> section to see what Congo can do.</p>
<hr>
</div>
</section>
</section>
</header>
<section>
<article>
<h3 class="flex items-center mt-6 text-xl font-semibold">
<a class="hover:underline hover:underline-primary-500 hover:underline-offset-small text-neutral-800 dark:text-neutral" href=/congo/docs/installation/>Installation</a>
</h3>
<div class="text-sm text-neutral-500 dark:text-neutral-400">
<div class="flex flex-row flex-wrap items-center">
<span title="Reading time">5 mins</span>
</div>
</div>
</article>
<article>
<h3 class="flex items-center mt-6 text-xl font-semibold">
<a class="hover:underline hover:underline-primary-500 hover:underline-offset-small text-neutral-800 dark:text-neutral" href=/congo/docs/getting-started/>Getting Started</a>
</h3>
<div class="text-sm text-neutral-500 dark:text-neutral-400">
<div class="flex flex-row flex-wrap items-center">
<span title="Reading time">3 mins</span>
</div>
</div>
</article>
<article>
<h3 class="flex items-center mt-6 text-xl font-semibold">
<a class="hover:underline hover:underline-primary-500 hover:underline-offset-small text-neutral-800 dark:text-neutral" href=/congo/docs/configuration/>Configuration</a>
</h3>
<div class="text-sm text-neutral-500 dark:text-neutral-400">
<div class="flex flex-row flex-wrap items-center">
<span title="Reading time">7 mins</span>
</div>
</div>
</article>
<article>
<h3 class="flex items-center mt-6 text-xl font-semibold">
<a class="hover:underline hover:underline-primary-500 hover:underline-offset-small text-neutral-800 dark:text-neutral" href=/congo/docs/homepage-layout/>Homepage Layout</a>
</h3>
<div class="text-sm text-neutral-500 dark:text-neutral-400">
<div class="flex flex-row flex-wrap items-center">
<span title="Reading time">3 mins</span>
</div>
</div>
</article>
<article>
<h3 class="flex items-center mt-6 text-xl font-semibold">
<a class="hover:underline hover:underline-primary-500 hover:underline-offset-small text-neutral-800 dark:text-neutral" href=/congo/docs/front-matter/>Front Matter</a>
</h3>
<div class="text-sm text-neutral-500 dark:text-neutral-400">
<div class="flex flex-row flex-wrap items-center">
<span title="Reading time">3 mins</span>
</div>
</div>
</article>
<article>
<h3 class="flex items-center mt-6 text-xl font-semibold">
<a class="hover:underline hover:underline-primary-500 hover:underline-offset-small text-neutral-800 dark:text-neutral" href=/congo/docs/shortcodes/>Shortcodes</a>
<a class="hover:underline hover:decoration-primary-500 hover:underline-offset-2 text-neutral-800 dark:text-neutral" href=/congo/docs/version-2/>What's New in 2.0 ✨</a>
</h3>
<div class="text-sm text-neutral-500 dark:text-neutral-400">
<div class="flex flex-row flex-wrap items-center">
@ -135,17 +101,7 @@ Simple, yet powerful. Learn how to use Congo and its features.
</article>
<article>
<h3 class="flex items-center mt-6 text-xl font-semibold">
<a class="hover:underline hover:underline-primary-500 hover:underline-offset-small text-neutral-800 dark:text-neutral" href=/congo/docs/partials/>Partials</a>
</h3>
<div class="text-sm text-neutral-500 dark:text-neutral-400">
<div class="flex flex-row flex-wrap items-center">
<span title="Reading time">4 mins</span>
</div>
</div>
</article>
<article>
<h3 class="flex items-center mt-6 text-xl font-semibold">
<a class="hover:underline hover:underline-primary-500 hover:underline-offset-small text-neutral-800 dark:text-neutral" href=/congo/docs/advanced-customisation/>Advanced Customisation</a>
<a class="hover:underline hover:decoration-primary-500 hover:underline-offset-2 text-neutral-800 dark:text-neutral" href=/congo/docs/installation/>Installation</a>
</h3>
<div class="text-sm text-neutral-500 dark:text-neutral-400">
<div class="flex flex-row flex-wrap items-center">
@ -155,7 +111,87 @@ Simple, yet powerful. Learn how to use Congo and its features.
</article>
<article>
<h3 class="flex items-center mt-6 text-xl font-semibold">
<a class="hover:underline hover:underline-primary-500 hover:underline-offset-small text-neutral-800 dark:text-neutral" href=/congo/docs/hosting-deployment/>Hosting & Deployment</a>
<a class="hover:underline hover:decoration-primary-500 hover:underline-offset-2 text-neutral-800 dark:text-neutral" href=/congo/docs/getting-started/>Getting Started</a>
</h3>
<div class="text-sm text-neutral-500 dark:text-neutral-400">
<div class="flex flex-row flex-wrap items-center">
<span title="Reading time">5 mins</span>
</div>
</div>
</article>
<article>
<h3 class="flex items-center mt-6 text-xl font-semibold">
<a class="hover:underline hover:decoration-primary-500 hover:underline-offset-2 text-neutral-800 dark:text-neutral" href=/congo/docs/configuration/>Configuration</a>
</h3>
<div class="text-sm text-neutral-500 dark:text-neutral-400">
<div class="flex flex-row flex-wrap items-center">
<span title="Reading time">9 mins</span>
</div>
</div>
</article>
<article>
<h3 class="flex items-center mt-6 text-xl font-semibold">
<a class="hover:underline hover:decoration-primary-500 hover:underline-offset-2 text-neutral-800 dark:text-neutral" href=/congo/docs/homepage-layout/>Homepage Layout</a>
</h3>
<div class="text-sm text-neutral-500 dark:text-neutral-400">
<div class="flex flex-row flex-wrap items-center">
<span title="Reading time">3 mins</span>
</div>
</div>
</article>
<article>
<h3 class="flex items-center mt-6 text-xl font-semibold">
<a class="hover:underline hover:decoration-primary-500 hover:underline-offset-2 text-neutral-800 dark:text-neutral" href=/congo/docs/front-matter/>Front Matter</a>
</h3>
<div class="text-sm text-neutral-500 dark:text-neutral-400">
<div class="flex flex-row flex-wrap items-center">
<span title="Reading time">3 mins</span>
</div>
</div>
</article>
<article>
<h3 class="flex items-center mt-6 text-xl font-semibold">
<a class="hover:underline hover:decoration-primary-500 hover:underline-offset-2 text-neutral-800 dark:text-neutral" href=/congo/docs/shortcodes/>Shortcodes</a>
</h3>
<div class="text-sm text-neutral-500 dark:text-neutral-400">
<div class="flex flex-row flex-wrap items-center">
<span title="Reading time">5 mins</span>
</div>
</div>
</article>
<article>
<h3 class="flex items-center mt-6 text-xl font-semibold">
<a class="hover:underline hover:decoration-primary-500 hover:underline-offset-2 text-neutral-800 dark:text-neutral" href=/congo/docs/partials/>Partials</a>
</h3>
<div class="text-sm text-neutral-500 dark:text-neutral-400">
<div class="flex flex-row flex-wrap items-center">
<span title="Reading time">4 mins</span>
</div>
</div>
</article>
<article>
<h3 class="flex items-center mt-6 text-xl font-semibold">
<a class="hover:underline hover:decoration-primary-500 hover:underline-offset-2 text-neutral-800 dark:text-neutral" href=/congo/docs/content-examples/>Content Examples</a>
</h3>
<div class="text-sm text-neutral-500 dark:text-neutral-400">
<div class="flex flex-row flex-wrap items-center">
<span title="Reading time">9 mins</span>
</div>
</div>
</article>
<article>
<h3 class="flex items-center mt-6 text-xl font-semibold">
<a class="hover:underline hover:decoration-primary-500 hover:underline-offset-2 text-neutral-800 dark:text-neutral" href=/congo/docs/advanced-customisation/>Advanced Customisation</a>
</h3>
<div class="text-sm text-neutral-500 dark:text-neutral-400">
<div class="flex flex-row flex-wrap items-center">
<span title="Reading time">8 mins</span>
</div>
</div>
</article>
<article>
<h3 class="flex items-center mt-6 text-xl font-semibold">
<a class="hover:underline hover:decoration-primary-500 hover:underline-offset-2 text-neutral-800 dark:text-neutral" href=/congo/docs/hosting-deployment/>Hosting & Deployment</a>
</h3>
<div class="text-sm text-neutral-500 dark:text-neutral-400">
<div class="flex flex-row flex-wrap items-center">
@ -164,18 +200,50 @@ Simple, yet powerful. Learn how to use Congo and its features.
</div>
</article>
</section>
</main><footer class=py-10>
</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">
&copy;
2022
Congo
© 2022 Congo contributors
</p>
<p class="text-xs text-neutral-400 dark:text-neutral-600">
Powered by <a class="hover:underline hover:underline-primary-400 hover:text-primary-500" href=https://gohugo.io/ target=_blank rel="noopener noreferrer">Hugo</a> & <a class="hover:underline hover:underline-primary-400 hover:text-primary-500" href=https://git.io/hugo-congo target=_blank rel="noopener noreferrer">Congo</a>
<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>

View File

@ -1 +1 @@
<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Documentation on Congo</title><link>https://jpanther.github.io/congo/docs/</link><description>Recent content in Documentation on Congo</description><generator>Hugo -- gohugo.io</generator><language>en-AU</language><lastBuildDate>Sun, 16 Aug 2020 00:00:00 +0000</lastBuildDate><atom:link href="https://jpanther.github.io/congo/docs/index.xml" rel="self" type="application/rss+xml"/><item><title>Installation</title><link>https://jpanther.github.io/congo/docs/installation/</link><pubDate>Sun, 16 Aug 2020 00:00:00 +0000</pubDate><guid>https://jpanther.github.io/congo/docs/installation/</guid><description>Simply follow the standard Hugo Quick Start procedure to get up and running quickly.</description></item><item><title>Getting Started</title><link>https://jpanther.github.io/congo/docs/getting-started/</link><pubDate>Sat, 15 Aug 2020 00:00:00 +0000</pubDate><guid>https://jpanther.github.io/congo/docs/getting-started/</guid><description>This section assumes you have already installed the Congo theme.</description></item><item><title>Configuration</title><link>https://jpanther.github.io/congo/docs/configuration/</link><pubDate>Fri, 14 Aug 2020 00:00:00 +0000</pubDate><guid>https://jpanther.github.io/congo/docs/configuration/</guid><description>Congo is a highly customisable theme and uses some of the latest Hugo features to simplify how it is configured.</description></item><item><title>Homepage Layout</title><link>https://jpanther.github.io/congo/docs/homepage-layout/</link><pubDate>Thu, 13 Aug 2020 00:00:00 +0000</pubDate><guid>https://jpanther.github.io/congo/docs/homepage-layout/</guid><description>Congo provides a fully flexible homepage layout.</description></item><item><title>Front Matter</title><link>https://jpanther.github.io/congo/docs/front-matter/</link><pubDate>Wed, 12 Aug 2020 00:00:00 +0000</pubDate><guid>https://jpanther.github.io/congo/docs/front-matter/</guid><description>In addition to the default Hugo front matter parameters, Congo adds a number of additional options to customise the presentation of individual articles.</description></item><item><title>Shortcodes</title><link>https://jpanther.github.io/congo/docs/shortcodes/</link><pubDate>Tue, 11 Aug 2020 00:00:00 +0000</pubDate><guid>https://jpanther.github.io/congo/docs/shortcodes/</guid><description>In addition to all the default Hugo shortcodes, Congo adds a few extras for additional functionality.</description></item><item><title>Partials</title><link>https://jpanther.github.io/congo/docs/partials/</link><pubDate>Mon, 10 Aug 2020 00:00:00 +0000</pubDate><guid>https://jpanther.github.io/congo/docs/partials/</guid><description>Analytics # Congo provides built-in support for Fathom Analytics and Google Analytics.</description></item><item><title>Advanced Customisation</title><link>https://jpanther.github.io/congo/docs/advanced-customisation/</link><pubDate>Sun, 09 Aug 2020 00:00:00 +0000</pubDate><guid>https://jpanther.github.io/congo/docs/advanced-customisation/</guid><description>There are many ways you can make advanced changes to Congo.</description></item><item><title>Hosting &amp; Deployment</title><link>https://jpanther.github.io/congo/docs/hosting-deployment/</link><pubDate>Sat, 08 Aug 2020 00:00:00 +0000</pubDate><guid>https://jpanther.github.io/congo/docs/hosting-deployment/</guid><description>There are many ways to deploy your Hugo website built with Congo.</description></item></channel></rss>
<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Documentation on Congo</title><link>https://jpanther.github.io/congo/docs/</link><description>Recent content in Documentation on Congo</description><generator>Hugo -- gohugo.io</generator><language>en-au</language><copyright>&amp;copy; 2022 Congo contributors</copyright><lastBuildDate>Thu, 20 Jan 2022 00:00:00 +0000</lastBuildDate><atom:link href="https://jpanther.github.io/congo/docs/index.xml" rel="self" type="application/rss+xml"/><item><title>Installation</title><link>https://jpanther.github.io/congo/docs/installation/</link><pubDate>Sun, 16 Aug 2020 00:00:00 +0000</pubDate><guid>https://jpanther.github.io/congo/docs/installation/</guid><description>Simply follow the standard Hugo Quick Start procedure to get up and running quickly.</description></item><item><title>Getting Started</title><link>https://jpanther.github.io/congo/docs/getting-started/</link><pubDate>Sat, 15 Aug 2020 00:00:00 +0000</pubDate><guid>https://jpanther.github.io/congo/docs/getting-started/</guid><description>This section assumes you have already installed the Congo theme.</description></item><item><title>Configuration</title><link>https://jpanther.github.io/congo/docs/configuration/</link><pubDate>Fri, 14 Aug 2020 00:00:00 +0000</pubDate><guid>https://jpanther.github.io/congo/docs/configuration/</guid><description>Congo is a highly customisable theme and uses some of the latest Hugo features to simplify how it is configured.</description></item><item><title>Homepage Layout</title><link>https://jpanther.github.io/congo/docs/homepage-layout/</link><pubDate>Thu, 13 Aug 2020 00:00:00 +0000</pubDate><guid>https://jpanther.github.io/congo/docs/homepage-layout/</guid><description>Congo provides a fully flexible homepage layout.</description></item><item><title>Front Matter</title><link>https://jpanther.github.io/congo/docs/front-matter/</link><pubDate>Wed, 12 Aug 2020 00:00:00 +0000</pubDate><guid>https://jpanther.github.io/congo/docs/front-matter/</guid><description>In addition to the default Hugo front matter parameters, Congo adds a number of additional options to customise the presentation of individual articles.</description></item><item><title>Shortcodes</title><link>https://jpanther.github.io/congo/docs/shortcodes/</link><pubDate>Tue, 11 Aug 2020 00:00:00 +0000</pubDate><guid>https://jpanther.github.io/congo/docs/shortcodes/</guid><description>In addition to all the default Hugo shortcodes, Congo adds a few extras for additional functionality.</description></item><item><title>Partials</title><link>https://jpanther.github.io/congo/docs/partials/</link><pubDate>Mon, 10 Aug 2020 00:00:00 +0000</pubDate><guid>https://jpanther.github.io/congo/docs/partials/</guid><description>Analytics # Congo provides built-in support for Fathom Analytics and Google Analytics.</description></item><item><title>Content Examples</title><link>https://jpanther.github.io/congo/docs/content-examples/</link><pubDate>Sun, 09 Aug 2020 00:00:00 +0000</pubDate><guid>https://jpanther.github.io/congo/docs/content-examples/</guid><description>If you&amp;rsquo;ve been reading the documentation in order, you should now know about all the features and configurations available in Congo.</description></item><item><title>Advanced Customisation</title><link>https://jpanther.github.io/congo/docs/advanced-customisation/</link><pubDate>Sat, 08 Aug 2020 00:00:00 +0000</pubDate><guid>https://jpanther.github.io/congo/docs/advanced-customisation/</guid><description>There are many ways you can make advanced changes to Congo.</description></item><item><title>Hosting &amp; Deployment</title><link>https://jpanther.github.io/congo/docs/hosting-deployment/</link><pubDate>Fri, 07 Aug 2020 00:00:00 +0000</pubDate><guid>https://jpanther.github.io/congo/docs/hosting-deployment/</guid><description>There are many ways to deploy your Hugo website built with Congo.</description></item></channel></rss>

View File

@ -1,15 +1,14 @@
<!doctype html><html lang=en-au><head>
<!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 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>Installation &#183; Congo</title>
<meta name=title content="Installation &#183; Congo">
<meta name=description content="How to install the Congo theme.">
<meta name=description content="A powerful, lightweight theme for Hugo built with Tailwind CSS.">
<link rel=canonical href=https://jpanther.github.io/congo/docs/installation/>
<link type=text/css rel=stylesheet href=/congo/css/schemes/congo.min.b48d6ba061dc77186a2524fb8aac5ac3823b2679a9299ca60325abbccc9c1764c884715f0ba24b4e2776cb3814df4af1f4c854b87207cd5d4c7a254da9b55751.css integrity="sha512-tI1roGHcdxhqJST7iqxaw4I7JnmpKZymAyWrvMycF2TIhHFfC6JLTid2yzgU30rx9MhUuHIHzV1MeiVNqbVXUQ==">
<link type=text/css rel=stylesheet href=/congo/css/compiled/main.min.51037225bb3c65887773b052da1e38f105db8f3d9aa6a34ba3c5c40c88fb309724f8cc5ed2871adc7e55dacab9b36c60ce7aa7a61dff2cc638f8b435c898d5a8.css integrity="sha512-UQNyJbs8ZYh3c7BS2h448QXbjz2apqNLo8XEDIj7MJck+Mxe0oca3H5V2sq5s2xgznqnph3/LMY4+LQ1yJjVqA==">
<script>function loadPreferredAppearance(){localStorage.preferredAppearance==="dark"||!("preferredAppearance"in localStorage)&&window.matchMedia("(prefers-color-scheme: dark)").matches?document.documentElement.classList.add("dark"):document.documentElement.classList.remove("dark")}function setPreferredAppearance(a){a=="default"?localStorage.removeItem("preferredAppearance"):localStorage.preferredAppearance=a,loadPreferredAppearance()}loadPreferredAppearance(),window.matchMedia("(prefers-color-scheme: dark)").addListener(loadPreferredAppearance)</script>
<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>
@ -19,51 +18,60 @@
<meta property="og:type" content="article">
<meta property="og:url" content="https://jpanther.github.io/congo/docs/installation/"><meta property="article:section" content="docs">
<meta property="article:published_time" content="2020-08-16T00:00:00+00:00">
<meta property="article:modified_time" content="2020-08-16T00:00:00+00:00">
<meta property="article:modified_time" content="2020-08-16T00:00:00+00:00"><meta property="og:site_name" content="Congo">
<meta name=twitter:card content="summary">
<meta name=twitter:title content="Installation">
<meta name=twitter:description content="How to install the Congo theme.">
<script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","articleSection":"Documentation","name":"Installation","headline":"Installation","description":"How to install the Congo theme.","inLanguage":"en-AU","author":{"@type":"Person","name":"Congo"},"creator":{"@type":"Person","name":"Congo"},"copyrightHolder":"Congo","copyrightYear":"2020","dateCreated":"2020-08-16T00:00:00\u002b00:00","datePublished":"2020-08-16T00:00:00\u002b00:00","dateModified":"2020-08-16T00:00:00\u002b00:00","url":"https:\/\/jpanther.github.io\/congo\/docs\/installation\/","keywords":["installation","docs"],"wordCount":"976"}</script>
<meta name=generator content="Hugo 0.92.0">
<script type=application/ld+json>[{"@context":"https://schema.org","@type":"Article","articleSection":"Documentation","name":"Installation","headline":"Installation","description":"How to install the Congo theme.","abstract":"Simply follow the standard Hugo Quick Start procedure to get up and running quickly.","inLanguage":"en-au","url":"https:\/\/jpanther.github.io\/congo\/docs\/installation\/","author":{"@type":"Person","name":"Congo"},"copyrightYear":"2020","dateCreated":"2020-08-16T00:00:00\u002b00:00","datePublished":"2020-08-16T00:00:00\u002b00:00","dateModified":"2020-08-16T00:00:00\u002b00:00","keywords":["installation","docs"],"mainEntityOfPage":"true","wordCount":"976"}]</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"><header class="flex justify-between py-6 font-semibold sm:items-center sm:py-10 text-neutral-900 dark:text-neutral">
<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:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" rel=me href=/congo/>Congo</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=/congo/docs/ title=Documentation>Docs</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=/congo/samples/ title="Content Samples">Samples</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=/congo/users/ title=Users>Users</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=https://github.com/jpanther/congo title>GitHub</a>
<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 class=flex-grow>
<article class=max-w-prose>
<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:underline-neutral-300 dark:underline-neutral-600" href=/congo/>Welcome to Congo! :tada:</a><span class="px-1 text-primary-500">/</span>
<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:underline-neutral-300 dark:underline-neutral-600" href=/congo/docs/>Documentation</a><span class="px-1 text-primary-500">/</span>
<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:underline-neutral-300 dark:underline-neutral-600" href=/congo/docs/installation/>Installation</a><span class="px-1 text-primary-500">/</span>
<a class="hover:underline hover:decoration-neutral-300 dark:underline-neutral-600" href=/congo/docs/installation/>Installation</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">
@ -81,25 +89,63 @@ Installation
</div>
</div>
</header>
<section class="prose dark:prose-light">
<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=#installation>Installation</a>
<ul>
<li><a href=#install-hugo>Install Hugo</a></li>
<li><a href=#create-a-new-site>Create a new site</a></li>
<li><a href=#download-the-congo-theme>Download the Congo theme</a>
<ul>
<li><a href=#install-using-hugo>Install using Hugo</a></li>
<li><a href=#install-using-git>Install using git</a></li>
<li><a href=#install-manually>Install manually</a></li>
</ul>
</li>
<li><a href=#set-up-theme-configuration-files>Set up theme configuration files</a></li>
<li><a href=#next-steps>Next steps</a></li>
</ul>
</li>
<li><a href=#installing-updates>Installing updates</a>
<ul>
<li><a href=#update-using-hugo>Update using Hugo</a></li>
<li><a href=#update-using-git>Update using git</a></li>
<li><a href=#update-manually>Update manually</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</details>
</div>
</div>
<div class="min-w-0 min-h-0 max-w-prose">
<p>Simply follow the standard Hugo <a href=https://gohugo.io/getting-started/quick-start/>Quick Start</a> procedure to get up and running quickly.</p>
<p>Detailed installation instructions can be found below. Instructions for <a href=#installing-updates>updating the theme</a> are also available.</p>
<h2 id=installation>Installation <a class=heading-anchor href=#installation aria-label=Anchor>#</a></h2>
<h2 id=installation class="relative group">Installation <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=#installation aria-label=Anchor>#</a></span></h2>
<p>These instructions will get you up and running using Hugo and Congo from a completely blank state. Most of the dependencies mentioned in this guide can be installed using the package manager of choice for your platform.</p>
<h3 id=install-hugo>Install Hugo <a class=heading-anchor href=#install-hugo aria-label=Anchor>#</a></h3>
<h3 id=install-hugo class="relative group">Install Hugo <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=#install-hugo aria-label=Anchor>#</a></span></h3>
<p>If you haven&rsquo;t used Hugo before, you will need to <a href=https://gohugo.io/getting-started/installing>install it onto your local machine</a>. You can check if it&rsquo;s already installed by running the command <code>hugo version</code>.</p>
<div class="flex px-4 py-3 rounded-md bg-primary-100 dark:bg-primary-900">
<span class="pr-3 text-primary-400">
<span class="ltr:pr-3 rtl:pl-3 text-primary-400">
<span class="relative inline-block align-text-bottom icon"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="exclamation-triangle" class="svg-inline--fa fa-exclamation-triangle fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentcolor" d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937.0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154.0l239.94 416.028zM288 354c-25.405.0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346 7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373.0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884.0-12.356 5.78-11.981 12.654z"/></svg>
</span>
</span>
<span class="no-prose dark:text-neutral-300">Make sure you are using <strong>Hugo version 0.86.1</strong> or later as the theme takes advantage of some of the latest Hugo features.</span>
<span class=dark:text-neutral-300>Make sure you are using <strong>Hugo version 0.87.0</strong> or later as the theme takes advantage of some of the latest Hugo features.</span>
</div>
<p>You can find detailed installation instructions for your platform in the <a href=https://gohugo.io/getting-started/installing>Hugo docs</a>.</p>
<h3 id=create-a-new-site>Create a new site <a class=heading-anchor href=#create-a-new-site aria-label=Anchor>#</a></h3>
<h3 id=create-a-new-site class="relative group">Create a new site <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=#create-a-new-site aria-label=Anchor>#</a></span></h3>
<p>Run the command <code>hugo new site mywebsite</code> to create a new Hugo site in a directory named <code>mywebsite</code>.</p>
<p>Note that you can name the project directory whatever you choose, but the instructions below will assume it&rsquo;s named <code>mywebsite</code>. If you use a different name, be sure to substitute it accordingly.</p>
<h3 id=download-the-congo-theme>Download the Congo theme <a class=heading-anchor href=#download-the-congo-theme aria-label=Anchor>#</a></h3>
<h3 id=download-the-congo-theme class="relative group">Download the Congo theme <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=#download-the-congo-theme aria-label=Anchor>#</a></span></h3>
<p>There several different ways to install the Congo theme into your Hugo website. From easiest to most difficult to install and maintain, they are:</p>
<ul>
<li><a href=#install-using-hugo>Hugo module</a> (recommended)</li>
@ -107,17 +153,17 @@ Installation
<li><a href=#install-manually>Manual file copy</a></li>
</ul>
<p>If you&rsquo;re unsure, choose the Hugo module method.</p>
<h4 id=install-using-hugo>Install using Hugo <a class=heading-anchor href=#install-using-hugo aria-label=Anchor>#</a></h4>
<h4 id=install-using-hugo class="relative group">Install using Hugo <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=#install-using-hugo aria-label=Anchor>#</a></span></h4>
<p>This method is the quickest and easiest for keeping the theme up-to-date. Hugo uses <strong>Go</strong> to initialise and manage modules so you need to ensure you have <code>go</code> installed before proceeding.</p>
<ol>
<li>
<p><a href=https://golang.org/dl/>Download</a> and install Go. You can check if it&rsquo;s already installed by using the command <code>go version</code>.</p>
<div class="flex px-4 py-3 rounded-md bg-primary-100 dark:bg-primary-900">
<span class="pr-3 text-primary-400">
<span class="ltr:pr-3 rtl:pl-3 text-primary-400">
<span class="relative inline-block align-text-bottom icon"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="exclamation-triangle" class="svg-inline--fa fa-exclamation-triangle fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentcolor" d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937.0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154.0l239.94 416.028zM288 354c-25.405.0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346 7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373.0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884.0-12.356 5.78-11.981 12.654z"/></svg>
</span>
</span>
<span class="no-prose dark:text-neutral-300">Make sure you are using <strong>Go version 1.12</strong> or later as Hugo requires this for modules to work correctly.</span>
<span class=dark:text-neutral-300>Make sure you are using <strong>Go version 1.12</strong> or later as Hugo requires this for modules to work correctly.</span>
</div>
</li>
<li>
@ -140,14 +186,14 @@ hugo mod init my-project
<p>Continue to <a href=#set-up-theme-configuration-files>set up the theme configuration files</a>.</p>
</li>
</ol>
<h4 id=install-using-git>Install using git <a class=heading-anchor href=#install-using-git aria-label=Anchor>#</a></h4>
<h4 id=install-using-git class="relative group">Install using git <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=#install-using-git aria-label=Anchor>#</a></span></h4>
<p>For this method you&rsquo;ll need to ensure you have <strong>Git</strong> installed on your local machine.</p>
<p>Change into the directory for your Hugo website (that you created above), initialise a new <code>git</code> repository and add Congo as a submodule.</p>
<div class=highlight><pre tabindex=0 class=chroma><code class=language-bash data-lang=bash><span class=nb>cd</span> mywebsite
git init
git submodule add -b stable https://github.com/jpanther/congo.git themes/congo
</code></pre></div><p>Then continue to <a href=#set-up-theme-configuration-files>set up the theme configuration files</a>.</p>
<h4 id=install-manually>Install manually <a class=heading-anchor href=#install-manually aria-label=Anchor>#</a></h4>
<h4 id=install-manually class="relative group">Install manually <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=#install-manually aria-label=Anchor>#</a></span></h4>
<ol>
<li>
<p>Download the latest release of the theme source code.</p>
@ -162,14 +208,14 @@ Download from Github
<p>Continue to <a href=#set-up-theme-configuration-files>set up the theme configuration files</a>.</p>
</li>
</ol>
<h3 id=set-up-theme-configuration-files>Set up theme configuration files <a class=heading-anchor href=#set-up-theme-configuration-files aria-label=Anchor>#</a></h3>
<h3 id=set-up-theme-configuration-files class="relative group">Set up theme configuration files <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=#set-up-theme-configuration-files aria-label=Anchor>#</a></span></h3>
<p>In the root folder of your website, delete the <code>config.toml</code> file that was generated by Hugo. Copy the <code>*.toml</code> config files from the theme into your <code>config/_default/</code> folder. This will ensure you have all the correct theme settings and will enable you to easily customise the theme to your needs.</p>
<div class="flex px-4 py-3 rounded-md bg-primary-100 dark:bg-primary-900">
<span class="pr-3 text-primary-400">
<span class="ltr:pr-3 rtl:pl-3 text-primary-400">
<span class="relative inline-block align-text-bottom icon"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="exclamation-triangle" class="svg-inline--fa fa-exclamation-triangle fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentcolor" d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937.0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154.0l239.94 416.028zM288 354c-25.405.0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346 7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373.0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884.0-12.356 5.78-11.981 12.654z"/></svg>
</span>
</span>
<span class="no-prose dark:text-neutral-300"><strong>Note:</strong> You should not overwrite the <code>module.toml</code> file if one already exists in your project!</span>
<span class=dark:text-neutral-300><strong>Note:</strong> You should not overwrite the <code>module.toml</code> file if one already exists in your project!</span>
</div>
<p>Depending on how you installed the theme you will find the theme config files in different places:</p>
<ul>
@ -184,16 +230,16 @@ Download from Github
├─ module.toml <span class=c1># if you installed using Hugo Modules</span>
└─ params.toml
</code></pre></div><div class="flex px-4 py-3 rounded-md bg-primary-100 dark:bg-primary-900">
<span class="pr-3 text-primary-400">
<span class="ltr:pr-3 rtl:pl-3 text-primary-400">
<span class="relative inline-block align-text-bottom icon"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="exclamation-triangle" class="svg-inline--fa fa-exclamation-triangle fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentcolor" d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937.0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154.0l239.94 416.028zM288 354c-25.405.0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346 7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373.0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884.0-12.356 5.78-11.981 12.654z"/></svg>
</span>
</span>
<span class="no-prose dark:text-neutral-300"><strong>Important:</strong> If you didn&rsquo;t use Hugo Modules to install Congo, you must add the line <code>theme = "congo"</code> to the top of your <code>config.toml</code> file.</span>
<span class=dark:text-neutral-300><strong>Important:</strong> If you didn&rsquo;t use Hugo Modules to install Congo, you must add the line <code>theme = "congo"</code> to the top of your <code>config.toml</code> file.</span>
</div>
<h3 id=next-steps>Next steps <a class=heading-anchor href=#next-steps aria-label=Anchor>#</a></h3>
<h3 id=next-steps class="relative group">Next steps <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=#next-steps aria-label=Anchor>#</a></span></h3>
<p>The basic Congo installation is now complete. Continue to the <a href=https://jpanther.github.io/congo/docs/getting-started/>Getting Started</a> section to learn more about configuring the theme.</p>
<hr>
<h2 id=installing-updates>Installing updates <a class=heading-anchor href=#installing-updates aria-label=Anchor>#</a></h2>
<h2 id=installing-updates class="relative group">Installing updates <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=#installing-updates aria-label=Anchor>#</a></span></h2>
<p>From time to time there will be <a href=https://github.com/jpanther/congo/releases>new releases</a> posted that apply fixes and add new functionality to the theme. In order to take advantage of these changes, you will need to update the theme files on your website.</p>
<p>How you go about this will depend on the installation method you chose when the theme was originally installed. Instructions for each method can be found below.</p>
<ul>
@ -201,23 +247,23 @@ Download from Github
<li><a href=#update-using-git>Git submodule</a></li>
<li><a href=#update-manually>Manual file copy</a></li>
</ul>
<h3 id=update-using-hugo>Update using Hugo <a class=heading-anchor href=#update-using-hugo aria-label=Anchor>#</a></h3>
<h3 id=update-using-hugo class="relative group">Update using Hugo <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=#update-using-hugo aria-label=Anchor>#</a></span></h3>
<p>Hugo makes updating modules super easy. Simply change into your project directory and execute the following command:</p>
<div class=highlight><pre tabindex=0 class=chroma><code class=language-shell data-lang=shell>hugo mod get -u
</code></pre></div><p>Hugo will automatically update any modules that are required for your project. It does this by inspecting your <code>module.toml</code> and <code>go.mod</code> files. If you have any issues with the update, check to ensure these files are still configured correctly.</p>
<p>Then simply rebuild your site and check everything works as expected.</p>
<h3 id=update-using-git>Update using git <a class=heading-anchor href=#update-using-git aria-label=Anchor>#</a></h3>
<h3 id=update-using-git class="relative group">Update using git <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=#update-using-git aria-label=Anchor>#</a></span></h3>
<p>Git submodules can be updated using the <code>git</code> command. Simply execute the following command and the latest version of the theme will be downloaded into your local repository:</p>
<div class=highlight><pre tabindex=0 class=chroma><code class=language-shell data-lang=shell>git submodule update --remote --merge
</code></pre></div><p>Once the submodule has been updated, rebuild your site and check everything works as expected.</p>
<h3 id=update-manually>Update manually <a class=heading-anchor href=#update-manually aria-label=Anchor>#</a></h3>
<h3 id=update-manually class="relative group">Update manually <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=#update-manually aria-label=Anchor>#</a></span></h3>
<p>Updating Congo manually requires you to download the latest copy of the theme and replace the old version in your project.</p>
<div class="flex px-4 py-3 rounded-md bg-primary-100 dark:bg-primary-900">
<span class="pr-3 text-primary-400">
<span class="ltr:pr-3 rtl:pl-3 text-primary-400">
<span class="relative inline-block align-text-bottom icon"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="exclamation-triangle" class="svg-inline--fa fa-exclamation-triangle fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentcolor" d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937.0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154.0l239.94 416.028zM288 354c-25.405.0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346 7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373.0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884.0-12.356 5.78-11.981 12.654z"/></svg>
</span>
</span>
<span class="no-prose dark:text-neutral-300">Note that any local customisations you have made to the theme files will be lost during this process.</span>
<span class=dark:text-neutral-300>Note that any local customisations you have made to the theme files will be lost during this process.</span>
</div>
<ol>
<li>
@ -233,39 +279,78 @@ Download from Github
<p>Rebuild your site and check everything works as expected.</p>
</li>
</ol>
</div>
</section>
<footer class=pt-8>
<div class="pt-8 article-pagination">
<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>
</span>
<span>
<a class="flex text-right" href=/congo/docs/getting-started/>
<a class="flex text-right group" href=/congo/docs/getting-started/>
<span class="flex flex-col">
<span class="article-pagination-title mt-[0.1rem] leading-6">Getting Started</span>
<span class="mt-[0.1rem] leading-6 group-hover:underline group-hover:decoration-primary-500">Getting Started</span>
<span class="mt-[0.1rem] text-xs text-neutral-500 dark:text-neutral-400">
</span>
</span>
<span class="ml-3 article-pagination-direction">&rarr;</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>
</main><footer class=py-10>
<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">
&copy;
2022
Congo
© 2022 Congo contributors
</p>
<p class="text-xs text-neutral-400 dark:text-neutral-600">
Powered by <a class="hover:underline hover:underline-primary-400 hover:text-primary-500" href=https://gohugo.io/ target=_blank rel="noopener noreferrer">Hugo</a> & <a class="hover:underline hover:underline-primary-400 hover:text-primary-500" href=https://git.io/hugo-congo target=_blank rel="noopener noreferrer">Congo</a>
<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>

View File

@ -1,15 +1,14 @@
<!doctype html><html lang=en-au><head>
<!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 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="All the partials available in 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/schemes/congo.min.b48d6ba061dc77186a2524fb8aac5ac3823b2679a9299ca60325abbccc9c1764c884715f0ba24b4e2776cb3814df4af1f4c854b87207cd5d4c7a254da9b55751.css integrity="sha512-tI1roGHcdxhqJST7iqxaw4I7JnmpKZymAyWrvMycF2TIhHFfC6JLTid2yzgU30rx9MhUuHIHzV1MeiVNqbVXUQ==">
<link type=text/css rel=stylesheet href=/congo/css/compiled/main.min.51037225bb3c65887773b052da1e38f105db8f3d9aa6a34ba3c5c40c88fb309724f8cc5ed2871adc7e55dacab9b36c60ce7aa7a61dff2cc638f8b435c898d5a8.css integrity="sha512-UQNyJbs8ZYh3c7BS2h448QXbjz2apqNLo8XEDIj7MJck+Mxe0oca3H5V2sq5s2xgznqnph3/LMY4+LQ1yJjVqA==">
<script>function loadPreferredAppearance(){localStorage.preferredAppearance==="dark"||!("preferredAppearance"in localStorage)&&window.matchMedia("(prefers-color-scheme: dark)").matches?document.documentElement.classList.add("dark"):document.documentElement.classList.remove("dark")}function setPreferredAppearance(a){a=="default"?localStorage.removeItem("preferredAppearance"):localStorage.preferredAppearance=a,loadPreferredAppearance()}loadPreferredAppearance(),window.matchMedia("(prefers-color-scheme: dark)").addListener(loadPreferredAppearance)</script>
<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>
@ -19,51 +18,60 @@
<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="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":"BlogPosting","articleSection":"Documentation","name":"Partials","headline":"Partials","description":"All the partials available in Congo.","inLanguage":"en-AU","author":{"@type":"Person","name":"Congo"},"creator":{"@type":"Person","name":"Congo"},"copyrightHolder":"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","url":"https:\/\/jpanther.github.io\/congo\/docs\/partials\/","keywords":["partials","analytics","privacy","comments","favicons","icon","docs"],"wordCount":"656"}</script>
<meta name=generator content="Hugo 0.92.0">
<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"><header class="flex justify-between py-6 font-semibold sm:items-center sm:py-10 text-neutral-900 dark:text-neutral">
<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:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" rel=me href=/congo/>Congo</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=/congo/docs/ title=Documentation>Docs</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=/congo/samples/ title="Content Samples">Samples</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=/congo/users/ title=Users>Users</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=https://github.com/jpanther/congo title>GitHub</a>
<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 class=flex-grow>
<article class=max-w-prose>
<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:underline-neutral-300 dark:underline-neutral-600" href=/congo/>Welcome to Congo! :tada:</a><span class="px-1 text-primary-500">/</span>
<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:underline-neutral-300 dark:underline-neutral-600" href=/congo/docs/>Documentation</a><span class="px-1 text-primary-500">/</span>
<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:underline-neutral-300 dark:underline-neutral-600" href=/congo/docs/partials/>Partials</a><span class="px-1 text-primary-500">/</span>
<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">
@ -81,27 +89,59 @@ Partials
</div>
</div>
</header>
<section class="prose dark:prose-light">
<h2 id=analytics>Analytics <a class=heading-anchor href=#analytics aria-label=Anchor>#</a></h2>
<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>Fathom Analytics <a class=heading-anchor href=#fathom-analytics aria-label=Anchor>#</a></h3>
<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>Google Analytics <a class=heading-anchor href=#google-analytics aria-label=Anchor>#</a></h3>
</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>Custom analytics providers <a class=heading-anchor href=#custom-analytics-providers aria-label=Anchor>#</a></h3>
</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>Comments <a class=heading-anchor href=#comments aria-label=Anchor>#</a></h2>
<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>Favicons <a class=heading-anchor href=#favicons aria-label=Anchor>#</a></h2>
<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/
@ -113,61 +153,101 @@ Partials
├─ 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>Icon <a class=heading-anchor href=#icon aria-label=Anchor>#</a></h2>
<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>Extensions <a class=heading-anchor href=#extensions aria-label=Anchor>#</a></h2>
<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>Article link <a class=heading-anchor href=#article-link aria-label=Anchor>#</a></h3>
<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>Head and Footer <a class=heading-anchor href=#head-and-footer aria-label=Anchor>#</a></h3>
<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>
<div class="pt-8 article-pagination">
<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 href=/congo/docs/shortcodes/>
<span class="mr-3 article-pagination-direction">&larr;</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="article-pagination-title mt-[0.1rem] leading-6">Shortcodes</span>
<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" href=/congo/docs/advanced-customisation/>
<a class="flex text-right group" href=/congo/docs/content-examples/>
<span class="flex flex-col">
<span class="article-pagination-title mt-[0.1rem] leading-6">Advanced Customisation</span>
<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 article-pagination-direction">&rarr;</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>
</main><footer class=py-10>
<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">
&copy;
2022
Congo
© 2022 Congo contributors
</p>
<p class="text-xs text-neutral-400 dark:text-neutral-600">
Powered by <a class="hover:underline hover:underline-primary-400 hover:text-primary-500" href=https://gohugo.io/ target=_blank rel="noopener noreferrer">Hugo</a> & <a class="hover:underline hover:underline-primary-400 hover:text-primary-500" href=https://git.io/hugo-congo target=_blank rel="noopener noreferrer">Congo</a>
<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>

Binary file not shown.

After

Width:  |  Height:  |  Size: 518 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 848 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 56 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 211 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 40 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 36 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

View File

@ -1,15 +1,14 @@
<!doctype html><html lang=en-au><head>
<!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 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>Shortcodes &#183; Congo</title>
<meta name=title content="Shortcodes &#183; Congo">
<meta name=description content="All the shortcodes available in 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/shortcodes/>
<link type=text/css rel=stylesheet href=/congo/css/schemes/congo.min.b48d6ba061dc77186a2524fb8aac5ac3823b2679a9299ca60325abbccc9c1764c884715f0ba24b4e2776cb3814df4af1f4c854b87207cd5d4c7a254da9b55751.css integrity="sha512-tI1roGHcdxhqJST7iqxaw4I7JnmpKZymAyWrvMycF2TIhHFfC6JLTid2yzgU30rx9MhUuHIHzV1MeiVNqbVXUQ==">
<link type=text/css rel=stylesheet href=/congo/css/compiled/main.min.51037225bb3c65887773b052da1e38f105db8f3d9aa6a34ba3c5c40c88fb309724f8cc5ed2871adc7e55dacab9b36c60ce7aa7a61dff2cc638f8b435c898d5a8.css integrity="sha512-UQNyJbs8ZYh3c7BS2h448QXbjz2apqNLo8XEDIj7MJck+Mxe0oca3H5V2sq5s2xgznqnph3/LMY4+LQ1yJjVqA==">
<script>function loadPreferredAppearance(){localStorage.preferredAppearance==="dark"||!("preferredAppearance"in localStorage)&&window.matchMedia("(prefers-color-scheme: dark)").matches?document.documentElement.classList.add("dark"):document.documentElement.classList.remove("dark")}function setPreferredAppearance(a){a=="default"?localStorage.removeItem("preferredAppearance"):localStorage.preferredAppearance=a,loadPreferredAppearance()}loadPreferredAppearance(),window.matchMedia("(prefers-color-scheme: dark)").addListener(loadPreferredAppearance)</script>
<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>
@ -19,58 +18,65 @@
<meta property="og:type" content="article">
<meta property="og:url" content="https://jpanther.github.io/congo/docs/shortcodes/"><meta property="article:section" content="docs">
<meta property="article:published_time" content="2020-08-11T00:00:00+00:00">
<meta property="article:modified_time" content="2020-08-11T00:00:00+00:00">
<meta property="article:modified_time" content="2020-08-11T00:00:00+00:00"><meta property="og:site_name" content="Congo">
<meta name=twitter:card content="summary">
<meta name=twitter:title content="Shortcodes">
<meta name=twitter:description content="All the shortcodes available in Congo.">
<script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","articleSection":"Documentation","name":"Shortcodes","headline":"Shortcodes","description":"All the shortcodes available in Congo.","inLanguage":"en-AU","author":{"@type":"Person","name":"Congo"},"creator":{"@type":"Person","name":"Congo"},"copyrightHolder":"Congo","copyrightYear":"2020","dateCreated":"2020-08-11T00:00:00\u002b00:00","datePublished":"2020-08-11T00:00:00\u002b00:00","dateModified":"2020-08-11T00:00:00\u002b00:00","url":"https:\/\/jpanther.github.io\/congo\/docs\/shortcodes\/","keywords":["shortcodes","mermaid","icon","lead","docs"],"wordCount":"684"}</script>
<meta name=generator content="Hugo 0.92.0">
<script type=application/ld+json>[{"@context":"https://schema.org","@type":"Article","articleSection":"Documentation","name":"Shortcodes","headline":"Shortcodes","description":"All the shortcodes available in Congo.","abstract":"In addition to all the default Hugo shortcodes, Congo adds a few extras for additional functionality.","inLanguage":"en-au","url":"https:\/\/jpanther.github.io\/congo\/docs\/shortcodes\/","author":{"@type":"Person","name":"Congo"},"copyrightYear":"2020","dateCreated":"2020-08-11T00:00:00\u002b00:00","datePublished":"2020-08-11T00:00:00\u002b00:00","dateModified":"2020-08-11T00:00:00\u002b00:00","keywords":["shortcodes","mermaid","icon","lead","docs"],"mainEntityOfPage":"true","wordCount":"875"}]</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>
<script defer src=/congo/lib/mermaid/mermaid.min.11d2ab28d89fc972ef77e55a5d8e4ff5036600fae9200d3347a43fda6b048ab5453cbe920c639e7a59da01ba0b4b74e3641b8611f9662385c547c860c67b9357.js integrity="sha512-EdKrKNifyXLvd+VaXY5P9QNmAPrpIA0zR6Q/2msEirVFPL6SDGOeelnaAboLS3TjZBuGEflmI4XFR8hgxnuTVw=="></script>
<script>document.addEventListener('DOMContentLoaded',b=>{function a(a){return getComputedStyle(document.documentElement).getPropertyValue(a)}mermaid.initialize({theme:"base",themeVariables:{background:a("--color-neutral"),primaryColor:a("--color-primary-200"),secondaryColor:a("--color-secondary-200"),tertiaryColor:a("--color-neutral-100"),primaryBorderColor:a("--color-primary-400"),secondaryBorderColor:a("--color-secondary-400"),tertiaryBorderColor:a("--color-neutral-400"),lineColor:a("--color-neutral-600"),fontFamily:"ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,segoe ui,Roboto,helvetica neue,Arial,noto sans,sans-serif",fontSize:"16px"}})})</script>
<script defer src=/congo/lib/chart/chart.min.4d6e6cd084ff229a49b6eefa51bcacac11fd1f2ff95f8d4e4c06d0b9f7d9154ea5435add70b1f3a54e41cd5bebfd817292888c61955696bfcf5f598371f33d42.js integrity="sha512-TW5s0IT/IppJtu76UbysrBH9Hy/5X41OTAbQuffZFU6lQ1rdcLHzpU5BzVvr/YFykoiMYZVWlr/PX1mDcfM9Qg=="></script>
<script>document.addEventListener('DOMContentLoaded',b=>{function a(a){return getComputedStyle(document.documentElement).getPropertyValue(a)}Chart.defaults.font.size=14,Chart.defaults.backgroundColor=a("--color-primary-300"),Chart.defaults.elements.point.borderColor=a("--color-primary-400"),Chart.defaults.elements.bar.borderColor=a("--color-primary-500"),Chart.defaults.elements.bar.borderWidth=1,Chart.defaults.elements.line.borderColor=a("--color-primary-400"),Chart.defaults.elements.arc.backgroundColor=a("--color-primary-200"),Chart.defaults.elements.arc.borderColor=a("--color-primary-500"),Chart.defaults.elements.arc.borderWidth=1})</script>
<script defer type=text/javascript src=/congo/js/mermaid.bundle.1f0d9d765e05c0c0c6a8e70c01da70923366d0c40b26a7c2b0b441bef5ff2b67cebf5a425edcec72e6b31e73538108bf2f1be3ce5d8a5f1e08ccdf84bd076b3b.js integrity="sha512-Hw2ddl4FwMDGqOcMAdpwkjNm0MQLJqfCsLRBvvX/K2fOv1pCXtzscuazHnNTgQi/Lxvjzl2KXx4IzN+EvQdrOw=="></script>
<script defer type=text/javascript src=/congo/js/chart.bundle.45b978f0ad1efeb2ceb65d4bf5fb2601a039a5f623717d7f772dd6e1fa8e2f2075dc9c1a9a57616ddf337efdf734afb96d6c4ce45508707a8156202ae684e37d.js integrity="sha512-Rbl48K0e/rLOtl1L9fsmAaA5pfYjcX1/dy3W4fqOLyB13Jwamldhbd8zfv33NK+5bWxM5FUIcHqBViAq5oTjfQ=="></script>
<link type=text/css rel=stylesheet href=/congo/lib/katex/katex.min.835a7130a5a7a82240e5b4ccc27c345f07b429001f9e3e3bfb5a41d2821232a5458e6f01835bc0dd110d8fe886ba713d8f8cc32cf59b6aeee38ab5b0272b2175.css integrity="sha512-g1pxMKWnqCJA5bTMwnw0Xwe0KQAfnj47+1pB0oISMqVFjm8Bg1vA3RENj+iGunE9j4zDLPWbau7jirWwJyshdQ==">
<script defer src=/congo/lib/katex/katex.min.89e82bf426efc39d2b1b46a0094ff51d4274c3919f953f8bb24d92448d633a3102d794518095bdbcc2c3171205de6071a080c84b8d5f9c434db92643f9684838.js integrity="sha512-iegr9Cbvw50rG0agCU/1HUJ0w5GflT+Lsk2SRI1jOjEC15RRgJW9vMLDFxIF3mBxoIDIS41fnENNuSZD+WhIOA=="></script>
<script defer src=/congo/lib/katex/auto-render.min.640fd13eb028f3c0e5c119e7a0d56a28836740d716111cd12b4dcf0da038188262559bc61485906dd582b1479b3197e45a88677e782c0e35f353a3e890ee231b.js integrity="sha512-ZA/RPrAo88DlwRnnoNVqKINnQNcWERzRK03PDaA4GIJiVZvGFIWQbdWCsUebMZfkWohnfngsDjXzU6PokO4jGw==" onload=renderMathInElement(document.body)></script>
</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"><header class="flex justify-between py-6 font-semibold sm:items-center sm:py-10 text-neutral-900 dark:text-neutral">
<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:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" rel=me href=/congo/>Congo</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=/congo/docs/ title=Documentation>Docs</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=/congo/samples/ title="Content Samples">Samples</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=/congo/users/ title=Users>Users</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=https://github.com/jpanther/congo title>GitHub</a>
<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 class=flex-grow>
<article class=max-w-prose>
<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:underline-neutral-300 dark:underline-neutral-600" href=/congo/>Welcome to Congo! :tada:</a><span class="px-1 text-primary-500">/</span>
<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:underline-neutral-300 dark:underline-neutral-600" href=/congo/docs/>Documentation</a><span class="px-1 text-primary-500">/</span>
<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:underline-neutral-300 dark:underline-neutral-600" href=/congo/docs/shortcodes/>Shortcodes</a><span class="px-1 text-primary-500">/</span>
<a class="hover:underline hover:decoration-neutral-300 dark:underline-neutral-600" href=/congo/docs/shortcodes/>Shortcodes</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">
@ -78,9 +84,9 @@ Shortcodes
</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 title="Reading time">5 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/shortcodes.md class="text-lg hover:text-primary-500" rel="noopener noreferrer" target=_blank title="Edit content">
<a href=https://github.com/jpanther/congo/tree/dev/exampleSite/content/docs/shortcodes/index.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>
@ -88,9 +94,34 @@ Shortcodes
</div>
</div>
</header>
<section class="prose dark:prose-light">
<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=#alert>Alert</a></li>
<li><a href=#badge>Badge</a></li>
<li><a href=#button>Button</a></li>
<li><a href=#chart>Chart</a></li>
<li><a href=#figure>Figure</a></li>
<li><a href=#icon>Icon</a></li>
<li><a href=#katex>Katex</a></li>
<li><a href=#lead>Lead</a></li>
<li><a href=#mermaid>Mermaid</a></li>
</ul>
</nav>
</div>
</details>
</div>
</div>
<div class="min-w-0 min-h-0 max-w-prose">
<p>In addition to all the <a href=https://gohugo.io/content-management/shortcodes/>default Hugo shortcodes</a>, Congo adds a few extras for additional functionality.</p>
<h2 id=alert>Alert <a class=heading-anchor href=#alert aria-label=Anchor>#</a></h2>
<h2 id=alert class="relative group">Alert <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=#alert aria-label=Anchor>#</a></span></h2>
<p><code>alert</code> outputs its contents as a stylised message box within your article. It&rsquo;s useful for drawing attention to important information that you don&rsquo;t want the reader to miss.</p>
<p>The input is written in Markdown so you can format it however you please.</p>
<p><strong>Example:</strong></p>
@ -98,24 +129,24 @@ Shortcodes
<span class=gs>**Warning!**</span> This action is destructive!
{{<span class=p>&lt;</span> <span class=p>/</span><span class=nt>alert</span> <span class=p>&gt;</span>}}
</code></pre></div><div class="flex px-4 py-3 rounded-md bg-primary-100 dark:bg-primary-900">
<span class="pr-3 text-primary-400">
<span class="ltr:pr-3 rtl:pl-3 text-primary-400">
<span class="relative inline-block align-text-bottom icon"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="exclamation-triangle" class="svg-inline--fa fa-exclamation-triangle fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentcolor" d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937.0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154.0l239.94 416.028zM288 354c-25.405.0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346 7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373.0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884.0-12.356 5.78-11.981 12.654z"/></svg>
</span>
</span>
<span class="no-prose dark:text-neutral-300"><strong>Warning!</strong> This action is destructive!</span>
<span class=dark:text-neutral-300><strong>Warning!</strong> This action is destructive!</span>
</div>
<h2 id=badge>Badge <a class=heading-anchor href=#badge aria-label=Anchor>#</a></h2>
<h2 id=badge class="relative group">Badge <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=#badge aria-label=Anchor>#</a></span></h2>
<p><code>badge</code> outputs a styled badge component which is useful for displaying metadata.</p>
<p><strong>Example:</strong></p>
<div class=highlight><pre tabindex=0 class=chroma><code class=language-md data-lang=md>{{<span class=p>&lt;</span> <span class=nt>badge</span> <span class=p>&gt;</span>}}
New article!
{{<span class=p>&lt;</span> <span class=p>/</span><span class=nt>badge</span> <span class=p>&gt;</span>}}
</code></pre></div><span class=flex>
<span class="ml-1 px-1 py-[1px] text-xs font-normal border rounded-md text-primary-700 dark:text-primary-400 border-primary-400 dark:border-primary-600">
<span class="ltr:ml-1 rtl:mr-1 px-1 py-[1px] text-xs font-normal border rounded-md text-primary-700 dark:text-primary-400 border-primary-400 dark:border-primary-600">
New article!
</span>
</span>
<h2 id=button>Button <a class=heading-anchor href=#button aria-label=Anchor>#</a></h2>
<h2 id=button class="relative group">Button <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=#button aria-label=Anchor>#</a></span></h2>
<p><code>button</code> outputs a styled button component which can be used to highlight a primary action. It has two optional variables <code>href</code> and <code>target</code> which can be used to specify the URL and target of the link.</p>
<p><strong>Example:</strong></p>
<div class=highlight><pre tabindex=0 class=chroma><code class=language-md data-lang=md>{{<span class=p>&lt;</span> <span class=nt>button</span> <span class=na>href</span><span class=o>=</span><span class=s>&#34;#button&#34;</span> <span class=na>target</span><span class=o>=</span><span class=s>&#34;_self&#34;</span> <span class=p>&gt;</span>}}
@ -124,7 +155,7 @@ Call to action
</code></pre></div><a class="px-4 py-2 !text-neutral !no-underline !rounded-md bg-primary-600 hover:!bg-primary-500 dark:bg-primary-800 dark:hover:!bg-primary-700" href=#button target=_self role=button>
Call to action
</a>
<h2 id=chart>Chart <a class=heading-anchor href=#chart aria-label=Anchor>#</a></h2>
<h2 id=chart class="relative group">Chart <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=#chart aria-label=Anchor>#</a></span></h2>
<p><code>chart</code> uses the Chart.js library to embed charts into articles using simple structured data. It supports a number of <a href=https://www.chartjs.org/docs/latest/samples/>different chart styles</a> and everything can be configured from within the shortcode. Simply provide the chart parameters between the shortcode tags and Chart.js will do the rest.</p>
<p>Refer to the <a href=https://www.chartjs.org/docs/latest/general/>official Chart.js docs</a> for details on syntax and supported chart types.</p>
<p><strong>Example:</strong></p>
@ -140,11 +171,69 @@ Call to action
<span class=p>{{</span><span class=o>&lt;</span> <span class=err>/chart &gt;}}</span>
</code></pre></div>
<div class=chart>
<canvas id=632984157></canvas>
<script>document.addEventListener("DOMContentLoaded",b=>{const a=document.getElementById("632984157"),c=new Chart(a,{type:'bar',data:{labels:['Tomato','Blueberry','Banana','Lime','Orange'],datasets:[{label:'# of votes',data:[12,19,3,5,3]}]}})})</script>
<canvas id=254396178></canvas>
<script type=text/javascript>window.addEventListener("DOMContentLoaded",b=>{const a=document.getElementById("254396178"),c=new Chart(a,{type:'bar',data:{labels:['Tomato','Blueberry','Banana','Lime','Orange'],datasets:[{label:'# of votes',data:[12,19,3,5,3]}]}})})</script>
</div>
<p>You can see some additional Chart.js examples on the <a href=https://jpanther.github.io/congo/samples/charts/>charts samples</a> page.</p>
<h2 id=icon>Icon <a class=heading-anchor href=#icon aria-label=Anchor>#</a></h2>
<h2 id=figure class="relative group">Figure <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=#figure aria-label=Anchor>#</a></span></h2>
<p>Congo includes a <code>figure</code> shortcode for adding images to content. The shortcode replaces the base Hugo functionality in order to provide additional performance benefits.</p>
<p>Images included using <code>figure</code> will be optimised using Hugo Pipes and scaled in order to provide images appropriate to different device resolutions.</p>
<p>The <code>figure</code> shortcode accepts six parameters:</p>
<table>
<thead>
<tr>
<th>Parameter</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>src</code></td>
<td><strong>Required.</strong> The filename of the image. This image must be a <a href=https://gohugo.io/content-management/page-resources/>page resource</a> bundled with the page.</td>
</tr>
<tr>
<td><code>alt</code></td>
<td><a href=https://moz.com/learn/seo/alt-text>Alternative text description</a> for the image.</td>
</tr>
<tr>
<td><code>caption</code></td>
<td>Markdown for the image caption, which will be displayed below the image.</td>
</tr>
<tr>
<td><code>class</code></td>
<td>Additional CSS classes to apply to the image.</td>
</tr>
<tr>
<td><code>href</code></td>
<td>URL that the image should be linked to.</td>
</tr>
<tr>
<td><code>default</code></td>
<td>Special parameter to revert to default Hugo <code>figure</code> behaviour. Simply provide <code>default=true</code> and then use normal <a href=https://gohugo.io/content-management/shortcodes/#figure>Hugo shortcode syntax</a>.</td>
</tr>
</tbody>
</table>
<p>Congo also supports automatic conversion of images included using standard Markdown syntax. Simply use the following format and the theme will handle the rest:</p>
<div class=highlight><pre tabindex=0 class=chroma><code class=language-md data-lang=md>![<span class=nt>Alt text</span>](<span class=na>image.jpg &#34;Image caption&#34;</span>)
</code></pre></div><p><strong>Example:</strong></p>
<div class=highlight><pre tabindex=0 class=chroma><code class=language-md data-lang=md>{{<span class=p>&lt;</span> <span class=nt>figure</span>
<span class=na>src</span><span class=o>=</span><span class=s>&#34;abstract.jpg&#34;</span>
<span class=na>alt</span><span class=o>=</span><span class=s>&#34;Abstract purple artwork&#34;</span>
<span class=na>caption</span><span class=o>=</span><span class=s>&#34;Photo by </span>[<span class=nt>Jr Korpa</span>](<span class=na>https://unsplash.com/@jrkorpa</span>)<span class=s> on </span>[<span class=nt>Unsplash</span>](<span class=na>https://unsplash.com/</span>)<span class=s>&#34;</span>
<span class=p>&gt;</span>}}
<span class=c>&lt;!-- OR --&gt;</span>
![<span class=nt>Abstract purple artwork</span>](<span class=na>abstract.jpg &#34;Photo by [Jr Korpa](https://unsplash.com/@jrkorpa</span>) on [<span class=nt>Unsplash</span>](<span class=na>https://unsplash.com/</span>)&#34;)
</code></pre></div>
<figure>
<img class="my-0 rounded-md" srcset="/congo/docs/shortcodes/abstract_hu684c0a32e4d0f58583128be29b348bb9_40710_330x0_resize_q75_box.jpg 330w,
/congo/docs/shortcodes/abstract_hu684c0a32e4d0f58583128be29b348bb9_40710_660x0_resize_q75_box.jpg 660w,
/congo/docs/shortcodes/abstract_hu684c0a32e4d0f58583128be29b348bb9_40710_1024x0_resize_q75_box.jpg 1024w,
/congo/docs/shortcodes/abstract_hu684c0a32e4d0f58583128be29b348bb9_40710_1320x0_resize_q75_box.jpg 2x" src=/congo/docs/shortcodes/abstract_hu684c0a32e4d0f58583128be29b348bb9_40710_660x0_resize_q75_box.jpg alt="Abstract purple artwork">
<figcaption>Photo by <a href=https://unsplash.com/@jrkorpa>Jr Korpa</a> on <a href=https://unsplash.com/>Unsplash</a></figcaption>
</figure>
<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><code>icon</code> outputs an SVG icon and takes the icon name as its only parameter. The icon is scaled to match the current text size.</p>
<p><strong>Example:</strong></p>
<div class=highlight><pre tabindex=0 class=chroma><code class=language-md data-lang=md>{{<span class=p>&lt;</span> <span class=nt>icon</span> <span class=err>&#34;</span><span class=na>github</span><span class=err>&#34;</span> <span class=p>&gt;</span>}}
@ -155,7 +244,7 @@ Call to action
<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 shortcode by using the SVG filename without the <code>.svg</code> extension.</p>
<p>Icons can also be used in partials by calling the <a href=https://jpanther.github.io/congo/docs/partials/#icon>icon partial</a>.</p>
<h2 id=katex>Katex <a class=heading-anchor href=#katex aria-label=Anchor>#</a></h2>
<h2 id=katex class="relative group">Katex <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=#katex aria-label=Anchor>#</a></span></h2>
<p>The <code>katex</code> shortcode can be used to add mathematical expressions to article content using the KaTeX package. Refer to the online reference of <a href=https://katex.org/docs/supported.html>supported TeX functions</a> for the available syntax.</p>
<p>To include mathematical expressions in an article, simply place the shortcode anywhere with the content. It only needs to be included once per article and KaTeX will automatically render any markup on that page. Both inline and block notation are supported.</p>
<p>Inline notation can be generated by wrapping the expression in <code>\\(</code> and <code>\\)</code> delimiters. Alternatively, block notation can be generated using <code>$$</code> delimiters.</p>
@ -165,16 +254,16 @@ Call to action
</code></pre></div><p>
\(f(a,b,c) = (a^2+b^2+c^2)^3\)</p>
<p>Check out the <a href=https://jpanther.github.io/congo/samples/mathematical-notation/>mathematical notation samples</a> page for more examples.</p>
<h2 id=lead>Lead <a class=heading-anchor href=#lead aria-label=Anchor>#</a></h2>
<h2 id=lead class="relative group">Lead <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=#lead aria-label=Anchor>#</a></span></h2>
<p><code>lead</code> is used to bring emphasis to the start of an article. It can be used to style an introduction, or to call out an important piece of information. Simply wrap any Markdown content in the <code>lead</code> shortcode.</p>
<p><strong>Example:</strong></p>
<div class=highlight><pre tabindex=0 class=chroma><code class=language-md data-lang=md>{{<span class=p>&lt;</span> <span class=nt>lead</span> <span class=p>&gt;</span>}}
When life gives you lemons, make lemonade.
{{<span class=p>&lt;</span> <span class=p>/</span><span class=nt>lead</span> <span class=p>&gt;</span>}}
</code></pre></div><div class="!mb-9 text-xl text-neutral-500 dark:text-neutral-400">
</code></pre></div><div class="!mb-9 text-xl lead">
When life gives you lemons, make lemonade.
</div>
<h2 id=mermaid>Mermaid <a class=heading-anchor href=#mermaid aria-label=Anchor>#</a></h2>
<h2 id=mermaid class="relative group">Mermaid <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=#mermaid aria-label=Anchor>#</a></span></h2>
<p><code>mermaid</code> allows you to draw detailed diagrams and visualisations using text. It uses Mermaid under the hood and supports a wide variety of diagrams, charts and other output formats.</p>
<p>Simply write your Mermaid syntax within the <code>mermaid</code> shortcode and let the plugin do the rest.</p>
<p>Refer to the <a href=https://mermaid-js.github.io/>official Mermaid docs</a> for details on syntax and supported diagram types.</p>
@ -190,47 +279,87 @@ A[Lemons]-->B[Lemonade];
B-->C[Profit]
</div>
<p>You can see some additional Mermaid examples on the <a href=https://jpanther.github.io/congo/samples/diagrams-flowcharts/>diagrams and flowcharts samples</a> page.</p>
</div>
</section>
<footer class=pt-8>
<div class="pt-8 article-pagination">
<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 href=/congo/docs/front-matter/>
<span class="mr-3 article-pagination-direction">&larr;</span>
<a class="flex group" href=/congo/docs/front-matter/>
<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="article-pagination-title mt-[0.1rem] leading-6">Front Matter</span>
<span class="mt-[0.1rem] leading-6 group-hover:underline group-hover:decoration-primary-500">Front Matter</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" href=/congo/docs/partials/>
<a class="flex text-right group" href=/congo/docs/partials/>
<span class="flex flex-col">
<span class="article-pagination-title mt-[0.1rem] leading-6">Partials</span>
<span class="mt-[0.1rem] leading-6 group-hover:underline group-hover:decoration-primary-500">Partials</span>
<span class="mt-[0.1rem] text-xs text-neutral-500 dark:text-neutral-400">
</span>
</span>
<span class="ml-3 article-pagination-direction">&rarr;</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>
</main><footer class=py-10>
<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">
&copy;
2022
Congo
© 2022 Congo contributors
</p>
<p class="text-xs text-neutral-400 dark:text-neutral-600">
Powered by <a class="hover:underline hover:underline-primary-400 hover:text-primary-500" href=https://gohugo.io/ target=_blank rel="noopener noreferrer">Hugo</a> & <a class="hover:underline hover:underline-primary-400 hover:text-primary-500" href=https://git.io/hugo-congo target=_blank rel="noopener noreferrer">Congo</a>
<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>

Binary file not shown.

After

Width:  |  Height:  |  Size: 247 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 70 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 94 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 43 KiB

View File

@ -0,0 +1,229 @@
<!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>What's New in 2.0 ✨ &#183; Congo</title>
<meta name=title content="What's New in 2.0 ✨ &#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/version-2/>
<link rel=alternate type=application/rss+xml href=/congo/docs/version-2/index.xml title=Congo>
<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="What's New in 2.0 ✨">
<meta property="og:description" content="Discover what's new in Congo version 2.0.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://jpanther.github.io/congo/docs/version-2/"><meta property="og:site_name" content="Congo">
<meta name=twitter:card content="summary">
<meta name=twitter:title content="What's New in 2.0 ✨">
<meta name=twitter:description content="Discover what's new in Congo version 2.0.">
<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>
<header>
<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/version-2/>What's New in 2.0 ✨</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">What's New in 2.0 ✨</h1>
</header>
<section class="flex flex-col max-w-full prose lg:flex-row dark:prose-invert mt-12">
<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=#tailwind-css-30>Tailwind CSS 3.0</a></li>
<li><a href=#multilingual-support>Multilingual support</a></li>
<li><a href=#rtl-language-support>RTL language support</a></li>
<li><a href=#automatic-image-resizing>Automatic image resizing</a></li>
<li><a href=#performance-improvements>Performance improvements</a></li>
<li><a href=#site-search>Site search</a></li>
<li><a href=#tables-of-contents>Tables of contents</a></li>
<li><a href=#accessibility-improvements>Accessibility improvements</a></li>
<li><a href=#a-whole-lot-more>A whole lot more</a></li>
<li><a href=#next-steps>Next steps</a></li>
</ul>
</nav>
</div>
</details>
</div>
</div>
<div class="min-w-0 min-h-0 max-w-prose">
<div class="!mb-9 text-xl lead">
Congo 2.0 is packed with tons of new features and optimisations.
</div>
<p>The original aim of Congo was to develop a theme that was simple and lightweight. Version 2 takes this one step further and makes the theme even more powerful while still maintaining its lightweight footprint.</p>
<p>Continue reading below to discover what&rsquo;s new. When you&rsquo;re ready to upgrade, check out the <a href=https://jpanther.github.io/congo/docs/version-2/upgrade/>guide to upgrading</a>.</p>
<h2 id=tailwind-css-30 class="relative group">Tailwind CSS 3.0 <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=#tailwind-css-30 aria-label=Anchor>#</a></span></h2>
<p>Tailwind CSS is at the heart of Congo and this new release contains the very latest <a href=https://tailwindcss.com/blog/tailwindcss-v3>Tailwind CSS version 3</a>. It brings with it performance optimisations and support for some great new CSS features.</p>
<div style=position:relative;padding-bottom:56.25%;height:0;overflow:hidden>
<iframe src=https://www.youtube.com/embed/TmWIrBPE6Bc style=position:absolute;top:0;left:0;width:100%;height:100%;border:0 allowfullscreen title="YouTube Video"></iframe>
</div>
<p>Implementing this new version has also removed some Tailwind plugin dependencies from the theme, allowing the overall footprint to remain lightweight.</p>
<h2 id=multilingual-support class="relative group">Multilingual support <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=#multilingual-support aria-label=Anchor>#</a></span></h2>
<p>A highly requested feature, Congo is now multilingual! If you publish your content in multiple languages, the site will be built with all the translations available.</p>
<div class="text-2xl text-center" style=font-size:2.8rem>🇦🇺 🇩🇪 🇫🇷 🇪🇸 🇨🇳 🇧🇷 🇹🇷</div>
<p>Thanks to submissions from the community, Congo has already been translated into <a href=https://github.com/jpanther/congo/tree/dev/i18n>seven languages</a> with more to be added over time. By the way, <a href=https://github.com/jpanther/congo/pulls>pull requests</a> for new languages are always welcome!</p>
<h2 id=rtl-language-support class="relative group">RTL language support <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=#rtl-language-support aria-label=Anchor>#</a></span></h2>
<p>One of the benefits of the new Tailwind and Multilingual features is the ability to add RTL language support. When enabled, the entire site will reflow content from right-to-left. Every element in the theme has been restyled to ensure it looks great in this mode which aids authors who wish to generate content in RTL languages.</p>
<p>RTL is controlled on a per-language basis so you can mix and match both RTL and LTR content in your projects and the theme will respond accordingly.</p>
<h2 id=automatic-image-resizing class="relative group">Automatic image resizing <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=#automatic-image-resizing aria-label=Anchor>#</a></span></h2>
<p>A big change in Congo 2.0 is the addition of automatic image resizing. Using the power of Hugo Pipes, images in Markdown content are now automatically scaled to different output sizes. These are then presented using HTML <code>srcset</code> attributes enabling optimised file sizes to be served to your site visitors.</p>
<p>
<figure>
<img class="my-0 rounded-md" srcset="/congo/docs/version-2/image-resizing_hudc3a1812e7aa4d065174f956d05e334c_253342_330x0_resize_box_3.png 330w,
/congo/docs/version-2/image-resizing_hudc3a1812e7aa4d065174f956d05e334c_253342_660x0_resize_box_3.png 660w,
/congo/docs/version-2/image-resizing_hudc3a1812e7aa4d065174f956d05e334c_253342_1024x0_resize_box_3.png 1024w,
/congo/docs/version-2/image-resizing_hudc3a1812e7aa4d065174f956d05e334c_253342_1320x0_resize_box_3.png 2x" src=/congo/docs/version-2/image-resizing_hudc3a1812e7aa4d065174f956d05e334c_253342_660x0_resize_box_3.png alt>
<figcaption></figcaption>
</figure>
</p>
<div class=highlight><pre tabindex=0 class=chroma><code class=language-html data-lang=html><span class=c>&lt;!-- Markdown: ![My image](image.jpg) --&gt;</span>
<span class=p>&lt;</span><span class=nt>img</span>
<span class=na>srcset</span><span class=o>=</span><span class=s>&#34;
</span><span class=s> /image_320x0_resize_q75_box.jpg 320w,
</span><span class=s> /image_635x0_resize_q75_box.jpg 635w,
</span><span class=s> /image_1024x0_resize_q75_box.jpg 1024w,
</span><span class=s> /image_1270x0_resize_q75_box.jpg 2x&#34;</span>
<span class=na>src</span><span class=o>=</span><span class=s>&#34;/image_635x0_resize_q75_box.jpg&#34;</span>
<span class=na>alt</span><span class=o>=</span><span class=s>&#34;My image&#34;</span>
<span class=p>/&gt;</span>
</code></pre></div><p>Best of all there&rsquo;s nothing you need to change! Simply insert standard Markdown image syntax and let the theme do the rest. If you want a little more control, the <code>figure</code> shortcode has been completely rewritten to provide the same resizing benefits.</p>
<h2 id=performance-improvements class="relative group">Performance improvements <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=#performance-improvements aria-label=Anchor>#</a></span></h2>
<p>This update packs performance improvements throughout. A key objective for this release was to improve Lighthouse scores and Congo now scores a perfect 100 on all four metrics.</p>
<figure><img src=/congo/docs/version-2/lighthouse.jpg width=100% height=auto style=max-width:600px;max-height:136px>
</figure>
<p>There&rsquo;s too many individual changes to highlight them here but the results speak for themselves. If you want to dig deeper, you can <a href=lighthouse.html>view the Lighthouse report</a>. Real world performance will vary based upon server configuration.</p>
<h2 id=site-search class="relative group">Site search <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=#site-search aria-label=Anchor>#</a></span></h2>
<p>Powered by <a href=https://fusejs.io>Fuse.js</a>, site search allows visitors to quickly and easily find your content. All searches are performed client-side meaning there&rsquo;s nothing to configure on the server and queries are performed super fast. Simply enable the feature in your site configuration and you&rsquo;re all set. Oh, and it also supports full keyboard navigation!</p>
<h2 id=tables-of-contents class="relative group">Tables of contents <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=#tables-of-contents aria-label=Anchor>#</a></span></h2>
<p>A highly requested feature, Congo now supports tables of contents on article pages. You can see it in action on this page. The contents are fully responsive and will adjust to take advantage of the space available at different screen resolutions.</p>
<p>Available on a global or per article basis, the table of contents can be fully customised using standard Hugo configuration values, allowing you to adjust the behaviour to suit your project.</p>
<h2 id=accessibility-improvements class="relative group">Accessibility improvements <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=#accessibility-improvements aria-label=Anchor>#</a></span></h2>
<p>From adding ARIA descriptions to more items or simply adjusting the contrast of certain text elements, this release is the most accessible yet.</p>
<p>Version 2 also introduces &ldquo;skip to content&rdquo; and &ldquo;scroll to top&rdquo; links that enable quick navigation. There&rsquo;s also keyboard shortcuts for enabling items like search without reaching for the mouse.</p>
<p>The new image resizing features also provide full control over <code>alt</code> and <code>title</code> elements enabling an accessible experience for all visitors.</p>
<h2 id=a-whole-lot-more class="relative group">A whole lot more <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=#a-whole-lot-more aria-label=Anchor>#</a></span></h2>
<p>There&rsquo;s countless other minor changes to explore. From being able to display taxonomies on articles and list pages, to using the new <code>headline</code> author parameter to customise your homepage. There&rsquo;s also improved JSON-LD strucured data which further optimises SEO performance. Plus the entire theme has had extra polish to ensure a consistent design language.</p>
<p>🚀 Check out the <a href=https://github.com/jpanther/congo/blob/dev/CHANGELOG.md>full changelog</a> to learn more.</p>
<h2 id=next-steps class="relative group">Next steps <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=#next-steps aria-label=Anchor>#</a></span></h2>
<p>If you&rsquo;re ready to upgrade, read the <a href=https://jpanther.github.io/congo/docs/version-2/upgrade/>upgrading from version 1 guide</a> to get started. If you&rsquo;re new to Congo, check out the <a href=https://jpanther.github.io/congo/docs/installation/>Installation guide</a> to begin a new project.</p>
<hr>
</div>
</section>
<section>
<article>
<h3 class="flex items-center mt-6 text-xl font-semibold">
<a class="hover:underline hover:decoration-primary-500 hover:underline-offset-2 text-neutral-800 dark:text-neutral" href=/congo/docs/version-2/upgrade/>Upgrading from Congo 1.x</a>
</h3>
<div class="text-sm text-neutral-500 dark:text-neutral-400">
<div class="flex flex-row flex-wrap items-center">
<span title="Reading time">6 mins</span>
</div>
</div>
</article>
</section>
<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>

View File

@ -0,0 +1 @@
<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>What's New in 2.0 ✨ on Congo</title><link>https://jpanther.github.io/congo/docs/version-2/</link><description>Recent content in What's New in 2.0 ✨ on Congo</description><generator>Hugo -- gohugo.io</generator><language>en-au</language><copyright>&amp;copy; 2022 Congo contributors</copyright><lastBuildDate>Wed, 19 Jan 2022 00:00:00 +0000</lastBuildDate><atom:link href="https://jpanther.github.io/congo/docs/version-2/index.xml" rel="self" type="application/rss+xml"/><item><title>Upgrading from Congo 1.x</title><link>https://jpanther.github.io/congo/docs/version-2/upgrade/</link><pubDate>Thu, 20 Jan 2022 00:00:00 +0000</pubDate><guid>https://jpanther.github.io/congo/docs/version-2/upgrade/</guid><description>Although Congo 2.</description></item></channel></rss>

File diff suppressed because one or more lines are too long

Binary file not shown.

After

Width:  |  Height:  |  Size: 63 KiB

View File

@ -0,0 +1 @@
<!doctype html><html><head><title>https://jpanther.github.io/congo/docs/version-2/</title><link rel=canonical href=https://jpanther.github.io/congo/docs/version-2/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://jpanther.github.io/congo/docs/version-2/"></head></html>

View File

@ -0,0 +1,398 @@
<!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>Upgrading from Congo 1.x &#183; Congo</title>
<meta name=title content="Upgrading from Congo 1.x &#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/version-2/upgrade/>
<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="Upgrading from Congo 1.x">
<meta property="og:description" content="Discover what's new in Congo version 2.0.">
<meta property="og:type" content="article">
<meta property="og:url" content="https://jpanther.github.io/congo/docs/version-2/upgrade/"><meta property="article:section" content="docs">
<meta property="article:published_time" content="2022-01-20T00:00:00+00:00">
<meta property="article:modified_time" content="2022-01-20T00:00:00+00:00"><meta property="og:site_name" content="Congo">
<meta name=twitter:card content="summary">
<meta name=twitter:title content="Upgrading from Congo 1.x">
<meta name=twitter:description content="Discover what's new in Congo version 2.0.">
<script type=application/ld+json>[{"@context":"https://schema.org","@type":"Article","articleSection":"Documentation","name":"Upgrading from Congo 1.x","headline":"Upgrading from Congo 1.x","description":"Discover what\u0027s new in Congo version 2.0.","abstract":"Although Congo 2.","inLanguage":"en-au","url":"https:\/\/jpanther.github.io\/congo\/docs\/version-2\/upgrade\/","author":{"@type":"Person","name":"Congo"},"copyrightYear":"2022","dateCreated":"2022-01-20T00:00:00\u002b00:00","datePublished":"2022-01-20T00:00:00\u002b00:00","dateModified":"2022-01-20T00:00:00\u002b00:00","keywords":["new","docs"],"mainEntityOfPage":"true","wordCount":"1245"}]</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>
<a class="hover:underline hover:decoration-neutral-300 dark:underline-neutral-600" href=/congo/docs/version-2/>What's New in 2.0 ✨</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/version-2/upgrade/>Upgrading from Congo 1.x</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">
Upgrading from Congo 1.x
</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">6 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/version-2/upgrade/index.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=#step-1-upgrade-hugo>Step 1: Upgrade Hugo</a></li>
<li><a href=#step-2-upgrade-congo>Step 2: Upgrade Congo</a>
<ul>
<li><a href=#upgrade-using-hugo>Upgrade using Hugo</a></li>
<li><a href=#upgrade-using-git>Upgrade using git</a></li>
<li><a href=#upgrade-manually>Upgrade manually</a></li>
</ul>
</li>
<li><a href=#step-3-theme-configuration>Step 3: Theme configuration</a>
<ul>
<li><a href=#languagestoml>Languages.toml</a></li>
<li><a href=#configtoml>Config.toml</a></li>
<li><a href=#markuptoml>Markup.toml</a></li>
<li><a href=#paramstoml>Params.toml</a></li>
</ul>
</li>
<li><a href=#step-4-move-assets>Step 4: Move assets</a></li>
<li><a href=#step-5-check-content>Step 5: Check content</a></li>
<li><a href=#step-6-rebuild>Step 6: Rebuild</a></li>
</ul>
</nav>
</div>
</details>
</div>
</div>
<div class="min-w-0 min-h-0 max-w-prose">
<p>Although Congo 2.0 contains a large number of changes, the theme has been designed to minimise the effort required to upgrade to the latest release.</p>
<p>That said, there are some changes that require adjustments to existing sites that are built with Congo version 1.x. This guide will step you through the process and highlight things you need to consider.</p>
<h2 id=step-1-upgrade-hugo class="relative group">Step 1: Upgrade Hugo <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=#step-1-upgrade-hugo aria-label=Anchor>#</a></span></h2>
<div class="flex px-4 py-3 rounded-md bg-primary-100 dark:bg-primary-900">
<span class="ltr:pr-3 rtl:pl-3 text-primary-400">
<span class="relative inline-block align-text-bottom icon"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="exclamation-triangle" class="svg-inline--fa fa-exclamation-triangle fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentcolor" d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937.0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154.0l239.94 416.028zM288 354c-25.405.0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346 7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373.0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884.0-12.356 5.78-11.981 12.654z"/></svg>
</span>
</span>
<span class=dark:text-neutral-300>Congo 2.0 requires a minimum of <strong>Hugo v0.87.0 or later</strong></span>
</div>
<p>Congo is built to take advantage of some of the latest Hugo features. You should regularly keep your Hugo installation up to date to avoid any issues.</p>
<p>You can check your current version using the command <code>hugo version</code>. Visit the <a href=https://gohugo.io/getting-started/installing/>Hugo docs</a> for information on obtaining a newer release for your platform.</p>
<h2 id=step-2-upgrade-congo class="relative group">Step 2: Upgrade Congo <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=#step-2-upgrade-congo aria-label=Anchor>#</a></span></h2>
<p>The process for upgrading Congo will depend on how you include the theme in your project. Instructions for each method can be found below.</p>
<ul>
<li><a href=#upgrade-using-hugo>Upgrade using Hugo</a></li>
<li><a href=#upgrade-using-git>Upgrade using git</a></li>
<li><a href=#upgrade-manually>Upgrade manually</a></li>
</ul>
<h3 id=upgrade-using-hugo class="relative group">Upgrade using Hugo <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=#upgrade-using-hugo aria-label=Anchor>#</a></span></h3>
<p>Hugo makes updating modules super easy. Simply change into your project directory and execute the following command:</p>
<div class=highlight><pre tabindex=0 class=chroma><code class=language-shell data-lang=shell>hugo mod get -u
</code></pre></div><p>Hugo will automatically upgrade any modules that are required for your project. It does this by inspecting your <code>module.toml</code> and <code>go.mod</code> files. If you have any issues with the upgrade, check to ensure these files are still configured correctly.</p>
<p>Once the theme has been upgraded, continue to the <a href=#step-3-theme-configuration>next section</a>.</p>
<h3 id=upgrade-using-git class="relative group">Upgrade using git <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=#upgrade-using-git aria-label=Anchor>#</a></span></h3>
<p>Git submodules can be upgraded using the <code>git</code> command. Simply execute the following command and the latest version of the theme will be downloaded into your local repository:</p>
<div class=highlight><pre tabindex=0 class=chroma><code class=language-shell data-lang=shell>git submodule upgrade --remote --merge
</code></pre></div><p>Once the submodule has been upgraded, continue to the <a href=#step-3-theme-configuration>next section</a>.</p>
<h3 id=upgrade-manually class="relative group">Upgrade manually <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=#upgrade-manually aria-label=Anchor>#</a></span></h3>
<p>Updating Congo manually requires you to download the latest copy of the theme and replace the old version in your project.</p>
<div class="flex px-4 py-3 rounded-md bg-primary-100 dark:bg-primary-900">
<span class="ltr:pr-3 rtl:pl-3 text-primary-400">
<span class="relative inline-block align-text-bottom icon"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="exclamation-triangle" class="svg-inline--fa fa-exclamation-triangle fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentcolor" d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937.0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154.0l239.94 416.028zM288 354c-25.405.0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346 7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373.0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884.0-12.356 5.78-11.981 12.654z"/></svg>
</span>
</span>
<span class=dark:text-neutral-300>Note that any local customisations you have made to the theme files will be lost during this process.</span>
</div>
<ol>
<li>
<p>Download the latest release of the theme source code.</p>
<a class="px-4 py-2 !text-neutral !no-underline !rounded-md bg-primary-600 hover:!bg-primary-500 dark:bg-primary-800 dark:hover:!bg-primary-700" href=https://github.com/jpanther/congo/releases/latest target=_blank role=button>
Download from Github
</a>
</li>
<li>
<p>Extract the archive, rename the folder to <code>congo</code> and move it to the <code>themes/</code> directory inside your Hugo project&rsquo;s root folder. You will need to overwrite the existing directory to replace all the theme files.</p>
</li>
<li>
<p>Continue to the <a href=#step-3-theme-configuration>next section</a>.</p>
</li>
</ol>
<h2 id=step-3-theme-configuration class="relative group">Step 3: Theme configuration <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=#step-3-theme-configuration aria-label=Anchor>#</a></span></h2>
<p>Congo 2.0 introduces a number of new theme configuration parameters. Although the theme will adapt to existing version 1 configurations, in order to take advantage of some of the newer theme features, you will need to adjust your existing configuration.</p>
<p>The simplest way to do this is to take a copy of the theme&rsquo;s default configuration and compare it to your existing files. The process is outlined in greater detail below.</p>
<h3 id=languagestoml class="relative group">Languages.toml <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=#languagestoml aria-label=Anchor>#</a></span></h3>
<p>In order to provide multilingual support, language-specific theme parameters have been moved to a new config file <code>languages.[lang-code].toml</code>. The theme comes with a template <code>languages.en.toml</code> file which can be used as a guide.</p>
<div class="flex px-4 py-3 rounded-md bg-primary-100 dark:bg-primary-900">
<span class="ltr:pr-3 rtl:pl-3 text-primary-400">
<span class="relative inline-block align-text-bottom icon"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="exclamation-triangle" class="svg-inline--fa fa-exclamation-triangle fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentcolor" d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937.0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154.0l239.94 416.028zM288 354c-25.405.0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346 7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373.0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884.0-12.356 5.78-11.981 12.654z"/></svg>
</span>
</span>
<span class=dark:text-neutral-300>This step is optional if you do not need multilingual support, although completing it now will make future theme upgrades easier.</span>
</div>
<p>The languages config file follows this structure:</p>
<div class=highlight><pre tabindex=0 class=chroma><code class=language-toml data-lang=toml><span class=c># config/_default/languagues.en.toml</span>
<span class=nx>languageCode</span> <span class=p>=</span> <span class=s2>&#34;en&#34;</span>
<span class=nx>languageName</span> <span class=p>=</span> <span class=s2>&#34;English&#34;</span>
<span class=nx>displayName</span> <span class=p>=</span> <span class=s2>&#34;EN&#34;</span>
<span class=nx>htmlCode</span> <span class=p>=</span> <span class=s2>&#34;en&#34;</span>
<span class=nx>weight</span> <span class=p>=</span> <span class=mi>1</span>
<span class=nx>rtl</span> <span class=p>=</span> <span class=kc>false</span>
<span class=c># Language-specific parameters go here</span>
</code></pre></div><p>Using your preferred language, simply create this new file in <code>config/_default/</code> and then move the language-specific parameters from any existing config files over to this new file. The table below outlines the parameters that need to be moved.</p>
<table>
<thead>
<tr>
<th>Parameter</th>
<th>Old location</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>title</code></td>
<td><code>config.toml</code></td>
</tr>
<tr>
<td><code>description</code></td>
<td><code>params.toml</code></td>
</tr>
<tr>
<td><code>copyright</code></td>
<td><code>config.toml</code></td>
</tr>
<tr>
<td><code>dateFormat</code></td>
<td><code>params.toml</code></td>
</tr>
<tr>
<td><code>[author]</code></td>
<td><code>config.toml</code></td>
</tr>
</tbody>
</table>
<p>Once the values have been moved to the new location, these parameters should be deleted from their original locations.</p>
<h3 id=configtoml class="relative group">Config.toml <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=#configtoml aria-label=Anchor>#</a></span></h3>
<p>The <code>config.toml</code> file now only contains base Hugo configuration values. Other than removing the language-specific strings above, there are only two changes to consider.</p>
<p>If you&rsquo;re using a language other than English, provide a <code>defaultContentLanguage</code> value that matches the language code in the config file you created for your language. Secondly, to take advange of the new site search in Congo 2.0, an <code>[outputs]</code> block needs to be provided.</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>defaultContentLanguage</span> <span class=p>=</span> <span class=s2>&#34;en&#34;</span>
<span class=nx>enableRobotsTXT</span> <span class=p>=</span> <span class=kc>true</span>
<span class=nx>paginate</span> <span class=p>=</span> <span class=mi>10</span>
<span class=nx>summaryLength</span> <span class=p>=</span> <span class=mi>0</span>
<span class=p>[</span><span class=nx>outputs</span><span class=p>]</span>
<span class=nx>home</span> <span class=p>=</span> <span class=p>[</span><span class=s2>&#34;HTML&#34;</span><span class=p>,</span> <span class=s2>&#34;RSS&#34;</span><span class=p>,</span> <span class=s2>&#34;JSON&#34;</span><span class=p>]</span>
</code></pre></div><h3 id=markuptoml class="relative group">Markup.toml <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=#markuptoml aria-label=Anchor>#</a></span></h3>
<p>Congo 2.0 adds support for tables of contents on article pages. Although Hugo ships with default settings for generating contents listings, you can adjust this behaviour by adding a new <code>[tableOfContents]</code> block to your <code>markup.toml</code> file.</p>
<p>The recommended settings are as follows, which includes any headings in the Markdown content at levels 2, 3 and 4:</p>
<div class=highlight><pre tabindex=0 class=chroma><code class=language-toml data-lang=toml><span class=c># config/_default/markup.toml</span>
<span class=p>[</span><span class=nx>tableOfContents</span><span class=p>]</span>
<span class=nx>startLevel</span> <span class=p>=</span> <span class=mi>2</span>
<span class=nx>endLevel</span> <span class=p>=</span> <span class=mi>4</span>
</code></pre></div><h3 id=paramstoml class="relative group">Params.toml <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=#paramstoml aria-label=Anchor>#</a></span></h3>
<p>A number of new theme parameters have been introduced in Congo 2.0. Some minor changes are requried to existing configurations. Remember, the theme will always revert to a sensible default if a parameter is not provided.</p>
<p>The way that dark mode works in Congo has been changed to allow greater flexibility around configuration. The old <code>darkMode</code> and <code>darkToggle</code> parameters have been <strong>removed and replaced</strong> by three new parameters. These new options operate independently of each other, making it possible to force the appearance while still allowing the user to override.</p>
<table>
<thead>
<tr>
<th>New parameter</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>defaultAppearance</code></td>
<td>String</td>
<td><code>"light"</code></td>
<td>Default theme appearance; either <code>light</code> or <code>dark</code>.<br>⚠️ <em>Setting this to <code>light</code> replicates the old <code>darkMode = false</code> setting, while <code>dark</code> replicates <code>darkMode = true</code>.</em></td>
</tr>
<tr>
<td><code>autoSwitchAppearance</code></td>
<td>Boolean</td>
<td><code>true</code></td>
<td>Whether the theme appearance automatically switches based upon the operating system preference. Set to <code>false</code> to force the site to always use the <code>defaultAppearance</code>. <br>⚠️ <em>Setting this to <code>true</code> replicates the old <code>darkMode = "auto"</code> setting.</em></td>
</tr>
<tr>
<td><code>showAppearanceSwitcher</code></td>
<td>Boolean</td>
<td><code>false</code></td>
<td>Whether the theme appearance switcher is dispalyed in the site footer. <br>⚠️ <em>This parameter replaces <code>darkToggle</code>.</em></td>
</tr>
</tbody>
</table>
<p>The following table outlines some other key <strong>new parameters</strong> that control new features in version 2:</p>
<table>
<thead>
<tr>
<th>New parameter</th>
<th>Type</th>
<th>Default</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>enableSearch</code></td>
<td>Boolean</td>
<td><code>false</code></td>
</tr>
<tr>
<td><code>showScrollToTop</code></td>
<td>Boolean</td>
<td><code>true</code></td>
</tr>
<tr>
<td><code>article.showTaxonomies</code></td>
<td>Boolean</td>
<td><code>false</code></td>
</tr>
<tr>
<td><code>article.showTableOfContents</code></td>
<td>Boolean</td>
<td><code>false</code></td>
</tr>
<tr>
<td><code>list.showTableOfContents</code></td>
<td>Boolean</td>
<td><code>false</code></td>
</tr>
</tbody>
</table>
<p>For the full list of supported parameters, refer to the <a href=https://jpanther.github.io/congo/docs/configuration/>Configuration</a> docs.</p>
<h2 id=step-4-move-assets class="relative group">Step 4: Move assets <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=#step-4-move-assets aria-label=Anchor>#</a></span></h2>
<p>All site assets now use Hugo Pipes to build an optimised version of your project. In order for the theme to locate your files, any previously static assets used in the theme need to be moved to the Hugo assets folder.</p>
<p><code>static/me.jpg</code> <strong></strong> <code>assets/me.jpg</code><br>
<code>static/logo.jpg</code> <strong></strong> <code>assets/logo.jpg</code></p>
<p>If you have provided an author image or site logo, simply move these assets from the <code>static/</code> folder to the <code>assets/</code> folder. If you use the same directory structure the theme will know where to find these files automatically. If you would like to provide a new path, update the <code>logo</code> and <code>author.image</code> config values accordingly.</p>
<h2 id=step-5-check-content class="relative group">Step 5: Check content <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=#step-5-check-content aria-label=Anchor>#</a></span></h2>
<p>The behavior of the <code>figure</code> shortcode is different in version 2. If you are using <code>figure</code> in your content and have advanced use cases, you may need to adjust the parameters you are providing.</p>
<p>Consult the <a href=https://jpanther.github.io/congo/docs/shortcodes/#figure>shortcode docs</a> to learn more about supported parameters.</p>
<h2 id=step-6-rebuild class="relative group">Step 6: Rebuild <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=#step-6-rebuild aria-label=Anchor>#</a></span></h2>
<p>Now that all the configuration changes are complete, it&rsquo;s time to rebuild the site. Run <code>hugo</code>, or your build command, and check that everything works as expected.</p>
<p>If you come across any errors, check the configuration is correct and refer to the <a href=https://jpanther.github.io/congo/docs/>full documentation</a> for further guidance. Remember, the example config files bundled with the theme contain all the default parameters and are a great starting point.</p>
<p>🙋‍♀️ If you still need help, feel free to ask your question on <a href=https://github.com/jpanther/congo/discussions>GitHub Discussions</a>.</p>
</div>
</section>
<footer class="pt-8 max-w-prose">
</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>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 28 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

View File

@ -1,16 +1,16 @@
<!doctype html><html lang=en-au><head>
<!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 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>Congo</title>
<meta name=title content="Congo">
<meta name=description content="This is a demo of the Congo theme for Hugo.">
<meta name=description content="A powerful, lightweight theme for Hugo built with Tailwind CSS.">
<link rel=canonical href=https://jpanther.github.io/congo/>
<link rel=alternate type=application/rss+xml href=/congo/index.xml title=Congo>
<link type=text/css rel=stylesheet href=/congo/css/schemes/congo.min.b48d6ba061dc77186a2524fb8aac5ac3823b2679a9299ca60325abbccc9c1764c884715f0ba24b4e2776cb3814df4af1f4c854b87207cd5d4c7a254da9b55751.css integrity="sha512-tI1roGHcdxhqJST7iqxaw4I7JnmpKZymAyWrvMycF2TIhHFfC6JLTid2yzgU30rx9MhUuHIHzV1MeiVNqbVXUQ==">
<link type=text/css rel=stylesheet href=/congo/css/compiled/main.min.51037225bb3c65887773b052da1e38f105db8f3d9aa6a34ba3c5c40c88fb309724f8cc5ed2871adc7e55dacab9b36c60ce7aa7a61dff2cc638f8b435c898d5a8.css integrity="sha512-UQNyJbs8ZYh3c7BS2h448QXbjz2apqNLo8XEDIj7MJck+Mxe0oca3H5V2sq5s2xgznqnph3/LMY4+LQ1yJjVqA==">
<script>function loadPreferredAppearance(){localStorage.preferredAppearance==="dark"||!("preferredAppearance"in localStorage)&&window.matchMedia("(prefers-color-scheme: dark)").matches?document.documentElement.classList.add("dark"):document.documentElement.classList.remove("dark")}function setPreferredAppearance(a){a=="default"?localStorage.removeItem("preferredAppearance"):localStorage.preferredAppearance=a,loadPreferredAppearance()}loadPreferredAppearance(),window.matchMedia("(prefers-color-scheme: dark)").addListener(loadPreferredAppearance)</script>
<link rel=alternate type=application/json href=/congo/index.json title=Congo>
<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>
@ -18,129 +18,168 @@
<meta property="og:title" content="Welcome to Congo! :tada:">
<meta property="og:description" content="This is a demo of the Congo theme for Hugo.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://jpanther.github.io/congo/">
<meta property="og:url" content="https://jpanther.github.io/congo/"><meta property="og:site_name" content="Congo">
<meta name=twitter:card content="summary">
<meta name=twitter:title content="Welcome to Congo! :tada:">
<meta name=twitter:description content="This is a demo of the Congo theme for Hugo.">
<script type=application/ld+json>{"@context":"https://schema.org","@type":"WebSite","name":"Congo","url":"https:\/\/jpanther.github.io\/congo\/","description":""}</script>
<meta name=generator content="Hugo 0.92.0">
<script type=application/ld+json>{"@context":"https://schema.org","@type":"WebSite","@id":"https:\/\/jpanther.github.io\/congo\/","name":"Congo","description":"A powerful, lightweight theme for Hugo built with Tailwind CSS.","inLanguage":"en-au","url":"https:\/\/jpanther.github.io\/congo\/","publisher":{"@type":"Person","name":"Congo"}}</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"><header class="flex justify-between py-6 font-semibold sm:items-center sm:py-10 text-neutral-900 dark:text-neutral">
<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:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" rel=me href=/congo/>Congo</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=/congo/docs/ title=Documentation>Docs</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=/congo/samples/ title="Content Samples">Samples</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=/congo/users/ title=Users>Users</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=https://github.com/jpanther/congo title>GitHub</a>
<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 class=flex-grow>
<main id=main-content class=relative>
<div id=page>
<article class="max-w-full prose dark:prose-light">
<article class="max-w-full prose dark:prose-invert">
<header>
<h1>Welcome to Congo! 🎉</h1>
</header>
<section><div class="!mb-9 text-xl text-neutral-500 dark:text-neutral-400">
A simple, lightweight theme for Hugo built with Tailwind CSS.
<section><div class="!mb-9 text-xl lead">
A powerful, lightweight theme for Hugo built with Tailwind CSS.
</div>
<p>This is a demo site built entirely using Congo. It also contains a complete set of <a href=https://jpanther.github.io/congo/docs/>theme documentation</a>. Congo is flexible and is great for both static page-based content (like this demo) or a traditional blog with a feed of recent posts.</p>
<div class="flex px-4 py-2 mb-8 text-base rounded-md bg-primary-100 dark:bg-primary-900">
<span class="flex items-center pr-3 text-primary-400">
<span class="flex items-center ltr:pr-3 rtl:pl-3 text-primary-400">
<span class="relative inline-block align-text-bottom icon"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="exclamation-triangle" class="svg-inline--fa fa-exclamation-triangle fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentcolor" d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937.0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154.0l239.94 416.028zM288 354c-25.405.0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346 7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373.0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884.0-12.356 5.78-11.981 12.654z"/></svg>
</span>
</span>
<span class="flex items-center justify-between flex-grow dark:text-neutral-300">
<span class="prose dark:text-neutral">This is a demo of the <code id=layout>page</code> layout.</span>
<button class="px-4 !text-neutral !no-underline rounded-md bg-primary-600 hover:!bg-primary-500 dark:bg-primary-800 dark:hover:!bg-primary-700" onclick=switchLayout()>
<span class="flex items-center justify-between grow dark:text-neutral-300">
<span class="prose dark:prose-invert">This is a demo of the <code id=layout>page</code> layout.</span>
<button id=switch-layout-button class="px-4 !text-neutral !no-underline rounded-md bg-primary-600 hover:!bg-primary-500 dark:bg-primary-800 dark:hover:!bg-primary-700">
Switch layout &orarr;
</button>
</span>
</div>
<p>This is a demo site built entirely using Congo. It also contains a complete set of <a href=https://jpanther.github.io/congo/docs/>theme documentation</a>. Congo is flexible and is great for both static page-based content (like this demo) or a traditional blog with a feed of recent posts.</p>
<p>Explore the <a href=https://jpanther.github.io/congo/samples/>sample pages</a> to get a feel for what Congo can do. If you like what you see, check out the project on <a href=https://github.com/jpanther/congo>Github</a> or read the <a href=https://jpanther.github.io/congo/docs/installation/>Installation guide</a> to get started.</p>
<figure><img src=/congo/mountains.jpg alt="Photo by Anna Scarfiello on Unsplash." width=1200 height=800><figcaption>
<p>Photo by <a href="https://unsplash.com/@little_anne?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Anna Scarfiello</a> on <a href="https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>.</p>
</figcaption>
<p>
<figure>
<img class="my-0 rounded-md" srcset="/congo/squid_hu51d752120af953339dca2ec6f3d47d3a_227177_330x0_resize_q75_box.jpg 330w,
/congo/squid_hu51d752120af953339dca2ec6f3d47d3a_227177_660x0_resize_q75_box.jpg 660w,
/congo/squid_hu51d752120af953339dca2ec6f3d47d3a_227177_1024x0_resize_q75_box.jpg 1024w,
/congo/squid_hu51d752120af953339dca2ec6f3d47d3a_227177_1320x0_resize_q75_box.jpg 2x" src=/congo/squid_hu51d752120af953339dca2ec6f3d47d3a_227177_660x0_resize_q75_box.jpg alt="A stylised photograph of a purple squid on a pink backdrop.">
<figcaption>Photo by <a href="https://unsplash.com/@jippe_joosten?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Jippe Joosten</a> on <a href="https://unsplash.com/s/photos/vibrant-purple?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>.</figcaption>
</figure>
</p>
</section>
</article>
<section>
<h2 class="mt-8 text-2xl font-extrabold">Recent</h2>
<article>
<h3 class="flex items-center mt-6 text-xl font-semibold">
<a class="hover:underline hover:underline-primary-500 hover:underline-offset-small text-neutral-800 dark:text-neutral" href=/congo/docs/installation/>Installation</a>
<a class="hover:underline hover:decoration-primary-500 hover:underline-offset-2 text-neutral-800 dark:text-neutral" href=/congo/samples/icons/>Icons</a>
</h3>
<div class="text-sm text-neutral-500 dark:text-neutral-400">
<div class="flex flex-row flex-wrap items-center">
<span title="Reading time">5 mins</span>
<time datetime="2020-08-14 00:00:00 +0000 UTC">14 August 2020</time><span class="px-2 text-primary-500">&#183;</span><span title="Reading time">1 min</span>
</div>
</div>
<div class="py-1 prose dark:prose-invert">
Congo has built-in support for a number of FontAwesome 5 icons.
</div>
</article>
<article>
<h3 class="flex items-center mt-6 text-xl font-semibold">
<a class="hover:underline hover:underline-primary-500 hover:underline-offset-small text-neutral-800 dark:text-neutral" href=/congo/docs/getting-started/>Getting Started</a>
<a class="hover:underline hover:decoration-primary-500 hover:underline-offset-2 text-neutral-800 dark:text-neutral" href=/congo/samples/markdown/>Markdown</a>
</h3>
<div class="text-sm text-neutral-500 dark:text-neutral-400">
<div class="flex flex-row flex-wrap items-center">
<span title="Reading time">3 mins</span>
<time datetime="2019-03-11 00:00:00 +0000 UTC">11 March 2019</time><span class="px-2 text-primary-500">&#183;</span><span title="Reading time">3 mins</span>
</div>
</div>
<div class="py-1 prose dark:prose-invert">
<p>This article offers a sample of basic Markdown formatting that can be used in Congo, also it shows how some basic HTML elements are decorated.</p>
</div>
</article>
<article>
<h3 class="flex items-center mt-6 text-xl font-semibold">
<a class="hover:underline hover:underline-primary-500 hover:underline-offset-small text-neutral-800 dark:text-neutral" href=/congo/docs/configuration/>Configuration</a>
<a class="hover:underline hover:decoration-primary-500 hover:underline-offset-2 text-neutral-800 dark:text-neutral" href=/congo/samples/rich-content/>Rich Content</a>
</h3>
<div class="text-sm text-neutral-500 dark:text-neutral-400">
<div class="flex flex-row flex-wrap items-center">
<span title="Reading time">7 mins</span>
<time datetime="2019-03-10 00:00:00 +0000 UTC">10 March 2019</time><span class="px-2 text-primary-500">&#183;</span><span title="Reading time">2 mins</span>
</div>
</div>
<div class="py-1 prose dark:prose-invert">
This is an <em>example</em> of a <strong>rich</strong> content summary.
</div>
</article>
<article>
<h3 class="flex items-center mt-6 text-xl font-semibold">
<a class="hover:underline hover:underline-primary-500 hover:underline-offset-small text-neutral-800 dark:text-neutral" href=/congo/docs/homepage-layout/>Homepage Layout</a>
<a class="hover:underline hover:decoration-primary-500 hover:underline-offset-2 text-neutral-800 dark:text-neutral" href=/congo/samples/placeholder-text/>Placeholder Text</a>
<div class="ltr:ml-2 rtl:mr-2">
<span class=flex>
<span class="ltr:ml-1 rtl:mr-1 px-1 py-[1px] text-xs font-normal border rounded-md text-primary-700 dark:text-primary-400 border-primary-400 dark:border-primary-600">
Draft
</span>
</span>
</div>
</h3>
<div class="text-sm text-neutral-500 dark:text-neutral-400">
<div class="flex flex-row flex-wrap items-center">
<span title="Reading time">3 mins</span>
<time datetime="2019-03-09 00:00:00 +0000 UTC">9 March 2019</time><span class="px-2 text-primary-500">&#183;</span><time datetime="2022-01-24 00:00:00 +0000 UTC">Updated: 24 January 2022</time><span class="px-2 text-primary-500">&#183;</span><span title="Reading time">2 mins</span>
</div>
</div>
<div class="py-1 prose dark:prose-invert">
<p>Lorem est tota propiore conpellat pectoribus de pectora summo.</p>
</div>
</article>
<article>
<h3 class="flex items-center mt-6 text-xl font-semibold">
<a class="hover:underline hover:underline-primary-500 hover:underline-offset-small text-neutral-800 dark:text-neutral" href=/congo/docs/front-matter/>Front Matter</a>
<a class="hover:underline hover:decoration-primary-500 hover:underline-offset-2 text-neutral-800 dark:text-neutral" href=/congo/samples/mathematical-notation/>Mathematical notation</a>
</h3>
<div class="text-sm text-neutral-500 dark:text-neutral-400">
<div class="flex flex-row flex-wrap items-center">
<span title="Reading time">3 mins</span>
<time datetime="2019-03-08 00:00:00 +0000 UTC">8 March 2019</time><span class="px-2 text-primary-500">&#183;</span><span title="Reading time">1 min</span>
</div>
</div>
<div class="py-1 prose dark:prose-invert">
<p>KaTeX can be used to render mathematical notation within articles.</p>
</div>
</article>
</section>
</div>
<div id=profile class="hidden h-full">
<article class="flex flex-col items-center justify-center text-center">
<header class="flex flex-col items-center mb-3">
<img class="mb-2 rounded-full w-36 h-36" alt=Author src=/congo/img/author.jpg>
<img class="mb-2 rounded-full w-36 h-36" width=144 height=144 alt=Author src=/congo/img/author_hu052d24d60828c1cca42a6aefe45b8b44_54195_288x288_fill_q75_box_smart1.jpg>
<h1 class="text-4xl font-extrabold">
Congo
</h1>
<h2 class="text-xl text-neutral-500 dark:text-neutral-400">
Not your ordinary theme!
</h2>
<div class="mt-1 text-2xl">
<div class="flex flex-wrap text-neutral-400 dark:text-neutral-500">
<a class="px-1 hover:text-primary-700 dark:hover:text-primary-400" href=https://twitter.com/ target=_blank aria-label=Twitter rel="me noopener noreferrer">
@ -162,96 +201,155 @@ Congo
</div>
</div>
</header>
<section class="prose dark:prose-light"><div class="!mb-9 text-xl text-neutral-500 dark:text-neutral-400">
A simple, lightweight theme for Hugo built with Tailwind CSS.
<section class="prose dark:prose-invert"><div class="!mb-9 text-xl lead">
A powerful, lightweight theme for Hugo built with Tailwind CSS.
</div>
<p>This is a demo site built entirely using Congo. It also contains a complete set of <a href=https://jpanther.github.io/congo/docs/>theme documentation</a>. Congo is flexible and is great for both static page-based content (like this demo) or a traditional blog with a feed of recent posts.</p>
<div class="flex px-4 py-2 mb-8 text-base rounded-md bg-primary-100 dark:bg-primary-900">
<span class="flex items-center pr-3 text-primary-400">
<span class="flex items-center ltr:pr-3 rtl:pl-3 text-primary-400">
<span class="relative inline-block align-text-bottom icon"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="exclamation-triangle" class="svg-inline--fa fa-exclamation-triangle fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentcolor" d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937.0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154.0l239.94 416.028zM288 354c-25.405.0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346 7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373.0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884.0-12.356 5.78-11.981 12.654z"/></svg>
</span>
</span>
<span class="flex items-center justify-between flex-grow dark:text-neutral-300">
<span class="prose dark:text-neutral">This is a demo of the <code id=layout>page</code> layout.</span>
<button class="px-4 !text-neutral !no-underline rounded-md bg-primary-600 hover:!bg-primary-500 dark:bg-primary-800 dark:hover:!bg-primary-700" onclick=switchLayout()>
<span class="flex items-center justify-between grow dark:text-neutral-300">
<span class="prose dark:prose-invert">This is a demo of the <code id=layout>page</code> layout.</span>
<button id=switch-layout-button class="px-4 !text-neutral !no-underline rounded-md bg-primary-600 hover:!bg-primary-500 dark:bg-primary-800 dark:hover:!bg-primary-700">
Switch layout &orarr;
</button>
</span>
</div>
<p>This is a demo site built entirely using Congo. It also contains a complete set of <a href=https://jpanther.github.io/congo/docs/>theme documentation</a>. Congo is flexible and is great for both static page-based content (like this demo) or a traditional blog with a feed of recent posts.</p>
<p>Explore the <a href=https://jpanther.github.io/congo/samples/>sample pages</a> to get a feel for what Congo can do. If you like what you see, check out the project on <a href=https://github.com/jpanther/congo>Github</a> or read the <a href=https://jpanther.github.io/congo/docs/installation/>Installation guide</a> to get started.</p>
<figure><img src=/congo/mountains.jpg alt="Photo by Anna Scarfiello on Unsplash." width=1200 height=800><figcaption>
<p>Photo by <a href="https://unsplash.com/@little_anne?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Anna Scarfiello</a> on <a href="https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>.</p>
</figcaption>
<p>
<figure>
<img class="my-0 rounded-md" srcset="/congo/squid_hu51d752120af953339dca2ec6f3d47d3a_227177_330x0_resize_q75_box.jpg 330w,
/congo/squid_hu51d752120af953339dca2ec6f3d47d3a_227177_660x0_resize_q75_box.jpg 660w,
/congo/squid_hu51d752120af953339dca2ec6f3d47d3a_227177_1024x0_resize_q75_box.jpg 1024w,
/congo/squid_hu51d752120af953339dca2ec6f3d47d3a_227177_1320x0_resize_q75_box.jpg 2x" src=/congo/squid_hu51d752120af953339dca2ec6f3d47d3a_227177_660x0_resize_q75_box.jpg alt="A stylised photograph of a purple squid on a pink backdrop.">
<figcaption>Photo by <a href="https://unsplash.com/@jippe_joosten?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Jippe Joosten</a> on <a href="https://unsplash.com/s/photos/vibrant-purple?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>.</figcaption>
</figure>
</p>
</section>
</article>
<section>
<h2 class="mt-8 text-2xl font-extrabold">Recent</h2>
<article>
<h3 class="flex items-center mt-6 text-xl font-semibold">
<a class="hover:underline hover:underline-primary-500 hover:underline-offset-small text-neutral-800 dark:text-neutral" href=/congo/docs/installation/>Installation</a>
<a class="hover:underline hover:decoration-primary-500 hover:underline-offset-2 text-neutral-800 dark:text-neutral" href=/congo/samples/icons/>Icons</a>
</h3>
<div class="text-sm text-neutral-500 dark:text-neutral-400">
<div class="flex flex-row flex-wrap items-center">
<span title="Reading time">5 mins</span>
<time datetime="2020-08-14 00:00:00 +0000 UTC">14 August 2020</time><span class="px-2 text-primary-500">&#183;</span><span title="Reading time">1 min</span>
</div>
</div>
<div class="py-1 prose dark:prose-invert">
Congo has built-in support for a number of FontAwesome 5 icons.
</div>
</article>
<article>
<h3 class="flex items-center mt-6 text-xl font-semibold">
<a class="hover:underline hover:underline-primary-500 hover:underline-offset-small text-neutral-800 dark:text-neutral" href=/congo/docs/getting-started/>Getting Started</a>
<a class="hover:underline hover:decoration-primary-500 hover:underline-offset-2 text-neutral-800 dark:text-neutral" href=/congo/samples/markdown/>Markdown</a>
</h3>
<div class="text-sm text-neutral-500 dark:text-neutral-400">
<div class="flex flex-row flex-wrap items-center">
<span title="Reading time">3 mins</span>
<time datetime="2019-03-11 00:00:00 +0000 UTC">11 March 2019</time><span class="px-2 text-primary-500">&#183;</span><span title="Reading time">3 mins</span>
</div>
</div>
<div class="py-1 prose dark:prose-invert">
<p>This article offers a sample of basic Markdown formatting that can be used in Congo, also it shows how some basic HTML elements are decorated.</p>
</div>
</article>
<article>
<h3 class="flex items-center mt-6 text-xl font-semibold">
<a class="hover:underline hover:underline-primary-500 hover:underline-offset-small text-neutral-800 dark:text-neutral" href=/congo/docs/configuration/>Configuration</a>
<a class="hover:underline hover:decoration-primary-500 hover:underline-offset-2 text-neutral-800 dark:text-neutral" href=/congo/samples/rich-content/>Rich Content</a>
</h3>
<div class="text-sm text-neutral-500 dark:text-neutral-400">
<div class="flex flex-row flex-wrap items-center">
<span title="Reading time">7 mins</span>
<time datetime="2019-03-10 00:00:00 +0000 UTC">10 March 2019</time><span class="px-2 text-primary-500">&#183;</span><span title="Reading time">2 mins</span>
</div>
</div>
<div class="py-1 prose dark:prose-invert">
This is an <em>example</em> of a <strong>rich</strong> content summary.
</div>
</article>
<article>
<h3 class="flex items-center mt-6 text-xl font-semibold">
<a class="hover:underline hover:underline-primary-500 hover:underline-offset-small text-neutral-800 dark:text-neutral" href=/congo/docs/homepage-layout/>Homepage Layout</a>
<a class="hover:underline hover:decoration-primary-500 hover:underline-offset-2 text-neutral-800 dark:text-neutral" href=/congo/samples/placeholder-text/>Placeholder Text</a>
<div class="ltr:ml-2 rtl:mr-2">
<span class=flex>
<span class="ltr:ml-1 rtl:mr-1 px-1 py-[1px] text-xs font-normal border rounded-md text-primary-700 dark:text-primary-400 border-primary-400 dark:border-primary-600">
Draft
</span>
</span>
</div>
</h3>
<div class="text-sm text-neutral-500 dark:text-neutral-400">
<div class="flex flex-row flex-wrap items-center">
<span title="Reading time">3 mins</span>
<time datetime="2019-03-09 00:00:00 +0000 UTC">9 March 2019</time><span class="px-2 text-primary-500">&#183;</span><time datetime="2022-01-24 00:00:00 +0000 UTC">Updated: 24 January 2022</time><span class="px-2 text-primary-500">&#183;</span><span title="Reading time">2 mins</span>
</div>
</div>
<div class="py-1 prose dark:prose-invert">
<p>Lorem est tota propiore conpellat pectoribus de pectora summo.</p>
</div>
</article>
<article>
<h3 class="flex items-center mt-6 text-xl font-semibold">
<a class="hover:underline hover:underline-primary-500 hover:underline-offset-small text-neutral-800 dark:text-neutral" href=/congo/docs/front-matter/>Front Matter</a>
<a class="hover:underline hover:decoration-primary-500 hover:underline-offset-2 text-neutral-800 dark:text-neutral" href=/congo/samples/mathematical-notation/>Mathematical notation</a>
</h3>
<div class="text-sm text-neutral-500 dark:text-neutral-400">
<div class="flex flex-row flex-wrap items-center">
<span title="Reading time">3 mins</span>
<time datetime="2019-03-08 00:00:00 +0000 UTC">8 March 2019</time><span class="px-2 text-primary-500">&#183;</span><span title="Reading time">1 min</span>
</div>
</div>
<div class="py-1 prose dark:prose-invert">
<p>KaTeX can be used to render mathematical notation within articles.</p>
</div>
</article>
</section>
</div>
<script type=text/javascript>function switchLayout(){const a=document.getElementById("page"),b=document.getElementById("profile"),c=document.querySelectorAll("code[id=layout]");a.style.display==="none"?(a.style.display="block",b.style.display="none",c.forEach(function(a){a.innerText="page"})):(a.style.display="none",b.style.display="block",c.forEach(function(a){a.innerText="profile"}))}</script>
</main><footer class=py-10>
<script defer type=text/javascript src=/congo/js/home.min.ac105aff6e1bdf7b0901aadcdc5318f3ab0aeef1189ea0d02ec66d5079a49d3e37c46037293a41379dc52de296e62ccb8ed113c3789acee0856dfdc2d279d94b.js integrity="sha512-rBBa/24b33sJAarc3FMY86sK7vEYnqDQLsZtUHmknT43xGA3KTpBN53FLeKW5izLjtETw3iazuCFbf3C0nnZSw=="></script>
</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">
&copy;
2022
Congo
© 2022 Congo contributors
</p>
<p class="text-xs text-neutral-400 dark:text-neutral-600">
Powered by <a class="hover:underline hover:underline-primary-400 hover:text-primary-500" href=https://gohugo.io/ target=_blank rel="noopener noreferrer">Hugo</a> & <a class="hover:underline hover:underline-primary-400 hover:text-primary-500" href=https://git.io/hugo-congo target=_blank rel="noopener noreferrer">Congo</a>
<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>

1
index.json 100644

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1 @@
function switchHomeLayout(){const a=document.getElementById("page"),b=document.getElementById("profile"),c=document.querySelectorAll("code[id=layout]");a.style.display==="none"?(a.style.display="block",b.style.display="none",c.forEach(function(a){a.innerText="page"})):(a.style.display="none",b.style.display="block",c.forEach(function(a){a.innerText="profile"}))}window.addEventListener("DOMContentLoaded",a=>{document.querySelectorAll("#switch-layout-button").forEach(a=>a.addEventListener("click",function(a){a.preventDefault(),switchHomeLayout()}))})

Binary file not shown.

Before

Width:  |  Height:  |  Size: 106 KiB

3
robots.txt 100644
View File

@ -0,0 +1,3 @@
User-agent: *
Allow: /
Sitemap: https://jpanther.github.io/congo/sitemap.xml

View File

@ -1,15 +1,14 @@
<!doctype html><html lang=en-au><head>
<!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 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>Charts &#183; Congo</title>
<meta name=title content="Charts &#183; Congo">
<meta name=description content="Guide to Chart.js usage in Congo">
<meta name=description content="A powerful, lightweight theme for Hugo built with Tailwind CSS.">
<link rel=canonical href=https://jpanther.github.io/congo/samples/charts/>
<link type=text/css rel=stylesheet href=/congo/css/schemes/congo.min.b48d6ba061dc77186a2524fb8aac5ac3823b2679a9299ca60325abbccc9c1764c884715f0ba24b4e2776cb3814df4af1f4c854b87207cd5d4c7a254da9b55751.css integrity="sha512-tI1roGHcdxhqJST7iqxaw4I7JnmpKZymAyWrvMycF2TIhHFfC6JLTid2yzgU30rx9MhUuHIHzV1MeiVNqbVXUQ==">
<link type=text/css rel=stylesheet href=/congo/css/compiled/main.min.51037225bb3c65887773b052da1e38f105db8f3d9aa6a34ba3c5c40c88fb309724f8cc5ed2871adc7e55dacab9b36c60ce7aa7a61dff2cc638f8b435c898d5a8.css integrity="sha512-UQNyJbs8ZYh3c7BS2h448QXbjz2apqNLo8XEDIj7MJck+Mxe0oca3H5V2sq5s2xgznqnph3/LMY4+LQ1yJjVqA==">
<script>function loadPreferredAppearance(){localStorage.preferredAppearance==="dark"||!("preferredAppearance"in localStorage)&&window.matchMedia("(prefers-color-scheme: dark)").matches?document.documentElement.classList.add("dark"):document.documentElement.classList.remove("dark")}function setPreferredAppearance(a){a=="default"?localStorage.removeItem("preferredAppearance"):localStorage.preferredAppearance=a,loadPreferredAppearance()}loadPreferredAppearance(),window.matchMedia("(prefers-color-scheme: dark)").addListener(loadPreferredAppearance)</script>
<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>
@ -19,53 +18,61 @@
<meta property="og:type" content="article">
<meta property="og:url" content="https://jpanther.github.io/congo/samples/charts/"><meta property="article:section" content="samples">
<meta property="article:published_time" content="2019-03-06T00:00:00+00:00">
<meta property="article:modified_time" content="2019-03-06T00:00:00+00:00">
<meta property="article:modified_time" content="2019-03-06T00:00:00+00:00"><meta property="og:site_name" content="Congo">
<meta name=twitter:card content="summary">
<meta name=twitter:title content="Charts">
<meta name=twitter:description content="Guide to Chart.js usage in Congo">
<script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","articleSection":"Content Samples","name":"Charts","headline":"Charts","description":"Guide to Chart.js usage in Congo","inLanguage":"en-AU","author":{"@type":"Person","name":"Congo"},"creator":{"@type":"Person","name":"Congo"},"copyrightHolder":"Congo","copyrightYear":"2019","dateCreated":"2019-03-06T00:00:00\u002b00:00","datePublished":"2019-03-06T00:00:00\u002b00:00","dateModified":"2019-03-06T00:00:00\u002b00:00","url":"https:\/\/jpanther.github.io\/congo\/samples\/charts\/","keywords":["chart","sample","graph","shortcodes"],"wordCount":"283"}</script>
<meta name=generator content="Hugo 0.92.0">
<script type=application/ld+json>[{"@context":"https://schema.org","@type":"Article","articleSection":"Content Samples","name":"Charts","headline":"Charts","description":"Guide to Chart.js usage in Congo","abstract":"Congo includes Chart.js for powerful charts and data visualisations.","inLanguage":"en-au","url":"https:\/\/jpanther.github.io\/congo\/samples\/charts\/","author":{"@type":"Person","name":"Congo"},"copyrightYear":"2019","dateCreated":"2019-03-06T00:00:00\u002b00:00","datePublished":"2019-03-06T00:00:00\u002b00:00","dateModified":"2019-03-06T00:00:00\u002b00:00","keywords":["chart","sample","graph","shortcodes"],"mainEntityOfPage":"true","wordCount":"283"}]</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>
<script defer src=/congo/lib/chart/chart.min.4d6e6cd084ff229a49b6eefa51bcacac11fd1f2ff95f8d4e4c06d0b9f7d9154ea5435add70b1f3a54e41cd5bebfd817292888c61955696bfcf5f598371f33d42.js integrity="sha512-TW5s0IT/IppJtu76UbysrBH9Hy/5X41OTAbQuffZFU6lQ1rdcLHzpU5BzVvr/YFykoiMYZVWlr/PX1mDcfM9Qg=="></script>
<script>document.addEventListener('DOMContentLoaded',b=>{function a(a){return getComputedStyle(document.documentElement).getPropertyValue(a)}Chart.defaults.font.size=14,Chart.defaults.backgroundColor=a("--color-primary-300"),Chart.defaults.elements.point.borderColor=a("--color-primary-400"),Chart.defaults.elements.bar.borderColor=a("--color-primary-500"),Chart.defaults.elements.bar.borderWidth=1,Chart.defaults.elements.line.borderColor=a("--color-primary-400"),Chart.defaults.elements.arc.backgroundColor=a("--color-primary-200"),Chart.defaults.elements.arc.borderColor=a("--color-primary-500"),Chart.defaults.elements.arc.borderWidth=1})</script>
<script defer type=text/javascript src=/congo/js/chart.bundle.45b978f0ad1efeb2ceb65d4bf5fb2601a039a5f623717d7f772dd6e1fa8e2f2075dc9c1a9a57616ddf337efdf734afb96d6c4ce45508707a8156202ae684e37d.js integrity="sha512-Rbl48K0e/rLOtl1L9fsmAaA5pfYjcX1/dy3W4fqOLyB13Jwamldhbd8zfv33NK+5bWxM5FUIcHqBViAq5oTjfQ=="></script>
</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"><header class="flex justify-between py-6 font-semibold sm:items-center sm:py-10 text-neutral-900 dark:text-neutral">
<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:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" rel=me href=/congo/>Congo</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=/congo/docs/ title=Documentation>Docs</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=/congo/samples/ title="Content Samples">Samples</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=/congo/users/ title=Users>Users</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=https://github.com/jpanther/congo title>GitHub</a>
<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 class=flex-grow>
<article class=max-w-prose>
<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:underline-neutral-300 dark:underline-neutral-600" href=/congo/>Welcome to Congo! :tada:</a><span class="px-1 text-primary-500">/</span>
<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:underline-neutral-300 dark:underline-neutral-600" href=/congo/samples/>Content Samples</a><span class="px-1 text-primary-500">/</span>
<a class="hover:underline hover:decoration-neutral-300 dark:underline-neutral-600" href=/congo/samples/>Content Samples</a><span class="px-1 text-primary-500">/</span>
</li>
<li class="inline hidden">
<a class="hover:underline hover:underline-neutral-300 dark:underline-neutral-600" href=/congo/samples/charts/>Charts</a><span class="px-1 text-primary-500">/</span>
<a class="hover:underline hover:decoration-neutral-300 dark:underline-neutral-600" href=/congo/samples/charts/>Charts</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">
@ -77,29 +84,49 @@ Charts
</div>
</div>
</header>
<section class="prose dark:prose-light">
<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=#bar-chart>Bar chart</a></li>
<li><a href=#line-chart>Line chart</a></li>
<li><a href=#doughnut-chart>Doughnut chart</a></li>
</ul>
</nav>
</div>
</details>
</div>
</div>
<div class="min-w-0 min-h-0 max-w-prose">
<p>Congo includes support for Chart.js using the <code>chart</code> shortcode. Simply wrap the chart markup within the shortcode. Congo automatically themes charts to match the configured <code>colorScheme</code> parameter, however the colours can be customised using normal Chart.js syntax.</p>
<p>Refer to the <a href=https://jpanther.github.io/congo/docs/shortcodes/#chart>chart shortcode</a> docs for more details.</p>
<p>The examples below are a small selection taken from the <a href=https://www.chartjs.org/docs/latest/samples>official Chart.js docs</a>. You can also <a href=https://raw.githubusercontent.com/jpanther/congo/dev/exampleSite/content/samples/charts.md>view the page source</a> on GitHub to see the markup.</p>
<h2 id=bar-chart>Bar chart <a class=heading-anchor href=#bar-chart aria-label=Anchor>#</a></h2>
<h2 id=bar-chart class="relative group">Bar chart <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=#bar-chart aria-label=Anchor>#</a></span></h2>
<div class=chart>
<canvas id=384126795></canvas>
<script>document.addEventListener("DOMContentLoaded",b=>{const a=document.getElementById("384126795"),c=new Chart(a,{type:'bar',data:{labels:['January','February','March','April','May','June','July'],datasets:[{label:'My First Dataset',data:[65,59,80,81,56,55,40],backgroundColor:['rgba(255, 99, 132, 0.2)','rgba(255, 159, 64, 0.2)','rgba(255, 205, 86, 0.2)','rgba(75, 192, 192, 0.2)','rgba(54, 162, 235, 0.2)','rgba(153, 102, 255, 0.2)','rgba(201, 203, 207, 0.2)'],borderColor:['rgb(255, 99, 132)','rgb(255, 159, 64)','rgb(255, 205, 86)','rgb(75, 192, 192)','rgb(54, 162, 235)','rgb(153, 102, 255)','rgb(201, 203, 207)'],borderWidth:1}]}})})</script>
<canvas id=847269315></canvas>
<script type=text/javascript>window.addEventListener("DOMContentLoaded",b=>{const a=document.getElementById("847269315"),c=new Chart(a,{type:'bar',data:{labels:['January','February','March','April','May','June','July'],datasets:[{label:'My First Dataset',data:[65,59,80,81,56,55,40],backgroundColor:['rgba(255, 99, 132, 0.2)','rgba(255, 159, 64, 0.2)','rgba(255, 205, 86, 0.2)','rgba(75, 192, 192, 0.2)','rgba(54, 162, 235, 0.2)','rgba(153, 102, 255, 0.2)','rgba(201, 203, 207, 0.2)'],borderColor:['rgb(255, 99, 132)','rgb(255, 159, 64)','rgb(255, 205, 86)','rgb(75, 192, 192)','rgb(54, 162, 235)','rgb(153, 102, 255)','rgb(201, 203, 207)'],borderWidth:1}]}})})</script>
</div>
<h2 id=line-chart>Line chart <a class=heading-anchor href=#line-chart aria-label=Anchor>#</a></h2>
<h2 id=line-chart class="relative group">Line chart <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=#line-chart aria-label=Anchor>#</a></span></h2>
<div class=chart>
<canvas id=937625184></canvas>
<script>document.addEventListener("DOMContentLoaded",b=>{const a=document.getElementById("937625184"),c=new Chart(a,{type:'line',data:{labels:['January','February','March','April','May','June','July'],datasets:[{label:'My First Dataset',data:[65,59,80,81,56,55,40],tension:.2}]}})})</script>
<canvas id=196248753></canvas>
<script type=text/javascript>window.addEventListener("DOMContentLoaded",b=>{const a=document.getElementById("196248753"),c=new Chart(a,{type:'line',data:{labels:['January','February','March','April','May','June','July'],datasets:[{label:'My First Dataset',data:[65,59,80,81,56,55,40],tension:.2}]}})})</script>
</div>
<h2 id=doughnut-chart>Doughnut chart <a class=heading-anchor href=#doughnut-chart aria-label=Anchor>#</a></h2>
<h2 id=doughnut-chart class="relative group">Doughnut chart <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=#doughnut-chart aria-label=Anchor>#</a></span></h2>
<div class=chart>
<canvas id=573862914></canvas>
<script>document.addEventListener("DOMContentLoaded",b=>{const a=document.getElementById("573862914"),c=new Chart(a,{type:'doughnut',data:{labels:['Red','Blue','Yellow'],datasets:[{label:'My First Dataset',data:[300,50,100],backgroundColor:['rgba(255, 99, 132, 0.7)','rgba(54, 162, 235, 0.7)','rgba(255, 205, 86, 0.7)'],borderWidth:0,hoverOffset:4}]}})})</script>
<canvas id=582719463></canvas>
<script type=text/javascript>window.addEventListener("DOMContentLoaded",b=>{const a=document.getElementById("582719463"),c=new Chart(a,{type:'doughnut',data:{labels:['Red','Blue','Yellow'],datasets:[{label:'My First Dataset',data:[300,50,100],backgroundColor:['rgba(255, 99, 132, 0.7)','rgba(54, 162, 235, 0.7)','rgba(255, 205, 86, 0.7)'],borderWidth:0,hoverOffset:4}]}})})</script>
</div>
</div>
</section>
<footer class=pt-8>
<footer class="pt-8 max-w-prose">
<div class=flex>
<img class="w-24 h-24 !mt-0 !mb-0 mr-4 rounded-full" width=96 height=96 alt=Author src=/congo/img/author.jpg>
<img class="w-24 h-24 !mt-0 !mb-0 ltr:mr-4 rtl:ml-4 rounded-full" width=96 height=96 alt=Author src=/congo/img/author_hu052d24d60828c1cca42a6aefe45b8b44_54195_192x192_fill_q75_box_smart1.jpg>
<div class=place-self-center>
<div class="text-[0.6rem] leading-3 text-neutral-500 dark:text-neutral-400 uppercase">
Author
@ -130,47 +157,86 @@ Congo
</div>
</div>
</div>
<div class="pt-8 article-pagination">
<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 href=/congo/samples/mathematical-notation/>
<span class="mr-3 article-pagination-direction">&larr;</span>
<a class="flex group" href=/congo/samples/diagrams-flowcharts/>
<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="article-pagination-title mt-[0.1rem] leading-6">Mathematical notation</span>
<span class="mt-[0.1rem] leading-6 group-hover:underline group-hover:decoration-primary-500">Diagrams and Flowcharts</span>
<span class="mt-[0.1rem] text-xs text-neutral-500 dark:text-neutral-400">
<time datetime="2019-03-08 00:00:00 +0000 UTC">8 March 2019</time>
<time datetime="2019-03-06 00:00:00 +0000 UTC">6 March 2019</time>
</span>
</span>
</a>
</span>
<span>
<a class="flex text-right" href=/congo/samples/diagrams-flowcharts/>
<a class="flex text-right group" href=/congo/samples/mathematical-notation/>
<span class="flex flex-col">
<span class="article-pagination-title mt-[0.1rem] leading-6">Diagrams and Flowcharts</span>
<span class="mt-[0.1rem] leading-6 group-hover:underline group-hover:decoration-primary-500">Mathematical notation</span>
<span class="mt-[0.1rem] text-xs text-neutral-500 dark:text-neutral-400">
<time datetime="2019-03-06 00:00:00 +0000 UTC">6 March 2019</time>
<time datetime="2019-03-08 00:00:00 +0000 UTC">8 March 2019</time>
</span>
</span>
<span class="ml-3 article-pagination-direction">&rarr;</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>
</main><footer class=py-10>
<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">
&copy;
2022
Congo
© 2022 Congo contributors
</p>
<p class="text-xs text-neutral-400 dark:text-neutral-600">
Powered by <a class="hover:underline hover:underline-primary-400 hover:text-primary-500" href=https://gohugo.io/ target=_blank rel="noopener noreferrer">Hugo</a> & <a class="hover:underline hover:underline-primary-400 hover:text-primary-500" href=https://git.io/hugo-congo target=_blank rel="noopener noreferrer">Congo</a>
<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>

View File

@ -1,15 +1,14 @@
<!doctype html><html lang=en-au><head>
<!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 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>Diagrams and Flowcharts &#183; Congo</title>
<meta name=title content="Diagrams and Flowcharts &#183; Congo">
<meta name=description content="Guide to Mermaid usage in Congo">
<meta name=description content="A powerful, lightweight theme for Hugo built with Tailwind CSS.">
<link rel=canonical href=https://jpanther.github.io/congo/samples/diagrams-flowcharts/>
<link type=text/css rel=stylesheet href=/congo/css/schemes/congo.min.b48d6ba061dc77186a2524fb8aac5ac3823b2679a9299ca60325abbccc9c1764c884715f0ba24b4e2776cb3814df4af1f4c854b87207cd5d4c7a254da9b55751.css integrity="sha512-tI1roGHcdxhqJST7iqxaw4I7JnmpKZymAyWrvMycF2TIhHFfC6JLTid2yzgU30rx9MhUuHIHzV1MeiVNqbVXUQ==">
<link type=text/css rel=stylesheet href=/congo/css/compiled/main.min.51037225bb3c65887773b052da1e38f105db8f3d9aa6a34ba3c5c40c88fb309724f8cc5ed2871adc7e55dacab9b36c60ce7aa7a61dff2cc638f8b435c898d5a8.css integrity="sha512-UQNyJbs8ZYh3c7BS2h448QXbjz2apqNLo8XEDIj7MJck+Mxe0oca3H5V2sq5s2xgznqnph3/LMY4+LQ1yJjVqA==">
<script>function loadPreferredAppearance(){localStorage.preferredAppearance==="dark"||!("preferredAppearance"in localStorage)&&window.matchMedia("(prefers-color-scheme: dark)").matches?document.documentElement.classList.add("dark"):document.documentElement.classList.remove("dark")}function setPreferredAppearance(a){a=="default"?localStorage.removeItem("preferredAppearance"):localStorage.preferredAppearance=a,loadPreferredAppearance()}loadPreferredAppearance(),window.matchMedia("(prefers-color-scheme: dark)").addListener(loadPreferredAppearance)</script>
<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>
@ -19,53 +18,61 @@
<meta property="og:type" content="article">
<meta property="og:url" content="https://jpanther.github.io/congo/samples/diagrams-flowcharts/"><meta property="article:section" content="samples">
<meta property="article:published_time" content="2019-03-06T00:00:00+00:00">
<meta property="article:modified_time" content="2019-03-06T00:00:00+00:00">
<meta property="article:modified_time" content="2019-03-06T00:00:00+00:00"><meta property="og:site_name" content="Congo">
<meta name=twitter:card content="summary">
<meta name=twitter:title content="Diagrams and Flowcharts">
<meta name=twitter:description content="Guide to Mermaid usage in Congo">
<script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","articleSection":"Content Samples","name":"Diagrams and Flowcharts","headline":"Diagrams and Flowcharts","description":"Guide to Mermaid usage in Congo","inLanguage":"en-AU","author":{"@type":"Person","name":"Congo"},"creator":{"@type":"Person","name":"Congo"},"copyrightHolder":"Congo","copyrightYear":"2019","dateCreated":"2019-03-06T00:00:00\u002b00:00","datePublished":"2019-03-06T00:00:00\u002b00:00","dateModified":"2019-03-06T00:00:00\u002b00:00","url":"https:\/\/jpanther.github.io\/congo\/samples\/diagrams-flowcharts\/","keywords":["mermaid","sample","diagram","shortcodes"],"wordCount":"211"}</script>
<meta name=generator content="Hugo 0.92.0">
<script type=application/ld+json>[{"@context":"https://schema.org","@type":"Article","articleSection":"Content Samples","name":"Diagrams and Flowcharts","headline":"Diagrams and Flowcharts","description":"Guide to Mermaid usage in Congo","abstract":"It\u0026rsquo;s easy to add diagrams and flowcharts to articles using Mermaid.","inLanguage":"en-au","url":"https:\/\/jpanther.github.io\/congo\/samples\/diagrams-flowcharts\/","author":{"@type":"Person","name":"Congo"},"copyrightYear":"2019","dateCreated":"2019-03-06T00:00:00\u002b00:00","datePublished":"2019-03-06T00:00:00\u002b00:00","dateModified":"2019-03-06T00:00:00\u002b00:00","keywords":["mermaid","sample","diagram","shortcodes"],"mainEntityOfPage":"true","wordCount":"211"}]</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>
<script defer src=/congo/lib/mermaid/mermaid.min.11d2ab28d89fc972ef77e55a5d8e4ff5036600fae9200d3347a43fda6b048ab5453cbe920c639e7a59da01ba0b4b74e3641b8611f9662385c547c860c67b9357.js integrity="sha512-EdKrKNifyXLvd+VaXY5P9QNmAPrpIA0zR6Q/2msEirVFPL6SDGOeelnaAboLS3TjZBuGEflmI4XFR8hgxnuTVw=="></script>
<script>document.addEventListener('DOMContentLoaded',b=>{function a(a){return getComputedStyle(document.documentElement).getPropertyValue(a)}mermaid.initialize({theme:"base",themeVariables:{background:a("--color-neutral"),primaryColor:a("--color-primary-200"),secondaryColor:a("--color-secondary-200"),tertiaryColor:a("--color-neutral-100"),primaryBorderColor:a("--color-primary-400"),secondaryBorderColor:a("--color-secondary-400"),tertiaryBorderColor:a("--color-neutral-400"),lineColor:a("--color-neutral-600"),fontFamily:"ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,segoe ui,Roboto,helvetica neue,Arial,noto sans,sans-serif",fontSize:"16px"}})})</script>
<script defer type=text/javascript src=/congo/js/mermaid.bundle.1f0d9d765e05c0c0c6a8e70c01da70923366d0c40b26a7c2b0b441bef5ff2b67cebf5a425edcec72e6b31e73538108bf2f1be3ce5d8a5f1e08ccdf84bd076b3b.js integrity="sha512-Hw2ddl4FwMDGqOcMAdpwkjNm0MQLJqfCsLRBvvX/K2fOv1pCXtzscuazHnNTgQi/Lxvjzl2KXx4IzN+EvQdrOw=="></script>
</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"><header class="flex justify-between py-6 font-semibold sm:items-center sm:py-10 text-neutral-900 dark:text-neutral">
<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:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" rel=me href=/congo/>Congo</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=/congo/docs/ title=Documentation>Docs</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=/congo/samples/ title="Content Samples">Samples</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=/congo/users/ title=Users>Users</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=https://github.com/jpanther/congo title>GitHub</a>
<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 class=flex-grow>
<article class=max-w-prose>
<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:underline-neutral-300 dark:underline-neutral-600" href=/congo/>Welcome to Congo! :tada:</a><span class="px-1 text-primary-500">/</span>
<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:underline-neutral-300 dark:underline-neutral-600" href=/congo/samples/>Content Samples</a><span class="px-1 text-primary-500">/</span>
<a class="hover:underline hover:decoration-neutral-300 dark:underline-neutral-600" href=/congo/samples/>Content Samples</a><span class="px-1 text-primary-500">/</span>
</li>
<li class="inline hidden">
<a class="hover:underline hover:underline-neutral-300 dark:underline-neutral-600" href=/congo/samples/diagrams-flowcharts/>Diagrams and Flowcharts</a><span class="px-1 text-primary-500">/</span>
<a class="hover:underline hover:decoration-neutral-300 dark:underline-neutral-600" href=/congo/samples/diagrams-flowcharts/>Diagrams and Flowcharts</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">
@ -77,11 +84,31 @@ Diagrams and Flowcharts
</div>
</div>
</header>
<section class="prose dark:prose-light">
<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=#flowchart>Flowchart</a></li>
<li><a href=#sequence-diagram>Sequence diagram</a></li>
<li><a href=#class-diagram>Class diagram</a></li>
<li><a href=#entity-relationship-diagram>Entity relationship diagram</a></li>
</ul>
</nav>
</div>
</details>
</div>
</div>
<div class="min-w-0 min-h-0 max-w-prose">
<p>Mermaid diagrams are supported in Congo using the <code>mermaid</code> shortcode. Simply wrap the diagram markup within the shortcode. Congo automatically themes Mermaid diagrams to match the configured <code>colorScheme</code> parameter.</p>
<p>Refer to the <a href=https://jpanther.github.io/congo/docs/shortcodes/#mermaid>mermaid shortcode</a> docs for more details.</p>
<p>The examples below are a small selection taken from the <a href=https://mermaid-js.github.io/mermaid/>official Mermaid docs</a>. You can also <a href=https://raw.githubusercontent.com/jpanther/congo/dev/exampleSite/content/samples/diagrams-flowcharts.md>view the page source</a> on GitHub to see the markup.</p>
<h2 id=flowchart>Flowchart <a class=heading-anchor href=#flowchart aria-label=Anchor>#</a></h2>
<h2 id=flowchart class="relative group">Flowchart <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=#flowchart aria-label=Anchor>#</a></span></h2>
<div class=mermaid align=center>
graph TD
A[Christmas] -->|Get money| B(Go shopping)
@ -98,7 +125,7 @@ F
G
end
</div>
<h2 id=sequence-diagram>Sequence diagram <a class=heading-anchor href=#sequence-diagram aria-label=Anchor>#</a></h2>
<h2 id=sequence-diagram class="relative group">Sequence diagram <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=#sequence-diagram aria-label=Anchor>#</a></span></h2>
<div class=mermaid align=center>
sequenceDiagram
autonumber
@ -116,7 +143,7 @@ loop Every minute
John-->Alice: Great!
end
</div>
<h2 id=class-diagram>Class diagram <a class=heading-anchor href=#class-diagram aria-label=Anchor>#</a></h2>
<h2 id=class-diagram class="relative group">Class diagram <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=#class-diagram aria-label=Anchor>#</a></span></h2>
<div class=mermaid align=center>
classDiagram
Animal "1" <|-- Duck
@ -140,7 +167,7 @@ class Zebra{
+run()
}
</div>
<h2 id=entity-relationship-diagram>Entity relationship diagram <a class=heading-anchor href=#entity-relationship-diagram aria-label=Anchor>#</a></h2>
<h2 id=entity-relationship-diagram class="relative group">Entity relationship diagram <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=#entity-relationship-diagram aria-label=Anchor>#</a></span></h2>
<div class=mermaid align=center>
erDiagram
CUSTOMER }|..|{ DELIVERY-ADDRESS : has
@ -152,10 +179,11 @@ ORDER ||--|{ ORDER-ITEM : includes
PRODUCT-CATEGORY ||--|{ PRODUCT : contains
PRODUCT ||--o{ ORDER-ITEM : "ordered in"
</div>
</div>
</section>
<footer class=pt-8>
<footer class="pt-8 max-w-prose">
<div class=flex>
<img class="w-24 h-24 !mt-0 !mb-0 mr-4 rounded-full" width=96 height=96 alt=Author src=/congo/img/author.jpg>
<img class="w-24 h-24 !mt-0 !mb-0 ltr:mr-4 rtl:ml-4 rounded-full" width=96 height=96 alt=Author src=/congo/img/author_hu052d24d60828c1cca42a6aefe45b8b44_54195_192x192_fill_q75_box_smart1.jpg>
<div class=place-self-center>
<div class="text-[0.6rem] leading-3 text-neutral-500 dark:text-neutral-400 uppercase">
Author
@ -186,47 +214,86 @@ Congo
</div>
</div>
</div>
<div class="pt-8 article-pagination">
<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 href=/congo/samples/charts/>
<span class="mr-3 article-pagination-direction">&larr;</span>
<a class="flex group" href=/congo/samples/emoji/>
<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="article-pagination-title mt-[0.1rem] leading-6">Charts</span>
<span class="mt-[0.1rem] leading-6 group-hover:underline group-hover:decoration-primary-500">Emoji 🪂</span>
<span class="mt-[0.1rem] text-xs text-neutral-500 dark:text-neutral-400">
<time datetime="2019-03-06 00:00:00 +0000 UTC">6 March 2019</time>
<time datetime="2019-03-05 00:00:00 +0000 UTC">5 March 2019</time>
</span>
</span>
</a>
</span>
<span>
<a class="flex text-right" href=/congo/samples/emoji/>
<a class="flex text-right group" href=/congo/samples/charts/>
<span class="flex flex-col">
<span class="article-pagination-title mt-[0.1rem] leading-6">Emoji 🪂</span>
<span class="mt-[0.1rem] leading-6 group-hover:underline group-hover:decoration-primary-500">Charts</span>
<span class="mt-[0.1rem] text-xs text-neutral-500 dark:text-neutral-400">
<time datetime="2019-03-05 00:00:00 +0000 UTC">5 March 2019</time>
<time datetime="2019-03-06 00:00:00 +0000 UTC">6 March 2019</time>
</span>
</span>
<span class="ml-3 article-pagination-direction">&rarr;</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>
</main><footer class=py-10>
<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">
&copy;
2022
Congo
© 2022 Congo contributors
</p>
<p class="text-xs text-neutral-400 dark:text-neutral-600">
Powered by <a class="hover:underline hover:underline-primary-400 hover:text-primary-500" href=https://gohugo.io/ target=_blank rel="noopener noreferrer">Hugo</a> & <a class="hover:underline hover:underline-primary-400 hover:text-primary-500" href=https://git.io/hugo-congo target=_blank rel="noopener noreferrer">Congo</a>
<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>

View File

@ -1,15 +1,14 @@
<!doctype html><html lang=en-au><head>
<!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 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>Emoji 🪂 &#183; Congo</title>
<meta name=title content="Emoji 🪂 &#183; Congo">
<meta name=description content="Guide to Emoji usage in Congo">
<meta name=description content="A powerful, lightweight theme for Hugo built with Tailwind CSS.">
<link rel=canonical href=https://jpanther.github.io/congo/samples/emoji/>
<link type=text/css rel=stylesheet href=/congo/css/schemes/congo.min.b48d6ba061dc77186a2524fb8aac5ac3823b2679a9299ca60325abbccc9c1764c884715f0ba24b4e2776cb3814df4af1f4c854b87207cd5d4c7a254da9b55751.css integrity="sha512-tI1roGHcdxhqJST7iqxaw4I7JnmpKZymAyWrvMycF2TIhHFfC6JLTid2yzgU30rx9MhUuHIHzV1MeiVNqbVXUQ==">
<link type=text/css rel=stylesheet href=/congo/css/compiled/main.min.51037225bb3c65887773b052da1e38f105db8f3d9aa6a34ba3c5c40c88fb309724f8cc5ed2871adc7e55dacab9b36c60ce7aa7a61dff2cc638f8b435c898d5a8.css integrity="sha512-UQNyJbs8ZYh3c7BS2h448QXbjz2apqNLo8XEDIj7MJck+Mxe0oca3H5V2sq5s2xgznqnph3/LMY4+LQ1yJjVqA==">
<script>function loadPreferredAppearance(){localStorage.preferredAppearance==="dark"||!("preferredAppearance"in localStorage)&&window.matchMedia("(prefers-color-scheme: dark)").matches?document.documentElement.classList.add("dark"):document.documentElement.classList.remove("dark")}function setPreferredAppearance(a){a=="default"?localStorage.removeItem("preferredAppearance"):localStorage.preferredAppearance=a,loadPreferredAppearance()}loadPreferredAppearance(),window.matchMedia("(prefers-color-scheme: dark)").addListener(loadPreferredAppearance)</script>
<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>
@ -19,51 +18,60 @@
<meta property="og:type" content="article">
<meta property="og:url" content="https://jpanther.github.io/congo/samples/emoji/"><meta property="article:section" content="samples">
<meta property="article:published_time" content="2019-03-05T00:00:00+00:00">
<meta property="article:modified_time" content="2019-03-05T00:00:00+00:00">
<meta property="article:modified_time" content="2019-03-05T00:00:00+00:00"><meta property="og:site_name" content="Congo">
<meta name=twitter:card content="summary">
<meta name=twitter:title content="Emoji :parachute:">
<meta name=twitter:description content="Guide to Emoji usage in Congo">
<script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","articleSection":"Content Samples","name":"Emoji :parachute:","headline":"Emoji :parachute:","description":"Guide to Emoji usage in Congo","inLanguage":"en-AU","author":{"@type":"Person","name":"Congo"},"creator":{"@type":"Person","name":"Congo"},"copyrightHolder":"Congo","copyrightYear":"2019","dateCreated":"2019-03-05T00:00:00\u002b00:00","datePublished":"2019-03-05T00:00:00\u002b00:00","dateModified":"2019-03-05T00:00:00\u002b00:00","url":"https:\/\/jpanther.github.io\/congo\/samples\/emoji\/","keywords":["emoji","sample"],"wordCount":"97"}</script>
<meta name=generator content="Hugo 0.92.0">
<script type=application/ld+json>[{"@context":"https://schema.org","@type":"Article","articleSection":"Content Samples","name":"Emoji :parachute:","headline":"Emoji :parachute:","description":"Guide to Emoji usage in Congo","abstract":"📖🏞️🧗🏽🐉🧙🏽‍♂️🧚🏽👸","inLanguage":"en-au","url":"https:\/\/jpanther.github.io\/congo\/samples\/emoji\/","author":{"@type":"Person","name":"Congo"},"copyrightYear":"2019","dateCreated":"2019-03-05T00:00:00\u002b00:00","datePublished":"2019-03-05T00:00:00\u002b00:00","dateModified":"2019-03-05T00:00:00\u002b00:00","keywords":["emoji","sample"],"mainEntityOfPage":"true","wordCount":"97"}]</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"><header class="flex justify-between py-6 font-semibold sm:items-center sm:py-10 text-neutral-900 dark:text-neutral">
<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:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" rel=me href=/congo/>Congo</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=/congo/docs/ title=Documentation>Docs</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=/congo/samples/ title="Content Samples">Samples</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=/congo/users/ title=Users>Users</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=https://github.com/jpanther/congo title>GitHub</a>
<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 class=flex-grow>
<article class=max-w-prose>
<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:underline-neutral-300 dark:underline-neutral-600" href=/congo/>Welcome to Congo! :tada:</a><span class="px-1 text-primary-500">/</span>
<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:underline-neutral-300 dark:underline-neutral-600" href=/congo/samples/>Content Samples</a><span class="px-1 text-primary-500">/</span>
<a class="hover:underline hover:decoration-neutral-300 dark:underline-neutral-600" href=/congo/samples/>Content Samples</a><span class="px-1 text-primary-500">/</span>
</li>
<li class="inline hidden">
<a class="hover:underline hover:underline-neutral-300 dark:underline-neutral-600" href=/congo/samples/emoji/>Emoji :parachute:</a><span class="px-1 text-primary-500">/</span>
<a class="hover:underline hover:decoration-neutral-300 dark:underline-neutral-600" href=/congo/samples/emoji/>Emoji :parachute:</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">
@ -75,22 +83,24 @@ Emoji 🪂
</div>
</div>
</header>
<section class="prose dark:prose-light">
<section class="flex flex-col max-w-full mt-0 prose lg:flex-row dark:prose-invert">
<div class="min-w-0 min-h-0 max-w-prose">
<p>Emoji is supported throughout Congo by default. Emoji can be used in titles, menu items and article content.</p>
<div class="flex px-4 py-3 rounded-md bg-primary-100 dark:bg-primary-900">
<span class="pr-3 text-primary-400">
<span class="ltr:pr-3 rtl:pl-3 text-primary-400">
<span class="relative inline-block align-text-bottom icon"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="exclamation-triangle" class="svg-inline--fa fa-exclamation-triangle fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentcolor" d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937.0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154.0l239.94 416.028zM288 354c-25.405.0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346 7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373.0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884.0-12.356 5.78-11.981 12.654z"/></svg>
</span>
</span>
<span class="no-prose dark:text-neutral-300"><strong>Note:</strong> The rendering of these glyphs depends on the browser and the platform. To style the emoji you can either use a third party emoji font or a font stack.</span>
<span class=dark:text-neutral-300><strong>Note:</strong> The rendering of these glyphs depends on the browser and the platform. To style the emoji you can either use a third party emoji font or a font stack.</span>
</div>
<p>Emoji replacements are automatic throughout Congo, so you can use shorthand codes in your content and front matter and they will be converted to their corresponding symbols at build time.</p>
<p><strong>Example:</strong> <code>see_no_evil</code> 🙈, <code>hear_no_evil</code> 🙉, <code>speak_no_evil</code> 🙊.</p>
<p>The <a href=http://www.emoji-cheat-sheet.com/>Emoji cheat sheet</a> is a useful reference for emoji shorthand codes.</p>
</div>
</section>
<footer class=pt-8>
<footer class="pt-8 max-w-prose">
<div class=flex>
<img class="w-24 h-24 !mt-0 !mb-0 mr-4 rounded-full" width=96 height=96 alt=Author src=/congo/img/author.jpg>
<img class="w-24 h-24 !mt-0 !mb-0 ltr:mr-4 rtl:ml-4 rounded-full" width=96 height=96 alt=Author src=/congo/img/author_hu052d24d60828c1cca42a6aefe45b8b44_54195_192x192_fill_q75_box_smart1.jpg>
<div class=place-self-center>
<div class="text-[0.6rem] leading-3 text-neutral-500 dark:text-neutral-400 uppercase">
Author
@ -121,38 +131,71 @@ Congo
</div>
</div>
</div>
<div class="pt-8 article-pagination">
<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 href=/congo/samples/diagrams-flowcharts/>
<span class="mr-3 article-pagination-direction">&larr;</span>
</span>
<span>
<a class="flex text-right group" href=/congo/samples/diagrams-flowcharts/>
<span class="flex flex-col">
<span class="article-pagination-title mt-[0.1rem] leading-6">Diagrams and Flowcharts</span>
<span class="mt-[0.1rem] leading-6 group-hover:underline group-hover:decoration-primary-500">Diagrams and Flowcharts</span>
<span class="mt-[0.1rem] text-xs text-neutral-500 dark:text-neutral-400">
<time datetime="2019-03-06 00:00:00 +0000 UTC">6 March 2019</time>
</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>
<span>
</span>
</div>
</div>
</footer>
</article>
</main><footer class=py-10>
</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">
&copy;
2022
Congo
© 2022 Congo contributors
</p>
<p class="text-xs text-neutral-400 dark:text-neutral-600">
Powered by <a class="hover:underline hover:underline-primary-400 hover:text-primary-500" href=https://gohugo.io/ target=_blank rel="noopener noreferrer">Hugo</a> & <a class="hover:underline hover:underline-primary-400 hover:text-primary-500" href=https://git.io/hugo-congo target=_blank rel="noopener noreferrer">Congo</a>
<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>

174
samples/external/index.html vendored 100644
View File

@ -0,0 +1,174 @@
<!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>An External Article &#183; Congo</title>
<meta name=title content="An External Article &#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/samples/external/>
<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="An External Article">
<meta property="og:description" content="The externalUrl front matter parameter can link to any URL.">
<meta property="og:type" content="article">
<meta property="og:url" content="https://jpanther.github.io/congo/samples/external/"><meta property="article:section" content="samples">
<meta property="article:published_time" content="2019-01-24T00:00:00+00:00">
<meta property="article:modified_time" content="2019-01-24T00:00:00+00:00"><meta property="og:site_name" content="Congo">
<meta name=twitter:card content="summary">
<meta name=twitter:title content="An External Article">
<meta name=twitter:description content="The externalUrl front matter parameter can link to any URL.">
<script type=application/ld+json>[{"@context":"https://schema.org","@type":"Article","articleSection":"Content Samples","name":"An External Article","headline":"An External Article","abstract":"The \u003ccode\u003eexternalUrl\u003c\/code\u003e front matter parameter can link to any URL.","inLanguage":"en-au","url":"https:\/\/jpanther.github.io\/congo\/samples\/external\/","author":{"@type":"Person","name":"Congo"},"copyrightYear":"2019","dateCreated":"2019-01-24T00:00:00\u002b00:00","datePublished":"2019-01-24T00:00:00\u002b00:00","dateModified":"2019-01-24T00:00:00\u002b00:00","mainEntityOfPage":"true","wordCount":"40"}]</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/samples/>Content Samples</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/samples/external/>An External Article</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">
An External Article
</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">
<time datetime="2019-01-24 00:00:00 +0000 UTC">24 January 2019</time>
</div>
</div>
</header>
<section class="flex flex-col max-w-full mt-0 prose lg:flex-row dark:prose-invert">
<div class="min-w-0 min-h-0 max-w-prose">
<p>This page uses the <code>externalUrl</code> front matter parameter to link to an article outside of this Hugo website.</p>
<p>It&rsquo;s great for things like linking to posts on Medium or to research papers you may have hosted on third party websites.</p>
</div>
</section>
<footer class="pt-8 max-w-prose">
<div class=flex>
<img class="w-24 h-24 !mt-0 !mb-0 ltr:mr-4 rtl:ml-4 rounded-full" width=96 height=96 alt=Author src=/congo/img/author_hu052d24d60828c1cca42a6aefe45b8b44_54195_192x192_fill_q75_box_smart1.jpg>
<div class=place-self-center>
<div class="text-[0.6rem] leading-3 text-neutral-500 dark:text-neutral-400 uppercase">
Author
</div>
<div class="font-semibold leading-6 text-neutral-800 dark:text-neutral-300">
Congo
</div>
<div class="text-sm text-neutral-700 dark:text-neutral-400">This is an example author bio, and although there&rsquo;s a stock photo of a dog here, this article was actually created by a human. 🐶</div>
<div class="text-2xl sm:text-lg">
<div class="flex flex-wrap text-neutral-400 dark:text-neutral-500">
<a class="px-1 hover:text-primary-700 dark:hover:text-primary-400" href=https://twitter.com/ target=_blank aria-label=Twitter rel="me noopener noreferrer">
<span class="relative inline-block align-text-bottom icon"><svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="twitter" class="svg-inline--fa fa-twitter fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentcolor" d="M459.37 151.716c.325 4.548.325 9.097.325 13.645.0 138.72-105.583 298.558-298.558 298.558-59.452.0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055.0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421.0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391.0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04.0-57.828 46.782-104.934 104.934-104.934 30.213.0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/></svg>
</span>
</a>
<a class="px-1 hover:text-primary-700 dark:hover:text-primary-400" href=https://facebook.com/ target=_blank aria-label=Facebook rel="me noopener noreferrer">
<span class="relative inline-block align-text-bottom icon"><svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="facebook" class="svg-inline--fa fa-facebook fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentcolor" d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14.0 55.52 4.84 55.52 4.84v61h-31.28c-30.8.0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"/></svg>
</span>
</a>
<a class="px-1 hover:text-primary-700 dark:hover:text-primary-400" href=https://linkedin.com/ target=_blank aria-label=Linkedin rel="me noopener noreferrer">
<span class="relative inline-block align-text-bottom icon"><svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="linkedin" class="svg-inline--fa fa-linkedin fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentcolor" d="M416 32H31.9C14.3 32 0 46.5.0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6.0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3.0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2.0 38.5 17.3 38.5 38.5.0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6.0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2.0 79.7 44.3 79.7 101.9V416z"/></svg>
</span>
</a>
<a class="px-1 hover:text-primary-700 dark:hover:text-primary-400" href=https://youtube.com/ target=_blank aria-label=Youtube rel="me noopener noreferrer">
<span class="relative inline-block align-text-bottom icon"><svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="youtube" class="svg-inline--fa fa-youtube fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentcolor" d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78.0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"/></svg>
</span>
</a>
</div>
</div>
</div>
</div>
</footer>
</article>
</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>

View File

@ -1,15 +1,14 @@
<!doctype html><html lang=en-au><head>
<!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 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>Icons &#183; Congo</title>
<meta name=title content="Icons &#183; Congo">
<meta name=description content="Icon support in Congo.">
<meta name=description content="A powerful, lightweight theme for Hugo built with Tailwind CSS.">
<link rel=canonical href=https://jpanther.github.io/congo/samples/icons/>
<link type=text/css rel=stylesheet href=/congo/css/schemes/congo.min.b48d6ba061dc77186a2524fb8aac5ac3823b2679a9299ca60325abbccc9c1764c884715f0ba24b4e2776cb3814df4af1f4c854b87207cd5d4c7a254da9b55751.css integrity="sha512-tI1roGHcdxhqJST7iqxaw4I7JnmpKZymAyWrvMycF2TIhHFfC6JLTid2yzgU30rx9MhUuHIHzV1MeiVNqbVXUQ==">
<link type=text/css rel=stylesheet href=/congo/css/compiled/main.min.51037225bb3c65887773b052da1e38f105db8f3d9aa6a34ba3c5c40c88fb309724f8cc5ed2871adc7e55dacab9b36c60ce7aa7a61dff2cc638f8b435c898d5a8.css integrity="sha512-UQNyJbs8ZYh3c7BS2h448QXbjz2apqNLo8XEDIj7MJck+Mxe0oca3H5V2sq5s2xgznqnph3/LMY4+LQ1yJjVqA==">
<script>function loadPreferredAppearance(){localStorage.preferredAppearance==="dark"||!("preferredAppearance"in localStorage)&&window.matchMedia("(prefers-color-scheme: dark)").matches?document.documentElement.classList.add("dark"):document.documentElement.classList.remove("dark")}function setPreferredAppearance(a){a=="default"?localStorage.removeItem("preferredAppearance"):localStorage.preferredAppearance=a,loadPreferredAppearance()}loadPreferredAppearance(),window.matchMedia("(prefers-color-scheme: dark)").addListener(loadPreferredAppearance)</script>
<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>
@ -19,51 +18,60 @@
<meta property="og:type" content="article">
<meta property="og:url" content="https://jpanther.github.io/congo/samples/icons/"><meta property="article:section" content="samples">
<meta property="article:published_time" content="2020-08-14T00:00:00+00:00">
<meta property="article:modified_time" content="2020-08-14T00:00:00+00:00">
<meta property="article:modified_time" content="2020-08-14T00:00:00+00:00"><meta property="og:site_name" content="Congo">
<meta name=twitter:card content="summary">
<meta name=twitter:title content="Icons">
<meta name=twitter:description content="Icon support in Congo.">
<script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","articleSection":"Content Samples","name":"Icons","headline":"Icons","description":"Icon support in Congo.","inLanguage":"en-AU","author":{"@type":"Person","name":"Congo"},"creator":{"@type":"Person","name":"Congo"},"copyrightHolder":"Congo","copyrightYear":"2020","dateCreated":"2020-08-14T00:00:00\u002b00:00","datePublished":"2020-08-14T00:00:00\u002b00:00","dateModified":"2020-08-14T00:00:00\u002b00:00","url":"https:\/\/jpanther.github.io\/congo\/samples\/icons\/","keywords":["icons","sample","shortcodes"],"wordCount":"127"}</script>
<meta name=generator content="Hugo 0.92.0">
<script type=application/ld+json>[{"@context":"https://schema.org","@type":"Article","articleSection":"Content Samples","name":"Icons","headline":"Icons","description":"Icon support in Congo.","abstract":"Congo has built-in support for a number of FontAwesome 5 icons.","inLanguage":"en-au","url":"https:\/\/jpanther.github.io\/congo\/samples\/icons\/","author":{"@type":"Person","name":"Congo"},"copyrightYear":"2020","dateCreated":"2020-08-14T00:00:00\u002b00:00","datePublished":"2020-08-14T00:00:00\u002b00:00","dateModified":"2020-08-14T00:00:00\u002b00:00","keywords":["icons","sample","shortcodes"],"mainEntityOfPage":"true","wordCount":"127"}]</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"><header class="flex justify-between py-6 font-semibold sm:items-center sm:py-10 text-neutral-900 dark:text-neutral">
<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:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" rel=me href=/congo/>Congo</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=/congo/docs/ title=Documentation>Docs</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=/congo/samples/ title="Content Samples">Samples</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=/congo/users/ title=Users>Users</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=https://github.com/jpanther/congo title>GitHub</a>
<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 class=flex-grow>
<article class=max-w-prose>
<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:underline-neutral-300 dark:underline-neutral-600" href=/congo/>Welcome to Congo! :tada:</a><span class="px-1 text-primary-500">/</span>
<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:underline-neutral-300 dark:underline-neutral-600" href=/congo/samples/>Content Samples</a><span class="px-1 text-primary-500">/</span>
<a class="hover:underline hover:decoration-neutral-300 dark:underline-neutral-600" href=/congo/samples/>Content Samples</a><span class="px-1 text-primary-500">/</span>
</li>
<li class="inline hidden">
<a class="hover:underline hover:underline-neutral-300 dark:underline-neutral-600" href=/congo/samples/icons/>Icons</a><span class="px-1 text-primary-500">/</span>
<a class="hover:underline hover:decoration-neutral-300 dark:underline-neutral-600" href=/congo/samples/icons/>Icons</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">
@ -75,7 +83,8 @@ Icons
</div>
</div>
</header>
<section class="prose dark:prose-light">
<section class="flex flex-col max-w-full mt-0 prose lg:flex-row dark:prose-invert">
<div class="min-w-0 min-h-0 max-w-prose">
<p>Congo has built-in support for a number of <a href=https://fontawesome.com/icons>FontAwesome 5</a> icons. These can be included in your website through either the <a href=https://jpanther.github.io/congo/docs/partials/#icon>icon partial</a> or <a href=https://jpanther.github.io/congo/docs/shortcodes/#icon>icon shortcode</a>.</p>
<p>Additionally, custom icons are also fully supported. Simply provide your own SVG icon assets by placing them in the <code>assets/icons/</code> directory in the root of your project. Any icons in the icons directory will then be available to use throughout the theme.</p>
<p>The full list of built-in icons and their corresponding names can referenced below.</p>
@ -390,10 +399,11 @@ Icons
</tr>
</tbody>
</table>
</div>
</section>
<footer class=pt-8>
<footer class="pt-8 max-w-prose">
<div class=flex>
<img class="w-24 h-24 !mt-0 !mb-0 mr-4 rounded-full" width=96 height=96 alt=Author src=/congo/img/author.jpg>
<img class="w-24 h-24 !mt-0 !mb-0 ltr:mr-4 rtl:ml-4 rounded-full" width=96 height=96 alt=Author src=/congo/img/author_hu052d24d60828c1cca42a6aefe45b8b44_54195_192x192_fill_q75_box_smart1.jpg>
<div class=place-self-center>
<div class="text-[0.6rem] leading-3 text-neutral-500 dark:text-neutral-400 uppercase">
Author
@ -424,38 +434,71 @@ Congo
</div>
</div>
</div>
<div class="pt-8 article-pagination">
<div class=pt-8>
<hr class="border-dotted border-neutral-300 dark:border-neutral-600">
<div class="flex justify-between pt-3">
<span>
</span>
<span>
<a class="flex text-right" href=/congo/samples/markdown/>
<a class="flex group" href=/congo/samples/markdown/>
<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="article-pagination-title mt-[0.1rem] leading-6">Markdown</span>
<span class="mt-[0.1rem] leading-6 group-hover:underline group-hover:decoration-primary-500">Markdown</span>
<span class="mt-[0.1rem] text-xs text-neutral-500 dark:text-neutral-400">
<time datetime="2019-03-11 00:00:00 +0000 UTC">11 March 2019</time>
</span>
</span>
<span class="ml-3 article-pagination-direction">&rarr;</span>
</a>
</span>
<span>
</span>
</div>
</div>
</footer>
</article>
</main><footer class=py-10>
</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">
&copy;
2022
Congo
© 2022 Congo contributors
</p>
<p class="text-xs text-neutral-400 dark:text-neutral-600">
Powered by <a class="hover:underline hover:underline-primary-400 hover:text-primary-500" href=https://gohugo.io/ target=_blank rel="noopener noreferrer">Hugo</a> & <a class="hover:underline hover:underline-primary-400 hover:text-primary-500" href=https://git.io/hugo-congo target=_blank rel="noopener noreferrer">Congo</a>
<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>

View File

@ -1,16 +1,15 @@
<!doctype html><html lang=en-au><head>
<!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 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>Content Samples &#183; Congo</title>
<meta name=title content="Content Samples &#183; Congo">
<meta name=description content="See what's possible with Congo.">
<meta name=description content="A powerful, lightweight theme for Hugo built with Tailwind CSS.">
<link rel=canonical href=https://jpanther.github.io/congo/samples/>
<link rel=alternate type=application/rss+xml href=/congo/samples/index.xml title=Congo>
<link type=text/css rel=stylesheet href=/congo/css/schemes/congo.min.b48d6ba061dc77186a2524fb8aac5ac3823b2679a9299ca60325abbccc9c1764c884715f0ba24b4e2776cb3814df4af1f4c854b87207cd5d4c7a254da9b55751.css integrity="sha512-tI1roGHcdxhqJST7iqxaw4I7JnmpKZymAyWrvMycF2TIhHFfC6JLTid2yzgU30rx9MhUuHIHzV1MeiVNqbVXUQ==">
<link type=text/css rel=stylesheet href=/congo/css/compiled/main.min.51037225bb3c65887773b052da1e38f105db8f3d9aa6a34ba3c5c40c88fb309724f8cc5ed2871adc7e55dacab9b36c60ce7aa7a61dff2cc638f8b435c898d5a8.css integrity="sha512-UQNyJbs8ZYh3c7BS2h448QXbjz2apqNLo8XEDIj7MJck+Mxe0oca3H5V2sq5s2xgznqnph3/LMY4+LQ1yJjVqA==">
<script>function loadPreferredAppearance(){localStorage.preferredAppearance==="dark"||!("preferredAppearance"in localStorage)&&window.matchMedia("(prefers-color-scheme: dark)").matches?document.documentElement.classList.add("dark"):document.documentElement.classList.remove("dark")}function setPreferredAppearance(a){a=="default"?localStorage.removeItem("preferredAppearance"):localStorage.preferredAppearance=a,loadPreferredAppearance()}loadPreferredAppearance(),window.matchMedia("(prefers-color-scheme: dark)").addListener(loadPreferredAppearance)</script>
<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>
@ -18,105 +17,115 @@
<meta property="og:title" content="Content Samples">
<meta property="og:description" content="See what's possible with Congo.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://jpanther.github.io/congo/samples/">
<meta property="og:url" content="https://jpanther.github.io/congo/samples/"><meta property="og:site_name" content="Congo">
<meta name=twitter:card content="summary">
<meta name=twitter:title content="Content Samples">
<meta name=twitter:description content="See what's possible with Congo.">
<meta name=generator content="Hugo 0.92.0">
<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"><header class="flex justify-between py-6 font-semibold sm:items-center sm:py-10 text-neutral-900 dark:text-neutral">
<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:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" rel=me href=/congo/>Congo</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=/congo/docs/ title=Documentation>Docs</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=/congo/samples/ title="Content Samples">Samples</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=/congo/users/ title=Users>Users</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=https://github.com/jpanther/congo title>GitHub</a>
<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 class=flex-grow>
<main id=main-content class=relative>
<header>
<ol class="text-sm text-neutral-500 dark:text-neutral-400">
<li class="inline hidden">
<a class="hover:underline hover:underline-neutral-300 dark:underline-neutral-600" href=/congo/>Welcome to Congo! :tada:</a><span class="px-1 text-primary-500">/</span>
<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 hidden">
<a class="hover:underline hover:underline-neutral-300 dark:underline-neutral-600" href=/congo/samples/>Content Samples</a><span class="px-1 text-primary-500">/</span>
<a class="hover:underline hover:decoration-neutral-300 dark:underline-neutral-600" href=/congo/samples/>Content Samples</a><span class="px-1 text-primary-500">/</span>
</li>
</ol>
<section class="prose dark:prose-light">
<h1 class="mb-3 text-4xl font-extrabold text-neutral-800">Content Samples</h1>
<section><div class="!mb-9 text-xl text-neutral-500 dark:text-neutral-400">
Congo brings your content to life. :heart_eyes:
<h1 class="mt-0 text-4xl font-extrabold text-neutral-900 dark:text-neutral">Content Samples</h1>
</header>
<section class="flex flex-col max-w-full prose lg:flex-row dark:prose-invert mt-0">
<div class="min-w-0 min-h-0 max-w-prose">
<div class="!mb-9 text-xl lead">
Congo brings your content to life. 😍
</div>
<p>This section contains some demo pages that show how Congo renders different types of content. You can also see an example <a href=https://jpanther.github.io/congo/tags/>taxonomy listing</a> page.</p>
<p><em><strong>Sidenote:</strong> This page is just a standard Congo article listing and Hugo has been configured to generate a <code>samples</code> content type and display article summaries.</em></p>
<hr>
</div>
</section>
</section>
</header>
<section>
<article>
<h3 class="flex items-center mt-6 text-xl font-semibold">
<a class="hover:underline hover:underline-primary-500 hover:underline-offset-small text-neutral-800 dark:text-neutral" href=/congo/samples/icons/>Icons</a>
<a class="hover:underline hover:decoration-primary-500 hover:underline-offset-2 text-neutral-800 dark:text-neutral" href=/congo/samples/icons/>Icons</a>
</h3>
<div class="text-sm text-neutral-500 dark:text-neutral-400">
<div class="flex flex-row flex-wrap items-center">
<time datetime="2020-08-14 00:00:00 +0000 UTC">14 August 2020</time><span class="px-2 text-primary-500">&#183;</span><span title="Reading time">1 min</span>
</div>
</div>
<div class="py-1 prose dark:prose-light">
<div class="py-1 prose dark:prose-invert">
Congo has built-in support for a number of FontAwesome 5 icons.
</div>
</article>
<article>
<h3 class="flex items-center mt-6 text-xl font-semibold">
<a class="hover:underline hover:underline-primary-500 hover:underline-offset-small text-neutral-800 dark:text-neutral" href=/congo/samples/markdown/>Markdown</a>
<a class="hover:underline hover:decoration-primary-500 hover:underline-offset-2 text-neutral-800 dark:text-neutral" href=/congo/samples/markdown/>Markdown</a>
</h3>
<div class="text-sm text-neutral-500 dark:text-neutral-400">
<div class="flex flex-row flex-wrap items-center">
<time datetime="2019-03-11 00:00:00 +0000 UTC">11 March 2019</time><span class="px-2 text-primary-500">&#183;</span><span title="Reading time">3 mins</span>
</div>
</div>
<div class="py-1 prose dark:prose-light">
<div class="py-1 prose dark:prose-invert">
<p>This article offers a sample of basic Markdown formatting that can be used in Congo, also it shows how some basic HTML elements are decorated.</p>
</div>
</article>
<article>
<h3 class="flex items-center mt-6 text-xl font-semibold">
<a class="hover:underline hover:underline-primary-500 hover:underline-offset-small text-neutral-800 dark:text-neutral" href=/congo/samples/rich-content/>Rich Content</a>
<a class="hover:underline hover:decoration-primary-500 hover:underline-offset-2 text-neutral-800 dark:text-neutral" href=/congo/samples/rich-content/>Rich Content</a>
</h3>
<div class="text-sm text-neutral-500 dark:text-neutral-400">
<div class="flex flex-row flex-wrap items-center">
<time datetime="2019-03-10 00:00:00 +0000 UTC">10 March 2019</time><span class="px-2 text-primary-500">&#183;</span><span title="Reading time">2 mins</span>
</div>
</div>
<div class="py-1 prose dark:prose-light">
<div class="py-1 prose dark:prose-invert">
This is an <em>example</em> of a <strong>rich</strong> content summary.
</div>
</article>
<article>
<h3 class="flex items-center mt-6 text-xl font-semibold">
<a class="hover:underline hover:underline-primary-500 hover:underline-offset-small text-neutral-800 dark:text-neutral" href=/congo/samples/placeholder-text/>Placeholder Text</a>
<div class=ml-2>
<a class="hover:underline hover:decoration-primary-500 hover:underline-offset-2 text-neutral-800 dark:text-neutral" href=/congo/samples/placeholder-text/>Placeholder Text</a>
<div class="ltr:ml-2 rtl:mr-2">
<span class=flex>
<span class="ml-1 px-1 py-[1px] text-xs font-normal border rounded-md text-primary-700 dark:text-primary-400 border-primary-400 dark:border-primary-600">
<span class="ltr:ml-1 rtl:mr-1 px-1 py-[1px] text-xs font-normal border rounded-md text-primary-700 dark:text-primary-400 border-primary-400 dark:border-primary-600">
Draft
</span>
</span>
@ -124,79 +133,126 @@ Draft
</h3>
<div class="text-sm text-neutral-500 dark:text-neutral-400">
<div class="flex flex-row flex-wrap items-center">
<time datetime="2019-03-09 00:00:00 +0000 UTC">9 March 2019</time><span class="px-2 text-primary-500">&#183;</span>Updated:&nbsp;
<time datetime="2022-01-24 00:00:00 +0000 UTC">24 January 2022</time><span class="px-2 text-primary-500">&#183;</span><span title="Reading time">2 mins</span>
<time datetime="2019-03-09 00:00:00 +0000 UTC">9 March 2019</time><span class="px-2 text-primary-500">&#183;</span><time datetime="2022-01-24 00:00:00 +0000 UTC">Updated: 24 January 2022</time><span class="px-2 text-primary-500">&#183;</span><span title="Reading time">2 mins</span>
</div>
</div>
<div class="py-1 prose dark:prose-light">
<div class="py-1 prose dark:prose-invert">
<p>Lorem est tota propiore conpellat pectoribus de pectora summo.</p>
</div>
</article>
<article>
<h3 class="flex items-center mt-6 text-xl font-semibold">
<a class="hover:underline hover:underline-primary-500 hover:underline-offset-small text-neutral-800 dark:text-neutral" href=/congo/samples/mathematical-notation/>Mathematical notation</a>
<a class="hover:underline hover:decoration-primary-500 hover:underline-offset-2 text-neutral-800 dark:text-neutral" href=/congo/samples/mathematical-notation/>Mathematical notation</a>
</h3>
<div class="text-sm text-neutral-500 dark:text-neutral-400">
<div class="flex flex-row flex-wrap items-center">
<time datetime="2019-03-08 00:00:00 +0000 UTC">8 March 2019</time><span class="px-2 text-primary-500">&#183;</span><span title="Reading time">1 min</span>
</div>
</div>
<div class="py-1 prose dark:prose-light">
<div class="py-1 prose dark:prose-invert">
<p>KaTeX can be used to render mathematical notation within articles.</p>
</div>
</article>
<article>
<h3 class="flex items-center mt-6 text-xl font-semibold">
<a class="hover:underline hover:underline-primary-500 hover:underline-offset-small text-neutral-800 dark:text-neutral" href=/congo/samples/diagrams-flowcharts/>Diagrams and Flowcharts</a>
<a class="hover:underline hover:decoration-primary-500 hover:underline-offset-2 text-neutral-800 dark:text-neutral" href=/congo/samples/diagrams-flowcharts/>Diagrams and Flowcharts</a>
</h3>
<div class="text-sm text-neutral-500 dark:text-neutral-400">
<div class="flex flex-row flex-wrap items-center">
<time datetime="2019-03-06 00:00:00 +0000 UTC">6 March 2019</time><span class="px-2 text-primary-500">&#183;</span><span title="Reading time">1 min</span>
</div>
</div>
<div class="py-1 prose dark:prose-light">
<div class="py-1 prose dark:prose-invert">
It&rsquo;s easy to add diagrams and flowcharts to articles using Mermaid.
</div>
</article>
<article>
<h3 class="flex items-center mt-6 text-xl font-semibold">
<a class="hover:underline hover:underline-primary-500 hover:underline-offset-small text-neutral-800 dark:text-neutral" href=/congo/samples/charts/>Charts</a>
<a class="hover:underline hover:decoration-primary-500 hover:underline-offset-2 text-neutral-800 dark:text-neutral" href=/congo/samples/charts/>Charts</a>
</h3>
<div class="text-sm text-neutral-500 dark:text-neutral-400">
<div class="flex flex-row flex-wrap items-center">
<time datetime="2019-03-06 00:00:00 +0000 UTC">6 March 2019</time><span class="px-2 text-primary-500">&#183;</span><span title="Reading time">2 mins</span>
</div>
</div>
<div class="py-1 prose dark:prose-light">
<div class="py-1 prose dark:prose-invert">
Congo includes Chart.js for powerful charts and data visualisations.
</div>
</article>
<article>
<h3 class="flex items-center mt-6 text-xl font-semibold">
<a class="hover:underline hover:underline-primary-500 hover:underline-offset-small text-neutral-800 dark:text-neutral" href=/congo/samples/emoji/>Emoji 🪂</a>
<a class="hover:underline hover:decoration-primary-500 hover:underline-offset-2 text-neutral-800 dark:text-neutral" href=/congo/samples/emoji/>Emoji 🪂</a>
</h3>
<div class="text-sm text-neutral-500 dark:text-neutral-400">
<div class="flex flex-row flex-wrap items-center">
<time datetime="2019-03-05 00:00:00 +0000 UTC">5 March 2019</time><span class="px-2 text-primary-500">&#183;</span><span title="Reading time">1 min</span>
</div>
</div>
<div class="py-1 prose dark:prose-light">
<div class="py-1 prose dark:prose-invert">
📖🏞️🧗🏽🐉🧙🏽‍♂️🧚🏽👸
</div>
</article>
<article>
<h3 class="flex items-center mt-6 text-xl font-semibold">
<a class="hover:underline hover:decoration-primary-500 hover:underline-offset-2 text-neutral-800 dark:text-neutral" href=https://jamespanther.com/writings/i-switched-from-google-analytics-to-fathom-analytics/ target=_blank rel=external>An External Article</a>
<span class="-mt-2 text-xs cursor-default text-neutral-400 dark:text-neutral-500" title="Link to external site">
&#8599;
</span>
</h3>
<div class="text-sm text-neutral-500 dark:text-neutral-400">
<div class="flex flex-row flex-wrap items-center">
<time datetime="2019-01-24 00:00:00 +0000 UTC">24 January 2019</time>
</div>
</div>
<div class="py-1 prose dark:prose-invert">
The <code>externalUrl</code> front matter parameter can link to any URL.
</div>
</article>
</section>
</main><footer class=py-10>
</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">
&copy;
2022
Congo
© 2022 Congo contributors
</p>
<p class="text-xs text-neutral-400 dark:text-neutral-600">
Powered by <a class="hover:underline hover:underline-primary-400 hover:text-primary-500" href=https://gohugo.io/ target=_blank rel="noopener noreferrer">Hugo</a> & <a class="hover:underline hover:underline-primary-400 hover:text-primary-500" href=https://git.io/hugo-congo target=_blank rel="noopener noreferrer">Congo</a>
<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>

View File

@ -1 +1 @@
<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Content Samples on Congo</title><link>https://jpanther.github.io/congo/samples/</link><description>Recent content in Content Samples on Congo</description><generator>Hugo -- gohugo.io</generator><language>en-AU</language><lastBuildDate>Fri, 14 Aug 2020 00:00:00 +0000</lastBuildDate><atom:link href="https://jpanther.github.io/congo/samples/index.xml" rel="self" type="application/rss+xml"/><item><title>Icons</title><link>https://jpanther.github.io/congo/samples/icons/</link><pubDate>Fri, 14 Aug 2020 00:00:00 +0000</pubDate><guid>https://jpanther.github.io/congo/samples/icons/</guid><description>Congo has built-in support for a number of FontAwesome 5 icons.</description></item><item><title>Markdown</title><link>https://jpanther.github.io/congo/samples/markdown/</link><pubDate>Mon, 11 Mar 2019 00:00:00 +0000</pubDate><guid>https://jpanther.github.io/congo/samples/markdown/</guid><description>&lt;p>This article offers a sample of basic Markdown formatting that can be used in Congo, also it shows how some basic HTML elements are decorated.&lt;/p></description></item><item><title>Rich Content</title><link>https://jpanther.github.io/congo/samples/rich-content/</link><pubDate>Sun, 10 Mar 2019 00:00:00 +0000</pubDate><guid>https://jpanther.github.io/congo/samples/rich-content/</guid><description>This is an &lt;em>example&lt;/em> of a &lt;strong>rich&lt;/strong> content summary.</description></item><item><title>Placeholder Text</title><link>https://jpanther.github.io/congo/samples/placeholder-text/</link><pubDate>Sat, 09 Mar 2019 00:00:00 +0000</pubDate><guid>https://jpanther.github.io/congo/samples/placeholder-text/</guid><description>&lt;p>Lorem est tota propiore conpellat pectoribus de pectora summo.&lt;/p></description></item><item><title>Mathematical notation</title><link>https://jpanther.github.io/congo/samples/mathematical-notation/</link><pubDate>Fri, 08 Mar 2019 00:00:00 +0000</pubDate><guid>https://jpanther.github.io/congo/samples/mathematical-notation/</guid><description>&lt;p>KaTeX can be used to render mathematical notation within articles.&lt;/p></description></item><item><title>Charts</title><link>https://jpanther.github.io/congo/samples/charts/</link><pubDate>Wed, 06 Mar 2019 00:00:00 +0000</pubDate><guid>https://jpanther.github.io/congo/samples/charts/</guid><description>Congo includes Chart.js for powerful charts and data visualisations.</description></item><item><title>Diagrams and Flowcharts</title><link>https://jpanther.github.io/congo/samples/diagrams-flowcharts/</link><pubDate>Wed, 06 Mar 2019 00:00:00 +0000</pubDate><guid>https://jpanther.github.io/congo/samples/diagrams-flowcharts/</guid><description>It&amp;rsquo;s easy to add diagrams and flowcharts to articles using Mermaid.</description></item><item><title>Emoji :parachute:</title><link>https://jpanther.github.io/congo/samples/emoji/</link><pubDate>Tue, 05 Mar 2019 00:00:00 +0000</pubDate><guid>https://jpanther.github.io/congo/samples/emoji/</guid><description>📖🏞️🧗🏽🐉🧙🏽‍♂️🧚🏽👸</description></item></channel></rss>
<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Content Samples on Congo</title><link>https://jpanther.github.io/congo/samples/</link><description>Recent content in Content Samples on Congo</description><generator>Hugo -- gohugo.io</generator><language>en-au</language><copyright>&amp;copy; 2022 Congo contributors</copyright><lastBuildDate>Fri, 14 Aug 2020 00:00:00 +0000</lastBuildDate><atom:link href="https://jpanther.github.io/congo/samples/index.xml" rel="self" type="application/rss+xml"/><item><title>Icons</title><link>https://jpanther.github.io/congo/samples/icons/</link><pubDate>Fri, 14 Aug 2020 00:00:00 +0000</pubDate><guid>https://jpanther.github.io/congo/samples/icons/</guid><description>Congo has built-in support for a number of FontAwesome 5 icons.</description></item><item><title>Markdown</title><link>https://jpanther.github.io/congo/samples/markdown/</link><pubDate>Mon, 11 Mar 2019 00:00:00 +0000</pubDate><guid>https://jpanther.github.io/congo/samples/markdown/</guid><description>&lt;p>This article offers a sample of basic Markdown formatting that can be used in Congo, also it shows how some basic HTML elements are decorated.&lt;/p></description></item><item><title>Rich Content</title><link>https://jpanther.github.io/congo/samples/rich-content/</link><pubDate>Sun, 10 Mar 2019 00:00:00 +0000</pubDate><guid>https://jpanther.github.io/congo/samples/rich-content/</guid><description>This is an &lt;em>example&lt;/em> of a &lt;strong>rich&lt;/strong> content summary.</description></item><item><title>Placeholder Text</title><link>https://jpanther.github.io/congo/samples/placeholder-text/</link><pubDate>Sat, 09 Mar 2019 00:00:00 +0000</pubDate><guid>https://jpanther.github.io/congo/samples/placeholder-text/</guid><description>&lt;p>Lorem est tota propiore conpellat pectoribus de pectora summo.&lt;/p></description></item><item><title>Mathematical notation</title><link>https://jpanther.github.io/congo/samples/mathematical-notation/</link><pubDate>Fri, 08 Mar 2019 00:00:00 +0000</pubDate><guid>https://jpanther.github.io/congo/samples/mathematical-notation/</guid><description>&lt;p>KaTeX can be used to render mathematical notation within articles.&lt;/p></description></item><item><title>Charts</title><link>https://jpanther.github.io/congo/samples/charts/</link><pubDate>Wed, 06 Mar 2019 00:00:00 +0000</pubDate><guid>https://jpanther.github.io/congo/samples/charts/</guid><description>Congo includes Chart.js for powerful charts and data visualisations.</description></item><item><title>Diagrams and Flowcharts</title><link>https://jpanther.github.io/congo/samples/diagrams-flowcharts/</link><pubDate>Wed, 06 Mar 2019 00:00:00 +0000</pubDate><guid>https://jpanther.github.io/congo/samples/diagrams-flowcharts/</guid><description>It&amp;rsquo;s easy to add diagrams and flowcharts to articles using Mermaid.</description></item><item><title>Emoji :parachute:</title><link>https://jpanther.github.io/congo/samples/emoji/</link><pubDate>Tue, 05 Mar 2019 00:00:00 +0000</pubDate><guid>https://jpanther.github.io/congo/samples/emoji/</guid><description>📖🏞️🧗🏽🐉🧙🏽‍♂️🧚🏽👸</description></item><item><title>An External Article</title><link>https://jpanther.github.io/congo/samples/external/</link><pubDate>Thu, 24 Jan 2019 00:00:00 +0000</pubDate><guid>https://jpanther.github.io/congo/samples/external/</guid><description>The &lt;code>externalUrl&lt;/code> front matter parameter can link to any URL.</description></item></channel></rss>

View File

@ -1,15 +1,14 @@
<!doctype html><html lang=en-au><head>
<!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 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>Markdown &#183; Congo</title>
<meta name=title content="Markdown &#183; Congo">
<meta name=description content="Sample article showcasing basic Markdown syntax and formatting for HTML elements.">
<meta name=description content="A powerful, lightweight theme for Hugo built with Tailwind CSS.">
<link rel=canonical href=https://jpanther.github.io/congo/samples/markdown/>
<link type=text/css rel=stylesheet href=/congo/css/schemes/congo.min.b48d6ba061dc77186a2524fb8aac5ac3823b2679a9299ca60325abbccc9c1764c884715f0ba24b4e2776cb3814df4af1f4c854b87207cd5d4c7a254da9b55751.css integrity="sha512-tI1roGHcdxhqJST7iqxaw4I7JnmpKZymAyWrvMycF2TIhHFfC6JLTid2yzgU30rx9MhUuHIHzV1MeiVNqbVXUQ==">
<link type=text/css rel=stylesheet href=/congo/css/compiled/main.min.51037225bb3c65887773b052da1e38f105db8f3d9aa6a34ba3c5c40c88fb309724f8cc5ed2871adc7e55dacab9b36c60ce7aa7a61dff2cc638f8b435c898d5a8.css integrity="sha512-UQNyJbs8ZYh3c7BS2h448QXbjz2apqNLo8XEDIj7MJck+Mxe0oca3H5V2sq5s2xgznqnph3/LMY4+LQ1yJjVqA==">
<script>function loadPreferredAppearance(){localStorage.preferredAppearance==="dark"||!("preferredAppearance"in localStorage)&&window.matchMedia("(prefers-color-scheme: dark)").matches?document.documentElement.classList.add("dark"):document.documentElement.classList.remove("dark")}function setPreferredAppearance(a){a=="default"?localStorage.removeItem("preferredAppearance"):localStorage.preferredAppearance=a,loadPreferredAppearance()}loadPreferredAppearance(),window.matchMedia("(prefers-color-scheme: dark)").addListener(loadPreferredAppearance)</script>
<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>
@ -19,51 +18,60 @@
<meta property="og:type" content="article">
<meta property="og:url" content="https://jpanther.github.io/congo/samples/markdown/"><meta property="article:section" content="samples">
<meta property="article:published_time" content="2019-03-11T00:00:00+00:00">
<meta property="article:modified_time" content="2019-03-11T00:00:00+00:00">
<meta property="article:modified_time" content="2019-03-11T00:00:00+00:00"><meta property="og:site_name" content="Congo">
<meta name=twitter:card content="summary">
<meta name=twitter:title content="Markdown">
<meta name=twitter:description content="Sample article showcasing basic Markdown syntax and formatting for HTML elements.">
<script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","articleSection":"Content Samples","name":"Markdown","headline":"Markdown","description":"Sample article showcasing basic Markdown syntax and formatting for HTML elements.","inLanguage":"en-AU","author":{"@type":"Person","name":"Congo"},"creator":{"@type":"Person","name":"Congo"},"copyrightHolder":"Congo","copyrightYear":"2019","dateCreated":"2019-03-11T00:00:00\u002b00:00","datePublished":"2019-03-11T00:00:00\u002b00:00","dateModified":"2019-03-11T00:00:00\u002b00:00","url":"https:\/\/jpanther.github.io\/congo\/samples\/markdown\/","keywords":["markdown","css","html","sample"],"wordCount":"460"}</script>
<meta name=generator content="Hugo 0.92.0">
<script type=application/ld+json>[{"@context":"https://schema.org","@type":"Article","articleSection":"Content Samples","name":"Markdown","headline":"Markdown","description":"Sample article showcasing basic Markdown syntax and formatting for HTML elements.","abstract":"\u003cp\u003eThis article offers a sample of basic Markdown formatting that can be used in Congo, also it shows how some basic HTML elements are decorated.\u003c\/p\u003e","inLanguage":"en-au","url":"https:\/\/jpanther.github.io\/congo\/samples\/markdown\/","author":{"@type":"Person","name":"Congo"},"copyrightYear":"2019","dateCreated":"2019-03-11T00:00:00\u002b00:00","datePublished":"2019-03-11T00:00:00\u002b00:00","dateModified":"2019-03-11T00:00:00\u002b00:00","keywords":["markdown","css","html","sample"],"mainEntityOfPage":"true","wordCount":"472"}]</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"><header class="flex justify-between py-6 font-semibold sm:items-center sm:py-10 text-neutral-900 dark:text-neutral">
<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:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" rel=me href=/congo/>Congo</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=/congo/docs/ title=Documentation>Docs</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=/congo/samples/ title="Content Samples">Samples</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=/congo/users/ title=Users>Users</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=https://github.com/jpanther/congo title>GitHub</a>
<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 class=flex-grow>
<article class=max-w-prose>
<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:underline-neutral-300 dark:underline-neutral-600" href=/congo/>Welcome to Congo! :tada:</a><span class="px-1 text-primary-500">/</span>
<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:underline-neutral-300 dark:underline-neutral-600" href=/congo/samples/>Content Samples</a><span class="px-1 text-primary-500">/</span>
<a class="hover:underline hover:decoration-neutral-300 dark:underline-neutral-600" href=/congo/samples/>Content Samples</a><span class="px-1 text-primary-500">/</span>
</li>
<li class="inline hidden">
<a class="hover:underline hover:underline-neutral-300 dark:underline-neutral-600" href=/congo/samples/markdown/>Markdown</a><span class="px-1 text-primary-500">/</span>
<a class="hover:underline hover:decoration-neutral-300 dark:underline-neutral-600" href=/congo/samples/markdown/>Markdown</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">
@ -75,32 +83,87 @@ Markdown
</div>
</div>
</header>
<section class="prose dark:prose-light">
<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=#headings>Headings</a></li>
</ul>
<ul>
<li><a href=#h2>H2</a>
<ul>
<li><a href=#h3>H3</a>
<ul>
<li><a href=#h4>H4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href=#paragraph>Paragraph</a></li>
<li><a href=#blockquotes>Blockquotes</a>
<ul>
<li><a href=#blockquote-without-attribution>Blockquote without attribution</a></li>
<li><a href=#blockquote-with-attribution>Blockquote with attribution</a></li>
</ul>
</li>
<li><a href=#tables>Tables</a>
<ul>
<li><a href=#inline-markdown-within-tables>Inline Markdown within tables</a></li>
</ul>
</li>
<li><a href=#code-blocks>Code Blocks</a>
<ul>
<li><a href=#code-block-with-backticks>Code block with backticks</a></li>
<li><a href=#code-block-indented-with-four-spaces>Code block indented with four spaces</a></li>
<li><a href=#code-block-with-hugos-internal-highlight-shortcode>Code block with Hugo&rsquo;s internal highlight shortcode</a></li>
</ul>
</li>
<li><a href=#list-types>List Types</a>
<ul>
<li><a href=#ordered-list>Ordered List</a></li>
<li><a href=#unordered-list>Unordered List</a></li>
<li><a href=#nested-list>Nested list</a></li>
</ul>
</li>
<li><a href=#other-elements--abbr-sub-sup-kbd-mark>Other Elements — abbr, sub, sup, kbd, mark</a></li>
</ul>
</nav>
</div>
</details>
</div>
</div>
<div class="min-w-0 min-h-0 max-w-prose">
<p>This article offers a sample of basic Markdown formatting that can be used in Congo, also it shows how some basic HTML elements are decorated.</p>
<h2 id=headings>Headings <a class=heading-anchor href=#headings aria-label=Anchor>#</a></h2>
<h2 id=headings class="relative group">Headings <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=#headings aria-label=Anchor>#</a></span></h2>
<p>The following HTML <code>&lt;h1></code><code>&lt;h6></code> elements represent six levels of section headings. <code>&lt;h1></code> is the highest section level while <code>&lt;h6></code> is the lowest.</p>
<h1 id=h1>H1 <a class=heading-anchor href=#h1 aria-label=Anchor>#</a></h1>
<h2 id=h2>H2 <a class=heading-anchor href=#h2 aria-label=Anchor>#</a></h2>
<h3 id=h3>H3 <a class=heading-anchor href=#h3 aria-label=Anchor>#</a></h3>
<h4 id=h4>H4 <a class=heading-anchor href=#h4 aria-label=Anchor>#</a></h4>
<h5 id=h5>H5 <a class=heading-anchor href=#h5 aria-label=Anchor>#</a></h5>
<h6 id=h6>H6 <a class=heading-anchor href=#h6 aria-label=Anchor>#</a></h6>
<h2 id=paragraph>Paragraph <a class=heading-anchor href=#paragraph aria-label=Anchor>#</a></h2>
<h1 id=h1 class="relative group">H1 <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=#h1 aria-label=Anchor>#</a></span></h1>
<h2 id=h2 class="relative group">H2 <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=#h2 aria-label=Anchor>#</a></span></h2>
<h3 id=h3 class="relative group">H3 <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=#h3 aria-label=Anchor>#</a></span></h3>
<h4 id=h4 class="relative group">H4 <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=#h4 aria-label=Anchor>#</a></span></h4>
<h5 id=h5 class="relative group">H5 <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=#h5 aria-label=Anchor>#</a></span></h5>
<h6 id=h6 class="relative group">H6 <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=#h6 aria-label=Anchor>#</a></span></h6>
<h2 id=paragraph class="relative group">Paragraph <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=#paragraph aria-label=Anchor>#</a></span></h2>
<p>Xerum, quo qui aut unt expliquam qui dolut labo. Aque venitatiusda cum, voluptionse latur sitiae dolessi aut parist aut dollo enim qui voluptate ma dolestendit peritin re plis aut quas inctum laceat est volestemque commosa as cus endigna tectur, offic to cor sequas etum rerum idem sintibus eiur? Quianimin porecus evelectur, cum que nis nust voloribus ratem aut omnimi, sitatur? Quiatem. Nam, omnis sum am facea corem alique molestrunt et eos evelece arcillit ut aut eos eos nus, sin conecerem erum fuga. Ri oditatquam, ad quibus unda veliamenimin cusam et facea ipsamus es exerum sitate dolores editium rerore eost, temped molorro ratiae volorro te reribus dolorer sperchicium faceata tiustia prat.</p>
<p>Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sapicia is sinveli squiatum, core et que aut hariosam ex eat.</p>
<h2 id=blockquotes>Blockquotes <a class=heading-anchor href=#blockquotes aria-label=Anchor>#</a></h2>
<h2 id=blockquotes class="relative group">Blockquotes <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=#blockquotes aria-label=Anchor>#</a></span></h2>
<p>The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a <code>footer</code> or <code>cite</code> element, and optionally with in-line changes such as annotations and abbreviations.</p>
<h3 id=blockquote-without-attribution>Blockquote without attribution <a class=heading-anchor href=#blockquote-without-attribution aria-label=Anchor>#</a></h3>
<h3 id=blockquote-without-attribution class="relative group">Blockquote without attribution <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=#blockquote-without-attribution aria-label=Anchor>#</a></span></h3>
<blockquote>
<p>Tiam, ad mint andaepu dandae nostion secatur sequo quae.
<strong>Note</strong> that you can use <em>Markdown syntax</em> within a blockquote.</p>
</blockquote>
<h3 id=blockquote-with-attribution>Blockquote with attribution <a class=heading-anchor href=#blockquote-with-attribution aria-label=Anchor>#</a></h3>
<h3 id=blockquote-with-attribution class="relative group">Blockquote with attribution <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=#blockquote-with-attribution aria-label=Anchor>#</a></span></h3>
<blockquote>
<p>Don&rsquo;t communicate by sharing memory, share memory by communicating.<br>
<cite>Rob Pike<sup id=fnref:1><a href=#fn:1 class=footnote-ref role=doc-noteref>1</a></sup></cite></p>
</blockquote>
<h2 id=tables>Tables <a class=heading-anchor href=#tables aria-label=Anchor>#</a></h2>
<h2 id=tables class="relative group">Tables <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=#tables aria-label=Anchor>#</a></span></h2>
<p>Tables aren&rsquo;t part of the core Markdown spec, but Hugo supports supports them out-of-the-box.</p>
<table>
<thead>
@ -120,7 +183,7 @@ Markdown
</tr>
</tbody>
</table>
<h3 id=inline-markdown-within-tables>Inline Markdown within tables <a class=heading-anchor href=#inline-markdown-within-tables aria-label=Anchor>#</a></h3>
<h3 id=inline-markdown-within-tables class="relative group">Inline Markdown within tables <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=#inline-markdown-within-tables aria-label=Anchor>#</a></span></h3>
<table>
<thead>
<tr>
@ -137,8 +200,8 @@ Markdown
</tr>
</tbody>
</table>
<h2 id=code-blocks>Code Blocks <a class=heading-anchor href=#code-blocks aria-label=Anchor>#</a></h2>
<h3 id=code-block-with-backticks>Code block with backticks <a class=heading-anchor href=#code-block-with-backticks aria-label=Anchor>#</a></h3>
<h2 id=code-blocks class="relative group">Code Blocks <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=#code-blocks aria-label=Anchor>#</a></span></h2>
<h3 id=code-block-with-backticks class="relative group">Code block with backticks <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=#code-block-with-backticks aria-label=Anchor>#</a></span></h3>
<div class=highlight><pre tabindex=0 class=chroma><code class=language-html data-lang=html><span class=cp>&lt;!DOCTYPE html&gt;</span>
<span class=p>&lt;</span><span class=nt>html</span> <span class=na>lang</span><span class=o>=</span><span class=s>&#34;en&#34;</span><span class=p>&gt;</span>
<span class=p>&lt;</span><span class=nt>head</span><span class=p>&gt;</span>
@ -149,8 +212,8 @@ Markdown
<span class=p>&lt;</span><span class=nt>p</span><span class=p>&gt;</span>Test<span class=p>&lt;/</span><span class=nt>p</span><span class=p>&gt;</span>
<span class=p>&lt;/</span><span class=nt>body</span><span class=p>&gt;</span>
<span class=p>&lt;/</span><span class=nt>html</span><span class=p>&gt;</span>
</code></pre></div><h3 id=code-block-indented-with-four-spaces>Code block indented with four spaces <a class=heading-anchor href=#code-block-indented-with-four-spaces aria-label=Anchor>#</a></h3>
<pre><code>&lt;!doctype html&gt;
</code></pre></div><h3 id=code-block-indented-with-four-spaces class="relative group">Code block indented with four spaces <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=#code-block-indented-with-four-spaces aria-label=Anchor>#</a></span></h3>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
&lt;meta charset=&quot;utf-8&quot;&gt;
@ -161,31 +224,47 @@ Markdown
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<h3 id=code-block-with-hugos-internal-highlight-shortcode>Code block with Hugo&rsquo;s internal highlight shortcode <a class=heading-anchor href=#code-block-with-hugos-internal-highlight-shortcode aria-label=Anchor>#</a></h3>
<div class=highlight><pre tabindex=0 class=chroma><code class=language-html data-lang=html><span class=cp>&lt;!doctype html&gt;</span>
<h3 id=code-block-with-hugos-internal-highlight-shortcode class="relative group">Code block with Hugo&rsquo;s internal highlight shortcode <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=#code-block-with-hugos-internal-highlight-shortcode aria-label=Anchor>#</a></span></h3>
<div class=highlight><div class=chroma>
<table class=lntable><tr><td class=lntd>
<pre tabindex=0 class=chroma><code><span class=lnt> 1
</span><span class=lnt> 2
</span><span class=lnt> 3
</span><span class=hl><span class=lnt> 4
</span></span><span class=lnt> 5
</span><span class=lnt> 6
</span><span class=hl><span class=lnt> 7
</span></span><span class=hl><span class=lnt> 8
</span></span><span class=hl><span class=lnt> 9
</span></span><span class=lnt>10
</span></code></pre></td>
<td class=lntd>
<pre tabindex=0 class=chroma><code class=language-html data-lang=html><span class=cp>&lt;!DOCTYPE html&gt;</span>
<span class=p>&lt;</span><span class=nt>html</span> <span class=na>lang</span><span class=o>=</span><span class=s>&#34;en&#34;</span><span class=p>&gt;</span>
<span class=p>&lt;</span><span class=nt>head</span><span class=p>&gt;</span>
<span class=p>&lt;</span><span class=nt>meta</span> <span class=na>charset</span><span class=o>=</span><span class=s>&#34;utf-8&#34;</span><span class=p>&gt;</span>
<span class=p>&lt;</span><span class=nt>title</span><span class=p>&gt;</span>Example HTML5 Document<span class=p>&lt;/</span><span class=nt>title</span><span class=p>&gt;</span>
<span class=hl> <span class=p>&lt;</span><span class=nt>meta</span> <span class=na>charset</span><span class=o>=</span><span class=s>&#34;utf-8&#34;</span><span class=p>&gt;</span>
</span> <span class=p>&lt;</span><span class=nt>title</span><span class=p>&gt;</span>Example HTML5 Document<span class=p>&lt;/</span><span class=nt>title</span><span class=p>&gt;</span>
<span class=p>&lt;/</span><span class=nt>head</span><span class=p>&gt;</span>
<span class=p>&lt;</span><span class=nt>body</span><span class=p>&gt;</span>
<span class=p>&lt;</span><span class=nt>p</span><span class=p>&gt;</span>Test<span class=p>&lt;/</span><span class=nt>p</span><span class=p>&gt;</span>
<span class=p>&lt;/</span><span class=nt>body</span><span class=p>&gt;</span>
<span class=p>&lt;/</span><span class=nt>html</span><span class=p>&gt;</span></code></pre></div>
<h2 id=list-types>List Types <a class=heading-anchor href=#list-types aria-label=Anchor>#</a></h2>
<h3 id=ordered-list>Ordered List <a class=heading-anchor href=#ordered-list aria-label=Anchor>#</a></h3>
<span class=hl><span class=p>&lt;</span><span class=nt>body</span><span class=p>&gt;</span>
</span><span class=hl> <span class=p>&lt;</span><span class=nt>p</span><span class=p>&gt;</span>Test<span class=p>&lt;/</span><span class=nt>p</span><span class=p>&gt;</span>
</span><span class=hl><span class=p>&lt;/</span><span class=nt>body</span><span class=p>&gt;</span>
</span><span class=p>&lt;/</span><span class=nt>html</span><span class=p>&gt;</span></code></pre></td></tr></table>
</div>
</div>
<h2 id=list-types class="relative group">List Types <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=#list-types aria-label=Anchor>#</a></span></h2>
<h3 id=ordered-list class="relative group">Ordered List <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=#ordered-list aria-label=Anchor>#</a></span></h3>
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
<h3 id=unordered-list>Unordered List <a class=heading-anchor href=#unordered-list aria-label=Anchor>#</a></h3>
<h3 id=unordered-list class="relative group">Unordered List <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=#unordered-list aria-label=Anchor>#</a></span></h3>
<ul>
<li>List item</li>
<li>Another item</li>
<li>And another item</li>
</ul>
<h3 id=nested-list>Nested list <a class=heading-anchor href=#nested-list aria-label=Anchor>#</a></h3>
<h3 id=nested-list class="relative group">Nested list <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=#nested-list aria-label=Anchor>#</a></span></h3>
<ul>
<li>Fruit
<ul>
@ -201,7 +280,7 @@ Markdown
</ul>
</li>
</ul>
<h2 id=other-elements--abbr-sub-sup-kbd-mark>Other Elements — abbr, sub, sup, kbd, mark <a class=heading-anchor href=#other-elements--abbr-sub-sup-kbd-mark aria-label=Anchor>#</a></h2>
<h2 id=other-elements--abbr-sub-sup-kbd-mark class="relative group">Other Elements — abbr, sub, sup, kbd, mark <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=#other-elements--abbr-sub-sup-kbd-mark aria-label=Anchor>#</a></span></h2>
<p><abbr title="Graphics Interchange Format">GIF</abbr> is a bitmap image format.</p>
<p>H<sub>2</sub>O</p>
<p>X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup></p>
@ -211,14 +290,15 @@ Markdown
<hr>
<ol>
<li id=fn:1 role=doc-endnote>
<p>The above quote is excerpted from Rob Pike&rsquo;s <a href="https://www.youtube.com/watch?v=PAAkCSZUG1c">talk</a> during Gopherfest, November 18, 2015.&#160;<a href=#fnref:1 class=footnote-backref role=doc-backlink>&#8617;&#xfe0e;</a></p>
<p>The above quote is excerpted from Rob Pike&rsquo;s <a href="https://www.youtube.com/watch?v=PAAkCSZUG1c">talk <code>about</code> nothing</a> during Gopherfest, November 18, 2015.&#160;<a href=#fnref:1 class=footnote-backref role=doc-backlink>&#8617;&#xfe0e;</a></p>
</li>
</ol>
</section>
</div>
</section>
<footer class=pt-8>
<footer class="pt-8 max-w-prose">
<div class=flex>
<img class="w-24 h-24 !mt-0 !mb-0 mr-4 rounded-full" width=96 height=96 alt=Author src=/congo/img/author.jpg>
<img class="w-24 h-24 !mt-0 !mb-0 ltr:mr-4 rtl:ml-4 rounded-full" width=96 height=96 alt=Author src=/congo/img/author_hu052d24d60828c1cca42a6aefe45b8b44_54195_192x192_fill_q75_box_smart1.jpg>
<div class=place-self-center>
<div class="text-[0.6rem] leading-3 text-neutral-500 dark:text-neutral-400 uppercase">
Author
@ -249,47 +329,86 @@ Congo
</div>
</div>
</div>
<div class="pt-8 article-pagination">
<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 href=/congo/samples/icons/>
<span class="mr-3 article-pagination-direction">&larr;</span>
<a class="flex group" href=/congo/samples/rich-content/>
<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="article-pagination-title mt-[0.1rem] leading-6">Icons</span>
<span class="mt-[0.1rem] leading-6 group-hover:underline group-hover:decoration-primary-500">Rich Content</span>
<span class="mt-[0.1rem] text-xs text-neutral-500 dark:text-neutral-400">
<time datetime="2020-08-14 00:00:00 +0000 UTC">14 August 2020</time>
<time datetime="2019-03-10 00:00:00 +0000 UTC">10 March 2019</time>
</span>
</span>
</a>
</span>
<span>
<a class="flex text-right" href=/congo/samples/rich-content/>
<a class="flex text-right group" href=/congo/samples/icons/>
<span class="flex flex-col">
<span class="article-pagination-title mt-[0.1rem] leading-6">Rich Content</span>
<span class="mt-[0.1rem] leading-6 group-hover:underline group-hover:decoration-primary-500">Icons</span>
<span class="mt-[0.1rem] text-xs text-neutral-500 dark:text-neutral-400">
<time datetime="2019-03-10 00:00:00 +0000 UTC">10 March 2019</time>
<time datetime="2020-08-14 00:00:00 +0000 UTC">14 August 2020</time>
</span>
</span>
<span class="ml-3 article-pagination-direction">&rarr;</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>
</main><footer class=py-10>
<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">
&copy;
2022
Congo
© 2022 Congo contributors
</p>
<p class="text-xs text-neutral-400 dark:text-neutral-600">
Powered by <a class="hover:underline hover:underline-primary-400 hover:text-primary-500" href=https://gohugo.io/ target=_blank rel="noopener noreferrer">Hugo</a> & <a class="hover:underline hover:underline-primary-400 hover:text-primary-500" href=https://git.io/hugo-congo target=_blank rel="noopener noreferrer">Congo</a>
<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>

View File

@ -1,15 +1,14 @@
<!doctype html><html lang=en-au><head>
<!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 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>Mathematical notation &#183; Congo</title>
<meta name=title content="Mathematical notation &#183; Congo">
<meta name=description content="A brief sample of mathematical notation in Congo.">
<meta name=description content="A powerful, lightweight theme for Hugo built with Tailwind CSS.">
<link rel=canonical href=https://jpanther.github.io/congo/samples/mathematical-notation/>
<link type=text/css rel=stylesheet href=/congo/css/schemes/congo.min.b48d6ba061dc77186a2524fb8aac5ac3823b2679a9299ca60325abbccc9c1764c884715f0ba24b4e2776cb3814df4af1f4c854b87207cd5d4c7a254da9b55751.css integrity="sha512-tI1roGHcdxhqJST7iqxaw4I7JnmpKZymAyWrvMycF2TIhHFfC6JLTid2yzgU30rx9MhUuHIHzV1MeiVNqbVXUQ==">
<link type=text/css rel=stylesheet href=/congo/css/compiled/main.min.51037225bb3c65887773b052da1e38f105db8f3d9aa6a34ba3c5c40c88fb309724f8cc5ed2871adc7e55dacab9b36c60ce7aa7a61dff2cc638f8b435c898d5a8.css integrity="sha512-UQNyJbs8ZYh3c7BS2h448QXbjz2apqNLo8XEDIj7MJck+Mxe0oca3H5V2sq5s2xgznqnph3/LMY4+LQ1yJjVqA==">
<script>function loadPreferredAppearance(){localStorage.preferredAppearance==="dark"||!("preferredAppearance"in localStorage)&&window.matchMedia("(prefers-color-scheme: dark)").matches?document.documentElement.classList.add("dark"):document.documentElement.classList.remove("dark")}function setPreferredAppearance(a){a=="default"?localStorage.removeItem("preferredAppearance"):localStorage.preferredAppearance=a,loadPreferredAppearance()}loadPreferredAppearance(),window.matchMedia("(prefers-color-scheme: dark)").addListener(loadPreferredAppearance)</script>
<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>
@ -19,12 +18,12 @@
<meta property="og:type" content="article">
<meta property="og:url" content="https://jpanther.github.io/congo/samples/mathematical-notation/"><meta property="article:section" content="samples">
<meta property="article:published_time" content="2019-03-08T00:00:00+00:00">
<meta property="article:modified_time" content="2019-03-08T00:00:00+00:00">
<meta property="article:modified_time" content="2019-03-08T00:00:00+00:00"><meta property="og:site_name" content="Congo">
<meta name=twitter:card content="summary">
<meta name=twitter:title content="Mathematical notation">
<meta name=twitter:description content="A brief sample of mathematical notation in Congo.">
<script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","articleSection":"Content Samples","name":"Mathematical notation","headline":"Mathematical notation","description":"A brief sample of mathematical notation in Congo.","inLanguage":"en-AU","author":{"@type":"Person","name":"Congo"},"creator":{"@type":"Person","name":"Congo"},"copyrightHolder":"Congo","copyrightYear":"2019","dateCreated":"2019-03-08T00:00:00\u002b00:00","datePublished":"2019-03-08T00:00:00\u002b00:00","dateModified":"2019-03-08T00:00:00\u002b00:00","url":"https:\/\/jpanther.github.io\/congo\/samples\/mathematical-notation\/","keywords":["sample","katex","maths","shortcodes"],"wordCount":"142"}</script>
<meta name=generator content="Hugo 0.92.0">
<script type=application/ld+json>[{"@context":"https://schema.org","@type":"Article","articleSection":"Content Samples","name":"Mathematical notation","headline":"Mathematical notation","description":"A brief sample of mathematical notation in Congo.","abstract":"\u003cp\u003eKaTeX can be used to render mathematical notation within articles.\u003c\/p\u003e","inLanguage":"en-au","url":"https:\/\/jpanther.github.io\/congo\/samples\/mathematical-notation\/","author":{"@type":"Person","name":"Congo"},"copyrightYear":"2019","dateCreated":"2019-03-08T00:00:00\u002b00:00","datePublished":"2019-03-08T00:00:00\u002b00:00","dateModified":"2019-03-08T00:00:00\u002b00:00","keywords":["sample","katex","maths","shortcodes"],"mainEntityOfPage":"true","wordCount":"142"}]</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>
@ -34,39 +33,48 @@
<script defer src=/congo/lib/katex/katex.min.89e82bf426efc39d2b1b46a0094ff51d4274c3919f953f8bb24d92448d633a3102d794518095bdbcc2c3171205de6071a080c84b8d5f9c434db92643f9684838.js integrity="sha512-iegr9Cbvw50rG0agCU/1HUJ0w5GflT+Lsk2SRI1jOjEC15RRgJW9vMLDFxIF3mBxoIDIS41fnENNuSZD+WhIOA=="></script>
<script defer src=/congo/lib/katex/auto-render.min.640fd13eb028f3c0e5c119e7a0d56a28836740d716111cd12b4dcf0da038188262559bc61485906dd582b1479b3197e45a88677e782c0e35f353a3e890ee231b.js integrity="sha512-ZA/RPrAo88DlwRnnoNVqKINnQNcWERzRK03PDaA4GIJiVZvGFIWQbdWCsUebMZfkWohnfngsDjXzU6PokO4jGw==" onload=renderMathInElement(document.body)></script>
</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"><header class="flex justify-between py-6 font-semibold sm:items-center sm:py-10 text-neutral-900 dark:text-neutral">
<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:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" rel=me href=/congo/>Congo</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=/congo/docs/ title=Documentation>Docs</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=/congo/samples/ title="Content Samples">Samples</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=/congo/users/ title=Users>Users</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=https://github.com/jpanther/congo title>GitHub</a>
<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 class=flex-grow>
<article class=max-w-prose>
<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:underline-neutral-300 dark:underline-neutral-600" href=/congo/>Welcome to Congo! :tada:</a><span class="px-1 text-primary-500">/</span>
<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:underline-neutral-300 dark:underline-neutral-600" href=/congo/samples/>Content Samples</a><span class="px-1 text-primary-500">/</span>
<a class="hover:underline hover:decoration-neutral-300 dark:underline-neutral-600" href=/congo/samples/>Content Samples</a><span class="px-1 text-primary-500">/</span>
</li>
<li class="inline hidden">
<a class="hover:underline hover:underline-neutral-300 dark:underline-neutral-600" href=/congo/samples/mathematical-notation/>Mathematical notation</a><span class="px-1 text-primary-500">/</span>
<a class="hover:underline hover:decoration-neutral-300 dark:underline-neutral-600" href=/congo/samples/mathematical-notation/>Mathematical notation</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">
@ -78,17 +86,35 @@ Mathematical notation
</div>
</div>
</header>
<section class="prose dark:prose-light">
<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=#inline-notation>Inline notation</a></li>
<li><a href=#block-notation>Block notation</a></li>
</ul>
</nav>
</div>
</details>
</div>
</div>
<div class="min-w-0 min-h-0 max-w-prose">
<p>KaTeX can be used to render mathematical notation within articles.</p>
<p>Congo will only bundle the KaTeX assets into your project if you make use of mathematical notation. In order for this to work, simply include the <a href=https://jpanther.github.io/congo/docs/shortcodes/#katex><code>katex</code> shortcode</a> within the article. Any KaTeX syntax on that page will then be automatically rendered.</p>
<p>Use the online reference of <a href=https://katex.org/docs/supported.html>supported TeX functions</a> for the available syntax.</p>
<h2 id=inline-notation>Inline notation <a class=heading-anchor href=#inline-notation aria-label=Anchor>#</a></h2>
<h2 id=inline-notation class="relative group">Inline notation <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=#inline-notation aria-label=Anchor>#</a></span></h2>
<p>Inline notation can be generated by wrapping the expression in <code>\\(</code> and <code>\\)</code> delimiters.</p>
<p><strong>Example:</strong></p>
<div class=highlight><pre tabindex=0 class=chroma><code class=language-tex data-lang=tex><span class=c>% KaTeX inline notation
</span><span class=c></span>Inline notation: <span class=k>\\</span>(<span class=k>\varphi</span> = <span class=k>\dfrac</span><span class=nb>{</span>1+<span class=k>\sqrt</span>5<span class=nb>}{</span>2<span class=nb>}</span>= 1.6180339887…<span class=k>\\</span>)
</code></pre></div><p>Inline notation: \(\varphi = \dfrac{1+\sqrt5}{2}= 1.6180339887…\)</p>
<h2 id=block-notation>Block notation <a class=heading-anchor href=#block-notation aria-label=Anchor>#</a></h2>
<h2 id=block-notation class="relative group">Block notation <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=#block-notation aria-label=Anchor>#</a></span></h2>
<p>Alternatively, block notation can be generated using <code>$$</code> delimiters. This will output the expression in its own HTML block.</p>
<p><strong>Example:</strong></p>
<div class=highlight><pre tabindex=0 class=chroma><code class=language-tex data-lang=tex><span class=c>% KaTeX block notation
@ -98,10 +124,11 @@ Mathematical notation
</code></pre></div><p>$$
\varphi = 1+\frac{1} {1+\frac{1} {1+\frac{1} {1+\cdots} } }
$$</p>
</div>
</section>
<footer class=pt-8>
<footer class="pt-8 max-w-prose">
<div class=flex>
<img class="w-24 h-24 !mt-0 !mb-0 mr-4 rounded-full" width=96 height=96 alt=Author src=/congo/img/author.jpg>
<img class="w-24 h-24 !mt-0 !mb-0 ltr:mr-4 rtl:ml-4 rounded-full" width=96 height=96 alt=Author src=/congo/img/author_hu052d24d60828c1cca42a6aefe45b8b44_54195_192x192_fill_q75_box_smart1.jpg>
<div class=place-self-center>
<div class="text-[0.6rem] leading-3 text-neutral-500 dark:text-neutral-400 uppercase">
Author
@ -132,47 +159,81 @@ Congo
</div>
</div>
</div>
<div class="pt-8 article-pagination">
<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 href=/congo/samples/placeholder-text/>
<span class="mr-3 article-pagination-direction">&larr;</span>
<a class="flex group" href=/congo/samples/charts/>
<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="article-pagination-title mt-[0.1rem] leading-6">Placeholder Text</span>
<span class="mt-[0.1rem] leading-6 group-hover:underline group-hover:decoration-primary-500">Charts</span>
<span class="mt-[0.1rem] text-xs text-neutral-500 dark:text-neutral-400">
<time datetime="2019-03-09 00:00:00 +0000 UTC">9 March 2019</time>
<time datetime="2019-03-06 00:00:00 +0000 UTC">6 March 2019</time>
</span>
</span>
</a>
</span>
<span>
<a class="flex text-right" href=/congo/samples/charts/>
<a class="flex text-right group" href=/congo/samples/placeholder-text/>
<span class="flex flex-col">
<span class="article-pagination-title mt-[0.1rem] leading-6">Charts</span>
<span class="mt-[0.1rem] leading-6 group-hover:underline group-hover:decoration-primary-500">Placeholder Text</span>
<span class="mt-[0.1rem] text-xs text-neutral-500 dark:text-neutral-400">
<time datetime="2019-03-06 00:00:00 +0000 UTC">6 March 2019</time>
<time datetime="2019-03-09 00:00:00 +0000 UTC">9 March 2019</time>
</span>
</span>
<span class="ml-3 article-pagination-direction">&rarr;</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>
</main><footer class=py-10>
</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">
&copy;
2022
Congo
© 2022 Congo contributors
</p>
<p class="text-xs text-neutral-400 dark:text-neutral-600">
Powered by <a class="hover:underline hover:underline-primary-400 hover:text-primary-500" href=https://gohugo.io/ target=_blank rel="noopener noreferrer">Hugo</a> & <a class="hover:underline hover:underline-primary-400 hover:text-primary-500" href=https://git.io/hugo-congo target=_blank rel="noopener noreferrer">Congo</a>
<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>

View File

@ -1,15 +1,14 @@
<!doctype html><html lang=en-au><head>
<!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 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>Placeholder Text &#183; Congo</title>
<meta name=title content="Placeholder Text &#183; Congo">
<meta name=description content="Lorem Ipsum Dolor Si Amet">
<meta name=description content="A powerful, lightweight theme for Hugo built with Tailwind CSS.">
<link rel=canonical href=https://jpanther.github.io/congo/samples/placeholder-text/>
<link type=text/css rel=stylesheet href=/congo/css/schemes/congo.min.b48d6ba061dc77186a2524fb8aac5ac3823b2679a9299ca60325abbccc9c1764c884715f0ba24b4e2776cb3814df4af1f4c854b87207cd5d4c7a254da9b55751.css integrity="sha512-tI1roGHcdxhqJST7iqxaw4I7JnmpKZymAyWrvMycF2TIhHFfC6JLTid2yzgU30rx9MhUuHIHzV1MeiVNqbVXUQ==">
<link type=text/css rel=stylesheet href=/congo/css/compiled/main.min.51037225bb3c65887773b052da1e38f105db8f3d9aa6a34ba3c5c40c88fb309724f8cc5ed2871adc7e55dacab9b36c60ce7aa7a61dff2cc638f8b435c898d5a8.css integrity="sha512-UQNyJbs8ZYh3c7BS2h448QXbjz2apqNLo8XEDIj7MJck+Mxe0oca3H5V2sq5s2xgznqnph3/LMY4+LQ1yJjVqA==">
<script>function loadPreferredAppearance(){localStorage.preferredAppearance==="dark"||!("preferredAppearance"in localStorage)&&window.matchMedia("(prefers-color-scheme: dark)").matches?document.documentElement.classList.add("dark"):document.documentElement.classList.remove("dark")}function setPreferredAppearance(a){a=="default"?localStorage.removeItem("preferredAppearance"):localStorage.preferredAppearance=a,loadPreferredAppearance()}loadPreferredAppearance(),window.matchMedia("(prefers-color-scheme: dark)").addListener(loadPreferredAppearance)</script>
<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>
@ -19,51 +18,60 @@
<meta property="og:type" content="article">
<meta property="og:url" content="https://jpanther.github.io/congo/samples/placeholder-text/"><meta property="article:section" content="samples">
<meta property="article:published_time" content="2019-03-09T00:00:00+00:00">
<meta property="article:modified_time" content="2022-01-24T00:00:00+00:00">
<meta property="article:modified_time" content="2022-01-24T00:00:00+00:00"><meta property="og:site_name" content="Congo">
<meta name=twitter:card content="summary">
<meta name=twitter:title content="Placeholder Text">
<meta name=twitter:description content="Lorem Ipsum Dolor Si Amet">
<script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","articleSection":"Content Samples","name":"Placeholder Text","headline":"Placeholder Text","description":"Lorem Ipsum Dolor Si Amet","inLanguage":"en-AU","author":{"@type":"Person","name":"Congo"},"creator":{"@type":"Person","name":"Congo"},"copyrightHolder":"Congo","copyrightYear":"2019","dateCreated":"2019-03-09T00:00:00\u002b00:00","datePublished":"2019-03-09T00:00:00\u002b00:00","dateModified":"2022-01-24T00:00:00\u002b00:00","url":"https:\/\/jpanther.github.io\/congo\/samples\/placeholder-text\/","keywords":["markdown","text","sample","latin"],"wordCount":"271"}</script>
<meta name=generator content="Hugo 0.92.0">
<script type=application/ld+json>[{"@context":"https://schema.org","@type":"Article","articleSection":"Content Samples","name":"Placeholder Text","headline":"Placeholder Text","description":"Lorem Ipsum Dolor Si Amet","abstract":"\u003cp\u003eLorem est tota propiore conpellat pectoribus de pectora summo.\u003c\/p\u003e","inLanguage":"en-au","url":"https:\/\/jpanther.github.io\/congo\/samples\/placeholder-text\/","author":{"@type":"Person","name":"Congo"},"copyrightYear":"2019","dateCreated":"2019-03-09T00:00:00\u002b00:00","datePublished":"2019-03-09T00:00:00\u002b00:00","dateModified":"2022-01-24T00:00:00\u002b00:00","keywords":["markdown","text","sample","latin"],"mainEntityOfPage":"true","wordCount":"271"}]</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"><header class="flex justify-between py-6 font-semibold sm:items-center sm:py-10 text-neutral-900 dark:text-neutral">
<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:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" rel=me href=/congo/>Congo</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=/congo/docs/ title=Documentation>Docs</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=/congo/samples/ title="Content Samples">Samples</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=/congo/users/ title=Users>Users</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=https://github.com/jpanther/congo title>GitHub</a>
<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 class=flex-grow>
<article class=max-w-prose>
<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:underline-neutral-300 dark:underline-neutral-600" href=/congo/>Welcome to Congo! :tada:</a><span class="px-1 text-primary-500">/</span>
<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:underline-neutral-300 dark:underline-neutral-600" href=/congo/samples/>Content Samples</a><span class="px-1 text-primary-500">/</span>
<a class="hover:underline hover:decoration-neutral-300 dark:underline-neutral-600" href=/congo/samples/>Content Samples</a><span class="px-1 text-primary-500">/</span>
</li>
<li class="inline hidden">
<a class="hover:underline hover:underline-neutral-300 dark:underline-neutral-600" href=/congo/samples/placeholder-text/>Placeholder Text</a><span class="px-1 text-primary-500">/</span>
<a class="hover:underline hover:decoration-neutral-300 dark:underline-neutral-600" href=/congo/samples/placeholder-text/>Placeholder Text</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">
@ -71,10 +79,9 @@ Placeholder Text
</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">
<time datetime="2019-03-09 00:00:00 +0000 UTC">9 March 2019</time><span class="px-2 text-primary-500">&#183;</span>Updated:&nbsp;
<time datetime="2022-01-24 00:00:00 +0000 UTC">24 January 2022</time><span class="px-2 text-primary-500">&#183;</span><span title="Reading time">2 mins</span>
<time datetime="2019-03-09 00:00:00 +0000 UTC">9 March 2019</time><span class="px-2 text-primary-500">&#183;</span><time datetime="2022-01-24 00:00:00 +0000 UTC">Updated: 24 January 2022</time><span class="px-2 text-primary-500">&#183;</span><span title="Reading time">2 mins</span>
<span class=pl-2><span class=flex>
<span class="ml-1 px-1 py-[1px] text-xs font-normal border rounded-md text-primary-700 dark:text-primary-400 border-primary-400 dark:border-primary-600">
<span class="ltr:ml-1 rtl:mr-1 px-1 py-[1px] text-xs font-normal border rounded-md text-primary-700 dark:text-primary-400 border-primary-400 dark:border-primary-600">
Draft
</span>
</span>
@ -82,7 +89,28 @@ Draft
</div>
</div>
</header>
<section class="prose dark:prose-light">
<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=#vagus-elidunt>Vagus elidunt</a>
<ul>
<li><a href=#mane-refeci-capiebant-unda-mulcebat>Mane refeci capiebant unda mulcebat</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</details>
</div>
</div>
<div class="min-w-0 min-h-0 max-w-prose">
<p>Lorem est tota propiore conpellat pectoribus de pectora summo.</p>
<p>Redit teque digerit hominumque toris verebor lumina non cervice subde tollit usus habet Arctonque, furores quas nec ferunt. Quoque montibus nunc caluere tempus inhospita parcite confusaque translucet patri vestro qui optatis lumine cognoscere flos nubis! Fronde ipsamque patulos Dryopen deorum.</p>
<ol>
@ -99,17 +127,18 @@ Draft
<li>Arcanaque montibus omnes</li>
<li>Quidem et</li>
</ol>
<h2 id=vagus-elidunt>Vagus elidunt <a class=heading-anchor href=#vagus-elidunt aria-label=Anchor>#</a></h2>
<p><svg class="canon" xmlns="http://www.w3.org/2000/svg" overflow="visible" viewBox="0 0 496 373" height="373" width="496"><g fill="none"><path stroke="#000" stroke-width=".75" d="M.599 372.348 495.263 1.206M.312.633l494.95 370.853M.312 372.633 247.643.92M248.502.92l246.76 370.566M330.828 123.869V1.134M330.396 1.134 165.104 124.515"/><path stroke="#ed1c24" stroke-width=".75" d="M275.73 41.616h166.224v249.05H275.73zm-221.252.0h166.225v249.052H54.478z"/><path stroke="#000" stroke-width=".75" d="M.479.375h495v372h-495zm247.5.5v372"/><ellipse cx="498.729" cy="177.625" rx=".75" ry="1.25"/><ellipse cx="247.229" cy="377.375" rx=".75" ry="1.25"/></g></svg></p>
<h2 id=vagus-elidunt class="relative group">Vagus elidunt <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=#vagus-elidunt aria-label=Anchor>#</a></span></h2>
<p><svg xmlns="http://www.w3.org/2000/svg" overflow="visible" viewBox="0 0 496 373" height="186" width="248"><g fill="none"><path stroke="#000" stroke-width="2" d="M.599 372.348 495.263 1.206M.312.633l494.95 370.853M.312 372.633 247.643.92M248.502.92l246.76 370.566M330.828 123.869V1.134M330.396 1.134 165.104 124.515"/><path stroke="#ed1c24" stroke-width="2" d="M275.73 41.616h166.224v249.05H275.73zm-221.252.0h166.225v249.052H54.478z"/><path stroke="#000" stroke-width="2" d="M.479.375h495v372h-495zm247.5.5v372"/><ellipse cx="498.729" cy="177.625" rx="2" ry="1.25"/><ellipse cx="247.229" cy="377.375" rx="2" ry="1.25"/></g></svg></p>
<p><a href=https://en.wikipedia.org/wiki/Canons_of_page_construction#Van_de_Graaf_canon>The Van de Graaf Canon</a></p>
<h3 id=mane-refeci-capiebant-unda-mulcebat>Mane refeci capiebant unda mulcebat <a class=heading-anchor href=#mane-refeci-capiebant-unda-mulcebat aria-label=Anchor>#</a></h3>
<h3 id=mane-refeci-capiebant-unda-mulcebat class="relative group">Mane refeci capiebant unda mulcebat <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=#mane-refeci-capiebant-unda-mulcebat aria-label=Anchor>#</a></span></h3>
<p>Victa caducifer, malo vulnere contra dicere aurato, ludit regale, voca! Retorsit colit est profanae esse virescere furit nec; iaculi matertera et visa est, viribus. Divesque creatis, tecta novat collumque vulnus est, parvas. <strong>Faces illo pepulere</strong> tempus adest. Tendit flamma, ab opes virum sustinet, sidus sequendo urbis.</p>
<p>Iubar proles corpore raptos vero auctor imperium; sed et huic: manus caeli Lelegas tu lux. Verbis obstitit intus oblectamina fixis linguisque ausus sperare Echionides cornuaque tenent clausit possit. Omnia putatur. Praeteritae refert ausus; ferebant e primus lora nutat, vici quae mea ipse. Et iter nil spectatae vulnus haerentia iuste et exercebat, sui et.</p>
<p>Eurytus Hector, materna ipsumque ut Politen, nec, nate, ignari, vernum cohaesit sequitur. Vel <strong>mitis temploque</strong> vocatus, inque alis, <em>oculos nomen</em> non silvis corpore coniunx ne displicet illa. Crescunt non unus, vidit visa quantum inmiti flumina mortis facto sic: undique a alios vincula sunt iactata abdita! Suspenderat ego fuit tendit: luna, ante urbem Propoetides <strong>parte</strong>.</p>
</div>
</section>
<footer class=pt-8>
<footer class="pt-8 max-w-prose">
<div class=flex>
<img class="w-24 h-24 !mt-0 !mb-0 mr-4 rounded-full" width=96 height=96 alt=Author src=/congo/img/author.jpg>
<img class="w-24 h-24 !mt-0 !mb-0 ltr:mr-4 rtl:ml-4 rounded-full" width=96 height=96 alt=Author src=/congo/img/author_hu052d24d60828c1cca42a6aefe45b8b44_54195_192x192_fill_q75_box_smart1.jpg>
<div class=place-self-center>
<div class="text-[0.6rem] leading-3 text-neutral-500 dark:text-neutral-400 uppercase">
Author
@ -140,47 +169,86 @@ Congo
</div>
</div>
</div>
<div class="pt-8 article-pagination">
<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 href=/congo/samples/rich-content/>
<span class="mr-3 article-pagination-direction">&larr;</span>
<a class="flex group" href=/congo/samples/mathematical-notation/>
<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="article-pagination-title mt-[0.1rem] leading-6">Rich Content</span>
<span class="mt-[0.1rem] leading-6 group-hover:underline group-hover:decoration-primary-500">Mathematical notation</span>
<span class="mt-[0.1rem] text-xs text-neutral-500 dark:text-neutral-400">
<time datetime="2019-03-10 00:00:00 +0000 UTC">10 March 2019</time>
<time datetime="2019-03-08 00:00:00 +0000 UTC">8 March 2019</time>
</span>
</span>
</a>
</span>
<span>
<a class="flex text-right" href=/congo/samples/mathematical-notation/>
<a class="flex text-right group" href=/congo/samples/rich-content/>
<span class="flex flex-col">
<span class="article-pagination-title mt-[0.1rem] leading-6">Mathematical notation</span>
<span class="mt-[0.1rem] leading-6 group-hover:underline group-hover:decoration-primary-500">Rich Content</span>
<span class="mt-[0.1rem] text-xs text-neutral-500 dark:text-neutral-400">
<time datetime="2019-03-08 00:00:00 +0000 UTC">8 March 2019</time>
<time datetime="2019-03-10 00:00:00 +0000 UTC">10 March 2019</time>
</span>
</span>
<span class="ml-3 article-pagination-direction">&rarr;</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>
</main><footer class=py-10>
<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">
&copy;
2022
Congo
© 2022 Congo contributors
</p>
<p class="text-xs text-neutral-400 dark:text-neutral-600">
Powered by <a class="hover:underline hover:underline-primary-400 hover:text-primary-500" href=https://gohugo.io/ target=_blank rel="noopener noreferrer">Hugo</a> & <a class="hover:underline hover:underline-primary-400 hover:text-primary-500" href=https://git.io/hugo-congo target=_blank rel="noopener noreferrer">Congo</a>
<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>

View File

@ -1,15 +1,14 @@
<!doctype html><html lang=en-au><head>
<!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 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>Rich Content &#183; Congo</title>
<meta name=title content="Rich Content &#183; Congo">
<meta name=description content="A brief description of Hugo Shortcodes">
<meta name=description content="A powerful, lightweight theme for Hugo built with Tailwind CSS.">
<link rel=canonical href=https://jpanther.github.io/congo/samples/rich-content/>
<link type=text/css rel=stylesheet href=/congo/css/schemes/congo.min.b48d6ba061dc77186a2524fb8aac5ac3823b2679a9299ca60325abbccc9c1764c884715f0ba24b4e2776cb3814df4af1f4c854b87207cd5d4c7a254da9b55751.css integrity="sha512-tI1roGHcdxhqJST7iqxaw4I7JnmpKZymAyWrvMycF2TIhHFfC6JLTid2yzgU30rx9MhUuHIHzV1MeiVNqbVXUQ==">
<link type=text/css rel=stylesheet href=/congo/css/compiled/main.min.51037225bb3c65887773b052da1e38f105db8f3d9aa6a34ba3c5c40c88fb309724f8cc5ed2871adc7e55dacab9b36c60ce7aa7a61dff2cc638f8b435c898d5a8.css integrity="sha512-UQNyJbs8ZYh3c7BS2h448QXbjz2apqNLo8XEDIj7MJck+Mxe0oca3H5V2sq5s2xgznqnph3/LMY4+LQ1yJjVqA==">
<script>function loadPreferredAppearance(){localStorage.preferredAppearance==="dark"||!("preferredAppearance"in localStorage)&&window.matchMedia("(prefers-color-scheme: dark)").matches?document.documentElement.classList.add("dark"):document.documentElement.classList.remove("dark")}function setPreferredAppearance(a){a=="default"?localStorage.removeItem("preferredAppearance"):localStorage.preferredAppearance=a,loadPreferredAppearance()}loadPreferredAppearance(),window.matchMedia("(prefers-color-scheme: dark)").addListener(loadPreferredAppearance)</script>
<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>
@ -19,51 +18,60 @@
<meta property="og:type" content="article">
<meta property="og:url" content="https://jpanther.github.io/congo/samples/rich-content/"><meta property="article:section" content="samples">
<meta property="article:published_time" content="2019-03-10T00:00:00+00:00">
<meta property="article:modified_time" content="2019-03-10T00:00:00+00:00">
<meta property="article:modified_time" content="2019-03-10T00:00:00+00:00"><meta property="og:site_name" content="Congo">
<meta name=twitter:card content="summary">
<meta name=twitter:title content="Rich Content">
<meta name=twitter:description content="A brief description of Hugo Shortcodes">
<script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","articleSection":"Content Samples","name":"Rich Content","headline":"Rich Content","description":"A brief description of Hugo Shortcodes","inLanguage":"en-AU","author":{"@type":"Person","name":"Congo"},"creator":{"@type":"Person","name":"Congo"},"copyrightHolder":"Congo","copyrightYear":"2019","dateCreated":"2019-03-10T00:00:00\u002b00:00","datePublished":"2019-03-10T00:00:00\u002b00:00","dateModified":"2019-03-10T00:00:00\u002b00:00","url":"https:\/\/jpanther.github.io\/congo\/samples\/rich-content\/","keywords":["shortcodes","privacy","sample","gist","twitter","youtube","vimeo"],"wordCount":"222"}</script>
<meta name=generator content="Hugo 0.92.0">
<script type=application/ld+json>[{"@context":"https://schema.org","@type":"Article","articleSection":"Content Samples","name":"Rich Content","headline":"Rich Content","description":"A brief description of Hugo Shortcodes","abstract":"This is an \u003cem\u003eexample\u003c\/em\u003e of a \u003cstrong\u003erich\u003c\/strong\u003e content summary.","inLanguage":"en-au","url":"https:\/\/jpanther.github.io\/congo\/samples\/rich-content\/","author":{"@type":"Person","name":"Congo"},"copyrightYear":"2019","dateCreated":"2019-03-10T00:00:00\u002b00:00","datePublished":"2019-03-10T00:00:00\u002b00:00","dateModified":"2019-03-10T00:00:00\u002b00:00","keywords":["shortcodes","privacy","sample","gist","twitter","youtube","vimeo"],"mainEntityOfPage":"true","wordCount":"222"}]</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"><header class="flex justify-between py-6 font-semibold sm:items-center sm:py-10 text-neutral-900 dark:text-neutral">
<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:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" rel=me href=/congo/>Congo</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=/congo/docs/ title=Documentation>Docs</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=/congo/samples/ title="Content Samples">Samples</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=/congo/users/ title=Users>Users</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=https://github.com/jpanther/congo title>GitHub</a>
<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 class=flex-grow>
<article class=max-w-prose>
<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:underline-neutral-300 dark:underline-neutral-600" href=/congo/>Welcome to Congo! :tada:</a><span class="px-1 text-primary-500">/</span>
<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:underline-neutral-300 dark:underline-neutral-600" href=/congo/samples/>Content Samples</a><span class="px-1 text-primary-500">/</span>
<a class="hover:underline hover:decoration-neutral-300 dark:underline-neutral-600" href=/congo/samples/>Content Samples</a><span class="px-1 text-primary-500">/</span>
</li>
<li class="inline hidden">
<a class="hover:underline hover:underline-neutral-300 dark:underline-neutral-600" href=/congo/samples/rich-content/>Rich Content</a><span class="px-1 text-primary-500">/</span>
<a class="hover:underline hover:decoration-neutral-300 dark:underline-neutral-600" href=/congo/samples/rich-content/>Rich Content</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">
@ -75,32 +83,53 @@ Rich Content
</div>
</div>
</header>
<section class="prose dark:prose-light">
<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=#youtube>YouTube</a></li>
<li><a href=#twitter>Twitter</a></li>
<li><a href=#gist>Gist</a></li>
<li><a href=#vimeo>Vimeo</a></li>
</ul>
</nav>
</div>
</details>
</div>
</div>
<div class="min-w-0 min-h-0 max-w-prose">
<p>Hugo ships with several <a href=https://gohugo.io/content-management/shortcodes/#use-hugos-built-in-shortcodes>built-in shortcodes</a> for rich content, along with a <a href=https://gohugo.io/about/hugo-and-gdpr/>privacy config</a> and a set of <em>simple shortcodes</em> that enable static and no-JS versions of various social media embeds.</p>
<h2 id=youtube>YouTube <a class=heading-anchor href=#youtube aria-label=Anchor>#</a></h2>
<h2 id=youtube class="relative group">YouTube <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=#youtube aria-label=Anchor>#</a></span></h2>
<p>Below is an example using the built-in <code>youtube</code> shortcode.</p>
<div style=position:relative;padding-bottom:56.25%;height:0;overflow:hidden>
<iframe src=https://www.youtube.com/embed/ZJthWmvUzzc style=position:absolute;top:0;left:0;width:100%;height:100%;border:0 allowfullscreen title="YouTube Video"></iframe>
</div>
<h2 id=twitter>Twitter <a class=heading-anchor href=#twitter aria-label=Anchor>#</a></h2>
<h2 id=twitter class="relative group">Twitter <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=#twitter aria-label=Anchor>#</a></span></h2>
<p>This example uses the <code>twitter_simple</code> shortcode to output a Tweet. It requires two named parameters <code>user</code> and <code>id</code>.</p>
<style type=text/css>.twitter-tweet{font:14px/1.45 '-apple-system',BlinkMacSystemFont,segoe ui,Roboto,Oxygen-Sans,Ubuntu,Cantarell,helvetica neue,sans-serif;border-left:4px solid #2b7bb9;padding-left:1.5em;color:#555}.twitter-tweet a{color:#2b7bb9;text-decoration:none}blockquote.twitter-tweet a:hover,blockquote.twitter-tweet a:focus{text-decoration:underline}</style>
<blockquote class=twitter-tweet><p lang=en dir=ltr>“In addition to being more logical, asymmetry has the advantage that its complete appearance is far more optically effective than symmetry.”<br>— Jan Tschichold <a href=https://t.co/gcv7SrhvJb>pic.twitter.com/gcv7SrhvJb</a></p>&mdash; Graphic Design History (@DesignReviewed) <a href="https://twitter.com/DesignReviewed/status/1085870671291310081?ref_src=twsrc%5Etfw">January 17, 2019</a></blockquote>
<p>Alternatively, the <code>tweet</code> shortcode can be used to embed a fully marked up Twitter card.</p>
<h2 id=gist>Gist <a class=heading-anchor href=#gist aria-label=Anchor>#</a></h2>
<h2 id=gist class="relative group">Gist <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=#gist aria-label=Anchor>#</a></span></h2>
<p>The <code>gist</code> shortcode can be used to embed a GitHub Gist. It requires two unnamed parameters: the username and ID of the Gist.</p>
<script type=application/javascript src=https://gist.github.com/jpanther/a873e1219ffeaa80a926bbe8255f348e.js></script>
<h2 id=vimeo>Vimeo <a class=heading-anchor href=#vimeo aria-label=Anchor>#</a></h2>
<h2 id=vimeo class="relative group">Vimeo <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=#vimeo aria-label=Anchor>#</a></span></h2>
<p>The <code>vimeo_simple</code> shortcode will embed a Vimeo video.</p>
<style>.__h_video{position:relative;padding-bottom:56.23%;height:0;overflow:hidden;width:100%;background:#000}.__h_video img{width:100%;height:auto;color:#000}.__h_video .play{height:72px;width:72px;left:50%;top:50%;margin-left:-36px;margin-top:-36px;position:absolute;cursor:pointer}</style>
<div class="s_video_simple __h_video">
<a href=https://vimeo.com/4.8912912e+07 rel=noopener target=_blank>
<img src=https://i.vimeocdn.com/video/337401969-979f0cc9f55fdf305fb8984e90d92639ec9d7ecc4c9dfbc6536e28edb43784ce-d_640 srcset="https://i.vimeocdn.com/video/337401969-979f0cc9f55fdf305fb8984e90d92639ec9d7ecc4c9dfbc6536e28edb43784ce-d_640 1x, https://i.vimeocdn.com/video/337401969-979f0cc9f55fdf305fb8984e90d92639ec9d7ecc4c9dfbc6536e28edb43784ce-d_640 2x" alt="Sing Jan Swing - Kinetic Type">
<div class=play><svg version="1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 61 61"><circle cx="30.5" cy="30.5" r="30.5" opacity=".8" fill="#000"/><path d="M25.3 19.2c-2.1-1.2-3.8-.2-3.8 2.2v18.1c0 2.4 1.7 3.4 3.8 2.2l16.6-9.1c2.1-1.2 2.1-3.2.0-4.4l-16.6-9z" fill="#fff"/></svg></div></a></div>
</div>
</section>
<footer class=pt-8>
<footer class="pt-8 max-w-prose">
<div class=flex>
<img class="w-24 h-24 !mt-0 !mb-0 mr-4 rounded-full" width=96 height=96 alt=Author src=/congo/img/author.jpg>
<img class="w-24 h-24 !mt-0 !mb-0 ltr:mr-4 rtl:ml-4 rounded-full" width=96 height=96 alt=Author src=/congo/img/author_hu052d24d60828c1cca42a6aefe45b8b44_54195_192x192_fill_q75_box_smart1.jpg>
<div class=place-self-center>
<div class="text-[0.6rem] leading-3 text-neutral-500 dark:text-neutral-400 uppercase">
Author
@ -131,47 +160,86 @@ Congo
</div>
</div>
</div>
<div class="pt-8 article-pagination">
<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 href=/congo/samples/markdown/>
<span class="mr-3 article-pagination-direction">&larr;</span>
<a class="flex group" href=/congo/samples/placeholder-text/>
<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="article-pagination-title mt-[0.1rem] leading-6">Markdown</span>
<span class="mt-[0.1rem] leading-6 group-hover:underline group-hover:decoration-primary-500">Placeholder Text</span>
<span class="mt-[0.1rem] text-xs text-neutral-500 dark:text-neutral-400">
<time datetime="2019-03-11 00:00:00 +0000 UTC">11 March 2019</time>
<time datetime="2019-03-09 00:00:00 +0000 UTC">9 March 2019</time>
</span>
</span>
</a>
</span>
<span>
<a class="flex text-right" href=/congo/samples/placeholder-text/>
<a class="flex text-right group" href=/congo/samples/markdown/>
<span class="flex flex-col">
<span class="article-pagination-title mt-[0.1rem] leading-6">Placeholder Text</span>
<span class="mt-[0.1rem] leading-6 group-hover:underline group-hover:decoration-primary-500">Markdown</span>
<span class="mt-[0.1rem] text-xs text-neutral-500 dark:text-neutral-400">
<time datetime="2019-03-09 00:00:00 +0000 UTC">9 March 2019</time>
<time datetime="2019-03-11 00:00:00 +0000 UTC">11 March 2019</time>
</span>
</span>
<span class="ml-3 article-pagination-direction">&rarr;</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>
</main><footer class=py-10>
<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">
&copy;
2022
Congo
© 2022 Congo contributors
</p>
<p class="text-xs text-neutral-400 dark:text-neutral-600">
Powered by <a class="hover:underline hover:underline-primary-400 hover:text-primary-500" href=https://gohugo.io/ target=_blank rel="noopener noreferrer">Hugo</a> & <a class="hover:underline hover:underline-primary-400 hover:text-primary-500" href=https://git.io/hugo-congo target=_blank rel="noopener noreferrer">Congo</a>
<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>

View File

@ -1 +1 @@
{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
{"name":"Congo","short_name":"Congo","icons":[{"src": "/android-chrome-192x192.png","sizes": "192x192","type": "image/png","purpose": "any maskable"},{"src": "/android-chrome-512x512.png","sizes": "512x512","type": "image/png","purpose": "any maskable"}],"theme_color":"#ffffff","background_color":"#7c3aed","display":"standalone"}

View File

@ -1 +1 @@
<?xml version="1.0" encoding="utf-8" standalone="yes"?><urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml"><url><loc>https://jpanther.github.io/congo/docs/</loc><lastmod>2020-08-16T00:00:00+00:00</lastmod></url><url><loc>https://jpanther.github.io/congo/docs/installation/</loc><lastmod>2020-08-16T00:00:00+00:00</lastmod></url><url><loc>https://jpanther.github.io/congo/</loc><lastmod>2022-01-24T00:00:00+00:00</lastmod></url><url><loc>https://jpanther.github.io/congo/docs/getting-started/</loc><lastmod>2020-08-15T00:00:00+00:00</lastmod></url><url><loc>https://jpanther.github.io/congo/docs/configuration/</loc><lastmod>2020-08-14T00:00:00+00:00</lastmod></url><url><loc>https://jpanther.github.io/congo/samples/</loc><lastmod>2022-01-24T00:00:00+00:00</lastmod></url><url><loc>https://jpanther.github.io/congo/samples/icons/</loc><lastmod>2020-08-14T00:00:00+00:00</lastmod></url><url><loc>https://jpanther.github.io/congo/users/</loc><lastmod>2020-08-14T00:00:00+00:00</lastmod></url><url><loc>https://jpanther.github.io/congo/docs/homepage-layout/</loc><lastmod>2020-08-13T00:00:00+00:00</lastmod></url><url><loc>https://jpanther.github.io/congo/docs/front-matter/</loc><lastmod>2020-08-12T00:00:00+00:00</lastmod></url><url><loc>https://jpanther.github.io/congo/docs/shortcodes/</loc><lastmod>2020-08-11T00:00:00+00:00</lastmod></url><url><loc>https://jpanther.github.io/congo/docs/partials/</loc><lastmod>2020-08-10T00:00:00+00:00</lastmod></url><url><loc>https://jpanther.github.io/congo/docs/advanced-customisation/</loc><lastmod>2020-08-09T00:00:00+00:00</lastmod></url><url><loc>https://jpanther.github.io/congo/docs/hosting-deployment/</loc><lastmod>2020-08-08T00:00:00+00:00</lastmod></url><url><loc>https://jpanther.github.io/congo/samples/markdown/</loc><lastmod>2019-03-11T00:00:00+00:00</lastmod></url><url><loc>https://jpanther.github.io/congo/samples/rich-content/</loc><lastmod>2019-03-10T00:00:00+00:00</lastmod></url><url><loc>https://jpanther.github.io/congo/samples/mathematical-notation/</loc><lastmod>2019-03-08T00:00:00+00:00</lastmod></url><url><loc>https://jpanther.github.io/congo/samples/charts/</loc><lastmod>2019-03-06T00:00:00+00:00</lastmod></url><url><loc>https://jpanther.github.io/congo/samples/diagrams-flowcharts/</loc><lastmod>2019-03-06T00:00:00+00:00</lastmod></url><url><loc>https://jpanther.github.io/congo/samples/emoji/</loc><lastmod>2019-03-05T00:00:00+00:00</lastmod></url></urlset>
<?xml version="1.0" encoding="utf-8" standalone="yes"?><urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml"><url><loc>https://jpanther.github.io/congo/docs/</loc><lastmod>2022-01-20T00:00:00+00:00</lastmod></url><url><loc>https://jpanther.github.io/congo/docs/version-2/upgrade/</loc><lastmod>2022-01-20T00:00:00+00:00</lastmod></url><url><loc>https://jpanther.github.io/congo/</loc><lastmod>2022-01-24T00:00:00+00:00</lastmod></url><url><loc>https://jpanther.github.io/congo/docs/version-2/</loc><lastmod>2022-01-19T00:00:00+00:00</lastmod></url><url><loc>https://jpanther.github.io/congo/docs/installation/</loc><lastmod>2020-08-16T00:00:00+00:00</lastmod></url><url><loc>https://jpanther.github.io/congo/docs/getting-started/</loc><lastmod>2020-08-15T00:00:00+00:00</lastmod></url><url><loc>https://jpanther.github.io/congo/docs/configuration/</loc><lastmod>2020-08-14T00:00:00+00:00</lastmod></url><url><loc>https://jpanther.github.io/congo/samples/</loc><lastmod>2022-01-24T00:00:00+00:00</lastmod></url><url><loc>https://jpanther.github.io/congo/samples/icons/</loc><lastmod>2020-08-14T00:00:00+00:00</lastmod></url><url><loc>https://jpanther.github.io/congo/users/</loc><lastmod>2020-08-14T00:00:00+00:00</lastmod></url><url><loc>https://jpanther.github.io/congo/docs/homepage-layout/</loc><lastmod>2020-08-13T00:00:00+00:00</lastmod></url><url><loc>https://jpanther.github.io/congo/docs/front-matter/</loc><lastmod>2020-08-12T00:00:00+00:00</lastmod></url><url><loc>https://jpanther.github.io/congo/docs/shortcodes/</loc><lastmod>2020-08-11T00:00:00+00:00</lastmod></url><url><loc>https://jpanther.github.io/congo/docs/partials/</loc><lastmod>2020-08-10T00:00:00+00:00</lastmod></url><url><loc>https://jpanther.github.io/congo/docs/content-examples/</loc><lastmod>2020-08-09T00:00:00+00:00</lastmod></url><url><loc>https://jpanther.github.io/congo/docs/advanced-customisation/</loc><lastmod>2020-08-08T00:00:00+00:00</lastmod></url><url><loc>https://jpanther.github.io/congo/docs/hosting-deployment/</loc><lastmod>2020-08-07T00:00:00+00:00</lastmod></url><url><loc>https://jpanther.github.io/congo/samples/markdown/</loc><lastmod>2019-03-11T00:00:00+00:00</lastmod></url><url><loc>https://jpanther.github.io/congo/samples/rich-content/</loc><lastmod>2019-03-10T00:00:00+00:00</lastmod></url><url><loc>https://jpanther.github.io/congo/samples/mathematical-notation/</loc><lastmod>2019-03-08T00:00:00+00:00</lastmod></url><url><loc>https://jpanther.github.io/congo/samples/charts/</loc><lastmod>2019-03-06T00:00:00+00:00</lastmod></url><url><loc>https://jpanther.github.io/congo/samples/diagrams-flowcharts/</loc><lastmod>2019-03-06T00:00:00+00:00</lastmod></url><url><loc>https://jpanther.github.io/congo/samples/emoji/</loc><lastmod>2019-03-05T00:00:00+00:00</lastmod></url></urlset>

BIN
squid.jpg 100644

Binary file not shown.

After

Width:  |  Height:  |  Size: 222 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 48 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 74 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

View File

@ -1,99 +1,142 @@
<!doctype html><html lang=en-au><head>
<!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 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>advanced &#183; Congo</title>
<meta name=title content="advanced &#183; Congo">
<meta name=description content>
<meta name=description content="A powerful, lightweight theme for Hugo built with Tailwind CSS.">
<link rel=canonical href=https://jpanther.github.io/congo/tags/advanced/>
<link rel=alternate type=application/rss+xml href=/congo/tags/advanced/index.xml title=Congo>
<link type=text/css rel=stylesheet href=/congo/css/schemes/congo.min.b48d6ba061dc77186a2524fb8aac5ac3823b2679a9299ca60325abbccc9c1764c884715f0ba24b4e2776cb3814df4af1f4c854b87207cd5d4c7a254da9b55751.css integrity="sha512-tI1roGHcdxhqJST7iqxaw4I7JnmpKZymAyWrvMycF2TIhHFfC6JLTid2yzgU30rx9MhUuHIHzV1MeiVNqbVXUQ==">
<link type=text/css rel=stylesheet href=/congo/css/compiled/main.min.51037225bb3c65887773b052da1e38f105db8f3d9aa6a34ba3c5c40c88fb309724f8cc5ed2871adc7e55dacab9b36c60ce7aa7a61dff2cc638f8b435c898d5a8.css integrity="sha512-UQNyJbs8ZYh3c7BS2h448QXbjz2apqNLo8XEDIj7MJck+Mxe0oca3H5V2sq5s2xgznqnph3/LMY4+LQ1yJjVqA==">
<script>function loadPreferredAppearance(){localStorage.preferredAppearance==="dark"||!("preferredAppearance"in localStorage)&&window.matchMedia("(prefers-color-scheme: dark)").matches?document.documentElement.classList.add("dark"):document.documentElement.classList.remove("dark")}function setPreferredAppearance(a){a=="default"?localStorage.removeItem("preferredAppearance"):localStorage.preferredAppearance=a,loadPreferredAppearance()}loadPreferredAppearance(),window.matchMedia("(prefers-color-scheme: dark)").addListener(loadPreferredAppearance)</script>
<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="advanced">
<meta property="og:description" content>
<meta property="og:description" content="A powerful, lightweight theme for Hugo built with Tailwind CSS.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://jpanther.github.io/congo/tags/advanced/">
<meta property="og:url" content="https://jpanther.github.io/congo/tags/advanced/"><meta property="og:site_name" content="Congo">
<meta name=twitter:card content="summary">
<meta name=twitter:title content="advanced">
<meta name=twitter:description content>
<meta name=generator content="Hugo 0.92.0">
<meta name=twitter:description content="A powerful, lightweight theme for Hugo built with Tailwind CSS.">
<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"><header class="flex justify-between py-6 font-semibold sm:items-center sm:py-10 text-neutral-900 dark:text-neutral">
<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:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" rel=me href=/congo/>Congo</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=/congo/docs/ title=Documentation>Docs</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=/congo/samples/ title="Content Samples">Samples</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=/congo/users/ title=Users>Users</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=https://github.com/jpanther/congo title>GitHub</a>
<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 class=flex-grow>
<main id=main-content class=relative>
<header>
<ol class="text-sm text-neutral-500 dark:text-neutral-400">
<li class="inline hidden">
<a class="hover:underline hover:underline-neutral-300 dark:underline-neutral-600" href=/congo/>Welcome to Congo! :tada:</a><span class="px-1 text-primary-500">/</span>
<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:underline-neutral-300 dark:underline-neutral-600" href=/congo/tags/>Tags</a><span class="px-1 text-primary-500">/</span>
<a class="hover:underline hover:decoration-neutral-300 dark:underline-neutral-600" href=/congo/tags/>Tags</a><span class="px-1 text-primary-500">/</span>
</li>
<li class="inline hidden">
<a class="hover:underline hover:underline-neutral-300 dark:underline-neutral-600" href=/congo/tags/advanced/>advanced</a><span class="px-1 text-primary-500">/</span>
<a class="hover:underline hover:decoration-neutral-300 dark:underline-neutral-600" href=/congo/tags/advanced/>advanced</a><span class="px-1 text-primary-500">/</span>
</li>
</ol>
<section class="prose dark:prose-light">
<h1 class="mb-3 text-4xl font-extrabold text-neutral-800">advanced</h1>
<section></section>
</section>
<h1 class="mt-0 text-4xl font-extrabold text-neutral-900 dark:text-neutral">advanced</h1>
</header>
<section class="flex flex-col max-w-full mt-0 prose lg:flex-row dark:prose-invert">
<div class="min-w-0 min-h-0 max-w-prose">
<p>This is the advanced tag. Just like other listing pages in Congo, you can add custom content to individual taxonomy terms and it will be displayed at the top of the term listing. 🚀</p>
<p>You can also use these content pages to define Hugo metadata like titles and descriptions that will be used for SEO and other purposes.</p>
</div>
</section>
<section>
<h2 class="mt-12 text-2xl font-bold first:mt-8">2020</h2>
<hr class="border-dotted border-neutral-400 w-36">
<article>
<h3 class="flex items-center mt-6 text-xl font-semibold">
<a class="hover:underline hover:underline-primary-500 hover:underline-offset-small text-neutral-800 dark:text-neutral" href=/congo/docs/advanced-customisation/>Advanced Customisation</a>
<a class="hover:underline hover:decoration-primary-500 hover:underline-offset-2 text-neutral-800 dark:text-neutral" href=/congo/docs/advanced-customisation/>Advanced Customisation</a>
</h3>
<div class="text-sm text-neutral-500 dark:text-neutral-400">
<div class="flex flex-row flex-wrap items-center">
<span title="Reading time">5 mins</span>
<span title="Reading time">8 mins</span>
</div>
</div>
</article>
</section>
</main><footer class=py-10>
</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">
&copy;
2022
Congo
© 2022 Congo contributors
</p>
<p class="text-xs text-neutral-400 dark:text-neutral-600">
Powered by <a class="hover:underline hover:underline-primary-400 hover:text-primary-500" href=https://gohugo.io/ target=_blank rel="noopener noreferrer">Hugo</a> & <a class="hover:underline hover:underline-primary-400 hover:text-primary-500" href=https://git.io/hugo-congo target=_blank rel="noopener noreferrer">Congo</a>
<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>

View File

@ -1 +1 @@
<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>advanced on Congo</title><link>https://jpanther.github.io/congo/tags/advanced/</link><description>Recent content in advanced on Congo</description><generator>Hugo -- gohugo.io</generator><language>en-AU</language><lastBuildDate>Sun, 09 Aug 2020 00:00:00 +0000</lastBuildDate><atom:link href="https://jpanther.github.io/congo/tags/advanced/index.xml" rel="self" type="application/rss+xml"/><item><title>Advanced Customisation</title><link>https://jpanther.github.io/congo/docs/advanced-customisation/</link><pubDate>Sun, 09 Aug 2020 00:00:00 +0000</pubDate><guid>https://jpanther.github.io/congo/docs/advanced-customisation/</guid><description>There are many ways you can make advanced changes to Congo.</description></item></channel></rss>
<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>advanced on Congo</title><link>https://jpanther.github.io/congo/tags/advanced/</link><description>Recent content in advanced on Congo</description><generator>Hugo -- gohugo.io</generator><language>en-au</language><copyright>&amp;copy; 2022 Congo contributors</copyright><lastBuildDate>Sat, 08 Aug 2020 00:00:00 +0000</lastBuildDate><atom:link href="https://jpanther.github.io/congo/tags/advanced/index.xml" rel="self" type="application/rss+xml"/><item><title>Advanced Customisation</title><link>https://jpanther.github.io/congo/docs/advanced-customisation/</link><pubDate>Sat, 08 Aug 2020 00:00:00 +0000</pubDate><guid>https://jpanther.github.io/congo/docs/advanced-customisation/</guid><description>There are many ways you can make advanced changes to Congo.</description></item></channel></rss>

View File

@ -1,79 +1,84 @@
<!doctype html><html lang=en-au><head>
<!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 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>analytics &#183; Congo</title>
<meta name=title content="analytics &#183; Congo">
<meta name=description content>
<meta name=description content="A powerful, lightweight theme for Hugo built with Tailwind CSS.">
<link rel=canonical href=https://jpanther.github.io/congo/tags/analytics/>
<link rel=alternate type=application/rss+xml href=/congo/tags/analytics/index.xml title=Congo>
<link type=text/css rel=stylesheet href=/congo/css/schemes/congo.min.b48d6ba061dc77186a2524fb8aac5ac3823b2679a9299ca60325abbccc9c1764c884715f0ba24b4e2776cb3814df4af1f4c854b87207cd5d4c7a254da9b55751.css integrity="sha512-tI1roGHcdxhqJST7iqxaw4I7JnmpKZymAyWrvMycF2TIhHFfC6JLTid2yzgU30rx9MhUuHIHzV1MeiVNqbVXUQ==">
<link type=text/css rel=stylesheet href=/congo/css/compiled/main.min.51037225bb3c65887773b052da1e38f105db8f3d9aa6a34ba3c5c40c88fb309724f8cc5ed2871adc7e55dacab9b36c60ce7aa7a61dff2cc638f8b435c898d5a8.css integrity="sha512-UQNyJbs8ZYh3c7BS2h448QXbjz2apqNLo8XEDIj7MJck+Mxe0oca3H5V2sq5s2xgznqnph3/LMY4+LQ1yJjVqA==">
<script>function loadPreferredAppearance(){localStorage.preferredAppearance==="dark"||!("preferredAppearance"in localStorage)&&window.matchMedia("(prefers-color-scheme: dark)").matches?document.documentElement.classList.add("dark"):document.documentElement.classList.remove("dark")}function setPreferredAppearance(a){a=="default"?localStorage.removeItem("preferredAppearance"):localStorage.preferredAppearance=a,loadPreferredAppearance()}loadPreferredAppearance(),window.matchMedia("(prefers-color-scheme: dark)").addListener(loadPreferredAppearance)</script>
<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="analytics">
<meta property="og:description" content>
<meta property="og:description" content="A powerful, lightweight theme for Hugo built with Tailwind CSS.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://jpanther.github.io/congo/tags/analytics/">
<meta property="og:url" content="https://jpanther.github.io/congo/tags/analytics/"><meta property="og:site_name" content="Congo">
<meta name=twitter:card content="summary">
<meta name=twitter:title content="analytics">
<meta name=twitter:description content>
<meta name=generator content="Hugo 0.92.0">
<meta name=twitter:description content="A powerful, lightweight theme for Hugo built with Tailwind CSS.">
<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"><header class="flex justify-between py-6 font-semibold sm:items-center sm:py-10 text-neutral-900 dark:text-neutral">
<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:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" rel=me href=/congo/>Congo</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=/congo/docs/ title=Documentation>Docs</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=/congo/samples/ title="Content Samples">Samples</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=/congo/users/ title=Users>Users</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=https://github.com/jpanther/congo title>GitHub</a>
<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 class=flex-grow>
<main id=main-content class=relative>
<header>
<ol class="text-sm text-neutral-500 dark:text-neutral-400">
<li class="inline hidden">
<a class="hover:underline hover:underline-neutral-300 dark:underline-neutral-600" href=/congo/>Welcome to Congo! :tada:</a><span class="px-1 text-primary-500">/</span>
<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:underline-neutral-300 dark:underline-neutral-600" href=/congo/tags/>Tags</a><span class="px-1 text-primary-500">/</span>
<a class="hover:underline hover:decoration-neutral-300 dark:underline-neutral-600" href=/congo/tags/>Tags</a><span class="px-1 text-primary-500">/</span>
</li>
<li class="inline hidden">
<a class="hover:underline hover:underline-neutral-300 dark:underline-neutral-600" href=/congo/tags/analytics/>analytics</a><span class="px-1 text-primary-500">/</span>
<a class="hover:underline hover:decoration-neutral-300 dark:underline-neutral-600" href=/congo/tags/analytics/>analytics</a><span class="px-1 text-primary-500">/</span>
</li>
</ol>
<section class="prose dark:prose-light">
<h1 class="mb-3 text-4xl font-extrabold text-neutral-800">analytics</h1>
<section></section>
</section>
<h1 class="mt-0 text-4xl font-extrabold text-neutral-900 dark:text-neutral">analytics</h1>
</header>
<section>
<h2 class="mt-12 text-2xl font-bold first:mt-8">2020</h2>
<hr class="border-dotted border-neutral-400 w-36">
<article>
<h3 class="flex items-center mt-6 text-xl font-semibold">
<a class="hover:underline hover:underline-primary-500 hover:underline-offset-small text-neutral-800 dark:text-neutral" href=/congo/docs/partials/>Partials</a>
<a class="hover:underline hover:decoration-primary-500 hover:underline-offset-2 text-neutral-800 dark:text-neutral" href=/congo/docs/partials/>Partials</a>
</h3>
<div class="text-sm text-neutral-500 dark:text-neutral-400">
<div class="flex flex-row flex-wrap items-center">
@ -82,18 +87,50 @@
</div>
</article>
</section>
</main><footer class=py-10>
</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">
&copy;
2022
Congo
© 2022 Congo contributors
</p>
<p class="text-xs text-neutral-400 dark:text-neutral-600">
Powered by <a class="hover:underline hover:underline-primary-400 hover:text-primary-500" href=https://gohugo.io/ target=_blank rel="noopener noreferrer">Hugo</a> & <a class="hover:underline hover:underline-primary-400 hover:text-primary-500" href=https://git.io/hugo-congo target=_blank rel="noopener noreferrer">Congo</a>
<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>

View File

@ -1 +1 @@
<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>analytics on Congo</title><link>https://jpanther.github.io/congo/tags/analytics/</link><description>Recent content in analytics on Congo</description><generator>Hugo -- gohugo.io</generator><language>en-AU</language><lastBuildDate>Mon, 10 Aug 2020 00:00:00 +0000</lastBuildDate><atom:link href="https://jpanther.github.io/congo/tags/analytics/index.xml" rel="self" type="application/rss+xml"/><item><title>Partials</title><link>https://jpanther.github.io/congo/docs/partials/</link><pubDate>Mon, 10 Aug 2020 00:00:00 +0000</pubDate><guid>https://jpanther.github.io/congo/docs/partials/</guid><description>Analytics # Congo provides built-in support for Fathom Analytics and Google Analytics.</description></item></channel></rss>
<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>analytics on Congo</title><link>https://jpanther.github.io/congo/tags/analytics/</link><description>Recent content in analytics on Congo</description><generator>Hugo -- gohugo.io</generator><language>en-au</language><copyright>&amp;copy; 2022 Congo contributors</copyright><lastBuildDate>Mon, 10 Aug 2020 00:00:00 +0000</lastBuildDate><atom:link href="https://jpanther.github.io/congo/tags/analytics/index.xml" rel="self" type="application/rss+xml"/><item><title>Partials</title><link>https://jpanther.github.io/congo/docs/partials/</link><pubDate>Mon, 10 Aug 2020 00:00:00 +0000</pubDate><guid>https://jpanther.github.io/congo/docs/partials/</guid><description>Analytics # Congo provides built-in support for Fathom Analytics and Google Analytics.</description></item></channel></rss>

View File

@ -1,102 +1,139 @@
<!doctype html><html lang=en-au><head>
<!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 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>chart &#183; Congo</title>
<meta name=title content="chart &#183; Congo">
<meta name=description content>
<meta name=description content="A powerful, lightweight theme for Hugo built with Tailwind CSS.">
<link rel=canonical href=https://jpanther.github.io/congo/tags/chart/>
<link rel=alternate type=application/rss+xml href=/congo/tags/chart/index.xml title=Congo>
<link type=text/css rel=stylesheet href=/congo/css/schemes/congo.min.b48d6ba061dc77186a2524fb8aac5ac3823b2679a9299ca60325abbccc9c1764c884715f0ba24b4e2776cb3814df4af1f4c854b87207cd5d4c7a254da9b55751.css integrity="sha512-tI1roGHcdxhqJST7iqxaw4I7JnmpKZymAyWrvMycF2TIhHFfC6JLTid2yzgU30rx9MhUuHIHzV1MeiVNqbVXUQ==">
<link type=text/css rel=stylesheet href=/congo/css/compiled/main.min.51037225bb3c65887773b052da1e38f105db8f3d9aa6a34ba3c5c40c88fb309724f8cc5ed2871adc7e55dacab9b36c60ce7aa7a61dff2cc638f8b435c898d5a8.css integrity="sha512-UQNyJbs8ZYh3c7BS2h448QXbjz2apqNLo8XEDIj7MJck+Mxe0oca3H5V2sq5s2xgznqnph3/LMY4+LQ1yJjVqA==">
<script>function loadPreferredAppearance(){localStorage.preferredAppearance==="dark"||!("preferredAppearance"in localStorage)&&window.matchMedia("(prefers-color-scheme: dark)").matches?document.documentElement.classList.add("dark"):document.documentElement.classList.remove("dark")}function setPreferredAppearance(a){a=="default"?localStorage.removeItem("preferredAppearance"):localStorage.preferredAppearance=a,loadPreferredAppearance()}loadPreferredAppearance(),window.matchMedia("(prefers-color-scheme: dark)").addListener(loadPreferredAppearance)</script>
<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="chart">
<meta property="og:description" content>
<meta property="og:description" content="A powerful, lightweight theme for Hugo built with Tailwind CSS.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://jpanther.github.io/congo/tags/chart/">
<meta property="og:url" content="https://jpanther.github.io/congo/tags/chart/"><meta property="og:site_name" content="Congo">
<meta name=twitter:card content="summary">
<meta name=twitter:title content="chart">
<meta name=twitter:description content>
<meta name=generator content="Hugo 0.92.0">
<meta name=twitter:description content="A powerful, lightweight theme for Hugo built with Tailwind CSS.">
<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"><header class="flex justify-between py-6 font-semibold sm:items-center sm:py-10 text-neutral-900 dark:text-neutral">
<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:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" rel=me href=/congo/>Congo</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=/congo/docs/ title=Documentation>Docs</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=/congo/samples/ title="Content Samples">Samples</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=/congo/users/ title=Users>Users</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=https://github.com/jpanther/congo title>GitHub</a>
<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 class=flex-grow>
<main id=main-content class=relative>
<header>
<ol class="text-sm text-neutral-500 dark:text-neutral-400">
<li class="inline hidden">
<a class="hover:underline hover:underline-neutral-300 dark:underline-neutral-600" href=/congo/>Welcome to Congo! :tada:</a><span class="px-1 text-primary-500">/</span>
<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:underline-neutral-300 dark:underline-neutral-600" href=/congo/tags/>Tags</a><span class="px-1 text-primary-500">/</span>
<a class="hover:underline hover:decoration-neutral-300 dark:underline-neutral-600" href=/congo/tags/>Tags</a><span class="px-1 text-primary-500">/</span>
</li>
<li class="inline hidden">
<a class="hover:underline hover:underline-neutral-300 dark:underline-neutral-600" href=/congo/tags/chart/>chart</a><span class="px-1 text-primary-500">/</span>
<a class="hover:underline hover:decoration-neutral-300 dark:underline-neutral-600" href=/congo/tags/chart/>chart</a><span class="px-1 text-primary-500">/</span>
</li>
</ol>
<section class="prose dark:prose-light">
<h1 class="mb-3 text-4xl font-extrabold text-neutral-800">chart</h1>
<section></section>
</section>
<h1 class="mt-0 text-4xl font-extrabold text-neutral-900 dark:text-neutral">chart</h1>
</header>
<section>
<h2 class="mt-12 text-2xl font-bold first:mt-8">2019</h2>
<hr class="border-dotted border-neutral-400 w-36">
<article>
<h3 class="flex items-center mt-6 text-xl font-semibold">
<a class="hover:underline hover:underline-primary-500 hover:underline-offset-small text-neutral-800 dark:text-neutral" href=/congo/samples/charts/>Charts</a>
<a class="hover:underline hover:decoration-primary-500 hover:underline-offset-2 text-neutral-800 dark:text-neutral" href=/congo/samples/charts/>Charts</a>
</h3>
<div class="text-sm text-neutral-500 dark:text-neutral-400">
<div class="flex flex-row flex-wrap items-center">
<time datetime="2019-03-06 00:00:00 +0000 UTC">6 March 2019</time><span class="px-2 text-primary-500">&#183;</span><span title="Reading time">2 mins</span>
</div>
</div>
<div class="py-1 prose dark:prose-light">
<div class="py-1 prose dark:prose-invert">
Congo includes Chart.js for powerful charts and data visualisations.
</div>
</article>
</section>
</main><footer class=py-10>
</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">
&copy;
2022
Congo
© 2022 Congo contributors
</p>
<p class="text-xs text-neutral-400 dark:text-neutral-600">
Powered by <a class="hover:underline hover:underline-primary-400 hover:text-primary-500" href=https://gohugo.io/ target=_blank rel="noopener noreferrer">Hugo</a> & <a class="hover:underline hover:underline-primary-400 hover:text-primary-500" href=https://git.io/hugo-congo target=_blank rel="noopener noreferrer">Congo</a>
<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>

View File

@ -1 +1 @@
<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>chart on Congo</title><link>https://jpanther.github.io/congo/tags/chart/</link><description>Recent content in chart on Congo</description><generator>Hugo -- gohugo.io</generator><language>en-AU</language><lastBuildDate>Wed, 06 Mar 2019 00:00:00 +0000</lastBuildDate><atom:link href="https://jpanther.github.io/congo/tags/chart/index.xml" rel="self" type="application/rss+xml"/><item><title>Charts</title><link>https://jpanther.github.io/congo/samples/charts/</link><pubDate>Wed, 06 Mar 2019 00:00:00 +0000</pubDate><guid>https://jpanther.github.io/congo/samples/charts/</guid><description>Congo includes Chart.js for powerful charts and data visualisations.</description></item></channel></rss>
<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>chart on Congo</title><link>https://jpanther.github.io/congo/tags/chart/</link><description>Recent content in chart on Congo</description><generator>Hugo -- gohugo.io</generator><language>en-au</language><copyright>&amp;copy; 2022 Congo contributors</copyright><lastBuildDate>Wed, 06 Mar 2019 00:00:00 +0000</lastBuildDate><atom:link href="https://jpanther.github.io/congo/tags/chart/index.xml" rel="self" type="application/rss+xml"/><item><title>Charts</title><link>https://jpanther.github.io/congo/samples/charts/</link><pubDate>Wed, 06 Mar 2019 00:00:00 +0000</pubDate><guid>https://jpanther.github.io/congo/samples/charts/</guid><description>Congo includes Chart.js for powerful charts and data visualisations.</description></item></channel></rss>

View File

@ -1,79 +1,84 @@
<!doctype html><html lang=en-au><head>
<!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 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>comments &#183; Congo</title>
<meta name=title content="comments &#183; Congo">
<meta name=description content>
<meta name=description content="A powerful, lightweight theme for Hugo built with Tailwind CSS.">
<link rel=canonical href=https://jpanther.github.io/congo/tags/comments/>
<link rel=alternate type=application/rss+xml href=/congo/tags/comments/index.xml title=Congo>
<link type=text/css rel=stylesheet href=/congo/css/schemes/congo.min.b48d6ba061dc77186a2524fb8aac5ac3823b2679a9299ca60325abbccc9c1764c884715f0ba24b4e2776cb3814df4af1f4c854b87207cd5d4c7a254da9b55751.css integrity="sha512-tI1roGHcdxhqJST7iqxaw4I7JnmpKZymAyWrvMycF2TIhHFfC6JLTid2yzgU30rx9MhUuHIHzV1MeiVNqbVXUQ==">
<link type=text/css rel=stylesheet href=/congo/css/compiled/main.min.51037225bb3c65887773b052da1e38f105db8f3d9aa6a34ba3c5c40c88fb309724f8cc5ed2871adc7e55dacab9b36c60ce7aa7a61dff2cc638f8b435c898d5a8.css integrity="sha512-UQNyJbs8ZYh3c7BS2h448QXbjz2apqNLo8XEDIj7MJck+Mxe0oca3H5V2sq5s2xgznqnph3/LMY4+LQ1yJjVqA==">
<script>function loadPreferredAppearance(){localStorage.preferredAppearance==="dark"||!("preferredAppearance"in localStorage)&&window.matchMedia("(prefers-color-scheme: dark)").matches?document.documentElement.classList.add("dark"):document.documentElement.classList.remove("dark")}function setPreferredAppearance(a){a=="default"?localStorage.removeItem("preferredAppearance"):localStorage.preferredAppearance=a,loadPreferredAppearance()}loadPreferredAppearance(),window.matchMedia("(prefers-color-scheme: dark)").addListener(loadPreferredAppearance)</script>
<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="comments">
<meta property="og:description" content>
<meta property="og:description" content="A powerful, lightweight theme for Hugo built with Tailwind CSS.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://jpanther.github.io/congo/tags/comments/">
<meta property="og:url" content="https://jpanther.github.io/congo/tags/comments/"><meta property="og:site_name" content="Congo">
<meta name=twitter:card content="summary">
<meta name=twitter:title content="comments">
<meta name=twitter:description content>
<meta name=generator content="Hugo 0.92.0">
<meta name=twitter:description content="A powerful, lightweight theme for Hugo built with Tailwind CSS.">
<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"><header class="flex justify-between py-6 font-semibold sm:items-center sm:py-10 text-neutral-900 dark:text-neutral">
<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:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" rel=me href=/congo/>Congo</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=/congo/docs/ title=Documentation>Docs</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=/congo/samples/ title="Content Samples">Samples</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=/congo/users/ title=Users>Users</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=https://github.com/jpanther/congo title>GitHub</a>
<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 class=flex-grow>
<main id=main-content class=relative>
<header>
<ol class="text-sm text-neutral-500 dark:text-neutral-400">
<li class="inline hidden">
<a class="hover:underline hover:underline-neutral-300 dark:underline-neutral-600" href=/congo/>Welcome to Congo! :tada:</a><span class="px-1 text-primary-500">/</span>
<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:underline-neutral-300 dark:underline-neutral-600" href=/congo/tags/>Tags</a><span class="px-1 text-primary-500">/</span>
<a class="hover:underline hover:decoration-neutral-300 dark:underline-neutral-600" href=/congo/tags/>Tags</a><span class="px-1 text-primary-500">/</span>
</li>
<li class="inline hidden">
<a class="hover:underline hover:underline-neutral-300 dark:underline-neutral-600" href=/congo/tags/comments/>comments</a><span class="px-1 text-primary-500">/</span>
<a class="hover:underline hover:decoration-neutral-300 dark:underline-neutral-600" href=/congo/tags/comments/>comments</a><span class="px-1 text-primary-500">/</span>
</li>
</ol>
<section class="prose dark:prose-light">
<h1 class="mb-3 text-4xl font-extrabold text-neutral-800">comments</h1>
<section></section>
</section>
<h1 class="mt-0 text-4xl font-extrabold text-neutral-900 dark:text-neutral">comments</h1>
</header>
<section>
<h2 class="mt-12 text-2xl font-bold first:mt-8">2020</h2>
<hr class="border-dotted border-neutral-400 w-36">
<article>
<h3 class="flex items-center mt-6 text-xl font-semibold">
<a class="hover:underline hover:underline-primary-500 hover:underline-offset-small text-neutral-800 dark:text-neutral" href=/congo/docs/partials/>Partials</a>
<a class="hover:underline hover:decoration-primary-500 hover:underline-offset-2 text-neutral-800 dark:text-neutral" href=/congo/docs/partials/>Partials</a>
</h3>
<div class="text-sm text-neutral-500 dark:text-neutral-400">
<div class="flex flex-row flex-wrap items-center">
@ -82,18 +87,50 @@
</div>
</article>
</section>
</main><footer class=py-10>
</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">
&copy;
2022
Congo
© 2022 Congo contributors
</p>
<p class="text-xs text-neutral-400 dark:text-neutral-600">
Powered by <a class="hover:underline hover:underline-primary-400 hover:text-primary-500" href=https://gohugo.io/ target=_blank rel="noopener noreferrer">Hugo</a> & <a class="hover:underline hover:underline-primary-400 hover:text-primary-500" href=https://git.io/hugo-congo target=_blank rel="noopener noreferrer">Congo</a>
<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>

View File

@ -1 +1 @@
<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>comments on Congo</title><link>https://jpanther.github.io/congo/tags/comments/</link><description>Recent content in comments on Congo</description><generator>Hugo -- gohugo.io</generator><language>en-AU</language><lastBuildDate>Mon, 10 Aug 2020 00:00:00 +0000</lastBuildDate><atom:link href="https://jpanther.github.io/congo/tags/comments/index.xml" rel="self" type="application/rss+xml"/><item><title>Partials</title><link>https://jpanther.github.io/congo/docs/partials/</link><pubDate>Mon, 10 Aug 2020 00:00:00 +0000</pubDate><guid>https://jpanther.github.io/congo/docs/partials/</guid><description>Analytics # Congo provides built-in support for Fathom Analytics and Google Analytics.</description></item></channel></rss>
<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>comments on Congo</title><link>https://jpanther.github.io/congo/tags/comments/</link><description>Recent content in comments on Congo</description><generator>Hugo -- gohugo.io</generator><language>en-au</language><copyright>&amp;copy; 2022 Congo contributors</copyright><lastBuildDate>Mon, 10 Aug 2020 00:00:00 +0000</lastBuildDate><atom:link href="https://jpanther.github.io/congo/tags/comments/index.xml" rel="self" type="application/rss+xml"/><item><title>Partials</title><link>https://jpanther.github.io/congo/docs/partials/</link><pubDate>Mon, 10 Aug 2020 00:00:00 +0000</pubDate><guid>https://jpanther.github.io/congo/docs/partials/</guid><description>Analytics # Congo provides built-in support for Fathom Analytics and Google Analytics.</description></item></channel></rss>

View File

@ -1,89 +1,94 @@
<!doctype html><html lang=en-au><head>
<!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 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>config &#183; Congo</title>
<meta name=title content="config &#183; Congo">
<meta name=description content>
<meta name=description content="A powerful, lightweight theme for Hugo built with Tailwind CSS.">
<link rel=canonical href=https://jpanther.github.io/congo/tags/config/>
<link rel=alternate type=application/rss+xml href=/congo/tags/config/index.xml title=Congo>
<link type=text/css rel=stylesheet href=/congo/css/schemes/congo.min.b48d6ba061dc77186a2524fb8aac5ac3823b2679a9299ca60325abbccc9c1764c884715f0ba24b4e2776cb3814df4af1f4c854b87207cd5d4c7a254da9b55751.css integrity="sha512-tI1roGHcdxhqJST7iqxaw4I7JnmpKZymAyWrvMycF2TIhHFfC6JLTid2yzgU30rx9MhUuHIHzV1MeiVNqbVXUQ==">
<link type=text/css rel=stylesheet href=/congo/css/compiled/main.min.51037225bb3c65887773b052da1e38f105db8f3d9aa6a34ba3c5c40c88fb309724f8cc5ed2871adc7e55dacab9b36c60ce7aa7a61dff2cc638f8b435c898d5a8.css integrity="sha512-UQNyJbs8ZYh3c7BS2h448QXbjz2apqNLo8XEDIj7MJck+Mxe0oca3H5V2sq5s2xgznqnph3/LMY4+LQ1yJjVqA==">
<script>function loadPreferredAppearance(){localStorage.preferredAppearance==="dark"||!("preferredAppearance"in localStorage)&&window.matchMedia("(prefers-color-scheme: dark)").matches?document.documentElement.classList.add("dark"):document.documentElement.classList.remove("dark")}function setPreferredAppearance(a){a=="default"?localStorage.removeItem("preferredAppearance"):localStorage.preferredAppearance=a,loadPreferredAppearance()}loadPreferredAppearance(),window.matchMedia("(prefers-color-scheme: dark)").addListener(loadPreferredAppearance)</script>
<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="config">
<meta property="og:description" content>
<meta property="og:description" content="A powerful, lightweight theme for Hugo built with Tailwind CSS.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://jpanther.github.io/congo/tags/config/">
<meta property="og:url" content="https://jpanther.github.io/congo/tags/config/"><meta property="og:site_name" content="Congo">
<meta name=twitter:card content="summary">
<meta name=twitter:title content="config">
<meta name=twitter:description content>
<meta name=generator content="Hugo 0.92.0">
<meta name=twitter:description content="A powerful, lightweight theme for Hugo built with Tailwind CSS.">
<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"><header class="flex justify-between py-6 font-semibold sm:items-center sm:py-10 text-neutral-900 dark:text-neutral">
<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:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" rel=me href=/congo/>Congo</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=/congo/docs/ title=Documentation>Docs</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=/congo/samples/ title="Content Samples">Samples</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=/congo/users/ title=Users>Users</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=https://github.com/jpanther/congo title>GitHub</a>
<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 class=flex-grow>
<main id=main-content class=relative>
<header>
<ol class="text-sm text-neutral-500 dark:text-neutral-400">
<li class="inline hidden">
<a class="hover:underline hover:underline-neutral-300 dark:underline-neutral-600" href=/congo/>Welcome to Congo! :tada:</a><span class="px-1 text-primary-500">/</span>
<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:underline-neutral-300 dark:underline-neutral-600" href=/congo/tags/>Tags</a><span class="px-1 text-primary-500">/</span>
<a class="hover:underline hover:decoration-neutral-300 dark:underline-neutral-600" href=/congo/tags/>Tags</a><span class="px-1 text-primary-500">/</span>
</li>
<li class="inline hidden">
<a class="hover:underline hover:underline-neutral-300 dark:underline-neutral-600" href=/congo/tags/config/>config</a><span class="px-1 text-primary-500">/</span>
<a class="hover:underline hover:decoration-neutral-300 dark:underline-neutral-600" href=/congo/tags/config/>config</a><span class="px-1 text-primary-500">/</span>
</li>
</ol>
<section class="prose dark:prose-light">
<h1 class="mb-3 text-4xl font-extrabold text-neutral-800">config</h1>
<section></section>
</section>
<h1 class="mt-0 text-4xl font-extrabold text-neutral-900 dark:text-neutral">config</h1>
</header>
<section>
<h2 class="mt-12 text-2xl font-bold first:mt-8">2020</h2>
<hr class="border-dotted border-neutral-400 w-36">
<article>
<h3 class="flex items-center mt-6 text-xl font-semibold">
<a class="hover:underline hover:underline-primary-500 hover:underline-offset-small text-neutral-800 dark:text-neutral" href=/congo/docs/configuration/>Configuration</a>
<a class="hover:underline hover:decoration-primary-500 hover:underline-offset-2 text-neutral-800 dark:text-neutral" href=/congo/docs/configuration/>Configuration</a>
</h3>
<div class="text-sm text-neutral-500 dark:text-neutral-400">
<div class="flex flex-row flex-wrap items-center">
<span title="Reading time">7 mins</span>
<span title="Reading time">9 mins</span>
</div>
</div>
</article>
<article>
<h3 class="flex items-center mt-6 text-xl font-semibold">
<a class="hover:underline hover:underline-primary-500 hover:underline-offset-small text-neutral-800 dark:text-neutral" href=/congo/docs/front-matter/>Front Matter</a>
<a class="hover:underline hover:decoration-primary-500 hover:underline-offset-2 text-neutral-800 dark:text-neutral" href=/congo/docs/front-matter/>Front Matter</a>
</h3>
<div class="text-sm text-neutral-500 dark:text-neutral-400">
<div class="flex flex-row flex-wrap items-center">
@ -92,18 +97,50 @@
</div>
</article>
</section>
</main><footer class=py-10>
</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">
&copy;
2022
Congo
© 2022 Congo contributors
</p>
<p class="text-xs text-neutral-400 dark:text-neutral-600">
Powered by <a class="hover:underline hover:underline-primary-400 hover:text-primary-500" href=https://gohugo.io/ target=_blank rel="noopener noreferrer">Hugo</a> & <a class="hover:underline hover:underline-primary-400 hover:text-primary-500" href=https://git.io/hugo-congo target=_blank rel="noopener noreferrer">Congo</a>
<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>

View File

@ -1 +1 @@
<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>config on Congo</title><link>https://jpanther.github.io/congo/tags/config/</link><description>Recent content in config on Congo</description><generator>Hugo -- gohugo.io</generator><language>en-AU</language><lastBuildDate>Fri, 14 Aug 2020 00:00:00 +0000</lastBuildDate><atom:link href="https://jpanther.github.io/congo/tags/config/index.xml" rel="self" type="application/rss+xml"/><item><title>Configuration</title><link>https://jpanther.github.io/congo/docs/configuration/</link><pubDate>Fri, 14 Aug 2020 00:00:00 +0000</pubDate><guid>https://jpanther.github.io/congo/docs/configuration/</guid><description>Congo is a highly customisable theme and uses some of the latest Hugo features to simplify how it is configured.</description></item><item><title>Front Matter</title><link>https://jpanther.github.io/congo/docs/front-matter/</link><pubDate>Wed, 12 Aug 2020 00:00:00 +0000</pubDate><guid>https://jpanther.github.io/congo/docs/front-matter/</guid><description>In addition to the default Hugo front matter parameters, Congo adds a number of additional options to customise the presentation of individual articles.</description></item></channel></rss>
<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>config on Congo</title><link>https://jpanther.github.io/congo/tags/config/</link><description>Recent content in config on Congo</description><generator>Hugo -- gohugo.io</generator><language>en-au</language><copyright>&amp;copy; 2022 Congo contributors</copyright><lastBuildDate>Fri, 14 Aug 2020 00:00:00 +0000</lastBuildDate><atom:link href="https://jpanther.github.io/congo/tags/config/index.xml" rel="self" type="application/rss+xml"/><item><title>Configuration</title><link>https://jpanther.github.io/congo/docs/configuration/</link><pubDate>Fri, 14 Aug 2020 00:00:00 +0000</pubDate><guid>https://jpanther.github.io/congo/docs/configuration/</guid><description>Congo is a highly customisable theme and uses some of the latest Hugo features to simplify how it is configured.</description></item><item><title>Front Matter</title><link>https://jpanther.github.io/congo/docs/front-matter/</link><pubDate>Wed, 12 Aug 2020 00:00:00 +0000</pubDate><guid>https://jpanther.github.io/congo/docs/front-matter/</guid><description>In addition to the default Hugo front matter parameters, Congo adds a number of additional options to customise the presentation of individual articles.</description></item></channel></rss>

View File

@ -0,0 +1,137 @@
<!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>content &#183; Congo</title>
<meta name=title content="content &#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/tags/content/>
<link rel=alternate type=application/rss+xml href=/congo/tags/content/index.xml title=Congo>
<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="content">
<meta property="og:description" content="A powerful, lightweight theme for Hugo built with Tailwind CSS.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://jpanther.github.io/congo/tags/content/"><meta property="og:site_name" content="Congo">
<meta name=twitter:card content="summary">
<meta name=twitter:title content="content">
<meta name=twitter:description content="A powerful, lightweight theme for Hugo built with Tailwind CSS.">
<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>
<header>
<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/tags/>Tags</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/tags/content/>content</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">content</h1>
</header>
<section>
<h2 class="mt-12 text-2xl font-bold first:mt-8">2020</h2>
<hr class="border-dotted border-neutral-400 w-36">
<article>
<h3 class="flex items-center mt-6 text-xl font-semibold">
<a class="hover:underline hover:decoration-primary-500 hover:underline-offset-2 text-neutral-800 dark:text-neutral" href=/congo/docs/content-examples/>Content Examples</a>
</h3>
<div class="text-sm text-neutral-500 dark:text-neutral-400">
<div class="flex flex-row flex-wrap items-center">
<span title="Reading time">9 mins</span>
</div>
</div>
</article>
</section>
</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>

View File

@ -0,0 +1 @@
<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>content on Congo</title><link>https://jpanther.github.io/congo/tags/content/</link><description>Recent content in content on Congo</description><generator>Hugo -- gohugo.io</generator><language>en-au</language><copyright>&amp;copy; 2022 Congo contributors</copyright><lastBuildDate>Sun, 09 Aug 2020 00:00:00 +0000</lastBuildDate><atom:link href="https://jpanther.github.io/congo/tags/content/index.xml" rel="self" type="application/rss+xml"/><item><title>Content Examples</title><link>https://jpanther.github.io/congo/docs/content-examples/</link><pubDate>Sun, 09 Aug 2020 00:00:00 +0000</pubDate><guid>https://jpanther.github.io/congo/docs/content-examples/</guid><description>If you&amp;rsquo;ve been reading the documentation in order, you should now know about all the features and configurations available in Congo.</description></item></channel></rss>

View File

@ -0,0 +1 @@
<!doctype html><html><head><title>https://jpanther.github.io/congo/tags/content/</title><link rel=canonical href=https://jpanther.github.io/congo/tags/content/><meta name=robots content="noindex"><meta charset=utf-8><meta http-equiv=refresh content="0; url=https://jpanther.github.io/congo/tags/content/"></head></html>

View File

@ -1,83 +1,88 @@
<!doctype html><html lang=en-au><head>
<!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 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>css &#183; Congo</title>
<meta name=title content="css &#183; Congo">
<meta name=description content>
<meta name=description content="A powerful, lightweight theme for Hugo built with Tailwind CSS.">
<link rel=canonical href=https://jpanther.github.io/congo/tags/css/>
<link rel=alternate type=application/rss+xml href=/congo/tags/css/index.xml title=Congo>
<link type=text/css rel=stylesheet href=/congo/css/schemes/congo.min.b48d6ba061dc77186a2524fb8aac5ac3823b2679a9299ca60325abbccc9c1764c884715f0ba24b4e2776cb3814df4af1f4c854b87207cd5d4c7a254da9b55751.css integrity="sha512-tI1roGHcdxhqJST7iqxaw4I7JnmpKZymAyWrvMycF2TIhHFfC6JLTid2yzgU30rx9MhUuHIHzV1MeiVNqbVXUQ==">
<link type=text/css rel=stylesheet href=/congo/css/compiled/main.min.51037225bb3c65887773b052da1e38f105db8f3d9aa6a34ba3c5c40c88fb309724f8cc5ed2871adc7e55dacab9b36c60ce7aa7a61dff2cc638f8b435c898d5a8.css integrity="sha512-UQNyJbs8ZYh3c7BS2h448QXbjz2apqNLo8XEDIj7MJck+Mxe0oca3H5V2sq5s2xgznqnph3/LMY4+LQ1yJjVqA==">
<script>function loadPreferredAppearance(){localStorage.preferredAppearance==="dark"||!("preferredAppearance"in localStorage)&&window.matchMedia("(prefers-color-scheme: dark)").matches?document.documentElement.classList.add("dark"):document.documentElement.classList.remove("dark")}function setPreferredAppearance(a){a=="default"?localStorage.removeItem("preferredAppearance"):localStorage.preferredAppearance=a,loadPreferredAppearance()}loadPreferredAppearance(),window.matchMedia("(prefers-color-scheme: dark)").addListener(loadPreferredAppearance)</script>
<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="css">
<meta property="og:description" content>
<meta property="og:description" content="A powerful, lightweight theme for Hugo built with Tailwind CSS.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://jpanther.github.io/congo/tags/css/">
<meta property="og:url" content="https://jpanther.github.io/congo/tags/css/"><meta property="og:site_name" content="Congo">
<meta name=twitter:card content="summary">
<meta name=twitter:title content="css">
<meta name=twitter:description content>
<meta name=generator content="Hugo 0.92.0">
<meta name=twitter:description content="A powerful, lightweight theme for Hugo built with Tailwind CSS.">
<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"><header class="flex justify-between py-6 font-semibold sm:items-center sm:py-10 text-neutral-900 dark:text-neutral">
<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:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" rel=me href=/congo/>Congo</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=/congo/docs/ title=Documentation>Docs</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=/congo/samples/ title="Content Samples">Samples</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=/congo/users/ title=Users>Users</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=https://github.com/jpanther/congo title>GitHub</a>
<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 class=flex-grow>
<main id=main-content class=relative>
<header>
<ol class="text-sm text-neutral-500 dark:text-neutral-400">
<li class="inline hidden">
<a class="hover:underline hover:underline-neutral-300 dark:underline-neutral-600" href=/congo/>Welcome to Congo! :tada:</a><span class="px-1 text-primary-500">/</span>
<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:underline-neutral-300 dark:underline-neutral-600" href=/congo/tags/>Tags</a><span class="px-1 text-primary-500">/</span>
<a class="hover:underline hover:decoration-neutral-300 dark:underline-neutral-600" href=/congo/tags/>Tags</a><span class="px-1 text-primary-500">/</span>
</li>
<li class="inline hidden">
<a class="hover:underline hover:underline-neutral-300 dark:underline-neutral-600" href=/congo/tags/css/>css</a><span class="px-1 text-primary-500">/</span>
<a class="hover:underline hover:decoration-neutral-300 dark:underline-neutral-600" href=/congo/tags/css/>css</a><span class="px-1 text-primary-500">/</span>
</li>
</ol>
<section class="prose dark:prose-light">
<h1 class="mb-3 text-4xl font-extrabold text-neutral-800">css</h1>
<section></section>
</section>
<h1 class="mt-0 text-4xl font-extrabold text-neutral-900 dark:text-neutral">css</h1>
</header>
<section>
<h2 class="mt-12 text-2xl font-bold first:mt-8">2020</h2>
<hr class="border-dotted border-neutral-400 w-36">
<article>
<h3 class="flex items-center mt-6 text-xl font-semibold">
<a class="hover:underline hover:underline-primary-500 hover:underline-offset-small text-neutral-800 dark:text-neutral" href=/congo/docs/advanced-customisation/>Advanced Customisation</a>
<a class="hover:underline hover:decoration-primary-500 hover:underline-offset-2 text-neutral-800 dark:text-neutral" href=/congo/docs/advanced-customisation/>Advanced Customisation</a>
</h3>
<div class="text-sm text-neutral-500 dark:text-neutral-400">
<div class="flex flex-row flex-wrap items-center">
<span title="Reading time">5 mins</span>
<span title="Reading time">8 mins</span>
</div>
</div>
</article>
@ -85,30 +90,62 @@
<hr class="border-dotted border-neutral-400 w-36">
<article>
<h3 class="flex items-center mt-6 text-xl font-semibold">
<a class="hover:underline hover:underline-primary-500 hover:underline-offset-small text-neutral-800 dark:text-neutral" href=/congo/samples/markdown/>Markdown</a>
<a class="hover:underline hover:decoration-primary-500 hover:underline-offset-2 text-neutral-800 dark:text-neutral" href=/congo/samples/markdown/>Markdown</a>
</h3>
<div class="text-sm text-neutral-500 dark:text-neutral-400">
<div class="flex flex-row flex-wrap items-center">
<time datetime="2019-03-11 00:00:00 +0000 UTC">11 March 2019</time><span class="px-2 text-primary-500">&#183;</span><span title="Reading time">3 mins</span>
</div>
</div>
<div class="py-1 prose dark:prose-light">
<div class="py-1 prose dark:prose-invert">
<p>This article offers a sample of basic Markdown formatting that can be used in Congo, also it shows how some basic HTML elements are decorated.</p>
</div>
</article>
</section>
</main><footer class=py-10>
</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">
&copy;
2022
Congo
© 2022 Congo contributors
</p>
<p class="text-xs text-neutral-400 dark:text-neutral-600">
Powered by <a class="hover:underline hover:underline-primary-400 hover:text-primary-500" href=https://gohugo.io/ target=_blank rel="noopener noreferrer">Hugo</a> & <a class="hover:underline hover:underline-primary-400 hover:text-primary-500" href=https://git.io/hugo-congo target=_blank rel="noopener noreferrer">Congo</a>
<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>

View File

@ -1 +1 @@
<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>css on Congo</title><link>https://jpanther.github.io/congo/tags/css/</link><description>Recent content in css on Congo</description><generator>Hugo -- gohugo.io</generator><language>en-AU</language><lastBuildDate>Sun, 09 Aug 2020 00:00:00 +0000</lastBuildDate><atom:link href="https://jpanther.github.io/congo/tags/css/index.xml" rel="self" type="application/rss+xml"/><item><title>Advanced Customisation</title><link>https://jpanther.github.io/congo/docs/advanced-customisation/</link><pubDate>Sun, 09 Aug 2020 00:00:00 +0000</pubDate><guid>https://jpanther.github.io/congo/docs/advanced-customisation/</guid><description>There are many ways you can make advanced changes to Congo.</description></item><item><title>Markdown</title><link>https://jpanther.github.io/congo/samples/markdown/</link><pubDate>Mon, 11 Mar 2019 00:00:00 +0000</pubDate><guid>https://jpanther.github.io/congo/samples/markdown/</guid><description>&lt;p>This article offers a sample of basic Markdown formatting that can be used in Congo, also it shows how some basic HTML elements are decorated.&lt;/p></description></item></channel></rss>
<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>css on Congo</title><link>https://jpanther.github.io/congo/tags/css/</link><description>Recent content in css on Congo</description><generator>Hugo -- gohugo.io</generator><language>en-au</language><copyright>&amp;copy; 2022 Congo contributors</copyright><lastBuildDate>Sat, 08 Aug 2020 00:00:00 +0000</lastBuildDate><atom:link href="https://jpanther.github.io/congo/tags/css/index.xml" rel="self" type="application/rss+xml"/><item><title>Advanced Customisation</title><link>https://jpanther.github.io/congo/docs/advanced-customisation/</link><pubDate>Sat, 08 Aug 2020 00:00:00 +0000</pubDate><guid>https://jpanther.github.io/congo/docs/advanced-customisation/</guid><description>There are many ways you can make advanced changes to Congo.</description></item><item><title>Markdown</title><link>https://jpanther.github.io/congo/samples/markdown/</link><pubDate>Mon, 11 Mar 2019 00:00:00 +0000</pubDate><guid>https://jpanther.github.io/congo/samples/markdown/</guid><description>&lt;p>This article offers a sample of basic Markdown formatting that can be used in Congo, also it shows how some basic HTML elements are decorated.&lt;/p></description></item></channel></rss>

View File

@ -1,79 +1,84 @@
<!doctype html><html lang=en-au><head>
<!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 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>deployment &#183; Congo</title>
<meta name=title content="deployment &#183; Congo">
<meta name=description content>
<meta name=description content="A powerful, lightweight theme for Hugo built with Tailwind CSS.">
<link rel=canonical href=https://jpanther.github.io/congo/tags/deployment/>
<link rel=alternate type=application/rss+xml href=/congo/tags/deployment/index.xml title=Congo>
<link type=text/css rel=stylesheet href=/congo/css/schemes/congo.min.b48d6ba061dc77186a2524fb8aac5ac3823b2679a9299ca60325abbccc9c1764c884715f0ba24b4e2776cb3814df4af1f4c854b87207cd5d4c7a254da9b55751.css integrity="sha512-tI1roGHcdxhqJST7iqxaw4I7JnmpKZymAyWrvMycF2TIhHFfC6JLTid2yzgU30rx9MhUuHIHzV1MeiVNqbVXUQ==">
<link type=text/css rel=stylesheet href=/congo/css/compiled/main.min.51037225bb3c65887773b052da1e38f105db8f3d9aa6a34ba3c5c40c88fb309724f8cc5ed2871adc7e55dacab9b36c60ce7aa7a61dff2cc638f8b435c898d5a8.css integrity="sha512-UQNyJbs8ZYh3c7BS2h448QXbjz2apqNLo8XEDIj7MJck+Mxe0oca3H5V2sq5s2xgznqnph3/LMY4+LQ1yJjVqA==">
<script>function loadPreferredAppearance(){localStorage.preferredAppearance==="dark"||!("preferredAppearance"in localStorage)&&window.matchMedia("(prefers-color-scheme: dark)").matches?document.documentElement.classList.add("dark"):document.documentElement.classList.remove("dark")}function setPreferredAppearance(a){a=="default"?localStorage.removeItem("preferredAppearance"):localStorage.preferredAppearance=a,loadPreferredAppearance()}loadPreferredAppearance(),window.matchMedia("(prefers-color-scheme: dark)").addListener(loadPreferredAppearance)</script>
<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="deployment">
<meta property="og:description" content>
<meta property="og:description" content="A powerful, lightweight theme for Hugo built with Tailwind CSS.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://jpanther.github.io/congo/tags/deployment/">
<meta property="og:url" content="https://jpanther.github.io/congo/tags/deployment/"><meta property="og:site_name" content="Congo">
<meta name=twitter:card content="summary">
<meta name=twitter:title content="deployment">
<meta name=twitter:description content>
<meta name=generator content="Hugo 0.92.0">
<meta name=twitter:description content="A powerful, lightweight theme for Hugo built with Tailwind CSS.">
<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"><header class="flex justify-between py-6 font-semibold sm:items-center sm:py-10 text-neutral-900 dark:text-neutral">
<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:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" rel=me href=/congo/>Congo</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=/congo/docs/ title=Documentation>Docs</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=/congo/samples/ title="Content Samples">Samples</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=/congo/users/ title=Users>Users</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=https://github.com/jpanther/congo title>GitHub</a>
<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 class=flex-grow>
<main id=main-content class=relative>
<header>
<ol class="text-sm text-neutral-500 dark:text-neutral-400">
<li class="inline hidden">
<a class="hover:underline hover:underline-neutral-300 dark:underline-neutral-600" href=/congo/>Welcome to Congo! :tada:</a><span class="px-1 text-primary-500">/</span>
<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:underline-neutral-300 dark:underline-neutral-600" href=/congo/tags/>Tags</a><span class="px-1 text-primary-500">/</span>
<a class="hover:underline hover:decoration-neutral-300 dark:underline-neutral-600" href=/congo/tags/>Tags</a><span class="px-1 text-primary-500">/</span>
</li>
<li class="inline hidden">
<a class="hover:underline hover:underline-neutral-300 dark:underline-neutral-600" href=/congo/tags/deployment/>deployment</a><span class="px-1 text-primary-500">/</span>
<a class="hover:underline hover:decoration-neutral-300 dark:underline-neutral-600" href=/congo/tags/deployment/>deployment</a><span class="px-1 text-primary-500">/</span>
</li>
</ol>
<section class="prose dark:prose-light">
<h1 class="mb-3 text-4xl font-extrabold text-neutral-800">deployment</h1>
<section></section>
</section>
<h1 class="mt-0 text-4xl font-extrabold text-neutral-900 dark:text-neutral">deployment</h1>
</header>
<section>
<h2 class="mt-12 text-2xl font-bold first:mt-8">2020</h2>
<hr class="border-dotted border-neutral-400 w-36">
<article>
<h3 class="flex items-center mt-6 text-xl font-semibold">
<a class="hover:underline hover:underline-primary-500 hover:underline-offset-small text-neutral-800 dark:text-neutral" href=/congo/docs/hosting-deployment/>Hosting & Deployment</a>
<a class="hover:underline hover:decoration-primary-500 hover:underline-offset-2 text-neutral-800 dark:text-neutral" href=/congo/docs/hosting-deployment/>Hosting & Deployment</a>
</h3>
<div class="text-sm text-neutral-500 dark:text-neutral-400">
<div class="flex flex-row flex-wrap items-center">
@ -82,18 +87,50 @@
</div>
</article>
</section>
</main><footer class=py-10>
</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">
&copy;
2022
Congo
© 2022 Congo contributors
</p>
<p class="text-xs text-neutral-400 dark:text-neutral-600">
Powered by <a class="hover:underline hover:underline-primary-400 hover:text-primary-500" href=https://gohugo.io/ target=_blank rel="noopener noreferrer">Hugo</a> & <a class="hover:underline hover:underline-primary-400 hover:text-primary-500" href=https://git.io/hugo-congo target=_blank rel="noopener noreferrer">Congo</a>
<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>

View File

@ -1 +1 @@
<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>deployment on Congo</title><link>https://jpanther.github.io/congo/tags/deployment/</link><description>Recent content in deployment on Congo</description><generator>Hugo -- gohugo.io</generator><language>en-AU</language><lastBuildDate>Sat, 08 Aug 2020 00:00:00 +0000</lastBuildDate><atom:link href="https://jpanther.github.io/congo/tags/deployment/index.xml" rel="self" type="application/rss+xml"/><item><title>Hosting &amp; Deployment</title><link>https://jpanther.github.io/congo/docs/hosting-deployment/</link><pubDate>Sat, 08 Aug 2020 00:00:00 +0000</pubDate><guid>https://jpanther.github.io/congo/docs/hosting-deployment/</guid><description>There are many ways to deploy your Hugo website built with Congo.</description></item></channel></rss>
<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>deployment on Congo</title><link>https://jpanther.github.io/congo/tags/deployment/</link><description>Recent content in deployment on Congo</description><generator>Hugo -- gohugo.io</generator><language>en-au</language><copyright>&amp;copy; 2022 Congo contributors</copyright><lastBuildDate>Fri, 07 Aug 2020 00:00:00 +0000</lastBuildDate><atom:link href="https://jpanther.github.io/congo/tags/deployment/index.xml" rel="self" type="application/rss+xml"/><item><title>Hosting &amp; Deployment</title><link>https://jpanther.github.io/congo/docs/hosting-deployment/</link><pubDate>Fri, 07 Aug 2020 00:00:00 +0000</pubDate><guid>https://jpanther.github.io/congo/docs/hosting-deployment/</guid><description>There are many ways to deploy your Hugo website built with Congo.</description></item></channel></rss>

View File

@ -1,102 +1,139 @@
<!doctype html><html lang=en-au><head>
<!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 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>diagram &#183; Congo</title>
<meta name=title content="diagram &#183; Congo">
<meta name=description content>
<meta name=description content="A powerful, lightweight theme for Hugo built with Tailwind CSS.">
<link rel=canonical href=https://jpanther.github.io/congo/tags/diagram/>
<link rel=alternate type=application/rss+xml href=/congo/tags/diagram/index.xml title=Congo>
<link type=text/css rel=stylesheet href=/congo/css/schemes/congo.min.b48d6ba061dc77186a2524fb8aac5ac3823b2679a9299ca60325abbccc9c1764c884715f0ba24b4e2776cb3814df4af1f4c854b87207cd5d4c7a254da9b55751.css integrity="sha512-tI1roGHcdxhqJST7iqxaw4I7JnmpKZymAyWrvMycF2TIhHFfC6JLTid2yzgU30rx9MhUuHIHzV1MeiVNqbVXUQ==">
<link type=text/css rel=stylesheet href=/congo/css/compiled/main.min.51037225bb3c65887773b052da1e38f105db8f3d9aa6a34ba3c5c40c88fb309724f8cc5ed2871adc7e55dacab9b36c60ce7aa7a61dff2cc638f8b435c898d5a8.css integrity="sha512-UQNyJbs8ZYh3c7BS2h448QXbjz2apqNLo8XEDIj7MJck+Mxe0oca3H5V2sq5s2xgznqnph3/LMY4+LQ1yJjVqA==">
<script>function loadPreferredAppearance(){localStorage.preferredAppearance==="dark"||!("preferredAppearance"in localStorage)&&window.matchMedia("(prefers-color-scheme: dark)").matches?document.documentElement.classList.add("dark"):document.documentElement.classList.remove("dark")}function setPreferredAppearance(a){a=="default"?localStorage.removeItem("preferredAppearance"):localStorage.preferredAppearance=a,loadPreferredAppearance()}loadPreferredAppearance(),window.matchMedia("(prefers-color-scheme: dark)").addListener(loadPreferredAppearance)</script>
<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="diagram">
<meta property="og:description" content>
<meta property="og:description" content="A powerful, lightweight theme for Hugo built with Tailwind CSS.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://jpanther.github.io/congo/tags/diagram/">
<meta property="og:url" content="https://jpanther.github.io/congo/tags/diagram/"><meta property="og:site_name" content="Congo">
<meta name=twitter:card content="summary">
<meta name=twitter:title content="diagram">
<meta name=twitter:description content>
<meta name=generator content="Hugo 0.92.0">
<meta name=twitter:description content="A powerful, lightweight theme for Hugo built with Tailwind CSS.">
<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"><header class="flex justify-between py-6 font-semibold sm:items-center sm:py-10 text-neutral-900 dark:text-neutral">
<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:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" rel=me href=/congo/>Congo</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=/congo/docs/ title=Documentation>Docs</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=/congo/samples/ title="Content Samples">Samples</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=/congo/users/ title=Users>Users</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=https://github.com/jpanther/congo title>GitHub</a>
<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 class=flex-grow>
<main id=main-content class=relative>
<header>
<ol class="text-sm text-neutral-500 dark:text-neutral-400">
<li class="inline hidden">
<a class="hover:underline hover:underline-neutral-300 dark:underline-neutral-600" href=/congo/>Welcome to Congo! :tada:</a><span class="px-1 text-primary-500">/</span>
<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:underline-neutral-300 dark:underline-neutral-600" href=/congo/tags/>Tags</a><span class="px-1 text-primary-500">/</span>
<a class="hover:underline hover:decoration-neutral-300 dark:underline-neutral-600" href=/congo/tags/>Tags</a><span class="px-1 text-primary-500">/</span>
</li>
<li class="inline hidden">
<a class="hover:underline hover:underline-neutral-300 dark:underline-neutral-600" href=/congo/tags/diagram/>diagram</a><span class="px-1 text-primary-500">/</span>
<a class="hover:underline hover:decoration-neutral-300 dark:underline-neutral-600" href=/congo/tags/diagram/>diagram</a><span class="px-1 text-primary-500">/</span>
</li>
</ol>
<section class="prose dark:prose-light">
<h1 class="mb-3 text-4xl font-extrabold text-neutral-800">diagram</h1>
<section></section>
</section>
<h1 class="mt-0 text-4xl font-extrabold text-neutral-900 dark:text-neutral">diagram</h1>
</header>
<section>
<h2 class="mt-12 text-2xl font-bold first:mt-8">2019</h2>
<hr class="border-dotted border-neutral-400 w-36">
<article>
<h3 class="flex items-center mt-6 text-xl font-semibold">
<a class="hover:underline hover:underline-primary-500 hover:underline-offset-small text-neutral-800 dark:text-neutral" href=/congo/samples/diagrams-flowcharts/>Diagrams and Flowcharts</a>
<a class="hover:underline hover:decoration-primary-500 hover:underline-offset-2 text-neutral-800 dark:text-neutral" href=/congo/samples/diagrams-flowcharts/>Diagrams and Flowcharts</a>
</h3>
<div class="text-sm text-neutral-500 dark:text-neutral-400">
<div class="flex flex-row flex-wrap items-center">
<time datetime="2019-03-06 00:00:00 +0000 UTC">6 March 2019</time><span class="px-2 text-primary-500">&#183;</span><span title="Reading time">1 min</span>
</div>
</div>
<div class="py-1 prose dark:prose-light">
<div class="py-1 prose dark:prose-invert">
It&rsquo;s easy to add diagrams and flowcharts to articles using Mermaid.
</div>
</article>
</section>
</main><footer class=py-10>
</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">
&copy;
2022
Congo
© 2022 Congo contributors
</p>
<p class="text-xs text-neutral-400 dark:text-neutral-600">
Powered by <a class="hover:underline hover:underline-primary-400 hover:text-primary-500" href=https://gohugo.io/ target=_blank rel="noopener noreferrer">Hugo</a> & <a class="hover:underline hover:underline-primary-400 hover:text-primary-500" href=https://git.io/hugo-congo target=_blank rel="noopener noreferrer">Congo</a>
<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>

View File

@ -1 +1 @@
<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>diagram on Congo</title><link>https://jpanther.github.io/congo/tags/diagram/</link><description>Recent content in diagram on Congo</description><generator>Hugo -- gohugo.io</generator><language>en-AU</language><lastBuildDate>Wed, 06 Mar 2019 00:00:00 +0000</lastBuildDate><atom:link href="https://jpanther.github.io/congo/tags/diagram/index.xml" rel="self" type="application/rss+xml"/><item><title>Diagrams and Flowcharts</title><link>https://jpanther.github.io/congo/samples/diagrams-flowcharts/</link><pubDate>Wed, 06 Mar 2019 00:00:00 +0000</pubDate><guid>https://jpanther.github.io/congo/samples/diagrams-flowcharts/</guid><description>It&amp;rsquo;s easy to add diagrams and flowcharts to articles using Mermaid.</description></item></channel></rss>
<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>diagram on Congo</title><link>https://jpanther.github.io/congo/tags/diagram/</link><description>Recent content in diagram on Congo</description><generator>Hugo -- gohugo.io</generator><language>en-au</language><copyright>&amp;copy; 2022 Congo contributors</copyright><lastBuildDate>Wed, 06 Mar 2019 00:00:00 +0000</lastBuildDate><atom:link href="https://jpanther.github.io/congo/tags/diagram/index.xml" rel="self" type="application/rss+xml"/><item><title>Diagrams and Flowcharts</title><link>https://jpanther.github.io/congo/samples/diagrams-flowcharts/</link><pubDate>Wed, 06 Mar 2019 00:00:00 +0000</pubDate><guid>https://jpanther.github.io/congo/samples/diagrams-flowcharts/</guid><description>It&amp;rsquo;s easy to add diagrams and flowcharts to articles using Mermaid.</description></item></channel></rss>

View File

@ -1,79 +1,106 @@
<!doctype html><html lang=en-au><head>
<!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 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>docs &#183; Congo</title>
<meta name=title content="docs &#183; Congo">
<meta name=description content>
<meta name=description content="A powerful, lightweight theme for Hugo built with Tailwind CSS.">
<link rel=canonical href=https://jpanther.github.io/congo/tags/docs/>
<link rel=alternate type=application/rss+xml href=/congo/tags/docs/index.xml title=Congo>
<link type=text/css rel=stylesheet href=/congo/css/schemes/congo.min.b48d6ba061dc77186a2524fb8aac5ac3823b2679a9299ca60325abbccc9c1764c884715f0ba24b4e2776cb3814df4af1f4c854b87207cd5d4c7a254da9b55751.css integrity="sha512-tI1roGHcdxhqJST7iqxaw4I7JnmpKZymAyWrvMycF2TIhHFfC6JLTid2yzgU30rx9MhUuHIHzV1MeiVNqbVXUQ==">
<link type=text/css rel=stylesheet href=/congo/css/compiled/main.min.51037225bb3c65887773b052da1e38f105db8f3d9aa6a34ba3c5c40c88fb309724f8cc5ed2871adc7e55dacab9b36c60ce7aa7a61dff2cc638f8b435c898d5a8.css integrity="sha512-UQNyJbs8ZYh3c7BS2h448QXbjz2apqNLo8XEDIj7MJck+Mxe0oca3H5V2sq5s2xgznqnph3/LMY4+LQ1yJjVqA==">
<script>function loadPreferredAppearance(){localStorage.preferredAppearance==="dark"||!("preferredAppearance"in localStorage)&&window.matchMedia("(prefers-color-scheme: dark)").matches?document.documentElement.classList.add("dark"):document.documentElement.classList.remove("dark")}function setPreferredAppearance(a){a=="default"?localStorage.removeItem("preferredAppearance"):localStorage.preferredAppearance=a,loadPreferredAppearance()}loadPreferredAppearance(),window.matchMedia("(prefers-color-scheme: dark)").addListener(loadPreferredAppearance)</script>
<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="docs">
<meta property="og:description" content>
<meta property="og:description" content="A powerful, lightweight theme for Hugo built with Tailwind CSS.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://jpanther.github.io/congo/tags/docs/">
<meta property="og:url" content="https://jpanther.github.io/congo/tags/docs/"><meta property="og:site_name" content="Congo">
<meta name=twitter:card content="summary">
<meta name=twitter:title content="docs">
<meta name=twitter:description content>
<meta name=generator content="Hugo 0.92.0">
<meta name=twitter:description content="A powerful, lightweight theme for Hugo built with Tailwind CSS.">
<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"><header class="flex justify-between py-6 font-semibold sm:items-center sm:py-10 text-neutral-900 dark:text-neutral">
<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:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" rel=me href=/congo/>Congo</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=/congo/docs/ title=Documentation>Docs</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=/congo/samples/ title="Content Samples">Samples</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=/congo/users/ title=Users>Users</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=https://github.com/jpanther/congo title>GitHub</a>
<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 class=flex-grow>
<main id=main-content class=relative>
<header>
<ol class="text-sm text-neutral-500 dark:text-neutral-400">
<li class="inline hidden">
<a class="hover:underline hover:underline-neutral-300 dark:underline-neutral-600" href=/congo/>Welcome to Congo! :tada:</a><span class="px-1 text-primary-500">/</span>
<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:underline-neutral-300 dark:underline-neutral-600" href=/congo/tags/>Tags</a><span class="px-1 text-primary-500">/</span>
<a class="hover:underline hover:decoration-neutral-300 dark:underline-neutral-600" href=/congo/tags/>Tags</a><span class="px-1 text-primary-500">/</span>
</li>
<li class="inline hidden">
<a class="hover:underline hover:underline-neutral-300 dark:underline-neutral-600" href=/congo/tags/docs/>docs</a><span class="px-1 text-primary-500">/</span>
<a class="hover:underline hover:decoration-neutral-300 dark:underline-neutral-600" href=/congo/tags/docs/>docs</a><span class="px-1 text-primary-500">/</span>
</li>
</ol>
<section class="prose dark:prose-light">
<h1 class="mb-3 text-4xl font-extrabold text-neutral-800">docs</h1>
<section></section>
</section>
<h1 class="mt-0 text-4xl font-extrabold text-neutral-900 dark:text-neutral">docs</h1>
</header>
<section>
<h2 class="mt-12 text-2xl font-bold first:mt-8">2022</h2>
<hr class="border-dotted border-neutral-400 w-36">
<article>
<h3 class="flex items-center mt-6 text-xl font-semibold">
<a class="hover:underline hover:decoration-primary-500 hover:underline-offset-2 text-neutral-800 dark:text-neutral" href=/congo/docs/version-2/upgrade/>Upgrading from Congo 1.x</a>
</h3>
<div class="text-sm text-neutral-500 dark:text-neutral-400">
<div class="flex flex-row flex-wrap items-center">
<span title="Reading time">6 mins</span>
</div>
</div>
</article>
<article>
<h3 class="flex items-center mt-6 text-xl font-semibold">
<a class="hover:underline hover:decoration-primary-500 hover:underline-offset-2 text-neutral-800 dark:text-neutral" href=/congo/docs/version-2/>What's New in 2.0 ✨</a>
</h3>
<div class="text-sm text-neutral-500 dark:text-neutral-400">
<div class="flex flex-row flex-wrap items-center">
<span title="Reading time">4 mins</span>
</div>
</div>
</article>
<h2 class="mt-12 text-2xl font-bold first:mt-8">2020</h2>
<hr class="border-dotted border-neutral-400 w-36">
<article>
<h3 class="flex items-center mt-6 text-xl font-semibold">
<a class="hover:underline hover:underline-primary-500 hover:underline-offset-small text-neutral-800 dark:text-neutral" href=/congo/docs/installation/>Installation</a>
<a class="hover:underline hover:decoration-primary-500 hover:underline-offset-2 text-neutral-800 dark:text-neutral" href=/congo/docs/installation/>Installation</a>
</h3>
<div class="text-sm text-neutral-500 dark:text-neutral-400">
<div class="flex flex-row flex-wrap items-center">
@ -83,67 +110,7 @@
</article>
<article>
<h3 class="flex items-center mt-6 text-xl font-semibold">
<a class="hover:underline hover:underline-primary-500 hover:underline-offset-small text-neutral-800 dark:text-neutral" href=/congo/docs/getting-started/>Getting Started</a>
</h3>
<div class="text-sm text-neutral-500 dark:text-neutral-400">
<div class="flex flex-row flex-wrap items-center">
<span title="Reading time">3 mins</span>
</div>
</div>
</article>
<article>
<h3 class="flex items-center mt-6 text-xl font-semibold">
<a class="hover:underline hover:underline-primary-500 hover:underline-offset-small text-neutral-800 dark:text-neutral" href=/congo/docs/configuration/>Configuration</a>
</h3>
<div class="text-sm text-neutral-500 dark:text-neutral-400">
<div class="flex flex-row flex-wrap items-center">
<span title="Reading time">7 mins</span>
</div>
</div>
</article>
<article>
<h3 class="flex items-center mt-6 text-xl font-semibold">
<a class="hover:underline hover:underline-primary-500 hover:underline-offset-small text-neutral-800 dark:text-neutral" href=/congo/docs/homepage-layout/>Homepage Layout</a>
</h3>
<div class="text-sm text-neutral-500 dark:text-neutral-400">
<div class="flex flex-row flex-wrap items-center">
<span title="Reading time">3 mins</span>
</div>
</div>
</article>
<article>
<h3 class="flex items-center mt-6 text-xl font-semibold">
<a class="hover:underline hover:underline-primary-500 hover:underline-offset-small text-neutral-800 dark:text-neutral" href=/congo/docs/front-matter/>Front Matter</a>
</h3>
<div class="text-sm text-neutral-500 dark:text-neutral-400">
<div class="flex flex-row flex-wrap items-center">
<span title="Reading time">3 mins</span>
</div>
</div>
</article>
<article>
<h3 class="flex items-center mt-6 text-xl font-semibold">
<a class="hover:underline hover:underline-primary-500 hover:underline-offset-small text-neutral-800 dark:text-neutral" href=/congo/docs/shortcodes/>Shortcodes</a>
</h3>
<div class="text-sm text-neutral-500 dark:text-neutral-400">
<div class="flex flex-row flex-wrap items-center">
<span title="Reading time">4 mins</span>
</div>
</div>
</article>
<article>
<h3 class="flex items-center mt-6 text-xl font-semibold">
<a class="hover:underline hover:underline-primary-500 hover:underline-offset-small text-neutral-800 dark:text-neutral" href=/congo/docs/partials/>Partials</a>
</h3>
<div class="text-sm text-neutral-500 dark:text-neutral-400">
<div class="flex flex-row flex-wrap items-center">
<span title="Reading time">4 mins</span>
</div>
</div>
</article>
<article>
<h3 class="flex items-center mt-6 text-xl font-semibold">
<a class="hover:underline hover:underline-primary-500 hover:underline-offset-small text-neutral-800 dark:text-neutral" href=/congo/docs/advanced-customisation/>Advanced Customisation</a>
<a class="hover:underline hover:decoration-primary-500 hover:underline-offset-2 text-neutral-800 dark:text-neutral" href=/congo/docs/getting-started/>Getting Started</a>
</h3>
<div class="text-sm text-neutral-500 dark:text-neutral-400">
<div class="flex flex-row flex-wrap items-center">
@ -153,7 +120,67 @@
</article>
<article>
<h3 class="flex items-center mt-6 text-xl font-semibold">
<a class="hover:underline hover:underline-primary-500 hover:underline-offset-small text-neutral-800 dark:text-neutral" href=/congo/docs/hosting-deployment/>Hosting & Deployment</a>
<a class="hover:underline hover:decoration-primary-500 hover:underline-offset-2 text-neutral-800 dark:text-neutral" href=/congo/docs/configuration/>Configuration</a>
</h3>
<div class="text-sm text-neutral-500 dark:text-neutral-400">
<div class="flex flex-row flex-wrap items-center">
<span title="Reading time">9 mins</span>
</div>
</div>
</article>
<article>
<h3 class="flex items-center mt-6 text-xl font-semibold">
<a class="hover:underline hover:decoration-primary-500 hover:underline-offset-2 text-neutral-800 dark:text-neutral" href=/congo/docs/homepage-layout/>Homepage Layout</a>
</h3>
<div class="text-sm text-neutral-500 dark:text-neutral-400">
<div class="flex flex-row flex-wrap items-center">
<span title="Reading time">3 mins</span>
</div>
</div>
</article>
<article>
<h3 class="flex items-center mt-6 text-xl font-semibold">
<a class="hover:underline hover:decoration-primary-500 hover:underline-offset-2 text-neutral-800 dark:text-neutral" href=/congo/docs/front-matter/>Front Matter</a>
</h3>
<div class="text-sm text-neutral-500 dark:text-neutral-400">
<div class="flex flex-row flex-wrap items-center">
<span title="Reading time">3 mins</span>
</div>
</div>
</article>
<article>
<h3 class="flex items-center mt-6 text-xl font-semibold">
<a class="hover:underline hover:decoration-primary-500 hover:underline-offset-2 text-neutral-800 dark:text-neutral" href=/congo/docs/shortcodes/>Shortcodes</a>
</h3>
<div class="text-sm text-neutral-500 dark:text-neutral-400">
<div class="flex flex-row flex-wrap items-center">
<span title="Reading time">5 mins</span>
</div>
</div>
</article>
<article>
<h3 class="flex items-center mt-6 text-xl font-semibold">
<a class="hover:underline hover:decoration-primary-500 hover:underline-offset-2 text-neutral-800 dark:text-neutral" href=/congo/docs/partials/>Partials</a>
</h3>
<div class="text-sm text-neutral-500 dark:text-neutral-400">
<div class="flex flex-row flex-wrap items-center">
<span title="Reading time">4 mins</span>
</div>
</div>
</article>
<article>
<h3 class="flex items-center mt-6 text-xl font-semibold">
<a class="hover:underline hover:decoration-primary-500 hover:underline-offset-2 text-neutral-800 dark:text-neutral" href=/congo/docs/advanced-customisation/>Advanced Customisation</a>
</h3>
<div class="text-sm text-neutral-500 dark:text-neutral-400">
<div class="flex flex-row flex-wrap items-center">
<span title="Reading time">8 mins</span>
</div>
</div>
</article>
<article>
<h3 class="flex items-center mt-6 text-xl font-semibold">
<a class="hover:underline hover:decoration-primary-500 hover:underline-offset-2 text-neutral-800 dark:text-neutral" href=/congo/docs/hosting-deployment/>Hosting & Deployment</a>
</h3>
<div class="text-sm text-neutral-500 dark:text-neutral-400">
<div class="flex flex-row flex-wrap items-center">
@ -162,18 +189,50 @@
</div>
</article>
</section>
</main><footer class=py-10>
</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">
&copy;
2022
Congo
© 2022 Congo contributors
</p>
<p class="text-xs text-neutral-400 dark:text-neutral-600">
Powered by <a class="hover:underline hover:underline-primary-400 hover:text-primary-500" href=https://gohugo.io/ target=_blank rel="noopener noreferrer">Hugo</a> & <a class="hover:underline hover:underline-primary-400 hover:text-primary-500" href=https://git.io/hugo-congo target=_blank rel="noopener noreferrer">Congo</a>
<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>

View File

@ -1 +1 @@
<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>docs on Congo</title><link>https://jpanther.github.io/congo/tags/docs/</link><description>Recent content in docs on Congo</description><generator>Hugo -- gohugo.io</generator><language>en-AU</language><lastBuildDate>Sun, 16 Aug 2020 00:00:00 +0000</lastBuildDate><atom:link href="https://jpanther.github.io/congo/tags/docs/index.xml" rel="self" type="application/rss+xml"/><item><title>Installation</title><link>https://jpanther.github.io/congo/docs/installation/</link><pubDate>Sun, 16 Aug 2020 00:00:00 +0000</pubDate><guid>https://jpanther.github.io/congo/docs/installation/</guid><description>Simply follow the standard Hugo Quick Start procedure to get up and running quickly.</description></item><item><title>Getting Started</title><link>https://jpanther.github.io/congo/docs/getting-started/</link><pubDate>Sat, 15 Aug 2020 00:00:00 +0000</pubDate><guid>https://jpanther.github.io/congo/docs/getting-started/</guid><description>This section assumes you have already installed the Congo theme.</description></item><item><title>Configuration</title><link>https://jpanther.github.io/congo/docs/configuration/</link><pubDate>Fri, 14 Aug 2020 00:00:00 +0000</pubDate><guid>https://jpanther.github.io/congo/docs/configuration/</guid><description>Congo is a highly customisable theme and uses some of the latest Hugo features to simplify how it is configured.</description></item><item><title>Homepage Layout</title><link>https://jpanther.github.io/congo/docs/homepage-layout/</link><pubDate>Thu, 13 Aug 2020 00:00:00 +0000</pubDate><guid>https://jpanther.github.io/congo/docs/homepage-layout/</guid><description>Congo provides a fully flexible homepage layout.</description></item><item><title>Front Matter</title><link>https://jpanther.github.io/congo/docs/front-matter/</link><pubDate>Wed, 12 Aug 2020 00:00:00 +0000</pubDate><guid>https://jpanther.github.io/congo/docs/front-matter/</guid><description>In addition to the default Hugo front matter parameters, Congo adds a number of additional options to customise the presentation of individual articles.</description></item><item><title>Shortcodes</title><link>https://jpanther.github.io/congo/docs/shortcodes/</link><pubDate>Tue, 11 Aug 2020 00:00:00 +0000</pubDate><guid>https://jpanther.github.io/congo/docs/shortcodes/</guid><description>In addition to all the default Hugo shortcodes, Congo adds a few extras for additional functionality.</description></item><item><title>Partials</title><link>https://jpanther.github.io/congo/docs/partials/</link><pubDate>Mon, 10 Aug 2020 00:00:00 +0000</pubDate><guid>https://jpanther.github.io/congo/docs/partials/</guid><description>Analytics # Congo provides built-in support for Fathom Analytics and Google Analytics.</description></item><item><title>Advanced Customisation</title><link>https://jpanther.github.io/congo/docs/advanced-customisation/</link><pubDate>Sun, 09 Aug 2020 00:00:00 +0000</pubDate><guid>https://jpanther.github.io/congo/docs/advanced-customisation/</guid><description>There are many ways you can make advanced changes to Congo.</description></item><item><title>Hosting &amp; Deployment</title><link>https://jpanther.github.io/congo/docs/hosting-deployment/</link><pubDate>Sat, 08 Aug 2020 00:00:00 +0000</pubDate><guid>https://jpanther.github.io/congo/docs/hosting-deployment/</guid><description>There are many ways to deploy your Hugo website built with Congo.</description></item></channel></rss>
<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>docs on Congo</title><link>https://jpanther.github.io/congo/tags/docs/</link><description>Recent content in docs on Congo</description><generator>Hugo -- gohugo.io</generator><language>en-au</language><copyright>&amp;copy; 2022 Congo contributors</copyright><lastBuildDate>Thu, 20 Jan 2022 00:00:00 +0000</lastBuildDate><atom:link href="https://jpanther.github.io/congo/tags/docs/index.xml" rel="self" type="application/rss+xml"/><item><title>Upgrading from Congo 1.x</title><link>https://jpanther.github.io/congo/docs/version-2/upgrade/</link><pubDate>Thu, 20 Jan 2022 00:00:00 +0000</pubDate><guid>https://jpanther.github.io/congo/docs/version-2/upgrade/</guid><description>Although Congo 2.</description></item><item><title>What's New in 2.0 ✨</title><link>https://jpanther.github.io/congo/docs/version-2/</link><pubDate>Wed, 19 Jan 2022 00:00:00 +0000</pubDate><guid>https://jpanther.github.io/congo/docs/version-2/</guid><description>Congo 2.</description></item><item><title>Installation</title><link>https://jpanther.github.io/congo/docs/installation/</link><pubDate>Sun, 16 Aug 2020 00:00:00 +0000</pubDate><guid>https://jpanther.github.io/congo/docs/installation/</guid><description>Simply follow the standard Hugo Quick Start procedure to get up and running quickly.</description></item><item><title>Getting Started</title><link>https://jpanther.github.io/congo/docs/getting-started/</link><pubDate>Sat, 15 Aug 2020 00:00:00 +0000</pubDate><guid>https://jpanther.github.io/congo/docs/getting-started/</guid><description>This section assumes you have already installed the Congo theme.</description></item><item><title>Configuration</title><link>https://jpanther.github.io/congo/docs/configuration/</link><pubDate>Fri, 14 Aug 2020 00:00:00 +0000</pubDate><guid>https://jpanther.github.io/congo/docs/configuration/</guid><description>Congo is a highly customisable theme and uses some of the latest Hugo features to simplify how it is configured.</description></item><item><title>Homepage Layout</title><link>https://jpanther.github.io/congo/docs/homepage-layout/</link><pubDate>Thu, 13 Aug 2020 00:00:00 +0000</pubDate><guid>https://jpanther.github.io/congo/docs/homepage-layout/</guid><description>Congo provides a fully flexible homepage layout.</description></item><item><title>Front Matter</title><link>https://jpanther.github.io/congo/docs/front-matter/</link><pubDate>Wed, 12 Aug 2020 00:00:00 +0000</pubDate><guid>https://jpanther.github.io/congo/docs/front-matter/</guid><description>In addition to the default Hugo front matter parameters, Congo adds a number of additional options to customise the presentation of individual articles.</description></item><item><title>Shortcodes</title><link>https://jpanther.github.io/congo/docs/shortcodes/</link><pubDate>Tue, 11 Aug 2020 00:00:00 +0000</pubDate><guid>https://jpanther.github.io/congo/docs/shortcodes/</guid><description>In addition to all the default Hugo shortcodes, Congo adds a few extras for additional functionality.</description></item><item><title>Partials</title><link>https://jpanther.github.io/congo/docs/partials/</link><pubDate>Mon, 10 Aug 2020 00:00:00 +0000</pubDate><guid>https://jpanther.github.io/congo/docs/partials/</guid><description>Analytics # Congo provides built-in support for Fathom Analytics and Google Analytics.</description></item><item><title>Advanced Customisation</title><link>https://jpanther.github.io/congo/docs/advanced-customisation/</link><pubDate>Sat, 08 Aug 2020 00:00:00 +0000</pubDate><guid>https://jpanther.github.io/congo/docs/advanced-customisation/</guid><description>There are many ways you can make advanced changes to Congo.</description></item><item><title>Hosting &amp; Deployment</title><link>https://jpanther.github.io/congo/docs/hosting-deployment/</link><pubDate>Fri, 07 Aug 2020 00:00:00 +0000</pubDate><guid>https://jpanther.github.io/congo/docs/hosting-deployment/</guid><description>There are many ways to deploy your Hugo website built with Congo.</description></item></channel></rss>

View File

@ -1,102 +1,139 @@
<!doctype html><html lang=en-au><head>
<!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 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>emoji &#183; Congo</title>
<meta name=title content="emoji &#183; Congo">
<meta name=description content>
<meta name=description content="A powerful, lightweight theme for Hugo built with Tailwind CSS.">
<link rel=canonical href=https://jpanther.github.io/congo/tags/emoji/>
<link rel=alternate type=application/rss+xml href=/congo/tags/emoji/index.xml title=Congo>
<link type=text/css rel=stylesheet href=/congo/css/schemes/congo.min.b48d6ba061dc77186a2524fb8aac5ac3823b2679a9299ca60325abbccc9c1764c884715f0ba24b4e2776cb3814df4af1f4c854b87207cd5d4c7a254da9b55751.css integrity="sha512-tI1roGHcdxhqJST7iqxaw4I7JnmpKZymAyWrvMycF2TIhHFfC6JLTid2yzgU30rx9MhUuHIHzV1MeiVNqbVXUQ==">
<link type=text/css rel=stylesheet href=/congo/css/compiled/main.min.51037225bb3c65887773b052da1e38f105db8f3d9aa6a34ba3c5c40c88fb309724f8cc5ed2871adc7e55dacab9b36c60ce7aa7a61dff2cc638f8b435c898d5a8.css integrity="sha512-UQNyJbs8ZYh3c7BS2h448QXbjz2apqNLo8XEDIj7MJck+Mxe0oca3H5V2sq5s2xgznqnph3/LMY4+LQ1yJjVqA==">
<script>function loadPreferredAppearance(){localStorage.preferredAppearance==="dark"||!("preferredAppearance"in localStorage)&&window.matchMedia("(prefers-color-scheme: dark)").matches?document.documentElement.classList.add("dark"):document.documentElement.classList.remove("dark")}function setPreferredAppearance(a){a=="default"?localStorage.removeItem("preferredAppearance"):localStorage.preferredAppearance=a,loadPreferredAppearance()}loadPreferredAppearance(),window.matchMedia("(prefers-color-scheme: dark)").addListener(loadPreferredAppearance)</script>
<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="emoji">
<meta property="og:description" content>
<meta property="og:description" content="A powerful, lightweight theme for Hugo built with Tailwind CSS.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://jpanther.github.io/congo/tags/emoji/">
<meta property="og:url" content="https://jpanther.github.io/congo/tags/emoji/"><meta property="og:site_name" content="Congo">
<meta name=twitter:card content="summary">
<meta name=twitter:title content="emoji">
<meta name=twitter:description content>
<meta name=generator content="Hugo 0.92.0">
<meta name=twitter:description content="A powerful, lightweight theme for Hugo built with Tailwind CSS.">
<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"><header class="flex justify-between py-6 font-semibold sm:items-center sm:py-10 text-neutral-900 dark:text-neutral">
<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:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" rel=me href=/congo/>Congo</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=/congo/docs/ title=Documentation>Docs</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=/congo/samples/ title="Content Samples">Samples</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=/congo/users/ title=Users>Users</a>
<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 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=https://github.com/jpanther/congo title>GitHub</a>
<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 class=flex-grow>
<main id=main-content class=relative>
<header>
<ol class="text-sm text-neutral-500 dark:text-neutral-400">
<li class="inline hidden">
<a class="hover:underline hover:underline-neutral-300 dark:underline-neutral-600" href=/congo/>Welcome to Congo! :tada:</a><span class="px-1 text-primary-500">/</span>
<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:underline-neutral-300 dark:underline-neutral-600" href=/congo/tags/>Tags</a><span class="px-1 text-primary-500">/</span>
<a class="hover:underline hover:decoration-neutral-300 dark:underline-neutral-600" href=/congo/tags/>Tags</a><span class="px-1 text-primary-500">/</span>
</li>
<li class="inline hidden">
<a class="hover:underline hover:underline-neutral-300 dark:underline-neutral-600" href=/congo/tags/emoji/>emoji</a><span class="px-1 text-primary-500">/</span>
<a class="hover:underline hover:decoration-neutral-300 dark:underline-neutral-600" href=/congo/tags/emoji/>emoji</a><span class="px-1 text-primary-500">/</span>
</li>
</ol>
<section class="prose dark:prose-light">
<h1 class="mb-3 text-4xl font-extrabold text-neutral-800">emoji</h1>
<section></section>
</section>
<h1 class="mt-0 text-4xl font-extrabold text-neutral-900 dark:text-neutral">emoji</h1>
</header>
<section>
<h2 class="mt-12 text-2xl font-bold first:mt-8">2019</h2>
<hr class="border-dotted border-neutral-400 w-36">
<article>
<h3 class="flex items-center mt-6 text-xl font-semibold">
<a class="hover:underline hover:underline-primary-500 hover:underline-offset-small text-neutral-800 dark:text-neutral" href=/congo/samples/emoji/>Emoji 🪂</a>
<a class="hover:underline hover:decoration-primary-500 hover:underline-offset-2 text-neutral-800 dark:text-neutral" href=/congo/samples/emoji/>Emoji 🪂</a>
</h3>
<div class="text-sm text-neutral-500 dark:text-neutral-400">
<div class="flex flex-row flex-wrap items-center">
<time datetime="2019-03-05 00:00:00 +0000 UTC">5 March 2019</time><span class="px-2 text-primary-500">&#183;</span><span title="Reading time">1 min</span>
</div>
</div>
<div class="py-1 prose dark:prose-light">
<div class="py-1 prose dark:prose-invert">
📖🏞️🧗🏽🐉🧙🏽‍♂️🧚🏽👸
</div>
</article>
</section>
</main><footer class=py-10>
</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">
&copy;
2022
Congo
© 2022 Congo contributors
</p>
<p class="text-xs text-neutral-400 dark:text-neutral-600">
Powered by <a class="hover:underline hover:underline-primary-400 hover:text-primary-500" href=https://gohugo.io/ target=_blank rel="noopener noreferrer">Hugo</a> & <a class="hover:underline hover:underline-primary-400 hover:text-primary-500" href=https://git.io/hugo-congo target=_blank rel="noopener noreferrer">Congo</a>
<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>

Some files were not shown because too many files have changed in this diff Show More