we do a little themingg s

index.yaml

@@ -2,3 +2,10 @@ page:
   siteTitle: gaze.systems
   siteName: gaze.systems
 
+template:
+  iconUrl: resources/GazeOfficeIcon.webp
+  theme: purple
+  urlStrategy: pretty
+  layout:
+    base:
+      bodyClass: bg-black

notes/exporting ssh key from gpg.md

@@ -1,3 +1,7 @@
+---
+tags: [gpg,ssh]
+---
+
 - gpg --export-secret-ssh-key doesn't work
 - gpg --export-ssh-key works to export public key
 
@@ -6,3 +10,4 @@
 - to export secret ssh key first remove password from your [A]uthentication subkey
 	- you can do this with `gpg --edit-key KEYID` and then `passwd` and `save`
 - then do `gpg --export-secret-subkeys KEYID! | openpgp2ssh KEYID > ssh_key`
+

posts/2021-05-16_Hello world!.md

@@ -1 +1,3 @@
 First!
+
+- [ ] actually write something proper

templates/components/footer.tpl

@@ -0,0 +1,41 @@
+<footer class="flex items-center justify-center mt-2 mb-8 space-x-4 text-center text-gray-400">
+  <bind tag="iconClass">w-6 h-6 hover:text-${theme}-700</bind>
+  <div>
+    <a href="${ema:homeUrl}" title="Go to Home page">
+      <svg xmlns="http://www.w3.org/2000/svg" class="${iconClass}" fill="none" viewBox="0 0 24 24"
+        stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+          d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
+      </svg>
+    </a>
+  </div>
+  <div>
+    <a href="${ema:indexUrl}" title="View Index">
+      <svg class="${iconClass}" fill="none" stroke="currentColor" viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+          d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4">
+        </path>
+      </svg>
+    </a>
+  </div>
+  <div>
+    <a href="${ema:tagIndexUrl}" title="View tags">
+      <svg class="${iconClass}" fill="none" stroke="currentColor" viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+          d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z">
+        </path>
+      </svg>
+    </a>
+  </div>
+  <div>
+    <a href="${ema:taskIndexUrl}" title="View tasks">
+      <svg xmlns="http://www.w3.org/2000/svg" class="${iconClass}" fill="none" viewBox="0 0 24 24"
+        stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+          d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+      </svg>
+    </a>
+  </div>
+</footer>

templates/components/note-title.tpl

@@ -0,0 +1,6 @@
+<h1
+  class="flex items-end justify-center mb-4 p-3 bg-${theme}-900 text-5xl font-extrabold text-black rounded">
+  <a class="z-40 tracking-tighter ">
+    <ema:note:title />
+  </a>
+</h1>

templates/components/pandoc.tpl

