first commit

.gitignore

@@ -0,0 +1 @@
+/public

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 The Satanic
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,3 @@
+# README
+
+

config.toml

@@ -0,0 +1,31 @@
+# The URL the site will be built for
+base_url = "https://thesatanic.grebedoc.dev/"
+
+# 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
+
+title = "Awesome Gitnet Page"
+description = "Gitnet Pages Project"
+author = "The Satanic"
+taxonomies = [
+    { name = "categories" },
+    { name = "tags" },
+    { name = "authors" },
+]
+
+[markdown]
+highlight_code = true
+highlight_theme = "inspired-github"
+
+bottom_footnotes = true
+
+[extra]
+
+links = [
+    { title = "Mail", href = "mailto:drsamael@zohomail.cn" },
+    { title = "GitHub", href = "https://github.com/drsatanic" },
+    { title = "Mastodon", href = "https://mstdn.plus/@drsatanic" }
+]

content/_index.md

@@ -0,0 +1,4 @@
++++
++++
+
+Hi! Welcome to Hook! Hook is a Zola theme.

content/about.md

@@ -0,0 +1,7 @@
++++
+title = "About"
+
+extra.in_header = true
++++
+
+Hook is a theme for [Zola](https://getzola.org), a static site generator.

content/blog/_index.md

@@ -0,0 +1,5 @@
++++
+title = "Blog"
+description = "Example blog page for Zola"
+sort_by = "date"
++++

content/blog/hello-world.md

@@ -0,0 +1,7 @@
++++
+title = "Hello world"
+date = 2021-07-29
+taxonomies.categories = ["intro"]
++++
+
+Hello world!

content/blog/markdown.md

@@ -0,0 +1,66 @@
++++
+title = "Markdown example"
+description = "This page demonstrates how Markdown looks in the Hook theme for Zola"
+date = 2021-07-30
+taxonomies.tags = [
+    "markdown",
+    "syntax",
+]
+taxonomies.categories = [
+    "intro"
+]
++++
+
+This post is a markdown example.
+
+Here is [a link](http://example.com).
+
+Some *italic text* and **bold text** and ~~strikethrough text~~ and `inline code`. [^1]
+
+```rust
+// Here is a code block
+
+fn main() {
+    println!("Hello world!");
+}
+```
+
+Unordered list: [^2]
+- An unordered,
+- bulleted list
+- of items
+
+Ordered list:
+1. An ordered,
+2. numbered list
+3. of items
+
+> A quote.
+>
+> It contains multiple paragraphs.
+
+# Heading 1
+
+## Heading 2
+
+### Heading 3
+
+#### Heading 4
+
+##### Heading 5
+
+###### Heading 6
+
+![An example image](https://plchldr.co/i/480x360?bg=EB6361)
+
+![A large image](https://plchldr.co/i/1280x720?bg=3D8EB9)
+
+| Hello world! | This is a table. | Tables are also supported. |
+|--------------|------------------|----------------------------|
+| They even    | have alternating | row colors!                |
+| Let me add   | another row so   | it's easier to see.        |
+
+[^1]: A footnote. Footnotes can be used for things that could have explanation or extra context, but
+for which the explanation is not relevant or otherwise desirable to have inline.
+
+[^2]: Another footnote.

sass/_theme.scss

@@ -0,0 +1,173 @@
+@mixin light-theme {
+    --foreground: #222222;
+    --background: #eeeeee;
+    --secondary: #808080;
+    --tertiary: #dddddd;
+    --accent: #3d3cba;
+    --accent-highlight: #171746;
+    --table-border: #d0d0d0;
+    --table-row: #f7f7f7;
+}
+
+@mixin dark-theme {
+    --foreground: #eeeeee;
+    --background: #161616;
+    --secondary: #999999;
+    --tertiary: #444444;
+    --accent: #959bf0;
+    --accent-highlight: #c2c5f6;
+    --table-border: var(--tertiary);
+    --table-row: #1e1e1e;
+}
+
+:root {
+    --code-secondary: #999999;
+    --code-tertiary: #99999944;
+}
+
+:root.light-mode {
+    @include light-theme;
+
+    #dark-mode-on {
+        display: inline;
+    }
+
+    #dark-mode-off {
+        display: none;
+    }
+}
+
+:root.dark-mode {
+    @include dark-theme;
+
+    #dark-mode-on {
+        display: none;
+    }
+
+    #dark-mode-off {
+        display: inline;
+    }
+}
+
+.dark-mode-buttons {
+    position: absolute;
+
+    top: 1em;
+    right: 1em;
+}
+
+.dark-mode-button {
+    border: none;
+    background-color: transparent;
+
+    &:hover {
+        cursor: pointer;
+    }
+}
+
+@media (prefers-color-scheme: light) {
+    :root {
+        @include light-theme;
+
+        #dark-mode-on {
+            display: inline;
+        }
+
+        #dark-mode-off {
+            display: none;
+        }
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        @include dark-theme;
+
+        #dark-mode-on {
+            display: none;
+        }
+
+        #dark-mode-off {
+            display: inline;
+        }
+    }
+}
+
+body {
+    color: var(--foreground);
+    background-color: var(--background);
+}
+
+.secondary {
+    color: var(--secondary);
+}
+
+a, a:link, a:visited {
+    color: var(--accent);
+}
+
+a:hover {
+    color: var(--accent-highlight);
+}
+
+blockquote {
+    border-left: 2px solid var(--secondary);
+}
+
+code {
+    background-color: var(--tertiary);
+}
+
+pre {
+    code {
+        background-color: transparent;
+    }
+
+    mark {
+        color: inherit;
+    }
+
+    table tr:nth-child(even) {
+        background-color: transparent;
+    }
+
+    table td:first-child {
+        color: var(--code-tertiary);
+    }
+
+    &[data-name]::before {
+        background-color: var(--code-tertiary);
+        color: var(--code-secondary);
+    }
+}
+
+.footnote-definition sup {
+    color: var(--secondary);
+}
+
+.footnotes {
+    border-top: 1px solid var(--table-border);
+}
+
+.footnotes-list li {
+    color: var(--secondary);
+
+    p {
+        color: var(--foreground);
+    }
+}
+
+hr {
+    border: none;
+    border-bottom: 1px solid var(--table-border);
+}
+
+table {
+    th, td {
+        border-color: var(--table-border);
+    }
+
+    thead, tr:nth-child(even) {
+        background-color: var(--table-row);
+    }
+}

