Amicons Documentation Neo

docs/package.json

@@ -23,6 +23,7 @@
     "@tanstack/react-pacer": "^0.21.1",
     "clsx": "^2.1.1",
     "cva": "1.0.0-beta.4",
+    "date-fns": "^4.1.0",
     "react": "^19.2.5",
     "react-dom": "^19.2.5",
     "react-router": "^7.14.0",

docs/src/Router.tsx

@@ -17,6 +17,20 @@ import Icon from "./app/Icon";
 import Icons from "./app/Icons";
 import Releases from "./app/Releases";
 import Layout from "./design/layout/Layout";
+import NeoPageAbout from "./neo/app/docs/About.mdx";
+import NeoPageBeat from "./neo/app/docs/Beat.mdx";
+import NeoPageBounce from "./neo/app/docs/Bounce.mdx";
+import NeoPageFade from "./neo/app/docs/Fade.mdx";
+import NeoPageFlip from "./neo/app/docs/Flip.mdx";
+import NeoPageInstallation from "./neo/app/docs/Installation.mdx";
+import NeoPageRotate from "./neo/app/docs/Rotate.mdx";
+import NeoPageSpin from "./neo/app/docs/Spin.mdx";
+import NeoDocumentation from "./neo/app/Documentation";
+import NeoError from "./neo/app/Error";
+import NeoIcons from "./neo/app/Icons";
+import NeoReleasePage from "./neo/app/Release";
+import NeoReleases from "./neo/app/Releases";
+import NeoLayout from "./neo/design/layouts/Layout";
 
 export const router = createHashRouter([
   {
@@ -62,4 +76,37 @@ export const router = createHashRouter([
       },
     ],
   },
+  {
+    path: "/neo",
+    Component: NeoLayout,
+    children: [
+      { index: true, Component: NeoIcons },
+      { path: "icons", Component: NeoIcons },
+      {
+        path: "releases",
+        errorElement: <NeoError />,
+        children: [
+          { index: true, Component: NeoReleases },
+          { path: ":slug", Component: NeoReleasePage },
+        ],
+      },
+      {
+        path: "documentation",
+        Component: NeoDocumentation,
+        errorElement: <NeoError />,
+        children: [
+          { index: true, element: <Navigate to="installation" replace /> },
+          { path: "about", Component: NeoPageAbout },
+          { path: "installation", Component: NeoPageInstallation },
+          { path: "spin", Component: NeoPageSpin },
+          { path: "bounce", Component: NeoPageBounce },
+          { path: "rotate", Component: NeoPageRotate },
+          { path: "flip", Component: NeoPageFlip },
+          { path: "beat", Component: NeoPageBeat },
+          { path: "fade", Component: NeoPageFade },
+        ],
+      },
+      { path: "*", Component: NeoError },
+    ],
+  },
 ]);

docs/src/neo/app/Documentation.tsx

