Skip to content

Commit

Permalink
Merge pull request #11 from the-unnamed-nug/toc
Browse files Browse the repository at this point in the history
Add table of contents
  • Loading branch information
DamitusThyYeetus123 authored Dec 6, 2024
2 parents d705e82 + ecaee64 commit 40a4686
Show file tree
Hide file tree
Showing 3 changed files with 85 additions and 41 deletions.
31 changes: 3 additions & 28 deletions src/components/Sidebar.astro
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
---
import { getLangFromUrl } from "../i18n/utils";
import ToC from "@components/ToC.astro";
const lang = getLangFromUrl(Astro.url);
const origin = Astro.url.origin;
Expand All @@ -8,35 +9,9 @@ import { siteLink } from "@utils/links";

<aside
id="sidebar"
class="fixed top-[74px] left-0 h-screen w-60 md:w-72 transition-transform -translate-x-full sm:translate-x-0 md:flex bg-theme-1000"
class="fixed top-[74px] left-0 h-screen w-60 md:w-72 transition-transform -translate-x-full md:translate-x-0 md:flex bg-theme-1000"
>
<div class="flex flex-col p-8 justify-items-center flex-grow">
<ul
class="md:flex flex-col w-full text-xl md:justify-around children:bg-theme-900 children:p-2 space-y-2 children:rounded-md"
>
<li>
<a href={origin + siteLink(`${lang}/`)} class="hover:text-theme-accent1"
>Home</a
>
</li>
<li>
<a
href={origin + siteLink(`${lang}/preface/`)}
class="hover:text-theme-accent1">Preface</a
>
</li>
<li>
<a
href={origin + siteLink(`${lang}/why-nixos/`)}
class="hover:text-theme-accent1">Why NixOS?</a
>
</li>
<li>
<a
href={origin + siteLink(`${lang}/docs/`)}
class="hover:text-theme-accent1">Get Started</a
>
</li>
</ul>
<ToC />
</div>
</aside>
69 changes: 69 additions & 0 deletions src/components/ToC.astro
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
---
import { getCollection } from "astro:content";
import { getLangFromUrl } from "src/i18n/utils";
const lang = getLangFromUrl(Astro.url);
const origin = Astro.url.origin;
import { siteLink } from "@utils/links";
const docs = await getCollection("docs");
const table = docs.map((entry) => ({
id: entry.id,
heading: entry.data.title,
depth: entry.id.split("/").length - 1,
parent: entry.id.split("/").length > 2 ? entry.id.split("/")[1] : null,
language: entry.id.split("/")[0],
slug:
origin +
siteLink(`${entry.id.split("/")[0] + "/docs/" + entry.id.slice(3)}`),
}));
const parents = Array.from(new Set(table.map((entry) => entry.parent)));
console.log(parents);
console.log(table);
---

<div>
<ul>
{
parents
.filter((entry) => entry !== null)
.map((entry, i) => (
<div class=""><button class="subdirbtn text-lg font-bold" id={"subdirbtn" + i}>{entry}</button></div>
<ul id={"subdir" + i} class="subdir">
{table
.filter(
(entry) =>
entry.parent == parents[i + 1] && entry.language == lang,
)
.map((entry) => (
<li class="pl-4">
<a href={entry.slug}>{entry.heading}</a>
</li>
))}
</ul>
))
}
{
table
.filter((entry) => entry.parent == null && entry.language == lang)
.map((entry) => (
<li>
<a class="text-lg font-bold" href={entry.slug}>
{entry.heading}
</a>
</li>
))
}
</ul>
</div>
<script>
const buttons = document.querySelectorAll('button.subdirbtn');
const lists = document.querySelectorAll('ul.subdir');

buttons.forEach((button) => {
button.addEventListener('click', () => {
lists.forEach((list) => {if(list.id.slice(6) == button.id.slice(9)) {list.classList.toggle('hidden')}})
})
})
</script>
26 changes: 13 additions & 13 deletions src/layouts/Layout.astro
Original file line number Diff line number Diff line change
Expand Up @@ -18,29 +18,29 @@ import "@styles/theme.css";
class="m-auto w-full h-max min-h-full flex flex-grow text-theme-400 relative"
>
<header
class="fixed top-0 justify-center justify-items-center w-full bg-theme-900"
class="fixed top-0 justify-center justify-items-center w-full bg-theme-900 z-20"
>
<nav class="self-center mx-20 bg-theme-900">
<nav class="self-center sm:mx-10 lg:mx-20 bg-theme-900">
<Navbar />
</nav>
<div class="bg-theme-1000 w-full h-0.5"></div>
</header>
<div class="">
<Sidebar />
</div>
<div class="container m-auto pt-24 md:ml-80">
<div class="container m-auto pt-24 md:ml-80 relative">
<slot />
<footer
class="text-theme-400 w-fit inset-0 mx-auto items-center text-center justify-center top-[100%] self-end absolute p-4"
>
<span class="text-sm"
>Code licensed in GPLv3, Content licensed under CC-BY-SA. More
information on <a href="https://github.com/the-unnamed-nug/sherpa"
>Github<a>.</a>
</a>
</span>
</footer>
</div>
<footer
class="text-theme-400 w-full mx-auto items-center text-center justify-center top-[100%] self-end absolute p-4"
>
<span class="text-sm"
>Code licensed in GPLv3, Content licensed under CC-BY-SA. More
information on <a href="https://github.com/the-unnamed-nug/sherpa"
>Github<a>.</a>
</a>
</span>
</footer>
</div>

<style>
Expand Down

0 comments on commit 40a4686

Please sign in to comment.