Merge pull request #219 from jacobwgillespie/perf

Update colors, perf
jacobwgillespie · May 8, 2024 · b7d3e4f · b7d3e4f
2 parents 4a0ddc3 + 3077518
commit b7d3e4f
Show file tree

Hide file tree

Showing 8 changed files with 51 additions and 46 deletions.
diff --git a/.gitignore b/.gitignore
@@ -12,7 +12,6 @@ yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 
-
 # environment variables
 .dev.vars
 .env
@@ -23,3 +22,6 @@ pnpm-debug.log*
 
 # jetbrains setting folder
 .idea/
+
+# wrangler
+.wrangler/
diff --git a/astro.config.mjs b/astro.config.mjs
@@ -7,6 +7,9 @@ export default defineConfig({
   integrations: [tailwind()],
   output: 'server',
   adapter: cloudflare({platformProxy: {enabled: true}, imageService: 'passthrough'}),
+  build: {
+    inlineStylesheets: 'always',
+  },
   vite: {
     resolve: {
       alias: {

diff --git a/package.json b/package.json
@@ -17,6 +17,7 @@
     "@astrojs/cloudflare": "^10.2.5",
     "@astrojs/rss": "^4.0.5",
     "@astrojs/tailwind": "^5.1.0",
+    "@radix-ui/colors": "^3.0.0",
     "astro": "^4.7.1",
     "dataloader": "^2.2.2",
     "date-fns": "^3.6.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/Item.astro b/src/components/Item.astro
@@ -10,8 +10,8 @@ const {item} = Astro.props
 const timeAgo = `${formatDistanceToNow(item.date)} ago`
 ---
 
-<div class="flex flex-col items-baseline gap-1 leading-none md:flex-row">
-  <a href={item.link} class="overflow-hidden overflow-ellipsis text-lg visited:text-stone-500 md:whitespace-nowrap">
+<div class="flex flex-col items-baseline gap-1 md:flex-row">
+  <a href={item.link} class="overflow-hidden overflow-ellipsis text-lg visited:text-sand10 md:whitespace-nowrap">
     {item.title}
   </a>
   {
@@ -33,7 +33,7 @@ const timeAgo = `${formatDistanceToNow(item.date)} ago`
       </a>
     )
   }
-  <time datetime={item.date} title={item.date} class="whitespace-nowrap text-sm text-stone-500">
+  <time datetime={item.date} title={item.date} class="whitespace-nowrap text-sm text-sand10">
     {timeAgo}
   </time>
 </div>
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -17,37 +17,34 @@ const items = await fetchFeedItems(Astro.locals.runtime.env, false)
     <meta content="Saved for Later" property="og:title" />
     <meta content="https://savedforlater.dev/" property="og:url" />
     <meta content="Starred links from my feed reader." property="og:description" />
+    <meta content="Starred links from my feed reader." name="description" />
     <link rel="alternate" type="application/rss+xml" title="Saved for Later RSS feed" href="/rss" />
     <link rel="alternate" type="application/atom+xml" title="Saved for Later RSS feed" href="/atom" />
     <link rel="alternate" type="application/json" title="Saved for Later RSS feed" href="/json" />
   </head>
-  <body class="bg-stone-800 text-stone-100">
-    <div class="flex min-h-screen flex-col p-4 md:p-16 md:pb-8">
-      <div class="flex-1 space-y-4 font-light">
-        <h1 class="text-2xl leading-none md:text-4xl">Saved for Later</h1>
+  <body class="flex min-h-screen flex-col gap-4 bg-sand3 p-4 font-light text-sand12 md:p-16 md:pb-8">
+    <h1 class="text-2xl md:text-4xl">Saved for Later</h1>
 
-        {items.map((item) => <Item item={item} />)}
-      </div>
+    {items.map((item) => <Item item={item} />)}
 
-      <footer class="mt-4 space-x-4 border-t border-stone-700 pt-4 text-sm text-stone-400 md:mt-8 md:pt-8">
-        <span>
-          Copyright &copy; {new Date().getFullYear()}{' '}
-          <a class="hover:text-slate-50" href="https://jacobwgillespie.com" target="_blank" rel="noreferrer">
-            Jacob Gillespie
-          </a>
-        </span>
-        <a class="hover:text-slate-50" href="/rss">RSS</a>
-        <a class="hover:text-slate-50" href="/atom">Atom</a>
-        <a class="hover:text-slate-50" href="/json">JSON</a>
-        <a
-          class="hover:text-slate-50"
-          href="https://github.com/jacobwgillespie/saved-for-later"
-          target="_blank"
-          rel="noreferrer"
-        >
-          Source
+    <footer class="flex items-center gap-4 border-t border-sand6 pt-4 text-sm text-sand11">
+      <span>
+        Copyright &copy; {new Date().getFullYear()}{' '}
+        <a class="hover:text-sand12" href="https://jacobwgillespie.com" target="_blank" rel="noreferrer">
+          Jacob Gillespie
         </a>
-      </footer>
-    </div>
+      </span>
+      <a class="hover:text-sand12" href="/rss">RSS</a>
+      <a class="hover:text-sand12" href="/atom">Atom</a>
+      <a class="hover:text-sand12" href="/json">JSON</a>
+      <a
+        class="hover:text-sand12"
+        href="https://github.com/jacobwgillespie/saved-for-later"
+        target="_blank"
+        rel="noreferrer"
+      >
+        Source
+      </a>
+    </footer>
   </body>
 </html>
diff --git a/src/utils/feedbin.ts b/src/utils/feedbin.ts
@@ -13,9 +13,9 @@ let FEEDBIN_API_KEY = ''
 async function feedbin<APIResponse>(endpoint: string): Promise<APIResponse> {
   const url = `https://api.feedbin.com/v2/${endpoint}`
   const response = await fetch(url, {
-    headers: {Authorization: `Basic ${FEEDBIN_API_KEY}`},
+    headers: {Authorization: `Basic ${FEEDBIN_API_KEY}`, Accept: 'application/json'},
   })
-  return response.json()
+  return await response.json()
 }
 
 /** Represents a starred entry in Feedbin */
@@ -76,17 +76,3 @@ export async function fetchFeedbinEntries(env: Env): Promise<FeedItem[]> {
     }
   })
 }
-
-/** Fetch map of feed IDs to tags */
-export async function fetchTagMap() {
-  const tagMap: {[id: number]: string[]} = {}
-
-  const taggings = await feedbin<{feed_id: number; name: string}[]>('taggings.json')
-  for (const tagging of taggings) {
-    const tags = tagMap[tagging.feed_id] || []
-    tags.push(tagging.name)
-    tagMap[tagging.feed_id] = tags.sort()
-  }
-
-  return tagMap
-}
diff --git a/tailwind.config.mjs b/tailwind.config.mjs
@@ -1,8 +1,16 @@
+import * as colors from '@radix-ui/colors'
+
 /** @type {import('tailwindcss').Config} */
 export default {
   content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        ...colors.sandDark,
+        ...colors.sageDark,
+        ...colors.oliveDark,
+      },
+    },
   },
   plugins: [],
 }