@@ -0,0 +1,88 @@
+import { Outlet, Link, useLocation } from "react-router";
+
+import { Separator } from "@base-ui/react";
+import Amicon, { aiBook, aiArrowLeft, aiArrowRight } from "@studio384/amicons";
+
+import { cn } from "@/utils/cn";
+
+import PageHeader from "../design/blocks/PageHeader";
+import { DOC_PAGES } from "./docs/navigation";
+
+export default function NeoDocumentation() {
+  const location = useLocation();
+  const currentPage = DOC_PAGES.find((page) => page.path === location.pathname);
+  const currentIndex = DOC_PAGES.findIndex((page) => page.path === location.pathname);
+
+  if (currentIndex === -1) return null;
+
+  const prev = currentIndex > 0 ? DOC_PAGES[currentIndex - 1] : null;
+  const next = currentIndex < DOC_PAGES.length - 1 ? DOC_PAGES[currentIndex + 1] : null;
+
+  return (
+    <>
+      <PageHeader
+        icon={currentPage?.icon ?? aiBook}
+        title={currentPage?.title ?? "Documentation"}
+        subtitle={currentPage?.sectionTitle ?? "Documentation"}
+      />
+
+      <div className="flex flex-col gap-4 p-4">
+        <article className="neo-docs neo-doc-page container mx-auto max-w-4xl">
+          <Outlet />
+        </article>
+
+        <Separator
+          orientation="horizontal"
+          className="container max-w-4xl mx-auto h-px bg-zinc-950/5 dark:bg-zinc-950/10"
+        />
+
+        <div className="container mx-auto max-w-4xl">
+          <nav className="grid grid-cols-1 grid-rows-2 gap-1 @md/main:grid-cols-2 @md/main:grid-rows-1 @xl2/main:grid-cols-3">
+            {prev && (
+              <Link
+                to={prev.path}
+                className={cn(
+                  "group grid grid-cols-[min-content_auto] flex-col gap-2 rounded-sm px-3 py-2 transition-all duration-150",
+                  "col-start-1 hover:bg-violet-600 hover:text-white hover:shadow-sm",
+                )}
+              >
+                <Amicon
+                  icon={aiArrowLeft}
+                  className="mt-1 text-sm text-zinc-500 duration-150! group-hover:text-white/75"
+                />
+                <div className="flex flex-col">
+                  <span className="text-sm text-zinc-500 duration-150 group-hover:text-white/75">
+                    {prev.sectionTitle}
+                  </span>
+                  <span className="font-display my-1 text-xl/5 font-medium">{prev.title}</span>
+                </div>
+              </Link>
+            )}
+            {next && (
+              <Link
+                to={next.path}
+                className={cn(
+                  "group grid grid-cols-[auto_min-content] flex-col gap-2 rounded-sm px-3 py-2 transition-all duration-150",
+                  "hover:bg-violet-600 hover:text-white hover:shadow-sm @md/main:col-start-2 @xl2/main:col-start-3",
+                )}
+              >
+                <div className="flex flex-col items-end">
+                  <span className="text-sm text-zinc-500 duration-150 group-hover:text-white/75">
+                    {next.sectionTitle}
+                  </span>
+                  <span className="font-display my-1 text-xl/5 font-medium text-end">
+                    {next.title}
+                  </span>
+                </div>
+                <Amicon
+                  icon={aiArrowRight}
+                  className="mt-1 text-sm text-zinc-500 duration-150! group-hover:text-white/75"
+                />
+              </Link>
+            )}
+          </nav>
+        </div>
+      </div>
+    </>
+  );
+}

docs/src/neo/app/Error.tsx

@@ -0,0 +1,13 @@
+import Amicon from "@studio384/amicons";
+
+export default function NeoError() {
+  return (
+    <div className="flex h-full w-full flex-col items-center justify-center">
+      <div className="max-w-120">
+        <Amicon className="pb-4 text-8xl text-violet-600" />
+        <h1 className="font-display text-lg font-medium tracking-tight text-zinc-500">Error 404</h1>
+        <p className="text-4xl font-semibold">And we still haven't found what you're looking for...</p>
+      </div>
+    </div>
+  );
+}

docs/src/neo/app/Icons.tsx

@@ -0,0 +1,3 @@
+export default function NeoIcons() {
+  return <div>Content page</div>;
+}

docs/src/neo/app/Release.tsx

