From d349e2162bd1192f8ce49a5b7d37aa1e6be71ccf Mon Sep 17 00:00:00 2001
From: Patrick Glenn <pglenn@amring.com>
Date: Thu, 18 Jan 2024 09:53:31 -0500
Subject: [PATCH] Docs: Typography and code highlight fixes

---
 docs/app.tsx                                  |  8 +++---
 docs/components/components.tsx                |  2 +-
 docs/components/index.css                     | 26 ++++++++++++++-----
 docs/routes/api/HttpStatusCode.md             |  2 +-
 docs/routes/api/server.md                     |  2 +-
 docs/routes/core-concepts/actions.md          |  3 ++-
 docs/routes/core-concepts/data-loading.mdx    | 11 ++++----
 .../core-concepts/route-prerendering.mdx      |  3 ++-
 .../routes/core-concepts/state-management.mdx |  1 +
 9 files changed, 38 insertions(+), 20 deletions(-)

diff --git a/docs/app.tsx b/docs/app.tsx
index 9d62a28f1..9decb6473 100644
--- a/docs/app.tsx
+++ b/docs/app.tsx
@@ -59,10 +59,10 @@ const socials = [
 
 function SocialIcon(props) {
   return (
-    <li class="mx-2">
+    <li class="mx-1.5">
       <a href={props.href} rel="noopener" target="_blank">
         <span class="sr-only">{props.alt}</span>
-        <svg viewBox="0 0 24 24" class="h-6 opacity-60 transition hover:opacity-80 opacity-40">
+        <svg viewBox="0 0 24 24" class="h-6 transition hover:opacity-80 opacity-40">
           <path fill="currentColor" d={props.icon} />
         </svg>
       </a>
@@ -75,7 +75,7 @@ function Header() {
     <header class="relative z-10 col-span-3 col-start-1 row-start-1 flex px-8 py-2 shadow-md shadow-gray-100 md:z-50">
       <div class="flex w-full justify-between">
         <a href="/">
-          <div class="flex space-x-3">
+          <div class="flex space-x-3 translate-y-[-2px]">
             <img src="/logo.svg" class="h-9 w-9 scale-[0.94] translate-y-[2px] translate-x-[4px]" />
             <div class="mt-2 hidden text-xl uppercase md:block -translate-y-[1px]">
               <span class="tracking-wide">Solid</span>
@@ -252,7 +252,7 @@ export default function Root() {
           <input type="checkbox" class="peer hidden" name="sidebar-toggle" id="sidebar-toggle" />
 
           <label
-            class="bg-solid-medium reveal-delay fixed right-3 top-20 cursor-pointer rounded-lg text-white opacity-0 transition duration-500 peer-checked:rotate-90 md:hidden"
+            class="bg-solid-medium reveal-delay fixed right-10 top-[86px] cursor-pointer rounded-lg text-white opacity-0 transition ease-out duration-300 peer-checked:rotate-90 md:hidden"
             for="sidebar-toggle"
           >
             <svg class="h-7 w-7" viewBox="0 0 24 24" style="fill: none; stroke: currentcolor;">
diff --git a/docs/components/components.tsx b/docs/components/components.tsx
index f2f62118d..adc139f05 100644
--- a/docs/components/components.tsx
+++ b/docs/components/components.tsx
@@ -67,7 +67,7 @@ export const components = {
     <div>
       <Show when={props.filename?.length > 5}>
         <div
-          class={`px-3 py-1 w-full text-xs bg-slate-500 rounded-t text-slate-100 ${props.className}`}
+          class={`px-3 py-1 w-full text-xs bg-slate-700 font-mono rounded-t text-slate-300 ${props.className}`}
         >
           {props.filename}
         </div>
diff --git a/docs/components/index.css b/docs/components/index.css
index 4b24dbc65..55388c962 100644
--- a/docs/components/index.css
+++ b/docs/components/index.css
@@ -63,6 +63,10 @@ pre {
   /* border: 1px solid #ddd; */
 }
 
+.prose :where(pre):not(:where([class~="not-prose"] *)) {
+  border-radius: 0.25rem;
+}
+
 .dark .prose pre {
   border-color: #5d5d5d;
 }
@@ -82,16 +86,22 @@ pre {
 }
 
 .prose h2 {
-  margin-top: 100px;
+  margin-top: 80px;
   font-size: 1.7rem;
-  letter-spacing: 0.1px;
-  padding-bottom: 22px;
+  letter-spacing: 0.25px;
+  padding-bottom: 15px;
+  line-height: 1.6;
 }
 
+.prose h1 + h2, .prose h2 + h3, .prose h3 + h4 {
+  margin-top: 15px
+} 
+
 .prose h1 {
-  font-size: 1.8rem;
-  letter-spacing: 0.1px;
+  font-size: 2.2rem;
+  letter-spacing: 0.3px;
   padding-bottom: 22px;
+  line-height: 1.3;
 }
 
 .prose h3 {
@@ -370,7 +380,7 @@ h4 {
 }
 
 .snippet .line.highlight {
-  @apply bg-slate-50 bg-opacity-20;
+  @apply bg-slate-50 bg-opacity-[9%];
 }
 
 .line {
@@ -385,6 +395,10 @@ h4 {
   @apply overflow-x-scroll;
 }
 
+.prose pre code {
+  font-size: 1rem;
+}
+
 .not-prose :where(code):not(:where(pre *)) {
   @apply p-0.5;
 }
diff --git a/docs/routes/api/HttpStatusCode.md b/docs/routes/api/HttpStatusCode.md
index ef2f0a023..42996b37f 100644
--- a/docs/routes/api/HttpStatusCode.md
+++ b/docs/routes/api/HttpStatusCode.md
@@ -53,7 +53,7 @@ You can throw errors from inside these fetchers. These will be caught by the nea
 
 Keep in mind, when streaming responses (`renderStream`), the HTTP Status can only be included if added before the stream first flushed. Be sure to add `deferStream` to any resources calls that need to be loaded before responding.
 
-```tsx twoslash {8,18-23} filename="routes/[house].tsx"
+```tsx twoslash {7,17-19, 15, 23} filename="routes/[house].tsx"
 import { Show, ErrorBoundary } from "solid-js";
 import { cache, createAsync } from "@solidjs/router";
 import { HttpStatusCode } from "@solidjs/start";
diff --git a/docs/routes/api/server.md b/docs/routes/api/server.md
index 341674e06..4d1faf751 100644
--- a/docs/routes/api/server.md
+++ b/docs/routes/api/server.md
@@ -30,7 +30,7 @@ const logHello = async (message: string) => {
 
 To create a function that only runs on the server, insert `"use server"` directive at the top of the function.
 
-```tsx twoslash {4-6}
+```tsx twoslash {2}
 const logHello = async (message: string) => {
   "use server";
   console.log(message);
diff --git a/docs/routes/core-concepts/actions.md b/docs/routes/core-concepts/actions.md
index 1b2c788f0..915221fe2 100644
--- a/docs/routes/core-concepts/actions.md
+++ b/docs/routes/core-concepts/actions.md
@@ -59,6 +59,7 @@ In many cases, after submitting data the server sends some data back as well. Us
 
 ```tsx twoslash
 import { action, useAction, useSubmission } from "@solidjs/router";
+
 const echo = action(async (message: string) => {
   await new Promise((resolve, reject) => setTimeout(resolve, 1000));
   return message;
@@ -120,7 +121,7 @@ Sometimes we need to make sure our action _only_ runs on the server. This is use
 
 To do this, put a `"use server";` directive in your action function:
 
-```tsx twoslash
+```tsx twoslash {4}
 import { action, redirect } from "@solidjs/router";
 
 const isAdmin = action(async (formData: FormData) => {
diff --git a/docs/routes/core-concepts/data-loading.mdx b/docs/routes/core-concepts/data-loading.mdx
index 815aa5b5d..fbd394825 100644
--- a/docs/routes/core-concepts/data-loading.mdx
+++ b/docs/routes/core-concepts/data-loading.mdx
@@ -7,16 +7,17 @@ active: true
 
 # Data loading
 
-What's a modern app without some data to power it. SolidStart aims to make it easy to load data from your data sources. It will help you keep your UI updated with your data. For most of your data requirements, you will likely be using the route to decide what data to load.
+What's a modern app without some data to power it? SolidStart aims to make it easy to load data from your data sources. It will help you keep your UI updated with your data. For most of your data requirements, you will likely be using the route to decide what data to load.
 
-The URL is the primary way of navigating around your app. SolidStart already has nested routing to help structure your app's UI in a hierarchical way, so that you can share layouts.
+The URL is the primary way of navigating around your app. SolidStart has nested routing to help structure your app's UI in a hierarchical way, so that you can share layouts.
 
 Solid has a [`createResource`][createResource] primitive that takes an async function and returns a [signal][signal] from it. It's a great starting place for your data needs. It integrates with [`Suspense`][Suspense] and [`ErrorBoundary`][ErrorBoundary] to help you manage your lifecycle. Let's take a look at how we can use this to load data from a third party API for our app.
 
-```tsx twoslash
+```tsx twoslash {6-9}
 import { For, createResource } from "solid-js";
 
 type Student = { name: string; house: string };
+
 export default function Page() {
   const [students] = createResource(async () => {
     const response = await fetch("https://hogwarts.deno.dev/students");
@@ -31,7 +32,7 @@ However, fetching inside your components can cause unnecessary waterfalls especi
 
 Libraries like Tanstack Query enable this but for the example below we will be using the data in APIs in `@solidjs/router`.
 
-```tsx twoslash filename="/routes/students.tsx"
+```tsx twoslash filename="/routes/students.tsx" {6, 9, 12}
 import { For } from "solid-js";
 import { createAsync, cache } from "@solidjs/router";
 
@@ -66,7 +67,7 @@ The primary advantage of being a full-stack Javascript framework is that its eas
 
 It could be database access, or internal APIs, etc. It could sit within your functions where you need to use your server. We use `"use server";` for this. It's a special comment that tells the bundler to create an RPC and not include the code in the client bundle .
 
-```tsx twoslash filename="/routes/students.tsx"
+```tsx twoslash filename="/routes/students.tsx" {7}
 const hogwarts = {
   students: {
     list() {
diff --git a/docs/routes/core-concepts/route-prerendering.mdx b/docs/routes/core-concepts/route-prerendering.mdx
index 0f20e44f2..b5b09f842 100644
--- a/docs/routes/core-concepts/route-prerendering.mdx
+++ b/docs/routes/core-concepts/route-prerendering.mdx
@@ -3,10 +3,11 @@ section: core-concepts
 title: Route Pre-rendering
 order: 5
 ---
+# Route Pre-rendering
 
 It can be beneficial to render pages at build time instead of on demand. We can accomplish this by passing
 a prerender option to our SolidStart server. The simplest way to get started is pass a list of routes to be
-pre-rendererd to the `routes` option.
+pre-rendered to the `routes` option.
 
 ```js
 import { defineConfig } from "@solidjs/start/config";
diff --git a/docs/routes/core-concepts/state-management.mdx b/docs/routes/core-concepts/state-management.mdx
index efbd61bde..e0f4f6d0a 100644
--- a/docs/routes/core-concepts/state-management.mdx
+++ b/docs/routes/core-concepts/state-management.mdx
@@ -3,6 +3,7 @@ section: core-concepts
 title: State Management
 order: 100
 ---
+# State Management
 
 There are many different ways to store and manage state in a Solid Start app. In this section we will discuss some of the most common ways to manage state in a project.