gh-pages
jpanther 2022-11-10 02:13:45 +00:00
parent b7e373310a
commit 0efce99298
128 changed files with 1762 additions and 547 deletions

View File

@ -1,6 +1,5 @@
<!doctype html><html lang=en-au dir=ltr class=scroll-smooth data-default-appearance=light 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>404 Page not found &#183; Congo</title><meta name=title content="404 Page not found &#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/404.html><link type=text/css rel=stylesheet href=/congo/css/main.bundle.min.3552466d62941f854cc764b706ab5b2e3616325dd23313577f99ff83f095a09e436d4734656eb0ab9f588d93c251fdf636660a728c2f6ccb49697325daac8a6c.css integrity="sha512-NVJGbWKUH4VMx2S3BqtbLjYWMl3SMxNXf5n/g/CVoJ5DbUc0ZW6wq59YjZPCUf32NmYKcowvbMtJaXMl2qyKbA=="><script type=text/javascript src=/congo/js/appearance.min.badab316c9287a5a42a843e4eb45da65bb3d194a5a0f5fa4a3e516160e67df0b8c65f4f19a8e146436e29d583699e6cb41d6bbe99e05e1dbaa877763bad9f8e2.js integrity="sha512-utqzFskoelpCqEPk60XaZbs9GUpaD1+ko+UWFg5n3wuMZfTxmo4UZDbinVg2mebLQda76Z4F4duqh3djutn44g=="></script> <!doctype html><html lang=en-au dir=ltr class=scroll-smooth data-default-appearance=light 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>404 Page not found &#183; Congo</title><meta name=title content="404 Page not found &#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/404.html><link type=text/css rel=stylesheet href=/congo/css/main.bundle.min.2aa0f8f5cb9b8644385c0ca742c7054ae86d1edd18dce3b0de51c3d5ae4eff5d93f5224afa4205b8c02f10866a39de3ad83e2d4827e696ecd3aa2707382d4cf3.css integrity="sha512-KqD49cubhkQ4XAynQscFSuhtHt0Y3OOw3lHD1a5O/12T9SJK+kIFuMAvEIZqOd462D4tSCfmluzTqicHOC1M8w=="><script type=text/javascript src=/congo/js/appearance.min.badab316c9287a5a42a843e4eb45da65bb3d194a5a0f5fa4a3e516160e67df0b8c65f4f19a8e146436e29d583699e6cb41d6bbe99e05e1dbaa877763bad9f8e2.js integrity="sha512-utqzFskoelpCqEPk60XaZbs9GUpaD1+ko+UWFg5n3wuMZfTxmo4UZDbinVg2mebLQda76Z4F4duqh3djutn44g=="></script>
<script defer type=text/javascript id=script-bundle src=/congo/js/main.bundle.min.b607eb5ea0f48ef635db6a1c024a35eeff4529157e49461941aac333a158a1f71cae4e530d45ac010598695f823dbe38a63142757e37c2d7b74a309d7296f681.js integrity="sha512-tgfrXqD0jvY122ocAko17v9FKRV+SUYZQarDM6FYofccrk5TDUWsAQWYaV+CPb44pjFCdX43wte3SjCdcpb2gQ==" data-copy=Copy data-copied=Copied></script> <script defer type=text/javascript id=script-bundle src=/congo/js/main.bundle.min.6d78c827ca7bcbf72056dbf698bf9aeb759a08966686187deb23f5949f73eca5f39b461284900cdfc08e2976d99eb80a8663648de778ba2a83e633ae16dbfc25.js integrity="sha512-bXjIJ8p7y/cgVtv2mL+a63WaCJZmhhh96yP1lJ9z7KXzm0YShJAM38COKXbZnrgKhmNkjed4uiqD5jOuFtv8JQ==" 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="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:site_name" content="Congo"><meta name=twitter:card content="summary"><meta name=twitter:title content="404 Page not found"><meta name=twitter:description content="A powerful, lightweight theme for Hugo built with Tailwind CSS."><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="py-6 font-semibold sm:py-10 text-neutral-900 dark:text-neutral print:hidden"><nav class="flex justify-between"><div><a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" rel=me href=/congo/>Congo</a></div><ul class="flex flex-col list-none ltr:text-right rtl:text-left sm:flex-row"><li class="mb-1 sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"><a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" href=/congo/docs/ title=Documentation>Docs</a></li><li class="mb-1 sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"><a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" href=/congo/samples/ title="Content Samples">Samples</a></li><li class="mb-1 sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"><a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" href=/congo/users/ title=Users>Users</a></li><li class="mb-1 sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"><a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" href=https://github.com/jpanther/congo title>GitHub</a></li><li class="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 (/)"> <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="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:site_name" content="Congo"><meta name=twitter:card content="summary"><meta name=twitter:title content="404 Page not found"><meta name=twitter:description content="A powerful, lightweight theme for Hugo built with Tailwind CSS."><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 max-w-7xl bg-neutral text-neutral-900 dark:bg-neutral-800 dark:text-neutral sm:px-14 md:px-24 lg:px-32"><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 focus:translate-y-0 dark:bg-neutral-600" href=#main-content><span class="font-bold text-primary-600 ltr:pr-2 rtl:pl-2 dark:text-primary-400">&darr;</span>Skip to main content</a></div><header class="py-6 font-semibold text-neutral-900 dark:text-neutral print:hidden sm:py-10"><nav class="flex items-start justify-between sm:items-center"><div class="flex flex-row items-center"><a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" rel=me href=/congo/>Congo</a></div><ul class="flex list-none flex-col ltr:text-right rtl:text-left sm:flex-row"><li class="mb-1 sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"><a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" href=/congo/docs/ title=Documentation>Docs</a></li><li class="mb-1 sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"><a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" href=/congo/samples/ title="Content Samples">Samples</a></li><li class="mb-1 sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"><a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" href=/congo/users/ title=Users>Users</a></li><li class="mb-1 sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"><a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" href=https://github.com/jpanther/congo title>GitHub</a></li><li class="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><div class="relative flex flex-col grow"><main id=main-content class=grow><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-invert"><p>It seems that the page you've requested does not exist.</p></div></main><footer class="py-10 print:hidden"><div class="flex items-center 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="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><div class="relative flex flex-col grow"><main id=main-content class=grow><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-invert"><p>It seems that the page you've requested does not exist.</p></div></main><footer class="py-10 print:hidden"><div class="flex items-center 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="ltr:mr-14 rtl:ml-14 cursor-pointer text-sm text-neutral-700 hover:text-primary-600 dark:text-neutral dark:hover:text-primary-400"><button id=appearance-switcher type=button><div class="flex items-center justify-center w-12 h-12 dark:hidden" title="Switch to dark appearance"><span class="relative inline-block align-text-bottom icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentcolor" d="M32 256C32 132.2 132.3 32 255.8 32c11.36.0 29.7 1.668 40.9 3.746 9.616 1.777 11.75 14.63 3.279 19.44C245 86.5 211.2 144.6 211.2 207.8c0 109.7 99.71 193 208.3 172.3 9.561-1.805 16.28 9.324 10.11 16.95C387.9 448.6 324.8 480 255.8 480 132.1 480 32 379.6 32 256z"/></svg></span></div><div class="items-center justify-center hidden w-12 h-12 dark:flex" title="Switch to light appearance"><span class="relative inline-block align-text-bottom icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentcolor" d="M256 159.1c-53.02.0-95.1 42.98-95.1 95.1s41.2 96.9 95.1 96.9 95.1-42.98 95.1-95.1S309 159.1 256 159.1zM509.3 347l-63.2-91.9 63.15-91.01c6.332-9.125 1.104-21.74-9.826-23.72l-109-19.7-19.7-109c-1.975-10.93-14.59-16.16-23.72-9.824L256 65.89 164.1 2.736c-9.125-6.332-21.74-1.107-23.72 9.824L121.6 121.6 12.56 141.3C1.633 143.2-3.596 155.9 2.736 164.1L65.89 256 2.74 347.01c-6.332 9.125-1.105 21.74 9.824 23.72l109 19.7 19.7 109c1.975 10.93 14.59 16.16 23.72 9.824L256 446.1l91.01 63.15c9.127 6.334 21.75 1.107 23.72-9.822l19.7-109 109-19.7C510.4 368.8 515.6 356.1 509.3 347zM256 383.1c-70.69.0-127.1-57.31-127.1-127.1.0-70.69 57.31-127.1 127.1-127.1S383.1 186.2 383.1 256c0 70.7-56.4 127.1-127.1 127.1z"/></svg></span></div></button></div></div></footer><div id=search-wrapper class="invisible fixed inset-0 z-50 flex h-screen w-screen cursor-default flex-col bg-neutral-500/50 p-4 backdrop-blur-sm dark:bg-neutral-900/50 sm:p-6 md:p-[10vh] lg:p-[12vh]" 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 top-20 border-neutral-200 bg-neutral dark:border-neutral-700 dark:bg-neutral-800"><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-2 focus:outline-transparent" placeholder=Search tabindex=0></form><button id=close-search-button class="flex items-center justify-center w-8 h-8 text-neutral-700 hover:text-primary-600 dark:text-neutral dark:hover:text-primary-400" title="Close (Esc)">
<span class="inline dark:hidden"><span class="relative inline-block align-text-bottom icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentcolor" d="M32 256C32 132.2 132.3 32 255.8 32c11.36.0 29.7 1.668 40.9 3.746 9.616 1.777 11.75 14.63 3.279 19.44C245 86.5 211.2 144.6 211.2 207.8c0 109.7 99.71 193 208.3 172.3 9.561-1.805 16.28 9.324 10.11 16.95C387.9 448.6 324.8 480 255.8 480 132.1 480 32 379.6 32 256z"/></svg></span></span><span class="hidden dark:inline"><span class="relative inline-block align-text-bottom icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentcolor" d="M256 159.1c-53.02.0-95.1 42.98-95.1 95.1s41.2 96.9 95.1 96.9 95.1-42.98 95.1-95.1S309 159.1 256 159.1zM509.3 347l-63.2-91.9 63.15-91.01c6.332-9.125 1.104-21.74-9.826-23.72l-109-19.7-19.7-109c-1.975-10.93-14.59-16.16-23.72-9.824L256 65.89 164.1 2.736c-9.125-6.332-21.74-1.107-23.72 9.824L121.6 121.6 12.56 141.3C1.633 143.2-3.596 155.9 2.736 164.1L65.89 256 2.74 347.01c-6.332 9.125-1.105 21.74 9.824 23.72l109 19.7 19.7 109c1.975 10.93 14.59 16.16 23.72 9.824L256 446.1l91.01 63.15c9.127 6.334 21.75 1.107 23.72-9.822l19.7-109 109-19.7C510.4 368.8 515.6 356.1 509.3 347zM256 383.1c-70.69.0-127.1-57.31-127.1-127.1.0-70.69 57.31-127.1 127.1-127.1S383.1 186.2 383.1 256c0 70.7-56.4 127.1-127.1 127.1z"/></svg></span></span></button></div></div></footer><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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentcolor" d="M310.6 361.4c12.5 12.5 12.5 32.75.0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3 54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75.0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75.0-45.25s32.75-12.5 45.25.0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25.0s12.5 32.75.0 45.25l-105.4 105.4L310.6 361.4z"/></svg></span></button></header><section class="flex-auto px-2 overflow-auto"><ul id=search-results></ul></section></div></div></div></body></html> <span class="relative inline-block align-text-bottom icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentcolor" d="M310.6 361.4c12.5 12.5 12.5 32.75.0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3 54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75.0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75.0-45.25s32.75-12.5 45.25.0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25.0s12.5 32.75.0 45.25l-105.4 105.4L310.6 361.4z"/></svg></span></button></header><section class="flex-auto px-2 overflow-auto"><ul id=search-results></ul></section></div></div></div></body></html>

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

Binary file not shown.

After

Width:  |  Height:  |  Size: 44 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

View File

