fix: relative date & search results

zyrouge · Apr 4, 2024 · 171fb68 · 171fb68
1 parent a519b76
commit 171fb68
Show file tree

Hide file tree

Showing 18 changed files with 7,826 additions and 4,217 deletions.
diff --git a/astro.config.mjs b/astro.config.mjs
@@ -1,6 +1,7 @@
 import mdx from "@astrojs/mdx";
 import sitemap from "@astrojs/sitemap";
 import tailwind from "@astrojs/tailwind";
+import icon from "astro-icon";
 import { defineConfig } from "astro/config";
 import path from "node:path";
 
@@ -15,6 +16,7 @@ export default defineConfig({
         }),
         mdx(),
         sitemap(),
+        icon(),
     ],
     output: "static",
     vite: {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,19 +10,23 @@
         "lint": "prettier . --check && astro check"
     },
     "dependencies": {
-        "@astrojs/mdx": "^0.19.7",
-        "@astrojs/rss": "^2.4.4",
-        "@astrojs/sitemap": "^2.0.2",
-        "@astrojs/tailwind": "^4.0.0",
-        "astro": "^2.10.9",
-        "astro-icon": "^0.8.1",
-        "fuse.js": "^6.6.2",
-        "sass": "^1.65.1",
+        "@astrojs/check": "^0.5.10",
+        "@astrojs/mdx": "^2.2.3",
+        "@astrojs/rss": "^4.0.5",
+        "@astrojs/sitemap": "^3.1.2",
+        "@astrojs/tailwind": "^5.1.0",
+        "@iconify-json/fa-brands": "^1.1.8",
+        "@iconify-json/mdi": "^1.1.65",
+        "astro": "^4.5.15",
+        "astro-icon": "^1.1.0",
+        "fuse.js": "^7.0.0",
+        "sass": "^1.74.1",
         "sugar": "^2.0.6",
-        "tailwindcss": "^3.3.3"
+        "tailwindcss": "^3.4.3",
+        "typescript": "^5.4.3"
     },
     "devDependencies": {
-        "prettier": "^3.0.3",
-        "prettier-plugin-astro": "^0.12.0"
+        "prettier": "^3.2.5",
+        "prettier-plugin-astro": "^0.13.0"
     }
 }
diff --git a/src/assets/scripts/article-search.ts b/src/assets/scripts/article-search.ts
@@ -1,5 +1,6 @@
 import Fuse from "fuse.js";
 import { Routes } from "~/core/routes";
