moonwalk-tokyonight 0.1.0

data/_includes/progress_bar.html

@@ -0,0 +1,25 @@
+<div class="progress-bar" aria-hidden="true"></div>
+<style>
+  .progress-bar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 0%;
+    height: 3px;
+    background: var(--links);
+    z-index: 100;
+    transition: width 50ms linear;
+  }
+</style>
+<script>
+(function() {
+  var bar = document.querySelector('.progress-bar');
+  window.addEventListener('scroll', function() {
+    var scrollTop = window.scrollY;
+    var docHeight = document.documentElement.scrollHeight - window.innerHeight;
+    if (docHeight > 0) {
+      bar.style.width = (scrollTop / docHeight * 100) + '%';
+    }
+  });
+})();
+</script>

data/_includes/search.html

@@ -0,0 +1,61 @@
+<div class="search">
+  <input type="search" id="search-input" class="search-input" placeholder="Search posts..." aria-label="Search posts" autocomplete="off">
+  <ul id="search-results" class="search-results" hidden></ul>
+</div>
+
+<script>
+(function() {
+  var input = document.getElementById('search-input');
+  var list = document.getElementById('search-results');
+  if (!input || !list) return;
+
+  var index = null;
+  function loadIndex() {
+    return fetch('{{ "/search.json" | relative_url }}')
+      .then(function(r) { return r.ok ? r.json() : []; })
+      .then(function(data) { index = data; return data; });
+  }
+
+  function score(p, q) {
+    var s = 0;
+    var ql = q.toLowerCase();
+    if ((p.title || '').toLowerCase().indexOf(ql) !== -1) s += 5;
+    if ((p.tags || []).some(function(t) { return t.toLowerCase().indexOf(ql) !== -1; })) s += 3;
+    if ((p.excerpt || '').toLowerCase().indexOf(ql) !== -1) s += 1;
+    return s;
+  }
+  function escape(s) {
+    return String(s || '').replace(/[&<>"']/g, function(c) {
+      return { '&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;' }[c];
+    });
+  }
+  function render(results, q) {
+    if (!results.length) {
+      list.innerHTML = '<li class="search-empty">No matches for "' + escape(q) + '"</li>';
+      list.hidden = false;
+      return;
+    }
+    list.innerHTML = results.slice(0, 8).map(function(p) {
+      return '<li class="search-result">' +
+        '<a href="' + escape(p.url) + '">' +
+        '<span class="search-result-title">' + escape(p.title) + '</span>' +
+        '<span class="search-result-date">' + escape(p.date) + '</span>' +
+        '</a></li>';
+    }).join('');
+    list.hidden = false;
+  }
+
+  input.addEventListener('input', function() {
+    var q = input.value.trim();
+    if (!q) { list.hidden = true; list.innerHTML = ''; return; }
+    var run = function() {
+      var hits = index.map(function(p) { return [score(p, q), p]; })
+                      .filter(function(r) { return r[0] > 0; })
+                      .sort(function(a, b) { return b[0] - a[0]; })
+                      .map(function(r) { return r[1]; });
+      render(hits, q);
+    };
+    if (!index) loadIndex().then(run); else run();
+  });
+})();
+</script>

data/_includes/toc.html

@@ -0,0 +1,42 @@
+{% assign headers = content | split: '<h' %}
+{% assign toc_items = "" %}
+{% for header in headers %}
+  {% assign first_char = header | slice: 0, 1 %}
+  {% if first_char == "2" or first_char == "3" %}
+    {% assign id_start = header | split: 'id="' %}
+    {% if id_start.size > 1 %}
+      {% assign id_rest = id_start[1] | split: '"' %}
+      {% assign header_id = id_rest[0] %}
+      {% assign text_start = header | split: '>' %}
+      {% assign text_rest = text_start[1] | split: '</h' %}
+      {% assign header_text = text_rest[0] %}
+      {% if first_char == "2" %}
+        {% assign toc_items = toc_items | append: "2|" | append: header_id | append: "|" | append: header_text | append: ";;;" %}
+      {% else %}
+        {% assign toc_items = toc_items | append: "3|" | append: header_id | append: "|" | append: header_text | append: ";;;" %}
+      {% endif %}
+    {% endif %}
+  {% endif %}
+{% endfor %}
+
+{% assign items = toc_items | split: ";;;" %}
+{% if items.size > 0 %}
+<details class="toc" open>
+  <summary>Table of Contents</summary>
+  <ul>
+    {% for item in items %}
+      {% if item != "" %}
+        {% assign parts = item | split: "|" %}
+        {% assign level = parts[0] %}
+        {% assign id = parts[1] %}
+        {% assign text = parts[2] %}
+        {% if level == "2" %}
+          <li><a href="#{{ id }}">{{ text }}</a></li>
+        {% else %}
+          <li class="toc-sub"><a href="#{{ id }}">{{ text }}</a></li>
+        {% endif %}
+      {% endif %}
+    {% endfor %}
+  </ul>
+</details>
+{% endif %}

