Add AMP

src/pages/Fix-Apple-Silicon-Mac-External-Display-Flickering.md

@@ -3,6 +3,7 @@ template: post
 title: "Fix Apple Silicon Mac External Display Flickering"
 date_published: 1705648747176
 # cover: /cover/macbook.jpg
+amp: true
 ---
 
 If you're experiencing screen flickering issues while connected to an external display on your Apple silicon Mac, you're not alone.

src/pages/debugging-acm-certificate-stuck-in-pending-validation.md

@@ -3,6 +3,7 @@ template: post
 title: "Debugging ACM certificate stuck in 'Pending validation'"
 date_published: 1666654043000
 # cover: /cover/acm.jpeg
+amp: true
 ---
 
 >***TL;DR*** *My domain had a CNAME record pointing to Vercel, which had a CAA recording that prevented AWS from issuing certificates. The fix was to replace the* ***CNAME*** *record with an* ***A*** *record.*

src/pages/fault-tolerant-home-lab-hosting.md

@@ -3,6 +3,7 @@ template: post
 title: "Fault tolerant home lab hosting"
 date_published: 1663806443000
 cover: /cover/buttons.jpeg
+amp: true
 ---
 
 I've been self-hosting stateless web services at my home lab for over two years now, so it's time to write about it. To be clear, I'm not implying this is the right method, it is what has worked best for me.

src/pages/fixing-docker-mtu-for-private-networks-and-vpns.md

@@ -3,6 +3,7 @@ template: post
 title: "Fixing Docker MTU for private networks and VPNs"
 date_published: 1643030652000
 cover: /cover/docker-mtu.jpeg
