Making some enhancement

- Changed the background image color
- Refactored the code of custom plugins
- Adding new markdown syntax (newline and gap)
- Modified the text highlight area to be wrapped around the wrapped text

react-frontend/src/Portfolio/index.tsx

@@ -44,6 +44,9 @@ export default function Portfolio() {
             minHeight: "100vh",
             color: theme.colors.base[700],
             backgroundImage: theme.backgroundImage,
+            backgroundSize: 'auto', // Adjust the size of the background image
+            backgroundRepeat: 'repeat', // Repeat the background image
+            backgroundPosition: 'center',
             '& *::selection': {
                 backgroundColor: theme.colors.base[700],
                 color: theme.colors.base[100]

react-frontend/src/Types/sanity/aboutPage.ts

@@ -1,10 +1,4 @@
-type Resume = {
-    link: string;
-    text: string;
-}
-
 export type SanityAboutPage = {
     personImage: string;
     description: string;
-    resume: Resume;
 }

react-frontend/src/components/HTMLMarkdown/AncherLinkMarkdown.tsx

@@ -2,25 +2,40 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import Button from '../Button';
 import Header from '../MainSection/Header';
 import type { Element } from 'hast'
-import { faLink } from '@fortawesome/free-solid-svg-icons';
+import { faLink, faFileAlt } from '@fortawesome/free-solid-svg-icons';
 
 type AncherLinkMarkdownProps = {
     node?: Element,
 } & React.HTMLAttributes<HTMLAnchorElement>;
 
+const iconType = ['doc', 'link'] as const;
+
+const iconName: Record<typeof iconType[number], any> = {
+    doc: faFileAlt,
+    link: faLink,
+}
+
 const AncherLinkMarkdown = ({ node, ...props }: AncherLinkMarkdownProps) => {
     const title = props.children as string;
     const link = node?.properties?.href as string;
-    // `[[Google]](https://www.google.com)`
-    const matchButtonLink = /\[(.*)\]/.exec(title);
+    // `[[Google|doc]](https://www.google.com)`
+    const matchButtonLink = /\[([^|]+)(?:\|(doc|link))?\]/.exec(title);
     if (matchButtonLink) {
+        const title = matchButtonLink[1];
+        const icon = iconName[(matchButtonLink[2] as typeof iconType[number]) || 'link'];
+        console.log(icon);
+
         return (
             <Button
-                icon={<FontAwesomeIcon icon={faLink} />}
-                text={matchButtonLink[1]}
+                icon={<FontAwesomeIcon icon={icon} />}
+                text={title}
                 size='md'
                 onClick={() => { window.open(link, "_blank") }}
                 pointer={true}
+                style={{
+                    marginTop: '1rem',
+                    marginRight: '1rem',
+                }}
             />
         )
     }

react-frontend/src/components/HTMLMarkdown/BlockquoteMarkdown.tsx

@@ -19,6 +19,8 @@ type BlockquoteMarkdownProps = {
 
 const BlockquoteMarkdown = ({ node, className, ...props }: BlockquoteMarkdownProps) => {
     const { theme } = useThemeContext();
+    console.log("Node Children", node?.children);
+    console.log("Props Children", props.children);
     const contentJSXElementsFromAST = useMemo(() => (
         node?.children.map((element) => toJsxRuntime(element as RootContent, {
             Fragment, jsx, jsxs, passNode: true, components: {
@@ -59,7 +61,8 @@ const BlockquoteMarkdown = ({ node, className, ...props }: BlockquoteMarkdownPro
     if (className?.includes("popup")) {
         return (
             <MainSection>
-                {contentJSXElementsFromAST}
+                {/* {contentJSXElementsFromAST} */}
+                {props.children}
             </MainSection>
         );
     }

react-frontend/src/components/HTMLMarkdown/SpanMarkdown.tsx

@@ -1,7 +1,6 @@
 import { CSSProperties, useMemo } from 'react';
 import { useThemeContext } from '../../contexts/ThemeContext';
 import type { Element, RootContent } from 'hast'
-import { v4 as uuidv4 } from 'uuid';
 import { Fragment, jsx, jsxs } from 'react/jsx-runtime'
 import { markdownComponents } from '.';
 import { toJsxRuntime } from 'hast-util-to-jsx-runtime'
@@ -33,19 +32,10 @@ const SpanMarkdown = ({ node, className, ...props }: SpanMarkdownProps) => {
     const textStyle = useMemo((): CSSProperties => {
         return {
             position: "relative",
-            display: "inline-block",
             zIndex: 2,
         }
     }, []);
-    const lightEffectStyle = useMemo((): CSSProperties => ({
-        position: "absolute",
-        left: 0,
-        right: 0,
-        bottom: 0,
-        backgroundColor: theme.colors.secondary[300],
-        height: "40%",
-        zIndex: -1,
-    }), [theme.colors.secondary]);
+
     const targetElement = useMemo((): TargetElementType => ({
         "highlight-area": {
             "base": (oldStyle: CSSProperties, children: React.ReactNode) => {
@@ -54,17 +44,11 @@ const SpanMarkdown = ({ node, className, ...props }: SpanMarkdownProps) => {
                     ...textStyle,
                     fontWeight: 600,
                     color: theme.colors.base[800],
-                }
-                const barStyle = {
-                    ...lightEffectStyle,
-                    backgroundColor: theme.colors.base[200],
+                    background: `linear-gradient(to bottom, transparent 60%, ${theme.colors.base[200]} 60%)`,
                 }
                 return {
                     style: spanStyle,
-                    children: [
-                        <div key={uuidv4()} style={barStyle} />,
-                        children
-                    ]
+                    children: children
                 }
             },
             "secondary": (oldStyle: CSSProperties, children: React.ReactNode) => {
@@ -73,17 +57,11 @@ const SpanMarkdown = ({ node, className, ...props }: SpanMarkdownProps) => {
                     ...textStyle,
                     fontWeight: 600,
                     color: theme.colors.base[800],
-                }
-                const barStyle = {
-                    ...lightEffectStyle,
-                    backgroundColor: theme.colors.secondary[300],
+                    background: `linear-gradient(to bottom, transparent 60%, ${theme.colors.secondary[300]} 60%)`
                 }
                 return {
                     style: spanStyle,
-                    children: [
-                        <div key={uuidv4()} style={barStyle} />,
-                        children
-                    ]
+                    children: children
                 }
             },
         },
@@ -112,7 +90,7 @@ const SpanMarkdown = ({ node, className, ...props }: SpanMarkdownProps) => {
                 }
             },
         },
-    }), [lightEffectStyle, textStyle, theme.colors.base, theme.colors.secondary]);
+    }), [textStyle, theme.colors.base, theme.colors.secondary]);
     const spanElement = useMemo((): SpanElementType => {
         return classes.includes("highlight-area") ? "highlight-area" : "highlight-text";
     }, [classes]);
@@ -124,7 +102,7 @@ const SpanMarkdown = ({ node, className, ...props }: SpanMarkdownProps) => {
     }, [colorType, contentJSXElementsFromAST, props.style, spanElement, targetElement]);
 
     // `**[[Button]]**`
-    if(classes.includes("button")) {
+    if (classes.includes("button")) {
         return <Button key={classes.join()} size='sm'>{contentJSXElementsFromAST}</Button>
     }