New Code-Block MDX + New Doc-Options + Improve Homepage + Update dependencies

.gitignore

@@ -43,4 +43,7 @@ yarn-error.log*
 next-env.d.ts
 
 # content-collections
-.content-collections
+.content-collections
+
+# agents
+.agents

apps/website/next.config.ts

@@ -19,6 +19,11 @@ const nextConfig: NextConfig = {
         destination: "/docs/getting-started/prerequisites",
         permanent: true,
       },
+      {
+        source: "/docs/react/code-block-mdx",
+        destination: "/docs/react/code-block-mdx-shiki",
+        permanent: true,
+      },
       {
         source: "/components",
         destination: "/docs/react/copy-button",

apps/website/src/app/page.tsx

@@ -1,16 +1,26 @@
 import type { Metadata } from "next";
 
+import { cn } from "@/utils/cn";
 import { globals } from "@/globals";
 import { notFound } from "next/navigation";
 import { getGeneralDocument } from "@/utils/docs";
 
-import MDX from "@/components/mdx";
 import Article from "@/components/docs/doc-article";
 import Container from "@/components/container";
 
 import Header from "@/components/header";
 import Footer from "@/components/footer";
 
+import { GitHub } from "@/components/ui/svgs";
+import { ArrowUpRightIcon } from "lucide-react";
+
+import MDX from "@/components/mdx";
+import GetStartedLink from "@/components/home/get-started-link";
+import InstallCommands from "@/components/home/install-commands";
+
+import { buttonVariants } from "@/components/ui/button";
+import { ExternalLink } from "@/components/ui/external-link";
+
 export async function generateMetadata(): Promise<Metadata> {
   const websiteUrl = "https://code-blocks.pheralb.dev";
   const data = getGeneralDocument("home");
@@ -37,9 +47,52 @@ const Home = () => {
     <main className="pb-4">
       <Container>
         <Header layout="app" />
-        <Article className="pb-8">
-          <MDX code={document.mdx} />
-        </Article>
+        <div
+          className={cn(
+            "not-prose",
+            "flex flex-col space-y-6 pt-10 md:pt-12",
+            "animate-in fill-mode-backwards fade-in slide-in-from-bottom-2 duration-500",
+          )}
+        >
+          <div className="flex flex-col items-start justify-center space-y-2 md:items-center">
+            <h1 className="text-3xl font-semibold tracking-tight text-balance md:text-4xl lg:text-5xl">
+              Build beautiful code blocks
+            </h1>
+            <p className="font-medium text-neutral-500 dark:text-neutral-400">
+              Ready to use UI components and utilities to show your snippets
+              beautifully.
+            </p>
+          </div>
+          <div
+            className={cn(
+              "flex flex-row items-center justify-center space-x-2",
+            )}
+          >
+            <GetStartedLink />
+            <ExternalLink
+              title="GitHub"
+              href={globals.githubUrl}
+              className={buttonVariants({
+                size: "default",
+                variant: "outline",
+                className: "w-full no-underline md:w-40",
+              })}
+            >
+              <div className="flex items-center space-x-2">
+                <GitHub height={14} />
+                <span>GitHub</span>
+              </div>
+              <ArrowUpRightIcon size={12} />
+            </ExternalLink>
+          </div>
+          <InstallCommands />
+        </div>
+        <div className="animate-in fill-mode-backwards fade-in slide-in-from-bottom-4 duration-500 delay-100">
+          <div className="my-8 h-px bg-neutral-200 dark:bg-neutral-800" />
+          <Article className="prose-h2:border-0 prose-h2:pb-0 prose-h2:text-2xl pb-8">
+            <MDX code={document.mdx} />
+          </Article>
+        </div>
       </Container>
       <Footer />
     </main>

apps/website/src/components/code-block/blocks/copy-text-morph.tsx

@@ -1,97 +1,15 @@
 "use client";
 
-import {
-  useMemo,
-  useId,
-  useEffect,
-  useState,
-  type ComponentProps,
-} from "react";
-
-import {
-  motion,
-  AnimatePresence,
-  type Transition,
-  type Variants,
-} from "motion/react";
-
 import { cn } from "@/utils/cn";
 import { copyToClipboard } from "@/utils/copy";
+import { TextMorph } from "@/components/ui/text-morph";
+import { useEffect, useState, type ComponentProps } from "react";
 
 interface CopyTextAnimatedProps extends ComponentProps<"button"> {
   content: string;
   size?: "xs" | "sm";
 }
 
-export type TextMorphProps = {
-  children: string;
-  as?: React.ElementType;
-  className?: string;
-  style?: React.CSSProperties;
-  variants?: Variants;
-  transition?: Transition;
-};
-
-export function TextMorph({
-  children,
-  as: Component = "p",
-  className,
-  style,
-  variants,
-  transition,
-}: TextMorphProps) {
-  const uniqueId = useId();
-
-  const characters = useMemo(() => {
-    const charCounts: Record<string, number> = {};
-
-    return children.split("").map((char) => {
-      const lowerChar = char.toLowerCase();
-      charCounts[lowerChar] = (charCounts[lowerChar] || 0) + 1;
-
-      return {
-        id: `${uniqueId}-${lowerChar}${charCounts[lowerChar]}`,
-        label: char === " " ? "\u00A0" : char,
-      };
-    });
-  }, [children, uniqueId]);
-
-  const defaultVariants: Variants = {
-    initial: { opacity: 0 },
-    animate: { opacity: 1 },
-    exit: { opacity: 0 },
-  };
-
-  const defaultTransition: Transition = {
-    type: "spring",
-    stiffness: 280,
-    damping: 18,
-    mass: 0.3,
-  };
-
-  return (
-    <Component className={cn(className)} aria-label={children} style={style}>
-      <AnimatePresence mode="popLayout" initial={false}>
-        {characters.map((character) => (
-          <motion.span
-            key={character.id}
-            layoutId={character.id}
-            className="inline-block"
-            aria-hidden="true"
-            initial="initial"
-            animate="animate"
-            exit="exit"
-            variants={variants || defaultVariants}
-            transition={transition || defaultTransition}
-          >
-            {character.label}
-          </motion.span>
-        ))}
-      </AnimatePresence>
-    </Component>
-  );
-}
-
 const CopyTextMorph = ({
   content,
   size = "sm",

apps/website/src/components/code-block/client/shiki.tsx

@@ -52,7 +52,6 @@ const CodeblockShiki = ({
 
   const classNames = cn("w-full overflow-x-auto", className);
 
-  // SSR fallback
   return highlightedHtml ? (
     <div
       className={classNames}
@@ -61,7 +60,7 @@ const CodeblockShiki = ({
     />
   ) : (
     <div className={classNames} {...props}>
-      <pre>
+      <pre className="px-4 py-3">
         <code>{code}</code>
       </pre>
     </div>

apps/website/src/components/code-block/mdx/pre-shiki.tsx

@@ -1,6 +1,7 @@
 import type { ComponentProps } from "react";
 import type { MDXComponents } from "mdx/types";
 
+import { cn } from "@/utils/cn";
 import { reactToText } from "@/utils/react-to-text";
 
 import {
@@ -23,15 +24,23 @@ const PreShikiComponent: MDXComponents = {
     const title = props["data-title"];
     const language = props["data-language"];
     return (
-      <CodeBlock>
-        <CodeBlockHeader>
-          <CodeBlockGroup>
-            <CodeBlockIcon language={language} />
-            <span>{title ?? `.${language}`}</span>
-          </CodeBlockGroup>
-          <CopyButton content={content} />
-        </CodeBlockHeader>
-        <CodeBlockContent>
+      <CodeBlock className="group/code-block">
+        {title && (
+          <CodeBlockHeader>
+            <CodeBlockGroup>
+              <CodeBlockIcon language={language} />
+              <span>{title}</span>
+            </CodeBlockGroup>
+            <CopyButton content={content} />
+          </CodeBlockHeader>
+        )}
+        <CodeBlockContent className={cn(!title && "relative")}>
+          {!title && (
+            <CopyButton
+              content={content}
+              className="sticky top-3 right-3 z-50 float-right rounded-md text-neutral-950 opacity-0 transition-opacity group-hover/code-block:opacity-100 hover:opacity-70 dark:text-neutral-50"
+            />
+          )}
           <pre {...props}>{children}</pre>
         </CodeBlockContent>
       </CodeBlock>

apps/website/src/components/code-block/mdx/pre-sugar-high.tsx

@@ -6,7 +6,6 @@ import { reactToText } from "@/utils/react-to-text";
 
 import {
   CodeBlock,
-  CodeBlockHeader,
   CodeBlockContent,
 } from "@/components/code-block/code-block";
 import { CopyButton } from "@/components/code-block/copy-button";
@@ -20,12 +19,13 @@ const PreSugarHighComponent: MDXComponents = {
       code: content,
     });
     return (
-      <CodeBlock>
-        <CodeBlockHeader className="justify-end">
-          <CopyButton content={content} />
-        </CodeBlockHeader>
-        <CodeBlockContent>
-          <pre>
+      <CodeBlock className="group/code-block">
+        <CodeBlockContent className="relative">
+          <CopyButton
+            content={content}
+            className="sticky top-3 right-3 z-50 float-right rounded-md text-neutral-950 opacity-0 transition-opacity group-hover/code-block:opacity-100 hover:opacity-70 dark:text-neutral-50"
+          />
+          <pre className="sh-pre">
             <code dangerouslySetInnerHTML={{ __html: codeHTML }} />
           </pre>
         </CodeBlockContent>