about summary refs log tree commit diff stats
path: root/templates
diff options
context:
space:
mode:
authorAlan Pearce2023-09-22 08:40:59 +0200
committerAlan Pearce2023-09-22 12:03:47 +0200
commit3a2d198d153efc8a69e7640f7dcde88207268ff3 (patch)
tree7cec49484a6fbbf96121ff396afe1fd0425c4654 /templates
parent9c4fd37c97a87b9d1ab9e65b77e4578936b66323 (diff)
downloadwebsite-3a2d198d153efc8a69e7640f7dcde88207268ff3.tar.lz
website-3a2d198d153efc8a69e7640f7dcde88207268ff3.tar.zst
website-3a2d198d153efc8a69e7640f7dcde88207268ff3.zip
Replace zola with DOM-based static site generation code
Diffstat (limited to 'templates')
-rw-r--r--templates/404.html37
-rw-r--r--templates/feed-styles.xsl (renamed from templates/feed-styles.html)4
-rw-r--r--templates/feed.xml24
-rw-r--r--templates/footer.html1
-rw-r--r--templates/index.html99
-rw-r--r--templates/post.html50
-rw-r--r--templates/style.css196
-rw-r--r--templates/tag.html49
-rw-r--r--templates/tags.html40
9 files changed, 459 insertions, 41 deletions
diff --git a/templates/404.html b/templates/404.html
new file mode 100644
index 0000000..4e64fcc
--- /dev/null
+++ b/templates/404.html
@@ -0,0 +1,37 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Site Title</title>
+    <meta name="referrer" content="no-referrer-when-downgrade" />
+    <link
+      rel="alternate"
+      type="application/atom+xml"
+      title=""
+      href="/atom.xml"
+    />
+    <style></style>
+  </head>
+  <body>
+    <a class="skip" href="#main">Skip to main content</a>
+    <header>
+      <h2>
+        <a href="/" class="title">Site title</a>
+      </h2>
+      <nav>
+        <a href="/">Home</a>
+      </nav>
+    </header>
+    <main id="main">
+      <h1>404</h1>
+      <h2>ʕノ•ᴥ•ʔノ ︵ ┻━┻</h2>
+    </main>
+    <footer>
+      Licensed under a
+      <a rel="license" href="http://creativecommons.org/licenses/by/4.0/"
+        >Creative Commons Attribution 4.0 International License</a
+      >.
+    </footer>
+  </body>
+</html>
diff --git a/templates/feed-styles.html b/templates/feed-styles.xsl
index a66ddc0..0197e87 100644
--- a/templates/feed-styles.html
+++ b/templates/feed-styles.xsl
@@ -12,9 +12,7 @@
         <meta charset="utf-8" />
         <meta http-equiv="content-type" content="text/html; charset=utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <style>
-          {%- include "style.css.html" ignore missing -%}
-        </style>
+        <style></style>
       </head>
       <body>
         <main>
diff --git a/templates/feed.xml b/templates/feed.xml
new file mode 100644
index 0000000..ddc90dd
--- /dev/null
+++ b/templates/feed.xml
@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="utf-8"?>
+<?xml-stylesheet href="/feed-styles.xsl" type="text/xsl"?>
+<feed xmlns="http://www.w3.org/2005/Atom">
+  <title>Example Feed</title>
+  <link href="http://example.org/"></link>
+  <id>urn:uuid:60a76c80-d399-11d9-b91C-0003939e0af6</id>
+  <updated>2003-12-13T18:30:02Z</updated>
+  <entry>
+    <title>Atom-Powered Robots Run Amok</title>
+    <link rel="alternate" type="text/html" href="http://example.org/2003/12/13/atom03.html"></link>
+    <id>urn:uuid:1225c695-cfb8-4ebb-aaaa-80da344efa6a</id>
+    <updated>2003-12-13T18:30:02Z</updated>
+    <summary>Some text.</summary>
+    <content type="html">
+      <div>
+        <p>This is the entry content.</p>
+      </div>
+    </content>
+    <author>
+      <name>John Doe</name> 
+    </author>
+  </entry>
+
+</feed>
diff --git a/templates/footer.html b/templates/footer.html
deleted file mode 100644
index 422c90c..0000000
--- a/templates/footer.html
+++ /dev/null
@@ -1 +0,0 @@
-<footer>Licensed under a <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License</a>.</footer>
diff --git a/templates/index.html b/templates/index.html
index a79b1c8..b4832a9 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,39 +1,64 @@
-{% extends "base.html" %}
-
-{% block body_attrs %} class="h-card vcard"{% endblock %}
-
-{% block title_class %} p-name fn{% endblock %}
-
-{% block main -%}
-  <main id="content">
-    <div>
-      {{ section.content | safe -}}
-    </div>
-    <section>
-      <h2>Latest Posts</h2>
-      <ul class="h-feed">
-        {%- set section = get_section(path="post/_index.md") %}
-        {%- for page in section.pages | slice(end=3) %}
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Site Title</title>
+    <meta name="referrer" content="no-referrer-when-downgrade" />
+    <link
+      rel="alternate"
+      type="application/atom+xml"
+      title=""
+      href="/atom.xml"
+    />
+    <style></style>
+  </head>
+  <body>
+    <a class="skip" href="#main">Skip to main content</a>
+    <header>
+      <h2>
+        <a href="/" class="title">Site title</a>
+      </h2>
+      <nav>
+        <a href="/">Home</a>
+      </nav>
+    </header>
+    <main id="main">
+      <div id="content"></div>
+      <section>
+        <h2>Latest Posts</h2>
+        <ul class="h-feed">
           <li class="h-entry">
