mirror of
https://github.com/nunocoracao/blowfish.git
synced 2026-01-30 16:31:52 +01:00
updated first version of docs
This commit is contained in:
Nuno Coração
791
exampleSite/docs/samples/charts/index.html
Normal file
791
exampleSite/docs/samples/charts/index.html
Normal file
@@ -0,0 +1,791 @@
|
||||
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html
|
||||
lang="en"
|
||||
dir="ltr"
|
||||
class="scroll-smooth"
|
||||
data-default-appearance="dark"
|
||||
data-auto-appearance="false"
|
||||
><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>Charts · Blowfish</title>
|
||||
<meta name="title" content="Charts · Blowfish" />
|
||||
|
||||
<meta name="description" content="Product | Nuno Coração" />
|
||||
|
||||
|
||||
|
||||
<link rel="canonical" href="https://nunocoracao.github.io/blowfish/samples/charts/" />
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<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>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<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>
|
||||
|
||||
<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="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://nunocoracao.github.io/blowfish/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="Blowfish" />
|
||||
|
||||
|
||||
<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",
|
||||
"url" : "https:\/\/nunocoracao.github.io\/blowfish\/samples\/charts\/",
|
||||
"author" : {
|
||||
"@type": "Person",
|
||||
"name": "Blowfish"
|
||||
},
|
||||
"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="Blowfish" />
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<script defer type="text/javascript" src="/blowfish/js/chart.bundle.7bb7442fd631bca73babc31b569fe1d964f0e9d02a52e7ca4f8d2b425f7aa4977bc8b0fde1bf5afecc963031e5c78e6caa3a4520ea9f4aa467d99065a5d60af0.js" integrity="sha512-e7dEL9YxvKc7q8MbVp/h2WTw6dAqUufKT40rQl96pJd7yLD94b9a/syWMDHlx45sqjpFIOqfSqRn2ZBlpdYK8A=="></script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<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">
|
||||
|
||||
|
||||
|
||||
<a href="https://github.com/nunocoracao/blowfish" class="text-base font-medium text-gray-500 hover:text-gray-900" title="">GitHub</a>
|
||||
|
||||
|
||||
|
||||
<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"
|
||||
href="https://github.com/nunocoracao/blowfish" title="">GitHub</a>
|
||||
</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"
|
||||
href="https://github.com/nunocoracao/blowfish" title="">GitHub</a>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<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="/blowfish/"
|
||||
>Blowfish</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="/blowfish/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="/blowfish/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">·</span><span>81 words</span><span class="px-2 text-primary-500">·</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">
|
||||
<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://nunocoracao.github.io/blowfish/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>
|
||||
<!-- prettier-ignore-start -->
|
||||
<div class="chart">
|
||||
|
||||
<canvas id="274938561"></canvas>
|
||||
<script type="text/javascript">
|
||||
window.addEventListener("DOMContentLoaded", (event) => {
|
||||
const ctx = document.getElementById("274938561");
|
||||
const chart = new Chart(ctx, {
|
||||
|
||||
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>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
<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>
|
||||
<!-- prettier-ignore-start -->
|
||||
<div class="chart">
|
||||
|
||||
<canvas id="582963417"></canvas>
|
||||
<script type="text/javascript">
|
||||
window.addEventListener("DOMContentLoaded", (event) => {
|
||||
const ctx = document.getElementById("582963417");
|
||||
const chart = new Chart(ctx, {
|
||||
|
||||
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: 0.2
|
||||
}]
|
||||
}
|
||||
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
<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>
|
||||
<!-- prettier-ignore-start -->
|
||||
<div class="chart">
|
||||
|
||||
<canvas id="462718935"></canvas>
|
||||
<script type="text/javascript">
|
||||
window.addEventListener("DOMContentLoaded", (event) => {
|
||||
const ctx = document.getElementById("462718935");
|
||||
const chart = new Chart(ctx, {
|
||||
|
||||
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>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
</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="Blowfish"
|
||||
src="/blowfish/img/blowfish_logo_hu184ea2fa12490a2458ca388a16ab730e_227816_192x192_fill_box_smart1_3.png"
|
||||
/>
|
||||
|
||||
|
||||
<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">
|
||||
Blowfish
|
||||
</div>
|
||||
|
||||
|
||||
<div class="text-2xl sm:text-lg">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="flex flex-row flex-wrap justify-center pt-4 text-xl">
|
||||
|
||||
|
||||
<a
|
||||
class="m-1 inline-block min-w-[2.4rem] rounded bg-neutral-300 p-1 text-center text-neutral-700 hover:bg-primary-500 hover:text-neutral dark:bg-neutral-700 dark:text-neutral-300 dark:hover:bg-primary-400 dark:hover:text-neutral-800"
|
||||
href="https://www.linkedin.com/shareArticle?mini=true&url=https://nunocoracao.github.io/blowfish/samples/charts/&title=Charts"
|
||||
title="Share on LinkedIn"
|
||||
aria-label="Share on LinkedIn"
|
||||
>
|
||||
|
||||
<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="m-1 inline-block min-w-[2.4rem] rounded bg-neutral-300 p-1 text-center text-neutral-700 hover:bg-primary-500 hover:text-neutral dark:bg-neutral-700 dark:text-neutral-300 dark:hover:bg-primary-400 dark:hover:text-neutral-800"
|
||||
href="https://twitter.com/intent/tweet/?url=https://nunocoracao.github.io/blowfish/samples/charts/&text=Charts"
|
||||
title="Tweet on Twitter"
|
||||
aria-label="Tweet on Twitter"
|
||||
>
|
||||
|
||||
<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="m-1 inline-block min-w-[2.4rem] rounded bg-neutral-300 p-1 text-center text-neutral-700 hover:bg-primary-500 hover:text-neutral dark:bg-neutral-700 dark:text-neutral-300 dark:hover:bg-primary-400 dark:hover:text-neutral-800"
|
||||
href="https://pinterest.com/pin/create/bookmarklet/?url=https://nunocoracao.github.io/blowfish/samples/charts/&description=Charts"
|
||||
title="Pin on Pinterest"
|
||||
aria-label="Pin on Pinterest"
|
||||
>
|
||||
|
||||
<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="M496 256c0 137-111 248-248 248-25.6 0-50.2-3.9-73.4-11.1 10.1-16.5 25.2-43.5 30.8-65 3-11.6 15.4-59 15.4-59 8.1 15.4 31.7 28.5 56.8 28.5 74.8 0 128.7-68.8 128.7-154.3 0-81.9-66.9-143.2-152.9-143.2-107 0-163.9 71.8-163.9 150.1 0 36.4 19.4 81.7 50.3 96.1 4.7 2.2 7.2 1.2 8.3-3.3.8-3.4 5-20.3 6.9-28.1.6-2.5.3-4.7-1.7-7.1-10.1-12.5-18.3-35.3-18.3-56.6 0-54.7 41.4-107.6 112-107.6 60.9 0 103.6 41.5 103.6 100.9 0 67.1-33.9 113.6-78 113.6-24.3 0-42.6-20.1-36.7-44.8 7-29.5 20.5-61.3 20.5-82.6 0-19-10.2-34.9-31.4-34.9-24.9 0-44.9 25.7-44.9 60.2 0 22 7.4 36.8 7.4 36.8s-24.5 103.8-29 123.2c-5 21.4-3 51.6-.9 71.2C65.4 450.9 0 361.1 0 256 0 119 111 8 248 8s248 111 248 248z"/></svg>
|
||||
|
||||
</span>
|
||||
|
||||
</a
|
||||
>
|
||||
|
||||
|
||||
|
||||
<a
|
||||
class="m-1 inline-block min-w-[2.4rem] rounded bg-neutral-300 p-1 text-center text-neutral-700 hover:bg-primary-500 hover:text-neutral dark:bg-neutral-700 dark:text-neutral-300 dark:hover:bg-primary-400 dark:hover:text-neutral-800"
|
||||
href="https://reddit.com/submit/?url=https://nunocoracao.github.io/blowfish/samples/charts/&resubmit=true&title=Charts"
|
||||
title="Submit to Reddit"
|
||||
aria-label="Submit to Reddit"
|
||||
>
|
||||
|
||||
<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="M201.5 305.5c-13.8 0-24.9-11.1-24.9-24.6 0-13.8 11.1-24.9 24.9-24.9 13.6 0 24.6 11.1 24.6 24.9 0 13.6-11.1 24.6-24.6 24.6zM504 256c0 137-111 248-248 248S8 393 8 256 119 8 256 8s248 111 248 248zm-132.3-41.2c-9.4 0-17.7 3.9-23.8 10-22.4-15.5-52.6-25.5-86.1-26.6l17.4-78.3 55.4 12.5c0 13.6 11.1 24.6 24.6 24.6 13.8 0 24.9-11.3 24.9-24.9s-11.1-24.9-24.9-24.9c-9.7 0-18 5.8-22.1 13.8l-61.2-13.6c-3-.8-6.1 1.4-6.9 4.4l-19.1 86.4c-33.2 1.4-63.1 11.3-85.5 26.8-6.1-6.4-14.7-10.2-24.1-10.2-34.9 0-46.3 46.9-14.4 62.8-1.1 5-1.7 10.2-1.7 15.5 0 52.6 59.2 95.2 132 95.2 73.1 0 132.3-42.6 132.3-95.2 0-5.3-.6-10.8-1.9-15.8 31.3-16 19.8-62.5-14.9-62.5zM302.8 331c-18.2 18.2-76.1 17.9-93.6 0-2.2-2.2-6.1-2.2-8.3 0-2.5 2.5-2.5 6.4 0 8.6 22.8 22.8 87.3 22.8 110.2 0 2.5-2.2 2.5-6.1 0-8.6-2.2-2.2-6.1-2.2-8.3 0zm7.7-75c-13.6 0-24.6 11.1-24.6 24.9 0 13.6 11.1 24.6 24.6 24.6 13.8 0 24.9-11.1 24.9-24.6 0-13.8-11-24.9-24.9-24.9z"/></svg>
|
||||
|
||||
</span>
|
||||
|
||||
</a
|
||||
>
|
||||
|
||||
|
||||
|
||||
<a
|
||||
class="m-1 inline-block min-w-[2.4rem] rounded bg-neutral-300 p-1 text-center text-neutral-700 hover:bg-primary-500 hover:text-neutral dark:bg-neutral-700 dark:text-neutral-300 dark:hover:bg-primary-400 dark:hover:text-neutral-800"
|
||||
href="https://www.facebook.com/sharer/sharer.php?u=https://nunocoracao.github.io/blowfish/samples/charts/&quote=Charts"
|
||||
title="Share on Facebook"
|
||||
aria-label="Share on Facebook"
|
||||
>
|
||||
|
||||
<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="m-1 inline-block min-w-[2.4rem] rounded bg-neutral-300 p-1 text-center text-neutral-700 hover:bg-primary-500 hover:text-neutral dark:bg-neutral-700 dark:text-neutral-300 dark:hover:bg-primary-400 dark:hover:text-neutral-800"
|
||||
href="mailto:?body=https://nunocoracao.github.io/blowfish/samples/charts/&subject=Charts"
|
||||
title="Send via email"
|
||||
aria-label="Send via email"
|
||||
>
|
||||
|
||||
<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="M207.8 20.73c-93.45 18.32-168.7 93.66-187 187.1c-27.64 140.9 68.65 266.2 199.1 285.1c19.01 2.888 36.17-12.26 36.17-31.49l.0001-.6631c0-15.74-11.44-28.88-26.84-31.24c-84.35-12.98-149.2-86.13-149.2-174.2c0-102.9 88.61-185.5 193.4-175.4c91.54 8.869 158.6 91.25 158.6 183.2l0 16.16c0 22.09-17.94 40.05-40 40.05s-40.01-17.96-40.01-40.05v-120.1c0-8.847-7.161-16.02-16.01-16.02l-31.98 .0036c-7.299 0-13.2 4.992-15.12 11.68c-24.85-12.15-54.24-16.38-86.06-5.106c-38.75 13.73-68.12 48.91-73.72 89.64c-9.483 69.01 43.81 128 110.9 128c26.44 0 50.43-9.544 69.59-24.88c24 31.3 65.23 48.69 109.4 37.49C465.2 369.3 496 324.1 495.1 277.2V256.3C495.1 107.1 361.2-9.332 207.8 20.73zM239.1 304.3c-26.47 0-48-21.56-48-48.05s21.53-48.05 48-48.05s48 21.56 48 48.05S266.5 304.3 239.1 304.3z"/></svg>
|
||||
|
||||
</span>
|
||||
|
||||
</a
|
||||
>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<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="/blowfish/samples/diagrams-flowcharts/">
|
||||
<span
|
||||
class="mr-3 text-neutral-700 group-hover:text-primary-600 ltr:inline rtl:hidden dark:text-neutral dark:group-hover:text-primary-400"
|
||||
>←</span
|
||||
>
|
||||
<span
|
||||
class="ml-3 text-neutral-700 group-hover:text-primary-600 ltr:hidden rtl:inline dark:text-neutral dark:group-hover:text-primary-400"
|
||||
>→</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>
|
||||
|
||||
<a class="flex text-right group" href="/blowfish/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="ml-3 text-neutral-700 group-hover:text-primary-600 ltr:inline rtl:hidden dark:text-neutral dark:group-hover:text-primary-400"
|
||||
>→</span
|
||||
>
|
||||
<span
|
||||
class="mr-3 text-neutral-700 group-hover:text-primary-600 ltr:hidden rtl:inline dark:text-neutral dark:group-hover:text-primary-400"
|
||||
>←</span
|
||||
>
|
||||
</a>
|
||||
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</footer>
|
||||
</article>
|
||||
|
||||
|
||||
</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>
|
||||
786
exampleSite/docs/samples/diagrams-flowcharts/index.html
Normal file
786
exampleSite/docs/samples/diagrams-flowcharts/index.html
Normal file
@@ -0,0 +1,786 @@
|
||||
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html
|
||||
lang="en"
|
||||
dir="ltr"
|
||||
class="scroll-smooth"
|
||||
data-default-appearance="dark"
|
||||
data-auto-appearance="false"
|
||||
><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>Diagrams and Flowcharts · Blowfish</title>
|
||||
<meta name="title" content="Diagrams and Flowcharts · Blowfish" />
|
||||
|
||||
<meta name="description" content="Product | Nuno Coração" />
|
||||
|
||||
|
||||
|
||||
<link rel="canonical" href="https://nunocoracao.github.io/blowfish/samples/diagrams-flowcharts/" />
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<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>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<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>
|
||||
|
||||
<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="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://nunocoracao.github.io/blowfish/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="Blowfish" />
|
||||
|
||||
|
||||
<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",
|
||||
"url" : "https:\/\/nunocoracao.github.io\/blowfish\/samples\/diagrams-flowcharts\/",
|
||||
"author" : {
|
||||
"@type": "Person",
|
||||
"name": "Blowfish"
|
||||
},
|
||||
"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="Blowfish" />
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<script defer type="text/javascript" src="/blowfish/js/mermaid.bundle.d1265b849a7fcc2e023d62bad638f6fcdd855a9ea92abffa0fa0b0716d4511c64e137cea0580ce8d058e7f016d3bba6aeeda12f8df33f800f3884ab1c7763920.js" integrity="sha512-0SZbhJp/zC4CPWK61jj2/N2FWp6pKr/6D6CwcW1FEcZOE3zqBYDOjQWOfwFtO7pq7toS+N8z+ADziEqxx3Y5IA=="></script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<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">
|
||||
|
||||
|
||||
|
||||
<a href="https://github.com/nunocoracao/blowfish" class="text-base font-medium text-gray-500 hover:text-gray-900" title="">GitHub</a>
|
||||
|
||||
|
||||
|
||||
<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"
|
||||
href="https://github.com/nunocoracao/blowfish" title="">GitHub</a>
|
||||
</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"
|
||||
href="https://github.com/nunocoracao/blowfish" title="">GitHub</a>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<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="/blowfish/"
|
||||
>Blowfish</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="/blowfish/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="/blowfish/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">·</span><span>250 words</span><span class="px-2 text-primary-500">·</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">
|
||||
<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://nunocoracao.github.io/blowfish/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
|
||||
A[Christmas] -->|Get money| B(Go shopping)
|
||||
B --> C{Let me think}
|
||||
B --> G[/Another/]
|
||||
C ==>|One| D[Laptop]
|
||||
C -->|Two| E[iPhone]
|
||||
C -->|Three| F[Car]
|
||||
subgraph Section
|
||||
C
|
||||
D
|
||||
E
|
||||
F
|
||||
G
|
||||
end
|
||||
|
||||
</div>
|
||||
|
||||
<h2 id="sequence-diagram" class="relative group">Sequence diagram <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#sequence-diagram" aria-label="Anchor">#</a></span></h2>
|
||||
<div class="mermaid" align="center">
|
||||
|
||||
sequenceDiagram
|
||||
autonumber
|
||||
par Action 1
|
||||
Alice->>John: Hello John, how are you?
|
||||
and Action 2
|
||||
Alice->>Bob: Hello Bob, how are you?
|
||||
end
|
||||
Alice->>+John: Hello John, how are you?
|
||||
Alice->>+John: John, can you hear me?
|
||||
John-->>-Alice: Hi Alice, I can hear you!
|
||||
Note right of John: John is perceptive
|
||||
John-->>-Alice: I feel great!
|
||||
loop Every minute
|
||||
John-->Alice: Great!
|
||||
end
|
||||
|
||||
</div>
|
||||
|
||||
<h2 id="class-diagram" class="relative group">Class diagram <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#class-diagram" aria-label="Anchor">#</a></span></h2>
|
||||
<div class="mermaid" align="center">
|
||||
|
||||
classDiagram
|
||||
Animal "1" <|-- Duck
|
||||
Animal <|-- Fish
|
||||
Animal <--o Zebra
|
||||
Animal : +int age
|
||||
Animal : +String gender
|
||||
Animal: +isMammal()
|
||||
Animal: +mate()
|
||||
class Duck{
|
||||
+String beakColor
|
||||
+swim()
|
||||
+quack()
|
||||
}
|
||||
class Fish{
|
||||
-int sizeInFeet
|
||||
-canEat()
|
||||
}
|
||||
class Zebra{
|
||||
+bool is_wild
|
||||
+run()
|
||||
}
|
||||
|
||||
</div>
|
||||
|
||||
<h2 id="entity-relationship-diagram" class="relative group">Entity relationship diagram <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#entity-relationship-diagram" aria-label="Anchor">#</a></span></h2>
|
||||
<div class="mermaid" align="center">
|
||||
|
||||
erDiagram
|
||||
CUSTOMER }|..|{ DELIVERY-ADDRESS : has
|
||||
CUSTOMER ||--o{ ORDER : places
|
||||
CUSTOMER ||--o{ INVOICE : "liable for"
|
||||
DELIVERY-ADDRESS ||--o{ ORDER : receives
|
||||
INVOICE ||--|{ ORDER : covers
|
||||
ORDER ||--|{ ORDER-ITEM : includes
|
||||
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="!mt-0 !mb-0 h-24 w-24 rounded-full ltr:mr-4 rtl:ml-4"
|
||||
width="96"
|
||||
height="96"
|
||||
alt="Blowfish"
|
||||
src="/blowfish/img/blowfish_logo_hu184ea2fa12490a2458ca388a16ab730e_227816_192x192_fill_box_smart1_3.png"
|
||||
/>
|
||||
|
||||
|
||||
<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">
|
||||
Blowfish
|
||||
</div>
|
||||
|
||||
|
||||
<div class="text-2xl sm:text-lg">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="flex flex-row flex-wrap justify-center pt-4 text-xl">
|
||||
|
||||
|
||||
<a
|
||||
class="m-1 inline-block min-w-[2.4rem] rounded bg-neutral-300 p-1 text-center text-neutral-700 hover:bg-primary-500 hover:text-neutral dark:bg-neutral-700 dark:text-neutral-300 dark:hover:bg-primary-400 dark:hover:text-neutral-800"
|
||||
href="https://www.linkedin.com/shareArticle?mini=true&url=https://nunocoracao.github.io/blowfish/samples/diagrams-flowcharts/&title=Diagrams%20and%20Flowcharts"
|
||||
title="Share on LinkedIn"
|
||||
aria-label="Share on LinkedIn"
|
||||
>
|
||||
|
||||
<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="m-1 inline-block min-w-[2.4rem] rounded bg-neutral-300 p-1 text-center text-neutral-700 hover:bg-primary-500 hover:text-neutral dark:bg-neutral-700 dark:text-neutral-300 dark:hover:bg-primary-400 dark:hover:text-neutral-800"
|
||||
href="https://twitter.com/intent/tweet/?url=https://nunocoracao.github.io/blowfish/samples/diagrams-flowcharts/&text=Diagrams%20and%20Flowcharts"
|
||||
title="Tweet on Twitter"
|
||||
aria-label="Tweet on Twitter"
|
||||
>
|
||||
|
||||
<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="m-1 inline-block min-w-[2.4rem] rounded bg-neutral-300 p-1 text-center text-neutral-700 hover:bg-primary-500 hover:text-neutral dark:bg-neutral-700 dark:text-neutral-300 dark:hover:bg-primary-400 dark:hover:text-neutral-800"
|
||||
href="https://pinterest.com/pin/create/bookmarklet/?url=https://nunocoracao.github.io/blowfish/samples/diagrams-flowcharts/&description=Diagrams%20and%20Flowcharts"
|
||||
title="Pin on Pinterest"
|
||||
aria-label="Pin on Pinterest"
|
||||
>
|
||||
|
||||
<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="M496 256c0 137-111 248-248 248-25.6 0-50.2-3.9-73.4-11.1 10.1-16.5 25.2-43.5 30.8-65 3-11.6 15.4-59 15.4-59 8.1 15.4 31.7 28.5 56.8 28.5 74.8 0 128.7-68.8 128.7-154.3 0-81.9-66.9-143.2-152.9-143.2-107 0-163.9 71.8-163.9 150.1 0 36.4 19.4 81.7 50.3 96.1 4.7 2.2 7.2 1.2 8.3-3.3.8-3.4 5-20.3 6.9-28.1.6-2.5.3-4.7-1.7-7.1-10.1-12.5-18.3-35.3-18.3-56.6 0-54.7 41.4-107.6 112-107.6 60.9 0 103.6 41.5 103.6 100.9 0 67.1-33.9 113.6-78 113.6-24.3 0-42.6-20.1-36.7-44.8 7-29.5 20.5-61.3 20.5-82.6 0-19-10.2-34.9-31.4-34.9-24.9 0-44.9 25.7-44.9 60.2 0 22 7.4 36.8 7.4 36.8s-24.5 103.8-29 123.2c-5 21.4-3 51.6-.9 71.2C65.4 450.9 0 361.1 0 256 0 119 111 8 248 8s248 111 248 248z"/></svg>
|
||||
|
||||
</span>
|
||||
|
||||
</a
|
||||
>
|
||||
|
||||
|
||||
|
||||
<a
|
||||
class="m-1 inline-block min-w-[2.4rem] rounded bg-neutral-300 p-1 text-center text-neutral-700 hover:bg-primary-500 hover:text-neutral dark:bg-neutral-700 dark:text-neutral-300 dark:hover:bg-primary-400 dark:hover:text-neutral-800"
|
||||
href="https://reddit.com/submit/?url=https://nunocoracao.github.io/blowfish/samples/diagrams-flowcharts/&resubmit=true&title=Diagrams%20and%20Flowcharts"
|
||||
title="Submit to Reddit"
|
||||
aria-label="Submit to Reddit"
|
||||
>
|
||||
|
||||
<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="M201.5 305.5c-13.8 0-24.9-11.1-24.9-24.6 0-13.8 11.1-24.9 24.9-24.9 13.6 0 24.6 11.1 24.6 24.9 0 13.6-11.1 24.6-24.6 24.6zM504 256c0 137-111 248-248 248S8 393 8 256 119 8 256 8s248 111 248 248zm-132.3-41.2c-9.4 0-17.7 3.9-23.8 10-22.4-15.5-52.6-25.5-86.1-26.6l17.4-78.3 55.4 12.5c0 13.6 11.1 24.6 24.6 24.6 13.8 0 24.9-11.3 24.9-24.9s-11.1-24.9-24.9-24.9c-9.7 0-18 5.8-22.1 13.8l-61.2-13.6c-3-.8-6.1 1.4-6.9 4.4l-19.1 86.4c-33.2 1.4-63.1 11.3-85.5 26.8-6.1-6.4-14.7-10.2-24.1-10.2-34.9 0-46.3 46.9-14.4 62.8-1.1 5-1.7 10.2-1.7 15.5 0 52.6 59.2 95.2 132 95.2 73.1 0 132.3-42.6 132.3-95.2 0-5.3-.6-10.8-1.9-15.8 31.3-16 19.8-62.5-14.9-62.5zM302.8 331c-18.2 18.2-76.1 17.9-93.6 0-2.2-2.2-6.1-2.2-8.3 0-2.5 2.5-2.5 6.4 0 8.6 22.8 22.8 87.3 22.8 110.2 0 2.5-2.2 2.5-6.1 0-8.6-2.2-2.2-6.1-2.2-8.3 0zm7.7-75c-13.6 0-24.6 11.1-24.6 24.9 0 13.6 11.1 24.6 24.6 24.6 13.8 0 24.9-11.1 24.9-24.6 0-13.8-11-24.9-24.9-24.9z"/></svg>
|
||||
|
||||
</span>
|
||||
|
||||
</a
|
||||
>
|
||||
|
||||
|
||||
|
||||
<a
|
||||
class="m-1 inline-block min-w-[2.4rem] rounded bg-neutral-300 p-1 text-center text-neutral-700 hover:bg-primary-500 hover:text-neutral dark:bg-neutral-700 dark:text-neutral-300 dark:hover:bg-primary-400 dark:hover:text-neutral-800"
|
||||
href="https://www.facebook.com/sharer/sharer.php?u=https://nunocoracao.github.io/blowfish/samples/diagrams-flowcharts/&quote=Diagrams%20and%20Flowcharts"
|
||||
title="Share on Facebook"
|
||||
aria-label="Share on Facebook"
|
||||
>
|
||||
|
||||
<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="m-1 inline-block min-w-[2.4rem] rounded bg-neutral-300 p-1 text-center text-neutral-700 hover:bg-primary-500 hover:text-neutral dark:bg-neutral-700 dark:text-neutral-300 dark:hover:bg-primary-400 dark:hover:text-neutral-800"
|
||||
href="mailto:?body=https://nunocoracao.github.io/blowfish/samples/diagrams-flowcharts/&subject=Diagrams%20and%20Flowcharts"
|
||||
title="Send via email"
|
||||
aria-label="Send via email"
|
||||
>
|
||||
|
||||
<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="M207.8 20.73c-93.45 18.32-168.7 93.66-187 187.1c-27.64 140.9 68.65 266.2 199.1 285.1c19.01 2.888 36.17-12.26 36.17-31.49l.0001-.6631c0-15.74-11.44-28.88-26.84-31.24c-84.35-12.98-149.2-86.13-149.2-174.2c0-102.9 88.61-185.5 193.4-175.4c91.54 8.869 158.6 91.25 158.6 183.2l0 16.16c0 22.09-17.94 40.05-40 40.05s-40.01-17.96-40.01-40.05v-120.1c0-8.847-7.161-16.02-16.01-16.02l-31.98 .0036c-7.299 0-13.2 4.992-15.12 11.68c-24.85-12.15-54.24-16.38-86.06-5.106c-38.75 13.73-68.12 48.91-73.72 89.64c-9.483 69.01 43.81 128 110.9 128c26.44 0 50.43-9.544 69.59-24.88c24 31.3 65.23 48.69 109.4 37.49C465.2 369.3 496 324.1 495.1 277.2V256.3C495.1 107.1 361.2-9.332 207.8 20.73zM239.1 304.3c-26.47 0-48-21.56-48-48.05s21.53-48.05 48-48.05s48 21.56 48 48.05S266.5 304.3 239.1 304.3z"/></svg>
|
||||
|
||||
</span>
|
||||
|
||||
</a
|
||||
>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<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="/blowfish/samples/emoji/">
|
||||
<span
|
||||
class="mr-3 text-neutral-700 group-hover:text-primary-600 ltr:inline rtl:hidden dark:text-neutral dark:group-hover:text-primary-400"
|
||||
>←</span
|
||||
>
|
||||
<span
|
||||
class="ml-3 text-neutral-700 group-hover:text-primary-600 ltr:hidden rtl:inline dark:text-neutral dark:group-hover:text-primary-400"
|
||||
>→</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>
|
||||
|
||||
<a class="flex text-right group" href="/blowfish/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="ml-3 text-neutral-700 group-hover:text-primary-600 ltr:inline rtl:hidden dark:text-neutral dark:group-hover:text-primary-400"
|
||||
>→</span
|
||||
>
|
||||
<span
|
||||
class="mr-3 text-neutral-700 group-hover:text-primary-600 ltr:hidden rtl:inline dark:text-neutral dark:group-hover:text-primary-400"
|
||||
>←</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"
|
||||
>
|
||||
↑
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</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>
|
||||
652
exampleSite/docs/samples/emoji/index.html
Normal file
652
exampleSite/docs/samples/emoji/index.html
Normal file
@@ -0,0 +1,652 @@
|
||||
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html
|
||||
lang="en"
|
||||
dir="ltr"
|
||||
class="scroll-smooth"
|
||||
data-default-appearance="dark"
|
||||
data-auto-appearance="false"
|
||||
><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>Emoji 🪂 · Blowfish</title>
|
||||
<meta name="title" content="Emoji 🪂 · Blowfish" />
|
||||
|
||||
<meta name="description" content="Product | Nuno Coração" />
|
||||
|
||||
|
||||
|
||||
<link rel="canonical" href="https://nunocoracao.github.io/blowfish/samples/emoji/" />
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<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>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<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>
|
||||
|
||||
<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="Emoji :parachute:" />
|
||||
<meta property="og:description" content="Guide to Emoji usage in Congo" />
|
||||
<meta property="og:type" content="article" />
|
||||
<meta property="og:url" content="https://nunocoracao.github.io/blowfish/samples/emoji/" /><meta property="article:section" content="samples" />
|
||||
<meta property="article:published_time" content="2019-03-05T00:00:00+00:00" />
|
||||
<meta property="article:modified_time" content="2019-03-05T00:00:00+00:00" /><meta property="og:site_name" content="Blowfish" />
|
||||
|
||||
|
||||
<meta name="twitter:card" content="summary"/>
|
||||
<meta name="twitter:title" content="Emoji :parachute:"/>
|
||||
<meta name="twitter:description" content="Guide to Emoji usage in Congo"/>
|
||||
|
||||
|
||||
<script type="application/ld+json">
|
||||
[{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "Article",
|
||||
"articleSection": "Content Samples",
|
||||
"name": "Emoji :parachute:",
|
||||
"headline": "Emoji :parachute:",
|
||||
"description": "Guide to Emoji usage in Congo",
|
||||
"abstract": "📖🏞️🧗🏽🐉🧙🏽♂️🧚🏽👸",
|
||||
"inLanguage": "en",
|
||||
"url" : "https:\/\/nunocoracao.github.io\/blowfish\/samples\/emoji\/",
|
||||
"author" : {
|
||||
"@type": "Person",
|
||||
"name": "Blowfish"
|
||||
},
|
||||
"copyrightYear": "2019",
|
||||
"dateCreated": "2019-03-05T00:00:00\u002b00:00",
|
||||
"datePublished": "2019-03-05T00:00:00\u002b00:00",
|
||||
|
||||
"dateModified": "2019-03-05T00:00:00\u002b00:00",
|
||||
|
||||
"keywords": ["emoji","sample"],
|
||||
|
||||
"mainEntityOfPage": "true",
|
||||
"wordCount": "97"
|
||||
}]
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<meta name="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">
|
||||
|
||||
|
||||
|
||||
<a href="https://github.com/nunocoracao/blowfish" class="text-base font-medium text-gray-500 hover:text-gray-900" title="">GitHub</a>
|
||||
|
||||
|
||||
|
||||
<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"
|
||||
href="https://github.com/nunocoracao/blowfish" title="">GitHub</a>
|
||||
</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"
|
||||
href="https://github.com/nunocoracao/blowfish" title="">GitHub</a>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<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="/blowfish/"
|
||||
>Blowfish</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="/blowfish/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="/blowfish/samples/emoji/"
|
||||
>Emoji :parachute:</a
|
||||
><span class="px-1 text-primary-500">/</span>
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
|
||||
|
||||
<h1 class="mt-0 text-4xl font-extrabold text-neutral-900 dark:text-neutral">
|
||||
Emoji 🪂
|
||||
</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-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>
|
||||
</header>
|
||||
<section class="flex flex-col max-w-full mt-0 prose dark:prose-invert lg:flex-row">
|
||||
|
||||
<div class="min-w-0 min-h-0 max-w-prose">
|
||||
<p>Emoji is supported throughout Congo by default. Emoji can be used in titles, menu items and article content.</p>
|
||||
<div class="flex px-4 py-3 rounded-md bg-primary-100 dark:bg-primary-900">
|
||||
<span class="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 417l-213.3-364c-16.33-28-57.54-28-73.98 0l-213.2 364C-10.59 444.9 9.849 480 42.74 480h426.6C502.1 480 522.6 445 506.3 417zM232 168c0-13.25 10.75-24 24-24S280 154.8 280 168v128c0 13.25-10.75 24-23.1 24S232 309.3 232 296V168zM256 416c-17.36 0-31.44-14.08-31.44-31.44c0-17.36 14.07-31.44 31.44-31.44s31.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>Note:</strong> The rendering of these glyphs depends on the browser and the platform. To style the emoji you can either use a third party emoji font or a font stack.</span>
|
||||
</div>
|
||||
|
||||
<p>Emoji replacements are automatic throughout Congo, so you can use shorthand codes in your content and front matter and they will be converted to their corresponding symbols at build time.</p>
|
||||
<p><strong>Example:</strong> <code>see_no_evil</code> 🙈, <code>hear_no_evil</code> 🙉, <code>speak_no_evil</code> 🙊.</p>
|
||||
<p>The <a href="http://www.emoji-cheat-sheet.com/">Emoji cheat sheet</a> is a useful reference for emoji shorthand codes.</p>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
<footer class="pt-8 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="Blowfish"
|
||||
src="/blowfish/img/blowfish_logo_hu184ea2fa12490a2458ca388a16ab730e_227816_192x192_fill_box_smart1_3.png"
|
||||
/>
|
||||
|
||||
|
||||
<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">
|
||||
Blowfish
|
||||
</div>
|
||||
|
||||
|
||||
<div class="text-2xl sm:text-lg">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="flex flex-row flex-wrap justify-center pt-4 text-xl">
|
||||
|
||||
|
||||
<a
|
||||
class="m-1 inline-block min-w-[2.4rem] rounded bg-neutral-300 p-1 text-center text-neutral-700 hover:bg-primary-500 hover:text-neutral dark:bg-neutral-700 dark:text-neutral-300 dark:hover:bg-primary-400 dark:hover:text-neutral-800"
|
||||
href="https://www.linkedin.com/shareArticle?mini=true&url=https://nunocoracao.github.io/blowfish/samples/emoji/&title=Emoji%20:parachute:"
|
||||
title="Share on LinkedIn"
|
||||
aria-label="Share on LinkedIn"
|
||||
>
|
||||
|
||||
<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="m-1 inline-block min-w-[2.4rem] rounded bg-neutral-300 p-1 text-center text-neutral-700 hover:bg-primary-500 hover:text-neutral dark:bg-neutral-700 dark:text-neutral-300 dark:hover:bg-primary-400 dark:hover:text-neutral-800"
|
||||
href="https://twitter.com/intent/tweet/?url=https://nunocoracao.github.io/blowfish/samples/emoji/&text=Emoji%20:parachute:"
|
||||
title="Tweet on Twitter"
|
||||
aria-label="Tweet on Twitter"
|
||||
>
|
||||
|
||||
<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="m-1 inline-block min-w-[2.4rem] rounded bg-neutral-300 p-1 text-center text-neutral-700 hover:bg-primary-500 hover:text-neutral dark:bg-neutral-700 dark:text-neutral-300 dark:hover:bg-primary-400 dark:hover:text-neutral-800"
|
||||
href="https://pinterest.com/pin/create/bookmarklet/?url=https://nunocoracao.github.io/blowfish/samples/emoji/&description=Emoji%20:parachute:"
|
||||
title="Pin on Pinterest"
|
||||
aria-label="Pin on Pinterest"
|
||||
>
|
||||
|
||||
<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="M496 256c0 137-111 248-248 248-25.6 0-50.2-3.9-73.4-11.1 10.1-16.5 25.2-43.5 30.8-65 3-11.6 15.4-59 15.4-59 8.1 15.4 31.7 28.5 56.8 28.5 74.8 0 128.7-68.8 128.7-154.3 0-81.9-66.9-143.2-152.9-143.2-107 0-163.9 71.8-163.9 150.1 0 36.4 19.4 81.7 50.3 96.1 4.7 2.2 7.2 1.2 8.3-3.3.8-3.4 5-20.3 6.9-28.1.6-2.5.3-4.7-1.7-7.1-10.1-12.5-18.3-35.3-18.3-56.6 0-54.7 41.4-107.6 112-107.6 60.9 0 103.6 41.5 103.6 100.9 0 67.1-33.9 113.6-78 113.6-24.3 0-42.6-20.1-36.7-44.8 7-29.5 20.5-61.3 20.5-82.6 0-19-10.2-34.9-31.4-34.9-24.9 0-44.9 25.7-44.9 60.2 0 22 7.4 36.8 7.4 36.8s-24.5 103.8-29 123.2c-5 21.4-3 51.6-.9 71.2C65.4 450.9 0 361.1 0 256 0 119 111 8 248 8s248 111 248 248z"/></svg>
|
||||
|
||||
</span>
|
||||
|
||||
</a
|
||||
>
|
||||
|
||||
|
||||
|
||||
<a
|
||||
class="m-1 inline-block min-w-[2.4rem] rounded bg-neutral-300 p-1 text-center text-neutral-700 hover:bg-primary-500 hover:text-neutral dark:bg-neutral-700 dark:text-neutral-300 dark:hover:bg-primary-400 dark:hover:text-neutral-800"
|
||||
href="https://reddit.com/submit/?url=https://nunocoracao.github.io/blowfish/samples/emoji/&resubmit=true&title=Emoji%20:parachute:"
|
||||
title="Submit to Reddit"
|
||||
aria-label="Submit to Reddit"
|
||||
>
|
||||
|
||||
<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="M201.5 305.5c-13.8 0-24.9-11.1-24.9-24.6 0-13.8 11.1-24.9 24.9-24.9 13.6 0 24.6 11.1 24.6 24.9 0 13.6-11.1 24.6-24.6 24.6zM504 256c0 137-111 248-248 248S8 393 8 256 119 8 256 8s248 111 248 248zm-132.3-41.2c-9.4 0-17.7 3.9-23.8 10-22.4-15.5-52.6-25.5-86.1-26.6l17.4-78.3 55.4 12.5c0 13.6 11.1 24.6 24.6 24.6 13.8 0 24.9-11.3 24.9-24.9s-11.1-24.9-24.9-24.9c-9.7 0-18 5.8-22.1 13.8l-61.2-13.6c-3-.8-6.1 1.4-6.9 4.4l-19.1 86.4c-33.2 1.4-63.1 11.3-85.5 26.8-6.1-6.4-14.7-10.2-24.1-10.2-34.9 0-46.3 46.9-14.4 62.8-1.1 5-1.7 10.2-1.7 15.5 0 52.6 59.2 95.2 132 95.2 73.1 0 132.3-42.6 132.3-95.2 0-5.3-.6-10.8-1.9-15.8 31.3-16 19.8-62.5-14.9-62.5zM302.8 331c-18.2 18.2-76.1 17.9-93.6 0-2.2-2.2-6.1-2.2-8.3 0-2.5 2.5-2.5 6.4 0 8.6 22.8 22.8 87.3 22.8 110.2 0 2.5-2.2 2.5-6.1 0-8.6-2.2-2.2-6.1-2.2-8.3 0zm7.7-75c-13.6 0-24.6 11.1-24.6 24.9 0 13.6 11.1 24.6 24.6 24.6 13.8 0 24.9-11.1 24.9-24.6 0-13.8-11-24.9-24.9-24.9z"/></svg>
|
||||
|
||||
</span>
|
||||
|
||||
</a
|
||||
>
|
||||
|
||||
|
||||
|
||||
<a
|
||||
class="m-1 inline-block min-w-[2.4rem] rounded bg-neutral-300 p-1 text-center text-neutral-700 hover:bg-primary-500 hover:text-neutral dark:bg-neutral-700 dark:text-neutral-300 dark:hover:bg-primary-400 dark:hover:text-neutral-800"
|
||||
href="https://www.facebook.com/sharer/sharer.php?u=https://nunocoracao.github.io/blowfish/samples/emoji/&quote=Emoji%20:parachute:"
|
||||
title="Share on Facebook"
|
||||
aria-label="Share on Facebook"
|
||||
>
|
||||
|
||||
<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="m-1 inline-block min-w-[2.4rem] rounded bg-neutral-300 p-1 text-center text-neutral-700 hover:bg-primary-500 hover:text-neutral dark:bg-neutral-700 dark:text-neutral-300 dark:hover:bg-primary-400 dark:hover:text-neutral-800"
|
||||
href="mailto:?body=https://nunocoracao.github.io/blowfish/samples/emoji/&subject=Emoji%20:parachute:"
|
||||
title="Send via email"
|
||||
aria-label="Send via email"
|
||||
>
|
||||
|
||||
<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="M207.8 20.73c-93.45 18.32-168.7 93.66-187 187.1c-27.64 140.9 68.65 266.2 199.1 285.1c19.01 2.888 36.17-12.26 36.17-31.49l.0001-.6631c0-15.74-11.44-28.88-26.84-31.24c-84.35-12.98-149.2-86.13-149.2-174.2c0-102.9 88.61-185.5 193.4-175.4c91.54 8.869 158.6 91.25 158.6 183.2l0 16.16c0 22.09-17.94 40.05-40 40.05s-40.01-17.96-40.01-40.05v-120.1c0-8.847-7.161-16.02-16.01-16.02l-31.98 .0036c-7.299 0-13.2 4.992-15.12 11.68c-24.85-12.15-54.24-16.38-86.06-5.106c-38.75 13.73-68.12 48.91-73.72 89.64c-9.483 69.01 43.81 128 110.9 128c26.44 0 50.43-9.544 69.59-24.88c24 31.3 65.23 48.69 109.4 37.49C465.2 369.3 496 324.1 495.1 277.2V256.3C495.1 107.1 361.2-9.332 207.8 20.73zM239.1 304.3c-26.47 0-48-21.56-48-48.05s21.53-48.05 48-48.05s48 21.56 48 48.05S266.5 304.3 239.1 304.3z"/></svg>
|
||||
|
||||
</span>
|
||||
|
||||
</a
|
||||
>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="pt-8">
|
||||
<hr class="border-dotted border-neutral-300 dark:border-neutral-600" />
|
||||
<div class="flex justify-between pt-3">
|
||||
<span>
|
||||
|
||||
</span>
|
||||
<span>
|
||||
|
||||
<a class="flex text-right group" href="/blowfish/samples/diagrams-flowcharts/">
|
||||
<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>
|
||||
<span
|
||||
class="ml-3 text-neutral-700 group-hover:text-primary-600 ltr:inline rtl:hidden dark:text-neutral dark:group-hover:text-primary-400"
|
||||
>→</span
|
||||
>
|
||||
<span
|
||||
class="mr-3 text-neutral-700 group-hover:text-primary-600 ltr:hidden rtl:inline dark:text-neutral dark:group-hover:text-primary-400"
|
||||
>←</span
|
||||
>
|
||||
</a>
|
||||
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</footer>
|
||||
</article>
|
||||
|
||||
|
||||
</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>
|
||||
597
exampleSite/docs/samples/external/index.html
vendored
Normal file
597
exampleSite/docs/samples/external/index.html
vendored
Normal file
@@ -0,0 +1,597 @@
|
||||
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html
|
||||
lang="en"
|
||||
dir="ltr"
|
||||
class="scroll-smooth"
|
||||
data-default-appearance="dark"
|
||||
data-auto-appearance="false"
|
||||
><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>An External Article · Blowfish</title>
|
||||
<meta name="title" content="An External Article · Blowfish" />
|
||||
|
||||
<meta name="description" content="Product | Nuno Coração" />
|
||||
|
||||
|
||||
|
||||
<link rel="canonical" href="https://nunocoracao.github.io/blowfish/samples/external/" />
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<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>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<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>
|
||||
|
||||
<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="An External Article" />
|
||||
<meta property="og:description" content="The externalUrl front matter parameter can link to any URL." />
|
||||
<meta property="og:type" content="article" />
|
||||
<meta property="og:url" content="https://nunocoracao.github.io/blowfish/samples/external/" /><meta property="article:section" content="samples" />
|
||||
<meta property="article:published_time" content="2019-01-24T00:00:00+00:00" />
|
||||
<meta property="article:modified_time" content="2019-01-24T00:00:00+00:00" /><meta property="og:site_name" content="Blowfish" />
|
||||
|
||||
|
||||
<meta name="twitter:card" content="summary"/>
|
||||
<meta name="twitter:title" content="An External Article"/>
|
||||
<meta name="twitter:description" content="The externalUrl front matter parameter can link to any URL."/>
|
||||
|
||||
|
||||
<script type="application/ld+json">
|
||||
[{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "Article",
|
||||
"articleSection": "Content Samples",
|
||||
"name": "An External Article",
|
||||
"headline": "An External Article",
|
||||
|
||||
"abstract": "The \u003ccode\u003eexternalUrl\u003c\/code\u003e front matter parameter can link to any URL.",
|
||||
"inLanguage": "en",
|
||||
"url" : "https:\/\/nunocoracao.github.io\/blowfish\/samples\/external\/",
|
||||
"author" : {
|
||||
"@type": "Person",
|
||||
"name": "Blowfish"
|
||||
},
|
||||
"copyrightYear": "2019",
|
||||
"dateCreated": "2019-01-24T00:00:00\u002b00:00",
|
||||
"datePublished": "2019-01-24T00:00:00\u002b00:00",
|
||||
|
||||
"dateModified": "2019-01-24T00:00:00\u002b00:00",
|
||||
|
||||
|
||||
|
||||
"mainEntityOfPage": "true",
|
||||
"wordCount": "40"
|
||||
}]
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<meta name="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">
|
||||
|
||||
|
||||
|
||||
<a href="https://github.com/nunocoracao/blowfish" class="text-base font-medium text-gray-500 hover:text-gray-900" title="">GitHub</a>
|
||||
|
||||
|
||||
|
||||
<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"
|
||||
href="https://github.com/nunocoracao/blowfish" title="">GitHub</a>
|
||||
</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"
|
||||
href="https://github.com/nunocoracao/blowfish" title="">GitHub</a>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<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="/blowfish/"
|
||||
>Blowfish</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="/blowfish/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="/blowfish/samples/external/"
|
||||
>An External Article</a
|
||||
><span class="px-1 text-primary-500">/</span>
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
|
||||
|
||||
<h1 class="mt-0 text-4xl font-extrabold text-neutral-900 dark:text-neutral">
|
||||
An External Article
|
||||
</h1>
|
||||
<div class="mt-8 mb-12 text-base text-neutral-500 dark:text-neutral-400 print:hidden">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<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>
|
||||
</header>
|
||||
<section class="flex flex-col max-w-full mt-0 prose dark:prose-invert lg:flex-row">
|
||||
|
||||
<div class="min-w-0 min-h-0 max-w-prose">
|
||||
<p>This page uses the <code>externalUrl</code> front matter parameter to link to an article outside of this Hugo website.</p>
|
||||
<p>It’s great for things like linking to posts on Medium or to research papers you may have hosted on third party websites.</p>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
<footer class="pt-8 max-w-prose 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="Blowfish"
|
||||
src="/blowfish/img/blowfish_logo_hu184ea2fa12490a2458ca388a16ab730e_227816_192x192_fill_box_smart1_3.png"
|
||||
/>
|
||||
|
||||
|
||||
<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">
|
||||
Blowfish
|
||||
</div>
|
||||
|
||||
|
||||
<div class="text-2xl sm:text-lg">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="flex flex-row flex-wrap justify-center pt-4 text-xl">
|
||||
|
||||
|
||||
<a
|
||||
class="m-1 inline-block min-w-[2.4rem] rounded bg-neutral-300 p-1 text-center text-neutral-700 hover:bg-primary-500 hover:text-neutral dark:bg-neutral-700 dark:text-neutral-300 dark:hover:bg-primary-400 dark:hover:text-neutral-800"
|
||||
href="https://www.linkedin.com/shareArticle?mini=true&url=https://nunocoracao.github.io/blowfish/samples/external/&title=An%20External%20Article"
|
||||
title="Share on LinkedIn"
|
||||
aria-label="Share on LinkedIn"
|
||||
>
|
||||
|
||||
<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="m-1 inline-block min-w-[2.4rem] rounded bg-neutral-300 p-1 text-center text-neutral-700 hover:bg-primary-500 hover:text-neutral dark:bg-neutral-700 dark:text-neutral-300 dark:hover:bg-primary-400 dark:hover:text-neutral-800"
|
||||
href="https://twitter.com/intent/tweet/?url=https://nunocoracao.github.io/blowfish/samples/external/&text=An%20External%20Article"
|
||||
title="Tweet on Twitter"
|
||||
aria-label="Tweet on Twitter"
|
||||
>
|
||||
|
||||
<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="m-1 inline-block min-w-[2.4rem] rounded bg-neutral-300 p-1 text-center text-neutral-700 hover:bg-primary-500 hover:text-neutral dark:bg-neutral-700 dark:text-neutral-300 dark:hover:bg-primary-400 dark:hover:text-neutral-800"
|
||||
href="https://pinterest.com/pin/create/bookmarklet/?url=https://nunocoracao.github.io/blowfish/samples/external/&description=An%20External%20Article"
|
||||
title="Pin on Pinterest"
|
||||
aria-label="Pin on Pinterest"
|
||||
>
|
||||
|
||||
<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="M496 256c0 137-111 248-248 248-25.6 0-50.2-3.9-73.4-11.1 10.1-16.5 25.2-43.5 30.8-65 3-11.6 15.4-59 15.4-59 8.1 15.4 31.7 28.5 56.8 28.5 74.8 0 128.7-68.8 128.7-154.3 0-81.9-66.9-143.2-152.9-143.2-107 0-163.9 71.8-163.9 150.1 0 36.4 19.4 81.7 50.3 96.1 4.7 2.2 7.2 1.2 8.3-3.3.8-3.4 5-20.3 6.9-28.1.6-2.5.3-4.7-1.7-7.1-10.1-12.5-18.3-35.3-18.3-56.6 0-54.7 41.4-107.6 112-107.6 60.9 0 103.6 41.5 103.6 100.9 0 67.1-33.9 113.6-78 113.6-24.3 0-42.6-20.1-36.7-44.8 7-29.5 20.5-61.3 20.5-82.6 0-19-10.2-34.9-31.4-34.9-24.9 0-44.9 25.7-44.9 60.2 0 22 7.4 36.8 7.4 36.8s-24.5 103.8-29 123.2c-5 21.4-3 51.6-.9 71.2C65.4 450.9 0 361.1 0 256 0 119 111 8 248 8s248 111 248 248z"/></svg>
|
||||
|
||||
</span>
|
||||
|
||||
</a
|
||||
>
|
||||
|
||||
|
||||
|
||||
<a
|
||||
class="m-1 inline-block min-w-[2.4rem] rounded bg-neutral-300 p-1 text-center text-neutral-700 hover:bg-primary-500 hover:text-neutral dark:bg-neutral-700 dark:text-neutral-300 dark:hover:bg-primary-400 dark:hover:text-neutral-800"
|
||||
href="https://reddit.com/submit/?url=https://nunocoracao.github.io/blowfish/samples/external/&resubmit=true&title=An%20External%20Article"
|
||||
title="Submit to Reddit"
|
||||
aria-label="Submit to Reddit"
|
||||
>
|
||||
|
||||
<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="M201.5 305.5c-13.8 0-24.9-11.1-24.9-24.6 0-13.8 11.1-24.9 24.9-24.9 13.6 0 24.6 11.1 24.6 24.9 0 13.6-11.1 24.6-24.6 24.6zM504 256c0 137-111 248-248 248S8 393 8 256 119 8 256 8s248 111 248 248zm-132.3-41.2c-9.4 0-17.7 3.9-23.8 10-22.4-15.5-52.6-25.5-86.1-26.6l17.4-78.3 55.4 12.5c0 13.6 11.1 24.6 24.6 24.6 13.8 0 24.9-11.3 24.9-24.9s-11.1-24.9-24.9-24.9c-9.7 0-18 5.8-22.1 13.8l-61.2-13.6c-3-.8-6.1 1.4-6.9 4.4l-19.1 86.4c-33.2 1.4-63.1 11.3-85.5 26.8-6.1-6.4-14.7-10.2-24.1-10.2-34.9 0-46.3 46.9-14.4 62.8-1.1 5-1.7 10.2-1.7 15.5 0 52.6 59.2 95.2 132 95.2 73.1 0 132.3-42.6 132.3-95.2 0-5.3-.6-10.8-1.9-15.8 31.3-16 19.8-62.5-14.9-62.5zM302.8 331c-18.2 18.2-76.1 17.9-93.6 0-2.2-2.2-6.1-2.2-8.3 0-2.5 2.5-2.5 6.4 0 8.6 22.8 22.8 87.3 22.8 110.2 0 2.5-2.2 2.5-6.1 0-8.6-2.2-2.2-6.1-2.2-8.3 0zm7.7-75c-13.6 0-24.6 11.1-24.6 24.9 0 13.6 11.1 24.6 24.6 24.6 13.8 0 24.9-11.1 24.9-24.6 0-13.8-11-24.9-24.9-24.9z"/></svg>
|
||||
|
||||
</span>
|
||||
|
||||
</a
|
||||
>
|
||||
|
||||
|
||||
|
||||
<a
|
||||
class="m-1 inline-block min-w-[2.4rem] rounded bg-neutral-300 p-1 text-center text-neutral-700 hover:bg-primary-500 hover:text-neutral dark:bg-neutral-700 dark:text-neutral-300 dark:hover:bg-primary-400 dark:hover:text-neutral-800"
|
||||
href="https://www.facebook.com/sharer/sharer.php?u=https://nunocoracao.github.io/blowfish/samples/external/&quote=An%20External%20Article"
|
||||
title="Share on Facebook"
|
||||
aria-label="Share on Facebook"
|
||||
>
|
||||
|
||||
<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="m-1 inline-block min-w-[2.4rem] rounded bg-neutral-300 p-1 text-center text-neutral-700 hover:bg-primary-500 hover:text-neutral dark:bg-neutral-700 dark:text-neutral-300 dark:hover:bg-primary-400 dark:hover:text-neutral-800"
|
||||
href="mailto:?body=https://nunocoracao.github.io/blowfish/samples/external/&subject=An%20External%20Article"
|
||||
title="Send via email"
|
||||
aria-label="Send via email"
|
||||
>
|
||||
|
||||
<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="M207.8 20.73c-93.45 18.32-168.7 93.66-187 187.1c-27.64 140.9 68.65 266.2 199.1 285.1c19.01 2.888 36.17-12.26 36.17-31.49l.0001-.6631c0-15.74-11.44-28.88-26.84-31.24c-84.35-12.98-149.2-86.13-149.2-174.2c0-102.9 88.61-185.5 193.4-175.4c91.54 8.869 158.6 91.25 158.6 183.2l0 16.16c0 22.09-17.94 40.05-40 40.05s-40.01-17.96-40.01-40.05v-120.1c0-8.847-7.161-16.02-16.01-16.02l-31.98 .0036c-7.299 0-13.2 4.992-15.12 11.68c-24.85-12.15-54.24-16.38-86.06-5.106c-38.75 13.73-68.12 48.91-73.72 89.64c-9.483 69.01 43.81 128 110.9 128c26.44 0 50.43-9.544 69.59-24.88c24 31.3 65.23 48.69 109.4 37.49C465.2 369.3 496 324.1 495.1 277.2V256.3C495.1 107.1 361.2-9.332 207.8 20.73zM239.1 304.3c-26.47 0-48-21.56-48-48.05s21.53-48.05 48-48.05s48 21.56 48 48.05S266.5 304.3 239.1 304.3z"/></svg>
|
||||
|
||||
</span>
|
||||
|
||||
</a
|
||||
>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</footer>
|
||||
</article>
|
||||
|
||||
|
||||
</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>
|
||||
1265
exampleSite/docs/samples/icons/index.html
Normal file
1265
exampleSite/docs/samples/icons/index.html
Normal file
File diff suppressed because it is too large
Load Diff
880
exampleSite/docs/samples/index.html
Normal file
880
exampleSite/docs/samples/index.html
Normal file
@@ -0,0 +1,880 @@
|
||||
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html
|
||||
lang="en"
|
||||
dir="ltr"
|
||||
class="scroll-smooth"
|
||||
data-default-appearance="dark"
|
||||
data-auto-appearance="false"
|
||||
><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>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<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>
|
||||
|
||||
<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">
|
||||
|
||||
|
||||
|
||||
<a href="https://github.com/nunocoracao/blowfish" class="text-base font-medium text-gray-500 hover:text-gray-900" title="">GitHub</a>
|
||||
|
||||
|
||||
|
||||
<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"
|
||||
href="https://github.com/nunocoracao/blowfish" title="">GitHub</a>
|
||||
</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"
|
||||
href="https://github.com/nunocoracao/blowfish" title="">GitHub</a>
|
||||
</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>
|
||||
84
exampleSite/docs/samples/index.xml
Normal file
84
exampleSite/docs/samples/index.xml
Normal file
@@ -0,0 +1,84 @@
|
||||
<?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 Blowfish</title>
|
||||
<link>https://nunocoracao.github.io/blowfish/samples/</link>
|
||||
<description>Recent content in Content Samples on Blowfish</description>
|
||||
<generator>Hugo -- gohugo.io</generator>
|
||||
<language>en</language>
|
||||
<lastBuildDate>Fri, 14 Aug 2020 00:00:00 +0000</lastBuildDate><atom:link href="https://nunocoracao.github.io/blowfish/samples/index.xml" rel="self" type="application/rss+xml" />
|
||||
<item>
|
||||
<title>Icons</title>
|
||||
<link>https://nunocoracao.github.io/blowfish/samples/icons/</link>
|
||||
<pubDate>Fri, 14 Aug 2020 00:00:00 +0000</pubDate>
|
||||
|
||||
<guid>https://nunocoracao.github.io/blowfish/samples/icons/</guid>
|
||||
<description>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.</description>
|
||||
</item>
|
||||
|
||||
<item>
|
||||
<title>Markdown</title>
|
||||
<link>https://nunocoracao.github.io/blowfish/samples/markdown/</link>
|
||||
<pubDate>Mon, 11 Mar 2019 00:00:00 +0000</pubDate>
|
||||
|
||||
<guid>https://nunocoracao.github.io/blowfish/samples/markdown/</guid>
|
||||
<description><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></description>
|
||||
</item>
|
||||
|
||||
<item>
|
||||
<title>Rich Content</title>
|
||||
<link>https://nunocoracao.github.io/blowfish/samples/rich-content/</link>
|
||||
<pubDate>Sun, 10 Mar 2019 00:00:00 +0000</pubDate>
|
||||
|
||||
<guid>https://nunocoracao.github.io/blowfish/samples/rich-content/</guid>
|
||||
<description>This is an <em>example</em> of a <strong>rich</strong> content summary.</description>
|
||||
</item>
|
||||
|
||||
<item>
|
||||
<title>Mathematical notation</title>
|
||||
<link>https://nunocoracao.github.io/blowfish/samples/mathematical-notation/</link>
|
||||
<pubDate>Fri, 08 Mar 2019 00:00:00 +0000</pubDate>
|
||||
|
||||
<guid>https://nunocoracao.github.io/blowfish/samples/mathematical-notation/</guid>
|
||||
<description><p>KaTeX can be used to render mathematical notation within articles.</p></description>
|
||||
</item>
|
||||
|
||||
<item>
|
||||
<title>Charts</title>
|
||||
<link>https://nunocoracao.github.io/blowfish/samples/charts/</link>
|
||||
<pubDate>Wed, 06 Mar 2019 00:00:00 +0000</pubDate>
|
||||
|
||||
<guid>https://nunocoracao.github.io/blowfish/samples/charts/</guid>
|
||||
<description>Congo includes Chart.js for powerful charts and data visualisations.</description>
|
||||
</item>
|
||||
|
||||
<item>
|
||||
<title>Diagrams and Flowcharts</title>
|
||||
<link>https://nunocoracao.github.io/blowfish/samples/diagrams-flowcharts/</link>
|
||||
<pubDate>Wed, 06 Mar 2019 00:00:00 +0000</pubDate>
|
||||
|
||||
<guid>https://nunocoracao.github.io/blowfish/samples/diagrams-flowcharts/</guid>
|
||||
<description>It&rsquo;s easy to add diagrams and flowcharts to articles using Mermaid.</description>
|
||||
</item>
|
||||
|
||||
<item>
|
||||
<title>Emoji :parachute:</title>
|
||||
<link>https://nunocoracao.github.io/blowfish/samples/emoji/</link>
|
||||
<pubDate>Tue, 05 Mar 2019 00:00:00 +0000</pubDate>
|
||||
|
||||
<guid>https://nunocoracao.github.io/blowfish/samples/emoji/</guid>
|
||||
<description>📖🏞️🧗🏽🐉🧙🏽♂️🧚🏽👸</description>
|
||||
</item>
|
||||
|
||||
<item>
|
||||
<title>An External Article</title>
|
||||
<link>https://nunocoracao.github.io/blowfish/samples/external/</link>
|
||||
<pubDate>Thu, 24 Jan 2019 00:00:00 +0000</pubDate>
|
||||
|
||||
<guid>https://nunocoracao.github.io/blowfish/samples/external/</guid>
|
||||
<description>The <code>externalUrl</code> front matter parameter can link to any URL.</description>
|
||||
</item>
|
||||
|
||||
</channel>
|
||||
</rss>
|
||||
884
exampleSite/docs/samples/markdown/index.html
Normal file
884
exampleSite/docs/samples/markdown/index.html
Normal file
@@ -0,0 +1,884 @@
|
||||
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html
|
||||
lang="en"
|
||||
dir="ltr"
|
||||
class="scroll-smooth"
|
||||
data-default-appearance="dark"
|
||||
data-auto-appearance="false"
|
||||
><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>Markdown · Blowfish</title>
|
||||
<meta name="title" content="Markdown · Blowfish" />
|
||||
|
||||
<meta name="description" content="Product | Nuno Coração" />
|
||||
|
||||
|
||||
|
||||
<link rel="canonical" href="https://nunocoracao.github.io/blowfish/samples/markdown/" />
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<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>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<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>
|
||||
|
||||
<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="Markdown" />
|
||||
<meta property="og:description" content="Sample article showcasing basic Markdown syntax and formatting for HTML elements." />
|
||||
<meta property="og:type" content="article" />
|
||||
<meta property="og:url" content="https://nunocoracao.github.io/blowfish/samples/markdown/" /><meta property="article:section" content="samples" />
|
||||
<meta property="article:published_time" content="2019-03-11T00:00:00+00:00" />
|
||||
<meta property="article:modified_time" content="2019-03-11T00:00:00+00:00" /><meta property="og:site_name" content="Blowfish" />
|
||||
|
||||
|
||||
<meta name="twitter:card" content="summary"/>
|
||||
<meta name="twitter:title" content="Markdown"/>
|
||||
<meta name="twitter:description" content="Sample article showcasing basic Markdown syntax and formatting for HTML elements."/>
|
||||
|
||||
|
||||
<script type="application/ld+json">
|
||||
[{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "Article",
|
||||
"articleSection": "Content Samples",
|
||||
"name": "Markdown",
|
||||
"headline": "Markdown",
|
||||
"description": "Sample article showcasing basic Markdown syntax and formatting for HTML elements.",
|
||||
"abstract": "\u003cp\u003eThis article offers a sample of basic Markdown formatting that can be used in Congo, also it shows how some basic HTML elements are decorated.\u003c\/p\u003e",
|
||||
"inLanguage": "en",
|
||||
"url" : "https:\/\/nunocoracao.github.io\/blowfish\/samples\/markdown\/",
|
||||
"author" : {
|
||||
"@type": "Person",
|
||||
"name": "Blowfish"
|
||||
},
|
||||
"copyrightYear": "2019",
|
||||
"dateCreated": "2019-03-11T00:00:00\u002b00:00",
|
||||
"datePublished": "2019-03-11T00:00:00\u002b00:00",
|
||||
|
||||
"dateModified": "2019-03-11T00:00:00\u002b00:00",
|
||||
|
||||
"keywords": ["markdown","css","html","sample"],
|
||||
|
||||
"mainEntityOfPage": "true",
|
||||
"wordCount": "472"
|
||||
}]
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<meta name="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">
|
||||
|
||||
|
||||
|
||||
<a href="https://github.com/nunocoracao/blowfish" class="text-base font-medium text-gray-500 hover:text-gray-900" title="">GitHub</a>
|
||||
|
||||
|
||||
|
||||
<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"
|
||||
href="https://github.com/nunocoracao/blowfish" title="">GitHub</a>
|
||||
</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"
|
||||
href="https://github.com/nunocoracao/blowfish" title="">GitHub</a>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<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="/blowfish/"
|
||||
>Blowfish</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="/blowfish/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="/blowfish/samples/markdown/"
|
||||
>Markdown</a
|
||||
><span class="px-1 text-primary-500">/</span>
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
|
||||
|
||||
<h1 class="mt-0 text-4xl font-extrabold text-neutral-900 dark:text-neutral">
|
||||
Markdown
|
||||
</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-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>
|
||||
</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="#headings">Headings</a></li>
|
||||
</ul>
|
||||
|
||||
<ul>
|
||||
<li><a href="#h2">H2</a>
|
||||
<ul>
|
||||
<li><a href="#h3">H3</a>
|
||||
<ul>
|
||||
<li><a href="#h4">H4</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#paragraph">Paragraph</a></li>
|
||||
<li><a href="#blockquotes">Blockquotes</a>
|
||||
<ul>
|
||||
<li><a href="#blockquote-without-attribution">Blockquote without attribution</a></li>
|
||||
<li><a href="#blockquote-with-attribution">Blockquote with attribution</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#tables">Tables</a>
|
||||
<ul>
|
||||
<li><a href="#inline-markdown-within-tables">Inline Markdown within tables</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#code-blocks">Code Blocks</a>
|
||||
<ul>
|
||||
<li><a href="#code-block-with-backticks">Code block with backticks</a></li>
|
||||
<li><a href="#code-block-indented-with-four-spaces">Code block indented with four spaces</a></li>
|
||||
<li><a href="#code-block-with-hugos-internal-highlight-shortcode">Code block with Hugo’s internal highlight shortcode</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#list-types">List Types</a>
|
||||
<ul>
|
||||
<li><a href="#ordered-list">Ordered List</a></li>
|
||||
<li><a href="#unordered-list">Unordered List</a></li>
|
||||
<li><a href="#nested-list">Nested list</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#other-elements--abbr-sub-sup-kbd-mark">Other Elements — abbr, sub, sup, kbd, mark</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="min-w-0 min-h-0 max-w-prose">
|
||||
<p>This article offers a sample of basic Markdown formatting that can be used in Congo, also it shows how some basic HTML elements are decorated.</p>
|
||||
<h2 id="headings" class="relative group">Headings <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#headings" aria-label="Anchor">#</a></span></h2>
|
||||
<p>The following HTML <code><h1></code>—<code><h6></code> elements represent six levels of section headings. <code><h1></code> is the highest section level while <code><h6></code> is the lowest.</p>
|
||||
<h1 id="h1" class="relative group">H1 <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#h1" aria-label="Anchor">#</a></span></h1>
|
||||
<h2 id="h2" class="relative group">H2 <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#h2" aria-label="Anchor">#</a></span></h2>
|
||||
<h3 id="h3" class="relative group">H3 <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#h3" aria-label="Anchor">#</a></span></h3>
|
||||
<h4 id="h4" class="relative group">H4 <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#h4" aria-label="Anchor">#</a></span></h4>
|
||||
<h5 id="h5" class="relative group">H5 <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#h5" aria-label="Anchor">#</a></span></h5>
|
||||
<h6 id="h6" class="relative group">H6 <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#h6" aria-label="Anchor">#</a></span></h6>
|
||||
<h2 id="paragraph" class="relative group">Paragraph <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#paragraph" aria-label="Anchor">#</a></span></h2>
|
||||
<p>Xerum, quo qui aut unt expliquam qui dolut labo. Aque venitatiusda cum, voluptionse latur sitiae dolessi aut parist aut dollo enim qui voluptate ma dolestendit peritin re plis aut quas inctum laceat est volestemque commosa as cus endigna tectur, offic to cor sequas etum rerum idem sintibus eiur? Quianimin porecus evelectur, cum que nis nust voloribus ratem aut omnimi, sitatur? Quiatem. Nam, omnis sum am facea corem alique molestrunt et eos evelece arcillit ut aut eos eos nus, sin conecerem erum fuga. Ri oditatquam, ad quibus unda veliamenimin cusam et facea ipsamus es exerum sitate dolores editium rerore eost, temped molorro ratiae volorro te reribus dolorer sperchicium faceata tiustia prat.</p>
|
||||
<p>Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sapicia is sinveli squiatum, core et que aut hariosam ex eat.</p>
|
||||
<h2 id="blockquotes" class="relative group">Blockquotes <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#blockquotes" aria-label="Anchor">#</a></span></h2>
|
||||
<p>The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a <code>footer</code> or <code>cite</code> element, and optionally with in-line changes such as annotations and abbreviations.</p>
|
||||
<h3 id="blockquote-without-attribution" class="relative group">Blockquote without attribution <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#blockquote-without-attribution" aria-label="Anchor">#</a></span></h3>
|
||||
<blockquote>
|
||||
<p>Tiam, ad mint andaepu dandae nostion secatur sequo quae.
|
||||
<strong>Note</strong> that you can use <em>Markdown syntax</em> within a blockquote.</p>
|
||||
</blockquote>
|
||||
<h3 id="blockquote-with-attribution" class="relative group">Blockquote with attribution <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#blockquote-with-attribution" aria-label="Anchor">#</a></span></h3>
|
||||
<blockquote>
|
||||
<p>Don’t communicate by sharing memory, share memory by communicating.<br>
|
||||
— <cite>Rob Pike<sup id="fnref:1"><a href="#fn:1" class="footnote-ref" role="doc-noteref">1</a></sup></cite></p>
|
||||
</blockquote>
|
||||
<h2 id="tables" class="relative group">Tables <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#tables" aria-label="Anchor">#</a></span></h2>
|
||||
<p>Tables aren’t part of the core Markdown spec, but Hugo supports supports them out-of-the-box.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Age</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Bob</td>
|
||||
<td>27</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Alice</td>
|
||||
<td>23</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h3 id="inline-markdown-within-tables" class="relative group">Inline Markdown within tables <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#inline-markdown-within-tables" aria-label="Anchor">#</a></span></h3>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Italics</th>
|
||||
<th>Bold</th>
|
||||
<th>Code</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><em>italics</em></td>
|
||||
<td><strong>bold</strong></td>
|
||||
<td><code>code</code></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h2 id="code-blocks" class="relative group">Code Blocks <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#code-blocks" aria-label="Anchor">#</a></span></h2>
|
||||
<h3 id="code-block-with-backticks" class="relative group">Code block with backticks <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#code-block-with-backticks" aria-label="Anchor">#</a></span></h3>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="cp"><!DOCTYPE html></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">head</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">title</span><span class="p">></span>Example HTML5 Document<span class="p"></</span><span class="nt">title</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">head</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">body</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span><span class="p">></span>Test<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">body</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">html</span><span class="p">></span>
|
||||
</span></span></code></pre></div><h3 id="code-block-indented-with-four-spaces" class="relative group">Code block indented with four spaces <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#code-block-indented-with-four-spaces" aria-label="Anchor">#</a></span></h3>
|
||||
<pre><code><!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Example HTML5 Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test</p>
|
||||
</body>
|
||||
</html>
|
||||
</code></pre>
|
||||
<h3 id="code-block-with-hugos-internal-highlight-shortcode" class="relative group">Code block with Hugo’s internal highlight shortcode <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#code-block-with-hugos-internal-highlight-shortcode" aria-label="Anchor">#</a></span></h3>
|
||||
<div class="highlight"><div class="chroma">
|
||||
<table class="lntable"><tr><td class="lntd">
|
||||
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
|
||||
</span><span class="lnt"> 2
|
||||
</span><span class="lnt"> 3
|
||||
</span><span class="hl"><span class="lnt"> 4
|
||||
</span></span><span class="lnt"> 5
|
||||
</span><span class="lnt"> 6
|
||||
</span><span class="hl"><span class="lnt"> 7
|
||||
</span></span><span class="hl"><span class="lnt"> 8
|
||||
</span></span><span class="hl"><span class="lnt"> 9
|
||||
</span></span><span class="lnt">10
|
||||
</span></code></pre></td>
|
||||
<td class="lntd">
|
||||
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="cp"><!DOCTYPE html></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">head</span><span class="p">></span>
|
||||
</span></span><span class="line hl"><span class="cl"> <span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">title</span><span class="p">></span>Example HTML5 Document<span class="p"></</span><span class="nt">title</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">head</span><span class="p">></span>
|
||||
</span></span><span class="line hl"><span class="cl"><span class="p"><</span><span class="nt">body</span><span class="p">></span>
|
||||
</span></span><span class="line hl"><span class="cl"> <span class="p"><</span><span class="nt">p</span><span class="p">></span>Test<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||||
</span></span><span class="line hl"><span class="cl"><span class="p"></</span><span class="nt">body</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">html</span><span class="p">></span></span></span></code></pre></td></tr></table>
|
||||
</div>
|
||||
</div>
|
||||
<h2 id="list-types" class="relative group">List Types <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#list-types" aria-label="Anchor">#</a></span></h2>
|
||||
<h3 id="ordered-list" class="relative group">Ordered List <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#ordered-list" aria-label="Anchor">#</a></span></h3>
|
||||
<ol>
|
||||
<li>First item</li>
|
||||
<li>Second item</li>
|
||||
<li>Third item</li>
|
||||
</ol>
|
||||
<h3 id="unordered-list" class="relative group">Unordered List <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#unordered-list" aria-label="Anchor">#</a></span></h3>
|
||||
<ul>
|
||||
<li>List item</li>
|
||||
<li>Another item</li>
|
||||
<li>And another item</li>
|
||||
</ul>
|
||||
<h3 id="nested-list" class="relative group">Nested list <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#nested-list" aria-label="Anchor">#</a></span></h3>
|
||||
<ul>
|
||||
<li>Fruit
|
||||
<ul>
|
||||
<li>Apple</li>
|
||||
<li>Orange</li>
|
||||
<li>Banana</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Dairy
|
||||
<ul>
|
||||
<li>Milk</li>
|
||||
<li>Cheese</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<h2 id="other-elements--abbr-sub-sup-kbd-mark" class="relative group">Other Elements — abbr, sub, sup, kbd, mark <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#other-elements--abbr-sub-sup-kbd-mark" aria-label="Anchor">#</a></span></h2>
|
||||
<p><abbr title="Graphics Interchange Format">GIF</abbr> is a bitmap image format.</p>
|
||||
<p>H<sub>2</sub>O</p>
|
||||
<p>X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup></p>
|
||||
<p>Press <kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>Delete</kbd> to end the session.</p>
|
||||
<p>Most <mark>salamanders</mark> are nocturnal, and hunt for insects, worms, and other small creatures.</p>
|
||||
<div class="footnotes" role="doc-endnotes">
|
||||
<hr>
|
||||
<ol>
|
||||
<li id="fn:1">
|
||||
<p>The above quote is excerpted from Rob Pike’s <a href="https://www.youtube.com/watch?v=PAAkCSZUG1c">talk <code>about</code> nothing</a> during Gopherfest, November 18, 2015. <a href="#fnref:1" class="footnote-backref" role="doc-backlink">↩︎</a></p>
|
||||
</li>
|
||||
</ol>
|
||||
</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="Blowfish"
|
||||
src="/blowfish/img/blowfish_logo_hu184ea2fa12490a2458ca388a16ab730e_227816_192x192_fill_box_smart1_3.png"
|
||||
/>
|
||||
|
||||
|
||||
<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">
|
||||
Blowfish
|
||||
</div>
|
||||
|
||||
|
||||
<div class="text-2xl sm:text-lg">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="flex flex-row flex-wrap justify-center pt-4 text-xl">
|
||||
|
||||
|
||||
<a
|
||||
class="m-1 inline-block min-w-[2.4rem] rounded bg-neutral-300 p-1 text-center text-neutral-700 hover:bg-primary-500 hover:text-neutral dark:bg-neutral-700 dark:text-neutral-300 dark:hover:bg-primary-400 dark:hover:text-neutral-800"
|
||||
href="https://www.linkedin.com/shareArticle?mini=true&url=https://nunocoracao.github.io/blowfish/samples/markdown/&title=Markdown"
|
||||
title="Share on LinkedIn"
|
||||
aria-label="Share on LinkedIn"
|
||||
>
|
||||
|
||||
<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="m-1 inline-block min-w-[2.4rem] rounded bg-neutral-300 p-1 text-center text-neutral-700 hover:bg-primary-500 hover:text-neutral dark:bg-neutral-700 dark:text-neutral-300 dark:hover:bg-primary-400 dark:hover:text-neutral-800"
|
||||
href="https://twitter.com/intent/tweet/?url=https://nunocoracao.github.io/blowfish/samples/markdown/&text=Markdown"
|
||||
title="Tweet on Twitter"
|
||||
aria-label="Tweet on Twitter"
|
||||
>
|
||||
|
||||
<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="m-1 inline-block min-w-[2.4rem] rounded bg-neutral-300 p-1 text-center text-neutral-700 hover:bg-primary-500 hover:text-neutral dark:bg-neutral-700 dark:text-neutral-300 dark:hover:bg-primary-400 dark:hover:text-neutral-800"
|
||||
href="https://pinterest.com/pin/create/bookmarklet/?url=https://nunocoracao.github.io/blowfish/samples/markdown/&description=Markdown"
|
||||
title="Pin on Pinterest"
|
||||
aria-label="Pin on Pinterest"
|
||||
>
|
||||
|
||||
<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="M496 256c0 137-111 248-248 248-25.6 0-50.2-3.9-73.4-11.1 10.1-16.5 25.2-43.5 30.8-65 3-11.6 15.4-59 15.4-59 8.1 15.4 31.7 28.5 56.8 28.5 74.8 0 128.7-68.8 128.7-154.3 0-81.9-66.9-143.2-152.9-143.2-107 0-163.9 71.8-163.9 150.1 0 36.4 19.4 81.7 50.3 96.1 4.7 2.2 7.2 1.2 8.3-3.3.8-3.4 5-20.3 6.9-28.1.6-2.5.3-4.7-1.7-7.1-10.1-12.5-18.3-35.3-18.3-56.6 0-54.7 41.4-107.6 112-107.6 60.9 0 103.6 41.5 103.6 100.9 0 67.1-33.9 113.6-78 113.6-24.3 0-42.6-20.1-36.7-44.8 7-29.5 20.5-61.3 20.5-82.6 0-19-10.2-34.9-31.4-34.9-24.9 0-44.9 25.7-44.9 60.2 0 22 7.4 36.8 7.4 36.8s-24.5 103.8-29 123.2c-5 21.4-3 51.6-.9 71.2C65.4 450.9 0 361.1 0 256 0 119 111 8 248 8s248 111 248 248z"/></svg>
|
||||
|
||||
</span>
|
||||
|
||||
</a
|
||||
>
|
||||
|
||||
|
||||
|
||||
<a
|
||||
class="m-1 inline-block min-w-[2.4rem] rounded bg-neutral-300 p-1 text-center text-neutral-700 hover:bg-primary-500 hover:text-neutral dark:bg-neutral-700 dark:text-neutral-300 dark:hover:bg-primary-400 dark:hover:text-neutral-800"
|
||||
href="https://reddit.com/submit/?url=https://nunocoracao.github.io/blowfish/samples/markdown/&resubmit=true&title=Markdown"
|
||||
title="Submit to Reddit"
|
||||
aria-label="Submit to Reddit"
|
||||
>
|
||||
|
||||
<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="M201.5 305.5c-13.8 0-24.9-11.1-24.9-24.6 0-13.8 11.1-24.9 24.9-24.9 13.6 0 24.6 11.1 24.6 24.9 0 13.6-11.1 24.6-24.6 24.6zM504 256c0 137-111 248-248 248S8 393 8 256 119 8 256 8s248 111 248 248zm-132.3-41.2c-9.4 0-17.7 3.9-23.8 10-22.4-15.5-52.6-25.5-86.1-26.6l17.4-78.3 55.4 12.5c0 13.6 11.1 24.6 24.6 24.6 13.8 0 24.9-11.3 24.9-24.9s-11.1-24.9-24.9-24.9c-9.7 0-18 5.8-22.1 13.8l-61.2-13.6c-3-.8-6.1 1.4-6.9 4.4l-19.1 86.4c-33.2 1.4-63.1 11.3-85.5 26.8-6.1-6.4-14.7-10.2-24.1-10.2-34.9 0-46.3 46.9-14.4 62.8-1.1 5-1.7 10.2-1.7 15.5 0 52.6 59.2 95.2 132 95.2 73.1 0 132.3-42.6 132.3-95.2 0-5.3-.6-10.8-1.9-15.8 31.3-16 19.8-62.5-14.9-62.5zM302.8 331c-18.2 18.2-76.1 17.9-93.6 0-2.2-2.2-6.1-2.2-8.3 0-2.5 2.5-2.5 6.4 0 8.6 22.8 22.8 87.3 22.8 110.2 0 2.5-2.2 2.5-6.1 0-8.6-2.2-2.2-6.1-2.2-8.3 0zm7.7-75c-13.6 0-24.6 11.1-24.6 24.9 0 13.6 11.1 24.6 24.6 24.6 13.8 0 24.9-11.1 24.9-24.6 0-13.8-11-24.9-24.9-24.9z"/></svg>
|
||||
|
||||
</span>
|
||||
|
||||
</a
|
||||
>
|
||||
|
||||
|
||||
|
||||
<a
|
||||
class="m-1 inline-block min-w-[2.4rem] rounded bg-neutral-300 p-1 text-center text-neutral-700 hover:bg-primary-500 hover:text-neutral dark:bg-neutral-700 dark:text-neutral-300 dark:hover:bg-primary-400 dark:hover:text-neutral-800"
|
||||
href="https://www.facebook.com/sharer/sharer.php?u=https://nunocoracao.github.io/blowfish/samples/markdown/&quote=Markdown"
|
||||
title="Share on Facebook"
|
||||
aria-label="Share on Facebook"
|
||||
>
|
||||
|
||||
<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="m-1 inline-block min-w-[2.4rem] rounded bg-neutral-300 p-1 text-center text-neutral-700 hover:bg-primary-500 hover:text-neutral dark:bg-neutral-700 dark:text-neutral-300 dark:hover:bg-primary-400 dark:hover:text-neutral-800"
|
||||
href="mailto:?body=https://nunocoracao.github.io/blowfish/samples/markdown/&subject=Markdown"
|
||||
title="Send via email"
|
||||
aria-label="Send via email"
|
||||
>
|
||||
|
||||
<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="M207.8 20.73c-93.45 18.32-168.7 93.66-187 187.1c-27.64 140.9 68.65 266.2 199.1 285.1c19.01 2.888 36.17-12.26 36.17-31.49l.0001-.6631c0-15.74-11.44-28.88-26.84-31.24c-84.35-12.98-149.2-86.13-149.2-174.2c0-102.9 88.61-185.5 193.4-175.4c91.54 8.869 158.6 91.25 158.6 183.2l0 16.16c0 22.09-17.94 40.05-40 40.05s-40.01-17.96-40.01-40.05v-120.1c0-8.847-7.161-16.02-16.01-16.02l-31.98 .0036c-7.299 0-13.2 4.992-15.12 11.68c-24.85-12.15-54.24-16.38-86.06-5.106c-38.75 13.73-68.12 48.91-73.72 89.64c-9.483 69.01 43.81 128 110.9 128c26.44 0 50.43-9.544 69.59-24.88c24 31.3 65.23 48.69 109.4 37.49C465.2 369.3 496 324.1 495.1 277.2V256.3C495.1 107.1 361.2-9.332 207.8 20.73zM239.1 304.3c-26.47 0-48-21.56-48-48.05s21.53-48.05 48-48.05s48 21.56 48 48.05S266.5 304.3 239.1 304.3z"/></svg>
|
||||
|
||||
</span>
|
||||
|
||||
</a
|
||||
>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<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="/blowfish/samples/rich-content/">
|
||||
<span
|
||||
class="mr-3 text-neutral-700 group-hover:text-primary-600 ltr:inline rtl:hidden dark:text-neutral dark:group-hover:text-primary-400"
|
||||
>←</span
|
||||
>
|
||||
<span
|
||||
class="ml-3 text-neutral-700 group-hover:text-primary-600 ltr:hidden rtl:inline dark:text-neutral dark:group-hover:text-primary-400"
|
||||
>→</span
|
||||
>
|
||||
<span class="flex flex-col">
|
||||
<span
|
||||
class="mt-[0.1rem] leading-6 group-hover:underline group-hover:decoration-primary-500"
|
||||
>Rich Content</span
|
||||
>
|
||||
<span class="mt-[0.1rem] text-xs text-neutral-500 dark:text-neutral-400">
|
||||
|
||||
<time datetime="2019-03-10 00:00:00 +0000 UTC">10 March 2019</time>
|
||||
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
</span>
|
||||
<span>
|
||||
|
||||
<a class="flex text-right group" href="/blowfish/samples/icons/">
|
||||
<span class="flex flex-col">
|
||||
<span
|
||||
class="mt-[0.1rem] leading-6 group-hover:underline group-hover:decoration-primary-500"
|
||||
>Icons</span
|
||||
>
|
||||
<span class="mt-[0.1rem] text-xs text-neutral-500 dark:text-neutral-400">
|
||||
|
||||
<time datetime="2020-08-14 00:00:00 +0000 UTC">14 August 2020</time>
|
||||
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
class="ml-3 text-neutral-700 group-hover:text-primary-600 ltr:inline rtl:hidden dark:text-neutral dark:group-hover:text-primary-400"
|
||||
>→</span
|
||||
>
|
||||
<span
|
||||
class="mr-3 text-neutral-700 group-hover:text-primary-600 ltr:hidden rtl:inline dark:text-neutral dark:group-hover:text-primary-400"
|
||||
>←</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"
|
||||
>
|
||||
↑
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</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>
|
||||
833
exampleSite/docs/samples/mathematical-notation/index.html
Normal file
833
exampleSite/docs/samples/mathematical-notation/index.html
Normal file
@@ -0,0 +1,833 @@
|
||||
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html
|
||||
lang="en"
|
||||
dir="ltr"
|
||||
class="scroll-smooth"
|
||||
data-default-appearance="dark"
|
||||
data-auto-appearance="false"
|
||||
><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>Mathematical notation · Blowfish</title>
|
||||
<meta name="title" content="Mathematical notation · Blowfish" />
|
||||
|
||||
<meta name="description" content="Product | Nuno Coração" />
|
||||
|
||||
|
||||
|
||||
<link rel="canonical" href="https://nunocoracao.github.io/blowfish/samples/mathematical-notation/" />
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<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>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<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>
|
||||
|
||||
<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="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://nunocoracao.github.io/blowfish/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="Blowfish" />
|
||||
|
||||
|
||||
<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",
|
||||
"url" : "https:\/\/nunocoracao.github.io\/blowfish\/samples\/mathematical-notation\/",
|
||||
"author" : {
|
||||
"@type": "Person",
|
||||
"name": "Blowfish"
|
||||
},
|
||||
"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="Blowfish" />
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<link
|
||||
type="text/css" rel="stylesheet"
|
||||
href="/blowfish/lib/katex/katex.min.ccc75f9acd3c505d20bc9dcd0ec6835ed9a0f6963443112cd7ecbcc79946609d478606f102a9460d122c1e78c894e9b77588b97828e9f7a304f4b9605c17eb8e.css"
|
||||
integrity="sha512-zMdfms08UF0gvJ3NDsaDXtmg9pY0QxEs1+y8x5lGYJ1HhgbxAqlGDRIsHnjIlOm3dYi5eCjp96ME9LlgXBfrjg=="
|
||||
/>
|
||||
|
||||
|
||||
<script defer src="/blowfish/lib/katex/katex.min.08b8b724af78bfa4d472881b5afe164f8c677e9e81f00113e0fb818c6c57a3931927dc5f3603078176971fc4097ba27037e906c6a478fffcfcff6058567c5157.js" integrity="sha512-CLi3JK94v6TUcogbWv4WT4xnfp6B8AET4PuBjGxXo5MZJ9xfNgMHgXaXH8QJe6JwN+kGxqR4//z8/2BYVnxRVw=="></script>
|
||||
|
||||
|
||||
<script defer src="/blowfish/lib/katex/auto-render.min.8968ae052e67b7aafad1f0b3dba35dd19a9ed276e4d594c841b9772afee462c5fec8a314147ce3687dbe02733abe9d97b3e80d99a0405562634a6b8fc3be847e.js" integrity="sha512-iWiuBS5nt6r60fCz26Nd0Zqe0nbk1ZTIQbl3Kv7kYsX+yKMUFHzjaH2+AnM6vp2Xs+gNmaBAVWJjSmuPw76Efg==" onload="renderMathInElement(document.body);"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<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">
|
||||
|
||||
|
||||
|
||||
<a href="https://github.com/nunocoracao/blowfish" class="text-base font-medium text-gray-500 hover:text-gray-900" title="">GitHub</a>
|
||||
|
||||
|
||||
|
||||
<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"
|
||||
href="https://github.com/nunocoracao/blowfish" title="">GitHub</a>
|
||||
</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"
|
||||
href="https://github.com/nunocoracao/blowfish" title="">GitHub</a>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<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="/blowfish/"
|
||||
>Blowfish</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="/blowfish/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="/blowfish/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">·</span><span>145 words</span><span class="px-2 text-primary-500">·</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="#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://nunocoracao.github.io/blowfish/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></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></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="nb"> </span><span class="nv">\varphi</span><span class="nb"> </span><span class="o">=</span><span class="nb"> </span><span class="m">1</span><span class="o">+</span><span class="nv">\frac</span><span class="nb">{</span><span class="m">1</span><span class="nb">} {</span><span class="m">1</span><span class="o">+</span><span class="nv">\frac</span><span class="nb">{</span><span class="m">1</span><span class="nb">} {</span><span class="m">1</span><span class="o">+</span><span class="nv">\frac</span><span class="nb">{</span><span class="m">1</span><span class="nb">} {</span><span class="m">1</span><span class="o">+</span><span class="nv">\cdots</span><span class="nb">} } }
|
||||
</span></span></span><span class="line"><span class="cl"><span class="nb"></span><span class="s">$$</span>
|
||||
</span></span></code></pre></div><p>$$
|
||||
\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="!mt-0 !mb-0 h-24 w-24 rounded-full ltr:mr-4 rtl:ml-4"
|
||||
width="96"
|
||||
height="96"
|
||||
alt="Blowfish"
|
||||
src="/blowfish/img/blowfish_logo_hu184ea2fa12490a2458ca388a16ab730e_227816_192x192_fill_box_smart1_3.png"
|
||||
/>
|
||||
|
||||
|
||||
<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">
|
||||
Blowfish
|
||||
</div>
|
||||
|
||||
|
||||
<div class="text-2xl sm:text-lg">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="flex flex-row flex-wrap justify-center pt-4 text-xl">
|
||||
|
||||
|
||||
<a
|
||||
class="m-1 inline-block min-w-[2.4rem] rounded bg-neutral-300 p-1 text-center text-neutral-700 hover:bg-primary-500 hover:text-neutral dark:bg-neutral-700 dark:text-neutral-300 dark:hover:bg-primary-400 dark:hover:text-neutral-800"
|
||||
href="https://www.linkedin.com/shareArticle?mini=true&url=https://nunocoracao.github.io/blowfish/samples/mathematical-notation/&title=Mathematical%20notation"
|
||||
title="Share on LinkedIn"
|
||||
aria-label="Share on LinkedIn"
|
||||
>
|
||||
|
||||
<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="m-1 inline-block min-w-[2.4rem] rounded bg-neutral-300 p-1 text-center text-neutral-700 hover:bg-primary-500 hover:text-neutral dark:bg-neutral-700 dark:text-neutral-300 dark:hover:bg-primary-400 dark:hover:text-neutral-800"
|
||||
href="https://twitter.com/intent/tweet/?url=https://nunocoracao.github.io/blowfish/samples/mathematical-notation/&text=Mathematical%20notation"
|
||||
title="Tweet on Twitter"
|
||||
aria-label="Tweet on Twitter"
|
||||
>
|
||||
|
||||
<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="m-1 inline-block min-w-[2.4rem] rounded bg-neutral-300 p-1 text-center text-neutral-700 hover:bg-primary-500 hover:text-neutral dark:bg-neutral-700 dark:text-neutral-300 dark:hover:bg-primary-400 dark:hover:text-neutral-800"
|
||||
href="https://pinterest.com/pin/create/bookmarklet/?url=https://nunocoracao.github.io/blowfish/samples/mathematical-notation/&description=Mathematical%20notation"
|
||||
title="Pin on Pinterest"
|
||||
aria-label="Pin on Pinterest"
|
||||
>
|
||||
|
||||
<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="M496 256c0 137-111 248-248 248-25.6 0-50.2-3.9-73.4-11.1 10.1-16.5 25.2-43.5 30.8-65 3-11.6 15.4-59 15.4-59 8.1 15.4 31.7 28.5 56.8 28.5 74.8 0 128.7-68.8 128.7-154.3 0-81.9-66.9-143.2-152.9-143.2-107 0-163.9 71.8-163.9 150.1 0 36.4 19.4 81.7 50.3 96.1 4.7 2.2 7.2 1.2 8.3-3.3.8-3.4 5-20.3 6.9-28.1.6-2.5.3-4.7-1.7-7.1-10.1-12.5-18.3-35.3-18.3-56.6 0-54.7 41.4-107.6 112-107.6 60.9 0 103.6 41.5 103.6 100.9 0 67.1-33.9 113.6-78 113.6-24.3 0-42.6-20.1-36.7-44.8 7-29.5 20.5-61.3 20.5-82.6 0-19-10.2-34.9-31.4-34.9-24.9 0-44.9 25.7-44.9 60.2 0 22 7.4 36.8 7.4 36.8s-24.5 103.8-29 123.2c-5 21.4-3 51.6-.9 71.2C65.4 450.9 0 361.1 0 256 0 119 111 8 248 8s248 111 248 248z"/></svg>
|
||||
|
||||
</span>
|
||||
|
||||
</a
|
||||
>
|
||||
|
||||
|
||||
|
||||
<a
|
||||
class="m-1 inline-block min-w-[2.4rem] rounded bg-neutral-300 p-1 text-center text-neutral-700 hover:bg-primary-500 hover:text-neutral dark:bg-neutral-700 dark:text-neutral-300 dark:hover:bg-primary-400 dark:hover:text-neutral-800"
|
||||
href="https://reddit.com/submit/?url=https://nunocoracao.github.io/blowfish/samples/mathematical-notation/&resubmit=true&title=Mathematical%20notation"
|
||||
title="Submit to Reddit"
|
||||
aria-label="Submit to Reddit"
|
||||
>
|
||||
|
||||
<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="M201.5 305.5c-13.8 0-24.9-11.1-24.9-24.6 0-13.8 11.1-24.9 24.9-24.9 13.6 0 24.6 11.1 24.6 24.9 0 13.6-11.1 24.6-24.6 24.6zM504 256c0 137-111 248-248 248S8 393 8 256 119 8 256 8s248 111 248 248zm-132.3-41.2c-9.4 0-17.7 3.9-23.8 10-22.4-15.5-52.6-25.5-86.1-26.6l17.4-78.3 55.4 12.5c0 13.6 11.1 24.6 24.6 24.6 13.8 0 24.9-11.3 24.9-24.9s-11.1-24.9-24.9-24.9c-9.7 0-18 5.8-22.1 13.8l-61.2-13.6c-3-.8-6.1 1.4-6.9 4.4l-19.1 86.4c-33.2 1.4-63.1 11.3-85.5 26.8-6.1-6.4-14.7-10.2-24.1-10.2-34.9 0-46.3 46.9-14.4 62.8-1.1 5-1.7 10.2-1.7 15.5 0 52.6 59.2 95.2 132 95.2 73.1 0 132.3-42.6 132.3-95.2 0-5.3-.6-10.8-1.9-15.8 31.3-16 19.8-62.5-14.9-62.5zM302.8 331c-18.2 18.2-76.1 17.9-93.6 0-2.2-2.2-6.1-2.2-8.3 0-2.5 2.5-2.5 6.4 0 8.6 22.8 22.8 87.3 22.8 110.2 0 2.5-2.2 2.5-6.1 0-8.6-2.2-2.2-6.1-2.2-8.3 0zm7.7-75c-13.6 0-24.6 11.1-24.6 24.9 0 13.6 11.1 24.6 24.6 24.6 13.8 0 24.9-11.1 24.9-24.6 0-13.8-11-24.9-24.9-24.9z"/></svg>
|
||||
|
||||
</span>
|
||||
|
||||
</a
|
||||
>
|
||||
|
||||
|
||||
|
||||
<a
|
||||
class="m-1 inline-block min-w-[2.4rem] rounded bg-neutral-300 p-1 text-center text-neutral-700 hover:bg-primary-500 hover:text-neutral dark:bg-neutral-700 dark:text-neutral-300 dark:hover:bg-primary-400 dark:hover:text-neutral-800"
|
||||
href="https://www.facebook.com/sharer/sharer.php?u=https://nunocoracao.github.io/blowfish/samples/mathematical-notation/&quote=Mathematical%20notation"
|
||||
title="Share on Facebook"
|
||||
aria-label="Share on Facebook"
|
||||
>
|
||||
|
||||
<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="m-1 inline-block min-w-[2.4rem] rounded bg-neutral-300 p-1 text-center text-neutral-700 hover:bg-primary-500 hover:text-neutral dark:bg-neutral-700 dark:text-neutral-300 dark:hover:bg-primary-400 dark:hover:text-neutral-800"
|
||||
href="mailto:?body=https://nunocoracao.github.io/blowfish/samples/mathematical-notation/&subject=Mathematical%20notation"
|
||||
title="Send via email"
|
||||
aria-label="Send via email"
|
||||
>
|
||||
|
||||
<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="M207.8 20.73c-93.45 18.32-168.7 93.66-187 187.1c-27.64 140.9 68.65 266.2 199.1 285.1c19.01 2.888 36.17-12.26 36.17-31.49l.0001-.6631c0-15.74-11.44-28.88-26.84-31.24c-84.35-12.98-149.2-86.13-149.2-174.2c0-102.9 88.61-185.5 193.4-175.4c91.54 8.869 158.6 91.25 158.6 183.2l0 16.16c0 22.09-17.94 40.05-40 40.05s-40.01-17.96-40.01-40.05v-120.1c0-8.847-7.161-16.02-16.01-16.02l-31.98 .0036c-7.299 0-13.2 4.992-15.12 11.68c-24.85-12.15-54.24-16.38-86.06-5.106c-38.75 13.73-68.12 48.91-73.72 89.64c-9.483 69.01 43.81 128 110.9 128c26.44 0 50.43-9.544 69.59-24.88c24 31.3 65.23 48.69 109.4 37.49C465.2 369.3 496 324.1 495.1 277.2V256.3C495.1 107.1 361.2-9.332 207.8 20.73zM239.1 304.3c-26.47 0-48-21.56-48-48.05s21.53-48.05 48-48.05s48 21.56 48 48.05S266.5 304.3 239.1 304.3z"/></svg>
|
||||
|
||||
</span>
|
||||
|
||||
</a
|
||||
>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<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="/blowfish/samples/charts/">
|
||||
<span
|
||||
class="mr-3 text-neutral-700 group-hover:text-primary-600 ltr:inline rtl:hidden dark:text-neutral dark:group-hover:text-primary-400"
|
||||
>←</span
|
||||
>
|
||||
<span
|
||||
class="ml-3 text-neutral-700 group-hover:text-primary-600 ltr:hidden rtl:inline dark:text-neutral dark:group-hover:text-primary-400"
|
||||
>→</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>
|
||||
|
||||
<a class="flex text-right group" href="/blowfish/samples/rich-content/">
|
||||
<span class="flex flex-col">
|
||||
<span
|
||||
class="mt-[0.1rem] leading-6 group-hover:underline group-hover:decoration-primary-500"
|
||||
>Rich Content</span
|
||||
>
|
||||
<span class="mt-[0.1rem] text-xs text-neutral-500 dark:text-neutral-400">
|
||||
|
||||
<time datetime="2019-03-10 00:00:00 +0000 UTC">10 March 2019</time>
|
||||
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
class="ml-3 text-neutral-700 group-hover:text-primary-600 ltr:inline rtl:hidden dark:text-neutral dark:group-hover:text-primary-400"
|
||||
>→</span
|
||||
>
|
||||
<span
|
||||
class="mr-3 text-neutral-700 group-hover:text-primary-600 ltr:hidden rtl:inline dark:text-neutral dark:group-hover:text-primary-400"
|
||||
>←</span
|
||||
>
|
||||
</a>
|
||||
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</footer>
|
||||
</article>
|
||||
|
||||
|
||||
</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>
|
||||
10
exampleSite/docs/samples/page/1/index.html
Normal file
10
exampleSite/docs/samples/page/1/index.html
Normal file
@@ -0,0 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>https://nunocoracao.github.io/blowfish/samples/</title>
|
||||
<link rel="canonical" href="https://nunocoracao.github.io/blowfish/samples/">
|
||||
<meta name="robots" content="noindex">
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="refresh" content="0; url=https://nunocoracao.github.io/blowfish/samples/">
|
||||
</head>
|
||||
</html>
|
||||
756
exampleSite/docs/samples/rich-content/index.html
Normal file
756
exampleSite/docs/samples/rich-content/index.html
Normal file
@@ -0,0 +1,756 @@
|
||||
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html
|
||||
lang="en"
|
||||
dir="ltr"
|
||||
class="scroll-smooth"
|
||||
data-default-appearance="dark"
|
||||
data-auto-appearance="false"
|
||||
><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>Rich Content · Blowfish</title>
|
||||
<meta name="title" content="Rich Content · Blowfish" />
|
||||
|
||||
<meta name="description" content="Product | Nuno Coração" />
|
||||
|
||||
|
||||
|
||||
<link rel="canonical" href="https://nunocoracao.github.io/blowfish/samples/rich-content/" />
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<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>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<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>
|
||||
|
||||
<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="Rich Content" />
|
||||
<meta property="og:description" content="A brief description of Hugo Shortcodes" />
|
||||
<meta property="og:type" content="article" />
|
||||
<meta property="og:url" content="https://nunocoracao.github.io/blowfish/samples/rich-content/" /><meta property="article:section" content="samples" />
|
||||
<meta property="article:published_time" content="2019-03-10T00:00:00+00:00" />
|
||||
<meta property="article:modified_time" content="2019-03-10T00:00:00+00:00" /><meta property="og:site_name" content="Blowfish" />
|
||||
|
||||
|
||||
<meta name="twitter:card" content="summary"/>
|
||||
<meta name="twitter:title" content="Rich Content"/>
|
||||
<meta name="twitter:description" content="A brief description of Hugo Shortcodes"/>
|
||||
|
||||
|
||||
<script type="application/ld+json">
|
||||
[{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "Article",
|
||||
"articleSection": "Content Samples",
|
||||
"name": "Rich Content",
|
||||
"headline": "Rich Content",
|
||||
"description": "A brief description of Hugo Shortcodes",
|
||||
"abstract": "This is an \u003cem\u003eexample\u003c\/em\u003e of a \u003cstrong\u003erich\u003c\/strong\u003e content summary.",
|
||||
"inLanguage": "en",
|
||||
"url" : "https:\/\/nunocoracao.github.io\/blowfish\/samples\/rich-content\/",
|
||||
"author" : {
|
||||
"@type": "Person",
|
||||
"name": "Blowfish"
|
||||
},
|
||||
"copyrightYear": "2019",
|
||||
"dateCreated": "2019-03-10T00:00:00\u002b00:00",
|
||||
"datePublished": "2019-03-10T00:00:00\u002b00:00",
|
||||
|
||||
"dateModified": "2019-03-10T00:00:00\u002b00:00",
|
||||
|
||||
"keywords": ["shortcodes","privacy","sample","gist","twitter","youtube","vimeo"],
|
||||
|
||||
"mainEntityOfPage": "true",
|
||||
"wordCount": "145"
|
||||
}]
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<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">
|
||||
|
||||
|
||||
|
||||
<a href="https://github.com/nunocoracao/blowfish" class="text-base font-medium text-gray-500 hover:text-gray-900" title="">GitHub</a>
|
||||
|
||||
|
||||
|
||||
<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"
|
||||
href="https://github.com/nunocoracao/blowfish" title="">GitHub</a>
|
||||
</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"
|
||||
href="https://github.com/nunocoracao/blowfish" title="">GitHub</a>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<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="/blowfish/"
|
||||
>Blowfish</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="/blowfish/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="/blowfish/samples/rich-content/"
|
||||
>Rich Content</a
|
||||
><span class="px-1 text-primary-500">/</span>
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
|
||||
|
||||
<h1 class="mt-0 text-4xl font-extrabold text-neutral-900 dark:text-neutral">
|
||||
Rich Content
|
||||
</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-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>
|
||||
</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="#youtube">YouTube</a></li>
|
||||
<li><a href="#twitter">Twitter</a></li>
|
||||
<li><a href="#gist">Gist</a></li>
|
||||
<li><a href="#vimeo">Vimeo</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="min-w-0 min-h-0 max-w-prose">
|
||||
<p>Hugo ships with several <a href="https://gohugo.io/content-management/shortcodes/#use-hugos-built-in-shortcodes">built-in shortcodes</a> for rich content, along with a <a href="https://gohugo.io/about/hugo-and-gdpr/">privacy config</a> and a set of <em>simple shortcodes</em> that enable static and no-JS versions of various social media embeds.</p>
|
||||
<h2 id="youtube" class="relative group">YouTube <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#youtube" aria-label="Anchor">#</a></span></h2>
|
||||
<p>Below is an example using the built-in <code>youtube</code> shortcode.</p>
|
||||
|
||||
<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
|
||||
<iframe src="https://www.youtube.com/embed/ZJthWmvUzzc" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;" allowfullscreen title="YouTube Video"></iframe>
|
||||
</div>
|
||||
|
||||
<h2 id="twitter" class="relative group">Twitter <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#twitter" aria-label="Anchor">#</a></span></h2>
|
||||
<p>This example uses the <code>twitter_simple</code> shortcode to output a Tweet. It requires two named parameters <code>user</code> and <code>id</code>.</p>
|
||||
|
||||
<style type="text/css">
|
||||
.twitter-tweet {
|
||||
font: 14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
|
||||
border-left: 4px solid #2b7bb9;
|
||||
padding-left: 1.5em;
|
||||
color: #555;
|
||||
}
|
||||
.twitter-tweet a {
|
||||
color: #2b7bb9;
|
||||
text-decoration: none;
|
||||
}
|
||||
blockquote.twitter-tweet a:hover,
|
||||
blockquote.twitter-tweet a:focus {
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
||||
<blockquote class="twitter-tweet"><p lang="en" dir="ltr">“In addition to being more logical, asymmetry has the advantage that its complete appearance is far more optically effective than symmetry.”<br>— Jan Tschichold <a href="https://t.co/gcv7SrhvJb">pic.twitter.com/gcv7SrhvJb</a></p>— Graphic Design History (@DesignReviewed) <a href="https://twitter.com/DesignReviewed/status/1085870671291310081?ref_src=twsrc%5Etfw">January 17, 2019</a></blockquote>
|
||||
|
||||
<p>Alternatively, the <code>tweet</code> shortcode can be used to embed a fully marked up Twitter card.</p>
|
||||
<h2 id="gist" class="relative group">Gist <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#gist" aria-label="Anchor">#</a></span></h2>
|
||||
<p>The <code>gist</code> shortcode can be used to embed a GitHub Gist. It requires two unnamed parameters: the username and ID of the Gist.</p>
|
||||
<script type="application/javascript" src="https://gist.github.com/jpanther/a873e1219ffeaa80a926bbe8255f348e.js"></script>
|
||||
|
||||
<h2 id="vimeo" class="relative group">Vimeo <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#vimeo" aria-label="Anchor">#</a></span></h2>
|
||||
<p>The <code>vimeo_simple</code> shortcode will embed a Vimeo video.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<style>
|
||||
.__h_video {
|
||||
position: relative;
|
||||
padding-bottom: 56.23%;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
background: #000;
|
||||
}
|
||||
.__h_video img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
color: #000;
|
||||
}
|
||||
.__h_video .play {
|
||||
height: 72px;
|
||||
width: 72px;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
margin-left: -36px;
|
||||
margin-top: -36px;
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<div class="s_video_simple __h_video">
|
||||
<a href="https://vimeo.com/4.8912912e+07" rel="noopener" target="_blank">
|
||||
|
||||
|
||||
<img src="https://i.vimeocdn.com/video/337401969-979f0cc9f55fdf305fb8984e90d92639ec9d7ecc4c9dfbc6536e28edb43784ce-d_640" srcset="https://i.vimeocdn.com/video/337401969-979f0cc9f55fdf305fb8984e90d92639ec9d7ecc4c9dfbc6536e28edb43784ce-d_640 1x, https://i.vimeocdn.com/video/337401969-979f0cc9f55fdf305fb8984e90d92639ec9d7ecc4c9dfbc6536e28edb43784ce-d_640 2x" alt="Sing Jan Swing - Kinetic Type">
|
||||
<div class="play"><svg version="1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 61 61"><circle cx="30.5" cy="30.5" r="30.5" opacity=".8" fill="#000"></circle><path d="M25.3 19.2c-2.1-1.2-3.8-.2-3.8 2.2v18.1c0 2.4 1.7 3.4 3.8 2.2l16.6-9.1c2.1-1.2 2.1-3.2 0-4.4l-16.6-9z" fill="#fff"></path></svg></div></a></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="Blowfish"
|
||||
src="/blowfish/img/blowfish_logo_hu184ea2fa12490a2458ca388a16ab730e_227816_192x192_fill_box_smart1_3.png"
|
||||
/>
|
||||
|
||||
|
||||
<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">
|
||||
Blowfish
|
||||
</div>
|
||||
|
||||
|
||||
<div class="text-2xl sm:text-lg">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="flex flex-row flex-wrap justify-center pt-4 text-xl">
|
||||
|
||||
|
||||
<a
|
||||
class="m-1 inline-block min-w-[2.4rem] rounded bg-neutral-300 p-1 text-center text-neutral-700 hover:bg-primary-500 hover:text-neutral dark:bg-neutral-700 dark:text-neutral-300 dark:hover:bg-primary-400 dark:hover:text-neutral-800"
|
||||
href="https://www.linkedin.com/shareArticle?mini=true&url=https://nunocoracao.github.io/blowfish/samples/rich-content/&title=Rich%20Content"
|
||||
title="Share on LinkedIn"
|
||||
aria-label="Share on LinkedIn"
|
||||
>
|
||||
|
||||
<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="m-1 inline-block min-w-[2.4rem] rounded bg-neutral-300 p-1 text-center text-neutral-700 hover:bg-primary-500 hover:text-neutral dark:bg-neutral-700 dark:text-neutral-300 dark:hover:bg-primary-400 dark:hover:text-neutral-800"
|
||||
href="https://twitter.com/intent/tweet/?url=https://nunocoracao.github.io/blowfish/samples/rich-content/&text=Rich%20Content"
|
||||
title="Tweet on Twitter"
|
||||
aria-label="Tweet on Twitter"
|
||||
>
|
||||
|
||||
<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="m-1 inline-block min-w-[2.4rem] rounded bg-neutral-300 p-1 text-center text-neutral-700 hover:bg-primary-500 hover:text-neutral dark:bg-neutral-700 dark:text-neutral-300 dark:hover:bg-primary-400 dark:hover:text-neutral-800"
|
||||
href="https://pinterest.com/pin/create/bookmarklet/?url=https://nunocoracao.github.io/blowfish/samples/rich-content/&description=Rich%20Content"
|
||||
title="Pin on Pinterest"
|
||||
aria-label="Pin on Pinterest"
|
||||
>
|
||||
|
||||
<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="M496 256c0 137-111 248-248 248-25.6 0-50.2-3.9-73.4-11.1 10.1-16.5 25.2-43.5 30.8-65 3-11.6 15.4-59 15.4-59 8.1 15.4 31.7 28.5 56.8 28.5 74.8 0 128.7-68.8 128.7-154.3 0-81.9-66.9-143.2-152.9-143.2-107 0-163.9 71.8-163.9 150.1 0 36.4 19.4 81.7 50.3 96.1 4.7 2.2 7.2 1.2 8.3-3.3.8-3.4 5-20.3 6.9-28.1.6-2.5.3-4.7-1.7-7.1-10.1-12.5-18.3-35.3-18.3-56.6 0-54.7 41.4-107.6 112-107.6 60.9 0 103.6 41.5 103.6 100.9 0 67.1-33.9 113.6-78 113.6-24.3 0-42.6-20.1-36.7-44.8 7-29.5 20.5-61.3 20.5-82.6 0-19-10.2-34.9-31.4-34.9-24.9 0-44.9 25.7-44.9 60.2 0 22 7.4 36.8 7.4 36.8s-24.5 103.8-29 123.2c-5 21.4-3 51.6-.9 71.2C65.4 450.9 0 361.1 0 256 0 119 111 8 248 8s248 111 248 248z"/></svg>
|
||||
|
||||
</span>
|
||||
|
||||
</a
|
||||
>
|
||||
|
||||
|
||||
|
||||
<a
|
||||
class="m-1 inline-block min-w-[2.4rem] rounded bg-neutral-300 p-1 text-center text-neutral-700 hover:bg-primary-500 hover:text-neutral dark:bg-neutral-700 dark:text-neutral-300 dark:hover:bg-primary-400 dark:hover:text-neutral-800"
|
||||
href="https://reddit.com/submit/?url=https://nunocoracao.github.io/blowfish/samples/rich-content/&resubmit=true&title=Rich%20Content"
|
||||
title="Submit to Reddit"
|
||||
aria-label="Submit to Reddit"
|
||||
>
|
||||
|
||||
<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="M201.5 305.5c-13.8 0-24.9-11.1-24.9-24.6 0-13.8 11.1-24.9 24.9-24.9 13.6 0 24.6 11.1 24.6 24.9 0 13.6-11.1 24.6-24.6 24.6zM504 256c0 137-111 248-248 248S8 393 8 256 119 8 256 8s248 111 248 248zm-132.3-41.2c-9.4 0-17.7 3.9-23.8 10-22.4-15.5-52.6-25.5-86.1-26.6l17.4-78.3 55.4 12.5c0 13.6 11.1 24.6 24.6 24.6 13.8 0 24.9-11.3 24.9-24.9s-11.1-24.9-24.9-24.9c-9.7 0-18 5.8-22.1 13.8l-61.2-13.6c-3-.8-6.1 1.4-6.9 4.4l-19.1 86.4c-33.2 1.4-63.1 11.3-85.5 26.8-6.1-6.4-14.7-10.2-24.1-10.2-34.9 0-46.3 46.9-14.4 62.8-1.1 5-1.7 10.2-1.7 15.5 0 52.6 59.2 95.2 132 95.2 73.1 0 132.3-42.6 132.3-95.2 0-5.3-.6-10.8-1.9-15.8 31.3-16 19.8-62.5-14.9-62.5zM302.8 331c-18.2 18.2-76.1 17.9-93.6 0-2.2-2.2-6.1-2.2-8.3 0-2.5 2.5-2.5 6.4 0 8.6 22.8 22.8 87.3 22.8 110.2 0 2.5-2.2 2.5-6.1 0-8.6-2.2-2.2-6.1-2.2-8.3 0zm7.7-75c-13.6 0-24.6 11.1-24.6 24.9 0 13.6 11.1 24.6 24.6 24.6 13.8 0 24.9-11.1 24.9-24.6 0-13.8-11-24.9-24.9-24.9z"/></svg>
|
||||
|
||||
</span>
|
||||
|
||||
</a
|
||||
>
|
||||
|
||||
|
||||
|
||||
<a
|
||||
class="m-1 inline-block min-w-[2.4rem] rounded bg-neutral-300 p-1 text-center text-neutral-700 hover:bg-primary-500 hover:text-neutral dark:bg-neutral-700 dark:text-neutral-300 dark:hover:bg-primary-400 dark:hover:text-neutral-800"
|
||||
href="https://www.facebook.com/sharer/sharer.php?u=https://nunocoracao.github.io/blowfish/samples/rich-content/&quote=Rich%20Content"
|
||||
title="Share on Facebook"
|
||||
aria-label="Share on Facebook"
|
||||
>
|
||||
|
||||
<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="m-1 inline-block min-w-[2.4rem] rounded bg-neutral-300 p-1 text-center text-neutral-700 hover:bg-primary-500 hover:text-neutral dark:bg-neutral-700 dark:text-neutral-300 dark:hover:bg-primary-400 dark:hover:text-neutral-800"
|
||||
href="mailto:?body=https://nunocoracao.github.io/blowfish/samples/rich-content/&subject=Rich%20Content"
|
||||
title="Send via email"
|
||||
aria-label="Send via email"
|
||||
>
|
||||
|
||||
<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="M207.8 20.73c-93.45 18.32-168.7 93.66-187 187.1c-27.64 140.9 68.65 266.2 199.1 285.1c19.01 2.888 36.17-12.26 36.17-31.49l.0001-.6631c0-15.74-11.44-28.88-26.84-31.24c-84.35-12.98-149.2-86.13-149.2-174.2c0-102.9 88.61-185.5 193.4-175.4c91.54 8.869 158.6 91.25 158.6 183.2l0 16.16c0 22.09-17.94 40.05-40 40.05s-40.01-17.96-40.01-40.05v-120.1c0-8.847-7.161-16.02-16.01-16.02l-31.98 .0036c-7.299 0-13.2 4.992-15.12 11.68c-24.85-12.15-54.24-16.38-86.06-5.106c-38.75 13.73-68.12 48.91-73.72 89.64c-9.483 69.01 43.81 128 110.9 128c26.44 0 50.43-9.544 69.59-24.88c24 31.3 65.23 48.69 109.4 37.49C465.2 369.3 496 324.1 495.1 277.2V256.3C495.1 107.1 361.2-9.332 207.8 20.73zM239.1 304.3c-26.47 0-48-21.56-48-48.05s21.53-48.05 48-48.05s48 21.56 48 48.05S266.5 304.3 239.1 304.3z"/></svg>
|
||||
|
||||
</span>
|
||||
|
||||
</a
|
||||
>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<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="/blowfish/samples/mathematical-notation/">
|
||||
<span
|
||||
class="mr-3 text-neutral-700 group-hover:text-primary-600 ltr:inline rtl:hidden dark:text-neutral dark:group-hover:text-primary-400"
|
||||
>←</span
|
||||
>
|
||||
<span
|
||||
class="ml-3 text-neutral-700 group-hover:text-primary-600 ltr:hidden rtl:inline dark:text-neutral dark:group-hover:text-primary-400"
|
||||
>→</span
|
||||
>
|
||||
<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>
|
||||
</a>
|
||||
|
||||
</span>
|
||||
<span>
|
||||
|
||||
<a class="flex text-right group" href="/blowfish/samples/markdown/">
|
||||
<span class="flex flex-col">
|
||||
<span
|
||||
class="mt-[0.1rem] leading-6 group-hover:underline group-hover:decoration-primary-500"
|
||||
>Markdown</span
|
||||
>
|
||||
<span class="mt-[0.1rem] text-xs text-neutral-500 dark:text-neutral-400">
|
||||
|
||||
<time datetime="2019-03-11 00:00:00 +0000 UTC">11 March 2019</time>
|
||||
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
class="ml-3 text-neutral-700 group-hover:text-primary-600 ltr:inline rtl:hidden dark:text-neutral dark:group-hover:text-primary-400"
|
||||
>→</span
|
||||
>
|
||||
<span
|
||||
class="mr-3 text-neutral-700 group-hover:text-primary-600 ltr:hidden rtl:inline dark:text-neutral dark:group-hover:text-primary-400"
|
||||
>←</span
|
||||
>
|
||||
</a>
|
||||
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</footer>
|
||||
</article>
|
||||
|
||||
|
||||
</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>
|
||||
Reference in New Issue
Block a user