From 250a8b3c940b697639441b83dc72cf07fc3819f4 Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <hi@coryd.dev>
Date: Fri, 5 May 2023 11:15:54 -0700
Subject: [PATCH] chore: now post + nav fixes

---
 src/_includes/footer.liquid                   |  4 +-
 src/_includes/nav.liquid                      |  4 +-
 .../2023/now-page-update-matter-favorites.md  | 52 +++++++++++++++++++
 3 files changed, 56 insertions(+), 4 deletions(-)
 create mode 100644 src/posts/2023/now-page-update-matter-favorites.md

diff --git a/src/_includes/footer.liquid b/src/_includes/footer.liquid
index 949d0da6..36e147ba 100644
--- a/src/_includes/footer.liquid
+++ b/src/_includes/footer.liquid
@@ -9,8 +9,8 @@
     {% include "icons/oku.liquid" %}
   </div>
   <p class="text-sm text-gray-500 dark:text-gray-100 text-center pb-8">
-    <a class="text-gray-700 hover:text-primary-400 dark:text-gray-200{% if page.url contains '/uses' %} active{% endif %}" href="/uses">Uses</a>
+    <a class="text-gray-700 hover:text-primary-400 dark:text-gray-200{% if page.url == '/uses/' %} active{% endif %}" href="/uses">Uses</a>
     •
-    <a class="text-gray-700 hover:text-primary-400 dark:text-gray-200{% if page.url contains '/referrals' %} active{% endif %}" href="/referrals">Referrals</a>
+    <a class="text-gray-700 hover:text-primary-400 dark:text-gray-200{% if page.url == '/referrals/' %} active{% endif %}" href="/referrals">Referrals</a>
     • Cory Dransfeldt • © {{ "now" | date: "%Y" }}</p>
 </footer>
\ No newline at end of file
diff --git a/src/_includes/nav.liquid b/src/_includes/nav.liquid
index 9982c04e..8606f741 100644
--- a/src/_includes/nav.liquid
+++ b/src/_includes/nav.liquid
@@ -1,10 +1,10 @@
 <nav>
   <ul class="flex">
     <li class="mr-6">
-      <a class="text-gray-700 hover:text-primary-400 dark:text-gray-200{% if page.url contains '/now' %} active{% endif %}" href="/now">Now</a>
+      <a class="text-gray-700 hover:text-primary-400 dark:text-gray-200{% if page.url == '/now/' %} active{% endif %}" href="/now">Now</a>
     </li>
     <li class="mr-6">
-      <a class="text-gray-700 hover:text-primary-400 dark:text-gray-200{% if page.url contains '/about' %} active{% endif %}" href="/about">About</a>
+      <a class="text-gray-700 hover:text-primary-400 dark:text-gray-200{% if page.url == '/about/' %} active{% endif %}" href="/about">About</a>
     </li>
     <li class="mr-6">
       {% include "icons/coffee.liquid" %}
diff --git a/src/posts/2023/now-page-update-matter-favorites.md b/src/posts/2023/now-page-update-matter-favorites.md
new file mode 100644
index 00000000..6dfe1601
--- /dev/null
+++ b/src/posts/2023/now-page-update-matter-favorites.md
@@ -0,0 +1,52 @@
+---
+date: '2023-05-05'
+title: 'Now page update: favorite articles from Matter'
+draft: false
+tags: ['Matter', 'development', 'Eleventy']
+---
+
+I dropped in a quick update to [my now page](/now) to display the 5 most recent articles from my favorites feed in [Matter](https://getmatter.com/).<!-- excerpt -->
+
+To do this I'm borrowing from [Federico Viticci's method of obtaining a key for their api](https://www.macstories.net/stories/macstories-starter-pack-reverse-engineering-the-matter-api-and-my-save-to-matter-shortcut/) and using it to make a `GET` request to their `favorites_feed` endpoint:
+
+```javascript
+const EleventyFetch = require('@11ty/eleventy-fetch')
+
+module.exports = async function () {
+  const MATTER_TOKEN = process.env.ACCESS_TOKEN_MATTER
+  const headers = { Authorization: `Bearer ${MATTER_TOKEN}` }
+  const url = `https://web.getmatter.com/api/library_items/favorites_feed`
+  const res = EleventyFetch(url, {
+    duration: '1h',
+    type: 'json',
+    fetchOptions: { headers },
+  })
+  const feed = await res
+  const articles = feed.feed.splice(0, 5)
+  return articles
+}
+```
+
+By following Federico's steps we can obtain a bearer token to access the API which will return an array of our favorited articles. This endpoint is paginated (e.g. passing `?page=1`, but I'm retrieving the full response, reversing the order and rendering the output to achieve the displayed result:
+
+```html
+{% if articles %}
+    <h2 class="m-0 text-xl font-black leading-tight tracking-normal dark:text-gray-200 md:text-2xl mt-6 mb-4">
+      Reading: favorite articles
+    </h2>
+    <div>
+      <ul class="list-inside list-disc pl-5 md:pl-10">
+        {% for article in articles | reverse %}
+          <li class="mt-1.5 mb-2">
+            <a href="{{article.content.url}}" title="{{article.content.title | escape}}">
+              {{ article.content.title | escape }}{% if article.content.author.name %}
+                by {{ article.content.author.name | escape }}{% endif %}
+            </a>
+          </li>
+        {% endfor %}
+      </ul>
+    </div>
+  {% endif %}
+```
+
+[You can see the result rendered here.](/now)