✨ relative_path filter

404.html

@@ -2,4 +2,4 @@
 layout: page
 title: Uh oh.
 ---
-Looks like I lost that one, sorry. Maybe check the <a href="/blog/">archive</a>?
+Looks like I lost that one, sorry. Maybe check the <a href="{{ "/blog" | relative_path  }}">archive</a>?

Gemfile.lock

@@ -3,15 +3,20 @@ GEM
   specs:
     addressable (2.8.1)
       public_suffix (>= 2.0.2, < 6.0)
+    ast (2.4.2)
+    backport (1.2.0)
+    benchmark (0.2.1)
     colorator (1.1.0)
     concurrent-ruby (1.1.10)
+    diff-lcs (1.5.0)
+    e2mmap (0.1.0)
     em-websocket (0.5.3)
       eventmachine (>= 0.12.9)
       http_parser.rb (~> 0)
     ethon (0.16.0)
       ffi (>= 1.15.0)
     eventmachine (1.2.7)
-    faraday (2.7.1)
+    faraday (2.7.2)
       faraday-net_http (>= 2.0, < 3.1)
       ruby2_keywords (>= 0.0.4)
     faraday-net_http (3.0.2)
@@ -29,6 +34,7 @@ GEM
     http_parser.rb (0.8.0)
     i18n (1.12.0)
       concurrent-ruby (~> 1.0)
+    jaro_winkler (1.5.4)
     jekyll (4.3.1)
       addressable (~> 2.4)
       colorator (~> 1.0)
@@ -56,6 +62,7 @@ GEM
       sassc (> 2.0.1, < 3.0)
     jekyll-watch (2.2.1)
       listen (~> 3.0)
+    json (2.6.3)
     kramdown (2.4.0)
       rexml
     kramdown-parser-gfm (1.1.0)
@@ -73,6 +80,8 @@ GEM
       faraday (>= 1, < 3)
       sawyer (~> 0.9)
     parallel (1.22.1)
+    parser (3.1.3.0)
+      ast (~> 2.4.1)
     pathutil (0.16.2)
       forwardable-extended (~> 2.6)
     public_suffix (5.0.1)
@@ -81,8 +90,24 @@ GEM
     rb-fsevent (0.11.2)
     rb-inotify (0.10.1)
       ffi (~> 1.0)
+    regexp_parser (2.6.1)
+    reverse_markdown (2.1.1)
+      nokogiri
     rexml (3.2.5)
     rouge (4.0.0)
+    rubocop (1.40.0)
+      json (~> 2.3)
+      parallel (~> 1.10)
+      parser (>= 3.1.2.1)
+      rainbow (>= 2.2.2, < 4.0)
+      regexp_parser (>= 1.8, < 3.0)
+      rexml (>= 3.2.5, < 4.0)
+      rubocop-ast (>= 1.23.0, < 2.0)
+      ruby-progressbar (~> 1.7)
+      unicode-display_width (>= 1.4.0, < 3.0)
+    rubocop-ast (1.24.0)
+      parser (>= 3.1.1.0)
+    ruby-progressbar (1.11.0)
     ruby2_keywords (0.0.5)
     safe_yaml (1.0.5)
     sassc (2.4.0)
@@ -90,12 +115,31 @@ GEM
     sawyer (0.9.2)
       addressable (>= 2.3.5)
       faraday (>= 0.17.3, < 3)
+    solargraph (0.47.2)
+      backport (~> 1.2)
+      benchmark
+      bundler (>= 1.17.2)
+      diff-lcs (~> 1.4)
+      e2mmap
+      jaro_winkler (~> 1.5)
+      kramdown (~> 2.3)
+      kramdown-parser-gfm (~> 1.1)
+      parser (~> 3.0)
+      reverse_markdown (>= 1.0.5, < 3)
+      rubocop (>= 0.52)
+      thor (~> 1.0)
+      tilt (~> 2.0)
+      yard (~> 0.9, >= 0.9.24)
     terminal-table (3.0.2)
       unicode-display_width (>= 1.1.1, < 3)
+    thor (1.2.1)
+    tilt (2.0.11)
     typhoeus (1.4.0)
       ethon (>= 0.9.0)
     unicode-display_width (2.3.0)
     webrick (1.7.0)
+    yard (0.9.28)
+      webrick (~> 1.7.0)
     yell (2.2.2)
     zeitwerk (2.6.6)
 
