bring over most of the things

2022-01-02 16:35:03 -06:00
parent aa27623d11
commit 336e680b6e
23 changed files with 738 additions and 76 deletions
--- a/packages/docs-new/build.ts
+++ b/packages/docs-new/build.ts
@@ -2,14 +2,7 @@ import { resolve } from "node:path"
 import { build } from "vite"

 await build({
-  build: {
-    outDir: "dist/client",
-    lib: {
-      entry: resolve("src/entry.client.tsx"),
-      fileName: () => "entry.client.js",
-      formats: ["es"],
-    },
-  },
+  build: { outDir: "dist/client" },
 })

 await build({
--- a/packages/docs-new/index.html
+++ b/packages/docs-new/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en" class="bg-slate-900 text-slate-100">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500&family=Rubik:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap"
+      rel="stylesheet"
+    />
+    <link href="/src/styles/tailwind.css" rel="stylesheet" />
+    <link href="/src/styles/prism-theme.css" rel="stylesheet" />
+    <!--inject-head-->
+  </head>
+  <body>
+    <div id="app" class="contents">
+      <!--inject-body-->
+    </div>
+  </body>
+</html>
--- a/packages/docs-new/package.json
+++ b/packages/docs-new/package.json
@@ -14,7 +14,12 @@
    "react-dom": "^18.0.0-rc.0",
    "react-head": "^3.4.0",
    "react-router": "^6.2.1",
-    "react-router-dom": "^6.2.1"
+    "react-router-dom": "^6.2.1",
+    "@heroicons/react": "^1.0.5",
+    "@reach/rect": "^0.16.0",
+    "clsx": "^1.1.1",
+    "gray-matter": "^4.0.3",
+    "react-focus-on": "^3.5.4"
  },
  "devDependencies": {
    "@mapbox/rehype-prism": "^0.8.0",
--- a/packages/docs-new/server.ts
+++ b/packages/docs-new/server.ts
@@ -1,6 +1,7 @@
 import compression from "compression"
 import express, { Router } from "express"
-import { resolve } from "node:path"
+import { readFile } from "node:fs/promises"
+import { join, resolve } from "node:path"
 import { createServer as createViteServer } from "vite"
 import type * as entryModule from "./src/entry.server"

@@ -19,7 +20,15 @@ async function createDevelopmentRouter() {
          "/src/entry.server.tsx",
        )) as typeof entryModule

-        const html = await vite.transformIndexHtml(url, await render(url))
+        const htmlTemplate = await readFile(
+          join(vite.config.root, "index.html"),
+          "utf8",
+        )
+
+        const html = await vite.transformIndexHtml(
+          url,
+          render(url, htmlTemplate),
+        )

        res.status(200).set({ "Content-Type": "text/html" }).end(html)
      } catch (error: any) {
@@ -33,17 +42,19 @@ async function createDevelopmentRouter() {
 function createProductionRouter() {
  return Router()
    .use(compression())
-    .use(express.static(resolve("dist/client")))
+    .use(express.static(resolve("dist/client"), { index: false }))
    .use("*", async (req, res) => {
      try {
        const { render }: typeof entryModule = await import(
          "./dist/server/entry.server"
        )

+        const htmlTemplate = await readFile("dist/client/index.html", "utf8")
+
        res
          .status(200)
          .set({ "Content-Type": "text/html" })
-          .end(await render(req.originalUrl))
+          .end(render(req.originalUrl, htmlTemplate))
      } catch (error: any) {
        console.error(error)
        res.status(500).end(error.stack || error.message)
--- a/packages/docs-new/src/app.tsx
+++ b/packages/docs-new/src/app.tsx
@@ -1,43 +1,35 @@
 import { description } from "reacord/package.json"
 import { lazy, Suspense } from "react"
 import { Meta, Title } from "react-head"
-import { Link, Route, Routes } from "react-router-dom"
-import { lazyNamed } from "./helpers/lazy-named"
+import { Route, Routes } from "react-router-dom"
+import { GuidePageLayout } from "./components/guide-page-layout"
+import { LandingPage } from "./pages/landing-page"

 export function App() {
  return (
    <>
      <Title>Reacord</Title>
      <Meta name="description" content={description} />
-      <nav>
-        <Link to="/">Home</Link>{" "}
-        <Link to="docs/getting-started">Getting Started</Link>{" "}
-        <Link to="docs/api">API Reference</Link>
-      </nav>
-      <Suspense fallback={<></>}>
-        <Routes>
-          <Route path="/" element={<LandingPage />} />
-          <Route path="docs" element={<DocumentPageLayout />}>
-            {docs.map(({ route, component: Component }) => (
-              <Route key={route} path={route} element={<Component />} />
-            ))}
-          </Route>
-        </Routes>
-      </Suspense>
+      <Routes>
+        <Route path="/" element={<LandingPage />} />
+        <Route path="docs" element={<GuidePageLayout />}>
+          {docs.map(({ route, component: Component }) => (
+            <Route
+              key={route}
+              path={route}
+              element={
+                <Suspense fallback={<></>}>
+                  <Component />
+                </Suspense>
+              }
+            />
+          ))}
+        </Route>
+      </Routes>
    </>
  )
 }

-const LandingPage = lazyNamed(
-  "LandingPage",
-  () => import("./pages/landing-page"),
-)
-
-const DocumentPageLayout = lazyNamed(
-  "DocumentPage",
-  () => import("./pages/document-page"),
-)
-
 const docs = Object.entries(import.meta.glob("./docs/*.md")).map(
  ([path, loadModule]) => ({
    route: path.replace("./docs/", "").replace(/\.md$/, ""),
--- a/packages/docs-new/src/components/app-link.tsx
+++ b/packages/docs-new/src/components/app-link.tsx
@@ -0,0 +1,34 @@
+import { Link } from "react-router-dom"
+import { ExternalLink } from "./external-link"
+
+export type AppLinkProps = {
+  type: "router" | "internal" | "external"
+  label: React.ReactNode
+  to: string
+  className?: string
+}
+
+export function AppLink(props: AppLinkProps) {
+  switch (props.type) {
+    case "router":
+      return (
+        <Link className={props.className} to={props.to}>
+          {props.label}
+        </Link>
+      )
+
+    case "internal":
+      return (
+        <a className={props.className} href={props.to}>
+          {props.label}
+        </a>
+      )
+
+    case "external":
+      return (
+        <ExternalLink className={props.className} href={props.to}>
+          {props.label}
+        </ExternalLink>
+      )
+  }
+}
--- a/packages/docs-new/src/components/external-link.tsx
+++ b/packages/docs-new/src/components/external-link.tsx
@@ -0,0 +1,9 @@
+import type { ComponentPropsWithoutRef } from "react"
+
+export function ExternalLink(props: ComponentPropsWithoutRef<"a">) {
+  return (
+    <a target="_blank" rel="noopener noreferrer" {...props}>
+      {props.children}
+    </a>
+  )
+}
--- a/packages/docs-new/src/components/guide-page-layout.tsx
+++ b/packages/docs-new/src/components/guide-page-layout.tsx
@@ -0,0 +1,49 @@
+import clsx from "clsx"
+import { Outlet } from "react-router"
+import { guideLinks } from "../data/guide-links"
+import { useScrolled } from "../hooks/dom/use-scrolled"
+import {
+  docsProseClass,
+  linkClass,
+  maxWidthContainer,
+} from "../styles/components"
+import { AppLink } from "./app-link"
+import { MainNavigation } from "./main-navigation"
+
+export function GuidePageLayout() {
+  return (
+    <>
+      <HeaderPanel>
+        <div className={maxWidthContainer}>
+          <MainNavigation />
+        </div>
+      </HeaderPanel>
+      <main className={clsx(maxWidthContainer, "mt-8 flex items-start gap-4")}>
+        <nav className="w-48 sticky top-24 hidden md:block">
+          <h2 className="text-2xl">Guides</h2>
+          <ul className="mt-3 flex flex-col gap-2 items-start">
+            {guideLinks.map((link) => (
+              <li key={link.to}>
+                <AppLink {...link} className={linkClass} />
+              </li>
+            ))}
+          </ul>
+        </nav>
+        <section className={clsx(docsProseClass, "pb-8 flex-1 min-w-0")}>
+          <Outlet />
+        </section>
+      </main>
+    </>
+  )
+}
+
+function HeaderPanel({ children }: { children: React.ReactNode }) {
+  const isScrolled = useScrolled()
+
+  const className = clsx(
+    isScrolled ? "bg-slate-700/30" : "bg-slate-800",
+    "shadow sticky top-0 backdrop-blur-sm transition z-10 flex",
+  )
+
+  return <header className={className}>{children}</header>
+}
--- a/packages/docs-new/src/components/landing-example.md
+++ b/packages/docs-new/src/components/landing-example.md
@@ -0,0 +1,19 @@
+<!-- prettier-ignore -->
+```tsx
+import * as React from "react"
+import { Embed, Button } from "reacord"
+
+function Counter() {
+  const [count, setCount] = React.useState(0)
+  return (
+    <>
+      <Embed title="Counter">
+        This button has been clicked {count} times.
+      </Embed>
+      <Button onClick={() => setCount(count + 1)}>
+        +1
+      </Button>
+    </>
+  )
+}
+```
--- a/packages/docs-new/src/components/main-navigation.tsx
+++ b/packages/docs-new/src/components/main-navigation.tsx
@@ -0,0 +1,40 @@
+import { Link } from "react-router-dom"
+import { AppLink } from "../components/app-link"
+import { guideLinks } from "../data/guide-links"
+import { mainLinks } from "../data/main-links"
+import { linkClass } from "../styles/components"
+import { PopoverMenu } from "./popover-menu"
+
+export function MainNavigation() {
+  return (
+    <nav className="flex justify-between items-center h-16">
+      <Link to="/">
+        <h1 className="text-3xl font-light">reacord</h1>
+      </Link>
+      <div className="hidden md:flex gap-4">
+        {mainLinks.map((link) => (
+          <AppLink {...link} key={link.to} className={linkClass} />
+        ))}
+      </div>
+      <div className="md:hidden">
+        <PopoverMenu>
+          {mainLinks.map((link) => (
+            <AppLink
+              {...link}
+              key={link.to}
+              className={PopoverMenu.itemClass}
+            />
+          ))}
+          <hr className="border-0 h-[2px] bg-black/50" />
+          {guideLinks.map((link) => (
+            <AppLink
+              {...link}
+              key={link.to}
+              className={PopoverMenu.itemClass}
+            />
+          ))}
+        </PopoverMenu>
+      </div>
+    </nav>
+  )
+}
--- a/packages/docs-new/src/components/popover-menu.tsx
+++ b/packages/docs-new/src/components/popover-menu.tsx
@@ -0,0 +1,67 @@
+import { MenuAlt4Icon } from "@heroicons/react/outline"
+import { useRect } from "@reach/rect"
+import clsx from "clsx"
+import { useRef, useState } from "react"
+import { FocusOn } from "react-focus-on"
+import { linkClass } from "../styles/components"
+
+// todo: remove useRect usage and rely on css absolute positioning instead
+export function PopoverMenu({ children }: { children: React.ReactNode }) {
+  const [visible, setVisible] = useState(false)
+
+  const buttonRef = useRef<HTMLButtonElement>(null)
+  const buttonRect = useRect(buttonRef)
+
+  const panelRef = useRef<HTMLDivElement>(null)
+  const panelRect = useRect(panelRef)
+
+  /* eslint-disable jsx-a11y/no-static-element-interactions */
+  /* eslint-disable jsx-a11y/click-events-have-key-events */
+  return (
+    <>
+      <button
+        title="Menu"
+        className={linkClass}
+        onClick={() => setVisible(!visible)}
+        ref={buttonRef}
+      >
+        <MenuAlt4Icon className="w-6" />
+      </button>
+
+      <FocusOn
+        enabled={visible}
+        onClickOutside={() => setVisible(false)}
+        onEscapeKey={() => setVisible(false)}
+      >
+        <div
+          className="fixed"
+          style={{
+            left: (buttonRect?.right ?? 0) - (panelRect?.width ?? 0),
+            top: (buttonRect?.bottom ?? 0) + 8,
+          }}
+          onClick={() => setVisible(false)}
+        >
+          <div
+            className={clsx(
+              "transition-all",
+              visible
+                ? "opacity-100 visible"
+                : "translate-y-2 opacity-0 invisible",
+            )}
+          >
+            <div ref={panelRef}>
+              <div className="w-48 bg-slate-800 rounded-lg shadow overflow-hidden max-h-[calc(100vh-4rem)] overflow-y-auto">
+                {children}
+              </div>
+            </div>
+          </div>
+        </div>
+      </FocusOn>
+    </>
+  )
+}
+
+PopoverMenu.itemClass = clsx`
+  px-3 py-2 transition text-left font-medium block
+  opacity-50 hover:opacity-100 hover:bg-black/30
+`
--- a/packages/docs-new/src/data/guide-links.tsx
+++ b/packages/docs-new/src/data/guide-links.tsx
@@ -0,0 +1,3 @@
+import type { AppLinkProps } from "../components/app-link"
+
+export const guideLinks: AppLinkProps[] = []
--- a/packages/docs-new/src/data/main-links.tsx
+++ b/packages/docs-new/src/data/main-links.tsx
@@ -0,0 +1,37 @@
+import {
+  CodeIcon,
+  DocumentTextIcon,
+  ExternalLinkIcon,
+} from "@heroicons/react/solid"
+import type { AppLinkProps } from "../components/app-link"
+import { inlineIconClass } from "../styles/components"
+
+export const mainLinks: AppLinkProps[] = [
+  {
+    type: "router",
+    to: "/docs/getting-started",
+    label: (
+      <>
+        <DocumentTextIcon className={inlineIconClass} /> Guides
+      </>
+    ),
+  },
+  {
+    type: "internal",
+    to: "/docs/api",
+    label: (
+      <>
+        <CodeIcon className={inlineIconClass} /> API Reference
+      </>
+    ),
+  },
+  {
+    type: "external",
+    to: "https://github.com/itsMapleLeaf/reacord",
+    label: (
+      <>
+        <ExternalLinkIcon className={inlineIconClass} /> GitHub
+      </>
+    ),
+  },
+]
--- a/packages/docs-new/src/entry.server.tsx
+++ b/packages/docs-new/src/entry.server.tsx
@@ -3,7 +3,7 @@ import { HeadProvider } from "react-head"
 import { StaticRouter } from "react-router-dom/server"
 import { App } from "./app"

-export async function render(url: string) {
+export function render(url: string, htmlTemplate: string) {
  const headTags: React.ReactElement[] = []

  const app = (
@@ -20,23 +20,15 @@ export async function render(url: string) {
    ? "/entry.client.js"
    : "/src/entry.client.tsx"

-  return /* HTML */ `
-    <!DOCTYPE html>
-    <head>
-      <meta charset="utf-8" />
-      <meta name="viewport" content="width=device-width,initial-scale=1" />
-      <link rel="preconnect" href="https://fonts.googleapis.com" />
-      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="" />
-      <link
-        href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500&family=Rubik:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap"
-        rel="stylesheet"
-      />
-      <link rel="stylesheet" href="/src/tailwind.css" />
-      ${renderToString(<>{headTags}</>)}
-      <script type="module" src="${scriptSource}"></script>
-    </head>
-    <body>
-      <div id="app" style="display: contents">${appHtml}</div>
-    </body>
-  `
+  return htmlTemplate
+    .replace(
+      "<!--inject-head-->",
+      renderToString(
+        <>
+          {headTags}
+          <script type="module" src={scriptSource} />
+        </>,
+      ),
+    )
+    .replace("<!--inject-body-->", appHtml)
 }
--- a/packages/docs-new/src/hooks/dom/use-scrolled.ts
+++ b/packages/docs-new/src/hooks/dom/use-scrolled.ts
@@ -0,0 +1,8 @@
+import { useState } from "react"
+import { useWindowEvent } from "./use-window-event"
+
+export function useScrolled() {
+  const [scrolled, setScrolled] = useState(false)
+  useWindowEvent("scroll", () => setScrolled(window.scrollY > 0))
+  return scrolled
+}
--- a/packages/docs-new/src/hooks/dom/use-window-event.ts
+++ b/packages/docs-new/src/hooks/dom/use-window-event.ts
@@ -0,0 +1,11 @@
+import { useEffect } from "react"
+
+export function useWindowEvent<EventType extends keyof WindowEventMap>(
+  type: EventType,
+  handler: (event: WindowEventMap[EventType]) => void,
+) {
+  useEffect(() => {
+    window.addEventListener(type, handler)
+    return () => window.removeEventListener(type, handler)
+  })
+}
--- a/packages/docs-new/src/html.ts
+++ b/packages/docs-new/src/html.ts
@@ -0,0 +1,36 @@
+export function html({
+  head,
+  body,
+  scriptSource,
+}: {
+  head: string
+  body: string
+  scriptSource: string
+}): string {
+  return /* HTML */ `
+    <!DOCTYPE html>
+    <html lang="en" class="bg-slate-900 text-slate-100">
+      <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width,initial-scale=1" />
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link
+          rel="preconnect"
+          href="https://fonts.gstatic.com"
+          crossorigin=""
+        />
+        <link
+          href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500&family=Rubik:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap"
+          rel="stylesheet"
+        />
+        <link href="/src/styles/tailwind.css" rel="stylesheet" />
+        <link href="/src/styles/prism-theme.css" rel="stylesheet" />
+        ${head}
+        <script type="module" src="${scriptSource}"></script>
+      </head>
+      <body>
+        <div id="app" class="contents">${body}</div>
+      </body>
+    </html>
+  `
+}
--- a/packages/docs-new/src/pages/document-page.tsx
+++ b/packages/docs-new/src/pages/document-page.tsx
@@ -1,13 +0,0 @@
-import { Suspense } from "react"
-import { Outlet } from "react-router"
-
-export function DocumentPage() {
-  return (
-    <>
-      <h1>Docs</h1>
-      <Suspense fallback={<div>Loading...</div>}>
-        <Outlet />
-      </Suspense>
-    </>
-  )
-}
--- a/packages/docs-new/src/pages/landing-page.tsx
+++ b/packages/docs-new/src/pages/landing-page.tsx
@@ -1,7 +1,30 @@
+import packageJson from "reacord/package.json"
+import { Link } from "react-router-dom"
+import LandingExample from "../components/landing-example.md"
+import { MainNavigation } from "../components/main-navigation"
+import { maxWidthContainer } from "../styles/components"
+
 export function LandingPage() {
  return (
-    <>
-      <h1>Landing</h1>
-    </>
+    <div className="flex flex-col min-w-0 min-h-screen text-center">
+      <header className={maxWidthContainer}>
+        <MainNavigation />
+      </header>
+      <div className="px-4 pb-8 flex flex-1">
+        <main className="px-4 py-6 rounded-lg shadow bg-slate-800 space-y-5 m-auto w-full max-w-xl">
+          <h1 className="text-6xl font-light">reacord</h1>
+          <section className="mx-auto text-sm sm:text-base">
+            <LandingExample />
+          </section>
+          <p className="text-2xl font-light">{packageJson.description}</p>
+          <Link
+            to="/docs/getting-started"
+            className="inline-block px-4 py-3 text-xl transition rounded-lg bg-emerald-700 hover:translate-y-[-2px] hover:bg-emerald-800 hover:shadow"
+          >
+            Get Started
+          </Link>
+        </main>
+      </div>
+    </div>
  )
 }
--- a/packages/docs-new/src/styles/components.ts
+++ b/packages/docs-new/src/styles/components.ts
@@ -0,0 +1,24 @@
+import clsx from "clsx"
+
+export const maxWidthContainer = clsx`mx-auto w-full max-w-screen-lg px-4`
+
+export const inlineIconClass = clsx`inline w-5 align-sub`
+
+export const linkClass = clsx`
+  font-medium inline-block relative
+  opacity-60 hover:opacity-100 transition-opacity
+  after:absolute after:block after:w-full after:h-px after:bg-white/50 after:translate-y-[3px] after:opacity-0 after:transition
+  hover:after:translate-y-[-1px] hover:after:opacity-100
+`
+
+export const docsProseClass = clsx`
+  prose prose-invert
+  prose-h1:font-light prose-h1:mb-4 prose-h1:text-3xl lg:prose-h1:text-4xl
+  prose-h2:font-light
+  prose-h3:font-light
+  prose-p:my-4
+  prose-a:font-medium prose-a:text-emerald-400 hover:prose-a:no-underline
+  prose-strong:font-medium prose-strong:text-emerald-400
+  prose-pre:font-monospace prose-pre:overflow-x-auto
+  max-w-none
+`
--- a/packages/docs-new/src/styles/prism-theme.css
+++ b/packages/docs-new/src/styles/prism-theme.css
@@ -0,0 +1,133 @@
+/**
+ * Nord Theme Originally by Arctic Ice Studio
+ * https://nordtheme.com
+ *
+ * Ported for PrismJS by Zane Hitchcoxc (@zwhitchcox) and Gabriel Ramos (@gabrieluizramos)
+ */
+
+code[class*="language-"],
+pre[class*="language-"] {
+  color: #f8f8f2;
+  background: none;
+  /* font-family: "Fira Code", Consolas, Monaco, "Andale Mono", "Ubuntu Mono",
+    monospace; */
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.7;
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: 0.5em 0;
+  overflow: auto;
+  border-radius: 0.3em;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+  /* background: #2e3440; */
+  background: rgba(0, 0, 0, 0.3);
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+  padding: 0.1em;
+  border-radius: 0.3em;
+  white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: #636f88;
+}
+
+.token.punctuation {
+  color: #81a1c1;
+}
+
+.namespace {
+  opacity: 0.7;
+}
+
+.token.property,
+.token.tag,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #81a1c1;
+}
+
+.token.number {
+  color: #b48ead;
+}
+
+.token.boolean {
+  color: #81a1c1;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #a3be8c;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string,
+.token.variable {
+  color: #81a1c1;
+}
+
+.token.atrule,
+.token.attr-value,
+.token.function,
+.token.class-name {
+  color: #88c0d0;
+}
+
+.token.keyword {
+  color: #81a1c1;
+}
+
+.token.regex,
+.token.important {
+  color: #ebcb8b;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}
+
+.code-line.highlight-line {
+  background-color: rgba(255, 255, 255, 0.08);
+  padding: 0 1rem;
+  margin: 0 -1rem;
+  display: block;
+}
--- a/packages/docs-new/src/styles/tailwind.css
+++ b/packages/docs-new/src/styles/tailwind.css