src/views/main.html
<!doctype html>
<html lang="en">
<head>
<!--
┐ │ ┬─┐ ┬─┐┌─┐
┌┼┘─├─ │┬┘│ │
┆ └ ┴─┘o┆└┘┘─┘
┬─┐x┐ │┬─┐┬ ┌─┐┬─┐┬─┐┬─┐┬─┐
│─┘│┌┼┘├─ │ │ ┬│┬┘│─┤├─ ├─
┆ ┆┆ └┴─┘┆─┘┆─┘┆└┘┘ ┆┆ ┆
-->
<title>{{&description}}</title>
<meta charset="UTF-8">
<meta name="author" content="xero harrison">
<meta name="description" content="{{&description}}">
<meta name="keywords" content="blog, programming, code, art, ascii, pixel, text art, ansi, lab, notes, graffiti, neovim, vim, linux, unix, edc, graffiti, nerd, bun.sh, htmx, tailwindcss, xero, x-e.ro, xxe.ro, 0w.nz, xero.style">
<meta name="theme-color" content="#222222">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="{{&domain}}/ui/ico/favicon.ico">
<meta property="og:image" content="https://x-e.ro/ui/img/xero-graff-alt.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="{{&domain}}/ui/ico/icon-144.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="{{&domain}}/ui/ico/icon-114.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="{{&domain}}/ui/ico/icon-72.png">
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="{{&domain}}/ui/ico/icon-57.png">
<link rel="apple-touch-icon-precomposed" sizes="16x16" href="{{&domain}}/ui/ico/icon-16.png">
<link rel="stylesheet" type="text/css" href="{{&domain}}/ui/css/pixelgraff.css?{{&ripcache}}">
<script src="{{&domain}}/ui/js/htmx.js"></script>
<meta name="htmx-config" content='{"selfRequestsOnly":"true"}'>
</head>
<body>
<header>
<nav>
<section id="logo"><a href="{{&domain}}"></a></section>
<section id="menu">
<i class="nf nf-md-menu_open" hx-on:click="htmx.toggleClass(htmx.find('#linx'), 'shown')"></i>
</section>
<ul id="linx">
<li><a href="https://whois.x-e.ro"><i class="nf nf-fa-user"></i><b>whois</b></a></li>
<li class="selected"><a href="https://blog.x-e.ro"><i class="nf nf-fa-book"></i><b>blog</b></a></li>
<li><a href="https://code.x-e.ro"><i class="nf nf-fa-code"></i><b>code</b></a></li>
<li><a href="https://xero.style"><i class="nf nf-fa-camera"></i><b>vids</b></a></li>
<li><a href="https://lab.x-e.ro"><i class="nf nf-fa-flask"></i><b>lab</b></a></li>
<li><a href="https://fonts.xero.style"><i class="nf nf-seti-font"></i><b>fonts</b></a></li>
<li><a href="https://etc.x-e.ro"><i class="nf nf-fa-bolt"></i><b>etc</b></a></li>
</ul>
</nav>
</header>
<main id="main" hx-boost="true" hx-push-url="true" hx-target="#content" hx-indicator="#loading">
<section id="content">
{{&content}}
</section>
<aside>
{{&sidebar}}
</aside>
</main>
<section id="loading" class="htmx-indicator" hx-on:click="htmx.toggleClass(htmx.find('#loading'), 'shown')">
<img src="{{&domain}}/ui/img/metroid-super.gif" alt="loading..." title="loading..." />
<h1>loading...</h1>
</section>
<footer>
<section id="cc"><a href="https://creativecommons.org/licenses/by-sa/4.0/"
title="creative commons - CC-BY-SA-4.0 attribution-shareAlike">
<i class="nf nf-fae-cc_cc"></i></a>
{{&footer}}
<img src="{{&domain}}/ui/img/metroid-larva.gif" id="metroid-larva" alt="metroid-larva">
<img src="{{&domain}}/ui/img/metroid.gif" id="metroid" alt="metroid">
<!--
.___.
/ @ \
\ @ @ /
{'^'}
-->
</section>
<nav>
<ul>
<li><a id="git" class="nf nf-md-git" href="https://github.com/xero/hypermedia-blog" target="_blank"></a></li>
<li><a id="rss" class="nf nf-fa-rss" href="https://feeds.x-e.ro"></a></li>
</ul>
</nav>
</footer>
</body>
</html>
