Update to 6.0.2

.changeset/hungry-cats-train.md

@@ -0,0 +1,5 @@
+---
+'create-next-docs-app': patch
+---
+
+Update examples

.changeset/modern-hairs-change.md

@@ -0,0 +1,5 @@
+---
+'next-docs-ui': patch
+---
+
+Improve search dialog design

.vscode/settings.json

@@ -8,4 +8,4 @@
     ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
     ["cn\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
   ]
-}
+}

apps/docs/app/page.client.tsx

@@ -1,13 +1,23 @@
 'use client';
 
 import Phenomenon from 'phenomenon';
-import { useEffect, useRef, type CanvasHTMLAttributes } from 'react';
+import {
+  useEffect,
+  useRef,
+  type CanvasHTMLAttributes,
+  useState,
+  Fragment,
+  type ReactElement,
+  type HTMLAttributes,
+} from 'react';
+import { CircleIcon, TerminalIcon } from 'lucide-react';
 import {
   GLSLX_NAME_U_RESOLUTION,
   GLSLX_NAME_U_TIME,
   GLSLX_SOURCE_FRAGMENT_SHADER,
   GLSLX_SOURCE_VERTEX_SHADER,
 } from '@/shaders/rain.min.js';
+import { cn } from '@/utils/cn';
 
 export function Rain(
   props: CanvasHTMLAttributes<HTMLCanvasElement>,
@@ -93,3 +103,107 @@ export function Previews(): JSX.Element {
     </div>
   );
 }
+
+export function CreateAppAnimation(): JSX.Element {
+  const [tick, setTick] = useState(0);
+
+  const installCmd = 'npm create next-docs-app';
+  const tickTime = 100;
+  const timeCommandEnter = installCmd.length;
+  const timeCommandRun = timeCommandEnter + 3;
+  const timeCommandEnd = timeCommandRun + 3;
+  const timeWindowOpen = timeCommandEnd + 1;
+  const timeEnd = timeWindowOpen + 1;
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setTick((prev) => (prev > timeEnd ? prev : prev + 1));
+    }, tickTime);
+
+    return () => {
+      clearInterval(timer);
+    };
+  }, [timeEnd]);
+
+  const lines: ReactElement[] = [];
+
+  lines.push(
+    <span key="command_type">
+      {installCmd.substring(0, tick)}
+      {tick < timeCommandEnter && (
+        <div className="inline-block h-3 w-1 animate-pulse bg-white" />
+      )}
+    </span>,
+  );
+
+  if (tick >= timeCommandEnter) {
+    lines.push(<span key="space"> </span>);
+  }
+
+  if (tick > timeCommandRun)
+    lines.push(
+      <Fragment key="command_response">
+        <span className="font-bold">┌ Create Next Docs</span>
+        <span>│</span>
+        {tick > timeCommandRun + 1 && (
+          <>
+            <span className="font-bold">◇ Project name</span>
+            <span>│ my-app</span>
+          </>
+        )}
+        {tick > timeCommandRun + 2 && (
+          <>
+            <span>│</span>
+            <span className="font-bold">
+              ◆ Which example you want to install?
+            </span>
+          </>
+        )}
+        {tick > timeCommandRun + 3 && (
+          <>
+            <span>│ ● Default (Contentlayer)</span>
+            <span>│ ○ Advanced (Contentlayer)</span>
+            <span>│ ○ Default (Next Docs MDX)</span>
+          </>
+        )}
+      </Fragment>,
+    );
+
+  return (
+    <pre className="relative overflow-hidden rounded-xl border text-xs">
+      {tick > timeWindowOpen && (
+        <LaunchAppWindow className="absolute bottom-5 right-4 z-10 animate-in fade-in slide-in-from-top-10" />
+      )}
+      <div className="flex flex-row items-center gap-2 border-b px-4 py-2">
+        <TerminalIcon className="h-4 w-4" />{' '}
+        <span className="font-bold">Terminal</span>
+        <div className="grow" />
+        <div className="h-2 w-2 rounded-full bg-red-400" />
+      </div>
+      <div className="min-h-[200px] bg-gradient-to-b from-secondary [mask-image:linear-gradient(to_bottom,white,transparent)]">
+        <code className="grid p-4">{lines}</code>
+      </div>
+    </pre>
+  );
+}
+
+function LaunchAppWindow(props: HTMLAttributes<HTMLDivElement>): JSX.Element {
+  return (
+    <div
+      {...props}
+      className={cn(
+        'overflow-hidden rounded-md border bg-background shadow-xl',
+        props.className,
+      )}
+    >
+      <div className="relative flex h-6 flex-row items-center border-b bg-muted px-4 text-xs text-muted-foreground">
+        <CircleIcon
+          aria-label="close"
+          className="h-2 w-2 fill-red-400 text-transparent"
+        />
+        <p className="absolute inset-x-0 text-center">localhost:3000</p>
+      </div>
+      <div className="p-4 text-sm">New App launched!</div>
+    </div>
+  );
+}