sass/style.scss

@@ -0,0 +1,146 @@
+@import "theme";
+
+html, body {
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 14pt;
+
+    line-height: 1.5em;
+
+    padding: 5em 25%;
+}
+
+.header-links {
+    a {
+        margin-right: 0.5em;
+    }
+
+    a:last-of-type {
+        margin-right: 0;
+    }
+}
+
+.space {
+    margin-bottom: 2em;
+}
+
+.small {
+    font-size: 75%;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    line-height: 1.25;
+}
+
+img {
+    max-width: 100%;
+}
+
+blockquote {
+    margin-left: 0;
+    padding-left: 1em;
+}
+
+code {
+    padding: 0.1em 0.2em;
+    font-size: 75%;
+}
+
+pre {
+    overflow: auto;
+    padding: 0.3em;
+    line-height: 1.2em;
+
+    code {
+        padding: 0;
+        min-width: 100%;
+        display: inline-block;
+    }
+
+    mark {
+        display: block;
+        width: 100%;
+    }
+
+    table {
+        width: 100%;
+    }
+
+    table tr, table td {
+        padding: 0;
+        border: none;
+    }
+
+    table td:first-child {
+        text-align: center;
+        vertical-align: middle;
+        border: none;
+        user-select: none;
+    }
+
+    &[data-linenos] {
+        padding-inline: 0;
+    }
+
+    &[data-name] {
+        padding-top: 1.8em;
+        position: relative;
+    }
+
+    &[data-name]::before {
+        position: absolute;
+        top: 0;
+        left: 0;
+
+        padding-inline: 0.3em;
+
+        content: attr(data-name);
+
+        font-size: 75%;
+        font-family: Arial, Helvetica, sans-serif;
+    }
+}
+
+.footnote-definition {
+    margin-top: 1em;
+
+    font-size: 75%;
+
+    p {
+        display: inline;
+    }
+}
+
+.footnotes {
+    margin-top: 4em;
+}
+
+.footnotes-list {
+    font-size: 75%;
+}
+
+table {
+    border-collapse: collapse;
+
+    th, td {
+        border-width: 1px;
+        border-style: solid;
+        padding: 0.2em;
+    }
+}
+
+@media all and (max-width: 1200px) {
+    body {
+        padding: 3em 15%;
+    }
+}
+
+@media all and (max-width: 800px) {
+    body {
+        padding: 1em 1em;
+    }
+}

