doc

ysmood · Oct 29, 2024 · 3833462 · 3833462
1 parent 0ab915f
commit 3833462
Show file tree

Hide file tree

Showing 4 changed files with 121 additions and 13 deletions.
diff --git a/examples/App.tsx b/examples/App.tsx
@@ -1,15 +1,15 @@
 import "./index.css";
-import { Link, Switch, Router, Route } from "wouter";
+import { Link, Switch, Router, Route, useLocation } from "wouter";
 import { lazy, Suspense } from "react";
 
 type Import = () => Promise<{ default: React.ComponentType<unknown> }>;
 
-const examples: { [key: string]: Import } = {
-  Counter: () => import("./Counter"),
-  CounterPersistent: () => import("./CounterPersistent"),
+const examples = {
+  "Counter.tsx": () => import("./Counter"),
+  "CounterPersistent.tsx": () => import("./CounterPersistent"),
   MonolithStore: () => import("./MonolithStore"),
   TodoApp: () => import("./TodoApp"),
-  Devtools: () => import("./Devtools"),
+  "Devtools.tsx": () => import("./Devtools"),
 };
 
 export default function App() {
@@ -18,10 +18,14 @@ export default function App() {
       <Navbar />
 
       <Switch>
-        <ExampleRoute path="/" im={examples.Counter} />
+        <ExampleRoute path="/" im={examples["Counter.tsx"]} />
         <Router base="/examples">
           {Object.keys(examples).map((name) => (
-            <ExampleRoute key={name} path={`/${name}`} im={examples[name]} />
+            <ExampleRoute
+              key={name}
+              path={`/${name}`}
+              im={(examples as { [key: string]: Import })[name]}
+            />
           ))}
         </Router>
       </Switch>
@@ -30,26 +34,46 @@ export default function App() {
 }
 
 function Navbar() {
+  let [location] = useLocation();
+  if (location === "/") location = "/examples/Counter.tsx";
+
   return (
-    <>
+    <div className="navbar flex item-center gap-2">
+      <div className="logo">Stalo Examples</div>
       {Object.keys(examples).map((name) => {
+        const href = `/examples/${name}`;
         return (
-          <Link href={`/examples/${name}`} key={name} className={"mx-1"}>
-            {name}
+          <Link href={href} key={name}>
+            <Button text={name} active={location === href} />
           </Link>
         );
       })}
-    </>
+    </div>
   );
 }
 
 function ExampleRoute({ path, im }: { path: string; im: Import }) {
   const Example = lazy(im);
+  const link = `https://github.com/ysmood/stalo/blob/main/examples${path}`;
+
   return (
     <Route path={path}>
       <Suspense fallback={<h2>Loading...</h2>}>
+        <div className="my-1 button">
+          <a
+            href={link}
+            target="about:blank"
+            title="Source code of current example"
+          >
+            SOURCE CODE
+          </a>
+        </div>
         <Example />
       </Suspense>
     </Route>
   );
 }
+
+function Button({ text, active }: { text: string; active: boolean }) {
+  return <div className={"button" + (active ? " active" : "")}>{text}</div>;
+}
diff --git a/examples/favicon.ico b/examples/favicon.ico
diff --git a/examples/index.css b/examples/index.css
@@ -1,5 +1,20 @@
+@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap");
+
 :root {
   --size-1: 4px;
+  --size-2: 10px;
+}
+
+body {
+  font-family: "Roboto", serif;
+  background-color: #f6f6f9;
+  color: rgb(26, 26, 26);
+}
+
+h1,
+h2,
+h3 {
+  color: rgb(46, 46, 46);
 }
 
 .mx-1 {
@@ -16,6 +31,75 @@
   display: flex;
 }
 
+.item-center {
+  align-items: center;
+}
+
 .gap-1 {
   gap: var(--size-1);
 }
+
+.gap-2 {
+  gap: var(--size-2);
+}
+
+.navbar {
+  border-bottom: 2px solid #ffffff;
+  padding-bottom: 10px;
+  margin-bottom: 5px;
+}
+
+.logo {
+  display: inline-block;
+  font-size: 20px;
+  color: rgb(48, 50, 54);
+}
+
+a {
+  text-decoration: none;
+  color: rgb(48, 50, 54);
+}
+
+a:visited {
+  color: rgb(86, 87, 87);
+}
+
+.button {
+  color: rgb(95, 95, 95);
+  background-color: #fff;
+  border: none;
+  padding: 5px 10px;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  border-radius: 3px;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+  display: inline-block;
+  border: 1px solid #fff;
+}
+
+.button:hover {
+  color: rgb(0, 0, 0);
+  transform: scale(1.03);
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+}
+
+.button:active {
+  transform: scale(1);
+}
+
+.button.active {
+  color: #000;
+  text-decoration: underline dashed;
+  box-shadow: none;
+  animation: glow 1.5s infinite ease-in;
+}
+
+@keyframes glow {
+  0%,
+  100% {
+  }
+  50% {
+    background: none;
+  }
+}
diff --git a/examples/index.spec.tsx b/examples/index.spec.tsx
@@ -1,7 +1,7 @@
 import { test, expect } from "@playwright/test";
 
 test("counter", async ({ page }) => {
-  await page.goto("/examples/Counter");
+  await page.goto("/examples/Counter.tsx");
 
   const button = page.locator("button").first();
   const display = page.locator("h1").first();
@@ -16,7 +16,7 @@ test("counter", async ({ page }) => {
 });
 
 test("counter-persistent", async ({ page }) => {
-  await page.goto("/examples/CounterPersistent");
+  await page.goto("/examples/CounterPersistent.tsx");
 
   const button = page.locator("button").first();
   const display = page.locator("h1").first();