apps/docs/app/page.tsx

@@ -1,7 +1,6 @@
 import { cva } from 'class-variance-authority';
 import {
   BatteryChargingIcon,
-  CircleIcon,
   FileTextIcon,
   GithubIcon,
   LayoutIcon,
@@ -17,12 +16,12 @@ import {
 import { File, Files } from 'next-docs-ui/components/files';
 import Image from 'next/image';
 import Link from 'next/link';
-import type { HTMLAttributes, SVGProps } from 'react';
+import type { SVGProps } from 'react';
 import { cn } from '@/utils/cn';
 import Example from '@/public/example-2.png';
 import { buttonVariants } from '@/components/ui/button';
 import { CodeBlock } from '@/components/typing-code-block';
-import { Previews, Rain } from './page.client';
+import { CreateAppAnimation, Previews, Rain } from './page.client';
 
 const badgeVariants = cva(
   'mb-2 inline-flex h-7 w-7 items-center justify-center rounded-full bg-primary font-medium text-primary-foreground',
@@ -470,13 +469,10 @@ export default function HomePage(): JSX.Element {
             <div className="relative flex flex-col border-b px-6 py-12 md:border-r md:py-16">
               <div className={cn(badgeVariants())}>1</div>
               <h3 className="text-xl font-bold">Create it.</h3>
-              <p className="text-muted-foreground">
+              <p className="mb-8 text-muted-foreground">
                 Initialize a new docs with a command.
               </p>
-              <div className="mr-4">
-                <CodeBlock lang="bash" code="pnpm create next-docs-app" />
-              </div>
-              <LaunchAppWindow className="z-[2] -mt-14 ml-auto min-h-[120px] w-fit" />
+              <CreateAppAnimation />
             </div>
             <div className="relative flex flex-col border-b px-6 py-12 md:py-16">
               <div className={cn(badgeVariants())}>2</div>
@@ -814,27 +810,6 @@ function Search(): JSX.Element {
   );
 }
 
-function LaunchAppWindow(props: HTMLAttributes<HTMLDivElement>): JSX.Element {
-  return (
-    <div
-      {...props}
-      className={cn(
-        'overflow-hidden rounded-md border bg-background',
-        props.className,
-      )}
-    >
-      <div className="relative flex h-6 flex-row items-center border-b bg-muted px-4 text-xs text-muted-foreground">
-        <CircleIcon
-          aria-label="close"
-          className="h-2 w-2 fill-red-400 text-transparent"
-        />
-        <p className="absolute inset-x-0 text-center">localhost:3000</p>
-      </div>
-      <div className="p-4 text-sm">New App launched with Next Docs!</div>
-    </div>
-  );
-}
-
 function Hero(): JSX.Element {
   return (
     <div className="container relative z-[2] flex flex-col items-center border-b bg-background p-6 text-center">

apps/docs/app/style.css

@@ -2,28 +2,10 @@
 @tailwind components;
 @tailwind utilities;
 
-@layer components {
-  .animated-border {
-    border-radius: inherit;
-  }
-
-  .animated-border::before {
-    content: '';
-    @apply animate-infinite-rotate absolute left-[50%] top-[50%] block w-[600px] translate-x-[-50%] translate-y-[-50%] bg-[conic-gradient(var(--tw-gradient-stops))] pb-[600px];
-  }
-}
-
-:root {
-  --destructive: 0 84.2% 60.2%;
-  --destructive-foreground: 0 0% 98%;
-}
-
 .dark {
   --background: 0 0% 1%;
   --card: 0 0% 4%;
   --muted: 0 0% 8%;
   --border: 0 0% 14%;
   --accent: 0 0% 10.9%;
-  --destructive: 0 62.8% 30.6%;
-  --destructive-foreground: 0 85.7% 97.3%;
 }

apps/docs/components/search.tsx

@@ -49,7 +49,7 @@ export default function CustomSearchDialog(props: SharedProps): JSX.Element {
           filters: `tag:${tag}`,
         }}
         footer={
-          <div className="flex flex-row items-center gap-1 p-4">
+          <div className="flex flex-row items-center gap-1 p-3">
             {modes.map((mode) => (
               <button
                 key={mode.param}

apps/docs/next-sitemap.config.js

@@ -1,4 +1,3 @@
-/* eslint-disable no-undef */
 /** @type {import('next-sitemap').IConfig} */
 module.exports = {
   siteUrl: 'https://next-docs-zeta.vercel.app',

apps/docs/tsconfig.json

@@ -7,19 +7,10 @@
       }
     ],
     "paths": {
-      "@/*": [
-        "./*"
-      ]
+      "@/*": ["./*"]
     },
     "allowJs": true
   },
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx",
-    ".next/types/**/*.ts"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
 }

examples/advanced/package.json

@@ -11,8 +11,8 @@
     "contentlayer": "0.3.4",
     "next": "14.0.4",
     "next-contentlayer": "0.3.4",
-    "next-docs-ui": "6.0.1",
-    "next-docs-zeta": "6.0.1",
+    "next-docs-ui": "6.0.2",
+    "next-docs-zeta": "6.0.2",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },

examples/simple-mdx/package.json

@@ -9,9 +9,9 @@
   },
   "dependencies": {
     "next": "14.0.4",
-    "next-docs-mdx": "6.0.1",
-    "next-docs-ui": "6.0.1",
-    "next-docs-zeta": "6.0.1",
+    "next-docs-mdx": "6.0.2",
+    "next-docs-ui": "6.0.2",
+    "next-docs-zeta": "6.0.2",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },

examples/simple/package.json

@@ -11,8 +11,8 @@
     "contentlayer": "0.3.4",
     "next": "14.0.4",
     "next-contentlayer": "0.3.4",
-    "next-docs-ui": "6.0.1",
-    "next-docs-zeta": "6.0.1",
+    "next-docs-ui": "6.0.2",
+    "next-docs-zeta": "6.0.2",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },

package.json

@@ -26,7 +26,7 @@
     "concurrently": "^8.2.1",
     "prettier": "^3.0.3",
     "tsup": "8.0.1",
-    "turbo": "1.11.1",
+    "turbo": "1.11.2",
     "typescript": "5.3.3"
   },
   "pnpm": {

packages/headless/CHANGELOG.md

@@ -1,5 +1,7 @@
 # next-docs-zeta
 
+## 6.0.2
+
 ## 6.0.1
 
 ## 6.0.0

packages/headless/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-docs-zeta",
-  "version": "6.0.1",
+  "version": "6.0.2",
   "description": "The library for building a documentation website in Next.js",
   "keywords": [
     "NextJs",

packages/mdx/CHANGELOG.md

@@ -1,5 +1,12 @@
 # next-docs-mdx
 
+## 6.0.2
+
+### Patch Changes
+
+- 1845bf5: Fixes import path for next-docs-mdx/loader-mdx
+  - [email protected]
+
 ## 6.0.1
 
 ### Patch Changes

packages/mdx/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-docs-mdx",
-  "version": "6.0.1",
+  "version": "6.0.2",
   "description": "The library for using native Next.js MDX features in Next Docs",
   "keywords": [
     "NextJs",
@@ -37,6 +37,7 @@
   },
   "files": [
     "dist/*",
+    "loader-mdx.js",
     "loader.js"
   ],
   "scripts": {