chore: update Docs

peerigon · Jan 15, 2024 · 8986dfc · 8986dfc
1 parent a74cf79
commit 8986dfc
Show file tree

Hide file tree

Showing 7 changed files with 83 additions and 65 deletions.
diff --git a/apps/docs/app/components/clipboardable.tsx b/apps/docs/app/components/clipboardable.tsx
@@ -20,6 +20,8 @@ export const Clipboardable: React.FC<{
 		<div className="relative">
 			<button
 				type="button"
+				aria-live="polite"
+				aria-label={copied ? "Copied!" : "Copy to clipboard"}
 				className="absolute right-2 top-[0.75rem] w-7 aspect-square rounded-md flex justify-center items-center bg-slate-600"
 				onClick={() => {
 					navigator.clipboard.writeText(content);

diff --git a/apps/docs/app/components/ribbon.tsx b/apps/docs/app/components/ribbon.tsx
@@ -2,8 +2,10 @@ import { cn, tw } from "../utils/tailwind";
 import { SvgSprite } from "./svg-sprite";
 
 const className = cn(
-	tw`bg-black text-sm font-bold text-white fixed top-0 right-0 p-2 z-50 w-[16rem] flex no-underline leading-normal justify-center rotate-45 transform translate-x-1/4 translate-y-full`,
-	tw`hover:bg-gray-900 hover:text-white hover:scale-110 transition-transform`,
+	tw`inline-flex align-middle leading-tight justify-center`,
+	tw`font-bold top-0 right-0 z-50 no-underline`,
+	tw`lg:bg-blue-700 lg:text-white lg:text-sm lg:fixed lg:p-2 lg:w-[16rem] lg:rotate-45 lg:translate-x-1/4 lg:translate-y-full`,
+	tw`hover:scale-110 transition-transform`,
 );
 
 export const Ribbon = () => {
@@ -14,11 +16,11 @@ export const Ribbon = () => {
 			aria-label="View source on GitHub"
 		>
 			<SvgSprite
-				className="w-5 h-5 mr-3"
+				className="inline-block w-6 h-6 lg:mr-3"
 				aria-hidden="true"
 				name="github"
 			/>
-			GitHub
+			<span className="sr-only lg:not-sr-only">GitHub</span>
 		</a>
 	);
 };
diff --git a/apps/docs/app/root.tsx b/apps/docs/app/root.tsx
@@ -1,5 +1,5 @@
 import { cssBundleHref } from "@remix-run/css-bundle";
-import type { LinksFunction } from "@remix-run/node";
+import type { LinksFunction, MetaFunction } from "@remix-run/node";
 import {
 	Links,
 	LiveReload,
@@ -8,10 +8,32 @@ import {
 	Scripts,
 	ScrollRestoration,
 } from "@remix-run/react";
+import { Hx } from "uberschrift";
+import highlightCss from "highlight.js/styles/github-dark.css";
+import { Ribbon } from "./components/ribbon";
+import stylesheet from "./tailwind.css";
 
-export const links: LinksFunction = () => [
-	...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
-];
+export const links: LinksFunction = () => {
+	return [
+		{ rel: "stylesheet", href: stylesheet },
+		{ rel: "stylesheet", href: highlightCss },
+		{
+			rel: "icon",
+			href: "data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🧢</text></svg>",
+		},
+		...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
+	];
+};
+
+export const meta: MetaFunction = () => {
+	return [
+		{ title: "uberschrift" },
+		{
+			name: "description",
+			content: "Zero-dependeny magic heading levels for React",
+		},
+	];
+};
 
 const App = () => {
 	return (
@@ -26,7 +48,14 @@ const App = () => {
 				<Links />
 			</head>
 			<body>
-				<Outlet />
+				<main className="prose lg:prose-xl p-4 lg:py-12 max-w-screen-md m-auto">
+					<div className="flex flex-row justify-between items-center">
+						<Hx className="mb-0">uberschrift 🧢</Hx>
+						<Ribbon />
+					</div>
+					<Outlet />
+				</main>
+
 				<ScrollRestoration />
 				<Scripts />
 				<LiveReload />

diff --git a/apps/docs/app/README.mdx → apps/docs/app/routes/_index.mdx b/apps/docs/app/README.mdx → apps/docs/app/routes/_index.mdx
@@ -1,7 +1,5 @@
 import { Hx, HxBoundary } from "uberschrift";
-import { Clipboardable } from "./components/clipboardable";
-
-<Hx>🧢 uberschrift</Hx>
+import { Clipboardable } from "../components/clipboardable";
 
 Zero-dependeny magic heading levels for React
 
@@ -17,7 +15,7 @@ Zero-dependeny magic heading levels for React
 </HxBoundary>
 ```
 
-🪄 ✨
+<div className="magic text-center">🪄 ✨</div>
 
 ```html
 <h1>I'm the h1!'</h1>
@@ -29,11 +27,11 @@ Zero-dependeny magic heading levels for React
 
 <HxBoundary>
 
-<Hx>🤸 Motivation</Hx>
+<Hx>Motivation 🤸</Hx>
 
 <HxBoundary>
 
-<Hx>👀 Why heading levels (h1, h2, …) matter</Hx>
+<Hx>Why heading levels (h1, h2, …) matter 👀</Hx>
 
 Grouping text sections underneath headings adds a logical hierarchy to the contents of a page, contributing to both accessibility and search engine optimization (SEO). Heading elements, ranging from `<h1>` to `<h6>`, represent different levels of importance and organization.
 
@@ -51,11 +49,11 @@ Here's an example of a DOM structure with incorrect heading order:
 <h4>This should have been preceded by an h3! ❌</h4>
 ```
 
-<Hx>🤷 Why is dealing with heading levels difficult?</Hx>
+<Hx>Why is dealing with heading levels difficult? 🤷</Hx>
 
 In React projects, component encapsulation often makes chosing the right heading level within these components hard. They are often nested in an unforeseeable way, so the heading you chose to be an `<h3>` could now be used outside of the boundary of an `<h2>`, messing up the order.
 
-<Hx>🧢 How does uberschrift help?</Hx>
+<Hx>How does uberschrift help? 🧢</Hx>
 
 uberschrift provides you with two components: one we call `<Hx>` (as in "heading level x") that you should use for your headings; and one `<HxBoundary>` that you use to structure your document. Within these boundaries, `<Hx>` always choses the correct heading level. If you need to structure your document one level deeper, you wrap your component in a new `<HxBoundary>`.
 
@@ -65,7 +63,7 @@ uberschrift provides you with two components: one we call `<Hx>` (as in "heading
 
 ---
 
-<Hx>🛠️ Usage</Hx>
+<Hx>Usage 🛠️</Hx>
 
 <Clipboardable content="npm install uberschrift">
 ```sh
@@ -75,7 +73,7 @@ npm install uberschrift
 
 <HxBoundary>
 
-<Hx>📇 Example</Hx>
+<Hx>Example 📇</Hx>
 
 `page.tsx`:
 
@@ -129,15 +127,15 @@ renders as:
 
 </HxBoundary>
 
-<Hx>🤯 FAQ</Hx>
+<Hx>FAQ 🤯</Hx>
 
 <HxBoundary>
 
-<Hx>7️⃣ How does it handle heading elements nested below the 6th level?</Hx>
+<Hx>How does it handle heading elements nested below the 6th level? 7️⃣</Hx>
 
 The [HTML Spec](https://html.spec.whatwg.org/#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements) only allows h1 through h6 as elements and for most documents this should be more than enough.
 
-That being said: if you find yourself nesting deeper, you can make that possible by leveraging WAI-ARIA attributes, e.g.: `<div role="heading" aria-level="7">…</div>`. Uberschrift does that for you.
+That being said: if you find yourself nesting deeper, you can make that possible by leveraging WAI-ARIA attributes, e.g.: `<div role="heading" aria-level="7">…</div>`. uberschrift does that for you.
 
 If you want to style these elements, you can do it like this:
 
@@ -151,15 +149,26 @@ If you want to style these elements, you can do it like this:
 ```
 </Clipboardable>
 
-<Hx>🚗 How does it work under the hood?</Hx>
+<Hx>How does it work under the hood? 🚗</Hx>
+
+It's a simple use case of [React Context](https://react.dev/learn/passing-data-deeply-with-context): `HxBoundary` is merely a nestable context provider, that increments the heading level.
+
+In fact, you can use that context with `useHx` if you need it:
 
-It's a simple case of [React Context](https://react.dev/learn/passing-data-deeply-with-context): `HxBoundary` is merely a nestable context provider, that increments the heading level.
+```tsx
+import { useHx } from "uberschrift";
+
+const {
+  Element, // string, e.g "h4"
+  level    // number => 4
+} = useHx();
+```
 
 </HxBoundary>
 
 ---
 
-<Hx>❤️ Sponsors</Hx>
+<Hx>Sponsors ❤️</Hx>
 
 [<img className="inline" alt="Peerigon GmbH" src="https://assets.peerigon.com/peerigon/logo/peerigon-logo-flat-spinat.png" width="150" />](https://peerigon.com)
 

diff --git a/apps/docs/app/routes/_index.tsx b/apps/docs/app/routes/_index.tsx
diff --git a/apps/docs/app/tailwind.css b/apps/docs/app/tailwind.css
@@ -5,3 +5,18 @@
 code.hljs {
 	background: transparent !important;
 }
+
+.prose h1,
+.prose h2,
+.prose h3,
+.prose h4,
+.prose h5,
+.prose h6,
+.prose .magic {
+	color: #1e40af;
+	filter: sepia(1) hue-rotate(200deg) saturate(15);
+}
+
+.prose .magic {
+	font-size: 2em !important;
+}
diff --git a/packages/react/README.md b/packages/react/README.md
@@ -1,11 +1,10 @@
-# `<Hx>🧢 uberschrift</Hx>`
+# `<Hx>uberschrift 🧢</Hx>`
 
 **Zero-dependeny magic heading levels for React**
 
 ---
 
 [![npm version badge](https://img.shields.io/npm/v/uberschrift?style=flat-square)](https://npmjs.com/package/uberschrift)<br />
-[![dependency badge](https://img.shields.io/librariesio/release/npm/uberschrift?style=flat-square)](https://libraries.io/npm/uberschrift)<br />
 [![Issue badge](https://img.shields.io/github/issues/peerigon/uberschrift?style=flat-square)](https://github.com/peerigon/uberschrift/issues)<br />
 [![CI badge](https://github.com/peerigon/uberschrift/actions/workflows/ci.yml/badge.svg)](https://github.com/peerigon/uberschrift/actions/workflows/pull_request.yml)