all: embed CSS and index HTML template using memfs

Previously, with direct embed, every time we change the CSS or index
template, we need to restart the "ciigo serve" command.

Using memfs make us easy to update and see the changes directly, without
restarting the server.

2 files changed, 305 insertions, 0 deletions

diff --git a/_static/ciigo.css b/_static/ciigo.css
new file mode 100644
index 0000000..27cb0fd
--- /dev/null
+++ b/_static/ciigo.css
@@ -0,0 +1,256 @@
+/* SPDX-License-Identifier: GPL-3.0-or-later */
+/* SPDX-FileCopyrightText: 2020 Shulhan <ms@kilabit.info> */
+
+body {
+  margin: 0;
+  font-family: Go, Arial, sans-serif;
+  background-color: #fff;
+  line-height: 1.3;
+  text-align: center;
+  color: #222;
+}
+pre,
+code {
+  font-family: "Go Mono", Menlo, monospace;
+  font-size: 0.875rem;
+}
+pre {
+  line-height: 1.4;
+  overflow-x: auto;
+  background: #efefef;
+  padding: 0.625rem;
+  border-radius: 0.3125rem;
+}
+a {
+  color: #007d9c;
+}
+
+p,
+li {
+  max-width: 50rem;
+  word-wrap: break-word;
+}
+li p {
+  margin: 2px;
+}
+p,
+pre,
+ul,
+ol {
+  margin: 1.25rem;
+}
+
+h1,
+h2,
+h3,
+h4 {
+  margin: 1.25rem 0 1.25rem;
+  padding: 0;
+  color: #007d9c;
+  font-weight: bold;
+}
+h1 {
+  font-size: 1.75rem;
+  line-height: 1;
+}
+h1 .text-muted {
+  color: #777;
+}
+h2 {
+  clear: right;
+  font-size: 1.25rem;
+  background: #e0ebf5;
+  padding: 0.5rem;
+  line-height: 1.25;
+  font-weight: normal;
+  overflow: auto;
+  overflow-wrap: break-word;
+}
+h2 a {
+  font-weight: bold;
+}
+h3 {
+  font-size: 1.25rem;
+  line-height: 1.25;
+  overflow: auto;
+  overflow-wrap: break-word;
+}
+h3,
+h4 {
+  margin: 1.25rem 0.3125rem;
+}
+h4 {
+  font-size: 1rem;
+}
+
+h2 > span,
+h3 > span {
+  float: right;
+  margin: 0 25px 0 0;
+  font-weight: normal;
+  color: #5279c7;
+}
+
+dl {
+  margin: 1.25rem;
+}
+dt {
+  font-weight: bold;
+}
+dd {
+  margin: 0 0 0 1.25rem;
+}
+
+/*---- Admonition block */
+
+.admonitionblock > table {
+  border-collapse: separate;
+  border: 0;
+  background: none;
+  width: 100%;
+}
+.admonitionblock > table td.icon {
+  text-align: center;
+  width: 120px;
+}
+.admonitionblock > table td.icon img {
+  max-width: none;
+}
+.admonitionblock > table td.icon .title {
+  font-weight: bold;
+  font-family: "Go", "Open Sans", "DejaVu Sans", sans-serif;
+  text-transform: uppercase;
+}
+.admonitionblock > table td.content {
+  padding-left: 1.125em;
+  padding-right: 1.25em;
+  border-left: 1px solid #dddddf;
+  word-wrap: anywhere;
+}
+.admonitionblock > table td.content > :last-child > :last-child {
+  margin-bottom: 0;
+}
+.admonitionblock.note td.icon {
+  background-color: whitesmoke;
+}
+.admonitionblock.tip td.icon {
+  background-color: azure;
+}
+.admonitionblock.important td.icon {
+  background-color: honeydew;
+}
+.admonitionblock.caution td.icon {
+  background-color: lavenderbush;
+}
+.admonitionblock.warning td.icon {
+  background-color: mistyrose;
+}
+
+/* Topbar */
+
+.topbar {
+  background: #e0ebf5;
+  height: 4rem;
+  overflow: hidden;
+}
+
+.topbar .top-heading,
+.topbar .menu {
+  padding: 1.313rem 0;
+  font-size: 1.25rem;
+  font-weight: normal;
+}
+.topbar .top-heading {
+  float: left;
+}
+.topbar .top-heading a {
+  color: #222;
+  text-decoration: none;
+}
+
+.top-heading .header-logo {
+  height: 2rem;
+  width: 5.125rem;
+}
+
+.topbar .menu {
+  float: right;
+}
+.topbar .menu a {
+  margin: 0.625rem 0.125rem;
+  padding: 0.625rem;
+  color: white;
+  background: #007d9c;
+  border: 0.0625rem solid #007d9c;
+  border-radius: 5px;
+}
+.topbar .menu form {
+  display: inline-block;
+}
+
+/* Page */
+
+.page {
+  width: 100%;
+}
+
+.page > .container,
+.topbar > .container,
+.footer > .container {
+  margin-left: auto;
+  margin-right: auto;
+  padding: 0 1.25rem;
+  max-width: 59.38rem;
+}
+
+.page > .container {
+  text-align: left;
+}
+
+.container .meta {
+  font-style: italic;
+  margin: 1.25rem;
+}
+
+.footer {
+  text-align: center;
+  color: #666;
+  font-size: 0.875rem;
+  margin: 2.5rem 0;
+}
+
+.ulist li .paragraph {
+  margin-bottom: 1em;
+}
+
+.ulist li .paragraph {
+  margin-bottom: 1em;
+}
+
+/* TOC  */
+
+#toc a {
+  text-decoration: none;
+}
+#toctitle {
+  display: none;
+}
+#toc li {
+  list-style: none;
+}
+#toc ul .sectlevel1 {
+  padding: 0px;
+}
+#toc ul .sectlevel1,
+#toc ul .sectlevel2,
+#toc ul .sectlevel3,
+#toc ul .sectlevel4,
+#toc ul .sectlevel5 {
+  margin: 4px;
+}
+
+@media screen and (max-width: 992px) {
+  #toc {
+    all: unset;
+  }
+}
diff --git a/_static/index.gohtml b/_static/index.gohtml
new file mode 100644
index 0000000..decb66c
--- /dev/null
+++ b/_static/index.gohtml
@@ -0,0 +1,49 @@
+<!-- SPDX-License-Identifier: GPL-3.0-or-later -->
+<!-- SPDX-FileCopyrightText: 2020 Shulhan <ms@kilabit.info> -->
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="theme-color" content="#375EAB">
+{{- range $k, $v := .Metadata}}
+    <meta name="{{$k}}" content="{{$v}}">
+{{- end}}
+    <title>{{.Title}}</title>
+{{- if ne .EmbeddedCSS ""}}
+    <style>
+    {{.EmbeddedCSS}}
+    </style>
+{{- end}}
+{{- range .Styles}}
+    <link rel="stylesheet" href="{{.}}">
+{{- end}}
+  </head>
+  <body>
+    <div class="topbar">
+      <div class="container">
+        <div class="top-heading">
+          <a href="/">{{.Title}}</a>
+        </div>
+        <div class="menu">
+          <form class="item" action="/_internal/search">
+            <input type="text" name="q" placeholder="Search" />
+          </form>
+        </div>
+      </div>
+    </div>
+    <div class="page">
+      <div class="container">
+{{.Body}}
+      </div>
+    </div>
+    <div class="footer">
+      Powered by <a
+        href="https://git.sr.ht/~shulhan/ciigo"
+      >
+        ciigo
+      </a>
+    </div>
+  </body>
+</html>
+<!-- vim: set filetype=angular: -->