@ -1,12 +1,12 @@
<!doctype html><html lang=en-au dir=ltr class=scroll-smooth data-default-appearance=light 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>Getting Started &#183; Congo</title><meta name=title content="Getting Started &#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/getting-started/><link type=text/css rel=stylesheet href=/congo/css/main.bundle.min.3552466d62941f854cc764b706ab5b2e3616325dd23313577f99ff83f095a09e436d4734656eb0ab9f588d93c251fdf636660a728c2f6ccb49697325daac8a6c.css integrity="sha512-NVJGbWKUH4VMx2S3BqtbLjYWMl3SMxNXf5n/g/CVoJ5DbUc0ZW6wq59YjZPCUf32NmYKcowvbMtJaXMl2qyKbA=="><script type=text/javascript src=/congo/js/appearance.min.badab316c9287a5a42a843e4eb45da65bb3d194a5a0f5fa4a3e516160e67df0b8c65f4f19a8e146436e29d583699e6cb41d6bbe99e05e1dbaa877763bad9f8e2.js integrity="sha512-utqzFskoelpCqEPk60XaZbs9GUpaD1+ko+UWFg5n3wuMZfTxmo4UZDbinVg2mebLQda76Z4F4duqh3djutn44g=="></script> <!doctype html><html lang=en-au dir=ltr class=scroll-smooth data-default-appearance=light 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>Getting Started &#183; Congo</title><meta name=title content="Getting Started &#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/getting-started/><link type=text/css rel=stylesheet href=/congo/css/main.bundle.min.2aa0f8f5cb9b8644385c0ca742c7054ae86d1edd18dce3b0de51c3d5ae4eff5d93f5224afa4205b8c02f10866a39de3ad83e2d4827e696ecd3aa2707382d4cf3.css integrity="sha512-KqD49cubhkQ4XAynQscFSuhtHt0Y3OOw3lHD1a5O/12T9SJK+kIFuMAvEIZqOd462D4tSCfmluzTqicHOC1M8w=="><script type=text/javascript src=/congo/js/appearance.min.badab316c9287a5a42a843e4eb45da65bb3d194a5a0f5fa4a3e516160e67df0b8c65f4f19a8e146436e29d583699e6cb41d6bbe99e05e1dbaa877763bad9f8e2.js integrity="sha512-utqzFskoelpCqEPk60XaZbs9GUpaD1+ko+UWFg5n3wuMZfTxmo4UZDbinVg2mebLQda76Z4F4duqh3djutn44g=="></script>
<script defer type=text/javascript id=script-bundle src=/congo/js/main.bundle.min.b607eb5ea0f48ef635db6a1c024a35eeff4529157e49461941aac333a158a1f71cae4e530d45ac010598695f823dbe38a63142757e37c2d7b74a309d7296f681.js integrity="sha512-tgfrXqD0jvY122ocAko17v9FKRV+SUYZQarDM6FYofccrk5TDUWsAQWYaV+CPb44pjFCdX43wte3SjCdcpb2gQ==" data-copy=Copy data-copied=Copied></script> <script defer type=text/javascript id=script-bundle src=/congo/js/main.bundle.min.6d78c827ca7bcbf72056dbf698bf9aeb759a08966686187deb23f5949f73eca5f39b461284900cdfc08e2976d99eb80a8663648de778ba2a83e633ae16dbfc25.js integrity="sha512-bXjIJ8p7y/cgVtv2mL+a63WaCJZmhhh96yP1lJ9z7KXzm0YShJAM38COKXbZnrgKhmNkjed4uiqD5jOuFtv8JQ==" 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="Getting Started"><meta property="og:description" content="All the front matter variables available in Congo."><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="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":"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":"897"}]</script><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="py-6 font-semibold sm:py-10 text-neutral-900 dark:text-neutral print:hidden"><nav class="flex justify-between"><div><a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" rel=me href=/congo/>Congo</a></div><ul class="flex flex-col list-none ltr:text-right rtl:text-left sm:flex-row"><li class="mb-1 sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"><a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" href=/congo/docs/ title=Documentation>Docs</a></li><li class="mb-1 sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"><a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" href=/congo/samples/ title="Content Samples">Samples</a></li><li class="mb-1 sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"><a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" href=/congo/users/ title=Users>Users</a></li><li class="mb-1 sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"><a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" href=https://github.com/jpanther/congo title>GitHub</a></li><li class="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 (/)"> <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="Getting Started"><meta property="og:description" content="All the front matter variables available in Congo."><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="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":"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":"1219"}]</script><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 max-w-7xl bg-neutral text-neutral-900 dark:bg-neutral-800 dark:text-neutral sm:px-14 md:px-24 lg:px-32"><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 focus:translate-y-0 dark:bg-neutral-600" href=#main-content><span class="font-bold text-primary-600 ltr:pr-2 rtl:pl-2 dark:text-primary-400">&darr;</span>Skip to main content</a></div><header class="py-6 font-semibold text-neutral-900 dark:text-neutral print:hidden sm:py-10"><nav class="flex items-start justify-between sm:items-center"><div class="flex flex-row items-center"><a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" rel=me href=/congo/>Congo</a></div><ul class="flex list-none flex-col ltr:text-right rtl:text-left sm:flex-row"><li class="mb-1 sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"><a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" href=/congo/docs/ title=Documentation>Docs</a></li><li class="mb-1 sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"><a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" href=/congo/samples/ title="Content Samples">Samples</a></li><li class="mb-1 sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"><a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" href=/congo/users/ title=Users>Users</a></li><li class="mb-1 sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"><a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" href=https://github.com/jpanther/congo title>GitHub</a></li><li class="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><div class="relative flex flex-col grow"><main id=main-content class=grow><article><header class=max-w-prose><ol class="text-sm text-neutral-500 dark:text-neutral-400 print:hidden"><li class="inline hidden"><a class="hover:underline 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 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 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">Getting Started</h1><div class="mt-8 mb-12 text-base text-neutral-500 dark:text-neutral-400 print:hidden"><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 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><div class="relative flex flex-col grow"><main id=main-content class=grow><article><header class=max-w-prose><ol class="text-sm text-neutral-500 dark:text-neutral-400 print:hidden"><li class="inline hidden"><a class="hover:underline 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 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 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">Getting Started</h1><div class="mt-8 mb-12 text-base text-neutral-500 dark:text-neutral-400 print:hidden"><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/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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentcolor" d="M490.3 40.4c21.9 21.87 21.9 57.33.0 79.2l-30 30.1-98-97.98 30.1-30.06C414.3-.2135 449.7-.2135 471.6 21.66L490.3 40.4zM172.4 241.7 339.7 74.34l98 97.96L270.3 339.6C264.2 345.8 256.7 350.4 248.4 353.2l-88.8 29.6C150.1 385.6 141.5 383.4 135 376.1 128.6 370.5 126.4 361 129.2 352.4l29.6-88.8C161.6 255.3 166.2 247.8 172.4 241.7v0zM192 63.1c17.7.0 32 15.23 32 32 0 18.6-14.3 32-32 32H96c-17.67.0-32 15.2-32 32V416c0 17.7 14.33 32 32 32H352c17.7.0 32-14.3 32-32V319.1c0-16.8 14.3-32 32-32s32 15.2 32 32V416c0 53-43 96-96 96H96c-53.02.0-96-43-96-96V159.1c0-53 42.98-96 96-96h96z"/></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 print:hidden"><details open class="mt-0 overflow-hidden rounded-lg rtl:pr-5 ltr:pl-5 ltr:-ml-5 rtl:-mr-5"><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="ltr:pr-3 rtl:pl-3 text-primary-400"><span class="relative inline-block align-text-bottom icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentcolor" d="M506.3 417 293 53c-16.33-28-57.54-28-73.98.0l-213.2 364C-10.59 444.9 9.849 480 42.74 480h426.6c32.76.0 53.26-35 36.96-63zM232 168c0-13.25 10.75-24 24-24s24 10.8 24 24v128c0 13.25-10.75 24-23.1 24S232 309.3 232 296V168zm24 248c-17.36.0-31.44-14.08-31.44-31.44s14.07-31.44 31.44-31.44 31.44 14.08 31.44 31.44C287.4 401.9 273.4 416 256 416z"/></svg></span></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><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=line><span class=cl><span class=c># config/_default/config.toml</span> <span class=mb-[2px]><a href=https://github.com/jpanther/congo/tree/dev/exampleSite/content/docs/getting-started/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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentcolor" d="M490.3 40.4c21.9 21.87 21.9 57.33.0 79.2l-30 30.1-98-97.98 30.1-30.06C414.3-.2135 449.7-.2135 471.6 21.66L490.3 40.4zM172.4 241.7 339.7 74.34l98 97.96L270.3 339.6C264.2 345.8 256.7 350.4 248.4 353.2l-88.8 29.6C150.1 385.6 141.5 383.4 135 376.1 128.6 370.5 126.4 361 129.2 352.4l29.6-88.8C161.6 255.3 166.2 247.8 172.4 241.7v0zM192 63.1c17.7.0 32 15.23 32 32 0 18.6-14.3 32-32 32H96c-17.67.0-32 15.2-32 32V416c0 17.7 14.33 32 32 32H352c17.7.0 32-14.3 32-32V319.1c0-16.8 14.3-32 32-32s32 15.2 32 32V416c0 53-43 96-96 96H96c-53.02.0-96-43-96-96V159.1c0-53 42.98-96 96-96h96z"/></svg></span></a></span></div></div></header><section class="flex flex-col max-w-full mt-0 prose dark:prose-invert lg:flex-row"><div class="order-first px-0 lg:order-last lg:max-w-xs ltr:lg:pl-8 rtl:lg:pr-8"><div class="toc ltr:pl-5 rtl:pr-5 print:hidden lg:sticky lg:top-10"><details open class="mt-0 overflow-hidden rounded-lg ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5"><summary class="block py-1 text-lg font-semibold cursor-pointer bg-neutral-100 text-neutral-800 ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5 dark:bg-neutral-700 dark:text-neutral-100 lg:hidden">Table of Contents</summary><div class="py-2 border-dotted border-neutral-300 ltr:-ml-5 ltr:border-l ltr:pl-5 rtl:-mr-5 rtl:border-r rtl:pr-5 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><ul><li><a href=#directory-structure>Directory structure</a></li><li><a href=#feature-cover-and-thumbnail-images>Feature, cover and thumbnail images</a></li><li><a href=#taxonomies>Taxonomies</a></li></ul></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 grow"><div class="flex px-4 py-3 rounded-md bg-primary-100 dark:bg-primary-900"><span class="text-primary-400 ltr:pr-3 rtl:pl-3"><span class="relative inline-block align-text-bottom icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentcolor" d="M506.3 417 293 53c-16.33-28-57.54-28-73.98.0l-213.2 364C-10.59 444.9 9.849 480 42.74 480h426.6c32.76.0 53.26-35 36.96-63zM232 168c0-13.25 10.75-24 24-24s24 10.8 24 24v128c0 13.25-10.75 24-23.1 24S232 309.3 232 296V168zm24 248c-17.36.0-31.44-14.08-31.44-31.44s14.07-31.44 31.44-31.44 31.44 14.08 31.44 31.44C287.4 401.9 273.4 416 256 416z"/></svg></span></span><span class=dark:text-neutral-300>This section assumes you have already <a href=https://jpanther.github.io/congo/docs/installation/ target=_blank>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><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=line><span class=cl><span class=c># config/_default/config.toml</span>
</span></span><span class=line><span class=cl> </span></span><span class=line><span class=cl>
</span></span><span class=line><span class=cl><span class=nx>baseURL</span> <span class=p>=</span> <span class=s2>&#34;https://your_domain.com/&#34;</span> </span></span><span class=line><span class=cl><span class=nx>baseURL</span> <span class=p>=</span> <span class=s2>&#34;https://your_domain.com/&#34;</span>
</span></span><span class=line><span class=cl><span class=nx>languageCode</span> <span class=p>=</span> <span class=s2>&#34;en&#34;</span> </span></span><span class=line><span class=cl><span class=nx>languageCode</span> <span class=p>=</span> <span class=s2>&#34;en&#34;</span>
</span></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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentcolor" d="M506.3 417 293 53c-16.33-28-57.54-28-73.98.0l-213.2 364C-10.59 444.9 9.849 480 42.74 480h426.6c32.76.0 53.26-35 36.96-63zM232 168c0-13.25 10.75-24 24-24s24 10.8 24 24v128c0 13.25-10.75 24-23.1 24S232 309.3 232 296V168zm24 248c-17.36.0-31.44-14.08-31.44-31.44s14.07-31.44 31.44-31.44 31.44 14.08 31.44 31.44C287.4 401.9 273.4 416 256 416z"/></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=line><span class=cl><span class=c># config/_default/languages.en.toml</span> </span></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="text-primary-400 ltr:pr-3 rtl:pl-3"><span class="relative inline-block align-text-bottom icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentcolor" d="M506.3 417 293 53c-16.33-28-57.54-28-73.98.0l-213.2 364C-10.59 444.9 9.849 480 42.74 480h426.6c32.76.0 53.26-35 36.96-63zM232 168c0-13.25 10.75-24 24-24s24 10.8 24 24v128c0 13.25-10.75 24-23.1 24S232 309.3 232 296V168zm24 248c-17.36.0-31.44-14.08-31.44-31.44s14.07-31.44 31.44-31.44 31.44 14.08 31.44 31.44C287.4 401.9 273.4 416 256 416z"/></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=line><span class=cl><span class=c># config/_default/languages.en.toml</span>
</span></span><span class=line><span class=cl> </span></span><span class=line><span class=cl>
</span></span><span class=line><span class=cl><span class=nx>title</span> <span class=p>=</span> <span class=s2>&#34;My awesome website&#34;</span> </span></span><span class=line><span class=cl><span class=nx>title</span> <span class=p>=</span> <span class=s2>&#34;My awesome website&#34;</span>
</span></span><span class=line><span class=cl> </span></span><span class=line><span class=cl>
@ -21,7 +21,7 @@
</span></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>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=line><span class=cl><span class=c># config/_default/params.toml</span> </span></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>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=line><span class=cl><span class=c># config/_default/params.toml</span>
</span></span><span class=line><span class=cl> </span></span><span class=line><span class=cl>
</span></span><span class=line><span class=cl><span class=nx>colorScheme</span> <span class=p>=</span> <span class=s2>&#34;congo&#34;</span> </span></span><span class=line><span class=cl><span class=nx>colorScheme</span> <span class=p>=</span> <span class=s2>&#34;congo&#34;</span>
</span></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 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></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 target=_blank>Tailwind</a>.</p><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:#8b5cf6></span>
<span class="w-full py-6 mr-3 rounded-md" style=background-color:#d946ef></span></div><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:#d946ef></span></div><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:#84cc16></span>
@ -31,7 +31,7 @@
<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:#3b82f6></span>
<span class="w-full py-6 mr-3 rounded-md" style=background-color:#06b6d4></span></div><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:#06b6d4></span></div><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:#64748b></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 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>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><span class=line><span class=cl>. <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 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><h3 id=directory-structure class="relative group">Directory 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=#directory-structure aria-label=Anchor>#</a></span></h3><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><span class=line><span class=cl>.
</span></span><span class=line><span class=cl>├── assets </span></span><span class=line><span class=cl>├── assets
</span></span><span class=line><span class=cl>│ └── img </span></span><span class=line><span class=cl>│ └── img
</span></span><span class=line><span class=cl>│ └── author.jpg </span></span><span class=line><span class=cl>│ └── author.jpg
@ -48,10 +48,21 @@
</span></span><span class=line><span class=cl>│ └── index.md </span></span><span class=line><span class=cl>│ └── index.md
</span></span><span class=line><span class=cl>└── themes </span></span><span class=line><span class=cl>└── themes
</span></span><span class=line><span class=cl> └── congo </span></span><span class=line><span class=cl> └── congo
</span></span></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=line><span class=cl><span class=c># config/_default/taxonomies.toml</span> </span></span></code></pre></div><div class="flex px-4 py-3 rounded-md bg-primary-100 dark:bg-primary-900"><span class="text-primary-400 ltr:pr-3 rtl:pl-3"><span class="relative inline-block align-text-bottom icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentcolor" d="M506.3 417 293 53c-16.33-28-57.54-28-73.98.0l-213.2 364C-10.59 444.9 9.849 480 42.74 480h426.6c32.76.0 53.26-35 36.96-63zM232 168c0-13.25 10.75-24 24-24s24 10.8 24 24v128c0 13.25-10.75 24-23.1 24S232 309.3 232 296V168zm24 248c-17.36.0-31.44-14.08-31.44-31.44s14.07-31.44 31.44-31.44 31.44 14.08 31.44 31.44C287.4 401.9 273.4 416 256 416z"/></svg></span></span><span class=dark:text-neutral-300>The key thing to note here is that within the content directory, normal article pages are named <code>index.md</code> while list pages are named <code>_index.md</code>. Any assets that go along with the article should be placed in a sub-directory alongside the index file.</span></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/ target=_blank>official Hugo docs</a> for more information.</p><h3 id=feature-cover-and-thumbnail-images class="relative group">Feature, cover and thumbnail images <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=#feature-cover-and-thumbnail-images aria-label=Anchor>#</a></span></h3><p>The Congo theme supports displaying images on article listings and at the top of individual article pages. There are three types of images supported, each with their own use case: <code>feature</code>, <code>cover</code> and <code>thumb</code>.</p><p>In the example below, a cover and thumb image have been provided for the <code>first-post</code> article:</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-shell data-lang=shell><span class=line><span class=cl>.
</span></span><span class=line><span class=cl>└── content
</span></span><span class=line><span class=cl> └── posts
</span></span><span class=line><span class=cl> ├── _index.md
</span></span><span class=line><span class=cl> └── first-post
</span></span><span class=line><span class=cl> ├── cover.jpg
</span></span><span class=line><span class=cl> ├── index.md
</span></span><span class=line><span class=cl> └── thumb.jpg
</span></span></code></pre></div><p>The <code>thumb</code> image is used as the article thumbnail and will be displayed in article lists, and the <code>cover</code> image will be displayed at the top of the article content on individual article pages.</p><p><figure><img class="my-0 rounded-md" srcset="/congo/docs/getting-started/article-screenshot_hua3d13341519c77890d7321a79f2cdac7_45153_330x0_resize_q75_box.jpg 330w,
/congo/docs/getting-started/article-screenshot_hua3d13341519c77890d7321a79f2cdac7_45153_660x0_resize_q75_box.jpg 660w,
/congo/docs/getting-started/article-screenshot_hua3d13341519c77890d7321a79f2cdac7_45153_1024x0_resize_q75_box.jpg 1024w,
/congo/docs/getting-started/article-screenshot_hua3d13341519c77890d7321a79f2cdac7_45153_1320x0_resize_q75_box.jpg 2x" src=/congo/docs/getting-started/article-screenshot_hua3d13341519c77890d7321a79f2cdac7_45153_660x0_resize_q75_box.jpg alt="A screenshot of an article with a thumbnail image"><figcaption>This example shows an article with a thumbnail image.</figcaption></figure></p><div class="flex px-4 py-3 rounded-md bg-primary-100 dark:bg-primary-900"><span class="text-primary-400 ltr:pr-3 rtl:pl-3"><span class="relative inline-block align-text-bottom icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentcolor" d="M506.3 417 293 53c-16.33-28-57.54-28-73.98.0l-213.2 364C-10.59 444.9 9.849 480 42.74 480h426.6c32.76.0 53.26-35 36.96-63zM232 168c0-13.25 10.75-24 24-24s24 10.8 24 24v128c0 13.25-10.75 24-23.1 24S232 309.3 232 296V168zm24 248c-17.36.0-31.44-14.08-31.44-31.44s14.07-31.44 31.44-31.44 31.44 14.08 31.44 31.44C287.4 401.9 273.4 416 256 416z"/></svg></span></span><span class=dark:text-neutral-300>In order to provide maximum performance, thumbnail images are automatically cropped and resized to a 4:3 ratio. Cover images will be automatically resized to fit their content, but any ratio is permitted.</span></div><p>The <code>feature</code> image is a special type, and when present, it will be used in place of <em>both</em> the <code>thumb</code> and <code>cover</code> images. Feature images are also present in the article metadata, which is included when content is shared to third-party networks like Facebook and Twitter.</p><p>The theme will intelligently detect article images and automatically add them to your site. You don&rsquo;t have to refer to them in the front matter and simply need to place an appropriately named file within the page resources. If the term <code>feature</code>, <code>cover</code> or <code>thumb</code> is found anywhere in the image filename, then it will be used for that purpose.</p><p>The <a href=https://jpanther.github.io/congo/samples/>Samples section</a> provides a number of examples of these images (and you can view the <a href=https://github.com/jpanther/congo/tree/dev/exampleSite/content/samples target=_blank>source code</a> to see the file structure).</p><h3 id=taxonomies class="relative group">Taxonomies <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=#taxonomies aria-label=Anchor>#</a></span></h3><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> configuration file:</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-toml data-lang=toml><span class=line><span class=cl><span class=c># config/_default/taxonomies.toml</span>
</span></span><span class=line><span class=cl> </span></span><span class=line><span class=cl>
</span></span><span class=line><span class=cl><span class=nx>topic</span> <span class=p>=</span> <span class=s2>&#34;topics&#34;</span> </span></span><span class=line><span class=cl><span class=nx>topic</span> <span class=p>=</span> <span class=s2>&#34;topics&#34;</span>
</span></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, 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.en.toml</code> file. Similarly to the languages config file, if you wish to use another language, rename this file and replace <code>en</code> with the language code you wish to use.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-toml data-lang=toml><span class=line><span class=cl><span class=c># config/_default/menus.toml</span> </span></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/ target=_blank>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, 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.en.toml</code> file. Similarly to the languages config file, if you wish to use another language, rename this file and replace <code>en</code> with the language code you wish to use.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-toml data-lang=toml><span class=line><span class=cl><span class=c># config/_default/menus.toml</span>
</span></span><span class=line><span class=cl> </span></span><span class=line><span class=cl>
</span></span><span class=line><span class=cl><span class=p>[[</span><span class=nx>main</span><span class=p>]]</span> </span></span><span class=line><span class=cl><span class=p>[[</span><span class=nx>main</span><span class=p>]]</span>
</span></span><span class=line><span class=cl> <span class=nx>name</span> <span class=p>=</span> <span class=s2>&#34;Blog&#34;</span> </span></span><span class=line><span class=cl> <span class=nx>name</span> <span class=p>=</span> <span class=s2>&#34;Blog&#34;</span>
@ -66,11 +77,10 @@
</span></span><span class=line><span class=cl><span class=p>[[</span><span class=nx>footer</span><span class=p>]]</span> </span></span><span class=line><span class=cl><span class=p>[[</span><span class=nx>footer</span><span class=p>]]</span>
</span></span><span class=line><span class=cl> <span class=nx>name</span> <span class=p>=</span> <span class=s2>&#34;Privacy&#34;</span> </span></span><span class=line><span class=cl> <span class=nx>name</span> <span class=p>=</span> <span class=s2>&#34;Privacy&#34;</span>
</span></span><span class=line><span class=cl> <span class=nx>url</span> <span class=p>=</span> <span class=s2>&#34;https://external-link&#34;</span> </span></span><span class=line><span class=cl> <span class=nx>url</span> <span class=p>=</span> <span class=s2>&#34;https://external-link&#34;</span>
</span></span></code></pre></div><p>The <code>name</code> parameter specifies the text that is used in the menu link. You can also optionally provide a <code>title</code> which fills the HTML title attribute for the link.</p><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 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 max-w-prose print:hidden"><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/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></span></code></pre></div><p>The <code>name</code> parameter specifies the text that is used in the menu link. You can also optionally provide a <code>title</code> which fills the HTML title attribute for the link.</p><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 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 max-w-prose print:hidden"><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="group flex" href=/congo/docs/installation/><span class="mr-2 text-neutral-700 transition-transform group-hover:-translate-x-[2px] group-hover:text-primary-600 ltr:inline rtl:hidden dark:text-neutral 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="ml-2 text-neutral-700 transition-transform group-hover:translate-x-[2px] group-hover:text-primary-600 ltr:hidden rtl:inline dark:text-neutral 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">Installation</span> <span class="flex flex-col"><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 group" href=/congo/docs/configuration/><span class="flex flex-col"><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="group flex text-right" href=/congo/docs/configuration/><span class="flex flex-col"><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 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="mt-[0.1rem] text-xs text-neutral-500 dark:text-neutral-400"></span></span><span class="ml-2 text-neutral-700 transition-transform group-hover:translate-x-[2px] group-hover:text-primary-600 ltr:inline rtl:hidden dark:text-neutral 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-[100vh] ltr:right-0 rtl:left-0 w-12 pointer-events-none bottom-0"><a href=#the-top class="w-12 h-12 sticky pointer-events-auto top-[calc(100vh-5.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><footer class="py-10 print:hidden"><div class="flex items-center 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="mr-2 text-neutral-700 transition-transform group-hover:-translate-x-[2px] group-hover:text-primary-600 ltr:hidden rtl:inline dark:text-neutral dark:group-hover:text-primary-400">&larr;</span></a></span></div></div></footer></article><div class="pointer-events-none absolute top-[100vh] bottom-0 w-12 ltr:right-0 rtl:left-0"><a href=#the-top class="pointer-events-auto sticky top-[calc(100vh-5.5rem)] flex h-12 w-12 items-center justify-center rounded-full bg-neutral/50 text-xl text-neutral-700 backdrop-blur hover:text-primary-600 dark:bg-neutral-800/50 dark:text-neutral dark:hover:text-primary-400" aria-label="Scroll to top" title="Scroll to top">&uarr;</a></div></main><footer class="py-10 print:hidden"><div class="flex items-center 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="ltr:mr-14 rtl:ml-14 cursor-pointer text-sm text-neutral-700 hover:text-primary-600 dark:text-neutral dark:hover:text-primary-400"><button id=appearance-switcher type=button><div class="flex items-center justify-center w-12 h-12 dark:hidden" title="Switch to dark appearance"><span class="relative inline-block align-text-bottom icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentcolor" d="M32 256C32 132.2 132.3 32 255.8 32c11.36.0 29.7 1.668 40.9 3.746 9.616 1.777 11.75 14.63 3.279 19.44C245 86.5 211.2 144.6 211.2 207.8c0 109.7 99.71 193 208.3 172.3 9.561-1.805 16.28 9.324 10.11 16.95C387.9 448.6 324.8 480 255.8 480 132.1 480 32 379.6 32 256z"/></svg></span></div><div class="items-center justify-center hidden w-12 h-12 dark:flex" title="Switch to light appearance"><span class="relative inline-block align-text-bottom icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentcolor" d="M256 159.1c-53.02.0-95.1 42.98-95.1 95.1s41.2 96.9 95.1 96.9 95.1-42.98 95.1-95.1S309 159.1 256 159.1zM509.3 347l-63.2-91.9 63.15-91.01c6.332-9.125 1.104-21.74-9.826-23.72l-109-19.7-19.7-109c-1.975-10.93-14.59-16.16-23.72-9.824L256 65.89 164.1 2.736c-9.125-6.332-21.74-1.107-23.72 9.824L121.6 121.6 12.56 141.3C1.633 143.2-3.596 155.9 2.736 164.1L65.89 256 2.74 347.01c-6.332 9.125-1.105 21.74 9.824 23.72l109 19.7 19.7 109c1.975 10.93 14.59 16.16 23.72 9.824L256 446.1l91.01 63.15c9.127 6.334 21.75 1.107 23.72-9.822l19.7-109 109-19.7C510.4 368.8 515.6 356.1 509.3 347zM256 383.1c-70.69.0-127.1-57.31-127.1-127.1.0-70.69 57.31-127.1 127.1-127.1S383.1 186.2 383.1 256c0 70.7-56.4 127.1-127.1 127.1z"/></svg></span></div></button></div></div></footer><div id=search-wrapper class="invisible fixed inset-0 z-50 flex h-screen w-screen cursor-default flex-col bg-neutral-500/50 p-4 backdrop-blur-sm dark:bg-neutral-900/50 sm:p-6 md:p-[10vh] lg:p-[12vh]" 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 top-20 border-neutral-200 bg-neutral dark:border-neutral-700 dark:bg-neutral-800"><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-2 focus:outline-transparent" placeholder=Search tabindex=0></form><button id=close-search-button class="flex items-center justify-center w-8 h-8 text-neutral-700 hover:text-primary-600 dark:text-neutral dark:hover:text-primary-400" title="Close (Esc)">
<span class="inline dark:hidden"><span class="relative inline-block align-text-bottom icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentcolor" d="M32 256C32 132.2 132.3 32 255.8 32c11.36.0 29.7 1.668 40.9 3.746 9.616 1.777 11.75 14.63 3.279 19.44C245 86.5 211.2 144.6 211.2 207.8c0 109.7 99.71 193 208.3 172.3 9.561-1.805 16.28 9.324 10.11 16.95C387.9 448.6 324.8 480 255.8 480 132.1 480 32 379.6 32 256z"/></svg></span></span><span class="hidden dark:inline"><span class="relative inline-block align-text-bottom icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentcolor" d="M256 159.1c-53.02.0-95.1 42.98-95.1 95.1s41.2 96.9 95.1 96.9 95.1-42.98 95.1-95.1S309 159.1 256 159.1zM509.3 347l-63.2-91.9 63.15-91.01c6.332-9.125 1.104-21.74-9.826-23.72l-109-19.7-19.7-109c-1.975-10.93-14.59-16.16-23.72-9.824L256 65.89 164.1 2.736c-9.125-6.332-21.74-1.107-23.72 9.824L121.6 121.6 12.56 141.3C1.633 143.2-3.596 155.9 2.736 164.1L65.89 256 2.74 347.01c-6.332 9.125-1.105 21.74 9.824 23.72l109 19.7 19.7 109c1.975 10.93 14.59 16.16 23.72 9.824L256 446.1l91.01 63.15c9.127 6.334 21.75 1.107 23.72-9.822l19.7-109 109-19.7C510.4 368.8 515.6 356.1 509.3 347zM256 383.1c-70.69.0-127.1-57.31-127.1-127.1.0-70.69 57.31-127.1 127.1-127.1S383.1 186.2 383.1 256c0 70.7-56.4 127.1-127.1 127.1z"/></svg></span></span></button></div></div></footer><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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentcolor" d="M310.6 361.4c12.5 12.5 12.5 32.75.0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3 54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75.0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75.0-45.25s32.75-12.5 45.25.0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25.0s12.5 32.75.0 45.25l-105.4 105.4L310.6 361.4z"/></svg></span></button></header><section class="flex-auto px-2 overflow-auto"><ul id=search-results></ul></section></div></div></div></body></html> <span class="relative inline-block align-text-bottom icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentcolor" d="M310.6 361.4c12.5 12.5 12.5 32.75.0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3 54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75.0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75.0-45.25s32.75-12.5 45.25.0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25.0s12.5 32.75.0 45.25l-105.4 105.4L310.6 361.4z"/></svg></span></button></header><section class="flex-auto px-2 overflow-auto"><ul id=search-results></ul></section></div></div></div></body></html>

View File