data/_includes/toggle_theme_button.html

@@ -0,0 +1,16 @@
+<button aria-label="Toggle dark mode" aria-pressed="false" class="theme-toggle">
+  <svg class="icon-sun" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+    <circle cx="12" cy="12" r="5"></circle>
+    <line x1="12" y1="1" x2="12" y2="3"></line>
+    <line x1="12" y1="21" x2="12" y2="23"></line>
+    <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
+    <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
+    <line x1="1" y1="12" x2="3" y2="12"></line>
+    <line x1="21" y1="12" x2="23" y2="12"></line>
+    <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
+    <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
+  </svg>
+  <svg class="icon-moon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
+  </svg>
+</button>

data/_includes/toggle_theme_js.html

@@ -0,0 +1,36 @@
+<script type="text/javascript">
+  window.addEventListener('load', themeChange);
+  const currentTheme = localStorage.getItem('theme') ? localStorage.getItem('theme') : null;
+  if (currentTheme)
+    document.documentElement.setAttribute('data-theme', currentTheme);
+
+  function themeChange() {
+    var button = document.querySelector('.theme-toggle');
+    if (!button) return;
+
+    function updateIcon(theme) {
+      button.setAttribute('aria-pressed', theme === 'dark' ? 'true' : 'false');
+      button.querySelector('.icon-sun').style.display = theme === 'dark' ? 'block' : 'none';
+      button.querySelector('.icon-moon').style.display = theme === 'dark' ? 'none' : 'block';
+    }
+
+    updateIcon(document.documentElement.getAttribute('data-theme'));
+
+    button.addEventListener('click', function (e) {
+      var currentTheme = document.documentElement.getAttribute('data-theme');
+      var next = currentTheme === 'dark' ? 'light' : 'dark';
+
+      transition();
+      document.documentElement.setAttribute('data-theme', next);
+      localStorage.setItem('theme', next);
+      updateIcon(next);
+    });
+
+    function transition() {
+      document.documentElement.classList.add('transition');
+      window.setTimeout(function () {
+        document.documentElement.classList.remove('transition');
+      }, 1000);
+    }
+  }
+</script>

data/_includes/vertical_list.html

@@ -0,0 +1,19 @@
+<ul>
+  {% for item in include.collection %}
+    <li>
+    {% if item.url != false %}
+      <a href="{{ item.url }}">{{ item.title }}</a>
+    {% else %}
+      {{ item.title }}
+    {% endif %}
+
+    {% if item.post_list == true %}
+      {% include post_list.html %}
+    {% endif %}
+
+    {% if item.entries %}
+      {% include vertical_list.html collection=item.entries %}
+    {% endif %}
+    </li>
+  {% endfor %}
+</ul>

data/_layouts/blog.html

@@ -0,0 +1,14 @@
+---
+layout: default
+---
+<a href="javascript:history.back()" class="back-link" aria-label="Go back">
+  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <polyline points="15 18 9 12 15 6"></polyline>
+  </svg>
+</a>
+
+<header>
+  <h1>{{ site.title }}</h1>
+</header>
+
+{% include post_list.html %}

data/_layouts/default.html

@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="{{ page.lang | default: "en" }}" class="html" data-theme="{{ site.theme_config.appearance | default: "auto" }}">
+        {%- include head.html -%}
+  <body>
+    {%- if site.theme_config.show_progress_bar and page.layout == "post" -%}
+      {% include progress_bar.html %}
+    {%- endif -%}
+    <main class="page-content" aria-label="Content">
+      <div class="w">
+        {{ content }}
+        {% if site.theme_config.appearance_toggle %}
+          {% include toggle_theme_button.html %}
+        {% endif %}
+        <div class="credits">
+          {%- if site.theme_config.show_copyright == true -%}
+          <!-- No copyrights, only arepas -->
+          🫓 &nbsp;{{ "now" | date: "%Y" }}&nbsp;{{site.author}}
+          &nbsp;
+          •
+          &nbsp;
+          {%- endif -%}
+          Based on <a href="https://github.com/abhinavs/moonwalk" target="_blank" rel="noopener noreferrer">Moonwalk</a> · Theme <a href="https://github.com/foursixnine/moonwalk-tokyonight" target="_blank" rel="noopener noreferrer">Moonwalk Tokyo Night</a>
+        </div>
+      </div>
+    </main>
+
+    {%- if page.layout == "post" -%}
+      {% include github_alerts.html %}
+    {%- endif -%}
+
+    {%- if site.theme_config.show_code_copy and page.layout == "post" -%}
+      {% include code_copy.html %}
+    {%- endif -%}
+
+    {%- if site.theme_config.show_footnote_tooltips and page.layout == "post" -%}
+      {% include footnotes.html %}
+    {%- endif -%}
+
+    {%- if site.theme_config.show_link_previews and page.layout == "post" -%}
+      {% include link_preview.html %}
+    {%- endif -%}
+
+    {%- if site.theme_config.show_back_to_top and page.layout == "post" -%}
+      {% include back_to_top.html %}
+    {%- endif -%}
+  </body>
+</html>

