Merge pull request #2 from bluenex/move-static-data

move static data

.nvmrc

@@ -1 +1 @@
-16
+18

components/TwAvatar.tsx

@@ -1,4 +1,4 @@
-import Image from "next/image";
+import Image from "next/legacy/image";
 import { DetailedHTMLProps, HTMLAttributes } from "react";
 
 const TwAvatar = (

components/TwBlogLayout.tsx

@@ -1,34 +1,35 @@
 import NextLink from "next/link";
-import { DetailedHTMLProps, HTMLAttributes } from "react";
+import { ComponentProps } from "react";
 import TwAvatar from "./TwAvatar";
 import TwBlogNav from "./TwBlogNav";
 import TwDarkToggle from "./TwDarkToggle";
 import TwFooter from "./TwFooter";
 import TwLayout from "./TwLayout";
+import TwLink from "./TwLink";
 
 const TwBlogLayout = (
-  props: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
+  props: ComponentProps<"div"> & { tags: string[]; years: string[] },
 ) => {
-  const { children, ...restProps } = props;
+  const { tags, years, children, ...restProps } = props;
 
   return (
     <TwLayout {...restProps}>
       <div className="flex min-h-screen flex-col justify-between gap-20">
         <div className="container mx-auto flex flex-col gap-6 px-6 pt-6 md:max-w-2xl md:px-0">
           {/* header bar */}
           <div className="relative flex items-center justify-between">
-            <NextLink href="/" passHref>
-              <a className="flex items-center justify-center gap-4 hover:scale-105 hover:transition-transform hover:duration-300">
+            <NextLink href="/">
+              <TwLink className="flex items-center justify-center gap-4 hover:scale-105 hover:transition-transform hover:duration-300">
                 <TwAvatar className="h-12 w-12" />
                 <span className="text-xl">bluenex</span>
-              </a>
+              </TwLink>
             </NextLink>
 
             <TwDarkToggle />
           </div>
 
           {/* blog nav */}
-          <TwBlogNav />
+          <TwBlogNav tags={tags} years={years} />
 
           {/* blog content */}
           {children}

components/TwBlogListItem.tsx

@@ -1,6 +1,7 @@
 import NextLink from "next/link";
 import { PostListItem } from "../lib/posts";
 import TwBlogTagsDate from "./TwBlogTagsDate";
+import TwLink from "./TwLink";
 
 const TwBlogListItem = ({ itemData }: { itemData: PostListItem }) => {
   const { id, title, excerpt } = itemData;
@@ -11,11 +12,10 @@ const TwBlogListItem = ({ itemData }: { itemData: PostListItem }) => {
       className="flex w-full flex-col gap-3 border-b border-b-gray-400 pb-6 last:border-b-0"
     >
       <NextLink href={`/blog/${id}`}>
-        <a className="flex flex-col gap-3 hover:text-sky-500 hover:dark:text-sky-300">
+        <TwLink className="flex flex-col gap-3 hover:text-sky-500 hover:dark:text-sky-300">
           <h3 className="text-2xl font-semibold">{title}</h3>
-
           <p>{excerpt}</p>
-        </a>
+        </TwLink>
       </NextLink>
 
       <TwBlogTagsDate itemData={itemData} />

components/TwBlogNav.tsx

@@ -1,37 +1,25 @@
 import NextLink from "next/link";
 import { useRouter } from "next/router";
-import React, {
-  ButtonHTMLAttributes,
-  DetailedHTMLProps,
-  useState,
-} from "react";
-import staticData from "../public/static-data.json";
+import React, { ComponentProps, useState } from "react";
 import TwLink from "./TwLink";
 
-export const TwBlogNavButton = (
-  props: DetailedHTMLProps<
-    ButtonHTMLAttributes<HTMLButtonElement>,
-    HTMLButtonElement
-  >
-) => (
+export const TwBlogNavButton = (props: ComponentProps<"button">) => (
   <button
     className="text-sky-500 hover:text-sky-700 dark:text-sky-400 hover:dark:text-sky-200"
     {...props}
   />
 );
 
-const TwBlogNav = () => {
+const TwBlogNav = ({ tags, years }: { tags: string[]; years: string[] }) => {
   const router = useRouter();
 
   const [showTags, setShowTags] = useState<boolean>(false);
   const [showYears, setShowYears] = useState<boolean>(false);
 
-  const { tags, years } = staticData;
-
   return (
     <nav className="mb-4 flex flex-col">
       <div className="flex justify-center gap-2">
-        <NextLink href="/blog" passHref>
+        <NextLink href="/blog">
           <TwLink>blog</TwLink>
         </NextLink>
         <span>•</span>
@@ -69,7 +57,7 @@ const TwBlogNav = () => {
                         pathname: "/blog",
                         query: { tag },
                       },
-                      undefined
+                      undefined,
                     );
                   }}
                 >
@@ -88,7 +76,7 @@ const TwBlogNav = () => {
                         pathname: "/blog",
                         query: { year },
                       },
-                      undefined
+                      undefined,
                     );
                   }}
                 >

components/TwBlogTagsDate.tsx

@@ -22,14 +22,14 @@ const TwBlogTagsDate = ({ itemData }: { itemData: PostListItem }) => {
           {tags
             .map((tag) => {
               return (
-                <NextLink href={`/blog?tag=${tag}`} key={tag} passHref>
+                <NextLink href={`/blog?tag=${tag}`} key={tag}>
                   <TwLink>{tag}</TwLink>
                 </NextLink>
               );
             })
             .reduce<ReactNode>(
               (prev, curr) => (prev ? [prev, ", ", curr] : [curr]),
-              undefined
+              undefined,
             )}
         </div>
       ) : (

components/TwFooter.tsx

@@ -7,12 +7,14 @@ const TwFooter = () => {
       <TwLink
         href="https://github.com/bluenex"
         className="hover:scale-110 hover:duration-200"
+        asExternalLink
       >
         <Svgs.GitHub className="h-8 w-8 fill-gray-600 dark:fill-gray-300" />
       </TwLink>
       <TwLink
         href="https://twitter.com/tulakann"
         className="hover:scale-110 hover:duration-200"
+        asExternalLink
       >
         <Svgs.Twitter className="h-8 w-8 fill-gray-600 dark:fill-gray-300" />
       </TwLink>

components/TwLayout.tsx

@@ -1,8 +1,6 @@
-import { DetailedHTMLProps, HTMLAttributes } from "react";
+import { ComponentProps } from "react";
 
-const TwLayout = (
-  props: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
-) => {
+const TwLayout = (props: ComponentProps<"div">) => {
   const { className = "", ...restProps } = props;
 
   return (

components/TwLink.tsx

@@ -1,35 +1,60 @@
-import {
-  AnchorHTMLAttributes,
-  DetailedHTMLProps,
-  forwardRef,
-  LegacyRef,
-} from "react";
+import { forwardRef, Ref } from "react";
+import { twMerge } from "tailwind-merge";
 
+type AsExternalLink = {
+  asExternalLink?: true;
+  href?: string;
+  className?: string;
+  children: React.ReactNode;
+};
+type AsInternal = {
+  asExternalLink?: false;
+  href?: never;
+  className?: string;
+  children: React.ReactNode;
+};
+
+type Props = AsExternalLink | AsInternal;
+
+/**
+ * @description TwLink is a component that wraps around <a> tag.
+ * If link style is needed to be a children of NextLink, pass asSpan as true.
+ */
 const TwLink = forwardRef(
-  (
-    props: DetailedHTMLProps<
-      AnchorHTMLAttributes<HTMLAnchorElement>,
-      HTMLAnchorElement
-    > & { isExternal?: boolean | undefined },
-    ref: LegacyRef<HTMLAnchorElement> | undefined
-  ) => {
-    const { isExternal = false, ...restProps } = props;
-    const externalProps = isExternal
-      ? {
-          target: "_blank",
-          rel: "noopener noreferrer",
-        }
-      : {};
+  (props: Props, ref: Ref<HTMLAnchorElement> | undefined) => {
+    const { children, className, href, asExternalLink = false } = props;
+
+    if (asExternalLink) {
+      return (
+        <a
+          ref={ref}
+          href={href}
+          className={twMerge(
+            !className &&
+              "text-sky-500 underline underline-offset-2 hover:text-sky-700 dark:text-sky-400 hover:dark:text-sky-200",
+            className && className,
+          )}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          {children}
+        </a>
+      );
+    }
 
     return (
-      <a
+      <span
         ref={ref}
-        className="text-sky-500 underline underline-offset-2 hover:text-sky-700 dark:text-sky-400 hover:dark:text-sky-200"
-        {...externalProps}
-        {...restProps}
-      />
+        className={twMerge(
+          !className &&
+            "text-sky-500 underline underline-offset-2 hover:text-sky-700 dark:text-sky-400 hover:dark:text-sky-200",
+          className && className,
+        )}
+      >
+        {children}
+      </span>
     );
-  }
+  },
 );
 
 TwLink.displayName = "TwLink";

components/TwResumeLayout.tsx

@@ -1,13 +1,12 @@
 import NextLink from "next/link";
-import { DetailedHTMLProps, HTMLAttributes } from "react";
+import { ComponentProps } from "react";
 import TwAvatar from "./TwAvatar";
 import TwDarkToggle from "./TwDarkToggle";
 import TwFooter from "./TwFooter";
 import TwLayout from "./TwLayout";
+import TwLink from "./TwLink";
 
-const TwResumeLayout = (
-  props: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
-) => {
+const TwResumeLayout = (props: ComponentProps<"div">) => {
   const { children, ...restProps } = props;
 
   return (
@@ -16,11 +15,11 @@ const TwResumeLayout = (
         <div className="container mx-auto mb-6 flex flex-col gap-6 px-6 pt-6 md:max-w-2xl md:px-0">
           {/* header bar */}
           <div className="relative flex items-center justify-between">
-            <NextLink href="/" passHref>
-              <a className="flex items-center justify-center gap-4 hover:scale-105 hover:transition-transform hover:duration-300">
+            <NextLink href="/">
+              <TwLink className="flex items-center justify-center gap-4 hover:scale-105 hover:transition-transform hover:duration-300">
                 <TwAvatar className="h-12 w-12" />
                 <span className="text-xl">bluenex</span>
-              </a>
+              </TwLink>
             </NextLink>
 
             <TwDarkToggle />

lib/blog.ts

@@ -0,0 +1,35 @@
+import { readFileSync } from "fs";
+import { glob } from "glob";
+import matter from "gray-matter";
+import path from "path";
+
+const postsDirectory = path.join(process.cwd(), "posts");
+
+export function getAllTagsAndYears() {
+  const fileNames = glob.sync(`${postsDirectory}/**/*.md`);
+  const yearsSet = new Set<string>();
+  const tagsSet = new Set<string>();
+
+  fileNames.forEach((fileName) => {
+    const [id] = fileName.split("/").slice(-1);
+    const [year] = id.split("-");
+
+    // add year
+    yearsSet.add(year);
+
+    const filePath = path.join(postsDirectory, id);
+    const fileContents = readFileSync(filePath, "utf8");
+
+    const matterResult = matter(fileContents);
+
+    matterResult.data.tags.forEach((tag: string) => {
+      // add tag
+      tagsSet.add(tag);
+    });
+  });
+
+  return {
+    years: Array.from(yearsSet).sort((a, b) => Number(b) - Number(a)),
+    tags: Array.from(tagsSet).sort(),
+  };
+}

lib/posts.ts

@@ -1,3 +1,4 @@
+import dayjs from "dayjs";
 import { readFileSync } from "fs";
 import { glob } from "glob";
 import matter from "gray-matter";
@@ -31,8 +32,8 @@ const firstParagraphAsExcerpt = (f: { content: string; excerpt: string }) => {
 
   const links = Array.from(
     f.excerpt?.matchAll(
-      /(\[((?:\[[^\]]*\]|[^\[\]])*)\]\([ \t]*()<?((?:\([^)]*\)|[^()\s])*?)>?[ \t]*((['"])(.*?)\6[ \t]*)?\))/g
-    ) || []
+      /(\[((?:\[[^\]]*\]|[^\[\]])*)\]\([ \t]*()<?((?:\([^)]*\)|[^()\s])*?)>?[ \t]*((['"])(.*?)\6[ \t]*)?\))/g,
+    ) || [],
   );
 
   if (links.length > 0) {
@@ -88,7 +89,12 @@ export function getPostList(): PostListItem[] {
     };
   });
 
-  return postList.reverse();
+  return postList.sort((a, b) => {
+    return (
+      dayjs(b.date, "DD-MM-YYYY HH:mm").unix() -
+      dayjs(a.date, "DD-MM-YYYY HH:mm").unix()
+    );
+  });
 }
 
 export async function getPostData(id: string): Promise<PostData> {