@ -1,21 +1,20 @@
<!doctype html><html lang=en-au dir=ltr class=scroll-smooth data-default-appearance=light 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>Homepage Layout &#183; Congo</title><meta name=title content="Homepage Layout &#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/homepage-layout/><link type=text/css rel=stylesheet href=/congo/css/main.bundle.min.3552466d62941f854cc764b706ab5b2e3616325dd23313577f99ff83f095a09e436d4734656eb0ab9f588d93c251fdf636660a728c2f6ccb49697325daac8a6c.css integrity="sha512-NVJGbWKUH4VMx2S3BqtbLjYWMl3SMxNXf5n/g/CVoJ5DbUc0ZW6wq59YjZPCUf32NmYKcowvbMtJaXMl2qyKbA=="><script type=text/javascript src=/congo/js/appearance.min.badab316c9287a5a42a843e4eb45da65bb3d194a5a0f5fa4a3e516160e67df0b8c65f4f19a8e146436e29d583699e6cb41d6bbe99e05e1dbaa877763bad9f8e2.js integrity="sha512-utqzFskoelpCqEPk60XaZbs9GUpaD1+ko+UWFg5n3wuMZfTxmo4UZDbinVg2mebLQda76Z4F4duqh3djutn44g=="></script> <!doctype html><html lang=en-au dir=ltr class=scroll-smooth data-default-appearance=light 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>Homepage Layout &#183; Congo</title><meta name=title content="Homepage Layout &#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/homepage-layout/><link type=text/css rel=stylesheet href=/congo/css/main.bundle.min.2aa0f8f5cb9b8644385c0ca742c7054ae86d1edd18dce3b0de51c3d5ae4eff5d93f5224afa4205b8c02f10866a39de3ad83e2d4827e696ecd3aa2707382d4cf3.css integrity="sha512-KqD49cubhkQ4XAynQscFSuhtHt0Y3OOw3lHD1a5O/12T9SJK+kIFuMAvEIZqOd462D4tSCfmluzTqicHOC1M8w=="><script type=text/javascript src=/congo/js/appearance.min.badab316c9287a5a42a843e4eb45da65bb3d194a5a0f5fa4a3e516160e67df0b8c65f4f19a8e146436e29d583699e6cb41d6bbe99e05e1dbaa877763bad9f8e2.js integrity="sha512-utqzFskoelpCqEPk60XaZbs9GUpaD1+ko+UWFg5n3wuMZfTxmo4UZDbinVg2mebLQda76Z4F4duqh3djutn44g=="></script>
<script defer type=text/javascript id=script-bundle src=/congo/js/main.bundle.min.b607eb5ea0f48ef635db6a1c024a35eeff4529157e49461941aac333a158a1f71cae4e530d45ac010598695f823dbe38a63142757e37c2d7b74a309d7296f681.js integrity="sha512-tgfrXqD0jvY122ocAko17v9FKRV+SUYZQarDM6FYofccrk5TDUWsAQWYaV+CPb44pjFCdX43wte3SjCdcpb2gQ==" data-copy=Copy data-copied=Copied></script> <script defer type=text/javascript id=script-bundle src=/congo/js/main.bundle.min.6d78c827ca7bcbf72056dbf698bf9aeb759a08966686187deb23f5949f73eca5f39b461284900cdfc08e2976d99eb80a8663648de778ba2a83e633ae16dbfc25.js integrity="sha512-bXjIJ8p7y/cgVtv2mL+a63WaCJZmhhh96yP1lJ9z7KXzm0YShJAM38COKXbZnrgKhmNkjed4uiqD5jOuFtv8JQ==" 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="Homepage Layout"><meta property="og:description" content="Configuring the homepage layout in the Congo theme."><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="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":"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=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="py-6 font-semibold sm:py-10 text-neutral-900 dark:text-neutral print:hidden"><nav class="flex justify-between"><div><a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" rel=me href=/congo/>Congo</a></div><ul class="flex flex-col list-none ltr:text-right rtl:text-left sm:flex-row"><li class="mb-1 sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"><a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" href=/congo/docs/ title=Documentation>Docs</a></li><li class="mb-1 sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"><a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" href=/congo/samples/ title="Content Samples">Samples</a></li><li class="mb-1 sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"><a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" href=/congo/users/ title=Users>Users</a></li><li class="mb-1 sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"><a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" href=https://github.com/jpanther/congo title>GitHub</a></li><li class="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 (/)"> <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="Homepage Layout"><meta property="og:description" content="Configuring the homepage layout in the Congo theme."><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="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":"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=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 max-w-7xl bg-neutral text-neutral-900 dark:bg-neutral-800 dark:text-neutral sm:px-14 md:px-24 lg:px-32"><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 focus:translate-y-0 dark:bg-neutral-600" href=#main-content><span class="font-bold text-primary-600 ltr:pr-2 rtl:pl-2 dark:text-primary-400">&darr;</span>Skip to main content</a></div><header class="py-6 font-semibold text-neutral-900 dark:text-neutral print:hidden sm:py-10"><nav class="flex items-start justify-between sm:items-center"><div class="flex flex-row items-center"><a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" rel=me href=/congo/>Congo</a></div><ul class="flex list-none flex-col ltr:text-right rtl:text-left sm:flex-row"><li class="mb-1 sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"><a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" href=/congo/docs/ title=Documentation>Docs</a></li><li class="mb-1 sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"><a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" href=/congo/samples/ title="Content Samples">Samples</a></li><li class="mb-1 sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"><a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" href=/congo/users/ title=Users>Users</a></li><li class="mb-1 sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"><a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" href=https://github.com/jpanther/congo title>GitHub</a></li><li class="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><div class="relative flex flex-col grow"><main id=main-content class=grow><article><header class=max-w-prose><ol class="text-sm text-neutral-500 dark:text-neutral-400 print:hidden"><li class="inline hidden"><a class="hover:underline 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 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 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">Homepage Layout</h1><div class="mt-8 mb-12 text-base text-neutral-500 dark:text-neutral-400 print:hidden"><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 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><div class="relative flex flex-col grow"><main id=main-content class=grow><article><header class=max-w-prose><ol class="text-sm text-neutral-500 dark:text-neutral-400 print:hidden"><li class="inline hidden"><a class="hover:underline 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 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 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">Homepage Layout</h1><div class="mt-8 mb-12 text-base text-neutral-500 dark:text-neutral-400 print:hidden"><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 class=mb-[2px]><a href=https://github.com/jpanther/congo/tree/dev/exampleSite/content/docs/homepage-layout/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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentcolor" d="M490.3 40.4c21.9 21.87 21.9 57.33.0 79.2l-30 30.1-98-97.98 30.1-30.06C414.3-.2135 449.7-.2135 471.6 21.66L490.3 40.4zM172.4 241.7 339.7 74.34l98 97.96L270.3 339.6C264.2 345.8 256.7 350.4 248.4 353.2l-88.8 29.6C150.1 385.6 141.5 383.4 135 376.1 128.6 370.5 126.4 361 129.2 352.4l29.6-88.8C161.6 255.3 166.2 247.8 172.4 241.7v0zM192 63.1c17.7.0 32 15.23 32 32 0 18.6-14.3 32-32 32H96c-17.67.0-32 15.2-32 32V416c0 17.7 14.33 32 32 32H352c17.7.0 32-14.3 32-32V319.1c0-16.8 14.3-32 32-32s32 15.2 32 32V416c0 53-43 96-96 96H96c-53.02.0-96-43-96-96V159.1c0-53 42.98-96 96-96h96z"/></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 print:hidden"><details open class="mt-0 overflow-hidden rounded-lg rtl:pr-5 ltr:pl-5 ltr:-ml-5 rtl:-mr-5"><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 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><figure><img class="my-0 rounded-md" srcset="/congo/docs/homepage-layout/home-page_hu9ebf2dc0eb5e596beb284e744e4eca5b_246440_330x0_resize_q75_box.jpg 330w, <span class=mb-[2px]><a href=https://github.com/jpanther/congo/tree/dev/exampleSite/content/docs/homepage-layout/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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentcolor" d="M490.3 40.4c21.9 21.87 21.9 57.33.0 79.2l-30 30.1-98-97.98 30.1-30.06C414.3-.2135 449.7-.2135 471.6 21.66L490.3 40.4zM172.4 241.7 339.7 74.34l98 97.96L270.3 339.6C264.2 345.8 256.7 350.4 248.4 353.2l-88.8 29.6C150.1 385.6 141.5 383.4 135 376.1 128.6 370.5 126.4 361 129.2 352.4l29.6-88.8C161.6 255.3 166.2 247.8 172.4 241.7v0zM192 63.1c17.7.0 32 15.23 32 32 0 18.6-14.3 32-32 32H96c-17.67.0-32 15.2-32 32V416c0 17.7 14.33 32 32 32H352c17.7.0 32-14.3 32-32V319.1c0-16.8 14.3-32 32-32s32 15.2 32 32V416c0 53-43 96-96 96H96c-53.02.0-96-43-96-96V159.1c0-53 42.98-96 96-96h96z"/></svg></span></a></span></div></div></header><section class="flex flex-col max-w-full mt-0 prose dark:prose-invert lg:flex-row"><div class="order-first px-0 lg:order-last lg:max-w-xs ltr:lg:pl-8 rtl:lg:pr-8"><div class="toc ltr:pl-5 rtl:pr-5 print:hidden lg:sticky lg:top-10"><details open class="mt-0 overflow-hidden rounded-lg ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5"><summary class="block py-1 text-lg font-semibold cursor-pointer bg-neutral-100 text-neutral-800 ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5 dark:bg-neutral-700 dark:text-neutral-100 lg:hidden">Table of Contents</summary><div class="py-2 border-dotted border-neutral-300 ltr:-ml-5 ltr:border-l ltr:pl-5 rtl:-mr-5 rtl:border-r rtl:pr-5 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 grow"><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 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><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_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_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"></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 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><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-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"></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 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><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_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_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"></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 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 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><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_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"></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 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 target=_blank>GitHub repo</a> to see how it works.</p><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><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_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_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"></figure></p><p>The articles listed in this section are derived from the <code>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 max-w-prose print:hidden"><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/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> /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"></figure></p><p>The articles listed in this section are derived from the <code>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 max-w-prose print:hidden"><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="group flex" href=/congo/docs/configuration/><span class="mr-2 text-neutral-700 transition-transform group-hover:-translate-x-[2px] group-hover:text-primary-600 ltr:inline rtl:hidden dark:text-neutral 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="ml-2 text-neutral-700 transition-transform group-hover:translate-x-[2px] group-hover:text-primary-600 ltr:hidden rtl:inline dark:text-neutral 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">Configuration</span> <span class="flex flex-col"><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 group" href=/congo/docs/front-matter/><span class="flex flex-col"><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="group flex text-right" href=/congo/docs/front-matter/><span class="flex flex-col"><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 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="mt-[0.1rem] text-xs text-neutral-500 dark:text-neutral-400"></span></span><span class="ml-2 text-neutral-700 transition-transform group-hover:translate-x-[2px] group-hover:text-primary-600 ltr:inline rtl:hidden dark:text-neutral 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-[100vh] ltr:right-0 rtl:left-0 w-12 pointer-events-none bottom-0"><a href=#the-top class="w-12 h-12 sticky pointer-events-auto top-[calc(100vh-5.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><footer class="py-10 print:hidden"><div class="flex items-center 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="mr-2 text-neutral-700 transition-transform group-hover:-translate-x-[2px] group-hover:text-primary-600 ltr:hidden rtl:inline dark:text-neutral dark:group-hover:text-primary-400">&larr;</span></a></span></div></div></footer></article><div class="pointer-events-none absolute top-[100vh] bottom-0 w-12 ltr:right-0 rtl:left-0"><a href=#the-top class="pointer-events-auto sticky top-[calc(100vh-5.5rem)] flex h-12 w-12 items-center justify-center rounded-full bg-neutral/50 text-xl text-neutral-700 backdrop-blur hover:text-primary-600 dark:bg-neutral-800/50 dark:text-neutral dark:hover:text-primary-400" aria-label="Scroll to top" title="Scroll to top">&uarr;</a></div></main><footer class="py-10 print:hidden"><div class="flex items-center 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="ltr:mr-14 rtl:ml-14 cursor-pointer text-sm text-neutral-700 hover:text-primary-600 dark:text-neutral dark:hover:text-primary-400"><button id=appearance-switcher type=button><div class="flex items-center justify-center w-12 h-12 dark:hidden" title="Switch to dark appearance"><span class="relative inline-block align-text-bottom icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentcolor" d="M32 256C32 132.2 132.3 32 255.8 32c11.36.0 29.7 1.668 40.9 3.746 9.616 1.777 11.75 14.63 3.279 19.44C245 86.5 211.2 144.6 211.2 207.8c0 109.7 99.71 193 208.3 172.3 9.561-1.805 16.28 9.324 10.11 16.95C387.9 448.6 324.8 480 255.8 480 132.1 480 32 379.6 32 256z"/></svg></span></div><div class="items-center justify-center hidden w-12 h-12 dark:flex" title="Switch to light appearance"><span class="relative inline-block align-text-bottom icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentcolor" d="M256 159.1c-53.02.0-95.1 42.98-95.1 95.1s41.2 96.9 95.1 96.9 95.1-42.98 95.1-95.1S309 159.1 256 159.1zM509.3 347l-63.2-91.9 63.15-91.01c6.332-9.125 1.104-21.74-9.826-23.72l-109-19.7-19.7-109c-1.975-10.93-14.59-16.16-23.72-9.824L256 65.89 164.1 2.736c-9.125-6.332-21.74-1.107-23.72 9.824L121.6 121.6 12.56 141.3C1.633 143.2-3.596 155.9 2.736 164.1L65.89 256 2.74 347.01c-6.332 9.125-1.105 21.74 9.824 23.72l109 19.7 19.7 109c1.975 10.93 14.59 16.16 23.72 9.824L256 446.1l91.01 63.15c9.127 6.334 21.75 1.107 23.72-9.822l19.7-109 109-19.7C510.4 368.8 515.6 356.1 509.3 347zM256 383.1c-70.69.0-127.1-57.31-127.1-127.1.0-70.69 57.31-127.1 127.1-127.1S383.1 186.2 383.1 256c0 70.7-56.4 127.1-127.1 127.1z"/></svg></span></div></button></div></div></footer><div id=search-wrapper class="invisible fixed inset-0 z-50 flex h-screen w-screen cursor-default flex-col bg-neutral-500/50 p-4 backdrop-blur-sm dark:bg-neutral-900/50 sm:p-6 md:p-[10vh] lg:p-[12vh]" 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 top-20 border-neutral-200 bg-neutral dark:border-neutral-700 dark:bg-neutral-800"><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-2 focus:outline-transparent" placeholder=Search tabindex=0></form><button id=close-search-button class="flex items-center justify-center w-8 h-8 text-neutral-700 hover:text-primary-600 dark:text-neutral dark:hover:text-primary-400" title="Close (Esc)">
<span class="inline dark:hidden"><span class="relative inline-block align-text-bottom icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentcolor" d="M32 256C32 132.2 132.3 32 255.8 32c11.36.0 29.7 1.668 40.9 3.746 9.616 1.777 11.75 14.63 3.279 19.44C245 86.5 211.2 144.6 211.2 207.8c0 109.7 99.71 193 208.3 172.3 9.561-1.805 16.28 9.324 10.11 16.95C387.9 448.6 324.8 480 255.8 480 132.1 480 32 379.6 32 256z"/></svg></span></span><span class="hidden dark:inline"><span class="relative inline-block align-text-bottom icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentcolor" d="M256 159.1c-53.02.0-95.1 42.98-95.1 95.1s41.2 96.9 95.1 96.9 95.1-42.98 95.1-95.1S309 159.1 256 159.1zM509.3 347l-63.2-91.9 63.15-91.01c6.332-9.125 1.104-21.74-9.826-23.72l-109-19.7-19.7-109c-1.975-10.93-14.59-16.16-23.72-9.824L256 65.89 164.1 2.736c-9.125-6.332-21.74-1.107-23.72 9.824L121.6 121.6 12.56 141.3C1.633 143.2-3.596 155.9 2.736 164.1L65.89 256 2.74 347.01c-6.332 9.125-1.105 21.74 9.824 23.72l109 19.7 19.7 109c1.975 10.93 14.59 16.16 23.72 9.824L256 446.1l91.01 63.15c9.127 6.334 21.75 1.107 23.72-9.822l19.7-109 109-19.7C510.4 368.8 515.6 356.1 509.3 347zM256 383.1c-70.69.0-127.1-57.31-127.1-127.1.0-70.69 57.31-127.1 127.1-127.1S383.1 186.2 383.1 256c0 70.7-56.4 127.1-127.1 127.1z"/></svg></span></span></button></div></div></footer><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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentcolor" d="M310.6 361.4c12.5 12.5 12.5 32.75.0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3 54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75.0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75.0-45.25s32.75-12.5 45.25.0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25.0s12.5 32.75.0 45.25l-105.4 105.4L310.6 361.4z"/></svg></span></button></header><section class="flex-auto px-2 overflow-auto"><ul id=search-results></ul></section></div></div></div></body></html> <span class="relative inline-block align-text-bottom icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentcolor" d="M310.6 361.4c12.5 12.5 12.5 32.75.0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3 54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75.0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75.0-45.25s32.75-12.5 45.25.0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25.0s12.5 32.75.0 45.25l-105.4 105.4L310.6 361.4z"/></svg></span></button></header><section class="flex-auto px-2 overflow-auto"><ul id=search-results></ul></section></div></div></div></body></html>

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1,8 +1,8 @@
<!doctype html><html lang=en-au dir=ltr class=scroll-smooth data-default-appearance=light data-auto-appearance=true><head><meta charset=utf-8><meta http-equiv=content-language content="en-au"><meta name=viewport content="width=device-width,initial-scale=1"><meta http-equiv=x-ua-compatible content="ie=edge"><title>Partials &#183; Congo</title><meta name=title content="Partials &#183; Congo"><meta name=description content="A powerful, lightweight theme for Hugo built with Tailwind CSS."><link rel=canonical href=https://jpanther.github.io/congo/docs/partials/><link type=text/css rel=stylesheet href=/congo/css/main.bundle.min.3552466d62941f854cc764b706ab5b2e3616325dd23313577f99ff83f095a09e436d4734656eb0ab9f588d93c251fdf636660a728c2f6ccb49697325daac8a6c.css integrity="sha512-NVJGbWKUH4VMx2S3BqtbLjYWMl3SMxNXf5n/g/CVoJ5DbUc0ZW6wq59YjZPCUf32NmYKcowvbMtJaXMl2qyKbA=="><script type=text/javascript src=/congo/js/appearance.min.badab316c9287a5a42a843e4eb45da65bb3d194a5a0f5fa4a3e516160e67df0b8c65f4f19a8e146436e29d583699e6cb41d6bbe99e05e1dbaa877763bad9f8e2.js integrity="sha512-utqzFskoelpCqEPk60XaZbs9GUpaD1+ko+UWFg5n3wuMZfTxmo4UZDbinVg2mebLQda76Z4F4duqh3djutn44g=="></script> <!doctype html><html lang=en-au dir=ltr class=scroll-smooth data-default-appearance=light data-auto-appearance=true><head><meta charset=utf-8><meta http-equiv=content-language content="en-au"><meta name=viewport content="width=device-width,initial-scale=1"><meta http-equiv=x-ua-compatible content="ie=edge"><title>Partials &#183; Congo</title><meta name=title content="Partials &#183; Congo"><meta name=description content="A powerful, lightweight theme for Hugo built with Tailwind CSS."><link rel=canonical href=https://jpanther.github.io/congo/docs/partials/><link type=text/css rel=stylesheet href=/congo/css/main.bundle.min.2aa0f8f5cb9b8644385c0ca742c7054ae86d1edd18dce3b0de51c3d5ae4eff5d93f5224afa4205b8c02f10866a39de3ad83e2d4827e696ecd3aa2707382d4cf3.css integrity="sha512-KqD49cubhkQ4XAynQscFSuhtHt0Y3OOw3lHD1a5O/12T9SJK+kIFuMAvEIZqOd462D4tSCfmluzTqicHOC1M8w=="><script type=text/javascript src=/congo/js/appearance.min.badab316c9287a5a42a843e4eb45da65bb3d194a5a0f5fa4a3e516160e67df0b8c65f4f19a8e146436e29d583699e6cb41d6bbe99e05e1dbaa877763bad9f8e2.js integrity="sha512-utqzFskoelpCqEPk60XaZbs9GUpaD1+ko+UWFg5n3wuMZfTxmo4UZDbinVg2mebLQda76Z4F4duqh3djutn44g=="></script>
<script defer type=text/javascript id=script-bundle src=/congo/js/main.bundle.min.b607eb5ea0f48ef635db6a1c024a35eeff4529157e49461941aac333a158a1f71cae4e530d45ac010598695f823dbe38a63142757e37c2d7b74a309d7296f681.js integrity="sha512-tgfrXqD0jvY122ocAko17v9FKRV+SUYZQarDM6FYofccrk5TDUWsAQWYaV+CPb44pjFCdX43wte3SjCdcpb2gQ==" data-copy=Copy data-copied=Copied></script> <script defer type=text/javascript id=script-bundle src=/congo/js/main.bundle.min.6d78c827ca7bcbf72056dbf698bf9aeb759a08966686187deb23f5949f73eca5f39b461284900cdfc08e2976d99eb80a8663648de778ba2a83e633ae16dbfc25.js integrity="sha512-bXjIJ8p7y/cgVtv2mL+a63WaCJZmhhh96yP1lJ9z7KXzm0YShJAM38COKXbZnrgKhmNkjed4uiqD5jOuFtv8JQ==" data-copy=Copy data-copied=Copied></script>
<link rel=apple-touch-icon sizes=180x180 href=/congo/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/congo/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/congo/favicon-16x16.png><link rel=manifest href=/congo/site.webmanifest><meta property="og:title" content="Partials"><meta property="og:description" content="All the partials available in Congo."><meta property="og:type" content="article"><meta property="og:url" content="https://jpanther.github.io/congo/docs/partials/"><meta property="article:section" content="docs"><meta property="article:published_time" content="2020-08-10T00:00:00+00:00"><meta property="article:modified_time" content="2020-08-10T00:00:00+00:00"><meta property="og:site_name" content="Congo"><meta name=twitter:card content="summary"><meta name=twitter:title content="Partials"><meta name=twitter:description content="All the partials available in Congo."><script type=application/ld+json>[{"@context":"https://schema.org","@type":"Article","articleSection":"Documentation","name":"Partials","headline":"Partials","description":"All the partials available in Congo.","abstract":"Analytics # Congo provides built-in support for Fathom Analytics and Google Analytics.","inLanguage":"en-au","url":"https:\/\/jpanther.github.io\/congo\/docs\/partials\/","author":{"@type":"Person","name":"Congo"},"copyrightYear":"2020","dateCreated":"2020-08-10T00:00:00\u002b00:00","datePublished":"2020-08-10T00:00:00\u002b00:00","dateModified":"2020-08-10T00:00:00\u002b00:00","keywords":["partials","analytics","privacy","comments","favicons","icon","docs"],"mainEntityOfPage":"true","wordCount":"751"}]</script><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="py-6 font-semibold sm:py-10 text-neutral-900 dark:text-neutral print:hidden"><nav class="flex justify-between"><div><a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" rel=me href=/congo/>Congo</a></div><ul class="flex flex-col list-none ltr:text-right rtl:text-left sm:flex-row"><li class="mb-1 sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"><a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" href=/congo/docs/ title=Documentation>Docs</a></li><li class="mb-1 sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"><a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" href=/congo/samples/ title="Content Samples">Samples</a></li><li class="mb-1 sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"><a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" href=/congo/users/ title=Users>Users</a></li><li class="mb-1 sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"><a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" href=https://github.com/jpanther/congo title>GitHub</a></li><li class="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 (/)"> <link rel=apple-touch-icon sizes=180x180 href=/congo/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/congo/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/congo/favicon-16x16.png><link rel=manifest href=/congo/site.webmanifest><meta property="og:title" content="Partials"><meta property="og:description" content="All the partials available in Congo."><meta property="og:type" content="article"><meta property="og:url" content="https://jpanther.github.io/congo/docs/partials/"><meta property="article:section" content="docs"><meta property="article:published_time" content="2020-08-10T00:00:00+00:00"><meta property="article:modified_time" content="2020-08-10T00:00:00+00:00"><meta property="og:site_name" content="Congo"><meta name=twitter:card content="summary"><meta name=twitter:title content="Partials"><meta name=twitter:description content="All the partials available in Congo."><script type=application/ld+json>[{"@context":"https://schema.org","@type":"Article","articleSection":"Documentation","name":"Partials","headline":"Partials","description":"All the partials available in Congo.","abstract":"Analytics # Congo provides built-in support for Fathom Analytics and Google Analytics.","inLanguage":"en-au","url":"https:\/\/jpanther.github.io\/congo\/docs\/partials\/","author":{"@type":"Person","name":"Congo"},"copyrightYear":"2020","dateCreated":"2020-08-10T00:00:00\u002b00:00","datePublished":"2020-08-10T00:00:00\u002b00:00","dateModified":"2020-08-10T00:00:00\u002b00:00","keywords":["partials","analytics","privacy","comments","favicons","icon","docs"],"mainEntityOfPage":"true","wordCount":"751"}]</script><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 max-w-7xl bg-neutral text-neutral-900 dark:bg-neutral-800 dark:text-neutral sm:px-14 md:px-24 lg:px-32"><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 focus:translate-y-0 dark:bg-neutral-600" href=#main-content><span class="font-bold text-primary-600 ltr:pr-2 rtl:pl-2 dark:text-primary-400">&darr;</span>Skip to main content</a></div><header class="py-6 font-semibold text-neutral-900 dark:text-neutral print:hidden sm:py-10"><nav class="flex items-start justify-between sm:items-center"><div class="flex flex-row items-center"><a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" rel=me href=/congo/>Congo</a></div><ul class="flex list-none flex-col ltr:text-right rtl:text-left sm:flex-row"><li class="mb-1 sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"><a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" href=/congo/docs/ title=Documentation>Docs</a></li><li class="mb-1 sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"><a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" href=/congo/samples/ title="Content Samples">Samples</a></li><li class="mb-1 sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"><a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" href=/congo/users/ title=Users>Users</a></li><li class="mb-1 sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"><a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" href=https://github.com/jpanther/congo title>GitHub</a></li><li class="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><div class="relative flex flex-col grow"><main id=main-content class=grow><article><header class=max-w-prose><ol class="text-sm text-neutral-500 dark:text-neutral-400 print:hidden"><li class="inline hidden"><a class="hover:underline 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 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 decoration-neutral-300 dark:underline-neutral-600" href=/congo/docs/partials/>Partials</a><span class="px-1 text-primary-500">/</span></li></ol><h1 class="mt-0 text-4xl font-extrabold text-neutral-900 dark:text-neutral">Partials</h1><div class="mt-8 mb-12 text-base text-neutral-500 dark:text-neutral-400 print:hidden"><div class="flex flex-row flex-wrap items-center"><span title="Reading time">4 mins</span><span class="px-2 text-primary-500">&#183;</span> <span class="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><div class="relative flex flex-col grow"><main id=main-content class=grow><article><header class=max-w-prose><ol class="text-sm text-neutral-500 dark:text-neutral-400 print:hidden"><li class="inline hidden"><a class="hover:underline 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 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 decoration-neutral-300 dark:underline-neutral-600" href=/congo/docs/partials/>Partials</a><span class="px-1 text-primary-500">/</span></li></ol><h1 class="mt-0 text-4xl font-extrabold text-neutral-900 dark:text-neutral">Partials</h1><div class="mt-8 mb-12 text-base text-neutral-500 dark:text-neutral-400 print:hidden"><div class="flex flex-row flex-wrap items-center"><span title="Reading time">4 mins</span><span class="px-2 text-primary-500">&#183;</span>
<span class=mb-[2px]><a href=https://github.com/jpanther/congo/tree/dev/exampleSite/content/docs/partials.md class="text-lg hover:text-primary-500" rel="noopener noreferrer" target=_blank title="Edit content"><span class="relative inline-block align-text-bottom icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentcolor" d="M490.3 40.4c21.9 21.87 21.9 57.33.0 79.2l-30 30.1-98-97.98 30.1-30.06C414.3-.2135 449.7-.2135 471.6 21.66L490.3 40.4zM172.4 241.7 339.7 74.34l98 97.96L270.3 339.6C264.2 345.8 256.7 350.4 248.4 353.2l-88.8 29.6C150.1 385.6 141.5 383.4 135 376.1 128.6 370.5 126.4 361 129.2 352.4l29.6-88.8C161.6 255.3 166.2 247.8 172.4 241.7v0zM192 63.1c17.7.0 32 15.23 32 32 0 18.6-14.3 32-32 32H96c-17.67.0-32 15.2-32 32V416c0 17.7 14.33 32 32 32H352c17.7.0 32-14.3 32-32V319.1c0-16.8 14.3-32 32-32s32 15.2 32 32V416c0 53-43 96-96 96H96c-53.02.0-96-43-96-96V159.1c0-53 42.98-96 96-96h96z"/></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 print:hidden"><details open class="mt-0 overflow-hidden rounded-lg rtl:pr-5 ltr:pl-5 ltr:-ml-5 rtl:-mr-5"><summary class="block py-1 text-lg font-semibold cursor-pointer rtl:pr-5 ltr:pl-5 ltr:-ml-5 rtl:-mr-5 text-neutral-800 dark:text-neutral-100 lg:hidden bg-neutral-100 dark:bg-neutral-700">Table of Contents</summary><div class="py-2 border-dotted ltr:border-l rtl:border-r rtl:pr-5 ltr:pl-5 ltr:-ml-5 rtl:-mr-5 border-neutral-300 dark:border-neutral-600"><nav id=TableOfContents><ul><li><a href=#analytics>Analytics</a><ul><li><a href=#fathom-analytics>Fathom Analytics</a></li><li><a href=#google-analytics>Google Analytics</a></li><li><a href=#custom-analytics-providers>Custom analytics providers</a></li></ul></li><li><a href=#comments>Comments</a></li><li><a href=#favicons>Favicons</a></li><li><a href=#icon>Icon</a></li><li><a href=#extensions>Extensions</a><ul><li><a href=#article-link>Article link</a></li><li><a href=#head-and-footer>Head and Footer</a></li></ul></li></ul></nav></div></details></div></div><div class="min-w-0 min-h-0 max-w-prose"><h2 id=analytics class="relative group">Analytics <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#analytics aria-label=Anchor>#</a></span></h2><p>Congo provides built-in support for Fathom Analytics and Google Analytics. Fathom is a paid alternative to Google Analytics that respects user privacy. If you&rsquo;re interested you can use this affiliate link to <a href=https://usefathom.com/ref/RLAJSV>receive $10 credit</a> and try the service.</p><h3 id=fathom-analytics class="relative group">Fathom Analytics <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#fathom-analytics aria-label=Anchor>#</a></span></h3><p>To enable Fathom Analytics support, simply provide your Fathom site code in the <code>config/_default/params.toml</code> file. If you also use the custom domain feature of Fathom and would like to serve their script from your domain, you can also additionally provide the <code>domain</code> configuration value. If you don&rsquo;t provide a <code>domain</code> value, the script will load directly from Fathom DNS.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-toml data-lang=toml><span class=line><span class=cl><span class=c># config/_default/params.toml</span> <span class=mb-[2px]><a href=https://github.com/jpanther/congo/tree/dev/exampleSite/content/docs/partials.md class="text-lg hover:text-primary-500" rel="noopener noreferrer" target=_blank title="Edit content"><span class="relative inline-block align-text-bottom icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentcolor" d="M490.3 40.4c21.9 21.87 21.9 57.33.0 79.2l-30 30.1-98-97.98 30.1-30.06C414.3-.2135 449.7-.2135 471.6 21.66L490.3 40.4zM172.4 241.7 339.7 74.34l98 97.96L270.3 339.6C264.2 345.8 256.7 350.4 248.4 353.2l-88.8 29.6C150.1 385.6 141.5 383.4 135 376.1 128.6 370.5 126.4 361 129.2 352.4l29.6-88.8C161.6 255.3 166.2 247.8 172.4 241.7v0zM192 63.1c17.7.0 32 15.23 32 32 0 18.6-14.3 32-32 32H96c-17.67.0-32 15.2-32 32V416c0 17.7 14.33 32 32 32H352c17.7.0 32-14.3 32-32V319.1c0-16.8 14.3-32 32-32s32 15.2 32 32V416c0 53-43 96-96 96H96c-53.02.0-96-43-96-96V159.1c0-53 42.98-96 96-96h96z"/></svg></span></a></span></div></div></header><section class="flex flex-col max-w-full mt-0 prose dark:prose-invert lg:flex-row"><div class="order-first px-0 lg:order-last lg:max-w-xs ltr:lg:pl-8 rtl:lg:pr-8"><div class="toc ltr:pl-5 rtl:pr-5 print:hidden lg:sticky lg:top-10"><details open class="mt-0 overflow-hidden rounded-lg ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5"><summary class="block py-1 text-lg font-semibold cursor-pointer bg-neutral-100 text-neutral-800 ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5 dark:bg-neutral-700 dark:text-neutral-100 lg:hidden">Table of Contents</summary><div class="py-2 border-dotted border-neutral-300 ltr:-ml-5 ltr:border-l ltr:pl-5 rtl:-mr-5 rtl:border-r rtl:pr-5 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 grow"><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 target=_blank>receive $10 credit</a> and try the service.</p><h3 id=fathom-analytics class="relative group">Fathom Analytics <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#fathom-analytics aria-label=Anchor>#</a></span></h3><p>To enable Fathom Analytics support, simply provide your Fathom site code in the <code>config/_default/params.toml</code> file. If you also use the custom domain feature of Fathom and would like to serve their script from your domain, you can also additionally provide the <code>domain</code> configuration value. If you don&rsquo;t provide a <code>domain</code> value, the script will load directly from Fathom DNS.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-toml data-lang=toml><span class=line><span class=cl><span class=c># config/_default/params.toml</span>
</span></span><span class=line><span class=cl> </span></span><span class=line><span class=cl>
</span></span><span class=line><span class=cl><span class=p>[</span><span class=nx>fathomAnalytics</span><span class=p>]</span> </span></span><span class=line><span class=cl><span class=p>[</span><span class=nx>fathomAnalytics</span><span class=p>]</span>
</span></span><span class=line><span class=cl> <span class=nx>site</span> <span class=p>=</span> <span class=s2>&#34;ABC12345&#34;</span> </span></span><span class=line><span class=cl> <span class=nx>site</span> <span class=p>=</span> <span class=s2>&#34;ABC12345&#34;</span>
@ -13,7 +13,7 @@
</span></span><span class=line><span class=cl><span class=nx>googleAnalytics</span> <span class=p>=</span> <span class=s2>&#34;UA-PROPERTY_ID&#34;</span> </span></span><span class=line><span class=cl><span class=nx>googleAnalytics</span> <span class=p>=</span> <span class=s2>&#34;UA-PROPERTY_ID&#34;</span>
</span></span><span class=line><span class=cl><span class=c># version 4</span> </span></span><span class=line><span class=cl><span class=c># version 4</span>
</span></span><span class=line><span class=cl><span class=nx>googleAnalytics</span> <span class=p>=</span> <span class=s2>&#34;G-MEASUREMENT_ID&#34;</span> </span></span><span class=line><span class=cl><span class=nx>googleAnalytics</span> <span class=p>=</span> <span class=s2>&#34;G-MEASUREMENT_ID&#34;</span>
</span></span></code></pre></div><h3 id=custom-analytics-providers class="relative group">Custom analytics providers <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#custom-analytics-providers aria-label=Anchor>#</a></span></h3><p>If you wish to use a different analytics provider on your website you can also override the analytics partial and provide your own script. Simply create the file <code>layouts/partials/analytics.html</code> in your project and it will automatically include it in the <code>&lt;head></code> of the website.</p><h2 id=comments class="relative group">Comments <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#comments aria-label=Anchor>#</a></span></h2><p>To add comments to your articles, Congo includes support for a comments partial that is included at the base of each article page. Simply provide a <code>layouts/partials/comments.html</code> which contains the code required to display your chosen comments.</p><p>You can use either the built-in Hugo Disqus template, or provide your own custom code. Refer to the <a href=https://gohugo.io/content-management/comments/>Hugo docs</a> for further information.</p><p>Once the partial has been provided, finer control over where comments are displayed is then managed using the <code>showComments</code> parameter. This value can be set at the theme level in the <code>params.toml</code> <a href=https://jpanther.github.io/congo/docs/configuration/#theme-parameters>config file</a>, or on a per-article basis by including it in the <a href=https://jpanther.github.io/congo/docs/front-matter/>front matter</a>. The parameter defaults to <code>false</code> so it must be set to <code>true</code> in one of these locations in order for comments to be displayed.</p><h2 id=favicons class="relative group">Favicons <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#favicons aria-label=Anchor>#</a></span></h2><p>Congo provides a default set of blank favicons to get started but you can provide your own assets to override them. The easiest way to obtain new favicon assets is to generate them using a third-party provider like <a href=https://favicon.io>favicon.io</a>.</p><p>Icon assets should be placed directly in the <code>static/</code> folder of your website and named as per the listing below. If you use <a href=https://favicon.io>favicon.io</a>, these will be the filenames that are automatically generated for you, but you can provide your own assets if you wish.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-shell data-lang=shell><span class=line><span class=cl>static/ </span></span></code></pre></div><h3 id=custom-analytics-providers class="relative group">Custom analytics providers <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#custom-analytics-providers aria-label=Anchor>#</a></span></h3><p>If you wish to use a different analytics provider on your website you can also override the analytics partial and provide your own script. Simply create the file <code>layouts/partials/analytics.html</code> in your project and it will automatically include it in the <code>&lt;head></code> of the website.</p><h2 id=comments class="relative group">Comments <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#comments aria-label=Anchor>#</a></span></h2><p>To add comments to your articles, Congo includes support for a comments partial that is included at the base of each article page. Simply provide a <code>layouts/partials/comments.html</code> which contains the code required to display your chosen comments.</p><p>You can use either the built-in Hugo Disqus template, or provide your own custom code. Refer to the <a href=https://gohugo.io/content-management/comments/ target=_blank>Hugo docs</a> for further information.</p><p>Once the partial has been provided, finer control over where comments are displayed is then managed using the <code>showComments</code> parameter. This value can be set at the theme level in the <code>params.toml</code> <a href=https://jpanther.github.io/congo/docs/configuration/#theme-parameters>config file</a>, or on a per-article basis by including it in the <a href=https://jpanther.github.io/congo/docs/front-matter/>front matter</a>. The parameter defaults to <code>false</code> so it must be set to <code>true</code> in one of these locations in order for comments to be displayed.</p><h2 id=favicons class="relative group">Favicons <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#favicons aria-label=Anchor>#</a></span></h2><p>Congo provides a default set of blank favicons to get started but you can provide your own assets to override them. The easiest way to obtain new favicon assets is to generate them using a third-party provider like <a href=https://favicon.io target=_blank>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 target=_blank>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><span class=line><span class=cl>static/
</span></span><span class=line><span class=cl>├─ android-chrome-192x192.png </span></span><span class=line><span class=cl>├─ android-chrome-192x192.png
</span></span><span class=line><span class=cl>├─ android-chrome-512x512.png </span></span><span class=line><span class=cl>├─ android-chrome-512x512.png
</span></span><span class=line><span class=cl>├─ apple-touch-icon.png </span></span><span class=line><span class=cl>├─ apple-touch-icon.png
@ -22,11 +22,10 @@
</span></span><span class=line><span class=cl>├─ favicon.ico </span></span><span class=line><span class=cl>├─ favicon.ico
</span></span><span class=line><span class=cl>└─ site.webmanifest </span></span><span class=line><span class=cl>└─ site.webmanifest
</span></span></code></pre></div><p>Alternatively, you can also completely override the default favicon behaviour and provide your own favicon HTML tags and assets. Simply provide a <code>layouts/partials/favicons.html</code> file in your project and this will be injected into the site <code>&lt;head></code> in place of the default assets.</p><h2 id=icon class="relative group">Icon <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#icon aria-label=Anchor>#</a></span></h2><p>Similar to the <a href=https://jpanther.github.io/congo/docs/shortcodes/#icon>icon shortcode</a>, you can include icons in your own templates and partials by using Congo&rsquo;s <code>icon.html</code> partial. The partial takes one parameter which is the name of the icon to be included.</p><p><strong>Example:</strong></p><div class=highlight><pre tabindex=0 class=chroma><code class=language-go data-lang=go><span class=line><span class=cl> <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> </span></span></code></pre></div><p>Alternatively, you can also completely override the default favicon behaviour and provide your own favicon HTML tags and assets. Simply provide a <code>layouts/partials/favicons.html</code> file in your project and this will be injected into the site <code>&lt;head></code> in place of the default assets.</p><h2 id=icon class="relative group">Icon <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#icon aria-label=Anchor>#</a></span></h2><p>Similar to the <a href=https://jpanther.github.io/congo/docs/shortcodes/#icon>icon shortcode</a>, you can include icons in your own templates and partials by using Congo&rsquo;s <code>icon.html</code> partial. The partial takes one parameter which is the name of the icon to be included.</p><p><strong>Example:</strong></p><div class=highlight><pre tabindex=0 class=chroma><code class=language-go data-lang=go><span class=line><span class=cl> <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>
</span></span></code></pre></div><p>Icons are populated using Hugo pipelines which makes them very flexible. Congo includes a number of built-in icons for social, links and other purposes. Check the <a href=https://jpanther.github.io/congo/samples/icons/>icon samples</a> page for a full list of supported icons.</p><p>Custom icons can be added by providing your own icon assets in the <code>assets/icons/</code> directory of your project. The icon can then be referenced in the partial by using the SVG filename without the <code>.svg</code> extension.</p><p>Icons can also be used in article content by calling the <a href=https://jpanther.github.io/congo/docs/shortcodes/#icon>icon shortcode</a>.</p><h2 id=extensions class="relative group">Extensions <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#extensions aria-label=Anchor>#</a></span></h2><p>Congo also provides for a number of extension partials that allow for expanding upon base functionality.</p><h3 id=article-link class="relative group">Article link <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#article-link aria-label=Anchor>#</a></span></h3><p>If you wish to insert additional code after article links, create a <code>layouts/partials/extend-article-link.html</code> file. This is especially powerful when combined with the <a href=https://jpanther.github.io/congo/docs/shortcodes/#badge><code>badge</code></a> shortcode which can be used to highlight metadata for certain articles.</p><h3 id=head-and-footer class="relative group">Head and Footer <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#head-and-footer aria-label=Anchor>#</a></span></h3><p>The theme allows for inserting additional code directly into the <code>&lt;head></code> and <code>&lt;footer></code> sections of the template. These can be useful for providing scripts or other logic that isn&rsquo;t part of the theme.</p><p>Simply create either <code>layouts/partials/extend-head.html</code> or <code>layouts/partials/extend-footer.html</code> and these will automatically be included in your website build. Both partials are injected as the last items in <code>&lt;head></code> and <code>&lt;footer></code> so they can be used to override theme defaults.</p></div></section><footer class="pt-8 max-w-prose print:hidden"><div class=pt-8><hr class="border-dotted border-neutral-300 dark:border-neutral-600"><div class="flex justify-between pt-3"><span><a class="flex group" href=/congo/docs/shortcodes/><span class="mr-3 ltr:inline rtl:hidden text-neutral-700 dark:text-neutral group-hover:text-primary-600 dark:group-hover:text-primary-400">&larr;</span> </span></span></code></pre></div><p>Icons are populated using Hugo pipelines which makes them very flexible. Congo includes a number of built-in icons for social, links and other purposes. Check the <a href=https://jpanther.github.io/congo/samples/icons/>icon samples</a> page for a full list of supported icons.</p><p>Custom icons can be added by providing your own icon assets in the <code>assets/icons/</code> directory of your project. The icon can then be referenced in the partial by using the SVG filename without the <code>.svg</code> extension.</p><p>Icons can also be used in article content by calling the <a href=https://jpanther.github.io/congo/docs/shortcodes/#icon>icon shortcode</a>.</p><h2 id=extensions class="relative group">Extensions <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#extensions aria-label=Anchor>#</a></span></h2><p>Congo also provides for a number of extension partials that allow for expanding upon base functionality.</p><h3 id=article-link class="relative group">Article link <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#article-link aria-label=Anchor>#</a></span></h3><p>If you wish to insert additional code after article links, create a <code>layouts/partials/extend-article-link.html</code> file. This is especially powerful when combined with the <a href=https://jpanther.github.io/congo/docs/shortcodes/#badge><code>badge</code></a> shortcode which can be used to highlight metadata for certain articles.</p><h3 id=head-and-footer class="relative group">Head and Footer <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#head-and-footer aria-label=Anchor>#</a></span></h3><p>The theme allows for inserting additional code directly into the <code>&lt;head></code> and <code>&lt;footer></code> sections of the template. These can be useful for providing scripts or other logic that isn&rsquo;t part of the theme.</p><p>Simply create either <code>layouts/partials/extend-head.html</code> or <code>layouts/partials/extend-footer.html</code> and these will automatically be included in your website build. Both partials are injected as the last items in <code>&lt;head></code> and <code>&lt;footer></code> so they can be used to override theme defaults.</p></div></section><footer class="pt-8 max-w-prose print:hidden"><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="group flex" href=/congo/docs/shortcodes/><span class="mr-2 text-neutral-700 transition-transform group-hover:-translate-x-[2px] group-hover:text-primary-600 ltr:inline rtl:hidden dark:text-neutral 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="ml-2 text-neutral-700 transition-transform group-hover:translate-x-[2px] group-hover:text-primary-600 ltr:hidden rtl:inline dark:text-neutral dark:group-hover:text-primary-400">&rarr;</span>
<span class="flex flex-col"><span class="mt-[0.1rem] leading-6 group-hover:underline group-hover:decoration-primary-500">Shortcodes</span> <span class="flex flex-col"><span class="mt-[0.1rem] leading-6 group-hover:underline group-hover:decoration-primary-500">Shortcodes</span>
<span class="mt-[0.1rem] text-xs text-neutral-500 dark:text-neutral-400"></span></span></a></span><span><a class="flex text-right group" href=/congo/docs/content-examples/><span class="flex flex-col"><span class="mt-[0.1rem] leading-6 group-hover:underline group-hover:decoration-primary-500">Content Examples</span> <span class="mt-[0.1rem] text-xs text-neutral-500 dark:text-neutral-400"></span></span></a></span><span><a class="group flex text-right" href=/congo/docs/content-examples/><span class="flex flex-col"><span class="mt-[0.1rem] leading-6 group-hover:underline group-hover:decoration-primary-500">Content Examples</span>
<span class="mt-[0.1rem] text-xs text-neutral-500 dark:text-neutral-400"></span></span><span class="ml-3 ltr:inline rtl:hidden text-neutral-700 dark:text-neutral group-hover:text-primary-600 dark:group-hover:text-primary-400">&rarr;</span> <span class="mt-[0.1rem] text-xs text-neutral-500 dark:text-neutral-400"></span></span><span class="ml-2 text-neutral-700 transition-transform group-hover:translate-x-[2px] group-hover:text-primary-600 ltr:inline rtl:hidden dark:text-neutral 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-[100vh] ltr:right-0 rtl:left-0 w-12 pointer-events-none bottom-0"><a href=#the-top class="w-12 h-12 sticky pointer-events-auto top-[calc(100vh-5.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><footer class="py-10 print:hidden"><div class="flex items-center 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="mr-2 text-neutral-700 transition-transform group-hover:-translate-x-[2px] group-hover:text-primary-600 ltr:hidden rtl:inline dark:text-neutral dark:group-hover:text-primary-400">&larr;</span></a></span></div></div></footer></article><div class="pointer-events-none absolute top-[100vh] bottom-0 w-12 ltr:right-0 rtl:left-0"><a href=#the-top class="pointer-events-auto sticky top-[calc(100vh-5.5rem)] flex h-12 w-12 items-center justify-center rounded-full bg-neutral/50 text-xl text-neutral-700 backdrop-blur hover:text-primary-600 dark:bg-neutral-800/50 dark:text-neutral dark:hover:text-primary-400" aria-label="Scroll to top" title="Scroll to top">&uarr;</a></div></main><footer class="py-10 print:hidden"><div class="flex items-center 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="ltr:mr-14 rtl:ml-14 cursor-pointer text-sm text-neutral-700 hover:text-primary-600 dark:text-neutral dark:hover:text-primary-400"><button id=appearance-switcher type=button><div class="flex items-center justify-center w-12 h-12 dark:hidden" title="Switch to dark appearance"><span class="relative inline-block align-text-bottom icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentcolor" d="M32 256C32 132.2 132.3 32 255.8 32c11.36.0 29.7 1.668 40.9 3.746 9.616 1.777 11.75 14.63 3.279 19.44C245 86.5 211.2 144.6 211.2 207.8c0 109.7 99.71 193 208.3 172.3 9.561-1.805 16.28 9.324 10.11 16.95C387.9 448.6 324.8 480 255.8 480 132.1 480 32 379.6 32 256z"/></svg></span></div><div class="items-center justify-center hidden w-12 h-12 dark:flex" title="Switch to light appearance"><span class="relative inline-block align-text-bottom icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentcolor" d="M256 159.1c-53.02.0-95.1 42.98-95.1 95.1s41.2 96.9 95.1 96.9 95.1-42.98 95.1-95.1S309 159.1 256 159.1zM509.3 347l-63.2-91.9 63.15-91.01c6.332-9.125 1.104-21.74-9.826-23.72l-109-19.7-19.7-109c-1.975-10.93-14.59-16.16-23.72-9.824L256 65.89 164.1 2.736c-9.125-6.332-21.74-1.107-23.72 9.824L121.6 121.6 12.56 141.3C1.633 143.2-3.596 155.9 2.736 164.1L65.89 256 2.74 347.01c-6.332 9.125-1.105 21.74 9.824 23.72l109 19.7 19.7 109c1.975 10.93 14.59 16.16 23.72 9.824L256 446.1l91.01 63.15c9.127 6.334 21.75 1.107 23.72-9.822l19.7-109 109-19.7C510.4 368.8 515.6 356.1 509.3 347zM256 383.1c-70.69.0-127.1-57.31-127.1-127.1.0-70.69 57.31-127.1 127.1-127.1S383.1 186.2 383.1 256c0 70.7-56.4 127.1-127.1 127.1z"/></svg></span></div></button></div></div></footer><div id=search-wrapper class="invisible fixed inset-0 z-50 flex h-screen w-screen cursor-default flex-col bg-neutral-500/50 p-4 backdrop-blur-sm dark:bg-neutral-900/50 sm:p-6 md:p-[10vh] lg:p-[12vh]" 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 top-20 border-neutral-200 bg-neutral dark:border-neutral-700 dark:bg-neutral-800"><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-2 focus:outline-transparent" placeholder=Search tabindex=0></form><button id=close-search-button class="flex items-center justify-center w-8 h-8 text-neutral-700 hover:text-primary-600 dark:text-neutral dark:hover:text-primary-400" title="Close (Esc)">
<span class="inline dark:hidden"><span class="relative inline-block align-text-bottom icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentcolor" d="M32 256C32 132.2 132.3 32 255.8 32c11.36.0 29.7 1.668 40.9 3.746 9.616 1.777 11.75 14.63 3.279 19.44C245 86.5 211.2 144.6 211.2 207.8c0 109.7 99.71 193 208.3 172.3 9.561-1.805 16.28 9.324 10.11 16.95C387.9 448.6 324.8 480 255.8 480 132.1 480 32 379.6 32 256z"/></svg></span></span><span class="hidden dark:inline"><span class="relative inline-block align-text-bottom icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentcolor" d="M256 159.1c-53.02.0-95.1 42.98-95.1 95.1s41.2 96.9 95.1 96.9 95.1-42.98 95.1-95.1S309 159.1 256 159.1zM509.3 347l-63.2-91.9 63.15-91.01c6.332-9.125 1.104-21.74-9.826-23.72l-109-19.7-19.7-109c-1.975-10.93-14.59-16.16-23.72-9.824L256 65.89 164.1 2.736c-9.125-6.332-21.74-1.107-23.72 9.824L121.6 121.6 12.56 141.3C1.633 143.2-3.596 155.9 2.736 164.1L65.89 256 2.74 347.01c-6.332 9.125-1.105 21.74 9.824 23.72l109 19.7 19.7 109c1.975 10.93 14.59 16.16 23.72 9.824L256 446.1l91.01 63.15c9.127 6.334 21.75 1.107 23.72-9.822l19.7-109 109-19.7C510.4 368.8 515.6 356.1 509.3 347zM256 383.1c-70.69.0-127.1-57.31-127.1-127.1.0-70.69 57.31-127.1 127.1-127.1S383.1 186.2 383.1 256c0 70.7-56.4 127.1-127.1 127.1z"/></svg></span></span></button></div></div></footer><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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentcolor" d="M310.6 361.4c12.5 12.5 12.5 32.75.0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3 54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75.0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75.0-45.25s32.75-12.5 45.25.0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25.0s12.5 32.75.0 45.25l-105.4 105.4L310.6 361.4z"/></svg></span></button></header><section class="flex-auto px-2 overflow-auto"><ul id=search-results></ul></section></div></div></div></body></html> <span class="relative inline-block align-text-bottom icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentcolor" d="M310.6 361.4c12.5 12.5 12.5 32.75.0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3 54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75.0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75.0-45.25s32.75-12.5 45.25.0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25.0s12.5 32.75.0 45.25l-105.4 105.4L310.6 361.4z"/></svg></span></button></header><section class="flex-auto px-2 overflow-auto"><ul id=search-results></ul></section></div></div></div></body></html>