data/_layouts/home.html

@@ -0,0 +1,45 @@
+---
+layout: default
+---
+
+<header>
+{% if site.theme_config.show_navbar == true %}
+  {% include horizontal_list.html collection=site.data.home.navbar_entries %}
+  <div class="dashed"></div>
+{% endif %}
+
+  <h1>{{ site.title }}</h1>
+  {% if site.theme_config.show_description == true %}
+    <p>{{ site.description }}</p>
+  {% endif %}
+</header>
+
+{{ content }}
+
+{% if site.theme_config.show_projects == true %}
+  <h2>{{ site.theme_config.home.title_projects }}</h2>
+  {% include card_list.html collection=site.data.home.project_entries %}
+{% endif %}
+
+{% if site.theme_config.show_misc_list == true %}
+  <h2>{{ site.theme_config.home.title_misc_list }}</h2>
+  {% include vertical_list.html collection=site.data.home.misc_entries %}
+{% endif %}
+
+{% if site.theme_config.show_blog == true %}
+  <h2>{{ site.theme_config.home.title_blog }}</h2>
+  {% include post_list.html %}
+{% endif %}
+
+{% if site.theme_config.show_old_projects == true %}
+  <h2>{{ site.theme_config.home.title_old_projects }}</h2>
+  {% include card_list.html collection=site.data.home.old_project_entries %}
+{% endif %}
+
+
+{% if site.theme_config.show_footer == true %}
+  <footer>
+    <div class="dashed"></div>
+    {% include horizontal_list.html collection=site.data.home.footer_entries %}
+  </footer>
+{% endif %}

data/_layouts/post.html

@@ -0,0 +1,23 @@
+---
+layout: default
+---
+
+<a href="javascript:history.back()" class="back-link" aria-label="Go back">
+  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <polyline points="15 18 9 12 15 6"></polyline>
+  </svg>
+</a>
+<h1 class="post-title">{{ page.title }}</h1>
+{% include date_and_social_share.html %}
+
+{%- if site.theme_config.show_toc and page.toc -%}
+  {% include toc.html %}
+{%- endif -%}
+
+<div class="post-content{% if page.dropcap %} has-dropcap{% endif %}">
+  {{ content }}
+</div>
+
+{%- if site.theme_config.show_post_nav -%}
+  {% include post_nav.html %}
+{%- endif -%}

data/_sass/list.scss

@@ -0,0 +1,75 @@
+ul.horizontal-list {
+  display: flex;
+  margin-top: 0em;
+  padding-left: 0;
+  list-style: none;
+  flex-wrap: wrap;
+  font-family: var(--font-sans);
+  gap: 0.8em;
+
+  li {
+    display: inline;
+  }
+
+  li a {
+    text-decoration: none;
+    font-weight: 500;
+  }
+
+  li:not(.card) {
+    margin-right: 1em;
+  }
+}
+
+.card {
+  padding: 1.1em 1.15em;
+  border: 1px solid var(--border);
+  width: calc(33.333% - 0.6em);
+  box-sizing: border-box;
+  height: auto;
+  text-align: left;
+  font-size: 1em;
+  align-items: flex-start;
+  background-color: var(--bg-subtle);
+  border-radius: var(--radius-md);
+  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
+
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
+    border-color: var(--links);
+  }
+
+  .header {
+    color: var(--links);
+    font-weight: 600;
+    letter-spacing: -0.005em;
+  }
+
+  .body {
+    font-size: 0.85em;
+    color: var(--text-secondary);
+    line-height: 1.55;
+  }
+
+  hr {
+    margin: 0.5em 0;
+    border: none;
+    border-top: 1px solid var(--border-subtle);
+  }
+}
+
+/* Responsive cards - one column layout on small screens */
+@media screen and (max-width: 600px) {
+  ul.horizontal-list li.card {
+    width: 100%;
+    display: block;
+    a, .header {
+      font-size: 1em;
+    }
+  }
+  .card:hover {
+    transform: none;
+    box-shadow: none;
+  }
+}