@@ -0,0 +1,107 @@
+<ema:note:pandoc>
+  <Para>
+    <p class="mb-3">
+      <inlines />
+    </p>
+  </Para>
+  <Task:Checked>
+    <!-- FIXME: Fix list styling to use flexbox, so task lists don't botch them up -->
+    <apply template="/templates/components/checkbox-checked">
+      <inlines />
+    </apply>
+  </Task:Checked>
+  <Task:Unchecked>
+    <apply template="/templates/components/checkbox-unchecked">
+      <inlines />
+    </apply>
+  </Task:Unchecked>
+  <Cite>
+    <cite>
+      <inlines />
+    </cite>
+  </Cite>
+  <BlockQuote>
+    <blockquote
+      class="py-0.5 px-4 mb-3 italic border-l-4 bg-gray-50 text-gray-600 border-gray-400 quote">
+      <blocks />
+    </blockquote>
+  </BlockQuote>
+  <DefinitionList>
+    <dl class="flex flex-col mb-3">
+      <DefinitionList:Items>
+        <div class="my-1">
+          <dt class="font-bold text-l">
+            <DefinitionList:Item:Term />
+          </dt>
+          <DefinitionList:Item:DescList>
+            <div class="flex flex-col pl-1">
+              <dd class="pl-2 my-1 text-gray-700 border-l-2">
+                <DefinitionList:Item:Desc />
+              </dd>
+            </div>
+          </DefinitionList:Item:DescList>
+        </div>
+      </DefinitionList:Items>
+    </dl>
+  </DefinitionList>
+  <Note:Ref>
+    <!-- DoNotFormat -->
+    <!-- We use JavaScript because anchor links won't work if there is a <base> tag;
+         see https://stackoverflow.com/a/34765348 
+    -->
+    <sup class="px-0.5"><a class="text-${theme}-600 hover:underline" href="javascript:;" onclick="document.location.hash='#fn${footnote:idx}';"><footnote:idx /></a></sup>
+    <!-- DoNotFormat -->
+  </Note:Ref>
+  <Note:List>
+    <div title="Footnotes"
+      class="pt-2 mt-8 space-y-1 text-gray-500 transform scale-x-90 border-t-2">
+      <header class="font-semibold">Footnotes</header>
+      <footnote>
+        <div id="fn${footnote:idx}">
+          <header class="italic">
+            <footnote:idx />.
+          </header>
+          <div class="inline-block mb-2 ml-4">
+            <footnote:content />
+          </div>
+        </div>
+      </footnote>
+    </div>
+  </Note:List>
+
+  <BulletList>
+    <ul class="my-3 ml-6 space-y-1 list-disc">
+      <BulletList:Items>
+        <li>
+          <BulletList:Item />
+        </li>
+      </BulletList:Items>
+    </ul>
+  </BulletList>
+  <OrderedList>
+    <ul class="my-3 ml-6 space-y-1 list-decimal list-inside">
+      <OrderedList:Items>
+        <li>
+          <OrderedList:Item />
+        </li>
+      </OrderedList:Items>
+    </ul>
+  </OrderedList>
+
+  <!-- TODO: Expand the above kind of overriding (full DOM control) to other AST nodes (below) -->
+  <PandocLink class="text-${theme}-600">
+    <Internal class="mavenLinkBold hover:underline" />
+    <External class="hover:underline" target="_blank" rel="noopener" />
+  </PandocLink>
+  <CodeBlock class="py-0.5 mb-3 text-sm" />
+  <Code class="py-0.5 px-1 rounded bg-gray-800 text-sm text-white" />
+  <Header>
+    <h1 class="pb-2 mb-2 text-5xl font-bold text-center" />
+    <h2 class="inline-block mt-6 mb-4 text-4xl font-bold border-b-2 text-gray-100" />
+    <h3 class="mt-6 mb-2 text-3xl font-bold text-gray-100" />
+    <h4 class="mt-6 mb-2 text-2xl font-bold text-gray-100" />
+    <h5 class="mt-6 mb-2 text-xl font-bold text-gray-100" />
+    <h6 class="mt-6 mb-2 text-xl font-bold text-gray-100" />
+  </Header>
+
+</ema:note:pandoc>

templates/components/sidebar-tree.tpl

@@ -0,0 +1,80 @@
+<!-- Variable bindings for this tree-->
+<node:active>
+  <bind tag="link-class">font-bold text-${theme}-600 hover:underline</bind>
+  <else />
+  <tree:open>
+    <has-children>
+      <bind tag="link-class">font-bold hover:underline</bind>
+      <else />
+      <bind tag="link-class">hover:underline</bind>
+    </has-children>
+    <else />
+    <bind tag="link-class">hover:underline</bind>
+  </tree:open>
+</node:active>
+
+<has-children>
+  <bind tag="icon">
+    <tree:open>
+      <svg xmlns="http://www.w3.org/2000/svg" class="${iconSize} inline text-gray-300"
+        viewBox="0 0 20 20" fill="currentColor">
+        <path fill-rule="evenodd"
+          d="M2 6a2 2 0 012-2h4l2 2h4a2 2 0 012 2v1H8a3 3 0 00-3 3v1.5a1.5 1.5 0 01-3 0V6z"
+          clip-rule="evenodd" />
+        <path d="M6 12a2 2 0 012-2h8a2 2 0 012 2v2a2 2 0 01-2 2H2h2a2 2 0 002-2v-2z" />
+      </svg>
+      <else />
+      <svg xmlns="http://www.w3.org/2000/svg" class="${iconSize} inline text-gray-500"
+        viewBox="0 0 20 20" fill="currentColor">
+        <path d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" />
+      </svg>
+    </tree:open>
+  </bind>
+  <else />
+  <bind tag="icon">
+    <node:active>
+      <svg class="${iconSize} inline" fill="none" stroke="currentColor" viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+          d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z">
+        </path>
+      </svg>
+      <else />
+      <svg class="${iconSize} inline" fill="none" stroke="currentColor" viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+          d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z">
+        </path>
+      </svg>
+    </node:active>
+  </bind>
+</has-children>
+
+<!-- Rendering of this tree -->
+<div class="pl-2">
+  <!-- Node's rootLabel-->
+  <div class="flex items-center my-2 space-x-2 justify-left">
+    <icon />
+    <a class="${link-class} truncate" title="${node:text}" href="${node:url}">
+      <node:text />
+    </a>
+    <tree:open>
+      <else />
+      <node:terminal>
+        <else />
+        <span class="text-gray-300" title="${tree:childrenCount} children inside">
+          <tree:childrenCount />
+        </span>
+      </node:terminal>
+    </tree:open>
+  </div>
+
+  <!-- Node's children forest, displayed only on active trees
+    TODO: Use <details> to toggle visibility?
+  -->
+  <tree:open>
+    <children>
+      <apply template="sidebar-tree" />
+    </children>
+  </tree:open>
+</div>