@@ -109,6 +153,7 @@ DEPENDENCIES
   jekyll-feed
   jekyll-gist
   jekyll-postcss
+  solargraph
 
 BUNDLED WITH
    2.2.20

_includes/article_list.html

@@ -1,4 +1,4 @@
 <article class="h-entry">
   <time class="dt-published" datetime="{{ post.date | datetime | date_to_xmlschema }}" pubdate>{{ post.date | date: "%B %d" }}</time>
-  <a href="{{ post.url }}" class="u-url p-name">{{post.title}}</a>
+  <a href="{{ post.url | relative_path }}" class="u-url p-name">{{post.title}}</a>
 </article>

_includes/post.html

@@ -1,11 +1,11 @@
 <article class="h-entry prose lg:prose-lg" role="article">
   <header>
     <h1 class="p-name">{{ post.title }}</h1>
-    <time class="dt-published" datetime="{{ post.date | datetime | date_to_xmlschema }}" pubdate><a class="u-url" href="{{ post.url }}">{{ post.date | date: "%B %d, %Y" }}</a></time>
+    <time class="dt-published" datetime="{{ post.date | datetime | date_to_xmlschema }}" pubdate><a class="u-url" href="{{ post.url | relative_path }}">{{ post.date | date: "%B %d, %Y" }}</a></time>
   </header>
   {% if post.image %}
   <figure class="-mx-12">
-    <img class="u-featured rounded-md shadow-md w-full" src="{{ post.image }}" alt="{{ post.title }}">
+    <img class="u-featured rounded-md shadow-md w-full" src="{{ post.image | relative_path }}" alt="{{ post.title }}">
     {% if post.image_source %}
     <figcaption>
       <cite><a href="{{ post.image_source }}">{{ post.image_source }}</a></cite>

_layouts/default.html

@@ -3,8 +3,8 @@
 <head>
   <title>{% if page.title %}{{ page.title }} | {% endif %}{{ site.title }}</title>
   {% include meta.html %}
-  <link href="/css/main.css" media="screen, projection" rel="stylesheet" type="text/css">
+  <link href="{{ "/css/main.css" | relative_path }}" media="screen, projection" rel="stylesheet" type="text/css">
-  <link href="/atom.xml" rel="alternate" title="{{site.title}}" type="application/atom+xml">
+  <link href="{{ "/atom.xml" | relative_path }}" rel="alternate" title="{{site.title}}" type="application/atom+xml">
   <script defer data-domain="walkah.net" src="https://plausible.io/js/script.js"></script>
 </head>
 <body class="bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">

_layouts/post.html

@@ -8,7 +8,7 @@ layout: default
   </header>
   {% if page.image %}
   <figure class="md:-mx-12">
-    <img class="u-featured rounded-md shadow-md w-full" src="{{ page.image }}" alt="{{ page.title }}">
+    <img class="u-featured rounded-md shadow-md w-full" src="{{ page.image | relative_path }}" alt="{{ page.title }}">
     {% if page.image_source %}
     <figcaption>
       <cite><a href="{{ page.image_source }}">{{ page.image_source }}</a></cite>
@@ -21,8 +21,8 @@ layout: default
   </section>
   <footer class="flex flex-row not-prose">
     <div rel="author" class="p-author h-card basis-1/2">
-      <img class="u-photo w-8 inline-block" src="/images/walkah-avatar.png" >
+      <img class="u-photo w-8 inline-block" src="{{ "/images/walkah-avatar.png" | relative_path }}" >
-      <a href="/">walkah</a>
+      <a href="{{ "/" | relative_path }}">walkah</a>
     </div>
     <div class="text-right basis-1/2">{{ page.tags | tag_links }}</div>
   </footer>

_plugins/relative_path.rb

@@ -0,0 +1,10 @@
+module Jekyll
+  module RelativePath
+    def relative_path(url)
+      page_url = @context.registers[:page]['url']
+      Pathname(url).relative_path_from(Pathname(page_url)).to_s
+    end
+  end
+end
+
+Liquid::Template.register_filter(Jekyll::RelativePath)

_plugins/tag_index.rb

@@ -5,12 +5,12 @@ module Jekyll
       @base = base
       @dir = dir
       @name = 'index.html'
