Merge pull request #17 from cocdeshijie/dev

minor fixes

Author: cocdeshijie

app/articles/[...slug]/page.tsx

@@ -2,7 +2,7 @@ import { allArticles } from "contentlayer/generated";
 import MDXContent from "@/components/mdx/MDXContent";
 import { notFound } from "next/navigation";
 import Comment from "@/components/comment/Comment";
-import ArticlesPageHeading from "@/components/ArticlesPageHeading";
+import ArticlesPageHeading from "@/components/article/ArticlesPageHeading";
 import MDXTableOfContents from "@/components/mdx/MDXTableOfContents";
 import { type Metadata } from "next/types";
 import { blogConfig } from "@/config";

app/articles/page.tsx

@@ -1,4 +1,4 @@
-import ArticleLoader from "@/components/ArticleLoader";
+import ArticleLoader from "@/components/article/ArticleLoader";
 import { allArticles } from "contentlayer/generated";
 import { compareDesc } from "date-fns";
 import { blogConfig } from "@/config";

app/page.tsx

@@ -1,6 +1,6 @@
 import { compareDesc } from "date-fns";
 import { allArticles } from "contentlayer/generated";
-import ArticleLoader from "@/components/ArticleLoader";
+import ArticleLoader from "@/components/article/ArticleLoader";
 import Hero from "@/components/hero/Hero";
 import { type Metadata } from "next/types";
 import { blogConfig } from "@/config";

components/Tags.tsx

@@ -9,7 +9,9 @@ type DateTagProps = {
 export function DateTag({ date }: DateTagProps) {
     return (
         <div className={"bg-accent_color/50 dark:bg-accent_color-dark/70 rounded-md"}>
-            <div className={"text-xs py-1 px-2"}>Posted on {format(parseISO(date), 'LLLL d, yyyy')}</div>
+            <div className={"text-xs py-1 px-2"} suppressHydrationWarning={true}>
+                Posted on {format(parseISO(date), 'LLLL d, yyyy')}
+            </div>
         </div>
     )
 }

components/ArticleCard.tsx components/article/ArticleCard.tsxcomponents/ArticleCard.tsx renamed to components/article/ArticleCard.tsx

@@ -2,7 +2,7 @@
 
 import { useState } from "react";
 import { Article } from "contentlayer/generated";
-import ArticleCard from "@/components/ArticleCard";
+import ArticleCard from "@/components/article/ArticleCard";
 import { cn } from "@/lib/utils";
 import { useScrollContext } from "@/components/ScrollProgressProvider";
 import { motion } from "framer-motion";

components/ArticleLoader.tsx components/article/ArticleLoader.tsxcomponents/ArticleLoader.tsx renamed to components/article/ArticleLoader.tsx

@@ -2,7 +2,8 @@
 
 import { cn } from "@/lib/utils";
 import useSWR from "swr";
-import {useState} from "react";
+import { RiExternalLinkLine } from "react-icons/ri";
+import { useState } from "react";
 
 type LinkCardProps = {
     link: string;
@@ -23,20 +24,23 @@ export default function LinkCard({ link }: LinkCardProps) {
                 "md:w-7/12 h-full",
                 "backdrop-blur-2xl overflow-hidden bg-slate-50/50 dark:bg-gray-800/70"
             )}>
-                <div className={"h-32 w-32 flex items-center"}>
-                    <div className={"rounded-xl h-full w-full bg-slate-300 dark:bg-slate-500"}></div>
-                </div>
-                <div className={"h-32 pl-4 flex-1 flex flex-col space-y-2"}>
+                <div className={"h-32 pr-4 flex-1 flex flex-col space-y-3"}>
                     <div className={"flex flex-col space-y-1"}>
                         <div className={"h-4 bg-slate-400 dark:bg-slate-500 rounded"}></div>
                         <div className={"h-4 bg-slate-400 dark:bg-slate-500 rounded"}></div>
                     </div>
                     <div className={"flex flex-col space-y-1"}>
                         <div className={"h-3 bg-slate-400 dark:bg-slate-500 rounded"}></div>
                         <div className={"h-3 bg-slate-400 dark:bg-slate-500 rounded"}></div>
-                        <div className={"h-3 bg-slate-400 dark:bg-slate-500 rounded"}></div>
+                        <div className={"h-3 bg-slate-400 dark:bg-slate-500 rounded hidden md:block"}></div>
+                    </div>
+                    <div className={"flex flex-col space-y-1"}>
+                        <div className={"h-2 bg-slate-400 dark:bg-slate-500 rounded"}></div>
                     </div>
                 </div>
+                <div className={"h-32 w-32 flex items-center"}>
+                    <div className={"rounded-lg h-full w-full bg-slate-300 dark:bg-slate-500"}></div>
+                </div>
             </div>
         </div>
     )
@@ -46,14 +50,25 @@ export default function LinkCard({ link }: LinkCardProps) {
     if (data) return (
         <div onMouseEnter={() => setHover(true)}
              onMouseLeave={() => setHover(false)}
-             onClick={() => window.location.href = link}
+             onClick={() => window.open(link, '_blank')}
              style={hover ? {cursor: 'pointer'} : {}}
              className={cn(
                  "flex p-2 mx-auto rounded-xl not-prose",
                  "md:w-7/12 h-full duration-500",
                  "backdrop-blur-2xl overflow-hidden bg-slate-50/50 dark:bg-gray-800/70",
                  {"shadow-lg shadow-primary_color/50 dark:shadow-primary_color-dark/30": hover}
              )}>
+            <div className={"h-32 pr-4 flex-1 flex flex-col space-y-2"}>
+                <div className={"line-clamp-2 font-bold text-base"}>
+                    {data.ogTitle}
+                </div>
+                <p className={"line-clamp-2 md:line-clamp-3 font-light text-sm"}>
+                    {data.ogDescription}
+                </p>
+                <p className={"line-clamp-1 font-thin text-xs"}>
+                    {data.ogUrl}
+                </p>
+            </div>
             <div className={"h-32 w-32 flex items-center"}>
                 {data.ogImage && data.ogImage[0]?.url ? (
                     <img className={"h-max w-max mx-auto rounded-lg"}
@@ -65,13 +80,11 @@ export default function LinkCard({ link }: LinkCardProps) {
                          src={"image-not-found.png"}/>
                 )}
             </div>
-            <div className={"h-32 pl-4 flex-1 flex flex-col space-y-2"}>
-                <div className={"line-clamp-2 font-bold text-base"}>
-                    {data.ogTitle}
-                </div>
-                <p className={"line-clamp-3 font-light text-sm"}>
-                    {data.ogDescription}
-                </p>
+            <div className={"absolute top-2 right-2"}>
+                <RiExternalLinkLine className={cn(
+                    hover ? "text-primary_color dark:text-primary_color-dark" : "",
+                    "duration-500"
+                )}/>
             </div>
         </div>
     )

components/ArticlesPageHeading.tsx …mponents/article/ArticlesPageHeading.tsxcomponents/ArticlesPageHeading.tsx renamed to components/article/ArticlesPageHeading.tsx components/ArticlesPageHeading.tsx renamed to components/article/ArticlesPageHeading.tsx

@@ -13,4 +13,3 @@ import LinkCard from "../../content-components/link-card/LinkCard";
 <LinkCard link={"https://github.com"}/>
 
 
-