+amp: true
 ---
 
 Recently while settings up a Docker swarm cluster I noticed something strange happening, a lot of the requests being processed by the swarm service were failing even though the cluster was live and the nodes were able to communicate to each other. After a few hours of debugging, scratching heads, googling etc I finally found [this](https://github.com/moby/moby/issues/36689?ref=techulus.xyz) and that was indeed the problem.

src/pages/free-website-monitoring-with-instant-push-notification-alerts.md

@@ -3,6 +3,7 @@ template: post
 title: "Free website monitoring with instant push notification alerts"
 date_published: 1581377243000
 cover: /cover/servers.jpeg
+amp: true
 ---
 
 In this article, I’ll help you set up a free and simple website monitoring tool which sends instant alerts using push notification. Before we begin, let’s have a look a what we will need:

src/pages/hosting-public-services-on-your-home-server-using-nginx-and-tailscale.md

@@ -3,6 +3,7 @@ template: post
 title: "Hosting public services on your home server using NGINX and Tailscale"
 date_published: 1643930843000
 cover: /cover/glasses.jpeg
+amp: true
 ---
 
 In a previous [article](https://techulus.xyz/how-to-setup-remote-access-to-home-server-using-tailscale/), we discussed how to set up remote access to home-lab via private VPN with the help of Tailscale. Today we are going to extend that set-up to make some services available publicly such as a blog or a web server.

src/pages/how-i-built-a-serverless-api-to-optimize-user-uploaded-images-on-the-fly.md

@@ -3,6 +3,7 @@ template: post
 title: "How I Built a Serverless API to Optimize User-Uploaded Images on the Fly"
 date_published: 1681950443000
 cover: /cover/tinker.jpeg
+amp: true
 ---
 
 Optimizing images for the web is a crucial step in improving the performance and user experience of a website. However, it can be challenging to optimize user-uploaded images when you don't know their dimensions in advance. This is where server-side image processing comes in handy.

src/pages/how-to-get-push-notifications-from-github.md

@@ -3,6 +3,7 @@ template: post
 title: "How to: Get push notifications from GitHub"
 date_published: 1573428443000
 cover: /cover/phone-notifications.jpeg
+amp: true
 ---
 
 If you’ve got a mobile phone, then you probably know what push notifications are. A [push notification](https://www.twilio.com/docs/glossary/what-is-push-notification?ref=techulus.xyz) (also known as a server push notification) is the delivery of information to a computing device from an application server where the request for the transaction is started by the server rather than by an explicit request from the client. Basically, it’s these bubbles that pop up on your device.

src/pages/how-to-setup-remote-access-to-home-server-using-tailscale.md

@@ -3,6 +3,7 @@ template: post
 title: "How to setup remote access to home server using Tailscale"
 date_published: 1642202843000
 cover: /cover/plant.jpeg
+amp: true
 ---
 
 In this tutorial, we're going to set up secure remote access to our home servers/lab via the internet without using a static IP or Dynamic DNS with the help of [Tailscale](https://tailscale.com/?ref=techulus.xyz). We will need two things to make this work:

src/pages/how-to-unraid-flash-backup-to-cloud-drive.md

@@ -3,6 +3,7 @@ template: post
 title: "How to: Backup UNRAID flash to cloud drive"
 date_published: 1666567643000
 cover: /cover/sd.jpeg
+amp: true
 ---
 
 Recently while trying to downgrade my UNRAID OS, I completely messed up my server, and the worst part, I did not have a backup of my flash drive. I had to set up my whole server again, lesson learned!

src/pages/my-first-vs-code-extension.md

@@ -3,6 +3,7 @@ template: post
 title: "My First VS Code Extension"
 date_published: 1525912043000
 cover: /images/js_file_header.png
+amp: true
 ---
 
 > Finally, after playing around with VS Code a lot, I decided I should publish a plugin. I had a few ideas in mind, mostly minor helpers that would help me in my work.

src/pages/my-home-server-setup-with-unraid-jan-2022-edition.md

@@ -3,6 +3,7 @@ template: post
 title: "My home lab setup with UNRAID, Jan 2022 edition"
 date_published: 1642548443000
 cover: /cover/serverfarm.jpeg
+amp: true
 ---
 
 I'm going to walk you through my home lab setup, showing you what I've set up now, both hardware and software and also share my plans for potential upgrades in the future.

src/pages/story-behind-every-product-ive-build.md

@@ -3,6 +3,7 @@ template: post
 title: "Story behind every product I've build - Part 1 of ?"
 date_published: 1670110043000
 cover: /cover/story.jpeg
+amp: true
 ---
 
 It was 2009, I got my hands on an iPhone (the original iPhone 2G) for the very first time. It was uncommon in India, mainly because it was hard to get and not affordable, but more than that it wasn't a great experience. All the phones were locked and also jailbroken for unlocking, we couldn't update iOS because that would break Cydia and get rid of the carrier unlock. Unaware of this the first thing I did after getting the phone was to upgrade the OS and thus got my phone locked, sigh.

src/pages/the-web-badging-api.md

@@ -3,6 +3,7 @@ template: post
 title: "The Web Badging API"
 date_published: 1572823643000
 cover: /images/badge/cover.png
+amp: true
 ---
 
 We web developers always strive to make our “web apps” perform and feel as native as possible, but our capabilities are always limited by what is provided by browsers. Thankfully, the web ecosystem is evolving at a quick pace and we’re frequently introduced to new powerful APIs that lets us build more advanced tools. Let’s have a look at such a new API that bridges the gap between web and native applications.

src/theme/amp.hbs

@@ -0,0 +1,118 @@
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+  {{#if page_metadata.title}}
+  <meta property="title" content="{{page_metadata.title}}" />
+  <meta property="og:title" content="{{page_metadata.title}}" />
+  <meta name="twitter:title" content="{{page_metadata.title}}" />
+  {{/if}}
+
+  {{{open_graph_tags}}}
+
+  <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+
+  {{#if page_metadata.title}}
+  <title>{{page_metadata.title}}</title>
+  {{else}}
+  <title>{{title}}</title>
+  {{/if}}
+
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+
+  <style amp-boilerplate>
+    body {
+      -webkit-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
+      -moz-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
+      -ms-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
+      animation: -amp-start 8s steps(1, end) 0s 1 normal both
+    }
+
+    @-webkit-keyframes -amp-start {
+      from {
+        visibility: hidden
+      }
+
+      to {
+        visibility: visible
+      }
+    }
+
+    @-moz-keyframes -amp-start {
+      from {
+        visibility: hidden
+      }
+
+      to {
+        visibility: visible
+      }
+    }
+
+    @-ms-keyframes -amp-start {
+      from {
+        visibility: hidden
+      }
+
+      to {
+        visibility: visible
+      }
+    }
+
+    @-o-keyframes -amp-start {
+      from {
+        visibility: hidden
+      }
+
+      to {
+        visibility: visible
+      }
+    }
+
+    @keyframes -amp-start {
+      from {
+        visibility: hidden
+      }
+
+      to {
+        visibility: visible
+      }
+    }
+  </style>
+  <noscript>
+    <style amp-boilerplate>
+      body {
+        -webkit-animation: none;
+        -moz-animation: none;
+        -ms-animation: none;
+        animation: none
+      }
+    </style>
+  </noscript>
+</head>
+
+<body>
+  <main class="container">
+
+    <hgroup class="blog-title-container">
+      <h1 class="blog-title">{{title}}</h1>
+      <h2>{{description}}</h2>
+    </hgroup>
+
+    {{{content}}}
+
+  </main>
+  <footer class="container">
+    <small>
+      Built with
+      <a href="https://rustyink.cli.rs" target="_blank" rel="noopener noreferrer">RustyInk</a>
+      •
+      <a target="_blank" rel="noopener noreferrer" href="https://github.com/arjunkomath/rustyink">
+        Source code
+      </a>
+    </small>
+  </footer>
+</body>
+
+</html>