@@ -0,0 +1,113 @@
+import { Link, Navigate, useParams } from "react-router";
+
+import { Separator } from "@base-ui/react";
+import Amicon, { aiAmicons, aiArrowLeft, aiArrowRight } from "@studio384/amicons";
+import { format, parse } from "date-fns";
+
+import ReleaseCard from "@/neo/design/blocks/ReleaseCard";
+import { cn } from "@/utils/cn";
+
+import PageHeader from "../design/blocks/PageHeader";
+import { getReleaseBySlug, releases } from "./releases/releaseEntries";
+
+export default function Release() {
+  const { slug } = useParams();
+  const release = getReleaseBySlug(slug);
+
+  if (!release) {
+    return <Navigate to="/neo/releases" replace />;
+  }
+
+  const ReleaseComponent = release.Component;
+  const releaseIndex = releases.findIndex((entry) => entry.slug === release.slug);
+  const nextRelease = releaseIndex > 0 ? releases[releaseIndex - 1] : undefined;
+  const previousRelease =
+    releaseIndex < releases.length - 1 ? releases[releaseIndex + 1] : undefined;
+
+  return (
+    <>
+      <PageHeader
+        icon={aiAmicons}
+        title={release.name}
+        subtitle={format(parse(release.publishDate, "yyyy-MM-dd", new Date()), "d MMMM yyyy")}
+      >
+        <Link
+          to="/neo/releases"
+          className="font-display inline-flex items-center gap-1 text-violet-700 transition-colors hover:text-violet-900"
+        >
+          <Amicon icon={aiArrowLeft} /> All releases
+        </Link>
+      </PageHeader>
+
+      <div className="flex flex-col gap-4 p-4">
+        <article className="container mx-auto max-w-4xl">
+          <ReleaseCard
+            excerpt={release.excerpt}
+            newIcons={release.newIcons}
+            updatedIcons={release.updatedIcons}
+            renamedIcons={release.renamedIcons}
+            removedIcons={release.removedIcons}
+          >
+            <ReleaseComponent />
+          </ReleaseCard>
+        </article>
+
+        <Separator
+          orientation="horizontal"
+          className="container max-w-4xl mx-auto h-px bg-zinc-950/5 dark:bg-zinc-950/10"
+        />
+
+        {(nextRelease || previousRelease) && (
+          <div className="container mx-auto max-w-4xl">
+            <nav className="grid grid-cols-1 grid-rows-2 gap-1 @md/main:grid-cols-2 @md/main:grid-rows-1 @xl2/main:grid-cols-3">
+              {nextRelease && (
+                <Link
+                  to={`/neo/releases/${nextRelease.slug}`}
+                  className={cn(
+                    "group grid grid-cols-[min-content_auto] flex-col gap-2 rounded-sm px-3 py-2 transition-all duration-150",
+                    "col-start-1 hover:bg-violet-600 hover:text-white hover:shadow-sm",
+                  )}
+                >
+                  <Amicon
+                    icon={aiArrowLeft}
+                    className="mt-1 text-sm text-zinc-500 duration-150! group-hover:text-white/75"
+                  />
+                  <div className="flex flex-col">
+                    <span className="text-sm text-zinc-500 duration-150 group-hover:text-white/75">
+                      Next release
+                    </span>
+                    <span className="font-display my-1 text-xl/5 font-medium">
+                      {nextRelease.name}
+                    </span>
+                  </div>
+                </Link>
+              )}
+              {previousRelease && (
+                <Link
+                  to={`/neo/releases/${previousRelease.slug}`}
+                  className={cn(
+                    "group grid grid-cols-[auto_min-content] flex-col gap-2 rounded-sm px-3 py-2 transition-all duration-150",
+                    "hover:bg-violet-600 hover:text-white hover:shadow-sm @md/main:col-start-2 @xl2/main:col-start-3",
+                  )}
+                >
+                  <div className="flex flex-col items-end">
+                    <span className="text-sm text-zinc-500 duration-150 group-hover:text-white/75">
+                      Previous release
+                    </span>
+                    <span className="font-display my-1 text-xl/5 font-medium text-end">
+                      {previousRelease.name}
+                    </span>
+                  </div>
+                  <Amicon
+                    icon={aiArrowRight}
+                    className="mt-1 text-sm text-zinc-500 duration-150! group-hover:text-white/75"
+                  />
+                </Link>
+              )}
+            </nav>
+          </div>
+        )}
+      </div>
+    </>
+  );
+}