View File

@ -1,24 +1,24 @@
<!doctype html><html lang=en-au dir=ltr class=scroll-smooth data-default-appearance=light 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>Shortcodes &#183; Congo</title><meta name=title content="Shortcodes &#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/shortcodes/><link type=text/css rel=stylesheet href=/congo/css/main.bundle.min.3552466d62941f854cc764b706ab5b2e3616325dd23313577f99ff83f095a09e436d4734656eb0ab9f588d93c251fdf636660a728c2f6ccb49697325daac8a6c.css integrity="sha512-NVJGbWKUH4VMx2S3BqtbLjYWMl3SMxNXf5n/g/CVoJ5DbUc0ZW6wq59YjZPCUf32NmYKcowvbMtJaXMl2qyKbA=="><script type=text/javascript src=/congo/js/appearance.min.badab316c9287a5a42a843e4eb45da65bb3d194a5a0f5fa4a3e516160e67df0b8c65f4f19a8e146436e29d583699e6cb41d6bbe99e05e1dbaa877763bad9f8e2.js integrity="sha512-utqzFskoelpCqEPk60XaZbs9GUpaD1+ko+UWFg5n3wuMZfTxmo4UZDbinVg2mebLQda76Z4F4duqh3djutn44g=="></script> <!doctype html><html lang=en-au dir=ltr class=scroll-smooth data-default-appearance=light 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>Shortcodes &#183; Congo</title><meta name=title content="Shortcodes &#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/shortcodes/><link type=text/css rel=stylesheet href=/congo/css/main.bundle.min.2aa0f8f5cb9b8644385c0ca742c7054ae86d1edd18dce3b0de51c3d5ae4eff5d93f5224afa4205b8c02f10866a39de3ad83e2d4827e696ecd3aa2707382d4cf3.css integrity="sha512-KqD49cubhkQ4XAynQscFSuhtHt0Y3OOw3lHD1a5O/12T9SJK+kIFuMAvEIZqOd462D4tSCfmluzTqicHOC1M8w=="><script type=text/javascript src=/congo/js/appearance.min.badab316c9287a5a42a843e4eb45da65bb3d194a5a0f5fa4a3e516160e67df0b8c65f4f19a8e146436e29d583699e6cb41d6bbe99e05e1dbaa877763bad9f8e2.js integrity="sha512-utqzFskoelpCqEPk60XaZbs9GUpaD1+ko+UWFg5n3wuMZfTxmo4UZDbinVg2mebLQda76Z4F4duqh3djutn44g=="></script>
<script defer type=text/javascript id=script-bundle src=/congo/js/main.bundle.min.b607eb5ea0f48ef635db6a1c024a35eeff4529157e49461941aac333a158a1f71cae4e530d45ac010598695f823dbe38a63142757e37c2d7b74a309d7296f681.js integrity="sha512-tgfrXqD0jvY122ocAko17v9FKRV+SUYZQarDM6FYofccrk5TDUWsAQWYaV+CPb44pjFCdX43wte3SjCdcpb2gQ==" data-copy=Copy data-copied=Copied></script> <script defer type=text/javascript id=script-bundle src=/congo/js/main.bundle.min.6d78c827ca7bcbf72056dbf698bf9aeb759a08966686187deb23f5949f73eca5f39b461284900cdfc08e2976d99eb80a8663648de778ba2a83e633ae16dbfc25.js integrity="sha512-bXjIJ8p7y/cgVtv2mL+a63WaCJZmhhh96yP1lJ9z7KXzm0YShJAM38COKXbZnrgKhmNkjed4uiqD5jOuFtv8JQ==" 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="Shortcodes"><meta property="og:description" content="All the shortcodes available in Congo."><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="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":"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":"954"}]</script><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 type=text/javascript src=/congo/js/mermaid.bundle.c6bf424644b889a1a59728296ff9c976840f130c1ccd5c79a6d1ebd42edf1fde90c0f95014e23dc6322d337d24a8ac0691850946296a71de6da63a3332fb0329.js integrity="sha512-xr9CRkS4iaGllygpb/nJdoQPEwwczVx5ptHr1C7fH96QwPlQFOI9xjItM30kqKwGkYUJRilqcd5tpjozMvsDKQ=="></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="Shortcodes"><meta property="og:description" content="All the shortcodes available in Congo."><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="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":"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":"981"}]</script><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 type=text/javascript src=/congo/js/mermaid.bundle.f2cb4ee87fa275805b2c26b9bcefbb00facc64ccb40047856e31d64b01cb00d527748526065593c5bb0ebfdab368d498701970ce609fe874bac58d36340fa0e3.js integrity="sha512-8stO6H+idYBbLCa5vO+7APrMZMy0AEeFbjHWSwHLANUndIUmBlWTxbsOv9qzaNSYcBlwzmCf6HS6xY02NA+g4w=="></script>
<script defer type=text/javascript src=/congo/js/chart.bundle.b5ceb9f9efc16aa2ebd1838ecb2a097518db6139adf18e38ca9869204cebe0c1bb2c6c669abf1251ef96bbb810bc232798366a923499f379e036378f053195e6.js integrity="sha512-tc65+e/BaqLr0YOOyyoJdRjbYTmt8Y44yphpIEzr4MG7LGxmmr8SUe+Wu7gQvCMnmDZqkjSZ83ngNjePBTGV5g=="></script> <script defer type=text/javascript src=/congo/js/chart.bundle.7bb7442fd631bca73babc31b569fe1d964f0e9d02a52e7ca4f8d2b425f7aa4977bc8b0fde1bf5afecc963031e5c78e6caa3a4520ea9f4aa467d99065a5d60af0.js integrity="sha512-e7dEL9YxvKc7q8MbVp/h2WTw6dAqUufKT40rQl96pJd7yLD94b9a/syWMDHlx45sqjpFIOqfSqRn2ZBlpdYK8A=="></script>
<link type=text/css rel=stylesheet href=/congo/lib/katex/katex.min.61fc68ef35c6690632cd6371cfcaf8b3c6b135f1b88d2ddd8a9b3ca761c0ff03569ae6a96a49108a48befd7037a373a5fa2f16234ddc4495430d412512d103ea.css integrity="sha512-Yfxo7zXGaQYyzWNxz8r4s8axNfG4jS3dips8p2HA/wNWmuapakkQiki+/XA3o3Ol+i8WI03cRJVDDUElEtED6g=="><script defer src=/congo/lib/katex/katex.min.33bfe3919a0a1259f58da698daba022bd26de2dfa3fe2aeed1edaf2270e454ee4b634101b779baead8d34f95c5b061f62c91be55144bdae7884775347ebb3f19.js integrity="sha512-M7/jkZoKEln1jaaY2roCK9Jt4t+j/iru0e2vInDkVO5LY0EBt3m66tjTT5XFsGH2LJG+VRRL2ueIR3U0frs/GQ=="></script> <link type=text/css rel=stylesheet href=/congo/lib/katex/katex.min.e95315732ed740dc9aae156e88be74173a600852acc9377a60ef7769a404c844fe04d696be3d0880a47ce817faf80996733c407129cbf891a3a3e892b603b581.css integrity="sha512-6VMVcy7XQNyarhVuiL50FzpgCFKsyTd6YO93aaQEyET+BNaWvj0IgKR86Bf6+AmWczxAcSnL+JGjo+iStgO1gQ=="><script defer src=/congo/lib/katex/katex.min.6fd20a8f82c236bb423c185c79172860e1d65bf4b6abd7e997b880265cb1629ca4463d5228cec513df84d0d12727c83c9e2e3b2c1af61ae5fdab383fc5ebb0cd.js integrity="sha512-b9IKj4LCNrtCPBhceRcoYOHWW/S2q9fpl7iAJlyxYpykRj1SKM7FE9+E0NEnJ8g8ni47LBr2GuX9qzg/xeuwzQ=="></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"><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="py-6 font-semibold sm:py-10 text-neutral-900 dark:text-neutral print:hidden"><nav class="flex justify-between"><div><a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" rel=me href=/congo/>Congo</a></div><ul class="flex flex-col list-none ltr:text-right rtl:text-left sm:flex-row"><li class="mb-1 sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"><a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" href=/congo/docs/ title=Documentation>Docs</a></li><li class="mb-1 sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"><a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" href=/congo/samples/ title="Content Samples">Samples</a></li><li class="mb-1 sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"><a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" href=/congo/users/ title=Users>Users</a></li><li class="mb-1 sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"><a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" href=https://github.com/jpanther/congo title>GitHub</a></li><li class="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 (/)"> <script defer src=/congo/lib/katex/auto-render.min.8968ae052e67b7aafad1f0b3dba35dd19a9ed276e4d594c841b9772afee462c5fec8a314147ce3687dbe02733abe9d97b3e80d99a0405562634a6b8fc3be847e.js integrity="sha512-iWiuBS5nt6r60fCz26Nd0Zqe0nbk1ZTIQbl3Kv7kYsX+yKMUFHzjaH2+AnM6vp2Xs+gNmaBAVWJjSmuPw76Efg==" onload=renderMathInElement(document.body)></script></head><body class="flex flex-col h-screen px-6 m-auto text-lg leading-7 max-w-7xl bg-neutral text-neutral-900 dark:bg-neutral-800 dark:text-neutral sm:px-14 md:px-24 lg:px-32"><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 focus:translate-y-0 dark:bg-neutral-600" href=#main-content><span class="font-bold text-primary-600 ltr:pr-2 rtl:pl-2 dark:text-primary-400">&darr;</span>Skip to main content</a></div><header class="py-6 font-semibold text-neutral-900 dark:text-neutral print:hidden sm:py-10"><nav class="flex items-start justify-between sm:items-center"><div class="flex flex-row items-center"><a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" rel=me href=/congo/>Congo</a></div><ul class="flex list-none flex-col ltr:text-right rtl:text-left sm:flex-row"><li class="mb-1 sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"><a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" href=/congo/docs/ title=Documentation>Docs</a></li><li class="mb-1 sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"><a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" href=/congo/samples/ title="Content Samples">Samples</a></li><li class="mb-1 sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"><a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" href=/congo/users/ title=Users>Users</a></li><li class="mb-1 sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"><a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" href=https://github.com/jpanther/congo title>GitHub</a></li><li class="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><div class="relative flex flex-col grow"><main id=main-content class=grow><article><header class=max-w-prose><ol class="text-sm text-neutral-500 dark:text-neutral-400 print:hidden"><li class="inline hidden"><a class="hover:underline 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 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 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">Shortcodes</h1><div class="mt-8 mb-12 text-base text-neutral-500 dark:text-neutral-400 print:hidden"><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 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><div class="relative flex flex-col grow"><main id=main-content class=grow><article><header class=max-w-prose><ol class="text-sm text-neutral-500 dark:text-neutral-400 print:hidden"><li class="inline hidden"><a class="hover:underline 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 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 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">Shortcodes</h1><div class="mt-8 mb-12 text-base text-neutral-500 dark:text-neutral-400 print:hidden"><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 class=mb-[2px]><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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentcolor" d="M490.3 40.4c21.9 21.87 21.9 57.33.0 79.2l-30 30.1-98-97.98 30.1-30.06C414.3-.2135 449.7-.2135 471.6 21.66L490.3 40.4zM172.4 241.7 339.7 74.34l98 97.96L270.3 339.6C264.2 345.8 256.7 350.4 248.4 353.2l-88.8 29.6C150.1 385.6 141.5 383.4 135 376.1 128.6 370.5 126.4 361 129.2 352.4l29.6-88.8C161.6 255.3 166.2 247.8 172.4 241.7v0zM192 63.1c17.7.0 32 15.23 32 32 0 18.6-14.3 32-32 32H96c-17.67.0-32 15.2-32 32V416c0 17.7 14.33 32 32 32H352c17.7.0 32-14.3 32-32V319.1c0-16.8 14.3-32 32-32s32 15.2 32 32V416c0 53-43 96-96 96H96c-53.02.0-96-43-96-96V159.1c0-53 42.98-96 96-96h96z"/></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 print:hidden"><details open class="mt-0 overflow-hidden rounded-lg rtl:pr-5 ltr:pl-5 ltr:-ml-5 rtl:-mr-5"><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 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>By default, the alert is presented with an exclaimation triangle icon. To change the icon, include the icon name in the shortcode. Check out the <a href=#icon>icon shortcode</a> for more details on using icons.</p><p><strong>Example:</strong></p><div class=highlight><pre tabindex=0 class=chroma><code class=language-md data-lang=md><span class=line><span class=cl>{{<span class=p>&lt;</span> <span class=nt>alert</span> <span class=p>&gt;</span>}} <span class=mb-[2px]><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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentcolor" d="M490.3 40.4c21.9 21.87 21.9 57.33.0 79.2l-30 30.1-98-97.98 30.1-30.06C414.3-.2135 449.7-.2135 471.6 21.66L490.3 40.4zM172.4 241.7 339.7 74.34l98 97.96L270.3 339.6C264.2 345.8 256.7 350.4 248.4 353.2l-88.8 29.6C150.1 385.6 141.5 383.4 135 376.1 128.6 370.5 126.4 361 129.2 352.4l29.6-88.8C161.6 255.3 166.2 247.8 172.4 241.7v0zM192 63.1c17.7.0 32 15.23 32 32 0 18.6-14.3 32-32 32H96c-17.67.0-32 15.2-32 32V416c0 17.7 14.33 32 32 32H352c17.7.0 32-14.3 32-32V319.1c0-16.8 14.3-32 32-32s32 15.2 32 32V416c0 53-43 96-96 96H96c-53.02.0-96-43-96-96V159.1c0-53 42.98-96 96-96h96z"/></svg></span></a></span></div></div></header><section class="flex flex-col max-w-full mt-0 prose dark:prose-invert lg:flex-row"><div class="order-first px-0 lg:order-last lg:max-w-xs ltr:lg:pl-8 rtl:lg:pr-8"><div class="toc ltr:pl-5 rtl:pr-5 print:hidden lg:sticky lg:top-10"><details open class="mt-0 overflow-hidden rounded-lg ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5"><summary class="block py-1 text-lg font-semibold cursor-pointer bg-neutral-100 text-neutral-800 ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5 dark:bg-neutral-700 dark:text-neutral-100 lg:hidden">Table of Contents</summary><div class="py-2 border-dotted border-neutral-300 ltr:-ml-5 ltr:border-l ltr:pl-5 rtl:-mr-5 rtl:border-r rtl:pr-5 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 grow"><p>In addition to all the <a href=https://gohugo.io/content-management/shortcodes/ target=_blank>default Hugo shortcodes</a>, Congo adds a few extras for additional functionality.</p><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>By default, the alert is presented with an exclaimation triangle icon. To change the icon, include the icon name in the shortcode. Check out the <a href=#icon>icon shortcode</a> for more details on using icons.</p><p><strong>Example:</strong></p><div class=highlight><pre tabindex=0 class=chroma><code class=language-md data-lang=md><span class=line><span class=cl>{{<span class=p>&lt;</span> <span class=nt>alert</span> <span class=p>&gt;</span>}}
</span></span><span class=line><span class=cl><span class=gs>**Warning!**</span> This action is destructive! </span></span><span class=line><span class=cl><span class=gs>**Warning!**</span> This action is destructive!
</span></span><span class=line><span class=cl>{{<span class=p>&lt;</span> <span class=p>/</span><span class=nt>alert</span> <span class=p>&gt;</span>}} </span></span><span class=line><span class=cl>{{<span class=p>&lt;</span> <span class=p>/</span><span class=nt>alert</span> <span class=p>&gt;</span>}}
</span></span><span class=line><span class=cl> </span></span><span class=line><span class=cl>
</span></span><span class=line><span class=cl>{{<span class=p>&lt;</span> <span class=nt>alert</span> <span class=err>&#34;</span><span class=na>twitter</span><span class=err>&#34;</span> <span class=p>&gt;</span>}} </span></span><span class=line><span class=cl>{{<span class=p>&lt;</span> <span class=nt>alert</span> <span class=err>&#34;</span><span class=na>twitter</span><span class=err>&#34;</span> <span class=p>&gt;</span>}}
</span></span><span class=line><span class=cl>Don&#39;t forget to [<span class=nt>follow me</span>](<span class=na>https://twitter.com/jpanther</span>) on Twitter. </span></span><span class=line><span class=cl>Don&#39;t forget to [<span class=nt>follow me</span>](<span class=na>https://twitter.com/jpanther</span>) on Twitter.
</span></span><span class=line><span class=cl>{{<span class=p>&lt;</span> <span class=p>/</span><span class=nt>alert</span> <span class=p>&gt;</span>}} </span></span><span class=line><span class=cl>{{<span class=p>&lt;</span> <span class=p>/</span><span class=nt>alert</span> <span class=p>&gt;</span>}}
</span></span></code></pre></div><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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentcolor" d="M506.3 417 293 53c-16.33-28-57.54-28-73.98.0l-213.2 364C-10.59 444.9 9.849 480 42.74 480h426.6c32.76.0 53.26-35 36.96-63zM232 168c0-13.25 10.75-24 24-24s24 10.8 24 24v128c0 13.25-10.75 24-23.1 24S232 309.3 232 296V168zm24 248c-17.36.0-31.44-14.08-31.44-31.44s14.07-31.44 31.44-31.44 31.44 14.08 31.44 31.44C287.4 401.9 273.4 416 256 416z"/></svg></span></span><span class=dark:text-neutral-300><strong>Warning!</strong> This action is destructive!</span></div> <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 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></span><span class=dark:text-neutral-300>Don&rsquo;t forget to <a href=https://twitter.com/jpanther>follow me</a> on Twitter.</span></div></p><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=line><span class=cl>{{<span class=p>&lt;</span> <span class=nt>badge</span> <span class=p>&gt;</span>}} </span></span></code></pre></div><p><div class="flex px-4 py-3 rounded-md bg-primary-100 dark:bg-primary-900"><span class="text-primary-400 ltr:pr-3 rtl:pl-3"><span class="relative inline-block align-text-bottom icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentcolor" d="M506.3 417 293 53c-16.33-28-57.54-28-73.98.0l-213.2 364C-10.59 444.9 9.849 480 42.74 480h426.6c32.76.0 53.26-35 36.96-63zM232 168c0-13.25 10.75-24 24-24s24 10.8 24 24v128c0 13.25-10.75 24-23.1 24S232 309.3 232 296V168zm24 248c-17.36.0-31.44-14.08-31.44-31.44s14.07-31.44 31.44-31.44 31.44 14.08 31.44 31.44C287.4 401.9 273.4 416 256 416z"/></svg></span></span><span class=dark:text-neutral-300><strong>Warning!</strong> This action is destructive!</span></div> <div class="flex px-4 py-3 rounded-md bg-primary-100 dark:bg-primary-900"><span class="text-primary-400 ltr:pr-3 rtl:pl-3"><span class="relative inline-block align-text-bottom icon"><svg 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></span><span class=dark:text-neutral-300>Don&rsquo;t forget to <a href=https://twitter.com/jpanther target=_blank>follow me</a> on Twitter.</span></div></p><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=line><span class=cl>{{<span class=p>&lt;</span> <span class=nt>badge</span> <span class=p>&gt;</span>}}
</span></span><span class=line><span class=cl>New article! </span></span><span class=line><span class=cl>New article!
</span></span><span class=line><span class=cl>{{<span class=p>&lt;</span> <span class=p>/</span><span class=nt>badge</span> <span class=p>&gt;</span>}} </span></span><span class=line><span class=cl>{{<span class=p>&lt;</span> <span class=p>/</span><span class=nt>badge</span> <span class=p>&gt;</span>}}
</span></span></code></pre></div><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">New article!</span></span><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=line><span class=cl>{{<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>}} </span></span></code></pre></div><span class=flex><span class="rounded-md border border-primary-400 px-1 py-[1px] text-xs font-normal text-primary-700 ltr:ml-1 rtl:mr-1 dark:border-primary-600 dark:text-primary-400">New article!</span></span><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 three optional parameters:</p><table><thead><tr><th>Parameter</th><th>Description</th></tr></thead><tbody><tr><td><code>href</code></td><td>The URL that the button should link to.</td></tr><tr><td><code>target</code></td><td>The target of the link.</td></tr><tr><td><code>download</code></td><td>Whether browser should download the resource rather than navigate to the URL. The value of this parameter will be the name of the downloaded file.</td></tr></tbody></table><p><strong>Example:</strong></p><div class=highlight><pre tabindex=0 class=chroma><code class=language-md data-lang=md><span class=line><span class=cl>{{<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>}}
</span></span><span class=line><span class=cl>Call to action </span></span><span class=line><span class=cl>Call to action
</span></span><span class=line><span class=cl>{{<span class=p>&lt;</span> <span class=p>/</span><span class=nt>button</span> <span class=p>&gt;</span>}} </span></span><span class=line><span class=cl>{{<span class=p>&lt;</span> <span class=p>/</span><span class=nt>button</span> <span class=p>&gt;</span>}}
</span></span></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 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><div class=highlight><pre tabindex=0 class=chroma><code class=language-js data-lang=js><span class=line><span class=cl><span class=p>{{</span><span class=o>&lt;</span> <span class=nx>chart</span> <span class=o>&gt;</span><span class=p>}}</span> </span></span></code></pre></div><a class="inline-block !rounded-md bg-primary-600 px-4 py-1 !text-neutral !no-underline 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 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/ target=_blank>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/ target=_blank>official Chart.js docs</a> for details on syntax and supported chart types.</p><p><strong>Example:</strong></p><div class=highlight><pre tabindex=0 class=chroma><code class=language-js data-lang=js><span class=line><span class=cl><span class=p>{{</span><span class=o>&lt;</span> <span class=nx>chart</span> <span class=o>&gt;</span><span class=p>}}</span>
</span></span><span class=line><span class=cl><span class=nx>type</span><span class=o>:</span> <span class=s1>&#39;bar&#39;</span><span class=p>,</span> </span></span><span class=line><span class=cl><span class=nx>type</span><span class=o>:</span> <span class=s1>&#39;bar&#39;</span><span class=p>,</span>
</span></span><span class=line><span class=cl><span class=nx>data</span><span class=o>:</span> <span class=p>{</span> </span></span><span class=line><span class=cl><span class=nx>data</span><span class=o>:</span> <span class=p>{</span>
</span></span><span class=line><span class=cl> <span class=nx>labels</span><span class=o>:</span> <span class=p>[</span><span class=s1>&#39;Tomato&#39;</span><span class=p>,</span> <span class=s1>&#39;Blueberry&#39;</span><span class=p>,</span> <span class=s1>&#39;Banana&#39;</span><span class=p>,</span> <span class=s1>&#39;Lime&#39;</span><span class=p>,</span> <span class=s1>&#39;Orange&#39;</span><span class=p>],</span> </span></span><span class=line><span class=cl> <span class=nx>labels</span><span class=o>:</span> <span class=p>[</span><span class=s1>&#39;Tomato&#39;</span><span class=p>,</span> <span class=s1>&#39;Blueberry&#39;</span><span class=p>,</span> <span class=s1>&#39;Banana&#39;</span><span class=p>,</span> <span class=s1>&#39;Lime&#39;</span><span class=p>,</span> <span class=s1>&#39;Orange&#39;</span><span class=p>],</span>
@ -28,8 +28,8 @@
</span></span><span class=line><span class=cl> <span class=p>}]</span> </span></span><span class=line><span class=cl> <span class=p>}]</span>
</span></span><span class=line><span class=cl><span class=p>}</span> </span></span><span class=line><span class=cl><span class=p>}</span>
</span></span><span class=line><span class=cl><span class=p>{{</span><span class=o>&lt;</span> <span class=err>/chart &gt;}}</span> </span></span><span class=line><span class=cl><span class=p>{{</span><span class=o>&lt;</span> <span class=err>/chart &gt;}}</span>
</span></span></code></pre></div><div class=chart><canvas id=416839725></canvas> </span></span></code></pre></div><div class=chart><canvas id=985462317></canvas>
<script type=text/javascript>window.addEventListener("DOMContentLoaded",e=>{const t=document.getElementById("416839725"),n=new Chart(t,{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=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>When a provided image is a page resource, it will be optimised using Hugo Pipes and scaled in order to provide images appropriate to different device resolutions. If a static asset or URL to an external image is provided, it will be included as-is without any image processing by Hugo.</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 local path/filename or URL of the image. When providing a path and filename, the theme will attempt to locate the image using the following lookup order: Firstly, as a <a href=https://gohugo.io/content-management/page-resources/>page resource</a> bundled with the page; then an asset in the <code>assets/</code> directory; then finally, a static image in the <code>static/</code> directory.</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=line><span class=cl>![<span class=nt>Alt text</span>](<span class=na>image.jpg &#34;Image caption&#34;</span>) <script type=text/javascript>window.addEventListener("DOMContentLoaded",e=>{const t=document.getElementById("985462317"),n=new Chart(t,{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=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>When a provided image is a page resource, it will be optimised using Hugo Pipes and scaled in order to provide images appropriate to different device resolutions. If a static asset or URL to an external image is provided, it will be included as-is without any image processing by Hugo.</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 local path/filename or URL of the image. When providing a path and filename, the theme will attempt to locate the image using the following lookup order: Firstly, as a <a href=https://gohugo.io/content-management/page-resources/ target=_blank>page resource</a> bundled with the page; then an asset in the <code>assets/</code> directory; then finally, a static image in the <code>static/</code> directory.</td></tr><tr><td><code>alt</code></td><td><a href=https://moz.com/learn/seo/alt-text target=_blank>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 target=_blank>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=line><span class=cl>![<span class=nt>Alt text</span>](<span class=na>image.jpg &#34;Image caption&#34;</span>)
</span></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=line><span class=cl>{{<span class=p>&lt;</span> <span class=nt>figure</span> </span></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=line><span class=cl>{{<span class=p>&lt;</span> <span class=nt>figure</span>
</span></span><span class=line><span class=cl> <span class=na>src</span><span class=o>=</span><span class=s>&#34;abstract.jpg&#34;</span> </span></span><span class=line><span class=cl> <span class=na>src</span><span class=o>=</span><span class=s>&#34;abstract.jpg&#34;</span>
</span></span><span class=line><span class=cl> <span class=na>alt</span><span class=o>=</span><span class=s>&#34;Abstract purple artwork&#34;</span> </span></span><span class=line><span class=cl> <span class=na>alt</span><span class=o>=</span><span class=s>&#34;Abstract purple artwork&#34;</span>
@ -42,25 +42,24 @@
</span></span></code></pre></div><figure><img class="my-0 rounded-md" srcset="/congo/docs/shortcodes/abstract_hu684c0a32e4d0f58583128be29b348bb9_40710_330x0_resize_q75_box.jpg 330w, </span></span></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_660x0_resize_q75_box.jpg 660w,
/congo/docs/shortcodes/abstract_hu684c0a32e4d0f58583128be29b348bb9_40710_1024x0_resize_q75_box.jpg 1024w, /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=line><span class=cl>{{<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>}} /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 target=_blank>Jr Korpa</a> on <a href=https://unsplash.com/ target=_blank>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=line><span class=cl>{{<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>}}
</span></span></code></pre></div><p><strong>Output:</strong> </span></span></code></pre></div><p><strong>Output:</strong>
<span class="relative inline-block align-text-bottom icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="currentcolor" d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6.0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6.0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3.0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1.0-6.2-.3-40.4-.3-61.4.0.0-70 15-84.7-29.8.0.0-11.4-29.1-27.8-36.6.0.0-22.9-15.7 1.6-15.4.0.0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5.0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9.0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4.0 33.7-.3 75.4-.3 83.6.0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6.0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9.0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg></span></p><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 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><p><strong>Example:</strong></p><div class=highlight><pre tabindex=0 class=chroma><code class=language-md data-lang=md><span class=line><span class=cl>{{<span class=p>&lt;</span> <span class=nt>katex</span> <span class=p>&gt;</span>}} <span class="relative inline-block align-text-bottom icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="currentcolor" d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6.0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6.0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3.0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1.0-6.2-.3-40.4-.3-61.4.0.0-70 15-84.7-29.8.0.0-11.4-29.1-27.8-36.6.0.0-22.9-15.7 1.6-15.4.0.0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5.0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9.0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4.0 33.7-.3 75.4-.3 83.6.0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6.0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9.0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg></span></p><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 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 target=_blank>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><p><strong>Example:</strong></p><div class=highlight><pre tabindex=0 class=chroma><code class=language-md data-lang=md><span class=line><span class=cl>{{<span class=p>&lt;</span> <span class=nt>katex</span> <span class=p>&gt;</span>}}
</span></span><span class=line><span class=cl>\\(f(a,b,c) = (a^2+b^2+c^2)^3\\) </span></span><span class=line><span class=cl>\\(f(a,b,c) = (a^2+b^2+c^2)^3\\)
</span></span></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 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=line><span class=cl>{{<span class=p>&lt;</span> <span class=nt>lead</span> <span class=p>&gt;</span>}} </span></span></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 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=line><span class=cl>{{<span class=p>&lt;</span> <span class=nt>lead</span> <span class=p>&gt;</span>}}
</span></span><span class=line><span class=cl>When life gives you lemons, make lemonade. </span></span><span class=line><span class=cl>When life gives you lemons, make lemonade.
</span></span><span class=line><span class=cl>{{<span class=p>&lt;</span> <span class=p>/</span><span class=nt>lead</span> <span class=p>&gt;</span>}} </span></span><span class=line><span class=cl>{{<span class=p>&lt;</span> <span class=p>/</span><span class=nt>lead</span> <span class=p>&gt;</span>}}
</span></span></code></pre></div><div class="!mb-9 text-xl lead">When life gives you lemons, make lemonade.</div><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><p><strong>Example:</strong></p><div class=highlight><pre tabindex=0 class=chroma><code class=language-md data-lang=md><span class=line><span class=cl>{{<span class=p>&lt;</span> <span class=nt>mermaid</span> <span class=p>&gt;</span>}} </span></span></code></pre></div><div class="lead !mb-9 text-xl">When life gives you lemons, make lemonade.</div><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/ target=_blank>official Mermaid docs</a> for details on syntax and supported diagram types.</p><p><strong>Example:</strong></p><div class=highlight><pre tabindex=0 class=chroma><code class=language-md data-lang=md><span class=line><span class=cl>{{<span class=p>&lt;</span> <span class=nt>mermaid</span> <span class=p>&gt;</span>}}
</span></span><span class=line><span class=cl>graph LR; </span></span><span class=line><span class=cl>graph LR;
</span></span><span class=line><span class=cl>A[Lemons]--&gt;B[Lemonade]; </span></span><span class=line><span class=cl>A[Lemons]--&gt;B[Lemonade];
</span></span><span class=line><span class=cl>B--&gt;C[Profit] </span></span><span class=line><span class=cl>B--&gt;C[Profit]
</span></span><span class=line><span class=cl>{{<span class=p>&lt;</span> <span class=p>/</span><span class=nt>mermaid</span> <span class=p>&gt;</span>}} </span></span><span class=line><span class=cl>{{<span class=p>&lt;</span> <span class=p>/</span><span class=nt>mermaid</span> <span class=p>&gt;</span>}}
</span></span></code></pre></div><div class=mermaid align=center>graph LR; </span></span></code></pre></div><div class=mermaid align=center>graph LR;
A[Lemons]-->B[Lemonade]; 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 max-w-prose print:hidden"><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/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> 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 max-w-prose print:hidden"><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="group flex" href=/congo/docs/front-matter/><span class="mr-2 text-neutral-700 transition-transform group-hover:-translate-x-[2px] group-hover:text-primary-600 ltr:inline rtl:hidden dark:text-neutral 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="ml-2 text-neutral-700 transition-transform group-hover:translate-x-[2px] group-hover:text-primary-600 ltr:hidden rtl:inline dark:text-neutral 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">Front Matter</span> <span class="flex flex-col"><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 group" href=/congo/docs/partials/><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="group flex text-right" href=/congo/docs/partials/><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><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="mt-[0.1rem] text-xs text-neutral-500 dark:text-neutral-400"></span></span><span class="ml-2 text-neutral-700 transition-transform group-hover:translate-x-[2px] group-hover:text-primary-600 ltr:inline rtl:hidden dark:text-neutral 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-[100vh] ltr:right-0 rtl:left-0 w-12 pointer-events-none bottom-0"><a href=#the-top class="w-12 h-12 sticky pointer-events-auto top-[calc(100vh-5.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><footer class="py-10 print:hidden"><div class="flex items-center 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="mr-2 text-neutral-700 transition-transform group-hover:-translate-x-[2px] group-hover:text-primary-600 ltr:hidden rtl:inline dark:text-neutral dark:group-hover:text-primary-400">&larr;</span></a></span></div></div></footer></article><div class="pointer-events-none absolute top-[100vh] bottom-0 w-12 ltr:right-0 rtl:left-0"><a href=#the-top class="pointer-events-auto sticky top-[calc(100vh-5.5rem)] flex h-12 w-12 items-center justify-center rounded-full bg-neutral/50 text-xl text-neutral-700 backdrop-blur hover:text-primary-600 dark:bg-neutral-800/50 dark:text-neutral dark:hover:text-primary-400" aria-label="Scroll to top" title="Scroll to top">&uarr;</a></div></main><footer class="py-10 print:hidden"><div class="flex items-center 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="ltr:mr-14 rtl:ml-14 cursor-pointer text-sm text-neutral-700 hover:text-primary-600 dark:text-neutral dark:hover:text-primary-400"><button id=appearance-switcher type=button><div class="flex items-center justify-center w-12 h-12 dark:hidden" title="Switch to dark appearance"><span class="relative inline-block align-text-bottom icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentcolor" d="M32 256C32 132.2 132.3 32 255.8 32c11.36.0 29.7 1.668 40.9 3.746 9.616 1.777 11.75 14.63 3.279 19.44C245 86.5 211.2 144.6 211.2 207.8c0 109.7 99.71 193 208.3 172.3 9.561-1.805 16.28 9.324 10.11 16.95C387.9 448.6 324.8 480 255.8 480 132.1 480 32 379.6 32 256z"/></svg></span></div><div class="items-center justify-center hidden w-12 h-12 dark:flex" title="Switch to light appearance"><span class="relative inline-block align-text-bottom icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentcolor" d="M256 159.1c-53.02.0-95.1 42.98-95.1 95.1s41.2 96.9 95.1 96.9 95.1-42.98 95.1-95.1S309 159.1 256 159.1zM509.3 347l-63.2-91.9 63.15-91.01c6.332-9.125 1.104-21.74-9.826-23.72l-109-19.7-19.7-109c-1.975-10.93-14.59-16.16-23.72-9.824L256 65.89 164.1 2.736c-9.125-6.332-21.74-1.107-23.72 9.824L121.6 121.6 12.56 141.3C1.633 143.2-3.596 155.9 2.736 164.1L65.89 256 2.74 347.01c-6.332 9.125-1.105 21.74 9.824 23.72l109 19.7 19.7 109c1.975 10.93 14.59 16.16 23.72 9.824L256 446.1l91.01 63.15c9.127 6.334 21.75 1.107 23.72-9.822l19.7-109 109-19.7C510.4 368.8 515.6 356.1 509.3 347zM256 383.1c-70.69.0-127.1-57.31-127.1-127.1.0-70.69 57.31-127.1 127.1-127.1S383.1 186.2 383.1 256c0 70.7-56.4 127.1-127.1 127.1z"/></svg></span></div></button></div></div></footer><div id=search-wrapper class="invisible fixed inset-0 z-50 flex h-screen w-screen cursor-default flex-col bg-neutral-500/50 p-4 backdrop-blur-sm dark:bg-neutral-900/50 sm:p-6 md:p-[10vh] lg:p-[12vh]" 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 top-20 border-neutral-200 bg-neutral dark:border-neutral-700 dark:bg-neutral-800"><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-2 focus:outline-transparent" placeholder=Search tabindex=0></form><button id=close-search-button class="flex items-center justify-center w-8 h-8 text-neutral-700 hover:text-primary-600 dark:text-neutral dark:hover:text-primary-400" title="Close (Esc)">
<span class="inline dark:hidden"><span class="relative inline-block align-text-bottom icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentcolor" d="M32 256C32 132.2 132.3 32 255.8 32c11.36.0 29.7 1.668 40.9 3.746 9.616 1.777 11.75 14.63 3.279 19.44C245 86.5 211.2 144.6 211.2 207.8c0 109.7 99.71 193 208.3 172.3 9.561-1.805 16.28 9.324 10.11 16.95C387.9 448.6 324.8 480 255.8 480 132.1 480 32 379.6 32 256z"/></svg></span></span><span class="hidden dark:inline"><span class="relative inline-block align-text-bottom icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentcolor" d="M256 159.1c-53.02.0-95.1 42.98-95.1 95.1s41.2 96.9 95.1 96.9 95.1-42.98 95.1-95.1S309 159.1 256 159.1zM509.3 347l-63.2-91.9 63.15-91.01c6.332-9.125 1.104-21.74-9.826-23.72l-109-19.7-19.7-109c-1.975-10.93-14.59-16.16-23.72-9.824L256 65.89 164.1 2.736c-9.125-6.332-21.74-1.107-23.72 9.824L121.6 121.6 12.56 141.3C1.633 143.2-3.596 155.9 2.736 164.1L65.89 256 2.74 347.01c-6.332 9.125-1.105 21.74 9.824 23.72l109 19.7 19.7 109c1.975 10.93 14.59 16.16 23.72 9.824L256 446.1l91.01 63.15c9.127 6.334 21.75 1.107 23.72-9.822l19.7-109 109-19.7C510.4 368.8 515.6 356.1 509.3 347zM256 383.1c-70.69.0-127.1-57.31-127.1-127.1.0-70.69 57.31-127.1 127.1-127.1S383.1 186.2 383.1 256c0 70.7-56.4 127.1-127.1 127.1z"/></svg></span></span></button></div></div></footer><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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentcolor" d="M310.6 361.4c12.5 12.5 12.5 32.75.0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3 54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75.0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75.0-45.25s32.75-12.5 45.25.0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25.0s12.5 32.75.0 45.25l-105.4 105.4L310.6 361.4z"/></svg></span></button></header><section class="flex-auto px-2 overflow-auto"><ul id=search-results></ul></section></div></div></div></body></html> <span class="relative inline-block align-text-bottom icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentcolor" d="M310.6 361.4c12.5 12.5 12.5 32.75.0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3 54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75.0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75.0-45.25s32.75-12.5 45.25.0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25.0s12.5 32.75.0 45.25l-105.4 105.4L310.6 361.4z"/></svg></span></button></header><section class="flex-auto px-2 overflow-auto"><ul id=search-results></ul></section></div></div></div></body></html>

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1 +0,0 @@
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("katex")):"function"==typeof define&&define.amd?define(["katex"],t):"object"==typeof exports?exports.renderMathInElement=t(require("katex")):e.renderMathInElement=t(e.katex)}("undefined"!=typeof self?self:this,(function(e){return function(){"use strict";var t={771:function(t){t.exports=e}},r={};function n(e){var a=r[e];if(void 0!==a)return a.exports;var i=r[e]={exports:{}};return t[e](i,i.exports,n),i.exports}n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,{a:t}),t},n.d=function(e,t){for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)};var a={};return function(){n.d(a,{default:function(){return s}});var e=n(771),t=n.n(e),r=function(e,t,r){for(var n=r,a=0,i=e.length;n<t.length;){var o=t[n];if(a<=0&&t.slice(n,n+i)===e)return n;"\\"===o?n++:"{"===o?a++:"}"===o&&a--,n++}return-1},i=/^\\begin{/,o=function(e,t){for(var n,a=[],o=new RegExp("("+t.map((function(e){return e.left.replace(/[-/\\^$*+?.()|[\]{}]/g,"\\$&")})).join("|")+")");-1!==(n=e.search(o));){n>0&&(a.push({type:"text",data:e.slice(0,n)}),e=e.slice(n));var l=t.findIndex((function(t){return e.startsWith(t.left)}));if(-1===(n=r(t[l].right,e,t[l].left.length)))break;var d=e.slice(0,n+t[l].right.length),s=i.test(d)?d:e.slice(t[l].left.length,n);a.push({type:"math",data:s,rawData:d,display:t[l].display}),e=e.slice(n+t[l].right.length)}return""!==e&&a.push({type:"text",data:e}),a},l=function(e,r){var n=o(e,r.delimiters);if(1===n.length&&"text"===n[0].type)return null;for(var a=document.createDocumentFragment(),i=0;i<n.length;i++)if("text"===n[i].type)a.appendChild(document.createTextNode(n[i].data));else{var l=document.createElement("span"),d=n[i].data;r.displayMode=n[i].display;try{r.preProcess&&(d=r.preProcess(d)),t().render(d,l,r)}catch(e){if(!(e instanceof t().ParseError))throw e;r.errorCallback("KaTeX auto-render: Failed to parse `"+n[i].data+"` with ",e),a.appendChild(document.createTextNode(n[i].rawData));continue}a.appendChild(l)}return a},d=function e(t,r){for(var n=0;n<t.childNodes.length;n++){var a=t.childNodes[n];if(3===a.nodeType){var i=l(a.textContent,r);i&&(n+=i.childNodes.length-1,t.replaceChild(i,a))}else 1===a.nodeType&&function(){var t=" "+a.className+" ";-1===r.ignoredTags.indexOf(a.nodeName.toLowerCase())&&r.ignoredClasses.every((function(e){return-1===t.indexOf(" "+e+" ")}))&&e(a,r)}()}},s=function(e,t){if(!e)throw new Error("No element provided to render");var r={};for(var n in t)t.hasOwnProperty(n)&&(r[n]=t[n]);r.delimiters=r.delimiters||[{left:"$$",right:"$$",display:!0},{left:"\\(",right:"\\)",display:!1},{left:"\\begin{equation}",right:"\\end{equation}",display:!0},{left:"\\begin{align}",right:"\\end{align}",display:!0},{left:"\\begin{alignat}",right:"\\end{alignat}",display:!0},{left:"\\begin{gather}",right:"\\end{gather}",display:!0},{left:"\\begin{CD}",right:"\\end{CD}",display:!0},{left:"\\[",right:"\\]",display:!0}],r.ignoredTags=r.ignoredTags||["script","noscript","style","textarea","pre","code","option"],r.ignoredClasses=r.ignoredClasses||[],r.errorCallback=r.errorCallback||console.error,r.macros=r.macros||{},d(e,r)}}(),a=a.default}()}));

View File

@ -0,0 +1 @@
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("katex")):"function"==typeof define&&define.amd?define(["katex"],t):"object"==typeof exports?exports.renderMathInElement=t(require("katex")):e.renderMathInElement=t(e.katex)}("undefined"!=typeof self?self:this,(function(e){return function(){"use strict";var t={771:function(t){t.exports=e}},r={};function n(e){var i=r[e];if(void 0!==i)return i.exports;var a=r[e]={exports:{}};return t[e](a,a.exports,n),a.exports}n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,{a:t}),t},n.d=function(e,t){for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)};var i={};return function(){n.d(i,{default:function(){return s}});var e=n(771),t=n.n(e),r=function(e,t,r){for(var n=r,i=0,a=e.length;n<t.length;){var o=t[n];if(i<=0&&t.slice(n,n+a)===e)return n;"\\"===o?n++:"{"===o?i++:"}"===o&&i--,n++}return-1},a=/^\\begin{/,o=function(e,t){for(var n,i=[],o=new RegExp("("+t.map((function(e){return e.left.replace(/[-/\\^$*+?.()|[\]{}]/g,"\\$&")})).join("|")+")");-1!==(n=e.search(o));){n>0&&(i.push({type:"text",data:e.slice(0,n)}),e=e.slice(n));var l=t.findIndex((function(t){return e.startsWith(t.left)}));if(-1===(n=r(t[l].right,e,t[l].left.length)))break;var d=e.slice(0,n+t[l].right.length),s=a.test(d)?d:e.slice(t[l].left.length,n);i.push({type:"math",data:s,rawData:d,display:t[l].display}),e=e.slice(n+t[l].right.length)}return""!==e&&i.push({type:"text",data:e}),i},l=function(e,r){var n=o(e,r.delimiters);if(1===n.length&&"text"===n[0].type)return null;for(var i=document.createDocumentFragment(),a=0;a<n.length;a++)if("text"===n[a].type)i.appendChild(document.createTextNode(n[a].data));else{var l=document.createElement("span"),d=n[a].data;r.displayMode=n[a].display;try{r.preProcess&&(d=r.preProcess(d)),t().render(d,l,r)}catch(e){if(!(e instanceof t().ParseError))throw e;r.errorCallback("KaTeX auto-render: Failed to parse `"+n[a].data+"` with ",e),i.appendChild(document.createTextNode(n[a].rawData));continue}i.appendChild(l)}return i},d=function e(t,r){for(var n=0;n<t.childNodes.length;n++){var i=t.childNodes[n];if(3===i.nodeType){for(var a=i.textContent,o=i.nextSibling,d=0;o&&o.nodeType===Node.TEXT_NODE;)a+=o.textContent,o=o.nextSibling,d++;var s=l(a,r);if(s){for(var f=0;f<d;f++)i.nextSibling.remove();n+=s.childNodes.length-1,t.replaceChild(s,i)}else n+=d}else 1===i.nodeType&&function(){var t=" "+i.className+" ";-1===r.ignoredTags.indexOf(i.nodeName.toLowerCase())&&r.ignoredClasses.every((function(e){return-1===t.indexOf(" "+e+" ")}))&&e(i,r)}()}},s=function(e,t){if(!e)throw new Error("No element provided to render");var r={};for(var n in t)t.hasOwnProperty(n)&&(r[n]=t[n]);r.delimiters=r.delimiters||[{left:"$$",right:"$$",display:!0},{left:"\\(",right:"\\)",display:!1},{left:"\\begin{equation}",right:"\\end{equation}",display:!0},{left:"\\begin{align}",right:"\\end{align}",display:!0},{left:"\\begin{alignat}",right:"\\end{alignat}",display:!0},{left:"\\begin{gather}",right:"\\end{gather}",display:!0},{left:"\\begin{CD}",right:"\\end{CD}",display:!0},{left:"\\[",right:"\\]",display:!0}],r.ignoredTags=r.ignoredTags||["script","noscript","style","textarea","pre","code","option"],r.ignoredClasses=r.ignoredClasses||[],r.errorCallback=r.errorCallback||console.error,r.macros=r.macros||{},d(e,r)}}(),i=i.default}()}));

