Merge pull request #7 from cocdeshijie/dev

Link Card Component, and small fixes

Author: cocdeshijie

app/api/content-components/link-card/link-card/route.ts

@@ -0,0 +1,18 @@
+import { NextResponse } from "next/server"
+
+export async function GET(request: Request) {
+    const { searchParams } = new URL(request.url)
+    const url = decodeURIComponent(searchParams.get('url') || '')
+
+    const ogs = require('open-graph-scraper');
+    const options = { url: url };
+    const data = await ogs(options);
+    let { error, result } = data;
+    if (error) {
+        result = {
+            "ogTitle": "Error",
+            "ogDescription": "Error retrieving metadata.",
+        }
+    }
+    return NextResponse.json(result)
+}

app/globals.css

@@ -12,6 +12,10 @@
     --scrollbar-bg: theme('colors.slate.800');
 }
 
+code {
+    word-break: break-all;
+}
+
 ::-webkit-scrollbar {
     width: 6px;
     height: 6px;

components/background-image/APIBackgroundImage.tsx

@@ -3,8 +3,8 @@ import Image from "next/image";
 const backgroundImageSetting = require("@/config").blogConfig.background_image.settings
 
 export default function APIBackgroundImage() {
+    const image = backgroundImageSetting.url ?? "/api/image-api";
 
-    const image = backgroundImageSetting.image ?? "/api/image-api";
     return (
         <>
             <Image

components/mdx/MDXComponents.tsx

@@ -18,6 +18,17 @@ function a({ href, children }: React.HTMLProps<HTMLAnchorElement>) {
     );
 }
 
+function ul({ children, className }: React.HTMLProps<HTMLUListElement>) {
+    let style = {};
+
+    if (className && className.includes('contains-task-list')) {
+        style = { listStyleType: 'none' };
+    }
+
+    return <ul style={style}>{children}</ul>;
+}
+
 export const MDXComponents = {
-    a
+    a,
+    ul
 }

components/mdx/MDXStyles.tsx

@@ -19,7 +19,8 @@ export default function MDXStyles({ children }: MDXStylesProps) {
                 "dark:prose-blockquote:text-primary_color",
                 "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-td:border-secondary_color/50 dark:prose-td:border-secondary_color-dark/50 prose-td:border-b",
+                "prose-img:mx-auto"
             )}
         >
             {children}

config/index.ts

@@ -40,8 +40,12 @@ export const blogConfig: BlogConfig = {
             title: "Content Components",
             child: [
                 {
-                    title: "My Anime List Component",
-                    href: "/my-anime-list"
+                    title: "My Anime List Components",
+                    href: "/anime-list"
+                },
+                {
+                    title: "Link Card Components",
+                    href: "/link-card"
                 }
             ]
         }

content-components/link-card/LinkCard.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import useSWR from "swr";
+import {useState} from "react";
+
+type LinkCardProps = {
+    link: string;
+}
+
+const fetcher = (url: string) => fetch(url).then(r => r.json())
+
+export default function LinkCard({ link }: LinkCardProps) {
+    const [hover, setHover] = useState(false);
+    const { data, error, isLoading } = useSWR(
+        "/api/content-components/link-card/link-card?url=" + encodeURIComponent(link),
+        fetcher)
+
+    if (isLoading) return (
+        <div className={"animate-pulse"}>
+            <div className={cn(
+                "flex p-2 mx-auto rounded-xl not-prose",
+                "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={"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>
+                </div>
+            </div>
+        </div>
+    )
+
+    if (error || data.error) return <p>Error: {error}</p>
+
+    if (data) return (
+        <div onMouseEnter={() => setHover(true)}
+             onMouseLeave={() => setHover(false)}
+             onClick={() => window.location.href = link}
+             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 w-32 flex items-center"}>
+                {data.ogImage && data.ogImage[0]?.url ? (
+                    <img className={"h-max w-max mx-auto rounded-lg"}
+                         alt={data.ogTitle}
+                         src={data.ogImage[0].url}/>
+                ) : (
+                    <img className={"h-max w-max mx-auto rounded-lg"}
+                         alt={data.ogTitle}
+                         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>
+        </div>
+    )
+}

content/articles/markdown-preview.mdx

@@ -0,0 +1,90 @@
+---
+title: Markdown Preview
+date: 2000-01-01
+excerpt: Markdown Preview
+image: https://img.qwq.xyz/2023/c12bb8eabe700.png
+---
+
+# Heading 1
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+## Heading 2
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+### Heading 3
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+#### Heading 4
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+##### Heading 5
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+###### Heading 6
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+## Bold
+**Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.**
+
+## Italic
+*Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.*
+
+## Blockquote
+> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+## Ordered List
+1. First item
+2. Second item
+3. Third item
+
+## Unordered List
+- First item
+- Second item
+- Third item
+
+## Horizontal Rule
+---
+
+## Link
+(not link) [link](https://www.example.com) (not link)
+
+## Image
+![alt text](/_next/image?url=%2Fimg.png&w=256&q=75)
+
+## Table
+| Syntax | Description |
+| ----------- | ----------- |
+| Header | Title |
+| Paragraph | Text |
+
+## Code
+Random Python code: _`list(map(lambda x: x**2, filter(lambda x: x % 2 == 0, [1, 2, 3, 4, 5, 6, 7, 8, 9, 10])))`_
+
+Not code: _`6BEF9A1D57F36C055D7799F810E9A2BB432E8F59C05B33B19C9A0784C76DDBE79838AB2621E49E06D74D5FADB41C4395`_
+
+## Fenced Code Block
+```json example.json
+{
+  "firstName": "John",
+  "lastName": "Smith",
+  "age": 25
+}
+```
+
+## Footnotes
+Here's a sentence with a footnote. [^1]
+
+## Strikethrough
+~~The world is flat.~~
+
+## Task List
+
+- [x] Write the press release
+- [ ] Update the website
+- [ ] Contact the media
+
+
+
+
+[^1]: This is the footnote.
+

content/pages/my-anime-list.mdx content/pages/anime-list.mdxcontent/pages/my-anime-list.mdx renamed to content/pages/anime-list.mdx

@@ -1,5 +1,5 @@
 ---
-title: My Anime List Component
+title: Anime List Components
 ---
 
 ```mdx /content/pages/my-anime-list.mdx

content/pages/link-card.mdx

@@ -0,0 +1,16 @@
+---
+title: Link Card Components
+---
+
+```mdx /content/pages/link-card.mdx
+import LinkCard from "../../content-components/link-card/LinkCard";
+
+<LinkCard link={"https://github.com"}/>
+```
+
+import LinkCard from "../../content-components/link-card/LinkCard";
+
+<LinkCard link={"https://github.com"}/>
+
+
+