Merge pull request #20 from cocdeshijie/dev

Image Lightbox and Friend Link Card

Author: cocdeshijie

components/mdx/MDXComponents.tsx

@@ -1,6 +1,11 @@
 "use client";
 
 import Link from "next/link";
+import * as Dialog from '@radix-ui/react-dialog';
+import { AnimatePresence, motion } from "framer-motion";
+import { cn } from "@/lib/utils";
+import { useState } from "react";
+
 
 function a({ href, children }: React.HTMLProps<HTMLAnchorElement>) {
     if (href && href.startsWith('/')) {
@@ -28,7 +33,44 @@ function ul({ children, className }: React.HTMLProps<HTMLUListElement>) {
     return <ul style={style}>{children}</ul>;
 }
 
+function Img({ src, alt }: React.HTMLProps<HTMLImageElement>) {
+    const [imageOpen, setImageOpen] = useState(false)
+
+    return (
+        <Dialog.Root onOpenChange={(open) => setImageOpen(open)}>
+            <Dialog.Trigger className="flex items-center justify-center h-full mx-auto">
+                <img src={src} alt={alt} className="cursor-pointer rounded-lg"/>
+            </Dialog.Trigger>
+            <AnimatePresence>
+                {imageOpen ? (
+                    <Dialog.Portal forceMount>
+                        <motion.div
+                            onClick={() => setImageOpen(false)} // close on click
+                            initial={{ opacity: 0, scale: 0.9 }}
+                            animate={{ opacity: 1, scale: 1 }}
+                            exit={{ opacity: 0, scale: 0.9 }}
+                            transition={{ ease: "easeOut", duration: 0.15 }}
+                            className={cn(
+                                "fixed z-40 inset-0 flex items-center justify-center",
+                                "bg-slate-800/50"
+                            )}
+                        >
+                            <Dialog.Content className="md:p-16">
+                                <img src={src} alt={alt} className="z-50 max-h-full max-w-full"/>
+                            </Dialog.Content>
+                        </motion.div>
+                    </Dialog.Portal>
+                ) : null}
+            </AnimatePresence>
+        </Dialog.Root>
+    );
+}
+
+const img = Img;
+
+
 export const MDXComponents = {
     a,
-    ul
+    ul,
+    img
 }

components/mdx/MDXStyles.tsx

@@ -20,7 +20,6 @@ export default function MDXStyles({ children }: MDXStylesProps) {
                 "prose-hr:border-slate-700 dark:prose-hr:border-slate-300",
                 "prose-th:border-secondary_color/75 dark:prose-th:border-secondary_color-dark/75 prose-th:border-b-2 prose-th:font-bold",
                 "prose-td:border-secondary_color/50 dark:prose-td:border-secondary_color-dark/50 prose-td:border-b",
-                "prose-img:mx-auto"
             )}
         >
             {children}

content-components/link-card/FriendLinkCard.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import { RiExternalLinkLine } from "react-icons/ri";
+import React, { ReactNode, Children, useState, useEffect } from 'react';
+
+type LinkCardProps = {
+    link: string;
+    profile: string;
+    title: string;
+    description: string;
+    author: string;
+}
+
+export function FriendLinkCard({ link, profile, title, description, author }: LinkCardProps) {
+    const [hover, setHover] = useState(false);
+
+    return (
+        <div onMouseEnter={() => setHover(true)}
+             onMouseLeave={() => setHover(false)}
+             onClick={() => window.open(link, '_blank')}
+             style={hover ? {cursor: 'pointer'} : {}}
+             className={cn(
+                 "flex p-2 mx-auto rounded-xl not-prose",
+                 "w-full 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"}>
+                    {title}
+                </div>
+                <p className={"line-clamp-2 md:line-clamp-3 font-light text-sm"}>
+                    {description}
+                </p>
+                <p className={"line-clamp-1 font-thin text-xs"}>
+                    {link}
+                </p>
+            </div>
+            <div className={"h-32 w-32 flex items-center"}>
+                <img className={"h-max w-max mx-auto rounded-lg"}
+                     alt={"Profile image"}
+                     src={profile}/>
+            </div>
+            <div className={"absolute top-2 right-2"}>
+                <RiExternalLinkLine className={cn(
+                    hover ? "text-primary_color dark:text-primary_color-dark" : "",
+                    "duration-500"
+                )}/>
+            </div>
+        </div>
+    )
+}
+
+type RandomFriendLinkCardsProps = {
+    children: ReactNode[];
+};
+
+export function RandomFriendLinkCards({ children }: RandomFriendLinkCardsProps) {
+    const [randomizedChildren, setRandomizedChildren] = useState<ReactNode[]>([]);
+
+    useEffect(() => {
+        const shuffled = Children.toArray(children).sort(() => 0.5 - Math.random());
+        setRandomizedChildren(shuffled);
+    }, [children]);
+
+    return (
+        <div className="space-y-4 md:space-y-0 md:grid md:grid-cols-2 gap-4">
+            {randomizedChildren}
+        </div>
+    );
+}

content/pages/link-card.mdx

@@ -8,8 +8,46 @@ import LinkCard from "../../content-components/link-card/LinkCard";
 <LinkCard link={"https://github.com"}/>
 ```
 
+The Link Card component only requires the link to a website. It will retrieve the title, description and Open Graph image automatically.
+
 import LinkCard from "../../content-components/link-card/LinkCard";
 
 <LinkCard link={"https://github.com"}/>
 
 
+```mdx /content/pages/link-card.mdx
+import { FriendLinkCard, RandomFriendLinkCards } from "../../content-components/link-card/FriendLinkCard";
+
+<RandomFriendLinkCards>
+    <FriendLinkCard link={"https://next-sakurairo.qwq.xyz"}
+                    profile={"https://next-sakurairo.qwq.xyz/img.png"}
+                    title={"Next Sakurairo の Site"}
+                    description={"A blog built with Next.js, Tailwind CSS, Radix UI, Framer Motion, and ContentLayer with MDX."}
+                    author={"cocdeshijie"}/>
+
+    <FriendLinkCard link={"https://qwq.xyz"}
+                    profile={"https://qwq.xyz/cocdeshijie.gif"}
+                    title={"cocdeshijie の Blog"}
+                    description={"qwq~"}
+                    author={"cocdeshijie"}/>
+</RandomFriendLinkCards>
+```
+
+The Friend Link Card component needs to be used as children of RandomFriendLinkCards.
+
+import { FriendLinkCard, RandomFriendLinkCards } from "../../content-components/link-card/FriendLinkCard";
+
+<RandomFriendLinkCards>
+    <FriendLinkCard link={"https://next-sakurairo.qwq.xyz"}
+                    profile={"https://next-sakurairo.qwq.xyz/img.png"}
+                    title={"Next Sakurairo の Site"}
+                    description={"A blog built with Next.js, Tailwind CSS, Radix UI, Framer Motion, and ContentLayer with MDX."}
+                    author={"cocdeshijie"}/>
+
+    <FriendLinkCard link={"https://qwq.xyz"}
+                    profile={"https://qwq.xyz/cocdeshijie.gif"}
+                    title={"cocdeshijie の Blog"}
+                    description={"qwq~"}
+                    author={"cocdeshijie"}/>
+</RandomFriendLinkCards>
+