fix light mode, fix link color in banner component

Author: robin4a4

content/tutorials/getting-started-with-solid/building-ui-with-components.mdx

@@ -1,11 +1,12 @@
-import { PrevSection, NextSection, PrevNextSection } from "~/components/NextSection";
-import { CodeTabs } from "~/components/Tabs";
 import {
-  FrameworkAside,
-  Aside,
-} from "~/components/configurable/Aside";
+  PrevSection,
+  NextSection,
+  PrevNextSection,
+} from "~/components/NextSection";
+import { CodeTabs } from "~/components/Tabs";
+import { FrameworkAside, Aside } from "~/components/configurable/Aside";
 import HelloWorld from "./snippets/HelloWorld.mdx";
-import HelloWorldExport from "./snippets/HelloWorldExport.mdx"
+import HelloWorldExport from "./snippets/HelloWorldExport.mdx";
 import HelloWorld2 from "./snippets/HelloWorld2.mdx";
 import HelloWorld3 from "./snippets/HelloWorld3.mdx";
 import IndexJS from "./snippets/indexjs.mdx";
@@ -36,14 +37,15 @@ inside our src folder. Then copy the following contents:
 
 There are a couple of things to note in our first component:
 
-- Our component name, `HelloWorld`, is title-cased (sometimes referred to as _Pascal_ case), with _*H*ello_ and _*W*orld_ capitalized. 
-This helps us differentiate components from other JavaScript functions.
+- Our component name, `HelloWorld`, is title-cased (sometimes referred to as _Pascal_ case), with _*H*ello_ and _*W*orld_ capitalized.
+  This helps us differentiate components from other JavaScript functions.
 - Our component returns something that looks a lot like HTML, but isn't—it's _JSX_.
 
 <FrameworkAside framework="react">
 While Solid components look like React components, they differ in a few distinct ways. Solid component functions _only run once_ to set up and never run again. If you're used to placing a calculation in the function body of a React component and expecting it to recompute when the component re-renders, you may need to take a different approach with Solid. Don't worry&mdash; we'll cover all the best practices throughout this tutorial.
 
 Like React, you can include as many components as you like within a file. You can even write a component _inside_ of another!
+
 </FrameworkAside>
 
 <FrameworkAside framework="vue">
@@ -57,12 +59,13 @@ In Solid, you can include as many components as you like within a file. You can
 </FrameworkAside>
 <FrameworkAside framework="svelte">
 
-In Svelte, components have _lifecycles_ that are important to how you work with them. 
+In Svelte, components have _lifecycles_ that are important to how you work with them.
 In Solid, components are simply functions that group your code. They
 don't have lifecycles, and Solid's rendering system is based on the _reactive_ features you use&mdash;we'll get
 to that!
 
 Svelte uses Single-File Components, but Solid does not. You can include as many components as you like within a file. You can even write a component _inside_ of another!
+
 </FrameworkAside>
 <FrameworkAside framework="angular">
 In Angular, components have _lifecycles_ that are important to how you work with
@@ -95,13 +98,13 @@ Then, let's replace the boilerplate in `App.tsx` with code that imports and disp
 We used our component just like any other element: after importing the `HelloWorld` function, we can now use `<HelloWorld />`.
 
 <Aside>
-  By building with components, we're able to separate and reuse code. Components let us
-  create building blocks that we can put together to form new pieces.
+  By building with components, we're able to separate and reuse code. Components
+  let us create building blocks that we can put together to form new pieces.
 </Aside>
 
 ## What is JSX?
 
-As we learned above, Solid components return JSX. JSX is an HTML-like syntax used in Solid JavaScript code to represent part of the Document Object Model (DOM). 
+As we learned above, Solid components return JSX. JSX is an HTML-like syntax used in Solid JavaScript code to represent part of the Document Object Model (DOM).
 In our <IfTS fallback="HelloWorld.jsx">HelloWorld.tsx</IfTS> example above, we returned the following JSX from our component:
 
 ```tsx
@@ -183,6 +186,7 @@ This syntax of binding HTML and attribute values are two different syntaxes in V
 ```html
 <div :style="style">Hello {{name}}!</div>
 ```
+
 </FrameworkAside>
 
 Let's update our initial `HelloWorld` component with what we learned in our JSX exploration:
@@ -210,7 +214,7 @@ But the following is _not_ valid JSX because there is no single containing eleme
 <HelloWorld />
 ```
 
