New site implementation

new-site/app/components/ButtonLink.js

@@ -0,0 +1,30 @@
+import { Link } from "blitz"
+import { BsArrowRight } from "react-icons/bs"
+
+const ButtonLink = ({ className, children, href, variant = "solid", ...props }) => {
+  let classes = "flex items-center justify-center py-2 px-3 font-secondary text-base font-bold"
+
+  switch (variant) {
+    case "solid":
+      classes += " bg-white text-off-black"
+      break
+    case "solid-dark":
+      classes += " bg-purple-light text-white"
+      break
+    case "outline":
+      classes += " border border-white text-white"
+      break
+    default:
+      throw new Error("Invalid variant value: " + variant)
+  }
+
+  return (
+    <Link href={href}>
+      <a className={`${classes} ${className}`} {...props}>
+        {children} <BsArrowRight size="1.5rem" className="ml-2" />
+      </a>
+    </Link>
+  )
+}
+
+export { ButtonLink }

new-site/app/components/Header.js

@@ -1,49 +1,87 @@
+import { useState, useEffect } from "react"
 import Link from "next/link"
 import { Search } from "@/components/Search"
 import clsx from "clsx"
+import Logo from "@/components/Logo"
 import Router from "next/router"
-import { Logo } from "@/components/Logo"
 
