From d491653fffebeb11e57141aa92413038dddd4d1b Mon Sep 17 00:00:00 2001 From: Lewis Dale Date: Fri, 1 Mar 2024 10:44:51 +0000 Subject: [PATCH] Display the saved links on a page --- src/_data/links.js | 94 ++++++++++++++++++++++++++++++++++++ src/_data/old_posts.js | 46 ------------------ src/_data/tags.js | 17 ------- src/css/exceptions/links.css | 5 ++ src/css/globals.css | 15 +++++- src/saved-links.njk | 21 ++++++++ 6 files changed, 133 insertions(+), 65 deletions(-) create mode 100644 src/_data/links.js delete mode 100644 src/_data/old_posts.js delete mode 100644 src/_data/tags.js create mode 100644 src/css/exceptions/links.css create mode 100644 src/saved-links.njk diff --git a/src/_data/links.js b/src/_data/links.js new file mode 100644 index 0000000..c98ca7a --- /dev/null +++ b/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()); +} \ No newline at end of file diff --git a/src/_data/old_posts.js b/src/_data/old_posts.js deleted file mode 100644 index c4fe515..0000000 --- a/src/_data/old_posts.js +++ /dev/null @@ -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 []; -}; diff --git a/src/_data/tags.js b/src/_data/tags.js deleted file mode 100644 index 663b2c8..0000000 --- a/src/_data/tags.js +++ /dev/null @@ -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 []; -}; diff --git a/src/css/exceptions/links.css b/src/css/exceptions/links.css new file mode 100644 index 0000000..e4c8cfa --- /dev/null +++ b/src/css/exceptions/links.css @@ -0,0 +1,5 @@ +.link { + a::after { + font-size: var(--text-size-s); + } +} \ No newline at end of file diff --git a/src/css/globals.css b/src/css/globals.css index ed2ad91..c1a23e3 100644 --- a/src/css/globals.css +++ b/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); } \ No newline at end of file diff --git a/src/saved-links.njk b/src/saved-links.njk new file mode 100644 index 0000000..e20ec6e --- /dev/null +++ b/src/saved-links.njk @@ -0,0 +1,21 @@ +--- +title: Saved links +layout: base.njk +--- +

{{ title }}

+ +

+ +

+
    +{% for link in links %} +
  1. +

    {{ link.node.title }}

    +

    {{ link.node.description }}

    +
    +

    Posted by {{ link.node.author if link.node.author else link.node.siteName }}

    +

    Saved on

    +
    +
    2. +{% endfor %} +
\ No newline at end of file