docs: update docs layout & template (codse#103)

Author: hari

animata/list/menu-animation.tsx

@@ -1,21 +1,19 @@
 import { ArrowRight } from "lucide-react";
+
 interface MenuAnimationProps {
   menuItems: string[];
 }
+
 export default function MenuAnimation({ menuItems }: MenuAnimationProps) {
   return (
-    <div className="flex flex-col overflow-hidden px-10">
+    <div className="flex min-w-fit flex-col gap-2 overflow-hidden px-10">
       {menuItems.map((item, index) => (
-        <div key={index} className="group flex items-center">
-          <div className="relative">
-            <ArrowRight
-              className="absolute transform text-black opacity-0 transition-transform duration-300 ease-out hover:z-20 group-hover:translate-x-0 group-hover:text-blue-500 group-hover:opacity-100"
-              size={20}
-            />
-            <h1 className="z-10 cursor-pointer font-mono font-semibold text-black transition-transform duration-300 ease-out group-hover:translate-x-[30px] group-hover:text-blue-500 dark:text-white">
-              {item}
-            </h1>
-          </div>
+        <div key={index} className="group flex items-center gap-2">
+          <ArrowRight className="size-5 -translate-x-full text-black opacity-0 transition-all duration-300 ease-out hover:z-20 group-hover:translate-x-0 group-hover:text-blue-500 group-hover:opacity-100 md:size-10" />
+
+          <h1 className="z-10 -translate-x-6 cursor-pointer font-mono font-semibold text-black transition-transform duration-300 ease-out group-hover:translate-x-0 group-hover:text-blue-500 dark:text-white md:-translate-x-12 md:text-4xl md:group-hover:translate-x-0">
+            {item}
+          </h1>
         </div>
       ))}
     </div>

animata/text/counter.tsx

@@ -61,9 +61,11 @@ export default function Counter({
       return;
     }
 
-    setTimeout(() => {
+    const timer = setTimeout(() => {
       motionValue.set(isGoingUp ? targetValue : 0);
     }, delay);
+
+    return () => clearTimeout(timer);
   }, [isInView, delay, isGoingUp, targetValue, motionValue]);
 
   useEffect(() => {

animata/text/typing-text.stories.tsx

@@ -17,7 +17,6 @@ type Story = StoryObj<typeof meta>;
 export const Primary: Story = {
   args: {
     text: "> yarn add @animata/awesomeness",
-    repeat: true,
     grow: false,
   },
   render: (props) => (
@@ -27,16 +26,16 @@ export const Primary: Story = {
   ),
 };
 
-export const Quote: Story = {
+export const Smooth: Story = {
   args: {
-    text: "The following excerpt from Carl Sagan's book Pale Blue Dot was inspired by an image taken, at Sagan's suggestion, by Voyager 1 on 14 February 1990. As the spacecraft was departing our planetary neighborhood for the fringes of the solar system, it turned it around for one last look at its home planet.",
-    repeat: true,
-    delay: 16,
+    text: "This is a smooth typing text",
+    delay: 50,
     alwaysVisibleCount: 0,
+    smooth: true,
+    waitTime: 5000,
   },
   render: (props) => (
-    <div className="min-w-96 max-w-96 rounded-sm bg-blue-200 px-4 py-2 text-blue-600 shadow-lg">
-      <div className="mb-1 text-lg font-bold">Quote</div>
+    <div className="min-w-96 max-w-96 rounded-sm bg-gray-800 px-4 py-2 text-yellow-400 shadow-lg">
       <TypingText {...props} />
     </div>
   ),

animata/widget/reminder.tsx

@@ -23,7 +23,7 @@ export default function Reminder({ className }: { className?: string }) {
 
       <div className="flex flex-row gap-1 text-muted-foreground">
         <ArrowRight size={18} className="self-center" />
-        <p className="text-md font-semibold">Meeting in 30 mins</p>
+        <p className="text-sm font-semibold">Meeting in 30 mins</p>
       </div>
     </div>
   );

animata/widget/sleep-tracker.tsx

@@ -108,14 +108,12 @@ export default function SleepTracker({
         <div className="icon flex h-4 w-4 items-center justify-center rounded-full bg-red-50">
           <div className="inner-icon h-2 w-2 rounded-full bg-red-500"></div>
         </div>
-        <p className="text-gray-600 dark:text-white">Sleep Tracker</p>
+        <p className="text-sm text-gray-600 dark:text-white">Sleep Tracker</p>
       </div>
-      <img className="h-20 w-full rounded-xl object-cover" src={image} alt="Sleep Tracker" />
+      <img className="h-16 w-full rounded-xl object-cover" src={image} alt="Sleep Tracker" />
 
-      <div className="graph-container">
-        <BarChart className="pt-3" items={items} height={40} />
-      </div>
-      <div className="activity mt-2 flex flex-row justify-between">
+      <BarChart className="pt-1" items={items} height={40} />
+      <div className="activity mt-2 flex flex-row justify-between text-sm">
         <p className="text-primary opacity-70">Activity</p>
         <p className="text-muted-foreground">
           <strong>32m</strong> ago

components/component-list-item.tsx

@@ -0,0 +1,45 @@
+import { useState } from "react";
+
+import { CopyButton } from "@/components/copy-button";
+import { ReloadButton } from "@/components/reload-button";
+import { cn } from "@/lib/utils";
+
+function Actions({ copyId, onRefresh }: { copyId: string; onRefresh: () => void }) {
+  return (
+    <div className="inline-flex w-full justify-end p-2">
+      <CopyButton
+        className="bg-white text-zinc-600 shadow-none dark:bg-zinc-950 dark:text-white"
+        proxyId={`source-${copyId}`}
+        value=""
+      />
+      <ReloadButton
+        className="bg-white text-zinc-600 shadow-none dark:bg-zinc-950 dark:text-white"
+        onClick={onRefresh}
+      />
+    </div>
+  );
+}
+
+export default function ComponentListItem({
+  children,
+  className,
+  copyId,
+  ...props
+}: {
+  copyId: string;
+  className?: string;
+  children: React.ReactNode;
+}) {
+  const [forceUpdate, setForceUpdate] = useState(0);
+  return (
+    <div {...props} className={cn("component-list-item relative rounded-xl border", className)}>
+      <Actions copyId={copyId} onRefresh={() => setForceUpdate((prev) => prev + 1)} />
+      <div
+        key={`component-list-item-${copyId}-${forceUpdate}`}
+        className="flex min-h-56 flex-col items-center justify-center px-4 pb-4"
+      >
+        {children}
+      </div>
+    </div>
+  );
+}

components/copy-button.tsx

@@ -2,7 +2,7 @@
 
 import * as React from "react";
 import { CheckIcon, ClipboardIcon } from "lucide-react";
-import { NpmCommands } from "types/unist";
+import { NpmCommands, TouchCommands } from "types/unist";
 
 import { Button, ButtonProps } from "@/components/ui/button";
 import {
@@ -125,6 +125,57 @@ interface CopyNpmCommandButtonProps extends DropdownMenuTriggerProps {
   commands: Required<NpmCommands>;
 }
 
+interface CopyTouchCommandButtonProps extends DropdownMenuTriggerProps {
+  commands: Required<TouchCommands>;
+}
+
+export function CopyTouchCommandButton({ commands, className }: CopyTouchCommandButtonProps) {
+  const [hasCopied, setHasCopied] = React.useState(false);
+
+  React.useEffect(() => {
+    setTimeout(() => {
+      setHasCopied(false);
+    }, 2000);
+  }, [hasCopied]);
+
+  const copyCommand = React.useCallback((value: string, os: "windows" | "macOS/Linux") => {
+    copyToClipboardWithMeta(value, {
+      name: "copy_touch_command",
+      properties: {
+        command: value,
+        os,
+      },
+    });
+    setHasCopied(true);
+  }, []);
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          size="icon"
+          variant="ghost"
+          className={cn(
+            "relative z-10 h-6 w-6 text-zinc-50 hover:bg-zinc-700 hover:text-zinc-50",
+            className,
+          )}
+        >
+          {hasCopied ? <CheckIcon className="h-3 w-3" /> : <ClipboardIcon className="h-3 w-3" />}
+          <span className="sr-only">Copy</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => copyCommand(commands.__unix__, "macOS/Linux")}>
+          macOS/Linux
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => copyCommand(commands.__windows__, "windows")}>
+          Windows
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
 export function CopyNpmCommandButton({ commands, className }: CopyNpmCommandButtonProps) {
   const [hasCopied, setHasCopied] = React.useState(false);
 

components/mdx-components.tsx

@@ -3,15 +3,21 @@ import { ComponentProps, HTMLAttributes } from "react";
 import Image from "next/image";
 import Link from "next/link";
 import { useMDXComponent } from "next-contentlayer/hooks";
-import { NpmCommands } from "types/unist";
+import { NpmCommands, TouchCommands } from "types/unist";
 
 import Modal from "@/animata/overlay/modal";
 import { Callout } from "@/components/callout";
 import { CodeBlockWrapper } from "@/components/code-block-wrapper";
 import { ComponentExample } from "@/components/component-example";
+import ComponentListItem from "@/components/component-list-item";
 import { ComponentPreview } from "@/components/component-preview";
 import { ComponentSource } from "@/components/component-source";
-import { CopyButton, copyToClipboardWithMeta } from "@/components/copy-button";
+import {
+  CopyButton,
+  CopyNpmCommandButton,
+  copyToClipboardWithMeta,
+  CopyTouchCommandButton,
+} from "@/components/copy-button";
 import { FrameworkDocs } from "@/components/framework-docs";
 import {
   Accordion,
@@ -43,14 +49,21 @@ const components = {
     __src__,
     __event__,
     __copyId__,
+    __windows__,
+    __unix__,
+    __bunCommand__,
+    __npmCommand__,
+    __pnpmCommand__,
+    __yarnCommand__,
     ...props
   }: React.HTMLAttributes<HTMLPreElement> & {
     __copyId__?: string;
     __rawString__?: string;
     __withMeta__?: boolean;
     __src__?: string;
     __event__?: Event["name"];
-  } & NpmCommands) => {
+  } & NpmCommands &
+    TouchCommands) => {
     if (__copyId__ && __rawString__) {
       return (
         <div
@@ -71,14 +84,34 @@ const components = {
           )}
           {...props}
         />
-        {__rawString__ && (
+
+        {__rawString__ && !__windows__ && (
           <CopyButton
             value={__rawString__}
             src={__src__}
             event={__event__}
             className={cn("absolute right-4 top-4", __withMeta__ && "top-16")}
           />
         )}
+
+        {__windows__ && __unix__ && (
+          <CopyTouchCommandButton
+            commands={{ __windows__, __unix__ }}
+            className="absolute right-4 top-4"
+          />
+        )}
+
+        {__npmCommand__ && __yarnCommand__ && __pnpmCommand__ && __bunCommand__ && (
+          <CopyNpmCommandButton
+            commands={{
+              __npmCommand__,
+              __yarnCommand__,
+              __pnpmCommand__,
+              __bunCommand__,
+            }}
+            className={cn("absolute right-4 top-4", __withMeta__ && "top-16")}
+          />
+        )}
       </>
     );
   },
@@ -163,33 +196,7 @@ const components = {
       </div>
     );
   },
-  ComponentListItem: ({
-    children,
-    className,
-    copyId,
-    ...props
-  }: {
-    copyId: string;
-    className?: string;
-    children: React.ReactNode;
-  }) => {
-    return (
-      <div
-        {...props}
-        className={cn(
-          "component-list-item relative flex min-h-72 items-center justify-center rounded-xl border p-4",
-          className,
-        )}
-      >
-        {children}
-        <CopyButton
-          className="visible absolute right-1 top-1 text-zinc-600"
-          proxyId={`source-${copyId}`}
-          value=""
-        />
-      </div>
-    );
-  },
+  ComponentListItem,
 };
 
 interface MdxProps {

config/docs.ts

@@ -15,7 +15,7 @@ const isDev = process.env.NODE_ENV !== "production";
 
 const createLinks = (category: string) => {
   return allDocs
-    .filter((doc) => doc.slug.startsWith(`/docs/${category}`))
+    .filter((doc) => doc.slug.startsWith(`/docs/${category}`) && doc.published)
     .map((doc) => ({
       // Make sure the index page is the first item
       title: doc.title,
@@ -156,6 +156,10 @@ const sidebarNav: SidebarNavItem[] = [
     title: "Carousel",
     items: createLinks("carousel"),
   },
+  {
+    title: "Skeleton",
+    items: createLinks("skeleton"),
+  },
 ]
   .filter((category) => Boolean(category.items?.length || category.label))
   .sort((a, b) => {

content/docs/background/blurry-blob.mdx

@@ -6,28 +6,20 @@ author: ll4xmii
 
 <ComponentPreview name="background-blurry-blob--docs" />
 
-# Installation
+## Installation
 
 1. Create a new file called `blurry-blob.tsx` inside the `components/animata/background` directory.
 
-macOS/Linux:
-
 ```bash
 mkdir -p components/animata/background && touch components/animata/background/blurry-blob.tsx
 ```
 
-windows:
-
-```bash
-mkdir components\animata\background && type null > components\animata\background\blurry-blob.tsx
-```
-
 2. Open the newly created file and add the following code:
 
 ```jsx file=<rootDir>/animata/background/blurry-blob.tsx
 
 ```
 
-# Credits
+## Credits
 
 Built by [Laxmi Lamichhane](https://github.com/llaxmi)