-export function Header({ navIsOpen, onNavToggle }) {
+const Header = () => {
+  let [isOpen, setIsOpen] = useState(false)
+
+  useEffect(() => {
+    if (!isOpen) return
+    function handleRouteChange() {
+      setIsOpen(false)
+    }
+    Router.events.on("routeChangeComplete", handleRouteChange)
+    return () => {
+      Router.events.off("routeChangeComplete", handleRouteChange)
+    }
+  }, [isOpen])
+
+  const onToggle = () => {
+    setIsOpen(!isOpen)
+  }
+
   return (
     <>
-      <div className="sticky top-0 z-40 lg:z-50 w-full max-w-8xl mx-auto bg-white flex-none flex">
-        <div className="flex-none pl-4 sm:pl-6 xl:pl-8 flex items-center border-b border-gray-200 lg:border-b-0 lg:w-60 xl:w-72">
+      <div className="sticky top-0 z-40 grid grid-cols-2 lg:z-50 max-w-8xl">
+        <div className="sm:pl-6 xl:pl-8 lg:border-b-0 lg:w-60 xl:w-72">
           <Link href="/">
-            <a
-              className="overflow-hidden w-10 md:w-auto"
-              onContextMenu={(e) => {
-                e.preventDefault()
-                Router.push("/brand")
-              }}
-            >
-              <span className="sr-only">Tailwind CSS home page</span>
-              <Logo className="w-auto h-6" />
+            <a className="w-10 overflow-hidden md:w-auto">
+              <span className="sr-only">Blitz home page</span>
+              <Logo className="w-auto h-12 py-2 fill-current" />
             </a>
           </Link>
         </div>
-        <div className="flex-auto border-b border-gray-200 h-18 flex items-center justify-between px-4 sm:px-6 lg:mx-6 lg:px-0 xl:mx-8">
+        <div className="flex justify-self-end sm:px-6 lg:mx-6 lg:px-0 xl:mx-8">
           <Search />
-          <div className="flex items-center space-x-6">
-            <a
-              href="https://github.com/tailwindlabs/tailwindcss"
-              className="text-gray-400 hover:text-gray-500 transition-colors duration-200"
+          <button
+            onClick={onToggle}
+            class="inline-block text-gray-500 hover:text-white focus:text-white focus:outline-none ml-3"
+          >
+            <svg
+              width="24"
+              height="18"
+              viewBox="0 0 24 18"
+              xmlns="http://www.w3.org/2000/svg"
+              className="w-6 h-6 fill-current"
             >
-              <span className="sr-only">Tailwind CSS on GitHub</span>
-              <svg width="20" height="20" viewBox="0 0 16 16" fill="currentColor">
-                <path
-                  fillRule="evenodd"
-                  d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"
-                />
-              </svg>
+              <path d="M1 1H23" stroke="white" stroke-width="1.5" stroke-linecap="square" />
+              <path d="M1 9L23 9" stroke="white" stroke-width="1.5" stroke-linecap="square" />
+              <path d="M1 17H23" stroke="white" stroke-width="1.5" stroke-linecap="square" />
+            </svg>
+          </button>
+        </div>
+
+        {isOpen && (
+          <div className="col-span-2 px-4 py-3">
+            <a href="" className="block px-2 py-1 font-semibold rounded hover:bg-purple-light">
+              Docs
+            </a>
+            <a href="" className="block px-2 py-1 mt-1 font-semibold rounded hover:bg-purple-light">
+              GitHub
+            </a>
+            <a href="" className="block px-2 py-1 mt-1 font-semibold rounded hover:bg-purple-light">
+              Releases
+            </a>
+            <a href="" className="block px-2 py-1 mt-1 font-semibold rounded hover:bg-purple-light">
+              Slack
+            </a>
+            <a href="" className="block px-2 py-1 mt-1 font-semibold rounded hover:bg-purple-light">
+              Forum
+            </a>
+            <a href="" className="block px-2 py-1 mt-1 font-semibold rounded hover:bg-purple-light">
+              Donate/Sponsor
             </a>
           </div>
-        </div>
+        )}
       </div>
-      <button
+
+      {/* <button
         type="button"
-        className="fixed z-50 bottom-4 right-4 w-16 h-16 rounded-full bg-gray-900 text-white block lg:hidden"
-        onClick={() => onNavToggle(!navIsOpen)}
+        className="fixed z-50 block w-16 h-16 text-white bg-gray-900 rounded-full bottom-4 right-4 lg:hidden"
+        onClick={() => onToggle(!isOpen)}
       >
         <span className="sr-only">Open site navigation</span>
         <svg
@@ -53,7 +91,7 @@ export function Header({ navIsOpen, onNavToggle }) {
           className={clsx(
             "absolute top-1/2 left-1/2 -mt-3 -ml-3 transition duration-300 transform",
             {
-              "opacity-0 scale-80": navIsOpen,
+              "opacity-0 scale-80": isOpen,
             }
           )}
         >
@@ -72,7 +110,7 @@ export function Header({ navIsOpen, onNavToggle }) {
           className={clsx(
             "absolute top-1/2 left-1/2 -mt-3 -ml-3 transition duration-300 transform",
             {
-              "opacity-0 scale-80": !navIsOpen,
+              "opacity-0 scale-80": !isOpen,
             }
           )}
         >
@@ -84,7 +122,9 @@ export function Header({ navIsOpen, onNavToggle }) {
             strokeLinejoin="round"
           />
         </svg>
-      </button>
+      </button> */}
     </>
   )
 }
+
+export { Header }

new-site/app/components/Search.js

@@ -62,42 +62,15 @@ export function Search() {
       <Head>
         <link rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossOrigin="true" />
       </Head>
-      <button
-        type="button"
-        ref={searchButtonRef}
-        onClick={onOpen}
-        className="group leading-6 font-medium flex items-center space-x-3 sm:space-x-4 hover:text-gray-600 transition-colors duration-200"
-      >
-        <svg
-          width="24"
-          height="24"
-          fill="none"
-          className="text-gray-400 group-hover:text-gray-500 transition-colors duration-200"
-        >
+      <button type="button" ref={searchButtonRef} onClick={onOpen} className="inline-block">
+        <svg width="24" height="24" className="w-6 h-6 fill-current">
+          <path d="M12.7983 14.4062L14.4463 12.7729L19.4087 17.6909C19.8638 18.1419 19.8638 18.8731 19.4087 19.3241C18.9536 19.7751 18.2158 19.7751 17.7607 19.3241L12.7983 14.4062Z" />
           <path
-            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
-            stroke="currentColor"
-            strokeWidth="2"
-            strokeLinecap="round"
-            strokeLinejoin="round"
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M8.45555 16.5999C12.9874 16.5999 16.6611 12.9591 16.6611 8.46794C16.6611 3.97676 12.9874 0.335938 8.45555 0.335938C3.92375 0.335938 0.25 3.97676 0.25 8.46794C0.25 12.9591 3.92375 16.5999 8.45555 16.5999ZM8.47707 14.8307C12.011 14.8307 14.8759 11.9916 14.8759 8.48926C14.8759 4.98696 12.011 2.14779 8.47707 2.14779C4.94309 2.14779 2.07824 4.98696 2.07824 8.48926C2.07824 11.9916 4.94309 14.8307 8.47707 14.8307Z"
           />
         </svg>
-        <span>
-          Quick search<span className="hidden sm:inline"> for anything</span>
-        </span>
-        {actionKey && (
-          <span className="hidden sm:block text-gray-400 text-sm leading-5 py-0.5 px-1.5 border border-gray-300 rounded-md">
-            <span className="sr-only">Press </span>
-            <kbd className="font-sans">
-              <abbr title={actionKey[1]} className="no-underline">
-                {actionKey[0]}
-              </abbr>
-            </kbd>
-            <span className="sr-only"> and </span>
-            <kbd className="font-sans">K</kbd>
-            <span className="sr-only"> to search</span>
-          </span>
-        )}
       </button>
       {isOpen &&
         createPortal(

new-site/app/components/ThemeChanger.js

@@ -0,0 +1,23 @@
+import { useTheme } from "next-themes"
+import { useEffect, useState } from "react"
+
+const ThemeChanger = () => {
+  const [mounted, setMounted] = useState(false)
+  const { theme, resolvedTheme, setTheme } = useTheme()
+
+  // When mounted on client, now we can show the UI
+  useEffect(() => setMounted(true), [])
+
+  if (!mounted) return null
+
+  return (
+    <div>
+      The current theme is: {theme} and the resolved theme is: {resolvedTheme}
+      <br />
+      <button onClick={() => setTheme("light")}>Light Mode</button>
+      <button onClick={() => setTheme("dark")}>Dark Mode</button>
+    </div>
+  )
+}
+
+export default ThemeChanger

new-site/app/components/__tests__/header.test.js

@@ -0,0 +1,14 @@
+import React from "react"
+import { render } from "test/utils"
+
+import Header from "../Header"
+
+test("renders blitz documentation link", () => {
+  // This is an example of how to ensure a specific item is in the document
+  // But it's disabled by default (by test.skip) so the test doesn't fail
+  // when you remove the the default content from the page
+
+  const { getByText } = render(<Header />)
+  const linkElement = getByText(/Tailwind CSS home page/i)
+  expect(linkElement).toBeInTheDocument()
+})

new-site/app/components/home/Feature.js

@@ -0,0 +1,10 @@
+const Feature = ({ title, children }) => {
+  return (
+    <div className="px-6 text-sm font-secondary">
+      <h3 className="mb-5 text-2xl">{title}</h3>
+      {children}
+    </div>
+  )
+}
+
+export { Feature }

new-site/app/components/home/FeatureIcon.js

@@ -0,0 +1,13 @@
+import { Icon } from "@/components/home/Icon"
+
+const FeatureIcon = ({ icon, title, children }) => {
+  return (
+    <div>
+      <Icon name={icon} variant="dark" />
+      {title && <h2 className="inline-block mb-3 ml-2 text-lg font-semibold align-top">{title}</h2>}
+      <p className={title && "font-secondary text-sm"}>{children}</p>
+    </div>
+  )
+}
+
+export { FeatureIcon }

new-site/app/components/home/Footer.js

@@ -2,7 +2,7 @@ import Link from "next/link"
 import { documentationNav } from "@/navs/documentation"
 import clsx from "clsx"
 import styles from "./Footer.module.css"
-import { Logo } from "@/components/Logo"
+import Logo from "@/components/Logo"
 
 const footerNav = {
   "Getting started": {
@@ -21,8 +21,8 @@ const footerNav = {
 
 export function Footer() {
   return (
-    <footer className="bg-gray-50 pt-16 pb-12 sm:pt-20 md:pt-24 xl:pt-32 sm:pb-20">
-      <div className="max-w-screen-lg xl:max-w-screen-xl mx-auto divide-y divide-gray-200 px-4 sm:px-6 md:px-8">
+    <footer className="pt-16 pb-12 bg-gray-50 sm:pt-20 md:pt-24 xl:pt-32 sm:pb-20">
+      <div className="max-w-screen-lg px-4 mx-auto divide-y divide-gray-200 xl:max-w-screen-xl sm:px-6 md:px-8">
         <ul
           className={`${styles.nav} text-sm font-medium pb-14 sm:pb-20 grid sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-y-10`}
         >
@@ -35,7 +35,7 @@ export function Footer() {
                 {footerNav[section].items.map((item) => (
                   <li key={item.href}>
                     <Link href={item.href}>
-                      <a className="hover:text-gray-900 transition-colors duration-200">
+                      <a className="transition-colors duration-200 hover:text-gray-900">
                         {item.title}
                       </a>
                     </Link>