Merge pull request #4 from pheralb/astro

✨ Migrate docs to Astro Content

Author: pheralb

.changeset/config.json

@@ -8,7 +8,7 @@
   "baseBranch": "main",
   "updateInternalDependencies": "patch",
   "ignore": [
-    "@pheralb/toast-website",
+    "@pheralb/toast-docs",
     "@pheralb-toast/nextjs-example",
     "@pheralb-toast/astro-example"
   ]

.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  "recommendations": ["astro-build.astro-vscode"],
+  "unwantedRecommendations": []
+}

docs/astro.config.ts

@@ -0,0 +1,34 @@
+import { defineConfig } from 'astro/config';
+
+// Integrations:
+import react from '@astrojs/react';
+import tailwind from '@astrojs/tailwind';
+import mdx from '@astrojs/mdx';
+
+// MDX Plugins:
+import rehypeAutolinkHeadings from 'rehype-autolink-headings';
+import rehypeSlug from 'rehype-slug';
+import { HEADING_LINK_ANCHOR } from './src/ui/headings';
+
+// Astro config:
+export default defineConfig({
+  site: 'https://toast.pheralb.dev',
+  integrations: [
+    react(),
+    tailwind({
+      applyBaseStyles: false,
+    }),
+    mdx({
+      syntaxHighlight: 'shiki',
+      shikiConfig: { theme: 'vesper', wrap: true },
+      gfm: true,
+      rehypePlugins: [
+        rehypeSlug,
+        [
+          rehypeAutolinkHeadings,
+          { behavior: 'wrap', properties: { className: HEADING_LINK_ANCHOR } },
+        ],
+      ],
+    }),
+  ],
+});

website/components.json docs/components.json

@@ -5,7 +5,7 @@
   "tsx": true,
   "tailwind": {
     "config": "tailwind.config.ts",
-    "css": "styles/globals.css",
+    "css": "src/styles/globals.css",
     "baseColor": "neutral",
     "cssVariables": false,
     "prefix": ""

docs/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@pheralb/toast-docs",
+  "type": "module",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "astro dev",
+    "start": "astro dev",
+    "build": "astro check && astro build",
+    "preview": "astro preview",
+    "astro": "astro"
+  },
+  "dependencies": {
+    "@astrojs/check": "0.9.1",
+    "@astrojs/mdx": "3.1.3",
+    "@astrojs/react": "3.6.1",
+    "@astrojs/tailwind": "5.1.0",
+    "@radix-ui/react-dropdown-menu": "2.1.1",
+    "@radix-ui/react-icons": "1.3.0",
+    "@radix-ui/react-slot": "1.1.0",
+    "astro": "4.13.0",
+    "class-variance-authority": "0.7.0",
+    "clsx": "2.1.1",
+    "fast-npm-meta": "0.0.1",
+    "js-confetti": "0.12.0",
+    "lucide-react": "0.399.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "rehype-autolink-headings": "7.1.0",
+    "rehype-slug": "6.0.0",
+    "tailwind-merge": "2.3.0",
+    "tailwindcss-animate": "1.0.7",
+    "zustand": "4.5.4"
+  },
+  "devDependencies": {
+    "@tailwindcss/typography": "0.5.13",
+    "@types/react": "18.3.3",
+    "@types/react-dom": "18.3.0",
+    "tailwindcss": "3.4.7",
+    "typescript": "5.5.4"
+  }
+}

website/public/fonts/GeistMonoVF.woff2 docs/public/fonts/GeistMonoVF.woff2

@@ -1,23 +1,24 @@
-import type { Variant } from '@pheralb-toast/extra-types';
 import type { CodeBlockProps } from './examples.types';
+import type { ToastVariant as Variant } from '@pheralb/toast';
 
-import { useRef, useState } from 'react';
-import { Button } from '@/ui/button';
 import { toast } from '@pheralb/toast';
+import { useRef, useState } from 'react';
 import JSConfetti from 'js-confetti';
-import { CopyIcon, PartyPopperIcon } from 'lucide-react';
+import { CheckCheckIcon, CopyIcon, PartyPopperIcon } from 'lucide-react';
+
+import { Button } from '@/ui/button';
+import { CopyCodeBtnStyles } from '@/ui/copyCodeBtn';
 import { copyToClipboard } from '@/utils';
