Fix some small issues

tony-sull · Mar 3, 2022 · 34da066 · 34da066
1 parent 8873ed5
commit 34da066
Show file tree

Hide file tree

Showing 8 changed files with 132 additions and 54 deletions.
diff --git a/.idea/prettier.xml b/.idea/prettier.xml
diff --git a/_cache/subscribers.json b/_cache/subscribers.json
@@ -1 +1 @@
-{"lastFetched":1646334111946,"amount":"1175"}
+{"lastFetched":1646338387205,"amount":"1175"}
diff --git a/package.json b/package.json
@@ -6,7 +6,7 @@
     "dev": "astro dev",
     "collect": "node --experimental-modules scripts/collect.mjs",
     "start": "astro dev",
-    "build": "npm run collect && astro build",
+    "build": "astro build",
     "preview": "astro preview",
     "format": "yarn prettier -w ."
   },

diff --git a/src/components/StaticTweet.astro b/src/components/StaticTweet.astro
@@ -106,11 +106,11 @@ const parsedDate = moment(date).calendar();
     <div>🦉</div>
   </div>
   <div class="prose dark:prose-invert px-4 mb-4" set:html={full_text}></div>
-  <div class="text-gray-600 text-sm px-4">
+  <div class="text-gray-400 text-sm px-4">
     {parsedDate}
   </div>
 
-  <div class="flex justify-between text-gray-600">
+  <div class="flex justify-between text-gray-400">
     <a
       rel="noreferrer noopener"
       target="_blank"

diff --git a/src/components/Stats.astro b/src/components/Stats.astro
@@ -1,13 +1,43 @@
 ---
 import { getSubscriberCount } from '../lib/subscribers';
 const subscribers = await getSubscriberCount();
-const allPosts = Astro.fetchContent('../pages/posts/*.md').filter(a => new Date(a.date) <= new Date());
+const fetchedPosts = await import.meta.glob('../pages/posts/*.md');
+const mappedPosts = await Promise.all(
+  Object.keys(fetchedPosts).map((key) => {
+    return fetchedPosts[key];
+  })
+);
+const allPosts = mappedPosts
+  .filter(Boolean)
+  .filter((a) => new Date(a.date) <= new Date());
 ---
-<ul class="flex flex-col md:flex-row items-center justify-center text-barbie text-sm mt-4 mb-10">
-    <li class="mr-0 mb-2 md:mb-0 md:mr-8 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" viewBox="0 0 20 20" fill="currentColor">
-  <path d="M11 3a1 1 0 10-2 0v1a1 1 0 102 0V3zM15.657 5.757a1 1 0 00-1.414-1.414l-.707.707a1 1 0 001.414 1.414l.707-.707zM18 10a1 1 0 01-1 1h-1a1 1 0 110-2h1a1 1 0 011 1zM5.05 6.464A1 1 0 106.464 5.05l-.707-.707a1 1 0 00-1.414 1.414l.707.707zM5 10a1 1 0 01-1 1H3a1 1 0 110-2h1a1 1 0 011 1zM8 16v-1h4v1a2 2 0 11-4 0zM12 14c.015-.34.208-.646.477-.859a4 4 0 10-4.954 0c.27.213.462.519.476.859h4.002z" />
-</svg>{allPosts.length} dev tips sent</li>
-    <li class="flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" viewBox="0 0 20 20" fill="currentColor">
-  <path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd" />
-</svg>{subscribers} devs subscribed</li>
+
+<ul
+  class="flex flex-col items-center justify-center mt-4 mb-10 text-sm md:flex-row text-barbie"
+>
+  <li class="flex items-center mb-2 mr-0 md:mb-0 md:mr-8">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      class="w-5 h-5 mr-1"
+      viewBox="0 0 20 20"
+      fill="currentColor"
+    >
+      <path
+        d="M11 3a1 1 0 10-2 0v1a1 1 0 102 0V3zM15.657 5.757a1 1 0 00-1.414-1.414l-.707.707a1 1 0 001.414 1.414l.707-.707zM18 10a1 1 0 01-1 1h-1a1 1 0 110-2h1a1 1 0 011 1zM5.05 6.464A1 1 0 106.464 5.05l-.707-.707a1 1 0 00-1.414 1.414l.707.707zM5 10a1 1 0 01-1 1H3a1 1 0 110-2h1a1 1 0 011 1zM8 16v-1h4v1a2 2 0 11-4 0zM12 14c.015-.34.208-.646.477-.859a4 4 0 10-4.954 0c.27.213.462.519.476.859h4.002z"
+      ></path>
+    </svg>{allPosts.length} dev tips sent
+  </li>
+  <li class="flex items-center">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      class="w-5 h-5 mr-1"
+      viewBox="0 0 20 20"
+      fill="currentColor"
+    >
+      <path
+        fill-rule="evenodd"
+        d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z"
+        clip-rule="evenodd"></path>
+    </svg>{subscribers} devs subscribed
+  </li>
 </ul>
