Make docs wiiiider

Effect-TS · Dec 21, 2023 · a46a800 · a46a800
1 parent 5e4b9e3
commit a46a800
Show file tree

Hide file tree

Showing 10 changed files with 205 additions and 109 deletions.
diff --git a/src/app/blog/[slug]/page.tsx b/src/app/blog/[slug]/page.tsx
@@ -3,6 +3,7 @@ import { MDX } from "@/components/atoms/mdx"
 import { RelatedPosts } from "@/components/blog/related-posts"
 import { TableOfContents } from "@/components/docs/table-of-contents"
 import { Icon } from "@/components/icons"
+import { Navigation } from "@/components/layout/navigation"
 import { allBlogPosts } from "contentlayer/generated"
 import { format } from "date-fns"
 import Link from "next/link"
@@ -29,43 +30,49 @@ export default function Page({
   if (!post) notFound()
 
   return (
-    <div className="relative w-full max-w-screen-xl mx-auto px-4 sm:px-8 lg:px-16 flex items-start pt-32 sm:pt-40 min-h-screen">
-      <aside className="hidden md:flex shrink-0 sticky top-32 sm:top-40 mb-16 flex-col w-64">
-        <div className="text-black dark:text-white uppercase text-sm font-semibold h-8 flex items-end mb-9">
-          {post.authors.length > 1 ? "Authors" : "Author"}
-        </div>
-        {post.authors.map((author, index) => (
-          <Author key={index} {...author} />
-        ))}
-      </aside>
-      <main className="md:px-12 pb-24 -mt-2 grow">
-        <div className="flex gap-2 items-center -mt-5 mb-1 h-4 text-sm">
-          <Link href="/blog" className="hover:text-black dark:hover:text-white">
-            Blog
-          </Link>
-          <Icon
-            name={"chevron-right"}
-            className="h-2.5 text-zinc-400 dark:text-zinc-600"
-          />
-        </div>
-        <h2 className="font-display text-2xl sm:text-3xl lg:text-4xl text-black dark:text-white">
-          {post.title}
-        </h2>
-        <div className="text-sm h-4 mt-1.5 mb-6">
-          {format(new Date(post.date), "MMM do, yyyy")}
-        </div>
-        <MDX content={post.body.code} />
-        <aside className="md:hidden mt-12">
+    <>
+      <Navigation themeSwitcher />
+      <div className="relative w-full max-w-screen-xl mx-auto px-4 sm:px-8 lg:px-16 flex items-start pt-32 sm:pt-40 min-h-screen">
+        <aside className="hidden md:flex shrink-0 sticky top-32 sm:top-40 mb-16 flex-col w-64">
           <div className="text-black dark:text-white uppercase text-sm font-semibold h-8 flex items-end mb-9">
             {post.authors.length > 1 ? "Authors" : "Author"}
           </div>
           {post.authors.map((author, index) => (
             <Author key={index} {...author} />
           ))}
         </aside>
-        {post.relatedPosts && <RelatedPosts slugs={post.relatedPosts} />}
-      </main>
-      <TableOfContents elements={post.headings} />
-    </div>
+        <main className="md:px-12 pb-24 -mt-2 grow">
+          <div className="flex gap-2 items-center -mt-5 mb-1 h-4 text-sm">
+            <Link
+              href="/blog"
+              className="hover:text-black dark:hover:text-white"
+            >
+              Blog
+            </Link>
+            <Icon
+              name={"chevron-right"}
+              className="h-2.5 text-zinc-400 dark:text-zinc-600"
+            />
+          </div>
+          <h2 className="font-display text-2xl sm:text-3xl lg:text-4xl text-black dark:text-white">
+            {post.title}
+          </h2>
+          <div className="text-sm h-4 mt-1.5 mb-6">
+            {format(new Date(post.date), "MMM do, yyyy")}
+          </div>
+          <MDX content={post.body.code} />
+          <aside className="md:hidden mt-12">
+            <div className="text-black dark:text-white uppercase text-sm font-semibold h-8 flex items-end mb-9">
+              {post.authors.length > 1 ? "Authors" : "Author"}
+            </div>
+            {post.authors.map((author, index) => (
+              <Author key={index} {...author} />
+            ))}
+          </aside>
+          {post.relatedPosts && <RelatedPosts slugs={post.relatedPosts} />}
+        </main>
+        <TableOfContents elements={post.headings} />
+      </div>
+    </>
   )
 }
diff --git a/src/app/blog/page.tsx b/src/app/blog/page.tsx
@@ -1,4 +1,5 @@
 import { Icon } from "@/components/icons"
+import { Navigation } from "@/components/layout/navigation"
 import { allBlogPosts } from "contentlayer/generated"
 import { format } from "date-fns"
 import { Metadata } from "next"
@@ -18,43 +19,66 @@ export const metadata: Metadata = {
 
 export default function Blog() {
   return (
-    <main className="docs-container relative w-full max-w-screen-xl mx-auto px-4 sm:px-8 lg:px-16 pb-24 pt-32 sm:pt-40 min-h-screen">
-      <h2 className="font-display text-2xl sm:text-3xl lg:text-4xl text-black dark:text-white">{content.heading}</h2>
-      <p className="mt-6 mb-12 max-w-xl">{content.description}</p>
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-        {allBlogPosts.map(({ title, excerpt, urlPath, authors, date }, index) => (
-          <Link href={urlPath} key={index} className="bg-gradient-to-br from-zinc-50 to-zinc-100 dark:from-zinc-800 dark:to-zinc-900 rounded-2xl p-6">
-            <div className="flex items-start justify-between">
-              <h3 className="font-display text-2xl text-black dark:text-white">{title}</h3>
-              <div className="text-sm shrink-0 mt-1.5">{format(new Date(date), "MMM do, yyyy")}</div>
-            </div>
-            <div className="flex pl-2 items-center mt-4">
-              {authors.map(({ avatar, name }, index) => (
-                <div key={index} className="h-6 w-6 rounded-full relative overflow-hidden -ml-2 border border-black dark:border-white shadow">
-                  <Image src={avatar} alt={name} fill />
+    <>
+      <Navigation themeSwitcher />
+      <main className="docs-container relative w-full max-w-screen-xl mx-auto px-4 sm:px-8 lg:px-16 pb-24 pt-32 sm:pt-40 min-h-screen">
+        <h2 className="font-display text-2xl sm:text-3xl lg:text-4xl text-black dark:text-white">
+          {content.heading}
+        </h2>
+        <p className="mt-6 mb-12 max-w-xl">{content.description}</p>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          {allBlogPosts.map(
+            ({ title, excerpt, urlPath, authors, date }, index) => (
+              <Link
+                href={urlPath}
+                key={index}
+                className="bg-gradient-to-br from-zinc-50 to-zinc-100 dark:from-zinc-800 dark:to-zinc-900 rounded-2xl p-6"
+              >
+                <div className="flex items-start justify-between">
+                  <h3 className="font-display text-2xl text-black dark:text-white">
+                    {title}
+                  </h3>
+                  <div className="text-sm shrink-0 mt-1.5">
+                    {format(new Date(date), "MMM do, yyyy")}
+                  </div>
                 </div>
-              ))}
-              <div className="text-sm ml-2">
-                <span>By </span>
-                {authors.map(({ name }, index) => (
-                  <>
-                    {index === authors.length - 1 && <span>and </span>}
-                    {index > 0 && index < authors.length - 1 && <span>, </span>}
-                    <span key={index} className="text-black dark:text-white">
-                      {name}{" "}
-                    </span>
-                  </>
-                ))}
-              </div>
-            </div>
-            <p className="mt-8">{excerpt}</p>
-            <p className="flex items-center gap-2 text-black font-normal dark:font-light dark:text-white mt-4">
-              <span>Read more</span>
-              <Icon name="arrow-right" className="h-3.5" />
-            </p>
-          </Link>
-        ))}
-      </div>
-    </main>
+                <div className="flex pl-2 items-center mt-4">
+                  {authors.map(({ avatar, name }, index) => (
+                    <div
+                      key={index}
+                      className="h-6 w-6 rounded-full relative overflow-hidden -ml-2 border border-black dark:border-white shadow"
+                    >
+                      <Image src={avatar} alt={name} fill />
+                    </div>
+                  ))}
+                  <div className="text-sm ml-2">
+                    <span>By </span>
+                    {authors.map(({ name }, index) => (
+                      <>
+                        {index === authors.length - 1 && <span>and </span>}
+                        {index > 0 && index < authors.length - 1 && (
+                          <span>, </span>
+                        )}
+                        <span
+                          key={index}
+                          className="text-black dark:text-white"
+                        >
+                          {name}{" "}
+                        </span>
+                      </>
+                    ))}
+                  </div>
+                </div>
+                <p className="mt-8">{excerpt}</p>
+                <p className="flex items-center gap-2 text-black font-normal dark:font-light dark:text-white mt-4">
+                  <span>Read more</span>
+                  <Icon name="arrow-right" className="h-3.5" />
+                </p>
+              </Link>
+            )
+          )}
+        </div>
+      </main>
+    </>
   )
 }
diff --git a/src/app/docs/[...slug]/page.tsx b/src/app/docs/[...slug]/page.tsx
@@ -43,7 +43,7 @@ export default function Page({
 
   return (
     <>
-      <main className="relative z-10 shrink grow md:pl-12 xl:pr-12 pb-24 -mt-2">
+      <main className="relative z-10 shrink md:pl-12 xl:pr-12 pb-24 -mt-2">
         <Breadcrumbs elements={breadcrumbs} />
         <div className="flex items-start">
           <MobileNavigation className="mt-2 md:hidden" />

diff --git a/src/app/docs/layout.tsx b/src/app/docs/layout.tsx
@@ -1,11 +1,15 @@
-import { Navigation } from "@/components/docs/navigation"
+import { Navigation as DocsNavigation } from "@/components/docs/navigation"
+import { Navigation } from "@/components/layout/navigation"
 import { ReactNode } from "react"
 
 export default function RootLayout({ children }: { children: ReactNode }) {
   return (
-    <div className="docs-container relative w-full max-w-screen-xl mx-auto px-4 sm:px-8 lg:px-16 flex items-start min-h-screen pt-24 sm:pt-40">
-      <Navigation className="hidden md:flex" />
-      {children}
-    </div>
+    <>
+      <Navigation wide themeSwitcher />
+      <div className="docs-container relative w-full max-w-screen-2xl mx-auto px-4 sm:px-8 lg:px-16 flex items-start justify-between min-h-screen pt-24 sm:pt-40">
+        <DocsNavigation className="hidden md:flex" />
+        {children}
+      </div>
+    </>
   )
 }
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -102,32 +102,44 @@ body.no-scroll {
   .docs-container main {
     scroll-padding-top: 10rem;
   }
-  .docs-container .prose {
+  .docs-container .prose,
+  .docs-container .pagination {
     max-width: calc(100vw - 4rem);
   }
 }
 
 /* breakpoint md */
 @media (min-width: 768px) {
-  .docs-container .prose {
+  .docs-container .prose,
+  .docs-container .pagination {
     max-width: calc(100vw - 21rem);
   }
 }
 
 /* breakpoint lg */
 @media (min-width: 1024px) {
-  .docs-container .prose {
+  .docs-container .prose,
+  .docs-container .pagination {
     max-width: calc(100vw - 25rem);
   }
 }
 
-/* breakpoint lg */
+/* breakpoint xl */
 @media (min-width: 1280px) {
-  .docs-container .prose {
+  .docs-container .prose,
+  .docs-container .pagination {
     @apply max-w-2xl;
   }
 }
 
+/* breakpoint 2xl */
+@media (min-width: 1536px) {
+  .docs-container .prose,
+  .docs-container .pagination {
+    @apply max-w-3xl;
+  }
+}
+
 /* Algolia instant search */
 .ais-SearchBox {
   @apply w-full;

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -33,7 +33,7 @@ export default function RootLayout({ children }: { children: ReactNode }) {
       lang="en"
       className={`relative ${inter.variable} ${calSans.variable}`}
     >
-      <body className="relative overflow-x-hidden relative antialiased font-light bg-white dark:bg-[#09090B] text-zinc-700 dark:text-zinc-400">
+      <body className="relative overflow-x-hidden antialiased font-light bg-white dark:bg-[#09090B] text-zinc-700 dark:text-zinc-400">
         <Script
           id="check-theme"
           strategy="beforeInteractive"
@@ -48,7 +48,6 @@ export default function RootLayout({ children }: { children: ReactNode }) {
           }}
         />
 
-        <Navigation />
         {children}
         <Footer />
       </body>

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,3 +1,4 @@
+import { Navigation } from "@/components/layout/navigation"
 import { Catch } from "@/components/sections/catch"
 import { Community } from "@/components/sections/community"
 import { Complexity } from "@/components/sections/complexity"
@@ -13,19 +14,22 @@ import { Tweets } from "@/components/sections/tweets"
 
 export default function HomePage() {
   return (
-    <main className="dark bg-[#09090B] text-zinc-400 w-full overflow-x-hidden min-h-screen relative pt-16 sm:pt-24">
-      <Hero />
-      <TechLogos />
-      <Complexity />
-      <JSSurvey />
-      <Features />
-      <Examples />
-      <Screenshots />
-      <Tweets />
-      <Catch />
-      <FAQ />
-      <Community />
-      <CTA />
-    </main>
+    <>
+      <Navigation searchBox />
+      <main className="dark bg-[#09090B] text-zinc-400 w-full overflow-x-hidden min-h-screen relative pt-16 sm:pt-24">
+        <Hero />
+        <TechLogos />
+        <Complexity />
+        <JSSurvey />
+        <Features />
+        <Examples />
+        <Screenshots />
+        <Tweets />
+        <Catch />
+        <FAQ />
+        <Community />
+        <CTA />
+      </main>
+    </>
   )
 }
diff --git a/src/components/atoms/mdx.tsx b/src/components/atoms/mdx.tsx
@@ -15,7 +15,7 @@ export const MDX: FC<{ content: string }> = ({ content }) => {
   const Content = useMDXComponent(content)
 
   return (
-    <div className="relative prose prose-headings:font-display dark:prose-invert prose-headings:text-black dark:prose-headings:text-white prose-tr:border-zinc-200 dark:prose-tr:border-white/20 prose-thead:text-base prose-thead:font-sans prose-thead:border-zinc-200 dark:prose-thead:border-white/20 text-zinc-700 dark:text-zinc-400 prose-li:my-1">
+    <div className="relative prose max-w-lg prose-headings:font-display dark:prose-invert prose-headings:text-black dark:prose-headings:text-white prose-tr:border-zinc-200 dark:prose-tr:border-white/20 prose-thead:text-base prose-thead:font-sans prose-thead:border-zinc-200 dark:prose-thead:border-white/20 text-zinc-700 dark:text-zinc-400 prose-li:my-1">
       <Content
         components={{
           h2: H2,

diff --git a/src/components/docs/pagination.tsx b/src/components/docs/pagination.tsx
@@ -11,16 +11,32 @@ export const Pagination: FC<{ path: string }> = ({ path }) => {
     .slice(0, length - 1)
     .join("/")
   const pages = allDocsPages
-    .filter((page) => page.urlPath.startsWith(parentPath) && page.urlPath.split("/").length === length && page.order > 0)
-    .map((page) => ({ title: page.title, urlPath: page.urlPath, order: page.order }))
-  const prev = pages.filter((page) => page.order < currentPage.order).sort((pageA, pageB) => pageB.order - pageA.order)[0]
-  const next = pages.sort((pageA, pageB) => pageA.order - pageB.order).filter((page) => page.order > currentPage.order)[0]
+    .filter(
+      (page) =>
+        page.urlPath.startsWith(parentPath) &&
+        page.urlPath.split("/").length === length &&
+        page.order > 0
+    )
+    .map((page) => ({
+      title: page.title,
+      urlPath: page.urlPath,
+      order: page.order
+    }))
+  const prev = pages
+    .filter((page) => page.order < currentPage.order)
+    .sort((pageA, pageB) => pageB.order - pageA.order)[0]
+  const next = pages
+    .sort((pageA, pageB) => pageA.order - pageB.order)
+    .filter((page) => page.order > currentPage.order)[0]
 
   return (
-    <div className="flex w-full justify-between max-w-[65ch]">
+    <div className="pagination flex w-full justify-between">
       <div>
         {prev && (
-          <Link href={prev.urlPath} className="hover:bg-zinc-100 dark:hover:bg-zinc-900 p-3 -mr-3 -mt-3 block rounded-xl">
+          <Link
+            href={prev.urlPath}
+            className="hover:bg-zinc-100 dark:hover:bg-zinc-900 p-3 -mr-3 -mt-3 block rounded-xl"
+          >
             <div className="text-sm flex justify-start gap-1.5 items-center text-zinc-500 dark:text-zinc-400">
               <Icon name="arrow-right" className="h-3 rotate-180" />
               <span>Prev</span>
@@ -31,7 +47,10 @@ export const Pagination: FC<{ path: string }> = ({ path }) => {
       </div>
       <div>
         {next && (
-          <Link href={next.urlPath} className="hover:bg-zinc-100 dark:hover:bg-zinc-900 p-3 -mr-3 -mt-3 block rounded-xl">
+          <Link
+            href={next.urlPath}
+            className="hover:bg-zinc-100 dark:hover:bg-zinc-900 p-3 -mr-3 -mt-3 block rounded-xl"
+          >
             <div className="text-sm flex justify-end gap-1.5 items-center text-zinc-500 dark:text-zinc-400">
               <span>Next</span>
               <Icon name="arrow-right" className="h-3" />