fix(docs): header / footer background (vercel#174)

lucas8 · Oct 21, 2022 · d082259 · d082259
1 parent 5fb1e9d
commit d082259
Show file tree

Hide file tree

Showing 9 changed files with 51 additions and 40 deletions.
diff --git a/docs/components/Footer.tsx b/docs/components/Footer.tsx
@@ -73,7 +73,7 @@ const navigation = {
 
 export function FooterContent() {
   return (
-    <footer className="" aria-labelledby="footer-heading">
+    <div aria-labelledby="footer-heading">
       <h2 id="footer-heading" className="sr-only">
         Footer
       </h2>
@@ -170,7 +170,7 @@ export function FooterContent() {
           </div>
         </div>
       </div>
-    </footer>
+    </div>
   );
 }
 

diff --git a/docs/components/Navigation.tsx b/docs/components/Navigation.tsx
@@ -28,7 +28,7 @@ function Navigation(props) {
   });
 
   // Inject showcase link when ON root
-  if (router.asPath === "/") {
+  if (router.asPath === "/" || router.asPath === "/showcase") {
     headerItems.unshift({
       title: "Showcase",
       type: "page",

diff --git a/docs/components/Social.tsx b/docs/components/Social.tsx
@@ -1,12 +1,10 @@
 import { DiscordIcon, GitHubIcon } from "nextra/icons";
-import { useConfig } from "nextra-theme-docs";
 
 function Github() {
-  const { project } = useConfig();
   return (
     <a
-      href={project.link}
-      className="hidden sm:flex p-2 text-current"
+      href="https://github.com/vercel/turbo"
+      className="hidden sm:flex p-2 text-current hover:opacity-75"
       target="_blank"
       rel="noreferrer"
     >
@@ -17,11 +15,10 @@ function Github() {
 }
 
 function Discord() {
-  const { chat } = useConfig();
   return (
     <a
-      href={chat.link}
-      className="hidden sm:flex p-2 text-current"
+      href="https://turborepo.org/discord"
+      className="hidden sm:flex p-2 text-current hover:opacity-75"
       target="_blank"
       rel="noreferrer"
     >

diff --git a/docs/components/pages/home-shared/GlobalStyles.tsx b/docs/components/pages/home-shared/GlobalStyles.tsx
@@ -0,0 +1,20 @@
+import Head from "next/head";
+
+export function LandingPageGlobalStyles() {
+  return (
+    <Head>
+      <style>
+        {`
+          .dark footer,
+          .dark body {
+            background-color: black !important;
+          }
+
+          .dark .nextra-nav-container .nextra-nav-container-blur  {
+            background-color: rgba(0,0,0,.5) !important;
+          }
+    `}
+      </style>
+    </Head>
+  );
+}
diff --git a/docs/components/pages/landing/index.tsx b/docs/components/pages/landing/index.tsx
@@ -1,14 +1,17 @@
+import React from "react";
 import Head from "next/head";
+import cn from "classnames";
+import Link from "next/link";
+import { AnimatePresence, motion } from "framer-motion";
+
 import { Clients } from "../../clients/Clients";
 import { Marquee } from "../../clients/Marquee";
 import { TurboheroBackground } from "./TurboHeroBackground";
 import { Turborepo } from "./Turborepo";
-import styles from "./index.module.css";
 import { Turbopack } from "./Turbopack";
-import React from "react";
-import cn from "classnames";
-import Link from "next/link";
-import { AnimatePresence, motion } from "framer-motion";
+import { LandingPageGlobalStyles } from "../home-shared/GlobalStyles";
+
+import styles from "./index.module.css";
 
 function Background() {
   return (
@@ -108,7 +111,7 @@ function SiteCards() {
           className="turborepoCardBg"
         >
           <p className="text-lg !w-[280px] md:!w-[340px] font-space-grotesk text-center opacity-50 dark:opacity-70">
-            High-performance task runner for JavaScript and TypeScript
+            High-performance build system for JavaScript and TypeScript
             codebases.
           </p>
         </Card>
@@ -149,19 +152,16 @@ function LandingPage() {
     <>
       <Head>
         <title>Turbo</title>
-        <meta
-          name="og:description"
-          content="Turbo is an incremental, distributed bundler and task runner optimized for JavaScript and TypeScript, written in Rust."
-        />
       </Head>
+      <LandingPageGlobalStyles />
       <div className="relative flex flex-col items-center justify-center w-full h-full  overflow-hidden [--geist-foreground:#fff] dark:[--geist-foreground:#000] [--gradient-stop-1:0px] [--gradient-stop-2:120px] sm:[--gradient-stop-1:0px] sm:[--gradient-stop-2:120px]">
         <Background />
         <div className="z-100 w-full h-full flex flex-col items-center justify-center">
           <h1 className="mt-12 lg:!mt-20 mx-6 w-[300px] md:!w-full font-extrabold text-5xl lg:text-6xl leading-tight text-center mb-4 bg-clip-text text-transparent bg-gradient-to-b from-black/80 to-black dark:from-white dark:to-[#AAAAAA]">
             Make Ship Happen
           </h1>
           <p className="mx-6 text-xl w-[315px] md:w-[615px] md:text-2xl font-space-grotesk text-center text-[#666666] dark:text-[#888888]">
-            Turbo is an incremental, distributed bundler and task runner
+            Turbo is an incremental, distributed bundler and build system
             optimized for JavaScript and TypeScript, written in Rust.
           </p>
           <SiteCards />

diff --git a/docs/components/pages/pack-home/index.tsx b/docs/components/pages/pack-home/index.tsx
@@ -1,24 +1,19 @@
 import Head from "next/head";
-import { Toaster } from "react-hot-toast";
+
 import { PackBenchmarks } from "./PackBenchmarks";
 import { PackHero } from "./PackHero";
 import { PackLetter } from "./PackLetter";
 import { PackFeatures } from "./PackFeatures";
 import { GradientSectionBorder } from "../home-shared/GradientSectionBorder";
+import { LandingPageGlobalStyles } from "../home-shared/GlobalStyles";
 
 export default function Home() {
   return (
     <>
       <Head>
         <title>Turbopack</title>
-        <style>
-          {`
-            .dark body {
-              background-color: black !important;
-            }
-          `}
-        </style>
       </Head>
+      <LandingPageGlobalStyles />
       <PackHero />
       <GradientSectionBorder>
         <PackBenchmarks />
@@ -27,7 +22,6 @@ export default function Home() {
       <GradientSectionBorder>
         <PackLetter />
       </GradientSectionBorder>
-      <Toaster position="bottom-right" />
     </>
   );
 }
diff --git a/docs/components/pages/repo-home/RepoHero.tsx b/docs/components/pages/repo-home/RepoHero.tsx
@@ -83,12 +83,12 @@ export function RepoHero() {
             TURBOREPO
           </h3>
           <HeroText>
-            A task runner that
+            The build system that
             <br />
             makes ship happen
           </HeroText>
           <SectionSubtext hero>
-            Turborepo is a high-performance task runner for JavaScript and
+            Turborepo is a high-performance build system for JavaScript and
             TypeScript codebases.
           </SectionSubtext>
         </FadeIn>

diff --git a/docs/components/pages/repo-home/index.tsx b/docs/components/pages/repo-home/index.tsx
@@ -1,23 +1,19 @@
 import Head from "next/head";
 import { Toaster } from "react-hot-toast";
+
 import { RepoHero } from "./RepoHero";
-import { GradientSectionBorder } from "../home-shared/GradientSectionBorder";
 import { RepoFeatures } from "./RepoFeatures";
 import { RepoLetter } from "./RepoLetter";
+import { GradientSectionBorder } from "../home-shared/GradientSectionBorder";
+import { LandingPageGlobalStyles } from "../home-shared/GlobalStyles";
 
 export default function Home() {
   return (
     <>
       <Head>
         <title>Turborepo</title>
-        <style>
-          {`
-            .dark body {
-              background-color: black !important;
-            }
-          `}
-        </style>
       </Head>
+      <LandingPageGlobalStyles />
       <RepoHero />
       <GradientSectionBorder>
         <RepoFeatures />

diff --git a/docs/pages/_document.tsx b/docs/pages/_document.tsx
@@ -14,6 +14,10 @@ class MyDocument extends Document {
     return (
       <Html>
         <Head>
+          <meta
+            name="og:description"
+            content="Turbo is an incremental, distributed bundler and build system optimized for JavaScript and TypeScript, written in Rust."
+          />
           <link rel="preconnect" href="https://fonts.googleapis.com" />
           <link
             rel="preconnect"