Display the saved links on a page

src/_data/links.js

@@ -0,0 +1,94 @@
+const fs = require('node:fs');
+const apiKey = 'bf7b63c4-b6f2-4568-b554-4a3440460070';
+const cacheFile = '.cache/links.json';
+
+const query = `query Search($after: String, $first: Int, $query: String, $format: String, $includeContent: Boolean) {
+    search(after: $after, first: $first, query: $query, format: $format, includeContent: $includeContent) {
+        ... on SearchSuccess {
+            edges {
+                cursor
+                node {
+                    title
+                    slug
+                    url
+                    createdAt
+                    isArchived
+                    author
+                    image
+                    description
+                    publishedAt
+                    originalArticleUrl
+                    labels {
+                        id
+                        name
+                        color
+                    }
+                    siteName
+                    savedAt
+                }
+            }
+            pageInfo {
+                hasNextPage
+                hasPreviousPage
+                startCursor
+                endCursor
+                totalCount
+            }
+        }
+        ... on SearchError {
+            errorCodes
+        }
+    }
+}
+`;
+
+const cachedContent = () => {
+    if (fs.existsSync(cacheFile)) {
+        return JSON.parse(fs.readFileSync(cacheFile));
+    }
+
+    return [];
+}
+
+const storeCache = (content = []) => {
+    fs.writeFileSync(cacheFile, JSON.stringify(content));
+}
+
+const fetchLatest = async (cache = []) => {
+    const after = cache[0]?.cursor;
+
+    const variables = {
+        "query": "label:Tech",
+        "first": 100,
+        after,
+    }
+
+    const results = await fetch('https://api-prod.omnivore.app/api/graphql', {
+        method: 'POST',
+        headers: {
+            'content-type': 'application/json',
+            'authorization': apiKey,
+        },
+        body: JSON.stringify({
+            query,
+            variables
+        })
+    });
+
+    if (results.ok) {
+        const {data} = await results.json();
+        if (data.search.edges.length) {
+            const links = [...data.search.edges, ...cache];
+            storeCache(links);
+            return links;
+        }
+    } else {
+        console.error(await results.text())
+    }
+
+    return cache;
+}
+
+module.exports = async function() {
+    return await fetchLatest(cachedContent());
+}

src/_data/old_posts.js

@@ -1,46 +0,0 @@
-const postCache = require('./_postData');
-
-const dateSort = (a, b) => new Date(b.date) - new Date(a.date);
-
-const mapComment = comment => {
-	return ({
-	author: {
-		name: comment.author_name,
-		avatars: comment.author_avatar_urls,
-		url: comment.author_url,
-	},
-	content: comment.content.rendered,
-	canonical: comment.meta.url,
-	date: comment.date,
-});
-}
-
-
-module.exports = async () => {
-	// const cache = await postCache();
-	
-	// const posts = Object.values(cache.posts)
-	// 	.sort(dateSort)
-	// 	.map(post => ({
-	// 		...post,
-	// 		comments: Object.values(post.comments)
-	// 			.sort(dateSort)
-	// 			.reduce((comments, comment) => {
-	// 				if (!comments[comment.type]) {
-	// 					comments[comment.type] = [];
-	// 				}
-
-	// 				comments[comment.type].push(mapComment(comment));
-	// 				return comments;
-	// 			}, { like: [], reply: [], repost: [] }),
-	// 		tags: post.tags.map(tag => ({
-	// 			name: cache.tags[tag].name,
-	// 			slug: cache.tags[tag].slug,
-	// 			link: cache.tags[tag].link	
-	// 		}))
-	// 	}));
-
-	// return posts;
-
-	return [];
-};

src/_data/tags.js

@@ -1,17 +0,0 @@
-const postCache = require('./_postData');
-
-
-module.exports = async () => {
-	// const cache = await postCache();
-	
-	// return Object.values(cache.tags).map(tag => {
-    //     const posts = Object.values(cache.posts).filter(post => post.tags.includes(tag.id)).sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
-        
-    //     return {
-    //         ...tag,
-    //         posts,
-    //     }
-    // });
-
-    return [];
-};

src/css/exceptions/links.css

@@ -0,0 +1,5 @@
+.link {
+    a::after {
+        font-size: var(--text-size-s);
+    }    
+}

src/css/globals.css

@@ -4,6 +4,7 @@
     --color-decoration: var(--color-amber-200);
     --color-subtle: var(--color-zinc-400);
     --color-disabled: var(--color-neutral-400);
+    --color-accent: var(--color-zinc-600);
 }
 
 .inverse {
@@ -12,6 +13,7 @@
     --color-decoration: var(--color-yellow-400);
     --color-subtle: var(--color-zinc-600);
     --color-disabled: var(--color-neutral-600);
+    --color-accent: var(--color-zinc-400);
 }
 
 @media (prefers-color-scheme: light) {
@@ -21,6 +23,7 @@
         --color-decoration: var(--color-yellow-400);
         --color-subtle: var(--color-zinc-600);
         --color-disabled: var(--color-neutral-600);
+        --color-accent: var(--color-zinc-400);
     }
 
     .inverse {
@@ -29,6 +32,7 @@
         --color-decoration: var(--color-amber-200);
         --color-subtle: var(--color-zinc-400);
         --color-disabled: var(--color-neutral-400);
+        --color-accent: var(--color-zinc-600);
     }
 }
 
@@ -38,6 +42,7 @@
     --color-decoration: var(--color-yellow-400);
     --color-subtle: var(--color-zinc-600);
     --color-disabled: var(--color-neutral-600);
+    --color-accent: var(--color-zinc-600);
 }
 
 [data-color-scheme="light"] .inverse {
@@ -46,6 +51,7 @@
     --color-decoration: var(--color-amber-200);
     --color-subtle: var(--color-zinc-400);
     --color-disabled: var(--color-neutral-400);
+    --color-accent: var(--color-zinc-400);
 }
 
 [data-color-scheme="dark"] {
@@ -54,6 +60,7 @@
     --color-decoration: var(--color-amber-200);
     --color-subtle: var(--color-zinc-400);
     --color-disabled: var(--color-neutral-400);
+    --color-accent: var(--color-zinc-600);
 }
 
 body {
@@ -124,8 +131,6 @@ a {
         width: 2ch;
         padding: 0 .3ch;
         display: inline-block;
-        position: absolute;
-        right: 0;
     }
 }
 
@@ -164,4 +169,10 @@ aside {
     padding: var(--space-size-s);
     background-color: var(--color-secondary);
     color: var(--color-primary);
+}
+
+blockquote {
+    border-left: 5px solid var(--color-accent);
+    padding-left: var(--space-size-2xs);
+    margin-left: var(--space-size-2xs);
 }

src/saved-links.njk

@@ -0,0 +1,21 @@
+---
+title: Saved links
+layout: base.njk
+---
+<h1>{{ title }}</h1>
+
+<p>
+    
+</p>
+<ol class="h-feed stack-md wrapper-md" role="list">
+{% for link in links %}
+    <li class="link stack-xs h-entry">
+        <h2 class="p-name"><a class"u-like-of" href="{{ link.node.originalArticleUrl }}" target="_blank" rel="noopener noreferrer">{{ link.node.title }}</a></h2>
+        <p class="p-summary">{{ link.node.description }}</p>
+        <div>
+            <p>Posted by <span class="p-author">{{ link.node.author if link.node.author else link.node.siteName }}</span></p>
+            <p>Saved on <time datetime="{{ link.node.savedAt }}">{{ link.node.savedAt | dateTimeDisplay }}</time></p>
+        </div>
+    </li>
+{% endfor %}
+</ol>