-However, we may not actually want a `div` surrounding this code when it's rendered to the DOM. 
+However, we may not actually want a `div` surrounding this code when it's rendered to the DOM.
 _JSX fragments_ give us a way to write valid JSX and also not actually render a containing element to the DOM:
 
 ```tsx
@@ -232,24 +236,27 @@ _JSX fragments_ give us a way to write valid JSX and also not actually render a
 ### JSX is compiled
 
 JSX is syntax on top of JavaScript and is not directly part of any JavaScript standard. Therefore, JSX can't be run directly in the browser (or most other JavaScript runtimes). Solid and other frameworks that use JSX require their code to be run through a compiler. If you're using a starter template you don't have to worry about this&mdash;everything will just work out of the box.
- 
+
 <Aside type="note">
- Remember how we discussed that component function names are title-cased? This is so the compiler understands the difference between native DOM elements (like `div`) and custom components (like `HelloWorld`).
+  Remember how we discussed that component function names are title-cased? This
+  is so the compiler understands the difference between native DOM elements
+  (like `div`) and custom components (like `HelloWorld`).
 </Aside>
 
 <Aside type="advanced" collapsible title="Read more about the compiler">
   Solid's JSX compiler doesn't just compile JSX to JavaScript; it also extracts reactive values (which we'll get to later in the tutorial) and makes things more efficient along the way.
 
-  This is more involved than React's JSX compiler, but much less involved than something like Svelte's compiler. Solid's compiler doesn't touch your JavaScript, only your JSX.
+This is more involved than React's JSX compiler, but much less involved than something like Svelte's compiler. Solid's compiler doesn't touch your JavaScript, only your JSX.
+
+If you're curious about how Solid and other frameworks use compilation, check out [A Look at Compilation in JavaScript Frameworks](https://dev.to/this-is-learning/a-look-at-compilation-in-javascript-frameworks-3caj) by the creator of Solid.
 
-  If you're curious about how Solid and other frameworks use compilation, check out [A Look at Compilation in JavaScript Frameworks](https://dev.to/this-is-learning/a-look-at-compilation-in-javascript-frameworks-3caj) by the creator of Solid.
 </Aside>
 ## Mounting Solid to the DOM
 
 How does our `App` component make it on to the actual HTML page that we show our users?
 
-
 To add a Solid application to an HTML document, we first designate a containing element in our HTML and assign it an `id`. That usually looks like this:
+
 ```html
 <body>
   <div id="root"></div>
@@ -259,11 +266,13 @@ To add a Solid application to an HTML document, we first designate a containing
 Then, we call Solid's `render` function, passing in our `App` component and this element:
 
 ```jsx
-render(() => <App />, document.getElementById('root'));
+render(() => <App />, document.getElementById("root"));
 ```
 
 <FrameworkAside framework="vue">
-This is similar to Vue's [`app.mount`](https://vuejs.org/guide/essentials/application.html#mounting-the-app) function. 
+  This is similar to Vue's
+  [`app.mount`](https://vuejs.org/guide/essentials/application.html#mounting-the-app)
+  function.
 </FrameworkAside>
 
 See how this plays out in our project in the `index.html` file, which creates the div, and <IfTS fallback="src/index.jsx" code>src/index.tsx</IfTS>, which calls that `render` function:
@@ -273,27 +282,27 @@ See how this plays out in our project in the `index.html` file, which creates th
     { name: "src/HelloWorld.jsx", component: HelloWorld2 },
     { name: "src/App.jsx", component: App },
     { name: "src/index.tsx", component: IndexJS, default: true },
-    { name: "index.html", component: IndexHTML},
+    { name: "index.html", component: IndexHTML },
   ]}
   ts={[
     { name: "src/HelloWorld.tsx", component: HelloWorld2 },
     { name: "src/App.tsx", component: App },
     { name: "src/index.tsx", component: IndexTS, default: true },
-    { name: "index.html", component: IndexHTML},
+    { name: "index.html", component: IndexHTML },
   ]}
 />
 