static/dark_mode.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><rect fill="none" height="24" width="24"/><path d="M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36c-0.98,1.37-2.58,2.26-4.4,2.26 c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"/></svg>

static/light_mode.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#FFFFFF"><rect fill="none" height="24" width="24"/><path d="M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0 c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2 c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1 C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06 c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41 l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41 c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36 c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"/></svg>

templates/404.html

@@ -0,0 +1,10 @@
+{% extends "page.html" %}
+
+{% block title %}{{ config.title }} | Page Not Found{% endblock title %}
+
+{% block content %}
+<main>
+    <h1>Page Not Found (404)</h1>
+    <p>The page you were looking for could not be found.</p>
+</main>
+{% endblock content %}

templates/index.html

@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="description" content="{% block description %}{{ section.description | default(value=config.description) }}{% endblock description %}">
+    <title>{% block title %}{{ config.title }}{% endblock title %}</title>
+    {% block extra_head %}
+    <link rel="stylesheet" href="{{ get_url(path='style.css', cachebust=true) }}">
+    {% endblock extra_head %}
+    {% block feed_link %}
+        {% if config.generate_feeds %}
+            {% if config.feed_filenames %}
+                {% for feed in config.feed_filenames %}
+                    {% if feed == "atom.xml" %}
+                        <link rel="alternate" type="application/atom+xml" title="{{ config.title | safe }} - Atom Feed" href="{{ get_url(path=feed, trailing_slash=false) | safe }}">
+                    {% elif feed == "rss.xml" %}
+                        <link rel="alternate" type="application/rss+xml" title="{{ config.title | safe }} - RSS Feed" href="{{ get_url(path=feed, trailing_slash=false) | safe }}">
+                    {% else %}
+                        <link rel="alternate" href="{{ get_url(path=feed, trailing_slash=false) | safe }}">
+                    {% endif %}
+                {% endfor %}
+            {% else %}
+                <link rel="alternate" type="application/atom+xml" title="{{ config.title | safe }}" href="{{ get_url(path='atom.xml', trailing_slash=false) | safe }}">
+            {% endif %}
+        {% endif %}
+    {% endblock %}
+</head>
+<body>
+    {% block header %}
+    <header class="space">
+        <h1>{{ config.title }}</h1>
+        {% set linked_pages = section.pages | filter(attribute="extra.in_header") %}
+        {% if config.extra.links or linked_pages %}
+        <nav class="header-links">
+            {% for link in config.extra.links %}
+            <a href="{{ link.href }}">{{ link.title }}</a>
+            {% endfor %}
+            {% for page in linked_pages %}
+            <a href="{{ page.permalink }}">{{ page.title }}</a>
+            {% endfor %}
+        </nav>
+        {% endif %}
+    </header>
+    {% endblock header %}
+    {% block content %}
+    {% set blog = get_section(path="blog/_index.md") %}
+    {% if section.content or blog.pages %}
+    <main>
+        {% if section.content %}
+        <div {% if blog.pages %}class="space"{% endif %}>
+            {{ section.content | safe }}
+        </div>
+        {% endif %}
+        {% if blog.pages %}
+        <h2>Recent posts</h2>
+        <ul>
+            {% for post in blog.pages | slice(end=20) %}
+            <li><a href="{{ post.permalink }}">{{ post.title }}</a></li>
+            {% endfor %}
+        </ul>
+        <p><a href="{{ blog.permalink }}">Archive</a></p>
+        {% endif %}
+    </main>
+    {% endif %}
+    {% endblock content %}
+    <div class="dark-mode-buttons">
+        <button class="dark-mode-button" id="dark-mode-on"><img src="{{ get_url(path='dark_mode.svg') }}" width="24" height="24" alt="Dark mode" aria-label="dark mode toggle" title="Dark mode"></button>
+        <button class="dark-mode-button" id="dark-mode-off"><img src="{{ get_url(path='light_mode.svg') }}" width="24" height="24" alt="Light mode" aria-label="light mode toggle" title="Light mode"></button>
+    </div>
+    <script>
+        const cls = document.querySelector("html").classList;
+        const sessionTheme = sessionStorage.getItem("theme");
+
+        function setDark() {
+            cls.add("dark-mode");
+            cls.remove("light-mode");
+            sessionStorage.setItem("theme", "dark");
+        }
+        function setLight() {
+            cls.add("light-mode");
+            cls.remove("dark-mode");
+            sessionStorage.setItem("theme", "light");
+        }
+
+        if (sessionTheme === "dark") {
+            setDark();
+        } else if (sessionTheme === "light") {
+            setLight();
+        } else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+            setDark();
+        }
+
+        document.getElementById("dark-mode-on").addEventListener("click", function(e) {
+            setDark();
+        });
+        document.getElementById("dark-mode-off").addEventListener("click", function(e) {
+            setLight();
+        });
+    </script>
+    <noscript>
+        <style>
+            .dark-mode-buttons {
+                display: none;
+            }
+        </style>
+    </noscript>
+</body>
+</html>