diff --git a/src/components/Subscribe.astro b/src/components/Subscribe.astro
@@ -2,16 +2,41 @@
 import { getSubscriberCount } from '../lib/subscribers';
 const subscribers = await getSubscriberCount();
 ---
+
 <div class="container mx-auto">
-<p class="text-2xl font-bold mb-2">Join <strong>{subscribers} devs</strong> and subscribe to my newsletter</p>
-<form class="bg-white rounded-md" action="https://sendy.daily-dev-tips.com/subscribe" accept-charset="utf-8" method="post" target="_blank" novalidate="">
-    <div class="flex flex-wrap justify-between flex-row items-center">
-    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-2 text-gray-300" viewBox="0 0 20 20" fill="currentColor">
-  <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" />
-  <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" />
-  </svg>
-        <input type="email" class="flex-1 p-2.5 appearance-none text-gray-700 text-sm focus:outline-none" placeholder="Your Email">
-        <button class="m-2 p-2.5 text-sm transition-colors bg-barbie hover:bg-pink-500 text-white rounded-md font-semibold">Subscribe</button>
+  <p class="mb-2 text-2xl font-bold dark:text-white">
+    Join <strong>{subscribers} devs</strong> and subscribe to my newsletter
+  </p>
+  <form
+    class="bg-white rounded-md"
+    action="https://sendy.daily-dev-tips.com/subscribe"
+    accept-charset="utf-8"
+    method="post"
+    target="_blank"
+    novalidate=""
+  >
+    <div class="flex flex-row flex-wrap items-center justify-between">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="w-5 h-5 ml-2 text-gray-300"
+        viewBox="0 0 20 20"
+        fill="currentColor"
+      >
+        <path
+          d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"
+        ></path>
+        <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"
+        ></path>
+      </svg>
+      <input
+        type="email"
+        class="flex-1 p-2.5 appearance-none text-gray-700 text-sm focus:outline-none"
+        placeholder="Your Email"
+      />
+      <button
+        class="m-2 p-2.5 text-sm transition-colors bg-barbie hover:bg-pink-500 text-white rounded-md font-semibold"
+        >Subscribe</button
+      >
     </div>
-</form>
+  </form>
 </div>
diff --git a/src/layouts/Post.astro b/src/layouts/Post.astro
@@ -8,56 +8,71 @@ import Stats from '../components/Stats.astro';
 import Webmentions from '../components/Webmentions.astro';
 import RelatedArticles from '../components/RelatedArticles.astro';
 import { getReadingTime } from '../lib/readingtime.js';
-import {dateFilter} from '../lib/dateFilter.js';
+import { dateFilter } from '../lib/dateFilter.js';
 const { content } = Astro.props;
 const canonicalURL = Astro.request.canonicalURL;
 const tmpUrl = `https://daily-dev-tips.com${canonicalURL.pathname}`;
 const articleDate = new Date(content.date);
 const isoDate = articleDate.toISOString();
 ---
 
-<BaseLayout title={content.metaTitle} description={content.metaDesc} image={content.image} post={true} date={isoDate}>
-  <header class="container my-6 mx-auto text-center">
+<BaseLayout
+  title={content.metaTitle}
+  description={content.metaDesc}
+  image={content.image}
+  post={true}
+  date={isoDate}
+>
+  <header class="container mx-auto my-6 text-center">
     <h1
-      class="bg-purple-600 text-white text-3xl rounded-md font-bold inline px-2 break-words box-decoration-clone"
+      class="inline px-2 text-3xl font-bold text-white break-words bg-purple-600 rounded-md box-decoration-clone"
     >
       {content.title}
     </h1>
     <Webmentions url={tmpUrl} type="overlap" />
   </header>
 
   <section