-      self.process(@name)
+      process(@name)
-      self.read_yaml(File.join(base, '_layouts'), 'tag_index.html')
+      read_yaml(File.join(base, '_layouts'), 'tag_index.html')
-      self.data['tag'] = tag
+      data['tag'] = tag
       tag_title_prefix = site.config['tag_title_prefix'] || 'Posts Tagged “'
       tag_title_suffix = site.config['tag_title_suffix'] || '”'
-      self.data['title'] = "#{tag_title_prefix}#{tag}#{tag_title_suffix}"
+      data['title'] = "#{tag_title_prefix}#{tag}#{tag_title_suffix}"
     end
   end
 
@@ -20,31 +20,31 @@ module Jekyll
       @base = base
       @dir  = tag_dir
       @name = 'atom.xml'
-      self.process(@name)
+      process(@name)
       # Read the YAML data from the layout page.
-      self.read_yaml(File.join(base, '_layouts'), 'tag_feed.xml')
+      read_yaml(File.join(base, '_layouts'), 'tag_feed.xml')
-      self.data['tag'] = tag
+      data['tag'] = tag
       # Set the title for this page.
       tag_title_prefix = site.config['tag_title_prefix'] || 'Posts Tagged “'
       tag_title_suffix = site.config['tag_title_suffix'] || '”'
-      self.data['title'] = "#{tag_title_prefix}#{tag}#{tag_title_suffix}"
+      data['title'] = "#{tag_title_prefix}#{tag}#{tag_title_suffix}"
       # Set the meta-description for this page.
 
       # Set the correct feed URL.
-      self.data['feed_url'] = "#{tag_dir}/#{name}"
+      data['feed_url'] = "#{tag_dir}/#{name}"
     end
   end
 
   class TagGenerator < Generator
     safe true
     def generate(site)
-      if site.layouts.key? 'tag_index'
+      return unless site.layouts.key? 'tag_index'
-        dir = site.config['tag_dir'] || 'tag'
+
-        site.tags.keys.each do |tag|
+      dir = site.config['tag_dir'] || 'tag'
-          dest_dir = File.join(dir, tag.tr(' ', '-'))
+      site.tags.keys.each do |tag|
-          write_tag_index(site, dest_dir, tag)
+        dest_dir = File.join(dir, tag.tr(' ', '-'))
-          write_tag_feed(site, dest_dir, tag)
+        write_tag_index(site, dest_dir, tag)
-        end
+        write_tag_feed(site, dest_dir, tag)
       end
     end
 
@@ -74,8 +74,11 @@ module Jekyll
     #
     def tag_links(tags)
       tags = tags.sort!.map do |item|
+        page_url = @context.registers[:page]['url']
+
         item.tr!(' ', '-')
-        "<a class='p-category' href='/tag/#{item}/'>#{item}</a>"
+        tag_path = "/tag/#{item}"
+        "<a class='p-category' href='#{Pathname(tag_path).relative_path_from(Pathname(page_url))}'>#{item}</a>"
       end
       tags.join(', ')
     end

index.html

@@ -4,11 +4,11 @@ title: James Walker
 ---
 
 <section class="h-card prose lg:prose-2xl dark:prose-invert">
-  <img src="/images/walkah-avatar.png" alt="James Walker" class="u-photo rounded-full w-48 mx-auto">
+  <img src="{{ "/images/walkah-avatar.png" | relative_path }}" alt="James Walker" class="u-photo rounded-full w-48 mx-auto">
   <p class="lead text-center">👋 I'm <span class="p-name"><span class="p-given-name">James</span> <span class="p-family-name">Walker</span></span> aka <a href="https://walkah.net/" class="u-url u-uid p-nickname">walkah</a>.</p>
   <p class="p-note">
     I am a free software developer in <span class="p-locality">Toronto</span>, <span class="p-country-name">Canada</span>.
     I'm currently the <span class="p-role">VP of Engineering</span> at <a class="p-org" href="https://fission.codes/">Fission</a> where we're building tools for a <span class="p-category">decentralized</span>, <span class="p-category">open web</span>.
   </p>
   <p>You can follow my work on <a href="https://github.com/walkah" rel="me">github</a> and <a href="https://twitter.com/walkah" rel="me">twitter</a>, but I prefer the <a href="https://walkah.social" rel="me">fediverse</a> and <a href="https://matrix.to/#/@walkah:walkah.chat" rel="me">matrix</a>.</p>
-</section>
+</section>