moonwalk 0.1.2 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2967d34ac4d69b0a22ed559b8332cccebe5c2cdd371ce09fa4566bdb384caac1
-  data.tar.gz: 63d7e752098c997ee32d0c25e6c2eb3103c19a689edade42b524a462d86030fc
+  metadata.gz: c5e02cb1df7e558c3ccdda484e3bc9b6c6b29087c8691c7fdcea20b5610fbe62
+  data.tar.gz: b2fa5b617e6d9c030274cc51ac6900bbd1e13cc8f298313f915a9e6924e9d2c6
 SHA512:
-  metadata.gz: 75da973db880f5071dd744bd4da7490c5ce319428e31bc38b9375f037dcf636e9bc2a326128df29f7ba0bfe1045c42cd31445a5a563548e69360a4b26cf63e40
-  data.tar.gz: 408605ab11b60c50086241c69c291d7d66e55d08ef524a7cfce49473df0406c468e2ee31ac494d29abbb045edc8840dbbe40c8042783e05f419a19cfbc526113
+  metadata.gz: dae6d3047030c1bf2e97dfd78f7daccf626722cc1bfc7c221f2cbfd8f7a67a816957ed1188387e0579a5bafedf690b15e72946efee248bc0d1da3eac32a90445
+  data.tar.gz: 8e991204aba28ef6f7734f591b5675b34069c1df209c1e857c9033af46f987a8e6dc96950a4659a9b4ba49a6a268a67fa32db8b4132e04ceed5a2324d8e3d51c

data/README.md

@@ -8,13 +8,32 @@
 </h3>
 
 ## Features