-import { CopyCodeBtnStyles } from '../mdx/codeBlock';
 
 const ToastCodeBlock = (props: CodeBlockProps) => {
   const preRef = useRef<HTMLPreElement>(null);
+  const [isCopied, setIsCopied] = useState<boolean>(false);
 
   const copyPreContent = async () => {
     const content = preRef.current?.textContent ?? '';
     await copyToClipboard(content);
-    toast.success({
-      text: 'Copied to clipboard',
-    });
+    setIsCopied(true);
+    setTimeout(() => setIsCopied(false), 700);
   };
 
   return (
@@ -62,7 +63,7 @@ const ToastCodeBlock = (props: CodeBlockProps) => {
       </pre>
       <button className={CopyCodeBtnStyles} onClick={copyPreContent}>
         <span className="sr-only">Copy</span>
-        <CopyIcon size={16} />
+        {isCopied ? <CheckCheckIcon size={16} /> : <CopyIcon size={16} />}
       </button>
     </div>
   );

website/public/fonts/GeistVF.woff2 docs/public/fonts/GeistVF.woff2

@@ -1,31 +1,37 @@
-import type { Position, Theme } from '@pheralb-toast/extra-types';
 import type { CodeBlockProps } from './examples.types';
 
-import { toast } from '@pheralb/toast';
+import type {
+  ToastPosition as Position,
+  ToastTheme as Theme,
+} from '@pheralb/toast';
+
+import { useRef, useState } from 'react';
 import { useDocsStore } from '@/store';
+
+import { toast } from '@pheralb/toast';
 import { Button } from '@/ui/button';
 import {
+  CheckCheckIcon,
   CheckIcon,
   CopyIcon,
   MoonIcon,
   RefreshCcwIcon,
   SunIcon,
 } from 'lucide-react';
 import { cn, copyToClipboard } from '@/utils';
-import { useRef } from 'react';
-import { CopyCodeBtnStyles } from '../mdx/codeBlock';
+import { CopyCodeBtnStyles } from '@/ui/copyCodeBtn';
 
-const activeBtn = cn('border-neutral-600 dark:border-neutral-800');
+const activeBtn = cn('border-neutral-600 dark:border-neutral-700');
 
 const ProviderCodeBlock = (props: CodeBlockProps) => {
   const preRef = useRef<HTMLPreElement>(null);
+  const [isCopied, setIsCopied] = useState<boolean>(false);
 
   const copyPreContent = async () => {
     const content = preRef.current?.textContent ?? '';
     await copyToClipboard(content);
-    toast.success({
-      text: 'Copied to clipboard',
-    });
+    setIsCopied(true);
+    setTimeout(() => setIsCopied(false), 700);
   };
 
   return (
@@ -56,7 +62,7 @@ const ProviderCodeBlock = (props: CodeBlockProps) => {
       </pre>
       <button className={CopyCodeBtnStyles} onClick={copyPreContent}>
         <span className="sr-only">Copy</span>
-        <CopyIcon size={16} />
+        {isCopied ? <CheckCheckIcon size={16} /> : <CopyIcon size={16} />}
       </button>
     </div>
   );
@@ -130,7 +136,7 @@ const Positions = () => {
   );
 };
 
-const Theme = () => {
+const ThemeExamples = () => {
   const { toastTheme, setToastTheme } = useDocsStore();
   const iconSize = 14;
 
@@ -186,4 +192,4 @@ const Theme = () => {
   );
 };
 
-export { Positions, Theme };
+export { Positions, ThemeExamples };

website/public/images/favicon.ico docs/public/images/favicon.ico

@@ -0,0 +1,51 @@
+---
+import { cn } from '@/utils';
+import { SocialLinks } from '@/docs.config';
+
+import { buttonVariants } from '@/ui/button';
+import { Logo } from '@/components/icons';
+import MobileMenu from '@/components/mobileMenu';
+import { ModeToggle } from '@/components/theme/modeToggle';
+---
+
+<nav
+  class={cn(
+    'sticky top-0 z-50 bg-neutral-50/90 backdrop-blur-sm dark:bg-neutral-900/90',
+    'flex w-full py-4 dark:border-neutral-800',
+  )}
+>
+  <div class="container flex max-w-7xl items-center justify-between">
+    <div class="flex items-center">
+      <MobileMenu client:load />
+      <a
+        href="/"
+        class="group flex items-center space-x-3 font-medium tracking-tight transition-opacity duration-75 hover:opacity-80"
+      >
+        <Logo width={22} className="group-hover:animate-pulse" />
+        <span class="text-neutral-700 dark:text-neutral-300">
+          pheralb/toast
+        </span>
+      </a>
+    </div>
+    <div class="flex items-center space-x-1">
+      {
+        SocialLinks.map((link) =>
+          link.routes.map((route) => (
+            <a
+              href={route.path}
+              class={buttonVariants({
+                variant: 'ghost',
+                size: 'icon',
+                className: 'group',
+              })}
+            >
+              {route.icon && <route.icon height={18} width={18} />}
+              <span class="sr-only">{route.title}</span>
+            </a>
+          )),
+        )
+      }
+      <ModeToggle client:load />
+    </div>
+  </div>
+</nav>

website/public/images/logo.png docs/public/images/logo.png

@@ -0,0 +1,42 @@
+<script is:inline data-astro-rerun>
+  document.addEventListener(
+    'astro:page-load',
+    () => {
+      let copyButtonLabel = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>`;
+      let codeBlocks = Array.from(document.querySelectorAll('pre'));
+
+      for (let codeBlock of codeBlocks) {
+        let wrapper = document.createElement('div');
+        wrapper.style.position = 'relative';
+
+        let copyButton = document.createElement('button');
+        copyButton.title = 'Copy code';
+        copyButton.className =
+          'absolute right-0 top-0 m-3 text-white opacity-50 transition-opacity hover:opacity-100';
+        copyButton.innerHTML = copyButtonLabel;
+
+        codeBlock.setAttribute('tabindex', '0');
+        codeBlock.appendChild(copyButton);
+        codeBlock.parentNode.insertBefore(wrapper, codeBlock);
+        wrapper.appendChild(codeBlock);
+
+        copyButton.addEventListener('click', async () => {
+          await copyCode(codeBlock, copyButton);
+        });
+      }
+
+      async function copyCode(block, button) {
+        let code = block.querySelector('code');
+        let text = code.innerText;
+
+        await navigator.clipboard.writeText(text);
+        button.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check-check"><path d="M18 6 7 17l-5-5"/><path d="m22 10-7.5 7.5L13 16"/></svg>`;
+
+        setTimeout(() => {
+          button.innerHTML = copyButtonLabel;
+        }, 700);
+      }
+    },
+    { once: true },
+  );
+</script>

website/public/images/logo_svg.svg docs/public/images/logo_svg.svg

@@ -1,6 +1,5 @@
 import type { ReactNode } from 'react';
-import { Link } from '@remix-run/react';
-import { SidebarRoutes } from '@/docs.routes';
+import { SidebarRoutes } from '@/docs.config';
 
 import {
   DropdownMenu,
@@ -10,17 +9,25 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '@/ui/dropdown-menu';
+import { Button } from '@/ui/button';
+import { MenuIcon } from 'lucide-react';
 
 interface MobileMenuProps {
-  children: ReactNode;
   className?: string;
 }
 
 const MobileMenu = (props: MobileMenuProps) => {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger className={props.className} asChild>
-        {props.children}
+        <Button
+          variant="ghost"
+          size="icon"
+          className="mr-2 md:mr-0 md:hidden"
+          aria-label="Open mobile menu"
+        >
+          <MenuIcon size={18} />
+        </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent sideOffset={4} align="start">
         {SidebarRoutes.map((data) => (
@@ -29,9 +36,9 @@ const MobileMenu = (props: MobileMenuProps) => {
               {data.category}
             </DropdownMenuLabel>
             {data.routes.map((route) => (
-              <Link to={route.path} key={route.title}>
+              <a href={route.path} key={route.title}>
                 <DropdownMenuItem>{route.title}</DropdownMenuItem>
-              </Link>
+              </a>
             ))}
             {data !== SidebarRoutes[SidebarRoutes.length - 1] && (
               <DropdownMenuSeparator />