Refactoring (#284)

* refactor: removed theme selector

* refactor: navigation styles

* refactor: intro page

* refactor: redirects

* refactor: intro page

* fix: minor fixes

next.config.mjs

@@ -1,6 +1,8 @@
 import withNavigation from "./src/build/navigation.mjs";
 import withSearch from "./src/build/search.mjs";
 
+const protectedRoutes = ["/", "/docs"];
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   swcMinify: true,
@@ -17,6 +19,16 @@ const nextConfig = {
       },
     ],
   },
+  async redirects() {
+    return [
+      ...protectedRoutes.map((source) => ({
+        source,
+        destination: "/docs/intro",
+        permanent: true,
+        basePath: false,
+      })),
+    ];
+  },
   webpack(config) {
     config.module.rules.push({
       test: /\.svg$/i,

package.json

@@ -38,6 +38,7 @@
     "jsonc-parser": "^3.2.0",
     "mdast-util-to-string": "^4.0.0",
     "mermaid": "^10.5.0",
+    "nanoid": "^5.0.4",
     "next": "^13.5.4",
     "next-mdx-remote": "^4.4.1",
     "next-sitemap": "^4.2.3",

src/app/articles/node-modules/page.tsx

@@ -1,5 +1,5 @@
 import { DocsLayout } from "@/components/DocsLayout";
-import { Bundle } from "@/lib/interfaces";
+import { Bundle } from "@/lib/types";
 import { readFile } from "fs/promises";
 import { Metadata } from "next";
 import Link from "next/link";
@@ -17,7 +17,7 @@ export default async function Page() {
   ).bundles.filter((bundle) => bundle.public);
 
   return (
-    <DocsLayout frontmatter={{ title: "Node Modules" }} sections={[]}>
+    <DocsLayout frontmatter={{ title: "Node Modules" }}>
       <p>
         Zuplo generally supports node modules, but to ensure the security and
         performance of each API Gateway we must approve each module. This

src/app/intro/page.tsx

@@ -0,0 +1,65 @@
+import { DocsLayout } from "@/components/DocsLayout";
+import { QuickLink, QuickLinks } from "@/components/QuickLinks";
+import { QuickLinkItem } from "@/lib/types";
+import { nanoid } from "nanoid";
+
+export default async function Page() {
+  const overviewItems: Array<QuickLinkItem> = [
+    {
+      id: nanoid(),
+      title: "What is Zuplo?",
+      href: "/articles/what-is-zuplo",
+      icon: "installation",
+    },
+    {
+      id: nanoid(),
+      title: "Who uses Zuplo, and why?",
+      href: "/articles/who-uses-and-why",
+      icon: "installation",
+    },
+    {
+      id: nanoid(),
+      title: "Zuplo in your stack",
+      href: "/articles/zuplo-in-your-stack",
+      icon: "installation",
+    },
+  ];
+
+  const gettingStartedItems: Array<QuickLinkItem> = [
+    {
+      id: nanoid(),
+      title: "Step 1 - Setup Basic Gateway",
+      href: "/articles/step-1-setup-basic-gateway",
+      icon: "installation",
+    },
+    {
+      id: nanoid(),
+      title: "Step 2 - API Key Auth",
+      href: "/articles/step-2-add-api-key-auth",
+      icon: "installation",
+    },
+    {
+      id: nanoid(),
+      title: "Step 3 - Rate Limiting",
+      href: "/articles/step-3-add-rate-limiting",
+      icon: "installation",
+    },
+    {
+      id: nanoid(),
+      title: "Step 4 - Deploying to the Edge",
+      href: "/articles/step-4-deploying-to-the-edge",
+      icon: "installation",
+    },
+  ];
+
+  return (
+    <DocsLayout frontmatter={{ title: "Zuplo Docs" }} useRateSection={false}>
+      Learn how to use Zuplo to add API-key management, developer documentation,
+      and rate-limiting, for any stack.
+      <h2>Overview</h2>
+      <QuickLinks items={overviewItems} />
+      <h2>Getting Started</h2>
+      <QuickLinks items={gettingStartedItems} />
+    </DocsLayout>
+  );
+}

src/app/policies/[slug]/page.tsx

@@ -1,5 +1,5 @@
 import { DocsLayout } from "@/components/DocsLayout";
-import { Section } from "@/lib/interfaces";
+import { Section } from "@/lib/types";
 import { getAllPolicies, getPolicy } from "@/lib/policies";
 import { getHighlighter } from "shiki";
 

src/components/DocsHeader.tsx

@@ -3,7 +3,7 @@
 import { usePathname } from "next/navigation";
 
 import { navigation } from "@/build/navigation.mjs";
-import { NavCategory, NavItem, Section } from "@/lib/interfaces";
+import { NavCategory, NavItem, Section } from "@/lib/types";
 import Link from "next/link";
 import ChevronRightIcon from "@/components/svgs/chevron-right.svg";
 import { MobileTableOfContents } from "@/components/MobileTableOfContents";
@@ -34,7 +34,7 @@ export function DocsHeader({
   return (
     <header className="mb-5">
       <div className="mb-4 flex items-center gap-x-[3px] text-sm leading-6 tracking-wider text-gray-600 lg:mb-10">
-        <Link href="#">Home</Link>
+        <Link href="/">Home</Link>
         {section && (
           <>
             <ChevronRightIcon />

src/components/DocsLayout.tsx

@@ -5,16 +5,18 @@ import { Prose } from "@/components/Prose";
 import { TableOfContents } from "@/components/TableOfContents";
 import ArticleRate from "@/components/shared/article/Rate";
 import ArticleSupport from "@/components/shared/article/Support";
-import { Section } from "@/lib/interfaces";
+import { Section } from "@/lib/types";
 
 export function DocsLayout({
   children,
   frontmatter: { title },
-  sections,
+  sections = [],
+  useRateSection = true,
 }: {
   children: React.ReactNode;
   frontmatter: { title?: string };
-  sections: Section[];
+  sections?: Array<Section>;
+  useRateSection?: boolean;
 }) {
   return (
     <>
@@ -24,7 +26,7 @@ export function DocsLayout({
             <DocsHeader tableOfContents={sections} title={title} />
             <Prose>{children}</Prose>
           </article>
-          <ArticleRate />
+          {useRateSection && <ArticleRate />}
           <ArticleSupport />
           <PrevNextLinks />
         </div>

src/components/MobileTableOfContents.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Section } from "@/lib/interfaces";
+import { Section } from "@/lib/types";
 import { Listbox, Transition } from "@headlessui/react";
 import clsx from "classnames";
 import { ChevronDownIcon, ChevronUpIcon } from "@heroicons/react/20/solid";

src/components/Navigation.tsx

@@ -6,7 +6,7 @@ import ChevronDownIcon from "@/components/svgs/chevron-down.svg";
 import ArrowIcon from "@/components/svgs/arrow.svg";
 
 import { navigation } from "@/build/navigation.mjs";
-import { NavCategory, NavItem } from "@/lib/interfaces";
+import { NavCategory, NavItem } from "@/lib/types";
 import { useState } from "react";
 
 function SubNavSection({

src/components/PrevNextLinks.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { navigation } from "@/build/navigation.mjs";
-import { NavCategory, NavItem } from "@/lib/interfaces";
+import { NavCategory, NavItem } from "@/lib/types";
 import clsx from "classnames";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
@@ -70,7 +70,7 @@ export function PrevNextLinks() {
   }
 
   return (
-    <dl className="mt-[60px] flex border-t border-slate-200 py-5 dark:border-slate-800">
+    <dl className="flex border-t border-slate-200 py-5 dark:border-slate-800">
       {previousPage && "href" in previousPage && (
         <PageLink dir="previous" {...previousPage} />
       )}

src/components/QuickLinks.tsx

@@ -1,11 +1,19 @@
 import Link from "next/link";
 
 import { Icon } from "@/components/Icon";
+import { QuickLinkItem } from "@/lib/types";
 
-export function QuickLinks({ children }: { children: React.ReactNode }) {
+export function QuickLinks({ items }: { items: Array<QuickLinkItem> }) {
   return (
-    <div className="not-prose my-12 grid grid-cols-1 gap-6 sm:grid-cols-2">
-      {children}
+    <div className="not-prose grid grid-cols-1 gap-6 sm:grid-cols-2">
+      {items.map((item) => (
+        <QuickLink
+          key={item.id}
+          title={item.title}
+          href={item.href}
+          icon={item.icon}
+        />
+      ))}
     </div>
   );
 }
@@ -17,24 +25,26 @@ export function QuickLink({
   icon,
 }: {
   title: string;
-  description: string;
+  description?: string;
   href: string;
   icon: React.ComponentProps<typeof Icon>["icon"];
 }) {
   return (
     <div className="group relative rounded-xl border border-slate-200 dark:border-slate-800">
-      <div className="absolute -inset-px rounded-xl border-2 border-transparent opacity-0 [background:linear-gradient(var(--quick-links-hover-bg,theme(colors.pink.50)),var(--quick-links-hover-bg,theme(colors.pink.50)))_padding-box,linear-gradient(to_top,theme(colors.indigo.400),theme(colors.cyan.400),theme(colors.pink.500))_border-box] group-hover:opacity-100 dark:[--quick-links-hover-bg:theme(colors.slate.800)]" />
+      <div className="absolute -inset-px rounded-xl border-2 border-transparent opacity-0 [background:linear-gradient(var(--quick-links-hover-bg,theme(colors.pink.50)),var(--quick-links-hover-bg,theme(colors.pink.50)))_padding-box,linear-gradient(to_top,theme(colors.indigo.400),theme(colors.cyan.400),theme(colors.pink.500))_border-box] group-hover:opacity-100 dark:[--quick-links-hover-bg:theme(colors.black)]" />
       <div className="relative overflow-hidden rounded-xl p-6">
         <Icon icon={icon} className="h-8 w-8" />
-        <h2 className="mt-4 font-display text-base text-white dark:text-black">
+        <h2 className="mt-4 font-display text-base text-black group-hover:text-white">
           <Link href={href}>
             <span className="absolute -inset-px rounded-xl" />
             {title}
           </Link>
         </h2>
-        <p className="mt-1 text-sm text-slate-700 dark:text-slate-400">
-          {description}
-        </p>
+        {description && (
+          <p className="mt-1 text-sm text-slate-700 dark:text-slate-400">
+            {description}
+          </p>
+        )}
       </div>
     </div>
   );

src/components/Search.tsx

@@ -2,7 +2,7 @@
 
 import { navigation } from "@/build/navigation.mjs";
 import { type Result } from "@/build/search.mjs";
-import { NavCategory, NavItem } from "@/lib/interfaces";
+import { NavCategory, NavItem } from "@/lib/types";
 import {
   createAutocomplete,
   type AutocompleteApi,

src/components/TableOfContents.tsx

@@ -4,7 +4,7 @@ import clsx from "classnames";
 import Link from "next/link";
 import { useCallback, useEffect, useState } from "react";
 
-import { type Section } from "@/lib/interfaces";
+import { type Section } from "@/lib/types";
 
 export function TableOfContents({
   tableOfContents,