hypermedia blog

static site generator

hypermedia blog

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 id="blog">
	<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>

Download

raw zip tar