2022-09-11 16:04:33 -05:00
<!DOCTYPE html>
< html
lang="en"
dir="ltr"
class="scroll-smooth"
2022-09-11 16:29:52 -05:00
data-default-appearance="dark"
data-auto-appearance="false"
2022-09-11 16:04:33 -05:00
>< head >
< meta charset = "utf-8" / >
< meta http-equiv = "content-language" content = "en" / >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" / >
< meta http-equiv = "X-UA-Compatible" content = "ie=edge" / >
< title > Content Samples · Blowfish< / title >
< meta name = "title" content = "Content Samples · Blowfish" / >
< meta name = "description" content = "Product | Nuno Coração" / >
< link rel = "canonical" href = "https://nunocoracao.github.io/blowfish/samples/" / >
< link rel = "alternate" type = "application/rss+xml" href = "/blowfish/samples/index.xml" title = "Blowfish" / >
< link
type="text/css"
rel="stylesheet"
href="/blowfish/css/main.bundle.min.3f7a3d89b943c3dacb033ff4448c83a5b58692eb75f99e903ee759443c690298da06dc2cc7adc967ae51bb50103acfa1b65f99a428ef2ff09176f2519b277273.css"
integrity="sha512-P3o9iblDw9rLAz/0RIyDpbWGkut1+ Z6QPudZRDxpApjaBtwsx63JZ65Ru1AQOs+ htl+ ZpCjvL/CRdvJRmydycw=="
/>
< script type = "text/javascript" src = "/blowfish/js/main.min.cf83e1357eefb8bdf1542850d66d8007d620e4050b5715dc83f4a921d36ce9ce47d0d13c5d85f2b0ff8318d2877eec2f63b931bd47417a81a538327af927da3e.js" integrity = "sha512-z4PhNX7vuL3xVChQ1m2AB9Yg5AULVxXcg/SpIdNs6c5H0NE8XYXysP+DGNKHfuwvY7kxvUdBeoGlODJ6+SfaPg==" > < / script >
< script type = "text/javascript" src = "/blowfish/js/appearance.min.4a00b8b8a9118d31826a03a2a9cca83390fcd3eddd9e03868fffcf4dc1e2dc15649e9266091f1225a24e1bcf6558ff4807f77663bcfaaa8f3050d73c1bd5bf0b.js" integrity = "sha512-SgC4uKkRjTGCagOiqcyoM5D80+3dngOGj//PTcHi3BVknpJmCR8SJaJOG89lWP9IB/d2Y7z6qo8wUNc8G9W/Cw==" > < / script >
2022-09-11 16:29:52 -05:00
< script defer type = "text/javascript" id = "script-bundle" src = "/blowfish/js/main.bundle.min.9ae0a991bb442898e9bc60cf318b4de3ff878325ff3821625a5564b32b2f66aec0e7f7d0e00ca3ac7df59d9f01c18c88b6bdd213184f86ac9ce06d7bdffbadf8.js" integrity = "sha512-muCpkbtEKJjpvGDPMYtN4/+HgyX/OCFiWlVksysvZq7A5/fQ4AyjrH31nZ8BwYyItr3SExhPhqyc4G173/ut+A==" data-copy = "Copy" data-copied = "Copied" > < / script >
2022-09-11 16:04:33 -05:00
< script src = "/js/zoom.min.js" > < / script >
< link rel = "apple-touch-icon" sizes = "180x180" href = "/blowfish/apple-touch-icon.png" / >
< link rel = "icon" type = "image/png" sizes = "32x32" href = "/blowfish/favicon-32x32.png" / >
< link rel = "icon" type = "image/png" sizes = "16x16" href = "/blowfish/favicon-16x16.png" / >
< link rel = "manifest" href = "/blowfish/site.webmanifest" / >
< meta property = "og:title" content = "Content Samples" / >
< meta property = "og:description" content = "See what's possible with Congo." / >
< meta property = "og:type" content = "website" / >
< meta property = "og:url" content = "https://nunocoracao.github.io/blowfish/samples/" / > < meta property = "og:site_name" content = "Blowfish" / >
< meta name = "twitter:card" content = "summary" / >
< meta name = "twitter:title" content = "Content Samples" / >
< meta name = "twitter:description" content = "See what's possible with Congo." / >
< meta name = "author" content = "Blowfish" / >
< script async src = "https://www.googletagmanager.com/gtag/js?id=G-XXXXXX" > < / script >
< script >
var doNotTrack = false;
if (!doNotTrack) {
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-XXXXXX', { 'anonymize_ip': false });
}
< / script >
< link rel = "stylesheet" href = "https://rsms.me/inter/inter.css" >
< / 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"
>↓ < /span
>Skip to main content< /a
>
< / div >
< div style = "padding-left:0;padding-right:0"
class="flex items-center justify-between px-4 py-6 sm:px-6 md:justify-start space-x-3">
< div >
< a href = "/blowfish/" class = "flex" >
< span class = "sr-only" > Blowfish< / span >
< img src = "/blowfish/img/blowfish_logo_transparent.png" width = "1000" height = "1000"
class="max-h-[5rem] max-w-[5rem] object-scale-down object-left nozoom" alt="Blowfish" />
< / a >
< / div >
< div class = "flex flex-1 items-center justify-between" >
< nav class = "flex space-x-3" >
< a href = "/" class = "text-base font-medium text-gray-500 hover:text-gray-900" > Blowfish< / a >
< / nav >
< div class = "hidden md:flex items-center space-x-5 md:ml-12" >
2022-09-11 16:29:52 -05:00
< a href = "https://github.com/nunocoracao/blowfish" class = "text-base font-medium text-gray-500 hover:text-gray-900" title = "" > GitHub< / a >
2022-09-11 16:04:33 -05:00
< span > < / span >
< / div >
< div class = "flex md:hidden items-center space-x-5 md:ml-12" >
< span > < / span >
< / div >
< / div >
< div class = "-my-2 -mr-2 md:hidden" >
< label id = "menu-button" for = "menu-controller" class = "block" >
< input type = "checkbox" id = "menu-controller" class = "hidden" / >
< div class = "cursor-pointer hover:text-primary-600 dark:hover:text-primary-400" >
< 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 = "M0 96C0 78.33 14.33 64 32 64H416C433.7 64 448 78.33 448 96C448 113.7 433.7 128 416 128H32C14.33 128 0 113.7 0 96zM0 256C0 238.3 14.33 224 32 224H416C433.7 224 448 238.3 448 256C448 273.7 433.7 288 416 288H32C14.33 288 0 273.7 0 256zM416 448H32C14.33 448 0 433.7 0 416C0 398.3 14.33 384 32 384H416C433.7 384 448 398.3 448 416C448 433.7 433.7 448 416 448z" / > < / svg >
< / span >
< / div >
< div id = "menu-wrapper" style = "padding-top:25px;"
class="fixed inset-0 z-30 invisible w-screen h-screen m-auto overflow-auto transition-opacity opacity-0 cursor-default bg-neutral-100/50 backdrop-blur-sm dark:bg-neutral-900/50">
< ul
class="flex movedown flex-col w-full px-6 py-6 mx-auto overflow-visible list-none ltr:text-right rtl:text-left max-w-7xl sm:px-14 md:px-24 lg:px-32 sm:py-10 sm:pt-10">
< li class = "mb-1" >
< span class = "cursor-pointer hover:text-primary-600 dark:hover:text-primary-400" >
< 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.3L54.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 >
< / span >
< / li >
< li class = "mb-1" >
< a class = "decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2"
2022-09-11 16:29:52 -05:00
href="https://github.com/nunocoracao/blowfish" title="">GitHub< / a >
2022-09-11 16:04:33 -05:00
< / li >
< / ul >
< / div >
< / label >
< / div >
< / div >
< div id = "mobile-menu"
class="fixed inset-0 z-30 invisible w-screen h-screen m-auto overflow-auto transition-opacity opacity-0 cursor-default bg-neutral-100/50 backdrop-blur-sm dark:bg-neutral-900/50">
< ul
class="flex movedown flex-col w-full px-6 py-6 mx-auto overflow-visible list-none ltr:text-right rtl:text-left max-w-7xl sm:px-14 md:px-24 lg:px-32 sm:py-10 sm:pt-10">
< li class = "mb-1" >
< span class = "cursor-pointer hover:text-primary-600 dark:hover:text-primary-400" >
< 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.3L54.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 >
< / span >
< / li >
< li class = "mb-1" >
< a class = "decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2"
2022-09-11 16:29:52 -05:00
href="https://github.com/nunocoracao/blowfish" title="">GitHub< / a >
2022-09-11 16:04:33 -05:00
< / li >
< / ul >
< / div >
< div class = "relative flex flex-col grow" >
< main id = "main-content" class = "grow" >
< header >
< h1 class = "mt-0 text-4xl font-extrabold text-neutral-900 dark:text-neutral" > Content Samples< / h1 >
< / header >
< section
class="mt-0 prose flex max-w-full flex-col dark:prose-invert lg:flex-row"
>
< div class = "min-w-0 min-h-0 max-w-prose" >
< div class = "lead !mb-9 text-xl" >
Congo brings your content to life. 😍
< / div >
< p > This section contains some demo pages that show how Congo renders different types of content. You can also see an example < a href = "https://nunocoracao.github.io/blowfish/tags/" > taxonomy listing< / a > page.< / p >
< p > < em > < strong > Sidenote:< / strong > This page is just a standard Congo article listing and Hugo has been configured to generate a < code > samples< / code > content type and display article summaries.< / em > < / p >
< hr >
< / div >
< / section >
< section class = "space-y-10" >
< h2 class = "mt-12 text-2xl font-bold text-neutral-700 first:mt-8 dark:text-neutral-300" >
2020
< / h2 >
< hr class = "border-dotted w-36 border-neutral-400" / >
< a class = "sm:flex mb-10 article" href = "/blowfish/samples/icons/" >
< div class = "mb-[5rem] md:mb-0" >
< h3 class = "flex items-center text-xl font-semibold" >
< p class = "text-neutral-800 decoration-primary-500 hover:underline hover:underline-offset-2 dark:text-neutral"
href="/blowfish/samples/icons/">Icons< / p >
< / h3 >
< div class = "text-sm text-neutral-500 dark:text-neutral-400" >
< div class = "flex flex-row flex-wrap items-center" >
< time datetime = "2020-08-14 00:00:00 +0000 UTC" > 14 August 2020< / time > < span class = "px-2 text-primary-500" > · < / span > < time datetime = "2022-03-09 00:00:00 +0000 UTC" > Updated: 9 March 2022< / time > < span class = "px-2 text-primary-500" > · < / span > < span > 140 words< / span > < span class = "px-2 text-primary-500" > · < / span > < span title = "Reading time" > 1 min< / span >
< / div >
< / div >
< div class = "py-1 prose dark:prose-invert" >
Congo has built-in support for a number of FontAwesome 6 icons. These can be included in your website through either the icon partial or icon shortcode.
Additionally, custom icons are also fully supported.
< / div >
< / div >
< / a >
< h2 class = "mt-12 text-2xl font-bold text-neutral-700 first:mt-8 dark:text-neutral-300" >
2019
< / h2 >
< hr class = "border-dotted w-36 border-neutral-400" / >
< a class = "sm:flex mb-10 article" href = "/blowfish/samples/markdown/" >
< div class = "mb-[5rem] md:mb-0" >
< h3 class = "flex items-center text-xl font-semibold" >
< p class = "text-neutral-800 decoration-primary-500 hover:underline hover:underline-offset-2 dark:text-neutral"
href="/blowfish/samples/markdown/">Markdown< / p >
< / h3 >
< div class = "text-sm text-neutral-500 dark:text-neutral-400" >
< div class = "flex flex-row flex-wrap items-center" >
< time datetime = "2019-03-11 00:00:00 +0000 UTC" > 11 March 2019< / time > < span class = "px-2 text-primary-500" > · < / span > < span > 472 words< / span > < span class = "px-2 text-primary-500" > · < / span > < span title = "Reading time" > 3 mins< / span >
< / div >
< / div >
< div class = "py-1 prose dark:prose-invert" >
< p > This article offers a sample of basic Markdown formatting that can be used in Congo, also it shows how some basic HTML elements are decorated.< / p >
< / div >
< / div >
< / a >
< a class = "sm:flex mb-10 article" href = "/blowfish/samples/rich-content/" >
< div class = "mb-[5rem] md:mb-0" >
< h3 class = "flex items-center text-xl font-semibold" >
< p class = "text-neutral-800 decoration-primary-500 hover:underline hover:underline-offset-2 dark:text-neutral"
href="/blowfish/samples/rich-content/">Rich Content< / p >
< / h3 >
< div class = "text-sm text-neutral-500 dark:text-neutral-400" >
< div class = "flex flex-row flex-wrap items-center" >
< time datetime = "2019-03-10 00:00:00 +0000 UTC" > 10 March 2019< / time > < span class = "px-2 text-primary-500" > · < / span > < span > 145 words< / span > < span class = "px-2 text-primary-500" > · < / span > < span title = "Reading time" > 1 min< / span >
< / div >
< / div >
< div class = "py-1 prose dark:prose-invert" >
This is an < em > example< / em > of a < strong > rich< / strong > content summary.
< / div >
< / div >
< / a >
< a class = "sm:flex mb-10 article" href = "/blowfish/samples/mathematical-notation/" >
< div class = "mb-[5rem] md:mb-0" >
< h3 class = "flex items-center text-xl font-semibold" >
< p class = "text-neutral-800 decoration-primary-500 hover:underline hover:underline-offset-2 dark:text-neutral"
href="/blowfish/samples/mathematical-notation/">Mathematical notation< / p >
< / h3 >
< div class = "text-sm text-neutral-500 dark:text-neutral-400" >
< div class = "flex flex-row flex-wrap items-center" >
< time datetime = "2019-03-08 00:00:00 +0000 UTC" > 8 March 2019< / time > < span class = "px-2 text-primary-500" > · < / span > < span > 145 words< / span > < span class = "px-2 text-primary-500" > · < / span > < span title = "Reading time" > 1 min< / span >
< / div >
< / div >
< div class = "py-1 prose dark:prose-invert" >
< p > KaTeX can be used to render mathematical notation within articles.< / p >
< / div >
< / div >
< / a >
< a class = "sm:flex mb-10 article" href = "/blowfish/samples/diagrams-flowcharts/" >
< div class = "mb-[5rem] md:mb-0" >
< h3 class = "flex items-center text-xl font-semibold" >
< p class = "text-neutral-800 decoration-primary-500 hover:underline hover:underline-offset-2 dark:text-neutral"
href="/blowfish/samples/diagrams-flowcharts/">Diagrams and Flowcharts< / p >
< / h3 >
< div class = "text-sm text-neutral-500 dark:text-neutral-400" >
< div class = "flex flex-row flex-wrap items-center" >
< time datetime = "2019-03-06 00:00:00 +0000 UTC" > 6 March 2019< / time > < span class = "px-2 text-primary-500" > · < / span > < span > 250 words< / span > < span class = "px-2 text-primary-500" > · < / span > < span title = "Reading time" > 2 mins< / span >
< / div >
< / div >
< div class = "py-1 prose dark:prose-invert" >
It’ s easy to add diagrams and flowcharts to articles using Mermaid.
< / div >
< / div >
< / a >
< a class = "sm:flex mb-10 article" href = "/blowfish/samples/charts/" >
< div class = "mb-[5rem] md:mb-0" >
< h3 class = "flex items-center text-xl font-semibold" >
< p class = "text-neutral-800 decoration-primary-500 hover:underline hover:underline-offset-2 dark:text-neutral"
href="/blowfish/samples/charts/">Charts< / p >
< / h3 >
< div class = "text-sm text-neutral-500 dark:text-neutral-400" >
< div class = "flex flex-row flex-wrap items-center" >
< time datetime = "2019-03-06 00:00:00 +0000 UTC" > 6 March 2019< / time > < span class = "px-2 text-primary-500" > · < / span > < span > 81 words< / span > < span class = "px-2 text-primary-500" > · < / span > < span title = "Reading time" > 1 min< / span >
< / div >
< / div >
< div class = "py-1 prose dark:prose-invert" >
Congo includes Chart.js for powerful charts and data visualisations.
< / div >
< / div >
< / a >
< a class = "sm:flex mb-10 article" href = "/blowfish/samples/emoji/" >
< div class = "mb-[5rem] md:mb-0" >
< h3 class = "flex items-center text-xl font-semibold" >
< p class = "text-neutral-800 decoration-primary-500 hover:underline hover:underline-offset-2 dark:text-neutral"
href="/blowfish/samples/emoji/">Emoji 🪂< / p >
< / h3 >
< div class = "text-sm text-neutral-500 dark:text-neutral-400" >
< div class = "flex flex-row flex-wrap items-center" >
< time datetime = "2019-03-05 00:00:00 +0000 UTC" > 5 March 2019< / time > < span class = "px-2 text-primary-500" > · < / span > < span > 97 words< / span > < span class = "px-2 text-primary-500" > · < / span > < span title = "Reading time" > 1 min< / span >
< / div >
< / div >
< div class = "py-1 prose dark:prose-invert" >
📖🏞️🧗🏽🐉🧙🏽♂️🧚🏽👸
< / div >
< / div >
< / a >
< a class = "sm:flex mb-10 article" href = "https://jamespanther.com/writings/i-switched-from-google-analytics-to-fathom-analytics/" target = "_blank" rel = "external" >
< div class = "mb-[5rem] md:mb-0" >
< h3 class = "flex items-center text-xl font-semibold" >
< div >
< div
class="text-neutral-800 decoration-primary-500 hover:underline hover:underline-offset-2 dark:text-neutral">
An External Article
< span class = "text-xs align-top cursor-default text-neutral-400 dark:text-neutral-500" >
< span class = "rtl:hidden" > ↗ < / span >
< span class = "ltr:hidden" > ↖ < / span >
< / span >
< / div >
< / div >
< / h3 >
< div class = "text-sm text-neutral-500 dark:text-neutral-400" >
< div class = "flex flex-row flex-wrap items-center" >
< time datetime = "2019-01-24 00:00:00 +0000 UTC" > 24 January 2019< / time > < span class = "px-2 text-primary-500" > · < / span > < span > 40 words< / span >
< / div >
< / div >
< div class = "py-1 prose dark:prose-invert" >
The < code > externalUrl< / code > front matter parameter can link to any URL.
< / div >
< / div >
< / a >
< / section >
< / main > < footer class = "py-10 print:hidden" >
< nav class = "pb-4 text-base font-medium text-neutral-500 dark:text-neutral-400" >
< ul class = "flex flex-col list-none sm:flex-row" >
< li
class="mb-1 ltr:text-right rtl:text-left sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"
>
< a
class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2"
href="/blowfish/tags/"
title="Tags"
>Tags< /a
>
< / li >
< li
class="mb-1 ltr:text-right rtl:text-left sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"
>
< a
class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2"
href="/blowfish/categories/"
title="Categories"
>Categories< /a
>
< / li >
< / ul >
< / nav >
< div class = "flex items-center justify-between" >
< p class = "text-sm text-neutral-500 dark:text-neutral-400" >
©
2022
Blowfish
< / 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://github.com/nunocoracao/blowfish" target = "_blank" rel = "noopener noreferrer" > Blowfish< / a >
< / p >
< / div >
< script >
mediumZoom(document.querySelectorAll("img:not(.nozoom)"), {
margin: 24,
background: 'rgba(0,0,0,0.5)',
scrollOffset: 0,
})
< / script >
< / footer >
< / div >
< / body >
< / html >
