make things pretty

packages/docs/app/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>
+  )
+}

packages/docs/app/components/header-layout.tsx

@@ -0,0 +1,25 @@
+import clsx from "clsx"
+import { useScrolled } from "~/hooks/dom/use-scrolled"
+
+export function HeaderLayout({
+  header,
+  body,
+}: {
+  header: React.ReactNode
+  body: React.ReactNode
+}) {
+  const isScrolled = useScrolled()
+  return (
+    <div className="isolate">
+      <header
+        className={clsx(
+          isScrolled ? "bg-slate-700/30" : "bg-slate-800",
+          "shadow-md sticky top-0 py-3 backdrop-blur-sm transition z-10",
+        )}
+      >
+        <div className="m-auto max-w-screen-lg px-6">{header}</div>
+      </header>
+      <div className="m-auto max-w-screen-lg px-6 mt-6">{body}</div>
+    </div>
+  )
+}

packages/docs/app/components/header.tsx

@@ -1,16 +0,0 @@
-import clsx from "clsx"
-import { useScrolled } from "~/hooks/dom/use-scrolled"
-
-export function Header({ children }: { children: React.ReactNode }) {
-  const isScrolled = useScrolled()
-  return (
-    <header
-      className={clsx(
-        isScrolled ? "bg-slate-700/30" : "bg-slate-800",
-        "shadow-md sticky top-0 px-4 py-3 backdrop-blur-sm transition",
-      )}
-    >
-      {children}
-    </header>
-  )
-}

packages/docs/app/components/side-nav.tsx

@@ -0,0 +1,16 @@
+import type { ReactNode } from "react"
+
+export function SideNav({
+  heading,
+  children,
+}: {
+  heading: ReactNode
+  children: ReactNode
+}) {
+  return (
+    <nav className="w-64 sticky top-0">
+      <h2 className="text-2xl mt-1">{heading}</h2>
+      <div className="mt-3 flex flex-col gap-2 items-start">{children}</div>
+    </nav>
+  )
+}

packages/docs/app/components/sidebar-layout.tsx

@@ -0,0 +1,26 @@
+import type { ReactNode } from "react"
+import { useEffect, useRef, useState } from "react"
+
+export function SidebarLayout({
+  sidebar,
+  body,
+}: {
+  sidebar: ReactNode
+  body: ReactNode
+}) {
+  const [offsetTop, setOffsetTop] = useState(0)
+  const sidebarRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    setOffsetTop(sidebarRef.current?.offsetTop ?? 0)
+  }, [sidebarRef])
+
+  return (
+    <div className="flex items-start gap-6">
+      <div className="w-64 sticky" style={{ top: offsetTop }} ref={sidebarRef}>
+        {sidebar}
+      </div>
+      <div className="flex-1">{body}</div>
+    </div>
+  )
+}

packages/docs/app/prism-theme.css

@@ -0,0 +1,126 @@
+/**
+ * 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.5;
+  -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;
+}

packages/docs/app/root.tsx

@@ -1,5 +1,12 @@
+import { CodeIcon } from "@heroicons/react/outline"
+import {
+  DatabaseIcon,
+  DocumentTextIcon,
+  ExternalLinkIcon,
+} from "@heroicons/react/solid"
 import type { LinksFunction, MetaFunction } from "remix"
 import {
+  Link,
   Links,
   LiveReload,
   Meta,
@@ -7,13 +14,17 @@ import {
   Scripts,
   ScrollRestoration,
 } from "remix"
-import { Header } from "~/components/header"
+import { ExternalLink } from "~/components/external-link"
+import { HeaderLayout } from "~/components/header-layout"
+import { linkClass } from "~/styles"
+import prismThemeCss from "./prism-theme.css"
 
 export const meta: MetaFunction = () => {
   return { title: "New Remix App" }
 }
 
 export const links: LinksFunction = () => [
+  { rel: "stylesheet", href: prismThemeCss },
   { rel: "stylesheet", href: "/tailwind.css" },
 ]
 
@@ -23,18 +34,48 @@ export default function App() {
       <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"
+        />
         <Meta />
         <Links />
       </head>
       <body>
-        <Header>
-          <div className="m-auto max-w-screen-xl px-4">
-            <h1 className="text-3xl font-light">reacord</h1>
-          </div>
-        </Header>
-        <div className="m-auto max-w-screen-xl px-4 mt-8">
-          <Outlet />
-        </div>
+        <HeaderLayout
+          header={
+            <nav className="flex justify-between items-center">
+              <Link to="/">
+                <h1 className="text-3xl font-light">
+                  reacord{" "}
+                  <CodeIcon className="inline w-8 align-sub opacity-50" />
+                </h1>
+              </Link>
+              <div className="flex gap-4">
+                <Link className={linkClass} to="/docs/getting-started">
+                  <DocumentTextIcon className="inline align-sub w-5" /> Guides
+                </Link>
+                <Link className={linkClass} to="/api">
+                  <DatabaseIcon className="inline align-sub w-5" /> API
+                  Reference
+                </Link>
+                <ExternalLink
+                  className={linkClass}
+                  href="https://github.com/itsMapleLeaf/reacord"
+                >
+                  <ExternalLinkIcon className="inline align-sub w-5" /> GitHub
+                </ExternalLink>
+              </div>
+            </nav>
+          }
+          body={<Outlet />}
+        />
         <ScrollRestoration />
         <Scripts />
         {process.env.NODE_ENV === "development" && <LiveReload />}

packages/docs/app/routes/docs.tsx

@@ -0,0 +1,32 @@
+import { Link, Outlet } from "remix"
+import { SideNav } from "~/components/side-nav"
+import { SidebarLayout } from "~/components/sidebar-layout"
+import { linkClass } from "~/styles"
+
+export default function Docs() {
+  return (
+    <SidebarLayout
+      sidebar={
+        <SideNav heading="Guides">
+          <Link className={linkClass} to="getting-started">
+            Getting Started
+          </Link>
+          <Link className={linkClass} to="embeds">
+            Embeds
+          </Link>
+          <Link className={linkClass} to="buttons">
+            Buttons
+          </Link>
+          <Link className={linkClass} to="select-menus">
+            Select Menus
+          </Link>
+        </SideNav>
+      }
+      body={
+        <section className="prose max-w-none prose-invert prose-h1:font-light flex-1 prose-h1:mb-4 prose-p:my-4 prose-pre:text-[15px] prose-pre:font-monospace prose-h2:font-light h-[200vh]">
+          <Outlet />
+        </section>
+      }
+    />
+  )
+}

packages/docs/app/routes/docs/getting-started.md

@@ -0,0 +1,30 @@
+---
+meta:
+  title: Getting Started
+  description: Learn how to get started with Reacord.
+---
+
+# Getting Started
+
+welcome
+
+- install it and do the thing
+- then do another thing
+
+## here's a code block
+
+```tsx
+import React from "react"
+
+function Counter() {
+  const [count, setCount] = useState(0)
+  return (
+    <>
+      You clicked {count} times
+      <Button onClick={() => setCount(count + 1)}>Click me</Button>
+    </>
+  )
+}
+```
+
+yeah

packages/docs/app/styles.ts

@@ -0,0 +1,8 @@
+import clsx from "clsx"
+
+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
+`