flo-bit.dev
[READ-ONLY] Mirror of https://github.com/flo-bit/dogumentation. Simple, minimalistic documentation template using astro
flo-bit.dev/dogumentation/
2.4 kB
73 lines
1---
2import { config } from "../config";
3import { getDocs } from "../utils";
4
5const docs = await getDocs();
6
7const { id, headings } = Astro.props;
8---
9
10<div
11 class="mx-8 mt-8 pb-16 text-xl text-base-950 dark:text-base-50 flex flex-col gap-8"
12>
13 <a href={config.BASE} class="flex items-center gap-2">
14 <div class="text-2xl">🐶</div>
15 <div class="text-xl font-bold">{config.SITE_NAME}</div>
16 </a>
17
18 {
19 docs.map((category) => (
20 <div class="flex flex-col gap-3 relative">
21 {category.category ? (
22 <h2 class="text-sm font-bold">
23 {category.category[0].toUpperCase() + category.category.slice(1)}
24 </h2>
25 ) : null}
26
27 <div class="flex flex-col gap-4">
28 {category.docs.map((doc) => (
29 <div
30 class:list={[
31 "text-sm relative",
32 category.category ? "ml-6" : "",
33 id === doc.id
34 ? "text-accent-600 dark:text-accent-400"
35 : "text-base-800 dark:text-base-400 hover:text-base-950 dark:hover:text-base-50",
36 ]}
37 >
38 <a href={config.BASE + "/docs/" + doc.id} class="w-full">
39 {doc.data.title}
40 </a>
41
42 {id === doc.id ? (
43 <div class="absolute -inset-2 -z-10 rounded-xl bg-base-200/40 dark:bg-base-900/50" />
44 ) : null}
45
46 {id === doc.id ? (
47 <div class="flex flex-col">
48 {headings.map(
49 (heading: { depth: number; text: string; slug: string }) =>
50 heading.depth === 2 && (
51 <a
52 class="mt-2.5 text-sm ml-4 text-base-800 dark:text-base-300 hover:text-base-950 dark:hover:text-base-50"
53 href={
54 config.BASE + "/docs/" + doc.id + "#" + heading.slug
55 }
56 >
57 {heading.text}
58 </a>
59 )
60 )}
61 </div>
62 ) : null}
63 </div>
64 ))}
65 </div>
66
67 {category.category ? (
68 <div class="absolute top-8 left-1 bottom-0 w-0.5 border-l border-base-200 dark:border-base-800" />
69 ) : null}
70 </div>
71 ))
72 }
73</div>