Misc doc site cleanup

packages/docs-site/src/pages/HomePage.css → packages/docs-site/src/components/ButtonLink/ButtonLink.css

@@ -1,4 +1,4 @@
-.buttonLink {
+.ButtonLink {
   background-color: rgb(24, 38, 63);
   color: white;
   text-decoration: none;
@@ -15,14 +15,10 @@
   margin-top: 8px;
 }
 
-.buttonLink:hover {
+.ButtonLink:hover {
   background-color: rgb(55, 73, 105);
 }
 
-.buttonLink:focus {
+.ButtonLink:focus {
   background-color: rgb(55, 73, 105);
 }
-
-p {
-  font-size: large;
-}

packages/docs-site/src/components/ButtonLink/ButtonLink.tsx

@@ -0,0 +1,19 @@
+import { Link } from "../Router";
+import "./ButtonLink.css";
+
+export function ButtonLink({ label, href }: { label: string; href: string }) {
+  return (
+    <Link className="ButtonLink" href={href}>
+      {label}
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={24}
+        height={24}
+        fill="currentColor"
+        viewBox="0 -960 960 960"
+      >
+        <path d="M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z" />
+      </svg>
+    </Link>
+  );
+}

packages/docs-site/src/components/ButtonLink/index.ts

@@ -0,0 +1 @@
+export * from "./ButtonLink";

packages/docs-site/src/components/Layout/Layout.css

@@ -0,0 +1,53 @@
+.Layout {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.Layout main {
+  flex-grow: 1;
+  flex-basis: 0;
+}
+
+.Layout nav {
+  background-color: rgb(247, 249, 252);
+  flex-grow: 0;
+  display: flex;
+  border-bottom: 1px solid rgb(220, 220, 220);
+}
+
+.Layout nav ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+}
+
+.Layout nav li {
+  height: 100%;
+}
+
+.Layout nav a {
+  padding: 16px;
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  color: #595959;
+  transition: all 0.1s;
+}
+
+.Layout nav a:hover {
+  background-color: #e7e7e7;
+}
+
+.Layout nav a:focus {
+  background-color: #e7e7e7;
+}
+
+.Layout nav a:active {
+  background-color: #dddddd;
+}
+
+.Layout nav a[aria-current="page"] {
+  background-color: #dddddd;
+}

packages/docs-site/src/components/Layout.tsx → packages/docs-site/src/components/Layout/Layout.tsx

@@ -1,5 +1,5 @@
-import { Link, usePathname } from "./Router";
-import logo from "../assets/logo.png";
+import { Link, usePathname } from "../Router";
+import logo from "../../assets/logo.png";
 import "./Layout.css";
 
 function Nav() {
@@ -51,7 +51,7 @@ function Nav() {
 
 export function Layout({ children }: { children: React.ReactNode }) {
   return (
-    <div className="content">
+    <div className="Layout">
       <Nav />
       <main>{children}</main>
     </div>

packages/docs-site/src/components/Layout/index.tsx

@@ -0,0 +1 @@
+export * from "./Layout";

packages/docs-site/src/components/Router.tsx → packages/docs-site/src/components/Router/Router.tsx

@@ -58,10 +58,12 @@ export function Link({
   href,
   children,
   "aria-current": ariaCurrent,
+  className,
 }: {
   href: string;
   children: React.ReactNode;
   "aria-current"?: "page";
+  className?: string;
 }) {
   const setCount = useContext(SetCounterContext);
   return (
@@ -84,6 +86,7 @@ export function Link({
         setCount((c) => c + 1);
       }}
       aria-current={ariaCurrent}
+      className={className}
     >
       {children}
     </a>

packages/docs-site/src/components/Router/index.tsx

@@ -0,0 +1 @@
+export * from "./Router";

packages/docs-site/src/pages/HomePage.tsx → packages/docs-site/src/pages/HomePage/HomePage.tsx

@@ -1,7 +1,7 @@
 import { ZodErrorViewer } from "zod-error-viewer";
-import logo from "../assets/logo.png";
+import logo from "../../assets/logo.png";
 import { z } from "zod";
-import "./HomePage.css";
+import { ButtonLink } from "../../components/ButtonLink";
 
 export function HomePage() {
   const data = {
@@ -30,20 +30,11 @@ export function HomePage() {
     >
       <img src={logo} style={{ width: "150px", maxWidth: "100%" }} />
       <h1>ZodErrorViewer</h1>
-      <p>Quickly understand even the meanest zod errors 💡</p>
+      <p style={{ fontSize: "large" }}>
+        Quickly understand even the meanest zod errors 💡
+      </p>
       <ZodErrorViewer data={data} error={error} />
-      <a className="buttonLink" href="/docs">
-        Documentation
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width={24}
-          height={24}
-          fill="currentColor"
-          viewBox="0 -960 960 960"
-        >
-          <path d="M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z" />
-        </svg>
-      </a>
+      <ButtonLink href="/docs" label="Documentation" />
     </div>
   );
 }

packages/docs-site/src/pages/HomePage/index.tsx

@@ -0,0 +1 @@
+export * from "./HomePage";

packages/docs-site/src/pages/PlaygroundPage/PlaygroundPage.css

@@ -0,0 +1,64 @@
+.PlaygroundPage {
+  font-family: sans-serif;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  padding: 16px;
+}
+
+.PlaygroundPage h1,
+.PlaygroundPage h2 {
+  margin: 0;
+  font-weight: 400;
+  color: #595959;
+}
+
+.PlaygroundPage h1 {
+  font-size: 1.5rem;
+  margin-bottom: 8px;
+}
+
+.PlaygroundPage h2 {
+  padding: 8px;
+  font-size: 1.2rem;
+  background-color: rgb(245, 245, 245);
+}
+
+.PlaygroundPage .error {
+  color: red;
+  min-height: 30px;
+  padding-top: 4px;
+}
+
+.PlaygroundPage .editor-column {
+  flex-basis: 33.33%;
+}
+
+.PlaygroundPage .editor {
+  border: 1px solid rgb(221, 221, 221);
+}
+
+.PlaygroundPage .error-viewer-container {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.PlaygroundPage .error-viewer {
+  flex-grow: 1;
+  flex-basis: 0;
+  overflow: hidden;
+}
+
+.PlaygroundPage .tag {
+  display: inline-block;
+  border-radius: 8px;
+  background-color: #dedede;
+  padding: 8px;
+  padding-top: 4px;
+  padding-bottom: 4px;
+  vertical-align: middle;
+  font-size: 0.9rem;
+}

packages/docs-site/src/pages/PlaygroundPage.tsx → packages/docs-site/src/pages/PlaygroundPage/PlaygroundPage.tsx

@@ -83,7 +83,7 @@ export function PlaygroundPage() {
   }, [errorStr, schema, data]);
 
   return (
-    <div className="playground">
+    <div className="PlaygroundPage">
       <h1>Playground</h1>
       <div
         style={{

packages/docs-site/src/pages/PlaygroundPage/index.tsx

@@ -0,0 +1 @@
+export * from "./PlaygroundPage";

packages/zod-error-viewer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zod-error-viewer",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "license": "MIT",
   "author": {
     "name": "Ben Lorantfy",