-
 <Aside type="note">
 
- You'll want to make sure the first argument passed to the render function is a function that returns a component `() => <Component />` rather than just the component itself.
+You'll want to make sure the first argument passed to the render function is a function that returns a component `() => <Component />` rather than just the component itself.
 
 </Aside>
 
 <FrameworkAside framework="react">
 React defaults to having a `StrictMode` component added to the root of your app, which [changes the render behavior of your code depending on whether you're in a development mode or not](https://beta.reactjs.org/learn/keeping-components-pure#side-effects-unintended-consequences:~:text=Detecting%20impure%20calculations%20with%20StrictMode).
 
 Solid has no such behavioral differences between production and development rendering.
+
 </FrameworkAside>
 
 ## Composing multiple components together
@@ -326,7 +335,11 @@ Next, we create an `AddBook` component. This will be a form that eventually allo
 />
 
 Finally, we can _compose_ our `BookList` and `AddBook` components together. Let's create a `Bookshelf` component within
-<IfTS code fallback="App.jsx">App.tsx</IfTS>:
+
+<IfTS code fallback="App.jsx">
+  App.tsx
+</IfTS>
+:
 
 <CodeTabs
   js={[
@@ -390,12 +403,9 @@ function Bookshelf({ name }) {
 Thus far, we learned about Solid components, JSX, and built the foundation of a handy bookshelf app. Next, we'll bring our bookshelf to life using Solid's reactive system!
 
 <PrevNextSection>
-  <PrevSection
-    title="Welcome"
-    href="../building-ui-with-components"
-  />
+  <PrevSection title="Welcome" href="../building-ui-with-components" />
   <NextSection
     title="Adding Interactivity with State"
     href="../adding-interactivity-with-state"
   />
-</PrevNextSection>
+</PrevNextSection>

content/tutorials/getting-started-with-solid/components/FinishedBookshelf.tsx

@@ -27,7 +27,7 @@ export function FinishedBookshelf(props: IBookshelfProps) {
 
   return (
     <InteractiveExample>
-      <div class="bg-solid-darkbg border dark:border-solid-darkitem rounded-lg">
+      <div class="dark:bg-solid-darkbg border dark:border-solid-darkitem rounded-lg">
         <div class="p-4">
           <h2 class="text-2xl font-semibold mb-4">{props.name}'s Bookshelf</h2>
           <BookList books={books()} />
@@ -36,19 +36,13 @@ export function FinishedBookshelf(props: IBookshelfProps) {
           <Show
             when={showForm()}
             fallback={
-              <Button
-                type="button"
-                onClick={toggleForm}
-              >
+              <Button type="button" onClick={toggleForm}>
                 Add a book
               </Button>
             }
           >
             <AddBook setBooks={setBooks} />
-            <Button
-              type="button"
-              onClick={toggleForm}
-            >
+            <Button type="button" onClick={toggleForm}>
               Finished adding books
             </Button>
           </Show>
@@ -67,7 +61,9 @@ export function BookList(props: IBookListProps) {
 
   return (
     <>
-      <p class="font-semibold flex items-center gap-2">My books <Dot number={totalBooks()}/></p>
+      <p class="font-semibold flex items-center gap-2">
+        My books <Dot number={totalBooks()} />
+      </p>
       <ul class="list-disc ml-4 mt-2">
         <For each={props.books}>
           {(book) => {
@@ -108,23 +104,31 @@ function AddBook(props: IAddBookProps) {
 
   return (
     <>
-      <form>
-        <SearchInput label="search books" id="title" input={input()} onInput={(e) => {
-          setInput(e.currentTarget.value);
-        }}/>
-        <button
-          class="px-3 py-2 rounded bg-blue-200 text-black"
+      <form class="flex items-center gap-2">
+        <SearchInput
+          label="search books"
+          id="title"
+          input={input()}
+          onInput={(e) => {
+            setInput(e.currentTarget.value);
+          }}
+          small={true}
+        />
+        <Button
           type="submit"
           onClick={(e) => {
             e.preventDefault();
             setQuery(input());
           }}
         >
           Search
-        </button>
+        </Button>
       </form>
-      <Show when={!data.loading} fallback={<>Searching...</>}>
-        <ul class="list-disc ml-5 my-4">
+      <Show
+        when={!data.loading}
+        fallback={<div class="py-2">Searching...</div>}
+      >
+        <ul class="list-disc ml-4 my-2">
           <For each={data()}>
             {(book) => (
               <li class="mb-1">

src/components/Button.tsx

@@ -1,5 +1,17 @@
 import { JSXElement } from "solid-js";
 
-export default function Button(props: {type: 'submit' | 'button', onClick?: () => void, children: JSXElement}) {
-    return <button type={props.type} onClick={props.onClick} class="bg-solid-accent hover:bg-solid-accent/90 rounded p-2 font-semibold text-white flex items-center justify-center">{props.children}</button>
-}
+export default function Button(props: {
+  type: "submit" | "button";
+  onClick?: (e: any) => void;
+  children: JSXElement;
+}) {
+  return (
+    <button
+      type={props.type}
+      onClick={props.onClick}
+      class="bg-solid-accent hover:bg-solid-accent/90 rounded p-2 font-semibold text-white flex items-center justify-center"
+    >
+      {props.children}
+    </button>
+  );
+}

src/components/Dot.tsx

@@ -1,3 +1,7 @@
-export default function Dot(props: {number: number}) {
-    return <div class="rounded-full w-6 h-6 grid place-content-center bg-white text-solid-accent">{props.number}</div>
-}
+export default function Dot(props: { number: number }) {
+  return (
+    <div class="rounded-full pt-1 w-6 h-6 border border-solid-lightitem dark:border-solid-darkitem grid place-content-center bg-solid-light dark:bg-white text-solid-accent font-bold">
+      {props.number}
+    </div>
+  );
+}

src/components/Main.tsx

@@ -4,6 +4,7 @@ import { Title as MetaTitle } from "@solidjs/meta";
 import Footer from "./footer/Footer";
 import { getStartSection } from "./nav/Nav";
 import { usePageState } from "./context/PageStateContext";
+import Dot from "./Dot";
 
 export function Main(props) {
   const location = useLocation();
@@ -13,7 +14,7 @@ export function Main(props) {
 
   return (
     <main class="flex-grow flex flex-col md:flex-row items-start justify-between">
-      <article class="min-w-0 max-w-4xl mx-auto">
+      <article class="min-w-0 md:max-w-4xl lg:max-w-3xl mx-auto">
         <div class="flex justify-start">
           <div class="flex w-full flex-col min-h-screen md:px-5 sm:px-12">
             <div
@@ -36,20 +37,21 @@ export function Main(props) {
           </div>
         </div>
       </article>
-      <div class="pt-10 ml-4 max-w-xs sticky top-0">
-          <p class="text-2xl font-bold">
-            Summary
-          </p>
-          <ol class="pl-5 mt-2 list-decimal space-y-1">
-            <For each={sections()}>
-              {(item) => (
-                <li class="text-base py-2">
-                  <a href={"#" + item.href}>{item.title}</a>
-                </li>
-              )}
-            </For>
-          </ol>
-        </div>
+      <div class="pt-10 max-w-xs sticky top-0 pr-4">
+        <p class="text-2xl font-bold">Summary</p>
+        <ol class="mt-2 list-none space-y-1">
+          <For each={sections()}>
+            {(item, index) => (
+              <li class="text-base py-2 flex items-center gap-2 rounded hover:bg-solid-light hover:dark:bg-solid-darkbg px-2">
+                <Dot number={index()} />
+                <a class="font-semibold" href={"#" + item.href}>
+                  {item.title}
+                </a>
+              </li>
+            )}
+          </For>
+        </ol>
+      </div>
     </main>
   );
 }