templates/layouts/book.tpl

@@ -0,0 +1,78 @@
+<apply template="base">
+  <bind tag="body-main">
+    <div class="container mx-auto">
+
+      <apply template="components/breadcrumbs" />
+
+      <div id="container"
+        class="flex flex-nowrap flex-col md:flex-row bg-black md:mt-8 md:shadow-2xl md:mb-8">
+        <!-- Sidebar column -->
+        <nav id="sidebar"
+          class="flex-shrink hidden leading-relaxed md:block md:sticky md:top-0 md:h-full md:w-48 xl:w-64">
+          <div class="px-2 py-2 text-gray-100">
+
+            <div id="indexing-links" class="flex flex-row float-right p-2 space-x-2 text-gray-400">
+              <a href="${ema:tagIndexUrl}" title="View tags">
+                <svg style="width: 1rem;" class="hover:text-${theme}-700" fill="none"
+                  stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                    d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z">
+                  </path>
+                </svg>
+              </a>
+              <a href="${ema:indexUrl}" title="Expand full tree">
+                <svg style="width: 1rem;" class="hover:text-${theme}-700" fill="none"
+                  stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                    d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4">
+                  </path>
+                </svg>
+              </a>
+            </div>
+
+            <div id="site-logo" class="pl-2">
+              <div class="flex items-center my-2 space-x-2 justify-left">
+                <a href="${ema:homeUrl}" title="Go to Home">
+                  <ema:metadata>
+                    <with var="template">
+                      <!-- The style width attribute here is to prevent huge
+                      icon from displaying at those rare occasions when Tailwind
+                      hasn't kicked in immediately on page load 
+                      -->
+                      <img style="width: 1rem;"
+                        class="transition transform hover:scale-110 hover:opacity-80"
+                        src="${value:iconUrl}" />
+                    </with>
+                  </ema:metadata>
+                </a>
+                <a class="font-bold truncate" title="Go to Home" href="${ema:homeUrl}">
+                  Home
+                </a>
+              </div>
+            </div>
+
+            <ema:route-tree>
+              <apply template="components/sidebar-tree" />
+            </ema:route-tree>
+
+          </div>
+        </nav>
+
+        <!-- Main body column -->
+        <div class="flex-1 w-full overflow-x-auto bg-black">
+          <main class="px-4 py-4 text-gray-100">
+            <apply template="components/note-title" />
+            <apply template="components/note-body" />
+            <div class="flex flex-col lg:flex-row lg:space-x-2">
+              <apply template="components/timeline" />
+              <apply template="components/backlinks" />
+            </div>
+            <apply template="components/metadata" />
+            <apply template="/templates/hooks/note-end" />
+          </main>
+        </div>
+      </div>
+      <apply template="components/footer" />
+    </div>
+  </bind>
+</apply>

templates/special/base.tpl

@@ -0,0 +1,15 @@
+<apply template="/templates/base">
+  <bind tag="body-main">
+    <div class="container mx-auto ">
+      <main class="flex-col items-center justify-center mx-2 text-gray-200">
+        <h1 class="pb-2 mt-2 mb-2 text-6xl text-center">
+          <ema:title />
+        </h1>
+        <div class="pb-2 mx-auto my-4 lg:max-w-screen-md ">
+          <special-main />
+        </div>
+      </main>
+      <apply template="components/footer" />
+    </div>
+  </bind>
+</apply>

templates/special/index.tpl

@@ -0,0 +1,9 @@
+<apply template="/templates/special/base">
+  <bind tag="special-main">
+    <div class="pt-1 pb-2 pl-4 bg-black text-gray-100">
+      <ema:route-tree>
+        <apply template="components/sidebar-tree" />
+      </ema:route-tree>
+    </div>
+  </bind>
+</apply>

templates/special/tagindex.tpl

