(wiki) basic styles

src/components/tree/List.astro

@@ -5,27 +5,32 @@ import type { Maybe } from "purify-ts";
 
 interface Props {
   tree: Tree;
+  slug: string;
   prefix: Maybe<string>;
 }
 
-const { tree, prefix } = Astro.props;
+const { tree, slug, prefix } = Astro.props;
 ---
 
 {tree.children
   .map(m => Object.values(m))
   .filter(xs => xs.length > 0)
   .map(pages => 
-    <ul>
-      {pages.map(page => 
-        <li>
-          {page.slug
-            .chain(slug => prefix.map(prefix => pathify(prefix, slug)))
-            .mapOrDefault(href =>
-              <a href={href}>{page.title}</a>,
-              <span>{page.title}</span>
-          )}
-          <Astro.self tree={page} prefix={prefix} />
-        </li>
+    <ul class="link-tree__nav-list">
+      {pages
+        .map(page => ({...page, current: page.slug.mapOrDefault(other => other === pathify(slug), false)}))
+        .map(page => 
+          <li class="link-tree__nav-list-item">
+            {page.slug
+              .chain(slug => prefix.map(prefix => pathify(prefix, slug)))
+              .mapOrDefault(href =>
+                <a class="link-tree__nav-list-text" class:list={{ current: page.current }} href={href}>
+                  {page.title}
+                </a>,
+                <span class="link-tree__nav-list-text">{page.title}</span>
+            )}
+            <Astro.self tree={page} slug={slug} prefix={prefix} />
+          </li>
       )}
     </ul>
 ).extract()}

src/components/tree/Tree.astro

@@ -6,21 +6,21 @@ import type { Maybe } from "purify-ts";
 
 interface Props {
   tree: Tree;
+  slug: string;
   prefix: Maybe<string>;
 }
 
-const { tree, prefix } = Astro.props;
-
+const { tree, slug, prefix } = Astro.props;
 ---
 
 <aside class="link-tree">
   <h2 class="link-tree__heading">
     {prefix.map(pathify).mapOrDefault(href =>
-      <a href={href}>Personal wiki</a>,
-      <span>Personal Wiki</span>
+      <a class="link-tree__heading-text" href={href}>Personal wiki</a>,
+      <span class="link-tree__heading-text">Personal Wiki</span>
     )}
   </h2>
-  <section>
-    <List tree={tree} prefix={prefix} />
-  </section>
+  <nav class="link-tree__nav">
+    <List tree={tree} slug={slug} prefix={prefix} />
+  </nav>
 </aside>

src/content/wiki/typescript/index.md

@@ -1,5 +1,5 @@
 ---
-title: "Hello"
+title: "TypeScript"
 slug: "typescript"
 ---
 Hello

src/content/wiki/typescript/type-challenges.md

@@ -1,5 +1,5 @@
 ---
-title: "Hello"
+title: "Type Challenges"
 ---
 
 ## 4・Pick

src/pages/wiki/[...slug].astro

@@ -20,8 +20,10 @@ const { Content } = await entry.render();
 ---
 
 <Base>
-  <main>
-    <Tree tree={tree} prefix={Maybe.of("/wiki/")}/>
-    <Content />
+  <main class="main-wiki">
+    <Tree tree={tree} slug={entry.slug} prefix={Maybe.of("/wiki/")}/>
+    <article>
+      <Content />
+    </article>
   </main>
 </Base>

src/pages/wiki/index.astro

@@ -6,12 +6,13 @@ import { getCollection } from "astro:content";
 import { Maybe } from "purify-ts";
 
 const tree = collapse(await getCollection('wiki'));
-
 ---
 
 <Base>
-  <main>
-    <Tree tree={tree} prefix={Maybe.of("wiki")}/>
-    siema
+  <main class="main-wiki">
+    <Tree tree={tree} slug="wiki" prefix={Maybe.of("wiki")} />
+    <article>
+      siema
+    </article>
   </main>
 </Base>

src/styles/components/_link-tree.scss

@@ -0,0 +1,41 @@
+.main-wiki {
+  display: grid;
+  grid-template-columns: 16em 1fr;
+}
+
+.link-tree {
+  padding: 1em;
+  overflow-y: auto;
+
+  &__heading {
+    border-bottom: 1px solid black;
+
+    &-text {
+      display: block;
+      text-decoration: unset;
+      text-align: center;
+    }
+  }
+
+  &__nav {
+    &-list {
+      margin: 0;
+      padding-left: 0.5em;
+      list-style: none;
+
+      ul {
+        border-left: 1px solid lightgray;
+      }
+    }
+    // &-list-item {
+    // }
+    &-list-text {
+      text-decoration: unset;
+
+      &.current {
+        text-decoration: underline;
+      }
+    }
+  }
+}
+

src/styles/styles.scss

@@ -12,6 +12,7 @@
 @use 'components/lyrics';
 @use 'components/song';
 @use 'components/album-grid';
+@use 'components/link-tree';
 
 // Partials
 @use 'partials/nav';