+import { Utils } from "~/core/utils";
 
 interface ArticleMinifiedData {
     title: string;
@@ -60,31 +61,28 @@ class ArticleSearch {
         if (!inputElement || !resultsElement) {
             return;
         }
-        const astroId =
-            [...resultsElement.classList].find((x) => x.startsWith("astro-")) ??
-            "";
+        const astroId = Utils.extractAstroId(resultsElement);
         resultsElement.innerHTML = "";
         const text = (inputElement as HTMLInputElement).value;
         const matches = this.searcher.search(text);
-        matches.reverse();
         matches.forEach(({ score, item }) => {
             const itemElement = document.createElement("a");
             itemElement.href = item.url;
             itemElement.id = "article-search-item";
-            itemElement.classList.add(astroId);
+            itemElement.setAttribute(astroId, "");
             const itemScoreElement = document.createElement("p");
             itemScoreElement.id = "asi-score";
-            const scorePercent = Math.floor(score! * 100);
+            const scorePercent = Math.floor((1 - score!) * 100);
             itemScoreElement.textContent = `${scorePercent}% Match`;
-            itemScoreElement.classList.add(astroId);
+            itemScoreElement.setAttribute(astroId, "");
             const itemTitleElement = document.createElement("p");
             itemTitleElement.id = "asi-title";
             itemTitleElement.textContent = item.title;
-            itemTitleElement.classList.add(astroId);
+            itemTitleElement.setAttribute(astroId, "");
             const itemDescriptionElement = document.createElement("p");
             itemDescriptionElement.id = "asi-description";
             itemDescriptionElement.textContent = item.description;
-            itemDescriptionElement.classList.add(astroId);
+            itemDescriptionElement.setAttribute(astroId, "");
             itemElement.append(
                 itemScoreElement,
                 itemTitleElement,

diff --git a/src/components/articles/ArticlesGridItem.astro b/src/components/articles/ArticlesGridItem.astro
@@ -1,6 +1,7 @@
 ---
 import sugar from "sugar";
-import { Articles, ArticleCollectionEntry } from "~/core/articles";
+import type { ArticleCollectionEntry } from "~/core/articles";
+import { Articles } from "~/core/articles";
 import { Routes } from "~/core/routes";
 import { Utils } from "~/core/utils";
 
@@ -20,8 +21,12 @@ const { article } = Astro.props;
     href={Routes.articles.constructRead(article.slug)}
 >
     <p class="text-xs pb-1">
-        <span class="text-primary-500 group-hover:text-white">
-            {sugar.Date.relative(article.data.time)}
+        <span
+            id="article-item-time"
+            class="text-primary-500 group-hover:text-white"
+            data-iso-date={article.data.time.toISOString()}
+        >
+            {sugar.Date.format(article.data.time)}
         </span>
         <span class="text-secondary-500 group-hover:text-white">
             / {Articles.getReadingTime(article.body)} mins. read
@@ -42,3 +47,15 @@ const { article } = Astro.props;
         }
     </p>
 </a>
+
+<script>
+    import sugar from "sugar";
+
+    document.addEventListener("DOMContentLoaded", () => {
+        document.querySelectorAll("#article-item-time").forEach((x) => {
+            const iso = x.getAttribute("data-iso-date")!;
+            const date = new Date(iso);
+            x.innerHTML = sugar.Date.relative(date);
+        });
+    });
+</script>
diff --git a/src/components/articles/SearchDialog.astro b/src/components/articles/SearchDialog.astro
@@ -1,5 +1,5 @@
 ---
-import Icon from "astro-icon";
+import { Icon } from "astro-icon/components";
 ---
 
 <div
@@ -18,13 +18,13 @@ import Icon from "astro-icon";
         >
             <div class="w-full u-flex gap-2 mb-4">
                 <div
-                    class="group p-2 u-flex border border-secondary-900"
+                    class="group p-2 u-flex border border-secondary-900 text-[1.5rem]"
                     id="article-search-status"
                     data-state="waiting"
                 >
                     <Icon
-                        class="hidden group-data-[state='loaded']:block w-6 text-primary-500"
-                        name="ic:baseline-search"
+                        class="hidden group-data-[state='loaded']:block text-primary-500"
+                        name="mdi:search"
                     />
                     <Icon
                         class:list={[
@@ -53,7 +53,7 @@ import Icon from "astro-icon";
                     ]}
                     id="article-search-close"
                 >
-                    <Icon class="w-6 text-red-500" name="ic:baseline-close" />
+                    <Icon class="text-[1.5rem] text-red-500" name="mdi:close" />
                 </button>
             </div>
             <div class="overflow-y-auto h-full pb-4">

diff --git a/src/components/base/Head.astro b/src/components/base/Head.astro
@@ -1,5 +1,6 @@
 ---
-import { HeadMetadata, Metadata } from "~/core/metadata";
+import type { HeadMetadata } from "~/core/metadata";
+import { Metadata } from "~/core/metadata";
 
 export interface Props {
     head: HeadMetadata;

diff --git a/src/components/base/ScrollToTop.astro b/src/components/base/ScrollToTop.astro
@@ -1,5 +1,5 @@
 ---
-import Icon from "astro-icon";
+import { Icon } from "astro-icon/components";
 ---
 
 <div class="u-flex" id="scroll-to-top-container">

diff --git a/src/components/home/Hero.astro b/src/components/home/Hero.astro
@@ -1,5 +1,5 @@
 ---
-import { Icon } from "astro-icon";
+import { Icon } from "astro-icon/components";
 import { ExternalUrls } from "~/core/urls";
 import SocialButton from "~/components/home/HeroSocialButton.astro";
 import HeroText from "~/components/home/HeroText.astro";
@@ -36,16 +36,16 @@ import HeroParticles from "~/components/home/HeroParticles.astro";
 
         <div class="u-container pb-6 u-flex !justify-start gap-6">
             <SocialButton name="GitHub" link={ExternalUrls.github}>
-                <Icon name="mdi:github" />
+                <Icon name="fa-brands:github" />
             </SocialButton>
             <SocialButton name="Discord" link={ExternalUrls.discord}>
-                <Icon name="ic:baseline-discord" />
+                <Icon name="fa-brands:discord" />
             </SocialButton>
             <SocialButton name="Mastodon" link={ExternalUrls.mastodon}>
-                <Icon name="mdi:mastodon" />
+                <Icon name="fa-brands:mastodon" />
             </SocialButton>
             <SocialButton name="Reddit" link={ExternalUrls.reddit}>
-                <Icon name="fa:reddit-alien" />
+                <Icon name="fa-brands:reddit-alien" />
             </SocialButton>
         </div>
     </div>

diff --git a/src/components/home/HeroParticles.astro b/src/components/home/HeroParticles.astro
@@ -1,5 +1,5 @@
 ---
-import { Icon } from "astro-icon";
+import { Icon } from "astro-icon/components";
 ---
 
 <div class="relative h-full">
@@ -20,7 +20,7 @@ import { Icon } from "astro-icon";
     </div>
     <div class="absolute right-16 top-[60%]">
         <div class="hidden lg:block text-primary-500" id="hero-particle">
-            <Icon name="ic:baseline-plus" />
+            <Icon name="mdi:plus" />
         </div>
     </div>
 </div>
@@ -29,7 +29,7 @@ import { Icon } from "astro-icon";
     #hero-particle {
         animation-duration: 10s !important;
 
-        @apply w-16 aspect-square animate-spin transition duration-300 opacity-75;
+        @apply text-[4rem] aspect-square animate-spin transition duration-300 opacity-75;
 
         &[data-visible="true"] {
             @apply opacity-100;

diff --git a/src/components/home/HeroSocialButton.astro b/src/components/home/HeroSocialButton.astro
@@ -5,13 +5,17 @@ interface Props {
 }
 
 const { name, link } = Astro.props;
+
+const label = `${name} (${link})`;
 ---
 
-<p title={`${name} (${link})`}>
+<p title={label}>
     <a
-        class="inline-block aspect-square w-6 sm:w-8 text-white/50 hover:text-primary-500 transition duration-200"
+        class="u-flex inline-block aspect-square text-[1.5rem] sm:text-[2rem] text-white/50 hover:text-primary-500 transition duration-200"
         href={link}
         target="_blank"
+        title={label}
+        aria-label={label}
     >
         <slot />
     </a>

diff --git a/src/core/articles.ts b/src/core/articles.ts
@@ -1,4 +1,5 @@
-import { CollectionEntry, getCollection } from "astro:content";
+import type { CollectionEntry } from "astro:content";
+import { getCollection } from "astro:content";
 
 export type ArticleCollectionEntry = CollectionEntry<"articles">;
 

diff --git a/src/core/utils.ts b/src/core/utils.ts
@@ -51,4 +51,14 @@ export class Utils {
     static getHtmlSafeId(content: string) {
         return content.toLowerCase().replaceAll(/[^\w\d]/g, "-");
     }
+
+    static extractAstroId(element: HTMLElement) {
+        const prefix = "data-astro-cid-";
+        for (const x of element.attributes) {
+            if (x.name.startsWith(prefix)) {
+                return x.name;
+            }
+        }
+        throw new Error("Unable to find astro content id");
+    }
 }
diff --git a/src/pages/404.astro b/src/pages/404.astro
@@ -1,5 +1,6 @@
 ---
-import { HeadMetadata, Metadata } from "~/core/metadata";
+import type { HeadMetadata } from "~/core/metadata";
+import { Metadata } from "~/core/metadata";
 import { Routes } from "~/core/routes";
 import Base from "~/layouts/Base.astro";
 import Message from "~/components/common/Message.astro";

diff --git a/src/pages/articles/[...slug].astro b/src/pages/articles/[...slug].astro
@@ -1,6 +1,7 @@
 ---
 import sugar from "sugar";
-import { ArticleCollectionEntry, Articles } from "~/core/articles";
+import type { ArticleCollectionEntry } from "~/core/articles";
+import { Articles } from "~/core/articles";
 import type { HeadMetadata } from "~/core/metadata";
 import Base from "~/layouts/Base.astro";
 

diff --git a/src/pages/articles/index.astro b/src/pages/articles/index.astro
@@ -1,6 +1,7 @@
 ---
-import Icon from "astro-icon";
-import { HeadMetadata, Metadata } from "~/core/metadata";
+import { Icon } from "astro-icon/components";
+import type { HeadMetadata } from "~/core/metadata";
+import { Metadata } from "~/core/metadata";
 import Base from "~/layouts/Base.astro";
 import { Articles } from "~/core/articles";
 import SearchDialog from "~/components/articles/SearchDialog.astro";
@@ -34,7 +35,7 @@ articles.sort((a, b) => b.data.time.valueOf() - a.data.time.valueOf());
                     id="article-search-dialog-button"
                 >
                     <p class="pr-2">
-                        <Icon class="w-5" name="ic:baseline-search" />
+                        <Icon class="text-[1.25rem]" name="mdi:search" />
                     </p>
                     <p>Search...</p>
                 </div>

diff --git a/src/pages/articles/search.json.ts b/src/pages/articles/search.json.ts
@@ -3,14 +3,12 @@ import { Articles } from "~/core/articles";
 import { Routes } from "~/core/routes";
 import { baseUrl } from "~/core/urls";
 
-export const get = async (_: APIContext) => {
+export const GET = async (_: APIContext) => {
     const articles = await Articles.fetchAll();
     const data = articles.map(({ slug, data: meta }) => [
         meta.title,
         meta.description,
         baseUrl + Routes.articles.constructRead(slug),
     ]);
-    return {
-        body: JSON.stringify(data),
-    };
+    return new Response(JSON.stringify(data));
 };
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -1,5 +1,6 @@
 ---
-import { HeadMetadata, Metadata } from "~/core/metadata";
+import type { HeadMetadata } from "~/core/metadata";
+import { Metadata } from "~/core/metadata";
 import Base from "~/layouts/Base.astro";
 import Hero from "~/components/home/Hero.astro";
 import Projects from "~/components/home/Projects.astro";