moonwalk 0.1.2 → 0.3.0

data/_includes/link_preview.html

@@ -0,0 +1,56 @@
+<script>
+(function() {
+  // Hover any internal post link to see a small preview card with title,
+  // excerpt and date. Pulls from /search.json which is a Jekyll-generated
+  // index of all posts.
+  var postIndex = null;
+  var loading = null;
+
+  function loadIndex() {
+    if (loading) return loading;
+    loading = fetch('{{ "/search.json" | relative_url }}')
+      .then(function(r) { return r.ok ? r.json() : []; })
+      .then(function(data) { postIndex = data; return data; })
+      .catch(function() { postIndex = []; return []; });
+    return loading;
+  }
+
+  var card = document.createElement('div');
+  card.className = 'link-preview';
+  document.body.appendChild(card);
+  var hideTimer;
+
+  function show(link, post) {
+    card.innerHTML =
+      '<div class="lp-title">' + escape(post.title) + '</div>' +
+      (post.excerpt ? '<div class="lp-excerpt">' + escape(post.excerpt) + '</div>' : '') +
+      '<div class="lp-meta">' + escape(post.date || '') + '</div>';
+    var rect = link.getBoundingClientRect();
+    card.style.top = (window.scrollY + rect.bottom + 8) + 'px';
+    card.style.left = Math.max(12, window.scrollX + rect.left) + 'px';
+    card.classList.add('visible');
+  }
+  function hide() {
+    hideTimer = setTimeout(function() { card.classList.remove('visible'); }, 100);
+  }
+  function escape(s) {
+    return String(s || '').replace(/[&<>"']/g, function(c) {
+      return { '&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;' }[c];
+    });
+  }
+
+  document.querySelectorAll('.page-content a[href^="/"], .page-content a[href^="{{ site.url }}"]').forEach(function(link) {
+    link.addEventListener('mouseenter', function() {
+      clearTimeout(hideTimer);
+      loadIndex().then(function(idx) {
+        var href = link.getAttribute('href').replace('{{ site.url }}', '');
+        var match = idx.find(function(p) { return p.url === href || p.url === href + '/'; });
+        if (match) show(link, match);
+      });
+    });
+    link.addEventListener('mouseleave', hide);
+  });
+  card.addEventListener('mouseenter', function() { clearTimeout(hideTimer); });
+  card.addEventListener('mouseleave', hide);
+})();
+</script>

data/_includes/post_nav.html

@@ -0,0 +1,10 @@
+{% if page.previous or page.next %}
+<nav class="post-nav" aria-label="Post navigation">
+  {% if page.previous %}
+    <a class="post-nav-prev" href="{{ page.previous.url | relative_url }}">&larr; {{ page.previous.title }}</a>
+  {% endif %}
+  {% if page.next %}
+    <a class="post-nav-next" href="{{ page.next.url | relative_url }}">{{ page.next.title }} &rarr;</a>
+  {% endif %}
+</nav>
+{% endif %}

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

@@ -1,10 +1,16 @@
-<button title="Toggle Theme" class="theme-toggle">
-  <svg viewBox="0 0 32 32" width="24" height="24" fill="currentcolor">
-    <circle cx="16" cy="16" r="14" fill="none" stroke="currentcolor" stroke-width="4"></circle>
-    <path d="
-             M 16 0
-             A 16 16 0 0 0 16 32
-             z">
-    </path>
+<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

@@ -5,27 +5,32 @@
     document.documentElement.setAttribute('data-theme', currentTheme);
 
   function themeChange() {
-    let button = document.querySelector('.theme-toggle');
+    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) {
-      let currentTheme = document.documentElement.getAttribute('data-theme');
-      if (currentTheme === 'dark') {
-        transition();
-        document.documentElement.setAttribute('data-theme', 'light');
-        localStorage.setItem('theme', 'light');
-      } else {
-        transition();
-        document.documentElement.setAttribute('data-theme', 'dark');
-        localStorage.setItem('theme', 'dark');
-      }
+      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);
     });
 
-    let transition = () => {
+    function transition() {
       document.documentElement.classList.add('transition');
-      window.setTimeout(() => {
+      window.setTimeout(function () {
         document.documentElement.classList.remove('transition');
       }, 1000);
     }
   }
 </script>
-

data/_layouts/blog.html

@@ -1,7 +1,11 @@
 ---
 layout: default
 ---
-<a href="{{ "/" | relative_url }}">{{ site.theme_config.back_home_text }}</a>
+<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>

data/_layouts/default.html

@@ -2,6 +2,9 @@
 <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 }}
@@ -16,16 +19,36 @@
           &nbsp;
           {%- endif -%}
           {%- if site.soopr -%}
-          Powered by <a href="https://www.soopr.co" target="_blank" rel="noreferrer">Soopr</a>
+          Powered by <a href="https://www.soopr.co" target="_blank" rel="noopener noreferrer">Soopr</a>
           &nbsp;
           •
           &nbsp;
           {%- endif -%}
-          Theme&nbsp; <a href="https://github.com/abhinavs/moonwalk" target="_blank" rel="noreferrer">Moonwalk</a>
+          Theme&nbsp; <a href="https://github.com/abhinavs/moonwalk" target="_blank" rel="noopener noreferrer">Moonwalk</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 -%}
+
     {%- if site.soopr -%}
       {%- if site.soopr.publish_token and jekyll.environment == "production" -%}
         <script async defer data-soopr-token="{{site.soopr.publish_token}}" src="https://sdk.soopr.co/soopr.js"></script>

data/_layouts/post.html

@@ -2,7 +2,22 @@
 layout: default
 ---
 
-<a href="{{ "/" | relative_url }}">{{ site.theme_config.back_home_text }}</a>
+<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 %}
-{{ content }}
+
+{%- 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

@@ -1,46 +1,62 @@
 ul.horizontal-list {
   display: flex;
-  //justify-content: space-between;
   margin-top: 0em;
-  margin-left: -40px;
+  padding-left: 0;
+  list-style: none;
   flex-wrap: wrap;
+  font-family: var(--font-sans);
+  gap: 0.8em;
 
   li {
-    display:inline;
-    margin-right: 1em;
+    display: inline;
   }
 
   li a {
     text-decoration: none;
-    font-weight: normal
+    font-weight: 500;
   }
 
+  li:not(.card) {
+    margin-right: 1em;
+  }
 }
 
 .card {
-  padding: 1em;
-  border: 1px var(--text) solid;
-  width: 11em;
+  padding: 1.1em 1.15em;
+  border: 1px solid var(--border);
+  width: calc(33.333% - 0.6em);
+  box-sizing: border-box;
   height: auto;
-  text-align: center;
+  text-align: left;
   font-size: 1em;
-  align-items: center;
-  background-color: var(--bg-secondary);
-  margin-bottom: 0.8em;
-  border-radius: 0.8em;
+  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 4px 16px rgba(0,0,0,0.06);
+    border-color: var(--links);
+  }
 
   .header {
     color: var(--links);
+    font-weight: 600;
+    letter-spacing: -0.005em;
   }
 
   .body {
-    font-size: 0.8em;
+    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 */
@@ -48,10 +64,12 @@ ul.horizontal-list {
   ul.horizontal-list li.card {
     width: 100%;
     display: block;
-    margin-bottom: 1em;
-    margin-left: 1em;
     a, .header {
       font-size: 1em;
     }
   }
+  .card:hover {
+    transform: none;
+    box-shadow: none;
+  }
 }