View File

@ -1,16 +1,15 @@
<!doctype html><html lang=en-au dir=ltr class=scroll-smooth data-default-appearance=light 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>Charts &#183; Congo</title><meta name=title content="Charts &#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/charts/><link type=text/css rel=stylesheet href=/congo/css/main.bundle.min.3552466d62941f854cc764b706ab5b2e3616325dd23313577f99ff83f095a09e436d4734656eb0ab9f588d93c251fdf636660a728c2f6ccb49697325daac8a6c.css integrity="sha512-NVJGbWKUH4VMx2S3BqtbLjYWMl3SMxNXf5n/g/CVoJ5DbUc0ZW6wq59YjZPCUf32NmYKcowvbMtJaXMl2qyKbA=="><script type=text/javascript src=/congo/js/appearance.min.badab316c9287a5a42a843e4eb45da65bb3d194a5a0f5fa4a3e516160e67df0b8c65f4f19a8e146436e29d583699e6cb41d6bbe99e05e1dbaa877763bad9f8e2.js integrity="sha512-utqzFskoelpCqEPk60XaZbs9GUpaD1+ko+UWFg5n3wuMZfTxmo4UZDbinVg2mebLQda76Z4F4duqh3djutn44g=="></script> <!doctype html><html lang=en-au dir=ltr class=scroll-smooth data-default-appearance=light 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>Charts &#183; Congo</title><meta name=title content="Charts &#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/charts/><link type=text/css rel=stylesheet href=/congo/css/main.bundle.min.2aa0f8f5cb9b8644385c0ca742c7054ae86d1edd18dce3b0de51c3d5ae4eff5d93f5224afa4205b8c02f10866a39de3ad83e2d4827e696ecd3aa2707382d4cf3.css integrity="sha512-KqD49cubhkQ4XAynQscFSuhtHt0Y3OOw3lHD1a5O/12T9SJK+kIFuMAvEIZqOd462D4tSCfmluzTqicHOC1M8w=="><script type=text/javascript src=/congo/js/appearance.min.badab316c9287a5a42a843e4eb45da65bb3d194a5a0f5fa4a3e516160e67df0b8c65f4f19a8e146436e29d583699e6cb41d6bbe99e05e1dbaa877763bad9f8e2.js integrity="sha512-utqzFskoelpCqEPk60XaZbs9GUpaD1+ko+UWFg5n3wuMZfTxmo4UZDbinVg2mebLQda76Z4F4duqh3djutn44g=="></script>
<script defer type=text/javascript id=script-bundle src=/congo/js/main.bundle.min.b607eb5ea0f48ef635db6a1c024a35eeff4529157e49461941aac333a158a1f71cae4e530d45ac010598695f823dbe38a63142757e37c2d7b74a309d7296f681.js integrity="sha512-tgfrXqD0jvY122ocAko17v9FKRV+SUYZQarDM6FYofccrk5TDUWsAQWYaV+CPb44pjFCdX43wte3SjCdcpb2gQ==" data-copy=Copy data-copied=Copied></script> <script defer type=text/javascript id=script-bundle src=/congo/js/main.bundle.min.6d78c827ca7bcbf72056dbf698bf9aeb759a08966686187deb23f5949f73eca5f39b461284900cdfc08e2976d99eb80a8663648de778ba2a83e633ae16dbfc25.js integrity="sha512-bXjIJ8p7y/cgVtv2mL+a63WaCJZmhhh96yP1lJ9z7KXzm0YShJAM38COKXbZnrgKhmNkjed4uiqD5jOuFtv8JQ==" 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="Charts"><meta property="og:description" content="Guide to Chart.js usage in Congo"><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="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":"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":"81"}]</script><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 type=text/javascript src=/congo/js/chart.bundle.b5ceb9f9efc16aa2ebd1838ecb2a097518db6139adf18e38ca9869204cebe0c1bb2c6c669abf1251ef96bbb810bc232798366a923499f379e036378f053195e6.js integrity="sha512-tc65+e/BaqLr0YOOyyoJdRjbYTmt8Y44yphpIEzr4MG7LGxmmr8SUe+Wu7gQvCMnmDZqkjSZ83ngNjePBTGV5g=="></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"><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="py-6 font-semibold sm:py-10 text-neutral-900 dark:text-neutral print:hidden"><nav class="flex justify-between"><div><a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" rel=me href=/congo/>Congo</a></div><ul class="flex flex-col list-none ltr:text-right rtl:text-left sm:flex-row"><li class="mb-1 sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"><a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" href=/congo/docs/ title=Documentation>Docs</a></li><li class="mb-1 sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"><a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" href=/congo/samples/ title="Content Samples">Samples</a></li><li class="mb-1 sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"><a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" href=/congo/users/ title=Users>Users</a></li><li class="mb-1 sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"><a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" href=https://github.com/jpanther/congo title>GitHub</a></li><li class="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 (/)"> <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="Charts"><meta property="og:description" content="Guide to Chart.js usage in Congo"><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="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":"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":"81"}]</script><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 type=text/javascript src=/congo/js/chart.bundle.7bb7442fd631bca73babc31b569fe1d964f0e9d02a52e7ca4f8d2b425f7aa4977bc8b0fde1bf5afecc963031e5c78e6caa3a4520ea9f4aa467d99065a5d60af0.js integrity="sha512-e7dEL9YxvKc7q8MbVp/h2WTw6dAqUufKT40rQl96pJd7yLD94b9a/syWMDHlx45sqjpFIOqfSqRn2ZBlpdYK8A=="></script></head><body class="flex flex-col h-screen px-6 m-auto text-lg leading-7 max-w-7xl bg-neutral text-neutral-900 dark:bg-neutral-800 dark:text-neutral sm:px-14 md:px-24 lg:px-32"><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 focus:translate-y-0 dark:bg-neutral-600" href=#main-content><span class="font-bold text-primary-600 ltr:pr-2 rtl:pl-2 dark:text-primary-400">&darr;</span>Skip to main content</a></div><header class="py-6 font-semibold text-neutral-900 dark:text-neutral print:hidden sm:py-10"><nav class="flex items-start justify-between sm:items-center"><div class="flex flex-row items-center"><a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" rel=me href=/congo/>Congo</a></div><ul class="flex list-none flex-col ltr:text-right rtl:text-left sm:flex-row"><li class="mb-1 sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"><a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" href=/congo/docs/ title=Documentation>Docs</a></li><li class="mb-1 sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"><a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" href=/congo/samples/ title="Content Samples">Samples</a></li><li class="mb-1 sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"><a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" href=/congo/users/ title=Users>Users</a></li><li class="mb-1 sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"><a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" href=https://github.com/jpanther/congo title>GitHub</a></li><li class="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><div class="relative flex flex-col grow"><main id=main-content class=grow><article><header class=max-w-prose><ol class="text-sm text-neutral-500 dark:text-neutral-400 print:hidden"><li class="inline hidden"><a class="hover:underline 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 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 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">Charts</h1><div class="mt-8 mb-12 text-base text-neutral-500 dark:text-neutral-400 print:hidden"><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></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 print:hidden"><details open class="mt-0 overflow-hidden rounded-lg rtl:pr-5 ltr:pl-5 ltr:-ml-5 rtl:-mr-5"><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 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=184692537></canvas> <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><div class="relative flex flex-col grow"><main id=main-content class=grow><article><header class=max-w-prose><ol class="text-sm text-neutral-500 dark:text-neutral-400 print:hidden"><li class="inline hidden"><a class="hover:underline 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 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 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">Charts</h1><div class="mt-8 mb-12 text-base text-neutral-500 dark:text-neutral-400 print:hidden"><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></header><section class="flex flex-col max-w-full mt-0 prose dark:prose-invert lg:flex-row"><div class="order-first px-0 lg:order-last lg:max-w-xs ltr:lg:pl-8 rtl:lg:pr-8"><div class="toc ltr:pl-5 rtl:pr-5 print:hidden lg:sticky lg:top-10"><details open class="mt-0 overflow-hidden rounded-lg ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5"><summary class="block py-1 text-lg font-semibold cursor-pointer bg-neutral-100 text-neutral-800 ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5 dark:bg-neutral-700 dark:text-neutral-100 lg:hidden">Table of Contents</summary><div class="py-2 border-dotted border-neutral-300 ltr:-ml-5 ltr:border-l ltr:pl-5 rtl:-mr-5 rtl:border-r rtl:pr-5 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 grow"><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 target=_blank>official Chart.js docs</a>. You can also <a href=https://raw.githubusercontent.com/jpanther/congo/dev/exampleSite/content/samples/charts.md target=_blank>view the page source</a> on GitHub to see the markup.</p><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=789654132></canvas>
<script type=text/javascript>window.addEventListener("DOMContentLoaded",e=>{const t=document.getElementById("184692537"),n=new Chart(t,{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 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=438159627></canvas> <script type=text/javascript>window.addEventListener("DOMContentLoaded",e=>{const t=document.getElementById("789654132"),n=new Chart(t,{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 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=841629753></canvas>
<script type=text/javascript>window.addEventListener("DOMContentLoaded",e=>{const t=document.getElementById("438159627"),n=new Chart(t,{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 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=872359641></canvas> <script type=text/javascript>window.addEventListener("DOMContentLoaded",e=>{const t=document.getElementById("841629753"),n=new Chart(t,{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 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=531724869></canvas>
<script type=text/javascript>window.addEventListener("DOMContentLoaded",e=>{const t=document.getElementById("872359641"),n=new Chart(t,{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 max-w-prose print:hidden"><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=Congo 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 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 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 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 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><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/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> <script type=text/javascript>window.addEventListener("DOMContentLoaded",e=>{const t=document.getElementById("531724869"),n=new Chart(t,{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 max-w-prose print:hidden"><div class=flex><img class="!mt-0 !mb-0 h-24 w-24 rounded-full ltr:mr-4 rtl:ml-4" width=96 height=96 alt=Congo src=/congo/img/author_hu052d24d60828c1cca42a6aefe45b8b44_54195_192x192_fill_q75_box_smart1.jpg><div class=place-self-center><div class="text-[0.6rem] uppercase leading-3 text-neutral-500 dark:text-neutral-400">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 transition-transform hover:scale-125 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 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 transition-transform hover:scale-125 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 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 transition-transform hover:scale-125 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 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 transition-transform hover:scale-125 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 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><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="group flex" href=/congo/samples/diagrams-flowcharts/><span class="mr-2 text-neutral-700 transition-transform group-hover:-translate-x-[2px] group-hover:text-primary-600 ltr:inline rtl:hidden dark:text-neutral 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="ml-2 text-neutral-700 transition-transform group-hover:translate-x-[2px] group-hover:text-primary-600 ltr:hidden rtl:inline dark:text-neutral 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">Diagrams and Flowcharts</span> <span class="flex flex-col"><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></a></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></a></span>
<span><a class="flex text-right group" href=/congo/samples/mathematical-notation/><span class="flex flex-col"><span class="mt-[0.1rem] leading-6 group-hover:underline group-hover:decoration-primary-500">Mathematical notation</span> <span><a class="group flex text-right" href=/congo/samples/mathematical-notation/><span class="flex flex-col"><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-08 00:00:00 +0000 UTC">8 March 2019</time></span></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></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="ml-2 text-neutral-700 transition-transform group-hover:translate-x-[2px] group-hover:text-primary-600 ltr:inline rtl:hidden dark:text-neutral 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 print:hidden"><div class="flex items-center 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="mr-2 text-neutral-700 transition-transform group-hover:-translate-x-[2px] group-hover:text-primary-600 ltr:hidden rtl:inline dark:text-neutral dark:group-hover:text-primary-400">&larr;</span></a></span></div></div></footer></article></main><footer class="py-10 print:hidden"><div class="flex items-center 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="ltr:mr-14 rtl:ml-14 cursor-pointer text-sm text-neutral-700 hover:text-primary-600 dark:text-neutral dark:hover:text-primary-400"><button id=appearance-switcher type=button><div class="flex items-center justify-center w-12 h-12 dark:hidden" title="Switch to dark appearance"><span class="relative inline-block align-text-bottom icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentcolor" d="M32 256C32 132.2 132.3 32 255.8 32c11.36.0 29.7 1.668 40.9 3.746 9.616 1.777 11.75 14.63 3.279 19.44C245 86.5 211.2 144.6 211.2 207.8c0 109.7 99.71 193 208.3 172.3 9.561-1.805 16.28 9.324 10.11 16.95C387.9 448.6 324.8 480 255.8 480 132.1 480 32 379.6 32 256z"/></svg></span></div><div class="items-center justify-center hidden w-12 h-12 dark:flex" title="Switch to light appearance"><span class="relative inline-block align-text-bottom icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentcolor" d="M256 159.1c-53.02.0-95.1 42.98-95.1 95.1s41.2 96.9 95.1 96.9 95.1-42.98 95.1-95.1S309 159.1 256 159.1zM509.3 347l-63.2-91.9 63.15-91.01c6.332-9.125 1.104-21.74-9.826-23.72l-109-19.7-19.7-109c-1.975-10.93-14.59-16.16-23.72-9.824L256 65.89 164.1 2.736c-9.125-6.332-21.74-1.107-23.72 9.824L121.6 121.6 12.56 141.3C1.633 143.2-3.596 155.9 2.736 164.1L65.89 256 2.74 347.01c-6.332 9.125-1.105 21.74 9.824 23.72l109 19.7 19.7 109c1.975 10.93 14.59 16.16 23.72 9.824L256 446.1l91.01 63.15c9.127 6.334 21.75 1.107 23.72-9.822l19.7-109 109-19.7C510.4 368.8 515.6 356.1 509.3 347zM256 383.1c-70.69.0-127.1-57.31-127.1-127.1.0-70.69 57.31-127.1 127.1-127.1S383.1 186.2 383.1 256c0 70.7-56.4 127.1-127.1 127.1z"/></svg></span></div></button></div></div></footer><div id=search-wrapper class="invisible fixed inset-0 z-50 flex h-screen w-screen cursor-default flex-col bg-neutral-500/50 p-4 backdrop-blur-sm dark:bg-neutral-900/50 sm:p-6 md:p-[10vh] lg:p-[12vh]" 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 top-20 border-neutral-200 bg-neutral dark:border-neutral-700 dark:bg-neutral-800"><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-2 focus:outline-transparent" placeholder=Search tabindex=0></form><button id=close-search-button class="flex items-center justify-center w-8 h-8 text-neutral-700 hover:text-primary-600 dark:text-neutral dark:hover:text-primary-400" title="Close (Esc)">
<span class="inline dark:hidden"><span class="relative inline-block align-text-bottom icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentcolor" d="M32 256C32 132.2 132.3 32 255.8 32c11.36.0 29.7 1.668 40.9 3.746 9.616 1.777 11.75 14.63 3.279 19.44C245 86.5 211.2 144.6 211.2 207.8c0 109.7 99.71 193 208.3 172.3 9.561-1.805 16.28 9.324 10.11 16.95C387.9 448.6 324.8 480 255.8 480 132.1 480 32 379.6 32 256z"/></svg></span></span><span class="hidden dark:inline"><span class="relative inline-block align-text-bottom icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentcolor" d="M256 159.1c-53.02.0-95.1 42.98-95.1 95.1s41.2 96.9 95.1 96.9 95.1-42.98 95.1-95.1S309 159.1 256 159.1zM509.3 347l-63.2-91.9 63.15-91.01c6.332-9.125 1.104-21.74-9.826-23.72l-109-19.7-19.7-109c-1.975-10.93-14.59-16.16-23.72-9.824L256 65.89 164.1 2.736c-9.125-6.332-21.74-1.107-23.72 9.824L121.6 121.6 12.56 141.3C1.633 143.2-3.596 155.9 2.736 164.1L65.89 256 2.74 347.01c-6.332 9.125-1.105 21.74 9.824 23.72l109 19.7 19.7 109c1.975 10.93 14.59 16.16 23.72 9.824L256 446.1l91.01 63.15c9.127 6.334 21.75 1.107 23.72-9.822l19.7-109 109-19.7C510.4 368.8 515.6 356.1 509.3 347zM256 383.1c-70.69.0-127.1-57.31-127.1-127.1.0-70.69 57.31-127.1 127.1-127.1S383.1 186.2 383.1 256c0 70.7-56.4 127.1-127.1 127.1z"/></svg></span></span></button></div></div></footer><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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentcolor" d="M310.6 361.4c12.5 12.5 12.5 32.75.0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3 54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75.0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75.0-45.25s32.75-12.5 45.25.0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25.0s12.5 32.75.0 45.25l-105.4 105.4L310.6 361.4z"/></svg></span></button></header><section class="flex-auto px-2 overflow-auto"><ul id=search-results></ul></section></div></div></div></body></html> <span class="relative inline-block align-text-bottom icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentcolor" d="M310.6 361.4c12.5 12.5 12.5 32.75.0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3 54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75.0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75.0-45.25s32.75-12.5 45.25.0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25.0s12.5 32.75.0 45.25l-105.4 105.4L310.6 361.4z"/></svg></span></button></header><section class="flex-auto px-2 overflow-auto"><ul id=search-results></ul></section></div></div></div></body></html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 147 KiB

View File

@ -1,7 +1,7 @@
<!doctype html><html lang=en-au dir=ltr class=scroll-smooth data-default-appearance=light 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>Diagrams and Flowcharts &#183; Congo</title><meta name=title content="Diagrams and Flowcharts &#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/diagrams-flowcharts/><link type=text/css rel=stylesheet href=/congo/css/main.bundle.min.3552466d62941f854cc764b706ab5b2e3616325dd23313577f99ff83f095a09e436d4734656eb0ab9f588d93c251fdf636660a728c2f6ccb49697325daac8a6c.css integrity="sha512-NVJGbWKUH4VMx2S3BqtbLjYWMl3SMxNXf5n/g/CVoJ5DbUc0ZW6wq59YjZPCUf32NmYKcowvbMtJaXMl2qyKbA=="><script type=text/javascript src=/congo/js/appearance.min.badab316c9287a5a42a843e4eb45da65bb3d194a5a0f5fa4a3e516160e67df0b8c65f4f19a8e146436e29d583699e6cb41d6bbe99e05e1dbaa877763bad9f8e2.js integrity="sha512-utqzFskoelpCqEPk60XaZbs9GUpaD1+ko+UWFg5n3wuMZfTxmo4UZDbinVg2mebLQda76Z4F4duqh3djutn44g=="></script> <!doctype html><html lang=en-au dir=ltr class=scroll-smooth data-default-appearance=light 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>Diagrams and Flowcharts &#183; Congo</title><meta name=title content="Diagrams and Flowcharts &#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/diagrams-flowcharts/><link type=text/css rel=stylesheet href=/congo/css/main.bundle.min.2aa0f8f5cb9b8644385c0ca742c7054ae86d1edd18dce3b0de51c3d5ae4eff5d93f5224afa4205b8c02f10866a39de3ad83e2d4827e696ecd3aa2707382d4cf3.css integrity="sha512-KqD49cubhkQ4XAynQscFSuhtHt0Y3OOw3lHD1a5O/12T9SJK+kIFuMAvEIZqOd462D4tSCfmluzTqicHOC1M8w=="><script type=text/javascript src=/congo/js/appearance.min.badab316c9287a5a42a843e4eb45da65bb3d194a5a0f5fa4a3e516160e67df0b8c65f4f19a8e146436e29d583699e6cb41d6bbe99e05e1dbaa877763bad9f8e2.js integrity="sha512-utqzFskoelpCqEPk60XaZbs9GUpaD1+ko+UWFg5n3wuMZfTxmo4UZDbinVg2mebLQda76Z4F4duqh3djutn44g=="></script>
<script defer type=text/javascript id=script-bundle src=/congo/js/main.bundle.min.b607eb5ea0f48ef635db6a1c024a35eeff4529157e49461941aac333a158a1f71cae4e530d45ac010598695f823dbe38a63142757e37c2d7b74a309d7296f681.js integrity="sha512-tgfrXqD0jvY122ocAko17v9FKRV+SUYZQarDM6FYofccrk5TDUWsAQWYaV+CPb44pjFCdX43wte3SjCdcpb2gQ==" data-copy=Copy data-copied=Copied></script> <script defer type=text/javascript id=script-bundle src=/congo/js/main.bundle.min.6d78c827ca7bcbf72056dbf698bf9aeb759a08966686187deb23f5949f73eca5f39b461284900cdfc08e2976d99eb80a8663648de778ba2a83e633ae16dbfc25.js integrity="sha512-bXjIJ8p7y/cgVtv2mL+a63WaCJZmhhh96yP1lJ9z7KXzm0YShJAM38COKXbZnrgKhmNkjed4uiqD5jOuFtv8JQ==" 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="Diagrams and Flowcharts"><meta property="og:description" content="Guide to Mermaid usage in Congo"><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="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":"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":"250"}]</script><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 type=text/javascript src=/congo/js/mermaid.bundle.c6bf424644b889a1a59728296ff9c976840f130c1ccd5c79a6d1ebd42edf1fde90c0f95014e23dc6322d337d24a8ac0691850946296a71de6da63a3332fb0329.js integrity="sha512-xr9CRkS4iaGllygpb/nJdoQPEwwczVx5ptHr1C7fH96QwPlQFOI9xjItM30kqKwGkYUJRilqcd5tpjozMvsDKQ=="></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"><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="py-6 font-semibold sm:py-10 text-neutral-900 dark:text-neutral print:hidden"><nav class="flex justify-between"><div><a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" rel=me href=/congo/>Congo</a></div><ul class="flex flex-col list-none ltr:text-right rtl:text-left sm:flex-row"><li class="mb-1 sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"><a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" href=/congo/docs/ title=Documentation>Docs</a></li><li class="mb-1 sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"><a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" href=/congo/samples/ title="Content Samples">Samples</a></li><li class="mb-1 sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"><a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" href=/congo/users/ title=Users>Users</a></li><li class="mb-1 sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"><a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" href=https://github.com/jpanther/congo title>GitHub</a></li><li class="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 (/)"> <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="Diagrams and Flowcharts"><meta property="og:description" content="Guide to Mermaid usage in Congo"><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="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":"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":"250"}]</script><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 type=text/javascript src=/congo/js/mermaid.bundle.f2cb4ee87fa275805b2c26b9bcefbb00facc64ccb40047856e31d64b01cb00d527748526065593c5bb0ebfdab368d498701970ce609fe874bac58d36340fa0e3.js integrity="sha512-8stO6H+idYBbLCa5vO+7APrMZMy0AEeFbjHWSwHLANUndIUmBlWTxbsOv9qzaNSYcBlwzmCf6HS6xY02NA+g4w=="></script></head><body class="flex flex-col h-screen px-6 m-auto text-lg leading-7 max-w-7xl bg-neutral text-neutral-900 dark:bg-neutral-800 dark:text-neutral sm:px-14 md:px-24 lg:px-32"><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 focus:translate-y-0 dark:bg-neutral-600" href=#main-content><span class="font-bold text-primary-600 ltr:pr-2 rtl:pl-2 dark:text-primary-400">&darr;</span>Skip to main content</a></div><header class="py-6 font-semibold text-neutral-900 dark:text-neutral print:hidden sm:py-10"><nav class="flex items-start justify-between sm:items-center"><div class="flex flex-row items-center"><a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" rel=me href=/congo/>Congo</a></div><ul class="flex list-none flex-col ltr:text-right rtl:text-left sm:flex-row"><li class="mb-1 sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"><a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" href=/congo/docs/ title=Documentation>Docs</a></li><li class="mb-1 sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"><a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" href=/congo/samples/ title="Content Samples">Samples</a></li><li class="mb-1 sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"><a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" href=/congo/users/ title=Users>Users</a></li><li class="mb-1 sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"><a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" href=https://github.com/jpanther/congo title>GitHub</a></li><li class="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><div class="relative flex flex-col grow"><main id=main-content class=grow><article><header class=max-w-prose><ol class="text-sm text-neutral-500 dark:text-neutral-400 print:hidden"><li class="inline hidden"><a class="hover:underline 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 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 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">Diagrams and Flowcharts</h1><div class="mt-8 mb-12 text-base text-neutral-500 dark:text-neutral-400 print:hidden"><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></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 print:hidden"><details open class="mt-0 overflow-hidden rounded-lg rtl:pr-5 ltr:pl-5 ltr:-ml-5 rtl:-mr-5"><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 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 <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><div class="relative flex flex-col grow"><main id=main-content class=grow><article><header class=max-w-prose><ol class="text-sm text-neutral-500 dark:text-neutral-400 print:hidden"><li class="inline hidden"><a class="hover:underline 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 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 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">Diagrams and Flowcharts</h1><div class="mt-8 mb-12 text-base text-neutral-500 dark:text-neutral-400 print:hidden"><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></header><section class="flex flex-col max-w-full mt-0 prose dark:prose-invert lg:flex-row"><div class="order-first px-0 lg:order-last lg:max-w-xs ltr:lg:pl-8 rtl:lg:pr-8"><div class="toc ltr:pl-5 rtl:pr-5 print:hidden lg:sticky lg:top-10"><details open class="mt-0 overflow-hidden rounded-lg ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5"><summary class="block py-1 text-lg font-semibold cursor-pointer bg-neutral-100 text-neutral-800 ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5 dark:bg-neutral-700 dark:text-neutral-100 lg:hidden">Table of Contents</summary><div class="py-2 border-dotted border-neutral-300 ltr:-ml-5 ltr:border-l ltr:pl-5 rtl:-mr-5 rtl:border-r rtl:pr-5 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 grow"><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/ target=_blank>official Mermaid docs</a>. You can also <a href=https://raw.githubusercontent.com/jpanther/congo/dev/exampleSite/content/samples/diagrams-flowcharts.md target=_blank>view the page source</a> on GitHub to see the markup.</p><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) A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think} B --> C{Let me think}
B --> G[/Another/] B --> G[/Another/]
@ -56,13 +56,12 @@ DELIVERY-ADDRESS ||--o{ ORDER : receives
INVOICE ||--|{ ORDER : covers INVOICE ||--|{ ORDER : covers
ORDER ||--|{ ORDER-ITEM : includes ORDER ||--|{ ORDER-ITEM : includes
PRODUCT-CATEGORY ||--|{ PRODUCT : contains PRODUCT-CATEGORY ||--|{ PRODUCT : contains
PRODUCT ||--o{ ORDER-ITEM : "ordered in"</div></div></section><footer class="pt-8 max-w-prose print:hidden"><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=Congo 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 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 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 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 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><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/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> PRODUCT ||--o{ ORDER-ITEM : "ordered in"</div></div></section><footer class="pt-8 max-w-prose print:hidden"><div class=flex><img class="!mt-0 !mb-0 h-24 w-24 rounded-full ltr:mr-4 rtl:ml-4" width=96 height=96 alt=Congo src=/congo/img/author_hu052d24d60828c1cca42a6aefe45b8b44_54195_192x192_fill_q75_box_smart1.jpg><div class=place-self-center><div class="text-[0.6rem] uppercase leading-3 text-neutral-500 dark:text-neutral-400">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 transition-transform hover:scale-125 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 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 transition-transform hover:scale-125 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 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 transition-transform hover:scale-125 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 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 transition-transform hover:scale-125 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 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><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="group flex" href=/congo/samples/emoji/><span class="mr-2 text-neutral-700 transition-transform group-hover:-translate-x-[2px] group-hover:text-primary-600 ltr:inline rtl:hidden dark:text-neutral 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="ml-2 text-neutral-700 transition-transform group-hover:translate-x-[2px] group-hover:text-primary-600 ltr:hidden rtl:inline dark:text-neutral 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">Emoji 🪂</span> <span class="flex flex-col"><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-05 00:00:00 +0000 UTC">5 March 2019</time></span></span></a></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></span></span></a></span>
<span><a class="flex text-right group" href=/congo/samples/charts/><span class="flex flex-col"><span class="mt-[0.1rem] leading-6 group-hover:underline group-hover:decoration-primary-500">Charts</span> <span><a class="group flex text-right" href=/congo/samples/charts/><span class="flex flex-col"><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-06 00:00:00 +0000 UTC">6 March 2019</time></span></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="ml-2 text-neutral-700 transition-transform group-hover:translate-x-[2px] group-hover:text-primary-600 ltr:inline rtl:hidden dark:text-neutral 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-[100vh] ltr:right-0 rtl:left-0 w-12 pointer-events-none bottom-0"><a href=#the-top class="w-12 h-12 sticky pointer-events-auto top-[calc(100vh-5.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><footer class="py-10 print:hidden"><div class="flex items-center 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="mr-2 text-neutral-700 transition-transform group-hover:-translate-x-[2px] group-hover:text-primary-600 ltr:hidden rtl:inline dark:text-neutral dark:group-hover:text-primary-400">&larr;</span></a></span></div></div></footer></article><div class="pointer-events-none absolute top-[100vh] bottom-0 w-12 ltr:right-0 rtl:left-0"><a href=#the-top class="pointer-events-auto sticky top-[calc(100vh-5.5rem)] flex h-12 w-12 items-center justify-center rounded-full bg-neutral/50 text-xl text-neutral-700 backdrop-blur hover:text-primary-600 dark:bg-neutral-800/50 dark:text-neutral dark:hover:text-primary-400" aria-label="Scroll to top" title="Scroll to top">&uarr;</a></div></main><footer class="py-10 print:hidden"><div class="flex items-center 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="ltr:mr-14 rtl:ml-14 cursor-pointer text-sm text-neutral-700 hover:text-primary-600 dark:text-neutral dark:hover:text-primary-400"><button id=appearance-switcher type=button><div class="flex items-center justify-center w-12 h-12 dark:hidden" title="Switch to dark appearance"><span class="relative inline-block align-text-bottom icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentcolor" d="M32 256C32 132.2 132.3 32 255.8 32c11.36.0 29.7 1.668 40.9 3.746 9.616 1.777 11.75 14.63 3.279 19.44C245 86.5 211.2 144.6 211.2 207.8c0 109.7 99.71 193 208.3 172.3 9.561-1.805 16.28 9.324 10.11 16.95C387.9 448.6 324.8 480 255.8 480 132.1 480 32 379.6 32 256z"/></svg></span></div><div class="items-center justify-center hidden w-12 h-12 dark:flex" title="Switch to light appearance"><span class="relative inline-block align-text-bottom icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentcolor" d="M256 159.1c-53.02.0-95.1 42.98-95.1 95.1s41.2 96.9 95.1 96.9 95.1-42.98 95.1-95.1S309 159.1 256 159.1zM509.3 347l-63.2-91.9 63.15-91.01c6.332-9.125 1.104-21.74-9.826-23.72l-109-19.7-19.7-109c-1.975-10.93-14.59-16.16-23.72-9.824L256 65.89 164.1 2.736c-9.125-6.332-21.74-1.107-23.72 9.824L121.6 121.6 12.56 141.3C1.633 143.2-3.596 155.9 2.736 164.1L65.89 256 2.74 347.01c-6.332 9.125-1.105 21.74 9.824 23.72l109 19.7 19.7 109c1.975 10.93 14.59 16.16 23.72 9.824L256 446.1l91.01 63.15c9.127 6.334 21.75 1.107 23.72-9.822l19.7-109 109-19.7C510.4 368.8 515.6 356.1 509.3 347zM256 383.1c-70.69.0-127.1-57.31-127.1-127.1.0-70.69 57.31-127.1 127.1-127.1S383.1 186.2 383.1 256c0 70.7-56.4 127.1-127.1 127.1z"/></svg></span></div></button></div></div></footer><div id=search-wrapper class="invisible fixed inset-0 z-50 flex h-screen w-screen cursor-default flex-col bg-neutral-500/50 p-4 backdrop-blur-sm dark:bg-neutral-900/50 sm:p-6 md:p-[10vh] lg:p-[12vh]" 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 top-20 border-neutral-200 bg-neutral dark:border-neutral-700 dark:bg-neutral-800"><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-2 focus:outline-transparent" placeholder=Search tabindex=0></form><button id=close-search-button class="flex items-center justify-center w-8 h-8 text-neutral-700 hover:text-primary-600 dark:text-neutral dark:hover:text-primary-400" title="Close (Esc)">
<span class="inline dark:hidden"><span class="relative inline-block align-text-bottom icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentcolor" d="M32 256C32 132.2 132.3 32 255.8 32c11.36.0 29.7 1.668 40.9 3.746 9.616 1.777 11.75 14.63 3.279 19.44C245 86.5 211.2 144.6 211.2 207.8c0 109.7 99.71 193 208.3 172.3 9.561-1.805 16.28 9.324 10.11 16.95C387.9 448.6 324.8 480 255.8 480 132.1 480 32 379.6 32 256z"/></svg></span></span><span class="hidden dark:inline"><span class="relative inline-block align-text-bottom icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentcolor" d="M256 159.1c-53.02.0-95.1 42.98-95.1 95.1s41.2 96.9 95.1 96.9 95.1-42.98 95.1-95.1S309 159.1 256 159.1zM509.3 347l-63.2-91.9 63.15-91.01c6.332-9.125 1.104-21.74-9.826-23.72l-109-19.7-19.7-109c-1.975-10.93-14.59-16.16-23.72-9.824L256 65.89 164.1 2.736c-9.125-6.332-21.74-1.107-23.72 9.824L121.6 121.6 12.56 141.3C1.633 143.2-3.596 155.9 2.736 164.1L65.89 256 2.74 347.01c-6.332 9.125-1.105 21.74 9.824 23.72l109 19.7 19.7 109c1.975 10.93 14.59 16.16 23.72 9.824L256 446.1l91.01 63.15c9.127 6.334 21.75 1.107 23.72-9.822l19.7-109 109-19.7C510.4 368.8 515.6 356.1 509.3 347zM256 383.1c-70.69.0-127.1-57.31-127.1-127.1.0-70.69 57.31-127.1 127.1-127.1S383.1 186.2 383.1 256c0 70.7-56.4 127.1-127.1 127.1z"/></svg></span></span></button></div></div></footer><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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentcolor" d="M310.6 361.4c12.5 12.5 12.5 32.75.0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3 54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75.0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75.0-45.25s32.75-12.5 45.25.0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25.0s12.5 32.75.0 45.25l-105.4 105.4L310.6 361.4z"/></svg></span></button></header><section class="flex-auto px-2 overflow-auto"><ul id=search-results></ul></section></div></div></div></body></html> <span class="relative inline-block align-text-bottom icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentcolor" d="M310.6 361.4c12.5 12.5 12.5 32.75.0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3 54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75.0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75.0-45.25s32.75-12.5 45.25.0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25.0s12.5 32.75.0 45.25l-105.4 105.4L310.6 361.4z"/></svg></span></button></header><section class="flex-auto px-2 overflow-auto"><ul id=search-results></ul></section></div></div></div></body></html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 146 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 315 KiB

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

Binary file not shown.

After

Width:  |  Height:  |  Size: 253 KiB

File diff suppressed because one or more lines are too long

Binary file not shown.

After

Width:  |  Height:  |  Size: 145 KiB

File diff suppressed because one or more lines are too long

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><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 6 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> <?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 6 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>External Article - Why I switched to Fathom Analytics</title><link/><pubDate>Thu, 24 Jan 2019 00:00:00 +0000</pubDate><guid/><description>The &lt;code>externalUrl&lt;/code> front matter parameter can link to any URL. This article looks just like any other, but will link to a post that is outside the Hugo project.</description></item></channel></rss>

File diff suppressed because one or more lines are too long

Binary file not shown.

After

Width:  |  Height:  |  Size: 438 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 433 KiB

View File

@ -1,8 +1,8 @@
<!doctype html><html lang=en-au dir=ltr class=scroll-smooth data-default-appearance=light 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>Mathematical notation &#183; Congo</title><meta name=title content="Mathematical notation &#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/mathematical-notation/><link type=text/css rel=stylesheet href=/congo/css/main.bundle.min.3552466d62941f854cc764b706ab5b2e3616325dd23313577f99ff83f095a09e436d4734656eb0ab9f588d93c251fdf636660a728c2f6ccb49697325daac8a6c.css integrity="sha512-NVJGbWKUH4VMx2S3BqtbLjYWMl3SMxNXf5n/g/CVoJ5DbUc0ZW6wq59YjZPCUf32NmYKcowvbMtJaXMl2qyKbA=="><script type=text/javascript src=/congo/js/appearance.min.badab316c9287a5a42a843e4eb45da65bb3d194a5a0f5fa4a3e516160e67df0b8c65f4f19a8e146436e29d583699e6cb41d6bbe99e05e1dbaa877763bad9f8e2.js integrity="sha512-utqzFskoelpCqEPk60XaZbs9GUpaD1+ko+UWFg5n3wuMZfTxmo4UZDbinVg2mebLQda76Z4F4duqh3djutn44g=="></script> <!doctype html><html lang=en-au dir=ltr class=scroll-smooth data-default-appearance=light 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>Mathematical notation &#183; Congo</title><meta name=title content="Mathematical notation &#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/mathematical-notation/><link type=text/css rel=stylesheet href=/congo/css/main.bundle.min.2aa0f8f5cb9b8644385c0ca742c7054ae86d1edd18dce3b0de51c3d5ae4eff5d93f5224afa4205b8c02f10866a39de3ad83e2d4827e696ecd3aa2707382d4cf3.css integrity="sha512-KqD49cubhkQ4XAynQscFSuhtHt0Y3OOw3lHD1a5O/12T9SJK+kIFuMAvEIZqOd462D4tSCfmluzTqicHOC1M8w=="><script type=text/javascript src=/congo/js/appearance.min.badab316c9287a5a42a843e4eb45da65bb3d194a5a0f5fa4a3e516160e67df0b8c65f4f19a8e146436e29d583699e6cb41d6bbe99e05e1dbaa877763bad9f8e2.js integrity="sha512-utqzFskoelpCqEPk60XaZbs9GUpaD1+ko+UWFg5n3wuMZfTxmo4UZDbinVg2mebLQda76Z4F4duqh3djutn44g=="></script>
<script defer type=text/javascript id=script-bundle src=/congo/js/main.bundle.min.b607eb5ea0f48ef635db6a1c024a35eeff4529157e49461941aac333a158a1f71cae4e530d45ac010598695f823dbe38a63142757e37c2d7b74a309d7296f681.js integrity="sha512-tgfrXqD0jvY122ocAko17v9FKRV+SUYZQarDM6FYofccrk5TDUWsAQWYaV+CPb44pjFCdX43wte3SjCdcpb2gQ==" data-copy=Copy data-copied=Copied></script> <script defer type=text/javascript id=script-bundle src=/congo/js/main.bundle.min.6d78c827ca7bcbf72056dbf698bf9aeb759a08966686187deb23f5949f73eca5f39b461284900cdfc08e2976d99eb80a8663648de778ba2a83e633ae16dbfc25.js integrity="sha512-bXjIJ8p7y/cgVtv2mL+a63WaCJZmhhh96yP1lJ9z7KXzm0YShJAM38COKXbZnrgKhmNkjed4uiqD5jOuFtv8JQ==" 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="Mathematical notation"><meta property="og:description" content="A brief sample of mathematical notation in Congo."><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="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":"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":"145"}]</script><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><link type=text/css rel=stylesheet href=/congo/lib/katex/katex.min.61fc68ef35c6690632cd6371cfcaf8b3c6b135f1b88d2ddd8a9b3ca761c0ff03569ae6a96a49108a48befd7037a373a5fa2f16234ddc4495430d412512d103ea.css integrity="sha512-Yfxo7zXGaQYyzWNxz8r4s8axNfG4jS3dips8p2HA/wNWmuapakkQiki+/XA3o3Ol+i8WI03cRJVDDUElEtED6g=="><script defer src=/congo/lib/katex/katex.min.33bfe3919a0a1259f58da698daba022bd26de2dfa3fe2aeed1edaf2270e454ee4b634101b779baead8d34f95c5b061f62c91be55144bdae7884775347ebb3f19.js integrity="sha512-M7/jkZoKEln1jaaY2roCK9Jt4t+j/iru0e2vInDkVO5LY0EBt3m66tjTT5XFsGH2LJG+VRRL2ueIR3U0frs/GQ=="></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="Mathematical notation"><meta property="og:description" content="A brief sample of mathematical notation in Congo."><meta property="og:type" content="article"><meta property="og:url" content="https://jpanther.github.io/congo/samples/mathematical-notation/"><meta property="og:image" content="https://jpanther.github.io/congo/samples/mathematical-notation/feature-artturi-jalli-gYrYa37fAKI-unsplash.jpg"><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="og:site_name" content="Congo"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://jpanther.github.io/congo/samples/mathematical-notation/feature-artturi-jalli-gYrYa37fAKI-unsplash.jpg"><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":"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":"145"}]</script><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><link type=text/css rel=stylesheet href=/congo/lib/katex/katex.min.e95315732ed740dc9aae156e88be74173a600852acc9377a60ef7769a404c844fe04d696be3d0880a47ce817faf80996733c407129cbf891a3a3e892b603b581.css integrity="sha512-6VMVcy7XQNyarhVuiL50FzpgCFKsyTd6YO93aaQEyET+BNaWvj0IgKR86Bf6+AmWczxAcSnL+JGjo+iStgO1gQ=="><script defer src=/congo/lib/katex/katex.min.6fd20a8f82c236bb423c185c79172860e1d65bf4b6abd7e997b880265cb1629ca4463d5228cec513df84d0d12727c83c9e2e3b2c1af61ae5fdab383fc5ebb0cd.js integrity="sha512-b9IKj4LCNrtCPBhceRcoYOHWW/S2q9fpl7iAJlyxYpykRj1SKM7FE9+E0NEnJ8g8ni47LBr2GuX9qzg/xeuwzQ=="></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"><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="py-6 font-semibold sm:py-10 text-neutral-900 dark:text-neutral print:hidden"><nav class="flex justify-between"><div><a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" rel=me href=/congo/>Congo</a></div><ul class="flex flex-col list-none ltr:text-right rtl:text-left sm:flex-row"><li class="mb-1 sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"><a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" href=/congo/docs/ title=Documentation>Docs</a></li><li class="mb-1 sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"><a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" href=/congo/samples/ title="Content Samples">Samples</a></li><li class="mb-1 sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"><a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" href=/congo/users/ title=Users>Users</a></li><li class="mb-1 sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"><a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" href=https://github.com/jpanther/congo title>GitHub</a></li><li class="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 (/)"> <script defer src=/congo/lib/katex/auto-render.min.8968ae052e67b7aafad1f0b3dba35dd19a9ed276e4d594c841b9772afee462c5fec8a314147ce3687dbe02733abe9d97b3e80d99a0405562634a6b8fc3be847e.js integrity="sha512-iWiuBS5nt6r60fCz26Nd0Zqe0nbk1ZTIQbl3Kv7kYsX+yKMUFHzjaH2+AnM6vp2Xs+gNmaBAVWJjSmuPw76Efg==" onload=renderMathInElement(document.body)></script></head><body class="flex flex-col h-screen px-6 m-auto text-lg leading-7 max-w-7xl bg-neutral text-neutral-900 dark:bg-neutral-800 dark:text-neutral sm:px-14 md:px-24 lg:px-32"><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 focus:translate-y-0 dark:bg-neutral-600" href=#main-content><span class="font-bold text-primary-600 ltr:pr-2 rtl:pl-2 dark:text-primary-400">&darr;</span>Skip to main content</a></div><header class="py-6 font-semibold text-neutral-900 dark:text-neutral print:hidden sm:py-10"><nav class="flex items-start justify-between sm:items-center"><div class="flex flex-row items-center"><a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" rel=me href=/congo/>Congo</a></div><ul class="flex list-none flex-col ltr:text-right rtl:text-left sm:flex-row"><li class="mb-1 sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"><a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" href=/congo/docs/ title=Documentation>Docs</a></li><li class="mb-1 sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"><a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" href=/congo/samples/ title="Content Samples">Samples</a></li><li class="mb-1 sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"><a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" href=/congo/users/ title=Users>Users</a></li><li class="mb-1 sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"><a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" href=https://github.com/jpanther/congo title>GitHub</a></li><li class="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><div class="relative flex flex-col grow"><main id=main-content class=grow><article><header class=max-w-prose><ol class="text-sm text-neutral-500 dark:text-neutral-400 print:hidden"><li class="inline hidden"><a class="hover:underline 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 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 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">Mathematical notation</h1><div class="mt-8 mb-12 text-base text-neutral-500 dark:text-neutral-400 print:hidden"><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></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 print:hidden"><details open class="mt-0 overflow-hidden rounded-lg rtl:pr-5 ltr:pl-5 ltr:-ml-5 rtl:-mr-5"><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 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=line><span class=cl><span class=c>% KaTeX inline notation <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><div class="relative flex flex-col grow"><main id=main-content class=grow><article><header class=max-w-prose><ol class="text-sm text-neutral-500 dark:text-neutral-400 print:hidden"><li class="inline hidden"><a class="hover:underline 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 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 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">Mathematical notation</h1><div class="mt-8 mb-12 text-base text-neutral-500 dark:text-neutral-400 print:hidden"><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><img class="mb-6 -mt-4 rounded-md" srcset="/congo/samples/mathematical-notation/feature-artturi-jalli-gYrYa37fAKI-unsplash_hu427341567a8a18cd97a56508f23b37d5_443636_330x0_resize_q75_box.jpg 330w,/congo/samples/mathematical-notation/feature-artturi-jalli-gYrYa37fAKI-unsplash_hu427341567a8a18cd97a56508f23b37d5_443636_660x0_resize_q75_box.jpg 660w,/congo/samples/mathematical-notation/feature-artturi-jalli-gYrYa37fAKI-unsplash_hu427341567a8a18cd97a56508f23b37d5_443636_1024x0_resize_q75_box.jpg 1024w,/congo/samples/mathematical-notation/feature-artturi-jalli-gYrYa37fAKI-unsplash_hu427341567a8a18cd97a56508f23b37d5_443636_1320x0_resize_q75_box.jpg 2x" src=/congo/samples/mathematical-notation/feature-artturi-jalli-gYrYa37fAKI-unsplash_hu427341567a8a18cd97a56508f23b37d5_443636_660x0_resize_q75_box.jpg></header><section class="flex flex-col max-w-full mt-0 prose dark:prose-invert lg:flex-row"><div class="order-first px-0 lg:order-last lg:max-w-xs ltr:lg:pl-8 rtl:lg:pr-8"><div class="toc ltr:pl-5 rtl:pr-5 print:hidden lg:sticky lg:top-10"><details open class="mt-0 overflow-hidden rounded-lg ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5"><summary class="block py-1 text-lg font-semibold cursor-pointer bg-neutral-100 text-neutral-800 ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5 dark:bg-neutral-700 dark:text-neutral-100 lg:hidden">Table of Contents</summary><div class="py-2 border-dotted border-neutral-300 ltr:-ml-5 ltr:border-l ltr:pl-5 rtl:-mr-5 rtl:border-r rtl:pr-5 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 grow"><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 target=_blank>supported TeX functions</a> for the available syntax.</p><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=line><span class=cl><span class=c>% KaTeX inline notation
</span></span></span><span class=line><span class=cl><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>) </span></span></span><span class=line><span class=cl><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>)
</span></span></code></pre></div><p>Inline notation: \(\varphi = \dfrac{1+\sqrt5}{2}= 1.6180339887…\)</p><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=line><span class=cl><span class=c>% KaTeX block notation </span></span></code></pre></div><p>Inline notation: \(\varphi = \dfrac{1+\sqrt5}{2}= 1.6180339887…\)</p><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=line><span class=cl><span class=c>% KaTeX block notation
</span></span></span><span class=line><span class=cl><span class=c></span><span class=sb>$$</span><span class=nb> </span></span></span><span class=line><span class=cl><span class=c></span><span class=sb>$$</span><span class=nb>
@ -10,13 +10,12 @@
</span></span></span><span class=line><span class=cl><span class=nb></span><span class=s>$$</span> </span></span></span><span class=line><span class=cl><span class=nb></span><span class=s>$$</span>
</span></span></code></pre></div><p>$$ </span></span></code></pre></div><p>$$
\varphi = 1+\frac{1} {1+\frac{1} {1+\frac{1} {1+\cdots} } } \varphi = 1+\frac{1} {1+\frac{1} {1+\frac{1} {1+\cdots} } }
$$</p></div></section><footer class="pt-8 max-w-prose print:hidden"><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=Congo 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 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 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 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 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><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/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> $$</p></div></section><footer class="pt-8 max-w-prose print:hidden"><div class=flex><img class="!mt-0 !mb-0 h-24 w-24 rounded-full ltr:mr-4 rtl:ml-4" width=96 height=96 alt=Congo src=/congo/img/author_hu052d24d60828c1cca42a6aefe45b8b44_54195_192x192_fill_q75_box_smart1.jpg><div class=place-self-center><div class="text-[0.6rem] uppercase leading-3 text-neutral-500 dark:text-neutral-400">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 transition-transform hover:scale-125 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 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 transition-transform hover:scale-125 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 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 transition-transform hover:scale-125 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 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 transition-transform hover:scale-125 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 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><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="group flex" href=/congo/samples/charts/><span class="mr-2 text-neutral-700 transition-transform group-hover:-translate-x-[2px] group-hover:text-primary-600 ltr:inline rtl:hidden dark:text-neutral 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="ml-2 text-neutral-700 transition-transform group-hover:translate-x-[2px] group-hover:text-primary-600 ltr:hidden rtl:inline dark:text-neutral 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">Charts</span> <span class="flex flex-col"><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-06 00:00:00 +0000 UTC">6 March 2019</time></span></span></a></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></a></span>
<span><a class="flex text-right group" href=/congo/samples/placeholder-text/><span class="flex flex-col"><span class="mt-[0.1rem] leading-6 group-hover:underline group-hover:decoration-primary-500">Placeholder Text</span> <span><a class="group flex text-right" href=/congo/samples/placeholder-text/><span class="flex flex-col"><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-09 00:00:00 +0000 UTC">9 March 2019</time></span></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></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="ml-2 text-neutral-700 transition-transform group-hover:translate-x-[2px] group-hover:text-primary-600 ltr:inline rtl:hidden dark:text-neutral 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 print:hidden"><div class="flex items-center 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="mr-2 text-neutral-700 transition-transform group-hover:-translate-x-[2px] group-hover:text-primary-600 ltr:hidden rtl:inline dark:text-neutral dark:group-hover:text-primary-400">&larr;</span></a></span></div></div></footer></article></main><footer class="py-10 print:hidden"><div class="flex items-center 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="ltr:mr-14 rtl:ml-14 cursor-pointer text-sm text-neutral-700 hover:text-primary-600 dark:text-neutral dark:hover:text-primary-400"><button id=appearance-switcher type=button><div class="flex items-center justify-center w-12 h-12 dark:hidden" title="Switch to dark appearance"><span class="relative inline-block align-text-bottom icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentcolor" d="M32 256C32 132.2 132.3 32 255.8 32c11.36.0 29.7 1.668 40.9 3.746 9.616 1.777 11.75 14.63 3.279 19.44C245 86.5 211.2 144.6 211.2 207.8c0 109.7 99.71 193 208.3 172.3 9.561-1.805 16.28 9.324 10.11 16.95C387.9 448.6 324.8 480 255.8 480 132.1 480 32 379.6 32 256z"/></svg></span></div><div class="items-center justify-center hidden w-12 h-12 dark:flex" title="Switch to light appearance"><span class="relative inline-block align-text-bottom icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentcolor" d="M256 159.1c-53.02.0-95.1 42.98-95.1 95.1s41.2 96.9 95.1 96.9 95.1-42.98 95.1-95.1S309 159.1 256 159.1zM509.3 347l-63.2-91.9 63.15-91.01c6.332-9.125 1.104-21.74-9.826-23.72l-109-19.7-19.7-109c-1.975-10.93-14.59-16.16-23.72-9.824L256 65.89 164.1 2.736c-9.125-6.332-21.74-1.107-23.72 9.824L121.6 121.6 12.56 141.3C1.633 143.2-3.596 155.9 2.736 164.1L65.89 256 2.74 347.01c-6.332 9.125-1.105 21.74 9.824 23.72l109 19.7 19.7 109c1.975 10.93 14.59 16.16 23.72 9.824L256 446.1l91.01 63.15c9.127 6.334 21.75 1.107 23.72-9.822l19.7-109 109-19.7C510.4 368.8 515.6 356.1 509.3 347zM256 383.1c-70.69.0-127.1-57.31-127.1-127.1.0-70.69 57.31-127.1 127.1-127.1S383.1 186.2 383.1 256c0 70.7-56.4 127.1-127.1 127.1z"/></svg></span></div></button></div></div></footer><div id=search-wrapper class="invisible fixed inset-0 z-50 flex h-screen w-screen cursor-default flex-col bg-neutral-500/50 p-4 backdrop-blur-sm dark:bg-neutral-900/50 sm:p-6 md:p-[10vh] lg:p-[12vh]" 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 top-20 border-neutral-200 bg-neutral dark:border-neutral-700 dark:bg-neutral-800"><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-2 focus:outline-transparent" placeholder=Search tabindex=0></form><button id=close-search-button class="flex items-center justify-center w-8 h-8 text-neutral-700 hover:text-primary-600 dark:text-neutral dark:hover:text-primary-400" title="Close (Esc)">
<span class="inline dark:hidden"><span class="relative inline-block align-text-bottom icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentcolor" d="M32 256C32 132.2 132.3 32 255.8 32c11.36.0 29.7 1.668 40.9 3.746 9.616 1.777 11.75 14.63 3.279 19.44C245 86.5 211.2 144.6 211.2 207.8c0 109.7 99.71 193 208.3 172.3 9.561-1.805 16.28 9.324 10.11 16.95C387.9 448.6 324.8 480 255.8 480 132.1 480 32 379.6 32 256z"/></svg></span></span><span class="hidden dark:inline"><span class="relative inline-block align-text-bottom icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentcolor" d="M256 159.1c-53.02.0-95.1 42.98-95.1 95.1s41.2 96.9 95.1 96.9 95.1-42.98 95.1-95.1S309 159.1 256 159.1zM509.3 347l-63.2-91.9 63.15-91.01c6.332-9.125 1.104-21.74-9.826-23.72l-109-19.7-19.7-109c-1.975-10.93-14.59-16.16-23.72-9.824L256 65.89 164.1 2.736c-9.125-6.332-21.74-1.107-23.72 9.824L121.6 121.6 12.56 141.3C1.633 143.2-3.596 155.9 2.736 164.1L65.89 256 2.74 347.01c-6.332 9.125-1.105 21.74 9.824 23.72l109 19.7 19.7 109c1.975 10.93 14.59 16.16 23.72 9.824L256 446.1l91.01 63.15c9.127 6.334 21.75 1.107 23.72-9.822l19.7-109 109-19.7C510.4 368.8 515.6 356.1 509.3 347zM256 383.1c-70.69.0-127.1-57.31-127.1-127.1.0-70.69 57.31-127.1 127.1-127.1S383.1 186.2 383.1 256c0 70.7-56.4 127.1-127.1 127.1z"/></svg></span></span></button></div></div></footer><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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentcolor" d="M310.6 361.4c12.5 12.5 12.5 32.75.0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3 54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75.0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75.0-45.25s32.75-12.5 45.25.0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25.0s12.5 32.75.0 45.25l-105.4 105.4L310.6 361.4z"/></svg></span></button></header><section class="flex-auto px-2 overflow-auto"><ul id=search-results></ul></section></div></div></div></body></html> <span class="relative inline-block align-text-bottom icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentcolor" d="M310.6 361.4c12.5 12.5 12.5 32.75.0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3 54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75.0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75.0-45.25s32.75-12.5 45.25.0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25.0s12.5 32.75.0 45.25l-105.4 105.4L310.6 361.4z"/></svg></span></button></header><section class="flex-auto px-2 overflow-auto"><ul id=search-results></ul></section></div></div></div></body></html>

File diff suppressed because one or more lines are too long

Binary file not shown.

After

Width:  |  Height:  |  Size: 148 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 128 KiB

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

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