templates/page.html

@@ -0,0 +1,39 @@
+{% extends "index.html" %}
+
+{% block title %}{{ config.title }} | {{ page.title }}{% endblock title %}
+{% block description %}{{ page.description | default(value=config.description) }}{% endblock description %}
+
+{% block header %}
+<header class="space">
+    <a href="{{ config.base_url }}">&LeftArrow; Home</a>
+</header>
+{% endblock header %}
+
+{% block content %}
+<main>
+    <h1>{{ page.title }}</h1>
+    {% if page.date or page.taxonomies %}
+    <p class="secondary small">
+        {% if page.date %}{{ page.date | date(format="%-d %B, %Y") }}{% endif %}
+
+        {% set_global sorted_taxonomies = [] %}
+        {% for taxonomy_name, _ in page.taxonomies %}
+        {% set_global sorted_taxonomies = sorted_taxonomies | concat(with=taxonomy_name) %}
+        {% endfor %}
+        {% set_global sorted_taxonomies = sorted_taxonomies | sort %}
+
+        {% for taxonomy_name in sorted_taxonomies %}
+        {% set terms = page.taxonomies[taxonomy_name] %}
+        {% if not terms %}{% continue %}{% endif %}
+        - {{ taxonomy_name | capitalize }}:
+        {% for term_name in terms %}
+        {% set term = get_taxonomy_term(kind=taxonomy_name, term=term_name) %}
+        <a href="{{ term.permalink }}">{{ term.name }}</a>{% if not loop.last %},{% endif %}
+        {% endfor %}
+        {% endfor %}
+    </p>
+    {% endif %}
+    <div class="space"></div>
+    {{ page.content | safe }}
+</main>
+{% endblock content %}

templates/section.html

@@ -0,0 +1,21 @@
+{% extends "page.html" %}
+
+{% block title %}{{ config.title }} | {{ section.title }}{% endblock title %}
+
+{% block content %}
+<main>
+    <h1>{{ section.title }}</h1>
+    {% if section.pages %}
+    {% for year, posts in section.pages | group_by(attribute="year") %}
+    <h2>{{ year }}</h2>
+    <ul>
+        {% for post in posts %}
+        <li><a href="{{ post.permalink }}">{{ post.title }}</a></li>
+        {% endfor %}
+    </ul>
+    {% endfor %}
+    {% else %}
+    <p>No posts yet.</p>
+    {% endif %}
+</main>
+{% endblock content %}

templates/taxonomy_list.html

@@ -0,0 +1,20 @@
+{% extends "page.html" %}
+
+{% block title %}{{ config.title }} | {{ taxonomy.name | capitalize }}{% endblock title %}
+
+{% block content %}
+<main>
+    <h1>{{ taxonomy.name | capitalize }}</h1>
+    <div>
+        <ul>
+            {% for term in terms %}
+            <li>
+                <a href="{{ term.permalink }}">{{ term.name }}</a>
+                {% set count = term.pages | length %}
+                <span class="secondary small">({{ count }} page{{ count | pluralize }})</span>
+            </li>
+            {% endfor %}
+        </ul>
+    </div>
+</main>
+{% endblock content %}

templates/taxonomy_single.html

@@ -0,0 +1,18 @@
+{% extends "page.html" %}
+
+{% block title %}{{ config.title }} | {{ term.name }}{% endblock title %}
+
+{% block content %}
+<main>
+    <h1>{{ taxonomy.name | capitalize }} - {{ term.name }} </h1>
+    <ul>
+        {% for page in term.pages %}
+        <li>
+            <a href="{{ page.permalink | safe }}">{{ page.title }}</a>
+            {% if page.date %}<span class="secondary small">({{ page.date | date(format="%d %b, %Y") }})</span>{% endif %}
+        </li>
+        {% endfor %}
+    </ul>
+    <p><a href="{{ get_taxonomy(kind=taxonomy.name) | get(key='permalink') }}">All {{ taxonomy.name }}</a></p>
+</main>
+{% endblock content %}