More improvements

Author: patrickgwsmith

app/navs/primary.tsx

@@ -75,19 +75,19 @@ export function PrimaryNavigation({
         {makeNavItems}
         <li role="separator" data-y="1" />
         <li>
-          <NavLink href="/4-function-of">{"More than the view"}</NavLink>
+          <NavLink href="/4-why-not">{"More than the view"}</NavLink>
         </li>
         <li>
-          <NavLink href="/4-javascript-everywhere">
+          <NavLink href="/4-benefits">
             {"JavaScript’s benefits"}
           </NavLink>
         </li>
         <li>
-          <NavLink href="/5-libraries">{"Open source libraries"}</NavLink>
+          <NavLink href="/4-libraries">{"Open source libraries"}</NavLink>
         </li>
         <li role="separator" data-y="1" />
         <li>
-          <NavLink href="/5-thanks">{"Thanks"}</NavLink>
+          <NavLink href="/4-thanks">{"Thanks"}</NavLink>
         </li>
       </ul>
     </nav>

app/routes/5-libraries.tsx app/routes/4-libraries.tsxapp/routes/5-libraries.tsx renamed to app/routes/4-libraries.tsx

@@ -22,10 +22,10 @@ export default function LibrariesPage() {
       <h2>Open Source Libraries</h2>
       <nav data-text="1">
         <ul {...Y(1)}>
-          <li><a href="https://github.com/RoyalIcing/yieldparser">yieldparser:</a> Parser components</li>
-          <li><a href="https://github.com/RoyalIcing/yieldmarkup">yieldmarkup:</a> Async HTML components</li>
-          <li><a href="https://github.com/RoyalIcing/yieldmachine">yieldmachine:</a> Define state machines with generator functions</li>
-          <li><a href="https://github.com/RoyalIcing/yieldpattern">yieldpattern:</a> Pattern matching in vanilla JavaScript with generator functions</li>
+          <li><a href="https://github.com/RoyalIcing/yieldparser" style={{ color: "#F59E0B" }}>RoyalIcing/yieldparser:</a> Parse strings using composable components.</li>
+          <li><a href="https://github.com/RoyalIcing/yieldmarkup" style={{ color: "#A78BFA" }}>RoyalIcing/yieldmarkup:</a> Async HTML components.</li>
+          <li><a href="https://github.com/RoyalIcing/yieldmachine" style={{ color: "#10B981" }}>RoyalIcing/yieldmachine:</a> Define state machines with generator functions.</li>
+          <li><a href="https://github.com/RoyalIcing/yieldpattern" style={{ color: "#EC4899" }}>RoyalIcing/yieldpattern:</a> Pattern matching in vanilla JavaScript with generator functions.</li>
         </ul>
       </nav>
 

app/routes/5-thanks.tsx app/routes/4-thanks.tsxapp/routes/5-thanks.tsx renamed to app/routes/4-thanks.tsx

@@ -0,0 +1,58 @@
+import type { MetaFunction, LinksFunction, LoaderFunction } from "remix";
+import { Y } from "../view/structure";
+
+export let meta: MetaFunction = () => {
+  return {
+    title: "Open Source Libraries: JavaScript Regenerated",
+    description: "Generator Component libraries you can install today",
+  };
+};
+
+export let links: LinksFunction = () => {
+  return [];
+};
+
+export let loader: LoaderFunction = async () => {
+  return {};
+};
+
+export default function LibrariesPage() {
+  return (
+    <main data-measure="center">
+      <h2>React popularised:</h2>
+      <nav data-text="1">
+        <ul {...Y(1)}>
+          <li>
+            <code>{"route = f(url)"}</code>
+          </li>
+        </ul>
+      </nav>
+      <h2>Why don’t we have?</h2>
+      <nav data-text="1">
+        <ul {...Y(1)}>
+          <li>
+            <code>{"route = f(url)"}</code>
+          </li>
+          <li>
+            <code>{"apiData = f(route)"}</code>
+          </li>
+          <li>
+            <code>{"apiRequest = f(form)"}</code>
+          </li>
+          <li>
+            <code>{"state = f(events)"}</code>
+          </li>
+          <li>
+            <code>{"cssVariables = f(tokens)"}</code>
+          </li>
+          <li>
+            <code>{"cssRules = f(selector)"}</code>
+          </li>
+          <li>
+            <code>{"localizedText = f(key, values)"}</code>
+          </li>
+        </ul>
+      </nav>
+    </main>
+  );
+}