@@ -0,0 +1,75 @@
+<apply template="/templates/special/base">
+  <bind tag="special-main">
+    <div class="bg-black pb-2">
+      <nav id="tagcrumbs" class="w-full pl-2 bg-gray-800 rounded">
+        <div class="flex items-center justify-left">
+          <div class="w-full px-2 py-2 ">
+            <ul class="flex flex-wrap text-lg">
+              <ema:tagcrumbs>
+                <ema:each-crumb>
+                  <li class="inline-flex items-center">
+                    <a class="px-1 font-mono font-semibold text-${theme}-600 "
+                      href="${ema:tagcrumb:url}">
+                      <ema:tagcrumb:title />
+                    </a>
+                    <svg fill="currentColor" viewBox="0 0 20 20" class="w-auto h-5 text-gray-400">
+                      <path fill-rule="evenodd"
+                        d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+                        clip-rule="evenodd"></path>
+                    </svg>
+                  </li>
+                </ema:each-crumb>
+              </ema:tagcrumbs>
+              <li class="inline-flex items-center text-gray-100">
+                <a class="px-1 font-mono">
+                  <ema:tag:title />
+                </a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </nav>
+      <div class="flex flex-col pl-2 my-4 ml-2 space-y-2">
+        <ema:childTags>
+          <ema:each-childTag>
+            <div>
+              <svg class="${iconSize} inline text-gray-100" fill="none" stroke="currentColor" viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                  d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z">
+                </path>
+              </svg>
+              <span class="">
+                <a href="${ema:childTag:url}" class="font-mono font-bold hover:text-${theme}-700 text-gray-200">
+                  <ema:childTag:title />
+                </a>
+                <span class="font-mono text-sm text-gray-300">
+                  <!-- DoNotFormat -->
+                      (<ema:childTag:count-tag />+<ema:childTag:count-note />)
+                      <!-- DoNotFormat -->
+                </span>
+              </span>
+            </div>
+          </ema:each-childTag>
+        </ema:childTags>
+        <ema:notes>
+          <ema:each-note>
+            <div>
+              <svg class="${iconSize} inline text-gray-100" fill="none" stroke="currentColor" viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                  d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z">
+                </path>
+              </svg>
+
+              <!-- TODO: DRY -->
+              <a class="text-${theme}-600 hover:underline truncate" href="${ema:note:url}">
+                <ema:note:title />
+              </a>
+            </div>
+          </ema:each-note>
+        </ema:notes>
+      </div>
+    </div>
+  </bind>
+</apply>

templates/special/tasks.tpl

@@ -0,0 +1,51 @@
+<apply template="/templates/special/base">
+  <bind tag="special-main">
+    <div class="w-full bg-black">
+      <div class="w-full px-3 py-1">
+        <ema:taskGroups>
+          <taskGroup>
+            <section class="mt-4 mb-6">
+              <div class="mt-1 mb-2 py-0.5 px-1 rounded flex flex-row-reverse">
+                <t:note:breadcrumbs>
+                  <each-crumb>
+                    <li class="inline-flex items-center">
+                      <a class="text-gray-100 opacity-50 hover:opacity-100" href="${crumb:url}">
+                        <crumb:title />
+                      </a>
+                      <span class="text-gray-100 px-2">\</span>
+                    </li>
+                  </each-crumb>
+                </t:note:breadcrumbs>
+
+                <div class="flex-1">
+                  <a class="font-bold text-${theme}-700  hover:underline" href="${t:note:url}">
+                    <t:note:title />
+                  </a>
+                </div>
+              </div>
+              <div class="">
+                <t:tasks>
+                  <task>
+                    <div
+                      class="bg-gray-800 py-1.5 px-2 my-1 rounded shadow border-2 border-gray-600 hover:border-${theme}-600">
+                      <apply template="/templates/components/checkbox-unchecked">
+                        <task:description>
+                          <PandocLink class="text-gray-300">
+                            <Internal class="font-bold hover:bg-gray-50" />
+                            <External class="hover:underline" target="_blank" rel="noopener" />
+                          </PandocLink>
+                          <OrderedList class="ml-4 space-y-1 list-decimal list-inside" />
+                          <BulletList class="ml-4 space-y-1 list-decimal list-inside" />
+                        </task:description>
+                      </apply>
+                    </div>
+                  </task>
+                </t:tasks>
+              </div>
+            </section>
+          </taskGroup>
+        </ema:taskGroups>
+      </div>
+    </div>
+  </bind>
+</apply>