-            <time class="dt-published" datetime="{{ page.date | date(format="%+") }}">{{ page.date | date(format=config.extra.date_format) }}</time>
-            <a class="u-url p-name" href="{{ page.path | safe }}">{{ page.title }}</a>
+            <span>
+              <time
+                class="dt-published"
+                datetime="2000-12-31T12:33:02+02:00"
+                pubdate
+              >
+                2000-12-31
+              </time>
+            </span>
+            <a class="p-name u-url" href="/post/lorem-ipsum/">Lorem Ipsum</a>
           </li>
-        {%- endfor %}
-      </ul>
-    </section>
-    <section>
-      <h2>Elsewhere on the Internet</h2>
-      <ul>
-        {%- for item in config.extra.contact_menu %}
-          <li>
-            {%- if item.url is starting_with("mailto:") -%}
-              <a href="{{ item.url | safe }}" class="u-email email" rel="me">{{ item.name }}</a>
-            {%- else -%}
-              <a href="{{ item.url | safe }}" class="u-url url" rel="me">{{ item.name }}</a>
-            {%- endif -%}
-          </li>
-        {%- endfor %}
-      </ul>
-    </section>
-  </main>
-{% endblock %}
+        </ul>
+      </section>
+      <section>
+        <h2>Elsewhere on the Internet</h2>
+        <ul>
+          <li><a href="mailto:alan@alanpearce.eu">alan@alanpearce.eu</a></li>
+          <li><a href="https://codeberg.org/alanpearce/">Codeberg</a></li>
+          <li><a href="https://github.com/alanpearce/">GitHub</a></li>
+          <li><a href="https://gitlab.com/alanpearce/">GitLab</a></li>
+          <li><a href="https://ieji.de/@alanpearce">Mastodon</a></li>
+          <li><a href="https://bsky.app/profile/alanpearce.eu">Bluesky</a></li>
+        </ul>
+      </section>
+    </main>
+    <footer>
+      Licensed under a
+      <a rel="license" href="http://creativecommons.org/licenses/by/4.0/"
+        >Creative Commons Attribution 4.0 International License</a
+      >.
+    </footer>
+  </body>
+</html>
diff --git a/templates/post.html b/templates/post.html
new file mode 100644
index 0000000..2a66058
--- /dev/null
+++ b/templates/post.html
@@ -0,0 +1,50 @@
+<!doctype html>
+<html lang="en-GB">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title></title>
+    <meta name="referrer" content="no-referrer-when-downgrade" />
+    <link
+      rel="alternate"
+      type="application/atom+xml"
+      title=""
+      href="/atom.xml"
+    />
+    <style></style>
+  </head>
+  <body>
+    <a class="skip" href="#main">Skip to main content</a>
+    <header>
+      <h2>
+        <a href="/" class="title"></a>
+      </h2>
+      <nav>
+        <a href="/">Home</a>
+      </nav>
+    </header>
+    <main id="main">
+      <article class="h-entry">
+        <h1 class="p-name">Post Title</h1>
+        <p>
+          <time class="dt-published" pubdate>2000-12-31</time>
+        </p>
+        <div class="e-content">
+          Enim lobortis scelerisque fermentum dui faucibus in ornare quam
+          viverra. Eget egestas purus viverra accumsan in nisl nisi, scelerisque
+          eu ultrices vitae, auctor eu augue ut lectus arcu, bibendum at.
+        </div>
+        <ul class="p-categories">
+          Tags:
+          <li><a class="p-category" href="/tags/sample/">#sample</a></li>
+        </ul>
+      </article>
+    </main>
+    <footer>
+      Licensed under a
+      <a rel="license" href="http://creativecommons.org/licenses/by/4.0/"
+        >Creative Commons Attribution 4.0 International License</a
+      >.
+    </footer>
+  </body>
+</html>
diff --git a/templates/style.css b/templates/style.css
new file mode 100644
index 0000000..23722e1
--- /dev/null
+++ b/templates/style.css
@@ -0,0 +1,196 @@
+body {
+  font-family: Verdana, sans-serif;
+  margin: auto;
+  padding: 20px;
+  max-width: 720px;
+  text-align: left;
+  background-color: #fff;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  line-height: 1.5;
+  color: #444;
+}
+
+.skip {
+  position: absolute;
+  top: -3em;
+  background: #fff;
+}
+.skip:focus {
+  top: 0;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+strong,
+b {
+  color: #222;
+}
+
+a {
+  color: #3273dc;
+}
+
+.title {
+  color: #222;
+  text-decoration: none;
+  border: 0;
+}
+
+time {
+  font-style: italic;
+}
+
+.title span {
+  font-weight: 400;
+}
+
+nav a {
+  margin-right: 10px;
+}
+
+.tags {
+  padding: unset;
+  font-size: small;
+}
+
+.tags > li {
+  list-style: none;
+  display: inline-block;
+  padding-right: 1ex;
+}
+
+textarea {
+  width: 100%;
+  font-size: 1rem;
+}
+
+input {
+  font-size: 1rem;
+}
+
+main,
+article {
+  line-height: 1.6;
+}
+
+table {
+  width: 100%;
+}
+
+img {
+  max-width: 100%;
+}
+
+code {
+  padding: 2px 5px;
+  background-color: #f2f2f2;
+}
+
+pre code {
+  color: #222;
+  display: block;
+  padding: 20px;
+  white-space: pre-wrap;
+  font-size: 0.875rem;
+  overflow-x: auto;
+}
+
+div.highlight pre {
+  background-color: initial;
+  color: initial;
+}
+
+div.highlight code {
+  background-color: unset;
+  color: unset;
+}
+
+blockquote {
+  border-left: 1px solid #999;
+  color: #222;
+  padding-left: 20px;
+  font-style: italic;
+}
+
+footer {
+  padding: 25px;
+  text-align: center;
+}
+
+.helptext {
+  color: #777;
+  font-size: small;
+}
+
+.errorlist {
+  color: #eba613;
+  font-size: small;
+}
+
+/* blog posts */
+ul.blog-posts {
+  list-style-type: none;
+  padding: unset;
+}
+
+ul.blog-posts li {
+  display: flex;
+}
+
+ul.blog-posts li span {
+  flex: 0 0 130px;
+}
+
+ul.blog-posts li a:visited {
+  color: #8b6fcb;
+}
+
+@media (prefers-color-scheme: dark) {
+  body {
+    background-color: #333;
+    color: #ddd;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  strong,
+  b,
+  .title {
+    color: #eee;
+  }
+
+  a {
+    color: #8cc2dd;
+  }
+
+  code {
+    background-color: #777;
+  }
+
+  pre code {
+    color: #ddd;
+  }
+
+  blockquote {
+    color: #ccc;
+  }
+
+  textarea,
+  input {
+    background-color: #252525;
+    color: #ddd;
+  }
+
+  .helptext {
+    color: #aaa;
+  }
+}
diff --git a/templates/tag.html b/templates/tag.html
new file mode 100644
index 0000000..ae5b8e9
--- /dev/null
+++ b/templates/tag.html
@@ -0,0 +1,49 @@
+<!doctype html>
+<html lang="en-GB">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Site Title</title>
+    <meta name="referrer" content="no-referrer-when-downgrade" />
+    <link
+      rel="alternate"
+      type="application/atom+xml"
+      title="Site Title"
+      href="/atom.xml"
+    />
+    <style></style>
+  </head>
+  <body>
+    <a class="skip" href="#content">Skip to main content</a>
+    <header>
+      <h2>
+        <a href="/" class="title">Site Title</a>
+      </h2>
+      <nav>
+        <a href="/">Home</a>
+      </nav>
+    </header>
+    <main id="content">
+      <ul class="h-feed blog-posts">
+        <li class="h-entry">
+          <span>
+            <time
+              class="dt-published"
+              datetime="2000-12-31T12:33:02+02:00"
+              pubdate
+            >
+              2000-12-31
+            </time>
+          </span>
+          <a class="p-name u-url" href="/post/lorem-ipsum/">Lorem Ipsum</a>
+        </li>
+      </ul>
+    </main>
+    <footer>
+      Licensed under a
+      <a rel="license" href="http://creativecommons.org/licenses/by/4.0/"
+        >Creative Commons Attribution 4.0 International License</a
+      >.
+    </footer>
+  </body>
+</html>
diff --git a/templates/tags.html b/templates/tags.html
new file mode 100644
index 0000000..a724c62
--- /dev/null
+++ b/templates/tags.html
@@ -0,0 +1,40 @@
+<!doctype html>
+<html lang="en-GB">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Site Title</title>
+    <meta name="referrer" content="no-referrer-when-downgrade" />
+    <link
+      rel="alternate"
+      type="application/atom+xml"
+      title="Site title"
+      href="/atom.xml"
+    />
+    <style></style>
+  </head>
+  <body>
+    <a class="skip" href="#content">Skip to main content</a>
+    <header>
+      <h2>
+        <a href="/" class="title">Site title</a>
+      </h2>
+      <nav>
+        <a href="/">Home</a>
+      </nav>
+    </header>
+    <main id="content">
+      <ul class="tags">
+        <li class="h-feed">
+          <a href="/tags/tag">#tag</a>
+        </li>
+      </ul>
+    </main>
+    <footer>
+      Licensed under a
+      <a rel="license" href="http://creativecommons.org/licenses/by/4.0/"
+        >Creative Commons Attribution 4.0 International License</a
+      >.
+    </footer>
+  </body>
+</html>