more boiler content

Author: barelyhuman

pnpm-lock.yaml

@@ -22,7 +22,7 @@
                         >
                             <a
                                 href={crumb.href ?? "?#"}
-                                class="focus:underline focus:outline-none font-serif italic"
+                                class="focus:underline focus:outline-none font-semibold italic font-serif"
                                 aria-label="Return to top of page"
                                 >{crumb.label}</a
                             >

src/components/breadcrumbs.svelte renamed to src/_components/breadcrumbs.svelte

@@ -0,0 +1,18 @@
+<script>
+    import Breadcrumbs from "./breadcrumbs.svelte";
+    let { crumbs = [] } = $props();
+</script>
+
+<header class="h-[200px] flex flex-col items-center justify-center">
+    {#if crumbs.length}
+        <Breadcrumbs {crumbs} />
+    {:else}
+        <div class="relative h-1/2">
+            <div class="h-full flex items-center justify-center">
+                <h1 class="font-sm text-zinc-800 font-semibold z-10">
+                    tinytown.studio
+                </h1>
+            </div>
+        </div>
+    {/if}
+</header>

src/_components/navbar.svelte

@@ -0,0 +1,3 @@
+{
+  "data": "Page still under construction"
+}

src/_content/what.json

@@ -0,0 +1,3 @@
+{
+  "data": "Page still under construction"
+}

src/_content/why.json

@@ -1,15 +1,16 @@
 <script>
     import { marked } from "marked";
-    import Navbar from "./components/navbar.svelte";
+    import Navbar from "./_components/navbar.svelte";
     const toolsContent = marked(`
 ### Our Tools
 - [pub](https://github.com/TinyTownStudio/pub) ↗
       `);
 
     const companyContent = marked(`
-### Company
-- [Who are we?](/who)
-- [Team](/team)
+### The
+- [Who?](/who)
+- [Why?](/why)
+- [What?](/what)
 `);
 
     const appsContent = marked(`
@@ -20,7 +21,7 @@
 <Navbar />
 <main class="mt-10 max-w-full prose prose-zinc">
     <div
-        class="max-w-4xl mx-auto grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3"
+        class="max-w-4xl px-10 sm:px-2 mx-auto grid gap-10 grid-cols-1 sm:grid-cols-3"
     >
         <div class="prose prose-zinc">
             {@html companyContent}

src/components/navbar.svelte

@@ -0,0 +1,13 @@
+<script>
+    import Navbar from "./_components/navbar.svelte";
+    import content from "./_content/what.json";
+    import { marked } from "marked";
+    const parsedContent = marked(content.data);
+</script>
+
+<Navbar crumbs={[{ href: "/what", label: "What?" }]} />
+<main class="mt-10 max-w-full prose prose-zinc">
+    <article class="max-w-4xl mx-auto grid grid-cols-1">
+        {@html parsedContent}
+    </article>
+</main>

src/index.svelte

@@ -1,16 +1,39 @@
 <script>
-    import { marked } from "marked";
-    import Navbar from "./components/navbar.svelte";
-    const who = marked(`
-We build things
-      `);
+    import Navbar from "./_components/navbar.svelte";
+    const team = [
+        {
+            name: "reaper",
+            link: "https://reaper.is",
+            about: "A dev drowing in code trying out ways to swim out while making it easier to drown and swim out easier the next time.",
+            from: "In his own words",
+        },
+        {
+            name: "mellow",
+            link: "https://mellow.dev",
+            about: 'Plant based minimalist. Interested in altruism, essentialism, intentionalism, and probably some other "isms".',
+            from: "In his own words",
+        },
+    ];
 </script>
 
-<Navbar crumbs={[{ href: "", label: "Who are we?" }]} />
+<Navbar crumbs={[{ href: "/who", label: "Who?" }]} />
 <main class="mt-10 max-w-full prose prose-zinc">
     <div class="max-w-4xl mx-auto grid grid-cols-1">
-        <div class="prose prose-zinc h-[200vh]">
-            {@html who}
-        </div>
+        {#each team as teamMember}
+            <a
+                href={teamMember.link}
+                target="_blank"
+                rel="noreferrer noopener"
+                class="hover:underline-offset-4 underline hover:text-black text-zinc-800"
+            >
+                {teamMember.name} ↗
+            </a>
+            <p class="text-sm text-zinc-600 mb-0">
+                <span><em>{teamMember.from}</em></span>
+            </p>
+            <p class="text-sm text-zinc-600">
+                {teamMember.about}
+            </p>
+        {/each}
     </div>
 </main>