-* Light & dark mode with theme switcher
+* Light & dark mode with theme switcher (respects `prefers-reduced-motion`)
+* Typeset in [Geist](https://vercel.com/font) (body & headings) and [Geist Mono](https://vercel.com/font) (code)
+* [Agent-friendly out of the box](#agent-friendly-by-default) - per-page `.md` siblings, `/llms.txt`, and `/llms-full.txt`
+* Built-in client-side search over post titles, tags, and excerpts
+* Hover-preview cards on internal post links (opt-in)
+* Footnote tooltips - read footnotes inline without scrolling (opt-in)
+* Smooth page transitions via the View Transitions API in supporting browsers
+* Drop-cap on the first paragraph of a post (opt-in via `dropcap: true`)
+* Tag cloud with frequency-weighted sizing on the tag archive
+* Personality 404 with random-post link
 * Vertical list, horizontal list, card list
 * Landing page with navbar, footer, portfolio
 * Fast (very minimal CSS) - 100/100 on performance, accessibility, best practices and SEO, please see [Lighthouse Report](https://raw.githubusercontent.com/abhinavs/moonwalk/master/_screenshots/lighthouse-report.png) for more details
 * Responsive and mobile friendly
-* SEO optimized (uses [Jekyll Soopr SEO Tag](https://github.com/jekyll/jekyll-soopr-seo-tag))
+* SEO optimized with auto-generated sitemap
 * RSS feed (uses [Jekyll Feed](https://github.com/jekyll/jekyll-feed))
+* [GitHub Markdown Alerts](#github-markdown-alerts) (NOTE, TIP, IMPORTANT, WARNING, CAUTION)
+* Polished `<details>` collapsibles for asides and "long version" expansions
+* Tag archive page with clickable tags
+* Light and dark mode syntax highlighting with language label on each code block
+* Accessible - ARIA labels, keyboard friendly
+* Reading progress bar (opt-in)
+* Back-to-top button (opt-in)
+* Previous/next post navigation (opt-in)
+* Table of contents via `toc: true` front matter (opt-in)
+* Code block copy button with language label (opt-in)
 * Easy to extend
 * Fully compatible with [GitHub Pages](https://pages.github.com/) (see [GitHub Pages installation](#github-pages-installation))
 * Auto-generated share images for social media (using [Soopr](https://www.soopr.co))
@@ -52,7 +71,7 @@ For further customization (e.g. layout, CSS) see the [official Jekyll's document
 
 ### Customize the menu
 
-In order to add/edit/delete entries in the home page, you can copy the `home.yml` file inside `_data` folder. Through that file you can define the structure of the menu and add data for navbar, footer, portfolio or simply remove all of that and use simple blog layout. Take a look at the default configuration to get an idea of how it works and read on for a more comprehensive explaination.
+In order to add/edit/delete entries in the home page, you can copy the `home.yml` file inside `_data` folder. Through that file you can define the structure of the menu and add data for navbar, footer, portfolio or simply remove all of that and use simple blog layout. Take a look at the default configuration to get an idea of how it works and read on for a more comprehensive explanation.
 
 The `home.yml` file accepts the following fields:
 
@@ -85,47 +104,133 @@ The `home.yml` file accepts the following fields:
   - home - for landing page
   you can change your `index.md` file to use either home or blog layout.
 
-2. It is extremely easy to tweak the color scheme. 
+2. It is extremely easy to tweak the color scheme.
   - for light mode, customize these css variables
 ```css
 html {
-    --bg: #fff;
-    --bg-secondary: #f8f9fa;
-    --headings: #000;
-    --text: #333;
-    --links: blue;
+    --bg: #fcfcfc;
+    --bg-secondary: #f1f2f4;
+    --bg-subtle: #f6f7f8;
+    --headings: #0f172a;
+    --text: #2b2f36;
+    --text-secondary: #5b6470;
+    --links: #4f46e5;
     --highlight: #ffecb2; // light yellow
+    --code-text: #9d174d;
 }
 ```
   - for dark mode customize these css variables
 ```css
 @mixin dark-appearance {
   html, body  {
-      --bg: #1f242A;
-      --bg-secondary: #323945;
-      --headings: #3D9970;
-      --text: #adb5bd;
+      --headings: #e6edf3;
       --links: #91a7ff;
-      --highlight: #ffd8a8;
-      --highlight: #ffd43b;
+      --highlight: #41c7c7;
+      --bg: #15161d;
+      --bg-secondary: #23242f;
+      --bg-subtle: #1c1d26;
+      --text: #c4ccd6;
+      --text-secondary: #8b94a3;
+      --code-text: #91a7ff;
   };
 }
 ```
-3. Sign up for free on [Soopr](https://www.soopr.co) and add your `publish_token` in `_config.yml` file - with this, each page gets short URL, like button and auto generated share image for social media.
+
+3. Want different fonts? Moonwalk uses Geist / Geist Mono via two CSS variables. Override them in your own SCSS:
+```css
+:root {
+    --font-sans: "Inter", system-ui, sans-serif;
+    --font-mono: "JetBrains Mono", monospace;
+}
+```
+Don't forget to update the `<link>` to Google Fonts in `_includes/head.html` to match.
+
+### Optional features
+
+Each of these is wired up in `_config.yml` under `theme_config`:
+
+- `show_footnote_tooltips: true` - when readers hover a kramdown footnote ref (`[^1]`), the footnote text appears in a small tooltip instead of forcing a scroll to the bottom.
+- `show_link_previews: true` - hover any internal post link to see a preview card with title, excerpt, and date. Powered by an auto-generated `/search.json` index.
+
+To add **client-side search** anywhere on your site, drop `{% raw %}{% include search.html %}{% endraw %}` into a layout or page. It searches over titles, tags, and excerpts using the same `/search.json`.
+
+To enable a **drop-cap** on a post's opening paragraph, add `dropcap: true` to the post's front matter.
+
+To use the **`<details>` collapsible** style, just write native HTML in your Markdown:
+
+```html
+<details>
+  <summary>Long version</summary>
+  Hidden by default, expanded on click.
+</details>
+```
 
 <img src="https://raw.githubusercontent.com/abhinavs/moonwalk/master/_screenshots/twitter_card.png" />
 
+### Agent-friendly by default
+
+LLM crawlers and coding agents read your site too. Moonwalk ships with two small Jekyll plugins so they can fetch clean Markdown instead of parsing HTML:
+
+- **[jekyll-markdown-output](https://github.com/abhinavs/jekyll-markdown-output)** - emits a `.md` sibling for every post. A page rendered at `/foo` also exists as `/foo.md` with a small frontmatter block and the source Markdown. No layouts, no nav chrome, no theme toggles - just the content.
+- **[jekyll-llms-output](https://github.com/abhinavs/jekyll-llms-output)** - generates `/llms.txt` (a curated index) and `/llms-full.txt` (full content concatenated) following the [llmstxt.org](https://llmstxt.org) spec, so agents can discover and ingest your site in one fetch.
+
+Both are wired up in `_config.yml` with sensible defaults:
+
+```yaml
+plugins:
+  - jekyll-markdown-output
+  - jekyll-llms-output
+
+markdown_output:
+  collections: [posts]
+
+llms_output:
+  index:
+    collections: [posts]
+  full:
+    collections: [posts]
+    respect_markdown_output: true
+```
+
+Set `enabled: false` on either block to turn it off. For curated `llms.txt` content, drop a `_data/llms.yml` file with `title`, `description`, and `sections` - the plugin will use it instead of auto-generating. See each plugin's README for full configuration.
+
+> [!NOTE]
+> GitHub Pages restricts plugins to a [whitelist](https://pages.github.com/versions/), and these two are not on it. If you host on GH Pages, build the site yourself in CI (Actions, Netlify, Cloudflare Pages, Vercel) or remove the plugins.
+
+### GitHub Markdown Alerts
+
+Moonwalk supports [GitHub-style Markdown Alerts](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#alerts). Use them in your posts like this:
+
+```markdown
+> [!NOTE]
+> Useful information that users should know, even when skimming content.
+
+> [!TIP]
+> Helpful advice for doing things better or more easily.
+
+> [!IMPORTANT]
+> Key information users need to know to achieve their goal.
+
+> [!WARNING]
+> Urgent info that needs immediate user attention to avoid problems.
+
+> [!CAUTION]
+> Advises about risks or negative outcomes of certain actions.
+```
+
+All five alert types are styled with color-coded left borders and icons, and work in both light and dark mode.
+
 ## Contributing
 
-Bug reports and pull requests are welcome on GitHub at https://github.com/abhinavs/moonwalk.
+Please see [CONTRIBUTING.md](CONTRIBUTING.md) for development setup and guidelines.
 
 ## Development
 
-To set up your environment to develop this theme, run `bundle install`.
-
-Your theme is setup just like a normal Jekyll site! To test your theme, run `bundle exec jekyll serve` and open your browser at `http://localhost:4000`. This starts a Jekyll server using your theme. Add pages, documents, data, etc. like normal to test your theme's contents. As you make modifications to your theme and to your content, your site will regenerate and you should see the changes in the browser after a refresh, just like normal.
+1. Run `bin/bootstrap` (or `make setup`) to install dependencies
+2. Run `bin/start` (or `make serve`) to start the dev server with live reload at `http://127.0.0.1:4000`
+3. Run `bin/build` (or `make build`) for a production build
 
-When your theme is released, only the files in `_layouts`, `_includes`, `_sass` and `assets` tracked with Git will be bundled.
+When your theme is released, only the files in `_layouts`, `_includes`, `_sass`, `_data`, and `assets` tracked with Git will be bundled.
 To add a custom directory to your theme-gem, please edit the regexp in `moonwalk.gemspec` accordingly.
 
 ## Acknowledgement
@@ -146,6 +251,6 @@ If you like Moonwalk, do check out my other projects
 *   [blockr](https://www.abhinav.co/blockr) - a CLI tool to help you easily block and unblock websites
 *   [microrequests](https://www.abhinav.co/microrequests) - a Python library to help you consume microservice efficiently
 
-✨⚡You can read more about me on my [blog](https://www.abhinav.co/about/) or follow me on Twitter - [@abhinav](https://twitter.com/abhinav)
+You can read more about me on my [blog](https://www.abhinav.co/about/) or follow me on Twitter - [@abhinav](https://twitter.com/abhinav)
 
-✨⚡If you like my work, you can [buy me a coffee](https://buymeacoffee.com/abhinavs)                
+If you like my work, you can [buy me a coffee](https://buymeacoffee.com/abhinavs)

data/_config.yml

@@ -1,16 +1,15 @@
 title: Moonwalk
 author: Abhinav Saxena
-url: https://www.abhinavsaxena.com/moonwalk # root address of the site
+url: https://www.abhinavsaxena.com # root address of the site
+baseurl: "/moonwalk/" # set to "/moonwalk" if hosting under a project subpath
 description: > # description of the site (multiple lines allowed)
   Moonwalk is a fast and elegant Jekyll theme with a clean dark mode. It comes with horizontal list (for navbar and footer), card list (for portfolio), and a generic vertical list. It is very easy to modify in case you want to build over it - please see _layouts/home.html to do that.
 
 permalink: /:slug
 
-favicon: "./logo.png" # relative path to site's favicon
-
 twitter:
-    username: abhinav # update or delete this
-    card: summary_large_image
+  username: abhinav # update or delete this
+  card: summary_large_image
 
 #theme: moonwalk # if you are using GitHub Pages, change it to remote_theme: abhinavs/moonwalk
 remote_theme: abhinavs/moonwalk
@@ -18,7 +17,6 @@ remote_theme: abhinavs/moonwalk
 theme_config:
   appearance: "dark" # can be "light", "dark" or "auto"
   appearance_toggle: true # if appearance can be switched by user
-  back_home_text: "home.." # customize text for homepage link in post layout
   date_format: "%Y-%m-%d" # customize how date is formatted
   show_description: true # show blog description
   show_navbar: true # show horizontal navbar
@@ -30,6 +28,14 @@ theme_config:
   show_old_projects: true # show old projects as cards, add in _data/home.yml
   show_misc_list: false # show generic vertical list for misc details, add _data/home.yml
   show_reading_time: true # show number of words and reading time in the blog posts
+  show_tags: true # show tags in a blog posts
+  show_code_copy: true # show copy button on code blocks
+  show_progress_bar: true # show reading progress bar on posts
+  show_back_to_top: true # show back-to-top button
+  show_post_nav: true # show prev/next links on posts
+  show_toc: true # allow per-post table of contents via toc: true front matter
+  show_footnote_tooltips: true # show footnote text on hover instead of scrolling to bottom
+  show_link_previews: true # show preview cards when hovering internal post links
   # options for "home" page
   home:
     title_projects: Portfolio
@@ -47,4 +53,21 @@ sass:
 
 plugins:
   - jekyll-feed
+  - jekyll-sitemap
   - jekyll-soopr-seo-tag
+  - jekyll-markdown-output
+  - jekyll-llms-output
+
+# Emit a clean .md sibling for each post (e.g. /foo -> /foo.md) so AI agents
+# can fetch source Markdown instead of parsing HTML. Set enabled: false to disable.
+markdown_output:
+  collections: [posts]
+
+# Emit /llms.txt (curated index) and /llms-full.txt (full content) so agents
+# can discover and ingest the site. See https://llmstxt.org for the spec.
+llms_output:
+  index:
+    collections: [posts]
+  full:
+    collections: [posts]
+    respect_markdown_output: true

data/_data/home.yml

@@ -0,0 +1,104 @@
+navbar_entries:
+  - title: about
+    url: about
+
+  - title: blog
+    url: blog
+
+  - title: website
+    url: https://www.abhinav.co
+
+project_entries:
+  - title: Project 1
+    url: overview-post
+    desc: This is an example project, configured in _data/home.yml
+
+  - title: Project 2
+    url: overview-post
+    desc: Projects are shown in card layout
+
+  - title: Project 3
+    url: overview-post
+    desc: You can control visibility from _config.yml file
+
+  - title: Project 4
+    url: overview-post
+    desc: This project uses highlight markup, configured in _data/home.yml
+    highlight: WIP
+
+  - title: Project 5
+    url: overview-post
+    desc: Moonwalk also has horizontal list (used in header and footer)
+    highlight: WIP
+
+  - title: Project 6
+    url: overview-post
+    desc: It also has a scalable vertical list (in case you need it)
+
+old_project_entries:
+  - title: Soopr
+    url: https://www.soopr.co
+    desc: Delight your readers - add beautiful share and like buttons easily to your websites 
+    highlight: NEW
+
+  - title: Cookie
+    url: https://github.com/abhinavs/cookie
+    desc: An open source landing website with supporting pages and integrated blog
+
+  - title: Moonwalk
+    url: https://github.com/abhinavs/moonwalk
+    desc: A fast and minimalist Jekyll blog theme with clean dark mode
+
+  - title: Humangous
+    url: https://www.humangous.co
+    desc: The better people know you, the better they collaborate
+
+footer_entries:
+  - title: abhinav's homepage
+    url: https://www.abhinav.co
+
+  - title: twitter
+    url: https://twitter.com/abhinav
+
+  - title: github
+    url: https://github.com/abhinavs
+
+  - title: feed
+    url: feed.xml
+
+  - title: llms.txt
+    url: llms.txt
+
+misc_entries:
+  - title: this is an example vertical list
+    url: false
+
+  - title: you can show or hide using a boolean flag in _config.yml
+    url: false
+
+  - title: and you can add data in _data/home.yml
+    url: false
+
+  - title: Blog posts
+    post_list: true
+    url: false
+
+  - title: moonwalk on the Internet
+    url: false
+    entries:
+      - title: on Github
+        url: https://github.com/abhinavs/moonwalk
+
+      - title: originally built for abhinav's homepage
+        url: https://www.abhinav.co
+
+      - title: this list is scalable and can be nested
+        url: false
+        entries:
+          - title: this is nested inside a nested list
+            url: false
+
+          - title: it is easy to use, see _data/home.yml to see how to configure it.
+            url: false
+
+

data/_includes/back_to_top.html

@@ -0,0 +1,53 @@
+<button class="back-to-top" aria-label="Back to top" onclick="window.scrollTo({top:0,behavior:'smooth'})">
+  <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="18 15 12 9 6 15"></polyline>
+  </svg>
+</button>
+<style>
+  .back-to-top {
+    position: fixed;
+    bottom: 2em;
+    right: 2em;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    border: 1px solid var(--border);
+    background: var(--bg-secondary);
+    color: var(--text);
+    cursor: pointer;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.3s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 50;
+  }
+  .back-to-top.visible {
+    opacity: 1;
+    pointer-events: auto;
+  }
+  .back-to-top:hover {
+    color: var(--links);
+  }
+  @media screen and (max-width: 600px) {
+    .back-to-top {
+      bottom: 1em;
+      right: 1em;
+      width: 36px;
+      height: 36px;
+    }
+  }
+</style>
+<script>
+(function() {
+  var btn = document.querySelector('.back-to-top');
+  window.addEventListener('scroll', function() {
+    if (window.scrollY > 400) {
+      btn.classList.add('visible');
+    } else {
+      btn.classList.remove('visible');
+    }
+  });
+})();
+</script>

data/_includes/code_copy.html

@@ -0,0 +1,31 @@
+<script>
+(function() {
+  document.querySelectorAll('div.highlighter-rouge').forEach(function(block) {
+    block.style.position = 'relative';
+
+    // Language label derived from rouge's language-* class
+    var langClass = Array.from(block.classList).find(function(c) {
+      return c.indexOf('language-') === 0 && c !== 'language-plaintext';
+    });
+    if (langClass) {
+      var label = document.createElement('span');
+      label.className = 'code-lang';
+      label.textContent = langClass.replace('language-', '');
+      block.appendChild(label);
+    }
+
+    var btn = document.createElement('button');
+    btn.className = 'code-copy';
+    btn.setAttribute('aria-label', 'Copy code to clipboard');
+    btn.textContent = 'copy';
+    btn.addEventListener('click', function() {
+      var code = block.querySelector('code');
+      navigator.clipboard.writeText(code.innerText).then(function() {
+        btn.textContent = 'copied!';
+        setTimeout(function() { btn.textContent = 'copy'; }, 2000);
+      });
+    });
+    block.appendChild(btn);
+  });
+})();
+</script>

data/_includes/date_and_social_share.html

@@ -1,25 +1,32 @@
-<p class="post-date text-bold text-upcase">
-  {% if page.author %}
-    <span class="text-bold">{{ page.author }}</span> / 
-  {% endif %}
-  {% if page.date %}
-    <span>{{ page.date | date: "%B %Y"}}</span>
+<div class="post-meta">
+  <div class="post-meta-line">
+    {% if page.author %}
+      <span class="post-meta-author">{{ page.author }}</span>
+      <span class="post-meta-sep">·</span>
+    {% endif %}
+    {% if page.date %}
+      <time class="post-meta-date" datetime="{{ page.date | date_to_xmlschema }}">
+        {{ page.date | date: "%B %-d, %Y" }}
+      </time>
+    {% endif %}
+    {% if site.theme_config.show_reading_time == true %}
+      {% capture words %}{{ content | number_of_words | minus: 180 }}{% endcapture %}
+      {% unless words contains '-' %}
+        <span class="post-meta-sep">·</span>
+        <span class="post-meta-reading">{{ words | plus: 180 | divided_by: 180 }} min read</span>
+      {% endunless %}
+    {% endif %}
+  </div>
+
+  {% if site.theme_config.show_tags == true and page.tags %}
+    <div class="post-meta-tags">
+      {% for tag in page.tags %}
+        <a href="{{ "/tags" | relative_url }}#{{ tag | slugify }}" class="tag">{{ tag }}</a>
+      {% endfor %}
+    </div>
   {% endif %}
-</p>
 
-<div class="soopr-btn"
-   data-twitter="SooprCo"
->
+  <div class="soopr-btn"
+     {% if site.twitter.username %}data-twitter="{{ site.twitter.username }}"{% endif %}
+  ></div>
 </div>
-
-{% if site.theme_config.show_reading_time == true %}
-<p class="post-date text-bold">
-  {% capture words %}
-  {{ content | number_of_words | minus: 180 }}
-  {% endcapture %}
-  {% unless words contains '-' %}
-  {{ words | append: ' Words, ' }}
-  {{ words | plus: 180 | divided_by: 180 | append: ' Minutes' }}
-  {% endunless %}
-</p>
-{% endif %}

data/_includes/footnotes.html

@@ -0,0 +1,39 @@
+<script>
+(function() {
+  // Render a small tooltip preview when hovering/tapping kramdown-generated
+  // footnote refs (e.g. <a href="#fn:1">1</a>) so readers don't have to
+  // scroll to the bottom of the post.
+  var refs = document.querySelectorAll('a.footnote, sup a[href^="#fn"]');
+  if (!refs.length) return;
+
+  var tip = document.createElement('div');
+  tip.className = 'fn-tooltip';
+  tip.setAttribute('role', 'tooltip');
+  document.body.appendChild(tip);
+
+  function show(ref) {
+    var id = ref.getAttribute('href').slice(1);
+    var fn = document.getElementById(id);
+    if (!fn) return;
+    var clone = fn.cloneNode(true);
+    var back = clone.querySelector('.reversefootnote, a[href^="#fnref"]');
+    if (back) back.remove();
+    tip.innerHTML = clone.innerHTML;
+
+    var rect = ref.getBoundingClientRect();
+    var top = window.scrollY + rect.bottom + 8;
+    var left = Math.max(12, window.scrollX + rect.left - 12);
+    tip.style.top = top + 'px';
+    tip.style.left = left + 'px';
+    tip.classList.add('visible');
+  }
+  function hide() { tip.classList.remove('visible'); }
+
+  refs.forEach(function(ref) {
+    ref.addEventListener('mouseenter', function() { show(ref); });
+    ref.addEventListener('mouseleave', hide);
+    ref.addEventListener('focus', function() { show(ref); });
+    ref.addEventListener('blur', hide);
+  });
+})();
+</script>

data/_includes/github_alerts.html

@@ -0,0 +1,41 @@
+<script>
+  document.addEventListener("DOMContentLoaded", function () {
+    var defined_alerts = {
+      NOTE:      { icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"></path></svg>', label: 'Note' },
+      TIP:       { icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M8 1.5c-2.363 0-4 1.69-4 3.75 0 .984.424 1.625.984 2.304l.214.253c.223.264.47.556.673.848.284.411.537.896.621 1.49a.75.75 0 0 1-1.484.211c-.04-.282-.163-.547-.37-.847a8.456 8.456 0 0 0-.542-.68c-.084-.1-.173-.205-.268-.32C3.201 7.75 2.5 6.766 2.5 5.25 2.5 2.31 4.863 0 8 0s5.5 2.31 5.5 5.25c0 1.516-.701 2.5-1.328 3.259-.095.115-.184.22-.268.319-.207.245-.383.453-.541.681-.208.3-.33.565-.37.847a.751.751 0 0 1-1.485-.212c.084-.593.337-1.078.621-1.489.203-.292.45-.584.673-.848.075-.088.147-.173.213-.253.561-.679.985-1.32.985-2.304 0-2.06-1.637-3.75-4-3.75ZM5.75 12h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1 0-1.5ZM6 15.25a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1-.75-.75Z"></path></svg>', label: 'Tip' },
+      IMPORTANT: { icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v9.5A1.75 1.75 0 0 1 14.25 13H8.06l-2.573 2.573A1.458 1.458 0 0 1 3 14.543V13H1.75A1.75 1.75 0 0 1 0 11.25Zm1.75-.25a.25.25 0 0 0-.25.25v9.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h6.5a.25.25 0 0 0 .25-.25v-9.5a.25.25 0 0 0-.25-.25Zm7 2.25v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 9a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path></svg>', label: 'Important' },
+      WARNING:   { icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path></svg>', label: 'Warning' },
+      CAUTION:   { icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M4.47.22A.749.749 0 0 1 5 0h6c.199 0 .389.079.53.22l4.25 4.25c.141.14.22.331.22.53v6a.749.749 0 0 1-.22.53l-4.25 4.25A.749.749 0 0 1 11 16H5a.749.749 0 0 1-.53-.22L.22 11.53A.749.749 0 0 1 0 11V5c0-.199.079-.389.22-.53Zm.84 1.28L1.5 5.31v5.38l3.81 3.81h5.38l3.81-3.81V5.31L10.69 1.5ZM8 4a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 8 4Zm0 8a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"></path></svg>', label: 'Caution' }
+    };
+
+    var blockquotes = document.querySelectorAll("blockquote");
+    for (var i = 0; i < blockquotes.length; i++) {
+      var bq = blockquotes[i];
+      var firstP = bq.querySelector("p:first-child");
+      if (!firstP) continue;
+
+      var text = firstP.innerHTML;
+      var match = text.match(/^\[!(NOTE|TIP|IMPORTANT|WARNING|CAUTION)\]\s*(<br\s*\/?>)?/);
+      if (!match) continue;
+
+      var type = match[1];
+      var alert = defined_alerts[type];
+
+      // Remove the marker from the paragraph text
+      firstP.innerHTML = text.replace(match[0], "").trim();
+
+      // If the paragraph is now empty, remove it
+      if (!firstP.innerHTML) {
+        firstP.remove();
+      }
+
+      // Build the alert title
+      var title = document.createElement("p");
+      title.className = "markdown-alert-title";
+      title.innerHTML = alert.icon + " " + alert.label;
+      bq.insertBefore(title, bq.firstChild);
+
+      bq.classList.add("markdown-alert", "markdown-alert-" + type.toLowerCase());
+    }
+  });
+</script>

data/_includes/head.html

@@ -14,7 +14,25 @@
   {% seo title=false %}
   {% feed_meta %}
 
-  <link rel="shortcut icon" type="image/x-icon" href="/{{ site.favicon | relative_url }}" />
+  <!-- Favicon -->
+  <link rel="apple-touch-icon" sizes="180x180" href="{{ "/assets/images/favicon/apple-touch-icon.png" | relative_url }}">
+  <link rel="icon" type="image/png" sizes="32x32" href="{{ "/assets/images/favicon/favicon-32x32.png" | relative_url }}">
+  <link rel="icon" type="image/png" sizes="16x16" href="{{ "/assets/images/favicon/favicon-16x16.png" | relative_url }}">
+  <link rel="manifest" href="{{ "/assets/images/favicon/site.webmanifest" | relative_url }}">
+  <link rel="mask-icon" href="{{ "/assets/images/favicon/safari-pinned-tab.svg" | relative_url }}" color="#5bbad5">
+  <link rel="shortcut icon" href="{{ "/assets/images/favicon/favicon.ico" | relative_url }}">
+  <meta name="msapplication-TileColor" content="#00aba9">
+  <meta name="msapplication-config" content="{{ "/assets/images/favicon/browserconfig.xml" | relative_url }}">
+  <meta name="theme-color" content="#ffffff">
+  <!-- Favicon -->
+
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap" rel="stylesheet">
+  {%- if site.soopr -%}
+  <link rel="dns-prefetch" href="https://sdk.soopr.co">
+  {%- endif -%}
+
   <link rel="stylesheet" href="{{ "/assets/css/main.css" | relative_url }}" />
   {% if site.theme_config.appearance_toggle %}
     {% include toggle_theme_js.html %}