20 files changed, 386 insertions, 0 deletions

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..a48cf0d
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+public
diff --git a/config.toml b/config.toml
new file mode 100644
index 0000000..1d1b419
--- /dev/null
+++ b/config.toml
@@ -0,0 +1,23 @@
+# The URL the site will be built for
+base_url = "https://sakamoto.network"
+
+# Whether to automatically compile all Sass files in the sass directory
+compile_sass = true
+
+# Whether to build a search index to be used later on by a JavaScript library
+build_search_index = false
+
+author = "Sakamoto"
+generate_feeds = true
+feed_limit = 15
+feed_filenames = ["atom.xml", "rss.xml"]
+
+[markdown]
+# Whether to do syntax highlighting
+# Theme can be customised by setting the `highlight_theme` variable to a theme supported by Zola
+highlight_code = true
+insert_anchor_links = "heading"
+
+
+[extra]
+# Put all your custom variables here
diff --git a/content/about/index.md b/content/about/index.md
new file mode 100644
index 0000000..5e2f6fe
--- /dev/null
+++ b/content/about/index.md
@@ -0,0 +1,5 @@
++++
+title="About"
++++
+
+hi
diff --git a/content/blog/_index.md b/content/blog/_index.md
new file mode 100644
index 0000000..c504e1b
--- /dev/null
+++ b/content/blog/_index.md
@@ -0,0 +1,6 @@
++++
+title = "Blog"
+sort_by = "date"
+template = "blog.html"
+page_template = "blog-page.html"
++++
diff --git a/content/blog/first.md b/content/blog/first.md
new file mode 100644
index 0000000..816dec9
--- /dev/null
+++ b/content/blog/first.md
@@ -0,0 +1,34 @@
++++
+title = "My first post"
+date = 2025-12-05
++++
+
+> \> This is my first blog post.
+
+```js
+console.log("hi");
+```
+
+* The
+    * the
+
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tristique a nulla et imperdiet. Proin facilisis ullamcorper quam. Nam nec commodo odio. Suspendisse sit amet orci leo. Nulla massa orci, fringilla vel quam id, viverra gravida risus. Phasellus quis neque varius, blandit sapien non, facilisis ipsum. Cras at egestas nulla. Quisque maximus et quam sit amet finibus. Nam quam metus, ornare sit amet diam sit amet, dapibus tincidunt lorem. Nam quis nisi at eros pellentesque viverra. Donec dictum tempor dui sed semper.
+
+Pellentesque lacus est, dignissim id mauris et, consectetur consequat nisi. Morbi hendrerit erat et justo cursus, ut molestie augue cursus. Aenean porttitor, nisl a eleifend gravida, risus metus iaculis elit, eu iaculis tortor elit eget sapien. Pellentesque sagittis felis vitae libero tempus placerat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vivamus sagittis ex at elementum finibus. Ut at tellus sed sem gravida pellentesque. Quisque odio nisl, mollis at aliquam ut, sagittis sit amet neque. Nunc sed vulputate elit. Quisque et enim a ligula molestie pellentesque. Fusce mauris orci, condimentum non consectetur ut, placerat vitae ex.
+
+Nam magna lectus, tincidunt vitae quam et, malesuada consectetur quam. Nam sed augue in nibh ornare condimentum eget sit amet diam. Sed erat urna, sagittis quis enim sed, iaculis vestibulum dui. Cras tristique convallis tortor eget ullamcorper. Nulla risus ipsum, placerat eu bibendum tempus, venenatis sed turpis. Curabitur elit elit, luctus nec purus ac, consectetur placerat tellus. Vestibulum nec magna interdum, pharetra enim et, suscipit nunc.
+
+Maecenas ante elit, commodo sed quam at, ullamcorper porta purus. Sed et arcu ac purus viverra finibus quis sed mauris. Cras id felis ullamcorper, convallis orci sed, auctor elit. Fusce rhoncus lacinia risus. Nullam felis nibh, accumsan ullamcorper augue consectetur, blandit commodo tortor. Nulla mattis est non lorem hendrerit, ac bibendum magna tempor. Aenean ornare sollicitudin quam ut efficitur. Cras vestibulum sem ut ex accumsan maximus. Nulla ultricies erat ac sollicitudin vestibulum.
+
+Praesent ultrices velit at enim fermentum pulvinar. In volutpat ultrices aliquam. Nam convallis eget leo molestie rhoncus. Quisque ac aliquet nunc. Duis eu egestas arcu. Suspendisse ullamcorper eget felis eu blandit. Morbi commodo purus suscipit, eleifend tellus sed, fermentum lacus. Vestibulum sed tincidunt odio, pharetra pretium augue. Quisque porttitor vestibulum mi, a feugiat sapien placerat sit amet. Phasellus porta ullamcorper lectus eget volutpat. Sed tortor justo, aliquet vitae dui et, pellentesque maximus arcu. Morbi sem quam, tristique ac orci eu, tincidunt scelerisque quam. Aliquam gravida ornare quam, et accumsan nunc maximus sed.
+
+Phasellus at velit urna. Fusce consectetur tincidunt lorem id semper. Nam sit amet ultricies velit. Sed mauris metus, interdum gravida dignissim non, rutrum vehicula urna. Nam eleifend id mauris nec congue. Morbi id interdum massa. Cras in tincidunt lacus, sit amet iaculis nisi. Curabitur facilisis purus a nunc malesuada auctor. Curabitur bibendum tristique condimentum. Pellentesque neque libero, semper in nulla at, vehicula posuere neque. Nam massa dui, faucibus ut elementum cursus, hendrerit non sapien. Morbi congue eu nisl id efficitur. Mauris suscipit, quam sit amet hendrerit vulputate, eros sem suscipit nisl, id rutrum arcu turpis semper magna. Sed et est quis massa auctor vulputate nec sed odio.
+
+Donec a ligula et dui tristique imperdiet eget in lacus. Ut purus mi, ultrices a eros vitae, consectetur pellentesque justo. Fusce sed justo justo. Etiam augue enim, tempus in arcu vel, semper consectetur arcu. Donec ac purus ac nunc consequat ornare. Aenean vestibulum urna leo, ac mattis lorem gravida ut. Praesent quis ullamcorper diam, at tempor lorem. Nunc vitae leo nunc. Proin nec neque augue. Vestibulum tincidunt eros vel mi dignissim pulvinar.
+
+Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer quis velit interdum, faucibus felis non, aliquet nisl. Suspendisse vitae augue lobortis, ultricies dui nec, tincidunt mauris. Integer vel lacinia sem. Duis porttitor finibus dolor. Pellentesque bibendum pellentesque nisi ac ornare. Proin in aliquet orci. Cras suscipit libero eget mi tristique porta. Nam vulputate erat vel convallis convallis. Integer odio nisi, feugiat eu finibus vel, pharetra ac dui. Aenean egestas blandit fringilla. Sed convallis rutrum tincidunt. Curabitur tortor nulla, efficitur ultrices nisl nec, convallis imperdiet ante. Nullam dignissim lorem urna, in consequat felis tincidunt at. Vivamus et purus ut mauris finibus malesuada. Curabitur vel metus eu nisl hendrerit eleifend.
+
+Etiam luctus scelerisque lacus id sollicitudin. In ac neque libero. Mauris cursus purus quis tempor placerat. Suspendisse potenti. Aenean a felis velit. Quisque sed dolor sapien. Sed maximus, orci eu consectetur mattis, leo eros aliquam neque, non pellentesque diam velit vitae magna. Sed placerat mollis eros, in feugiat est. Aliquam consequat mi nulla. Cras condimentum massa non magna gravida interdum. Praesent aliquet commodo odio eget tempus. Pellentesque tempor diam ut neque tristique, id venenatis velit egestas.
+
+Mauris hendrerit lacus vel blandit lobortis. Duis eros turpis, vulputate sed enim non, sollicitudin bibendum urna. In eget varius risus. In vitae tempor odio. Nam congue iaculis eros non cursus. Fusce sit amet risus a neque efficitur imperdiet. Morbi cursus, dui eget vulputate dapibus, sapien mi commodo lacus, eu iaculis sem metus in leo. 
diff --git a/sass/style.scss b/sass/style.scss
new file mode 100644
index 0000000..d641c4e
--- /dev/null
+++ b/sass/style.scss
@@ -0,0 +1,48 @@
+html {
+  font-family:sans-serif
+}
+
+header,main,footer {
+  max-width: 40em;
+  margin: 0 auto;
+}
+
+footer {
+  text-align: center;
+}
+
+nav {
+  padding-bottom: 1.3rem;
+}
+
+time.right {
+  float: right;
+}
+
+nav .left {
+  float: left;
+  margin-right: 1rem;
+}
+
+nav .right {
+  float: right;
+  margin-left: 1rem;
+}
+
+blockquote {
+  color: lightgreen;
+}
+
+ol,ul {
+    white-space: nowrap;
+    padding-left: 16px
+}
+
+li {
+    margin-bottom: 8px
+}
+
+a {
+  text-decoration: underline;
+  color: white;
+}
diff --git a/static/favicon.ico b/static/favicon.ico
new file mode 100644
index 0000000..d6a0242
--- /dev/null
+++ b/static/favicon.ico
diff --git a/static/favicons.js b/static/favicons.js
new file mode 100644
index 0000000..2eac641
--- /dev/null
+++ b/static/favicons.js
@@ -0,0 +1,152 @@
+// from sizeof.cat 
+
+function favicons () {
+  this.hidden = "hidden";
+  this.visibilityChange = "visibilitychange";
+  this.favicon = document.querySelector("[rel='shortcut icon']").href;
+  this.title = document.title;
+
+  /* Define a list of "services", each being a pair of favicon URL and the tab title to show. */
+  this.services = {
+    /* Reddit */
+    reddit: () => {
+      let title = "Reddit - Dive into anything";
+      let favicon = "/img/favicons/reddit.ico";
+      return {
+        title, favicon
+      }
+    },
+    /* X, formerly known as Twitter */
+    x: () => {
+      let title = "X. It's what's happening / X";
+      let favicon = "/img/favicons/x.ico";
+      return {
+        title, favicon
+      }
+    },
+    /* Bluesky */
+    bluesky: () => {
+      let title = "Discover - Bluesky";
+      let favicon = "/img/favicons/bluesky.ico";
+      return {
+        title, favicon
+      }
+    },
+    /* Wikipedia */
+    wikipedia: () => {
+      let title = "Wikipedia";
+      let favicon = "/img/favicons/wikipedia.ico";
+      return {
+        title, favicon
+      }
+    },
+    /* TikTok, where the hip kids are hanging out */
+    tiktok: () => {
+      let title = "Explore - Find your favourite videos on TikTok";
+      let favicon = "/img/favicons/tiktok.ico";
+      return {
+        title, favicon
+      }
+    },
+    /* Facebook, your grandma is most likely here */
+    facebook: () => {
+      /* Pick a random notification number between 1 and 100 */
+      let count = Math.round(Math.random() * 99) + 1;
+      let title = "(" + count + ") Facebook";
+      let favicon = "/img/favicons/facebook.ico";
+      return {
+        title, favicon
+      }
+    },
+    /* Instagram */
+    instagram: () => {
+      /* Pick a random notification number between 1 and 100 */
+      let count = Math.round(Math.random() * 99) + 1;
+      let title = "(" + count + ") Instagram";
+      let favicon = "/img/favicons/instagram.ico";
+      return {
+        title, favicon
+      }
+    }
+  }
+
+  /* Those "services" are enabled, which means the web browser tab can change
+    favicon/title using their data. */
+  this.enabledServices = [
+    'x',
+    'reddit',
+    'bluesky',
+    'instagram',
+    'tiktok',
+    'facebook',
+    'wikipedia'
+  ];
+
+  /* Initialization function, checks if the web browser has the specified event
+    listeners and binds a handler to the existing one. */
+  this.init = function () {
+    if (typeof document.mozHidden !== 'undefined') {
+      this.hidden = "mozHidden";
+      this.visibilityChange = "mozvisibilitychange";
+    } else if (typeof document.msHidden !== 'undefined') {
+      this.hidden = "msHidden";
+      this.visibilityChange = "msvisibilitychange";
+    } else if (typeof document.webkitHidden !== 'undefined') {
+      this.hidden = "webkitHidden";
+      this.visibilityChange = "webkitvisibilitychange";
+    }
+    document.addEventListener(this.visibilityChange, this.handler.bind(this), false);
+  }
+
+  /* The default function which returns the initial favicon/title pair of the
+    page, so it can get swapped back upon tab activation. */
+  this.default = function () {
+    let title = this.title;
+    let favicon = this.favicon;
+    this.update({
+      title, favicon
+    });
+  }
+
+  /* This function updates the favicon/title pair of the web browser tab when
+    the tab is not focused (hidden from view). We're using a cache-busting
+    technique so that the favicon is freshly loaded and not cached. */
+  this.update = function (data) {
+    let cacheBuster = "?v=" + Math.round(Math.random() * 10000000);
+    let link  = document.createElement('link');
+    link.type = "image/x-icon";
+    link.rel = "shortcut icon";
+    link.href = data.favicon + cacheBuster;
+    document.getElementsByTagName("head")[0].querySelector("[rel='shortcut icon']").remove();
+    document.getElementsByTagName("head")[0].appendChild(link);
+    document.title = data.title;
+  }
+
+  /* The spoof() function randomizes the enabled "services" and picks one from
+    them, updating the tab favicon and title. */
+  this.spoof = function () {
+    let i = Math.round(Math.random() * (this.enabledServices.length - 1));
+    let service = this.enabledServices[i];
+    if (service && this.services[service]) {
+      this.update(this.services[service]());
+    }
+  }
+
+  /* The default event handler which checks whether the current tab is hidden,
+    and if it is then it swaps the favicon/title pair with one from the
+    enabled "services". Otherwise, it shows the default favicon and title. */
+  this.handler = function () {
+    if (document[this.hidden]) {
+      this.spoof();
+    } else {
+      this.default();
+    }
+  }
+
+  /* Autorun the initialization function. */
+  this.init();
+}
+
+document.addEventListener("DOMContentLoaded", function(event) {
+  favicons();
+});
diff --git a/static/img/favicons/bluesky.ico b/static/img/favicons/bluesky.ico
new file mode 100644
index 0000000..a0c24a2
--- /dev/null
+++ b/static/img/favicons/bluesky.ico
diff --git a/static/img/favicons/facebook.ico b/static/img/favicons/facebook.ico
new file mode 100644
index 0000000..2c83ce5
--- /dev/null
+++ b/static/img/favicons/facebook.ico
diff --git a/static/img/favicons/instagram.ico b/static/img/favicons/instagram.ico
new file mode 100644
index 0000000..0c2f07c
--- /dev/null
+++ b/static/img/favicons/instagram.ico
diff --git a/static/img/favicons/reddit.ico b/static/img/favicons/reddit.ico
new file mode 100644
index 0000000..842fb18
--- /dev/null
+++ b/static/img/favicons/reddit.ico
diff --git a/static/img/favicons/tiktok.ico b/static/img/favicons/tiktok.ico
new file mode 100644
index 0000000..24d5aff
--- /dev/null
+++ b/static/img/favicons/tiktok.ico
diff --git a/static/img/favicons/wikipedia.ico b/static/img/favicons/wikipedia.ico
new file mode 100644
index 0000000..e700218
--- /dev/null
+++ b/static/img/favicons/wikipedia.ico
diff --git a/static/img/favicons/x.ico b/static/img/favicons/x.ico
new file mode 100644
index 0000000..e7eb2d7
--- /dev/null
+++ b/static/img/favicons/x.ico
diff --git a/templates/base.html b/templates/base.html
new file mode 100644
index 0000000..83b5cc3
--- /dev/null
+++ b/templates/base.html
@@ -0,0 +1,51 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <title>{% block title %} {% endblock title %}</title>
+    <link rel="stylesheet" href="/style.css" type="text/css" />
+    <link
+      rel="alternate"
+      type="application/rss+xml"
+      title="sakamoto.network"
+      href="/rss.xml"
+    />
+    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
+    <meta property="og:type" content="website" />
+    <meta property="og:description" content="sakamoto.network" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, user-scalable=yes"
+    />
+    <meta name="color-scheme" content="light dark" />
+  </head>
+
+  <body>
+    <!-- from sizeof.cat -->
+    <script type="text/javascript" src="/favicons.js"></script>
+    <script>
+      document.addEventListener("DOMContentLoaded", function (event) {
+        favicons();
+      });
+    </script>
+
+    <header>
+      <nav>
+        <a class="left" href="/">sakamoto</a>
+        <a class="left" href="/about">about</a>
+        <a class="left" href="https://git.sakamoto.network">git</a>
+        <a class="left" href="/blog">blog</a>
+        <a class="right" href="/rss.xml">rss</a>
+        <a class="right" href="/atom.xml">atom</a>
+      </nav>
+    </header>
+
+    <hr />
+
+    <main>{% block content %} {% endblock content %}</main>
+
+    <hr />
+
+    <footer>fish</footer>
+  </body>
+</html>
diff --git a/templates/blog-page.html b/templates/blog-page.html
new file mode 100644
index 0000000..3b02091
--- /dev/null
+++ b/templates/blog-page.html
@@ -0,0 +1,12 @@
+{% extends "base.html" %} {% block title %} {{ page.title }} {% endblock title
+%} {% block content %}
+
+<h1>{{ page.title }}</h1>
+
+<strong
+  ><time datetime="{{ page.date }}"
+    >{{ page.date | date(format="%b %d, %Y") }}</time
+  ></strong
+>
+
+{{ page.content | safe }} {% endblock content %}
diff --git a/templates/blog.html b/templates/blog.html
new file mode 100644
index 0000000..38b96c1
--- /dev/null
+++ b/templates/blog.html
@@ -0,0 +1,16 @@
+{% extends "base.html" %} {% block title %} {{ section.title }} {% endblock
+title %} {% block content %}
+<h1>{{ section.title }}</h1>
+<ul>
+  <!-- If you are using pagination, section.pages will be empty.
+       You need to use the paginator object -->
+  {% for page in section.pages %}
+  <li>
+    <a href="{{ page.permalink | safe }}">{{ page.title }}</a>
+    <time class="right" datetime="{{ page.date }}"
+      >{{ page.date | date(format="%b %d, %Y") }}</time
+    >
+  </li>
+  {% endfor %}
+</ul>
+{% endblock content %}
diff --git a/templates/index.html b/templates/index.html
new file mode 100644
index 0000000..a01d58f
--- /dev/null
+++ b/templates/index.html
@@ -0,0 +1,33 @@
+{% extends "base.html" %} {% block title %} sakamoto.network {% endblock title
+%} {% block content %}
+<h1>sakamoto.network</h1>
+
+<p>I host services for a few friends.</p>
+
+<h2>Services</h2>
+
+<ul>
+  <li><a href="https://git.sakamoto.network">git</a></li>
+  <li><a href="https://file.sakamoto.network">file</a></li>
+  <li><a href="https://ntfy.sakamoto.network">ntfy</a></li>
+  <li><a href="https://rss.sakamoto.network">ttrss</a></li>
+  <li><a href="https://paste.sakamoto.network">rustypaste</a></li>
+</ul>
+
+{% set blog = get_section(path="blog/_index.md") %}
+
+<h2>Recent posts</h2>
+
+{% if blog.pages %}
+<ul>
+  {% for post in blog.pages | slice(end=5) %}
+  <li>
+    <a href="{{ post.permalink | safe }}">{{ post.title }}</a>
+
+    <time class="right" datetime="{{ post.date }}"
+      >{{ post.date | date(format="%b %d, %Y") }}</time
+    >
+  </li>
+  {% endfor %}
+</ul>
+{% endif %} {% endblock content %}
diff --git a/templates/page.html b/templates/page.html
new file mode 100644
index 0000000..4da2946
--- /dev/null
+++ b/templates/page.html
@@ -0,0 +1,5 @@
+{% extends "base.html" %} {% block title %} {{page.title}} {% endblock title %}
+{% block content %}
+<h1>{{ page.title }}</h1>
+
+{{ page.content | safe }} {% endblock content %}