reddit linking

content/blog/2023-01-17-webfinger-redir.md

@@ -8,6 +8,8 @@ draft: false
 extra:
   auto_center_images: true
   excerpt: "I made a custom search prefix for my browser that can resolve ActivityPub accounts into their profile pages"
+  discuss:
+    reddit: https://www.reddit.com/r/ewpratten/comments/12xzulo/lazy_search_for_mastodon_accounts/
 ---
 
 Anyone who has been using Mastodon (or other ActivityPub servers) for a bit might have noticed how its a little annoying to look up someone's "home profile" from their account handle. My personal flow goes something like:

content/blog/2023-02-07-ipv6-canvas.md

@@ -8,6 +8,8 @@ draft: false
 extra:
   auto_center_images: true
   excerpt: "Using some python, I have a reference to this website semi-permanently implanted on the IPv6 Canvas"
+  discuss:
+    reddit: https://www.reddit.com/r/ewpratten/comments/12xzvf9/blatant_selfadvertising_on_the_ipv6_canvas/
 ---
 
 Yesterday, the [IPv6 Canvas](https://blog.tugzrida.xyz/2023/02/06/introducing-the-ipv6-canvas/) was pushed to the public.

content/blog/2023-02-15-wireguard-options.md

@@ -8,6 +8,8 @@ draft: false
 extra:
   auto_center_images: true
   excerpt: "This post covers some lesser known WireGuard configuration options that I have found useful"
+  discuss:
+    reddit: https://www.reddit.com/r/ewpratten/comments/12xzvun/some_lesser_known_wireguard_settings/
 ---
 
 I extensively use [WireGuard](https://www.wireguard.com/) to keep various devices connected across foreign and unstable networks. Over the past few years of doing this, I've discovered a few handy configuration tricks that can help in weirdly specific situations. The following is a short overview to be used as reference in the future.

content/blog/2023-03-21-hackernews-block-ai.md

@@ -8,6 +8,9 @@ draft: false
 extra:
   auto_center_images: true
   excerpt: "This post shows off a userscript I built that hides AI topics from Hacker News."
+  discuss:
+    reddit: https://www.reddit.com/r/ewpratten/comments/12xzw5x/a_script_that_hides_ai_topics_from_hacker_news/
+    hacker_news: https://news.ycombinator.com/item?id=35252186
 ---
 
 Ok. AI-backed tools are cool, but sometimes I just want to read about something else on the [Hacker News](https://news.ycombinator.com/news) website.

sass/styles/layout.scss

@@ -1,10 +1,56 @@
 .page {
-  & > .container {
+  & .container {
     max-width: 800px;
     margin: auto !important;
     padding-left: 1em;
     padding-right: 1em;
   }
+
+  // A box that sits to the left of .container
+  .left-side {
+    .left-box {
+      display: none;
+      // padding: 0;
+      // margin: 0;
+
+      img {
+        display: inline-block;
+        height: 1.25em;
+        width: 1.25em;
+
+        filter: invert(9%) sepia(97%) saturate(6581%) hue-rotate(247deg)
+          brightness(94%) contrast(144%);
+      }
+    }
+
+    @media screen and (min-width: 910px) {
+      float: left;
+      width: calc((100vw - 800px) / 2);
+      display: flex;
+      flex-direction: row;
+      justify-content: right;
+
+      .left-box {
+        display: flex;
+        flex-direction: column;
+
+        margin-top: 3em;
+        margin-right: 1em;
+
+        padding-left: 5px;
+        padding-right: 5px;
+        padding-top: 4px;
+
+        border: 1px solid black;
+      }
+    }
+    @media screen and (max-width: 910px) {
+      max-width: 800px;
+      margin: auto !important;
+      padding-left: 1em;
+      padding-right: 1em;
+    }
+  }
 }
 
 .mermaid {

templates/base.html

@@ -68,6 +68,12 @@
         </div>
 
         {# Actual content #}
+        <div class="page-body">
+            <div class="left-side">
+                {% block left_side %}
+                {% endblock left_side %}
+            </div>
+            <div>
                 {% if redirect_target %}
                 <div class="container" style="text-align:center;">
                     <h2>Redirection Notice</h2>
@@ -85,6 +91,8 @@
                 {# Footer #}
                 {% include "components/footer.html" %}
             </div>
+        </div>
+    </div>
 
     {# External scripts #}
     {#

templates/page.html

@@ -51,3 +51,25 @@
 
 {{ page.content | safe }}
 {% endblock content %}
+
+
+{% block left_side %}
+{% if page.extra.discuss %}
+<div class="left-box">
+    <a href="{{page.extra.discuss.reddit}}" target="_blank">
+        <img src="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/svg/reddit-alien.svg"
+            alt="View on Reddit" loading="lazy">
+    </a>
+    {% if page.extra.discuss.hacker_news %}
+    <a href="{{page.extra.discuss.hacker_news}}" target="_blank">
+        <img src="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/svg/hacker-news.svg"
+            alt="View on Hacker News" loading="lazy">
+    </a>
+    {% endif %}
+    <a href="mailto:comment@ewpratten.com?subject=Comment: {{page.title}}" target="_blank">
+        <img src="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/svg/envelope.svg"
+            alt="Comment via Email" loading="lazy">
+    </a>
+</div>
+{% endif %}
+{% endblock left_side %}