Merge pull request #1267 from doeixd/main

Docs: Typography and code highlight fixes

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;">

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>

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;
 }

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";

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);

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) => {

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() {

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";

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.