-    class="bg-white dark:bg-dark border-t border-b border-gray-200 dark:border-slate-700 -mx-4 flex flex-col mb-6 py-6 md:pb-10"
+    class="flex flex-col py-6 mb-6 -mx-4 bg-white border-t border-b border-gray-200 dark:bg-dark dark:border-slate-700 md:pb-10"
   >
-    <div class="container	 mx-auto">
+    <div class="container mx-auto">
       <Ads />
       <summary
-        class="bg-indigo-50 dark:bg-slate-300 rounded-xl flex mx-4 my-6 py-6 flex-1"
+        class="flex flex-1 py-6 mx-4 my-6 bg-indigo-50 dark:bg-slate-300 rounded-xl"
       >
         <p class="px-4">✍️</p>
         <div>
-          <p class="mb-2 pr-6">
+          <p class="pr-6 mb-2">
             {content.tldr ? content.tldr : content.metaDesc}
           </p>
-          <strong class="flex flex-wrap items-center text-gray-600 font-semibold"
-            >{dateFilter(content.date)} ·<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="h-5 w-5 mr-1 ml-1" viewBox="0 0 32 32"><path d="M 3 6 L 3 25 L 13 25 C 14.101563 25 15 25.898438 15 27 L 17 27 C 17 25.898438 17.898438 25 19 25 L 29 25 L 29 6 L 19 6 C 17.808594 6 16.734375 6.527344 16 7.359375 C 15.265625 6.527344 14.191406 6 13 6 Z M 5 8 L 13 8 C 14.101563 8 15 8.898438 15 10 L 17 10 C 17 8.898438 17.898438 8 19 8 L 27 8 L 27 23 L 19 23 C 17.808594 23 16.734375 23.527344 16 24.359375 C 15.265625 23.527344 14.191406 23 13 23 L 5 23 Z M 15 12 L 15 14 L 17 14 L 17 12 Z M 15 16 L 15 18 L 17 18 L 17 16 Z M 15 20 L 15 22 L 17 22 L 17 20 Z"/></svg>
-                   {getReadingTime(content?.astro?.html)}</strong
+          <strong
+            class="flex flex-wrap items-center font-semibold text-gray-600"
+            >{dateFilter(content.date)} ·<svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="currentColor"
+              class="w-5 h-5 ml-1 mr-1"
+              viewBox="0 0 32 32"
+              ><path
+                d="M 3 6 L 3 25 L 13 25 C 14.101563 25 15 25.898438 15 27 L 17 27 C 17 25.898438 17.898438 25 19 25 L 29 25 L 29 6 L 19 6 C 17.808594 6 16.734375 6.527344 16 7.359375 C 15.265625 6.527344 14.191406 6 13 6 Z M 5 8 L 13 8 C 14.101563 8 15 8.898438 15 10 L 17 10 C 17 8.898438 17.898438 8 19 8 L 27 8 L 27 23 L 19 23 C 17.808594 23 16.734375 23.527344 16 24.359375 C 15.265625 23.527344 14.191406 23 13 23 L 5 23 Z M 15 12 L 15 14 L 17 14 L 17 12 Z M 15 16 L 15 18 L 17 18 L 17 16 Z M 15 20 L 15 22 L 17 22 L 17 20 Z"
+              ></path></svg
+            >
+            {getReadingTime(content?.astro?.html)}</strong
           >
         </div>
       </summary>
 
       <article
-        class="prose prose-lg md:prose-xl dark:prose-invert mx-4 md:mx-auto"
+        class="mx-4 prose prose-lg md:prose-xl dark:prose-invert md:mx-auto"
       >
         <slot />
       </article>
     </div>
   </section>
 
   <section
-    class="rounded-xl py-6 px-4 bg-white dark:bg-dark mb-10 mx-auto container"
+    class="container px-4 py-6 mx-auto mb-10 bg-white rounded-xl dark:bg-dark"
   >
-    <div class="text-lg font-medium mb-4 dark:text-white">
+    <div class="mb-4 text-lg font-medium dark:text-white">
       Spread the knowledge <span class="text-gray-500 dark:text-gray-400"
         >with fellow developers on Twitter</span
       >
@@ -84,10 +99,10 @@ const isoDate = articleDate.toISOString();
       > Tweet this tip</a
     >
     <Webmentions url={tmpUrl} offsetLabel={false} />
-    <div class="text-xs text-gray-500 flex items-center">
+    <div class="flex items-center text-xs text-gray-500">
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        class="h-4 w-4 mr-1"
+        class="w-4 h-4 mr-1"
         fill="none"
         viewBox="0 0 24 24"
         stroke="currentColor"
