feat: layout template (#277)

* Added test doc * updated docs * feat: header template * feat: mobile-header * feat: mobile-header * feat: mobile-header * feat: layout template * feat: layout template * feat: layout template * feat: layout template * feat: layout template * feat: layout template * fix: policy template * fix: layout template * fix: policy template --------- Co-authored-by: Nathan Totten <[email protected]>
zuplo · Dec 8, 2023 · 7f9055f · 7f9055f
1 parent 7c128c0
commit 7f9055f
Show file tree

Hide file tree

Showing 28 changed files with 335 additions and 110 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -25,6 +25,7 @@
     "@types/react-dom": "^18.2.11",
     "@types/react-highlight-words": "^0.16.4",
     "autoprefixer": "^10.4.12",
+    "class-variance-authority": "^0.7.0",
     "classnames": "^2.3.2",
     "esbuild": "^0.19.8",
     "flexsearch": "^0.7.31",

diff --git a/src/app/favicon.ico b/src/app/favicon.ico
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -26,7 +26,14 @@ export default function RootLayout({
       className={clsx("h-full antialiased", beVietnamProFont.variable)}
       suppressHydrationWarning
     >
-      <body className="flex min-h-full bg-white dark:bg-black">
+      <head>
+        <link
+          rel="icon"
+          type="image/x-icon"
+          href="https://cdn.zuplo.com/www/favicon.png"
+        />
+      </head>
+      <body className="flex min-h-full bg-white text-white dark:bg-black dark:text-black">
         <Providers>
           <Layout>{children}</Layout>
         </Providers>

diff --git a/src/app/policies/page.tsx b/src/app/policies/page.tsx
@@ -14,7 +14,7 @@ export default async function Page() {
   const policies = await getAllPolicies();
 
   return (
-    <DocsContainer>
+    <DocsContainer className="w-full flex-col px-8 pb-[60px]">
       <Prose>
         <DocsHeader title="Policies" />
         <p>
@@ -39,12 +39,14 @@ export default async function Page() {
           so developers can simply write code to customize any aspect of Zuplo.
         </p>
       </Prose>
-      <Link
-        href="/articles/policies"
-        className="not-prose btn btn-large btn-secondary-light mt-6 inline-block no-underline"
-      >
-        Check out details
-      </Link>
+      <div>
+        <Link
+          href="/articles/policies"
+          className="btn btn-large btn-secondary-light mt-6 inline-block no-underline"
+        >
+          Check out details
+        </Link>
+      </div>
 
       <div
         role="list"

diff --git a/src/components/DocsContainer.tsx b/src/components/DocsContainer.tsx
@@ -1,8 +1,20 @@
 import { PropsWithChildren } from "react";
+import clsx from "classnames";
 
-export function DocsContainer({ children }: PropsWithChildren) {
+export function DocsContainer({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) {
   return (
-    <div className="min-w-0 max-w-2xl flex-auto px-4 py-16 lg:max-w-none lg:pl-8 lg:pr-0 xl:px-4">
+    <div
+      className={clsx(
+        className,
+        "sticky top-[4.75rem] -ml-0.5 flex h-[calc(100vh-7rem)] overflow-y-auto overflow-x-hidden pt-[60px]",
+      )}
+    >
       {children}
     </div>
   );

diff --git a/src/components/DocsHeader.tsx b/src/components/DocsHeader.tsx
@@ -4,6 +4,8 @@ import { usePathname } from "next/navigation";
 
 import { navigation } from "@/build/navigation.mjs";
 import { NavCategory, NavItem } from "@/lib/interfaces";
+import Link from "next/link";
+import ChevronRightIcon from "@/components/svgs/chevron-right.svg";
 
 export function DocsHeader({ title }: { title?: string }) {
   let pathname = usePathname();
@@ -23,14 +25,15 @@ export function DocsHeader({ title }: { title?: string }) {
   }
 
   return (
-    <header className="mb-9 space-y-1">
-      {section && (
-        <p className="font-display text-sm font-medium text-pink-500">
-          {section.label}
-        </p>
-      )}
+    <header className="mb-5">
+      <div className="mb-10 flex items-center gap-x-[3px] text-sm leading-6 tracking-wider text-gray-600">
+        <Link href="#">Home</Link>
+        <ChevronRightIcon />
+        {section && <p className="">{section.label}</p>}
+      </div>
+
       {title && (
-        <h1 className="font-display text-3xl tracking-tight text-slate-900 dark:text-white">
+        <h1 className="mb-2.5 text-3xl leading-narrow text-white dark:text-black">
           {title}
         </h1>
       )}

diff --git a/src/components/DocsLayout.tsx b/src/components/DocsLayout.tsx
@@ -3,6 +3,8 @@ import { DocsHeader } from "@/components/DocsHeader";
 import { PrevNextLinks } from "@/components/PrevNextLinks";
 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";
 
 export function DocsLayout({
@@ -17,11 +19,15 @@ export function DocsLayout({
   return (
     <>
       <DocsContainer>
-        <article>
-          <DocsHeader title={title} />
-          <Prose>{children}</Prose>
-        </article>
-        <PrevNextLinks />
+        <div className="w-full px-8">
+          <article>
+            <DocsHeader title={title} />
+            <Prose>{children}</Prose>
+          </article>
+          <ArticleRate />
+          <ArticleSupport />
+          <PrevNextLinks />
+        </div>
       </DocsContainer>
       <TableOfContents tableOfContents={sections} />
     </>

diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
@@ -9,6 +9,7 @@ import classNames from "classnames";
 import { Search } from "./Search";
 import { StartFreeCTAButton } from "./StartFreeCTAButton";
 import { ThemeSelector } from "./ThemeSelector";
+import { Container } from "@/components/shared/Container";
 
 function Header() {
   const [scrollY, setScrollY] = useState(0);
@@ -28,55 +29,60 @@ function Header() {
 
   return (
     <header
-      className={classNames("fixed top-0 z-20 w-full bg-black ", {
+      className={classNames("fixed top-0 z-20 w-full bg-white dark:bg-black ", {
         "!dark:bg-black": scrollY > 10,
       })}
     >
-      <div className="mx-auto flex min-h-[52px] w-full max-w-[1180px] items-center justify-between px-4 py-2 lg:box-content lg:px-0 lg:py-5">
-        <div className="flex p-3 lg:hidden">
-          <MobileNavigation />
-        </div>
-        <div className="relative flex basis-0 items-center">
-          <Logo className="block w-28 lg:w-36" />
-        </div>
-        <div className="flex flex-grow justify-end lg:justify-center">
-          <div className="">
-            <Search />
+      <div className="relative w-full px-5">
+        <div className="mx-auto flex min-h-[52px] w-full max-w-[1180px] items-center justify-between py-2 lg:box-content lg:px-0 lg:py-5">
+          <div className="flex p-3 lg:hidden">
+            <MobileNavigation />
           </div>
-        </div>
-        <div className="hidden justify-end lg:flex">
-          <ThemeSelector className="relative z-10 my-auto mr-8" />
-          <StartFreeCTAButton />
-        </div>
-        {/* <div className="-my-5 mr-6 sm:mr-8 md:mr-0">
-          <Search />
-        </div>
-        <div className="relative flex basis-0 justify-end gap-6 sm:gap-8 md:flex-grow">
-          <ThemeSelector className="relative z-10" />
-          <div className="hidden lg:flex">
+          <div className="relative flex basis-0 items-center">
+            <Logo className="block w-28 lg:w-36" />
+          </div>
+          <div className="flex flex-grow justify-end lg:justify-center">
+            <div className="">
+              <Search />
+            </div>
+          </div>
+          <div className="hidden justify-end lg:flex">
+            <ThemeSelector className="relative z-10 my-auto mr-8" />
             <StartFreeCTAButton />
           </div>
-        </div> */}
+          {/* <div className="-my-5 mr-6 sm:mr-8 md:mr-0">
+            <Search />
+          </div>
+          <div className="relative flex basis-0 justify-end gap-6 sm:gap-8 md:flex-grow">
+            <ThemeSelector className="relative z-10" />
+            <div className="hidden lg:flex">
+              <StartFreeCTAButton />
+            </div>
+          </div> */}
+        </div>
       </div>
     </header>
   );
 }
 
 export function Layout({ children }: { children: React.ReactNode }) {
   return (
-    <div className="flex w-full flex-col">
+    <div className="flex w-full flex-col bg-white dark:bg-black">
       <Header />
-
-      <div className="relative mx-auto flex w-full max-w-8xl flex-auto justify-center lg:mt-20 ">
-        <div className="hidden lg:relative lg:block lg:flex-none">
-          {/* <div className="absolute inset-y-0 right-0 w-[50vw] dark:hidden" />
-          <div className="absolute bottom-0 right-0 top-16 hidden h-12 w-px bg-gradient-to-t from-slate-800 dark:block" />
-          <div className="absolute bottom-0 right-0 top-28 hidden w-px bg-slate-800 dark:block" /> */}
-          <div className="sticky top-[4.75rem] -ml-0.5 h-[calc(100vh-4.75rem)] w-64 overflow-y-auto overflow-x-hidden py-16 pl-0.5 pr-8 xl:w-72 xl:pr-12">
-            <Navigation />
-          </div>
+      <div className="relative w-full px-5">
+        <div className="relative mx-auto w-full max-w-8xl rounded-xl bg-gray-400 dark:bg-white lg:mt-[92px]">
+          <Container className="flex h-[calc(100vh-7rem)] flex-auto justify-center">
+            <aside className="hidden border-r border-gray-500 lg:relative lg:block lg:flex-none">
+              {/* <div className="absolute inset-y-0 right-0 w-[50vw] dark:hidden" />
+              <div className="absolute bottom-0 right-0 top-16 hidden h-12 w-px bg-gradient-to-t from-slate-800 dark:block" />
+              <div className="absolute bottom-0 right-0 top-28 hidden w-px bg-slate-800 dark:block" /> */}
+              <div className="sticky top-[4.75rem] -ml-0.5 h-[calc(100vh-7rem)] w-64 overflow-y-auto overflow-x-hidden py-16 pl-0.5 xl:w-72 xl:pr-8">
+                <Navigation />
+              </div>
+            </aside>
+            {children}
+          </Container>
         </div>
-        {children}
       </div>
     </div>
   );

diff --git a/src/components/PolicyCard.tsx b/src/components/PolicyCard.tsx
@@ -10,7 +10,7 @@ export const PolicyCard: React.FC<Props> = ({ name, href, icon }) => {
   return (
     <Link
       href={href}
-      className="group block flex items-center gap-4 rounded-lg border border-gray-500 bg-white p-4 text-black transition-colors hover:bg-gray-500/50 md:h-36 md:flex-col md:justify-center md:px-5 md:py-6 md:text-center"
+      className="bg-transpatent group flex items-center gap-4 rounded-lg border border-gray-500 p-4 text-white transition-colors hover:bg-gray-500/50 dark:text-black md:h-36 md:flex-col md:justify-center md:px-5 md:py-6 md:text-center"
     >
       <div className="rounded-lg bg-pink/10 p-2">
         <div

diff --git a/src/components/PrevNextLinks.tsx b/src/components/PrevNextLinks.tsx
@@ -26,21 +26,21 @@ function PageLink({
 }) {
   return (
     <div {...props}>
-      <dt className="font-display text-sm font-medium text-slate-900 dark:text-white">
+      {/* <dt className="font-display text-sm font-medium text-slate-900 dark:text-white">
         {dir === "next" ? "Next" : "Previous"}
-      </dt>
-      <dd className="mt-1">
+      </dt> */}
+      <dd>
         <Link
           href={href}
           className={clsx(
-            "flex items-center gap-x-1 text-base font-semibold text-slate-500 hover:text-slate-600 dark:text-slate-400 dark:hover:text-slate-300",
+            "flex items-center gap-x-2.5 text-sm font-bold leading-6 tracking-wider text-pink",
             dir === "previous" && "flex-row-reverse",
           )}
         >
           {label}
           <ArrowIcon
             className={clsx(
-              "h-4 w-4 flex-none fill-current",
+              "h-6 w-6 flex-none fill-current",
               dir === "previous" && "-scale-x-100",
             )}
           />
@@ -70,7 +70,7 @@ export function PrevNextLinks() {
   }
 
   return (
-    <dl className="mt-12 flex border-t border-slate-200 pt-6 dark:border-slate-800">
+    <dl className="mt-[60px] flex border-t border-slate-200 py-5 dark:border-slate-800">
       {previousPage && "href" in previousPage && (
         <PageLink dir="previous" {...previousPage} />
       )}

diff --git a/src/components/Prose.tsx b/src/components/Prose.tsx
@@ -13,19 +13,25 @@ export function Prose<T extends React.ElementType = "div">({
     <Component
       className={clsx(
         className,
-        "prose prose-slate max-w-none dark:prose-invert dark:text-slate-400",
+        "dark:white prose max-w-none text-lg dark:prose-invert",
         // headings
-        "prose-headings:scroll-mt-28 prose-headings:font-display prose-headings:font-normal lg:prose-headings:scroll-mt-[8.5rem]",
+        "prose-headings:mb-2.5 prose-headings:text-2xl prose-h2:mt-10",
         // lead
-        "prose-lead:text-slate-500 dark:prose-lead:text-slate-400",
+        "prose-lead:text-slate-500 dark:prose-lead:text-white",
         // links
-        "prose-a:font-normal dark:prose-a:text-pink-400",
+        "prose-a:font-normal dark:prose-a:text-pink",
         // link underline
         "prose-a:font-normal prose-a:no-underline hover:prose-a:font-normal hover:prose-a:underline ",
         // pre
         "prose-pre:rounded-xl prose-pre:bg-slate-900 prose-pre:shadow-lg dark:prose-pre:bg-slate-800/60 dark:prose-pre:shadow-none dark:prose-pre:ring-1 dark:prose-pre:ring-slate-300/10",
         // hr
         "dark:prose-hr:border-slate-800",
+        //paragraph
+        "prose-p:my-2.5",
+        //list
+        "prose-ul:my-2.5 prose-li:my-0 prose-li:px-0",
+        //img
+        "prose-img:my-10",
       )}
       {...props}
     />

diff --git a/src/components/QuickLinks.tsx b/src/components/QuickLinks.tsx
@@ -26,7 +26,7 @@ export function QuickLink({
       <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="relative overflow-hidden rounded-xl p-6">
         <Icon icon={icon} className="h-8 w-8" />
-        <h2 className="mt-4 font-display text-base text-slate-900 dark:text-white">
+        <h2 className="mt-4 font-display text-base text-white dark:text-black">
           <Link href={href}>
             <span className="absolute -inset-px rounded-xl" />
             {title}

diff --git a/src/components/Search.tsx b/src/components/Search.tsx
@@ -443,11 +443,11 @@ export function Search() {
     <>
       <button
         type="button"
-        className="group flex h-6 w-6 items-center justify-center rounded-xl bg-transparent px-3.5 hover:bg-white hover:ring-2 hover:ring-pink sm:justify-start md:h-auto md:w-80 md:flex-none md:text-sm md:ring-1 md:ring-inset md:ring-gray-600 lg:w-96"
+        className="group flex h-6 w-6 items-center justify-center rounded-xl bg-transparent px-3.5 hover:bg-white hover:ring-2 hover:ring-pink md:h-auto md:w-80 md:flex-none md:justify-start md:p-3.5 md:pr-5 md:text-sm md:ring-1 md:ring-inset md:ring-gray-600 lg:w-96"
         {...buttonProps}
       >
-        <SearchIcon className="h-5 w-5 flex-none fill-white opacity-50 group-hover:fill-gray-600" />
-        <span className="sr-only text-base group-hover:text-black md:not-sr-only md:ml-1.5 md:text-white/75">
+        <SearchIcon className="h-5 w-5 flex-none fill-gray-600 opacity-50 group-hover:fill-gray-600 dark:fill-white" />
+        <span className="sr-only text-base text-gray-600 group-hover:text-black md:not-sr-only md:ml-1.5">
           Search
         </span>
       </button>