feat: layout template

zuplo · Dec 7, 2023 · 3a41c1e · 3a41c1e
1 parent 9fed630
commit 3a41c1e
Show file tree

Hide file tree

Showing 21 changed files with 148 additions and 39 deletions.
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/components/DocsContainer.tsx b/src/components/DocsContainer.tsx
@@ -2,7 +2,7 @@ import { PropsWithChildren } from "react";
 
 export function DocsContainer({ children }: PropsWithChildren) {
   return (
-    <div className="sticky top-[4.75rem] -ml-0.5 flex h-[calc(100vh-10rem)] min-w-0 max-w-2xl overflow-y-auto overflow-x-hidden py-[60px] lg:max-w-none">
+    <div 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();
@@ -24,13 +26,14 @@ export function DocsHeader({ title }: { title?: string }) {
 
   return (
     <header className="mb-5">
-      {section && (
-        <p className="mb-10 font-display text-sm font-medium text-pink-500">
-          {section.label}
-        </p>
-      )}
+      <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="mb-2.5 text-3xl leading-narrow text-black 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,13 @@ export function DocsLayout({
   return (
     <>
       <DocsContainer>
-        <div className="px-8">
+        <div className="w-full px-8">
           <article>
             <DocsHeader title={title} />
             <Prose>{children}</Prose>
           </article>
+          <ArticleRate />
+          <ArticleSupport />
           <PrevNextLinks />
         </div>
       </DocsContainer>

diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
@@ -29,7 +29,7 @@ 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,
       })}
     >
@@ -65,15 +65,15 @@ function Header() {
 
 export function Layout({ children }: { children: React.ReactNode }) {
   return (
-    <div className="flex w-full flex-col bg-black">
+    <div className="flex w-full flex-col bg-white dark:bg-black">
       <Header />
-      <div className="relative mx-auto w-full max-w-8xl rounded-xl bg-white lg:mt-[92px]">
+      <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 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-10rem)] w-64 overflow-y-auto overflow-x-hidden py-16 pl-0.5 xl:w-72 xl:pr-8">
+            <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>

diff --git a/src/components/PrevNextLinks.tsx b/src/components/PrevNextLinks.tsx
@@ -70,7 +70,7 @@ export function PrevNextLinks() {
   }
 
   return (
-    <dl className="mt-5 flex border-t border-slate-200 pt-5 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
@@ -446,8 +446,8 @@ export function Search() {
         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>

diff --git a/src/components/ThemeSelector.tsx b/src/components/ThemeSelector.tsx
@@ -50,13 +50,13 @@ export function ThemeSelector(
     <Listbox as="div" value={theme} onChange={setTheme} {...props}>
       <Listbox.Label className="sr-only">Theme</Listbox.Label>
       <Listbox.Button
-        className="flex h-6 w-6 items-center justify-center rounded-lg shadow-md shadow-black/5 ring-1 ring-black/5 dark:bg-slate-700 dark:ring-inset dark:ring-white/5"
+        className="flex h-6 w-6 items-center justify-center rounded-lg shadow-md shadow-black/5 ring-1 ring-black/5 dark:ring-inset dark:ring-gray-600"
         aria-label="Theme"
       >
-        <LightIcon className="h-4 w-4 fill-pink-400 dark:hidden" />
-        <DarkIcon className="hidden h-4 w-4 fill-pink-400 dark:block" />
+        <LightIcon className="h-4 w-4 fill-pink dark:hidden" />
+        <DarkIcon className="hidden h-4 w-4 fill-pink dark:block" />
       </Listbox.Button>
-      <Listbox.Options className="absolute left-1/2 top-full mt-5 w-36 -translate-x-1/2 space-y-1 rounded-xl bg-white p-3 text-sm font-medium shadow-md shadow-black/5 ring-1 ring-black/5 dark:bg-slate-800 dark:ring-white/5">
+      <Listbox.Options className="absolute left-1/2 top-full mt-5 w-36 -translate-x-1/2 space-y-1 rounded-xl bg-white p-3 text-sm font-medium shadow-md shadow-black/5 ring-1 ring-black/5 dark:bg-black dark:ring-white/5">
         {themes.map((theme) => (
           <Listbox.Option
             key={theme.value}
@@ -66,22 +66,22 @@ export function ThemeSelector(
                 "flex cursor-pointer select-none items-center rounded-[0.625rem] p-1",
                 {
                   "text-pink-500": selected,
-                  "text-slate-900 dark:text-white": active && !selected,
-                  "text-slate-700 dark:text-slate-400": !active && !selected,
-                  "bg-slate-100 dark:bg-slate-900/40": active,
+                  "text-black dark:text-white": active && !selected,
+                  "text-gray-600": !active && !selected,
+                  "bg-slate-100 dark:bg-slate-600/40": active,
                 },
               )
             }
           >
             {({ selected }) => (
               <>
-                <div className="rounded-md bg-white p-1 shadow ring-1 ring-slate-900/5 dark:bg-slate-700 dark:ring-inset dark:ring-white/5">
+                <div className="rounded-md bg-white p-1 shadow ring-1 ring-slate-900/5 dark:bg-black dark:ring-inset dark:ring-gray-600">
                   <theme.icon
                     className={clsx(
                       "h-4 w-4",
                       selected
-                        ? "fill-pink-400 dark:fill-pink-400"
-                        : "fill-slate-400",
+                        ? "fill-pink-400 dark:fill-pink"
+                        : "fill-gray-600",
                     )}
                   />
                 </div>

diff --git a/src/components/shared/article/Rate.tsx b/src/components/shared/article/Rate.tsx
@@ -0,0 +1,24 @@
+import Link from "next/link";
+import LikeIcon from "@/components/svgs/like.svg";
+import DislikeIcon from "@/components/svgs/dislike.svg";
+import clsx from "classnames";
+
+export default function ArticleRate() {
+  const linkClassName = "btn btn-tertiary-dark flex items-center";
+
+  return (
+    <div className="flex items-center pt-[60px]">
+      <h4 className="pr-5 text-2xl text-white dark:text-black">
+        Was this article helpful?
+      </h4>
+      <Link className={clsx(linkClassName, "mr-2.5")} href={"#"}>
+        Yes
+        <LikeIcon />
+      </Link>
+      <Link className={linkClassName} href={"#"}>
+        No
+        <DislikeIcon />
+      </Link>
+    </div>
+  );
+}
diff --git a/src/components/shared/article/Support.tsx b/src/components/shared/article/Support.tsx
@@ -0,0 +1,32 @@
+import Link from "next/link";
+import ContactIcon from "@/components/svgs/contact.svg";
+import ChangelogIcon from "@/components/svgs/changelog.svg";
+
+export default function ArticleSupport() {
+  const linkClassName =
+    "font-bold tracking-wider text-pink transition-colors hover:text-pink-hover";
+
+  return (
+    <div className="mt-[60px] flex flex-col justify-center gap-y-2.5 rounded-lg px-5 py-3.5 text-sm leading-6 ring-1 ring-gray-500">
+      <div className="flex gap-x-2.5">
+        <ContactIcon />
+        <span>Do you have any questions?</span>
+        <a className={linkClassName} href="mailto:[email protected]">
+          Contact us
+        </a>
+      </div>
+      <div className="flex gap-x-2.5">
+        <ChangelogIcon />
+        <span>Check out our</span>
+        <Link
+          target="_blank"
+          rel="noopener noreferrer"
+          href="https://zuplo.com/changelog"
+          className={linkClassName}
+        >
+          product changelog
+        </Link>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/svgs/changelog.svg b/src/components/svgs/changelog.svg
diff --git a/src/components/svgs/chevron-down.svg b/src/components/svgs/chevron-down.svg
diff --git a/src/components/svgs/chevron-right.svg b/src/components/svgs/chevron-right.svg
diff --git a/src/components/svgs/contact.svg b/src/components/svgs/contact.svg
diff --git a/src/components/svgs/dislike.svg b/src/components/svgs/dislike.svg
diff --git a/src/components/svgs/like.svg b/src/components/svgs/like.svg
diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
@@ -75,7 +75,7 @@
     @apply bg-pink text-white hover:bg-black;
   }
   .btn.btn-primary-dark {
-    @apply bg-pink text-white hover:bg-white hover:text-black;
+    @apply bg-pink text-white hover:bg-pink-hover dark:hover:bg-white dark:hover:text-black;
   }
   .btn.btn-large {
     @apply rounded-xl px-12 py-5 text-base;
@@ -86,6 +86,9 @@
   .btn.btn-secondary-dark {
     @apply border border-gray-600 bg-transparent text-white hover:bg-[#ffffff59];
   }
+  .btn.btn-tertiary-dark {
+    @apply bg-pink text-white hover:bg-pink-hover;
+  }
   .input {
     @apply w-full rounded-2xl border border-gray-500 text-lg transition-all placeholder:font-light placeholder:text-gray-600 hover:border-2 hover:border-pink focus:outline-0;
   }

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -57,7 +57,7 @@ export default {
         },
         gray: {
           DEFAULT: "#EDEDED",
-          400: "#EDEDED",
+          400: "#1B1B1B",
           500: "#D9D9D9",
           600: "#808080",
         },
@@ -119,11 +119,6 @@ export default {
             h3: typographyHeading({ fontSize: "20px" }),
             h4: typographyHeading({ fontSize: "18px" }),
             h5: typographyHeading({ fontSize: "14px" }),
-            li: {
-              "&::marker": {
-                color: "black",
-              },
-            },
             "code::before": {
               content: null,
             },
@@ -132,6 +127,18 @@ export default {
             },
             "blockquote p:first-of-type::before": { content: "none" },
             "blockquote p:first-of-type::after": { content: "none" },
+            "--tw-prose-body": theme("colors.white"),
+            "--tw-prose-invert-body": theme("colors.black"),
+            "--tw-prose-code": theme("colors.white"),
+            "--tw-prose-invert-code": theme("colors.black"),
+            "--tw-prose-bold": theme("colors.white"),
+            "--tw-prose-invert-bold": theme("colors.black"),
+            "--tw-prose-headings": theme("colors.white"),
+            "--tw-prose-invert-headings": theme("colors.black"),
+            "--tw-prose-bullets": theme("colors.white"),
+            "--tw-prose-invert-bullets": theme("colors.black"),
+            "--tw-prose-counters": theme("colors.white"),
+            "--tw-prose-invert-counters": theme("colors.black"),
           },
         },
       }),
@@ -155,7 +162,7 @@ export default {
       widest: ".3em",
     },
     textShadow: {
-      DEFAULT: "0.5px 0 #CC0797",
+      DEFAULT: "0.5px 0 #FF00BD",
     },
   },
   plugins: [