@@ -99,36 +114,39 @@ const isoDate = articleDate.toISOString();
           d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
       </svg> Powered by Webmentions - <a
         href=""
-        class="text-barbie font-medium hover:underline underline-offset-2"
+        class="font-medium text-barbie hover:underline underline-offset-2"
         target="_blank">Learn more</a
       >
     </div>
   </section>
   <section
-    class="md:bg-white md:dark:bg-dark md:-mx-4 border-top-0 md:border-t border-gray-200 md:dark:border-slate-700 md:pt-8"
+    class="border-gray-200 md:bg-white md:dark:bg-dark md:-mx-4 border-top-0 md:border-t md:dark:border-slate-700 md:pt-8"
   >
     <div class="container mx-auto ">
       <h2
-        class="uppercase md:normal-case text-sm text-gray-700 dark:text-white tracking-wider mb-2 md:mb-0 md:text-2xl	md:font-bold"
+        class="mb-2 text-sm tracking-wider text-gray-700 uppercase md:normal-case dark:text-white md:mb-0 md:text-2xl md:font-bold"
       >
         Read next 📖
       </h2>
     </div>
   </section>
-  <section class="md:bg-white md:dark:bg-dark -mx-4 md:pt-8">
+  <section class="-mx-4 md:bg-white md:dark:bg-dark md:pt-8">
     <div class="container mx-auto ">
-      <RelatedArticles tags={content.tags} currentPathname={canonicalURL.pathname} />
+      <RelatedArticles
+        tags={content.tags}
+        currentPathname={canonicalURL.pathname}
+      />
     </div>
   </section>
 
   <section
-    class="border-b bg-white dark:bg-dark -mx-4  border-t md:border-t-0 border-gray-200 dark:border-slate-700 mb-10"
+    class="mb-10 -mx-4 bg-white border-t border-b border-gray-200 dark:bg-dark md:border-t-0 dark:border-slate-700"
   >
     <div
-      class="container mx-auto px-4 md:px-0 py-4 flex col-span-1 md:col-span-2"
+      class="container flex col-span-1 px-4 py-4 mx-auto md:px-0 md:col-span-2"
     >
       <nav class="mb-2">
-        <h3 class="leading-6 text-xl font-medium mb-4 dark:text-white">
+        <h3 class="mb-4 text-xl font-medium leading-6 dark:text-white">
           Discover more tips
         </h3>
         <ul class="flex">

diff --git a/src/lib/webmentions.js b/src/lib/webmentions.js
@@ -1,7 +1,7 @@
-import fs from "fs";
+import fs from 'fs';
 
-const CACHE_FILE_PATH = "_cache/webmentions.json";
-const OWNER_PROFILE = "https://twitter.com/DailyDevTips1";
+const CACHE_FILE_PATH = '_cache/webmentions.json';
+const OWNER_PROFILE = 'https://twitter.com/DailyDevTips1';
 
 const readCache = () => {
   if (fs.existsSync(CACHE_FILE_PATH)) {
@@ -14,35 +14,34 @@ const readCache = () => {
     children: [],
   };
 };
-
 async function _getAllWebmentions() {
   const cache = readCache();
   return cache;
 }
 
 compareURLs = (a, b) =>
-  a.replace(/(\/#|\/|#)$/, "") === b.replace(/(\/#|\/|#)$/, "");
+  a.replace(/(\/#|\/|#)$/, '') === b.replace(/(\/#|\/|#)$/, '');
 
 notMyOwn = (authorURL) => authorURL !== OWNER_PROFILE;
 
 isForURL = (url) => {
   return (webmention) =>
-    compareURLs(webmention["wm-target"], url) &&
+    compareURLs(webmention['wm-target'], url) &&
     notMyOwn(webmention.author.url);
 };
 
 validateAuthorPhoto = () => {
   return (webmention) => {
     webmention.author.photo = webmention.author.photo
       ? webmention.author.photo
-      : "/assets/placeholder.png";
+      : '/assets/placeholder.png';
     return webmention;
   };
 };
 
 export async function getWebmentionsForUrl(url) {
+  // return array of webmentions
   const allWebmentions = await _getAllWebmentions();
-
   return allWebmentions.children
     .filter(isForURL(url))
     .map(validateAuthorPhoto());
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		{"lastFetched":1646334111946,"amount":"1175"}
		{"lastFetched":1646338387205,"amount":"1175"}