(wiki) basic styles
This commit is contained in:
parent
6c89435b7a
commit
741d20c93d
|
@ -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()}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
title: "Hello"
|
||||
title: "TypeScript"
|
||||
slug: "typescript"
|
||||
---
|
||||
Hello
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
title: "Hello"
|
||||
title: "Type Challenges"
|
||||
---
|
||||
|
||||
## 4・Pick
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
41
src/styles/components/_link-tree.scss
Normal file
41
src/styles/components/_link-tree.scss
Normal file
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -12,6 +12,7 @@
|
|||
@use 'components/lyrics';
|
||||
@use 'components/song';
|
||||
@use 'components/album-grid';
|
||||
@use 'components/link-tree';
|
||||
|
||||
// Partials
|
||||
@use 'partials/nav';
|
||||
|
|
Loading…
Reference in a new issue