✨ Experiment WIP

Author: chanjunren

www/package-lock.json

@@ -21,6 +21,7 @@
     "@docusaurus/preset-classic": "^3.9.2",
     "@docusaurus/theme-search-algolia": "^3.9.2",
     "@mdx-js/react": "^3.0.0",
+    "@radix-ui/react-avatar": "^1.1.11",
     "@radix-ui/react-hover-card": "^1.1.15",
     "@radix-ui/react-icons": "^1.3.2",
     "@radix-ui/react-separator": "^1.1.8",

www/package.json

@@ -0,0 +1,29 @@
+import { Card, CardContent } from "@site/src/components/ui/Card";
+import IdealImage from "@theme/IdealImage";
+import TypewriterText from "../common/TypewriterText";
+import { useMateria } from "../home/hooks/useMateria";
+import { Button } from "../ui/Button";
+const CHINESE_COMMA = "，";
+
+export default function HomeImage() {
+  const { featuredQuote, message } = useMateria();
+
+  if (message) {
+    return <TypewriterText active text={message} />;
+  }
+
+  if (!featuredQuote) {
+    return null;
+  }
+
+  return (
+    <Card className="h-fit w-fit">
+      <CardContent>
+        <IdealImage
+          className="h-72 rounded-md shadow-lg"
+          img="https://i.pinimg.com/736x/4d/28/77/4d2877fdb2248e2ad83f762cdae1d2ff.jpg"
+        />
+      </CardContent>
+    </Card>
+  );
+}

www/src/components/experiment/HomeImage.tsx

@@ -0,0 +1,38 @@
+import { Card, CardContent } from "@site/src/components/ui/Card";
+import IdealImage from "@theme/IdealImage";
+import TypewriterText from "../common/TypewriterText";
+import { useMateria } from "../home/hooks/useMateria";
+import { Button } from "../ui/Button";
+import { Avatar, AvatarFallback, AvatarImage } from "../ui/Avatar";
+const CHINESE_COMMA = "，";
+
+export default function HomeMenu() {
+  return (
+    <Card className="grow">
+      <CardContent className="flex flex-col items-start gap-2">
+        <Button>about</Button>
+        <Button className="mb-10">zettelkasten</Button>
+        <div className="*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:grayscale">
+          <Avatar>
+            <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+            <AvatarFallback>CN</AvatarFallback>
+          </Avatar>
+          <Avatar>
+            <AvatarImage
+              src="https://github.com/maxleiter.png"
+              alt="@maxleiter"
+            />
+            <AvatarFallback>LR</AvatarFallback>
+          </Avatar>
+          <Avatar>
+            <AvatarImage
+              src="https://github.com/evilrabbit.png"
+              alt="@evilrabbit"
+            />
+            <AvatarFallback>ER</AvatarFallback>
+          </Avatar>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

www/src/components/experiment/HomeMenu.tsx

@@ -0,0 +1,34 @@
+import { Card, CardContent, CardTitle } from "@site/src/components/ui/Card";
+import IdealImage from "@theme/IdealImage";
+import TypewriterText from "../common/TypewriterText";
+import { useMateria } from "../home/hooks/useMateria";
+import CustomTag from "../ui/CustomTag";
+const CHINESE_COMMA = "，";
+
+export default function Quote() {
+  const { featuredQuote, message } = useMateria();
+
+  if (message) {
+    return <TypewriterText active text={message} />;
+  }
+
+  if (!featuredQuote) {
+    return null;
+  }
+
+  return (
+    <Card className="col-span-2 gap-4">
+      <CustomTag className="font-normal ml-5" color="rose">
+        QOTD
+      </CustomTag>
+      <CardContent className="flex flex-col cursor-help">
+        <span className="mb-2 font-(family-name:--font-noto-serif-sc)">
+          {featuredQuote.quote}
+        </span>
+        <span className="border-l-2 border-l-accent pl-2">
+          {featuredQuote.source}
+        </span>
+      </CardContent>
+    </Card>
+  );
+}

www/src/components/experiment/Quote.tsx

@@ -0,0 +1,14 @@
+import { Card, CardDescription, CardTitle } from "@site/src/components/ui/Card";
+import CustomTag from "@site/src/components/ui/CustomTag";
+import { useMateria } from "../home/hooks/useMateria";
+
+export default function Welcome() {
+  return (
+    <Card className="col-span-2 p-10">
+      <CustomTag color="rose">HELLO</CustomTag>
+      <CardDescription>
+        A space for Jun Ren to do whatever he wants
+      </CardDescription>
+    </Card>
+  );
+}

www/src/components/experiment/Welcome.tsx

@@ -5,7 +5,7 @@ import ProjectGallery from "../projects/ProjectGallery";
 export default function Gallery(): ReactElement {
   return (
     <section className="col-span-12">
-      <PrimaryHeader className="!justify-self-center mb-10">
+      <PrimaryHeader className="justify-self-center! mb-10">
         🪴 gallery
       </PrimaryHeader>
       <section className="col-span-12 grid md:grid-cols-12 gap-x-4 md:gap-y-3 gap-y-5 auto-rows-[240px] md:auto-rows-[190px]">

www/src/components/home/Gallery.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import * as React from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+
+import { cn } from "@site/src/lib/utils";
+
+function Avatar({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      className={cn(
+        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function AvatarImage({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn("aspect-square size-full", className)}
+      {...props}
+    />
+  );
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        "bg-muted flex size-full items-center justify-center rounded-full",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Avatar, AvatarImage, AvatarFallback };

www/src/components/home/Quote.tsx

@@ -9,11 +9,11 @@ const buttonVariants = cva(
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        default: "bg-primary text-primary-foreground hover:bg-(--foreground)/5",
         destructive:
           "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
         outline:
-          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+          "border bg-background shadow-xs !hover:bg-accent hover:text-accent-foreground hover:border-foreground/20",
         secondary:
           "bg-secondary text-secondary-foreground hover:bg-secondary/80",
         ghost: