|
1 | 1 | --- |
2 | | -import { getCollection } from "astro:content"; |
| 2 | +import type { CollectionEntry } from "astro:content"; |
3 | 3 | import PageNavigation from "@/components/page-navigation.astro"; |
4 | 4 | import { Sidebar } from "@/components/sidebar"; |
5 | 5 | import Toc from "@/components/toc.astro"; |
6 | 6 | import { siteConfig } from "@/config/site"; |
7 | 7 | import { badgeVariants } from "@repo/tailwindcss/ui/badge"; |
| 8 | +import type { MarkdownHeading } from "astro"; |
8 | 9 | // @ts-expect-error |
9 | 10 | import { Balancer } from "solid-wrap-balancer"; |
10 | 11 | import RootLayout from "./root-layout.astro"; |
11 | 12 |
|
12 | | -export const getStaticPaths = async () => { |
13 | | - const docsEntries = await getCollection("docs"); |
14 | | - return docsEntries.map((entry) => ({ |
15 | | - params: { slug: entry.slug }, |
16 | | - props: { entry }, |
17 | | - })); |
| 13 | +type Props = { |
| 14 | + docs: CollectionEntry<"docs">; |
| 15 | + headings: MarkdownHeading[]; |
18 | 16 | }; |
19 | 17 |
|
20 | | -const { entry } = Astro.props; |
21 | | -const { headings } = await entry.render(); |
| 18 | +const { docs, headings } = Astro.props; |
22 | 19 | const { pathname } = Astro.url; |
23 | 20 | --- |
24 | 21 |
|
25 | 22 | <RootLayout |
26 | | - title={entry.data.title} |
27 | | - description={entry.data.description} |
28 | | - url={siteConfig.url + Astro.url.pathname} |
| 23 | + title={docs.data.title} |
| 24 | + description={docs.data.description} |
| 25 | + url={siteConfig.url + Astro.url.pathname} |
29 | 26 | > |
30 | | - <div class="border-b"> |
31 | | - <div |
32 | | - class="container flex-1 items-start md:grid md:grid-cols-[220px_minmax(0,1fr)] md:gap-6 lg:grid-cols-[240px_minmax(0,1fr)] lg:gap-10" |
33 | | - > |
34 | | - <aside |
35 | | - class="fixed top-14 z-30 -ml-2 hidden h-[calc(100vh-3.5rem)] w-full shrink-0 md:sticky md:block" |
36 | | - > |
37 | | - <div class="relative h-full overflow-y-auto py-6 pr-6 lg:py-8"> |
38 | | - <Sidebar pathname={pathname} client:only="solid-js" /> |
39 | | - </div> |
40 | | - </aside> |
41 | | - <main |
42 | | - class="relative py-6 lg:gap-10 lg:py-8 xl:grid xl:grid-cols-[1fr_300px]" |
| 27 | + <div class="border-b"> |
| 28 | + <div |
| 29 | + class="container flex-1 items-start md:grid md:grid-cols-[220px_minmax(0,1fr)] md:gap-6 lg:grid-cols-[240px_minmax(0,1fr)] lg:gap-10" |
| 30 | + > |
| 31 | + <aside |
| 32 | + class="fixed top-14 z-30 -ml-2 hidden h-[calc(100vh-3.5rem)] w-full shrink-0 md:sticky md:block" |
| 33 | + > |
| 34 | + <div class="relative h-full overflow-y-auto py-6 pr-6 lg:py-8"> |
| 35 | + <Sidebar pathname={pathname} client:only="solid-js" /> |
| 36 | + </div> |
| 37 | + </aside> |
| 38 | + <main |
| 39 | + class="relative py-6 lg:gap-10 lg:py-8 xl:grid xl:grid-cols-[1fr_300px]" |
| 40 | + > |
| 41 | + <div class="mx-auto w-full min-w-0"> |
| 42 | + <div |
| 43 | + class="mb-4 flex items-center space-x-1 text-sm text-muted-foreground" |
| 44 | + > |
| 45 | + <div class="overflow-hidden text-ellipsis whitespace-nowrap"> |
| 46 | + Docs |
| 47 | + </div> |
| 48 | + <svg |
| 49 | + xmlns="http://www.w3.org/2000/svg" |
| 50 | + class="h-4 w-4" |
| 51 | + viewBox="0 0 24 24" |
43 | 52 | > |
44 | | - <div class="mx-auto w-full min-w-0"> |
45 | | - <div |
46 | | - class="mb-4 flex items-center space-x-1 text-sm text-muted-foreground" |
| 53 | + <path |
| 54 | + fill="none" |
| 55 | + stroke="currentColor" |
| 56 | + stroke-linecap="round" |
| 57 | + stroke-linejoin="round" |
| 58 | + stroke-width="2" |
| 59 | + d="m9 6l6 6l-6 6"></path> |
| 60 | + </svg> |
| 61 | + <div class="font-medium text-foreground"> |
| 62 | + {docs.data.title} |
| 63 | + </div> |
| 64 | + </div> |
| 65 | + <div class="space-y-2"> |
| 66 | + <h1 class="scroll-m-20 text-4xl font-bold tracking-tight"> |
| 67 | + {docs.data.title} |
| 68 | + </h1> |
| 69 | + { |
| 70 | + docs.data.description ? ( |
| 71 | + <p class="text-lg text-muted-foreground"> |
| 72 | + <Balancer>{docs.data.description}</Balancer> |
| 73 | + </p> |
| 74 | + ) : null |
| 75 | + } |
| 76 | + </div> |
| 77 | + { |
| 78 | + docs.data.link ? ( |
| 79 | + <div class="flex items-center space-x-2 pt-4"> |
| 80 | + {docs.data.link.doc ? ( |
| 81 | + <a |
| 82 | + href={docs.data.link.doc} |
| 83 | + target="_blank" |
| 84 | + rel="noreferrer" |
| 85 | + class={badgeVariants({ |
| 86 | + variant: "outline", |
| 87 | + class: "bg-muted/60", |
| 88 | + })} |
| 89 | + > |
| 90 | + Docs{" "} |
| 91 | + <svg |
| 92 | + xmlns="http://www.w3.org/2000/svg" |
| 93 | + class="ml-1 h-3 w-3" |
| 94 | + viewBox="0 0 24 24" |
| 95 | + > |
| 96 | + <path |
| 97 | + fill="none" |
| 98 | + stroke="currentColor" |
| 99 | + stroke-linecap="round" |
| 100 | + stroke-linejoin="round" |
| 101 | + stroke-width="2" |
| 102 | + d="M12 6H6a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6m-7 1l9-9m-5 0h5v5" |
| 103 | + /> |
| 104 | + </svg> |
| 105 | + </a> |
| 106 | + ) : null} |
| 107 | + {docs.data.link.api ? ( |
| 108 | + <a |
| 109 | + href={docs.data.link.api} |
| 110 | + target="_blank" |
| 111 | + rel="noreferrer" |
| 112 | + class={badgeVariants({ |
| 113 | + variant: "outline", |
| 114 | + class: "bg-muted/60", |
| 115 | + })} |
| 116 | + > |
| 117 | + API Reference{" "} |
| 118 | + <svg |
| 119 | + xmlns="http://www.w3.org/2000/svg" |
| 120 | + class="ml-1 h-3 w-3" |
| 121 | + viewBox="0 0 24 24" |
47 | 122 | > |
48 | | - <div |
49 | | - class="overflow-hidden text-ellipsis whitespace-nowrap" |
50 | | - > |
51 | | - Docs |
52 | | - </div> |
53 | | - <svg |
54 | | - xmlns="http://www.w3.org/2000/svg" |
55 | | - class="h-4 w-4" |
56 | | - viewBox="0 0 24 24" |
57 | | - > |
58 | | - <path |
59 | | - fill="none" |
60 | | - stroke="currentColor" |
61 | | - stroke-linecap="round" |
62 | | - stroke-linejoin="round" |
63 | | - stroke-width="2" |
64 | | - d="m9 6l6 6l-6 6"></path> |
65 | | - </svg> |
66 | | - <div class="font-medium text-foreground"> |
67 | | - {entry.data.title} |
68 | | - </div> |
69 | | - </div> |
70 | | - <div class="space-y-2"> |
71 | | - <h1 |
72 | | - class="scroll-m-20 text-4xl font-bold tracking-tight" |
73 | | - > |
74 | | - {entry.data.title} |
75 | | - </h1> |
76 | | - { |
77 | | - entry.data.description ? ( |
78 | | - <p class="text-lg text-muted-foreground"> |
79 | | - <Balancer> |
80 | | - {entry.data.description} |
81 | | - </Balancer> |
82 | | - </p> |
83 | | - ) : null |
84 | | - } |
85 | | - </div> |
86 | | - { |
87 | | - entry.data.link ? ( |
88 | | - <div class="flex items-center space-x-2 pt-4"> |
89 | | - {entry.data.link.doc ? ( |
90 | | - <a |
91 | | - href={entry.data.link.doc} |
92 | | - target="_blank" |
93 | | - rel="noreferrer" |
94 | | - class={badgeVariants({ |
95 | | - variant: "outline", |
96 | | - class: "bg-muted/60", |
97 | | - })} |
98 | | - > |
99 | | - Docs{" "} |
100 | | - <svg |
101 | | - xmlns="http://www.w3.org/2000/svg" |
102 | | - class="ml-1 h-3 w-3" |
103 | | - viewBox="0 0 24 24" |
104 | | - > |
105 | | - <path |
106 | | - fill="none" |
107 | | - stroke="currentColor" |
108 | | - stroke-linecap="round" |
109 | | - stroke-linejoin="round" |
110 | | - stroke-width="2" |
111 | | - d="M12 6H6a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6m-7 1l9-9m-5 0h5v5" |
112 | | - /> |
113 | | - </svg> |
114 | | - </a> |
115 | | - ) : null} |
116 | | - {entry.data.link.api ? ( |
117 | | - <a |
118 | | - href={entry.data.link.api} |
119 | | - target="_blank" |
120 | | - rel="noreferrer" |
121 | | - class={badgeVariants({ |
122 | | - variant: "outline", |
123 | | - class: "bg-muted/60", |
124 | | - })} |
125 | | - > |
126 | | - API Reference{" "} |
127 | | - <svg |
128 | | - xmlns="http://www.w3.org/2000/svg" |
129 | | - class="ml-1 h-3 w-3" |
130 | | - viewBox="0 0 24 24" |
131 | | - > |
132 | | - <path |
133 | | - fill="none" |
134 | | - stroke="currentColor" |
135 | | - stroke-linecap="round" |
136 | | - stroke-linejoin="round" |
137 | | - stroke-width="2" |
138 | | - d="M12 6H6a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6m-7 1l9-9m-5 0h5v5" |
139 | | - /> |
140 | | - </svg> |
141 | | - </a> |
142 | | - ) : null} |
143 | | - </div> |
144 | | - ) : null |
145 | | - } |
146 | | - <div class="max-w-full pb-12 pt-8"> |
147 | | - <slot /> |
148 | | - </div> |
149 | | - <PageNavigation /> |
150 | | - </div> |
151 | | - { |
152 | | - entry.data.toc === undefined ? ( |
153 | | - <div class="hidden text-sm xl:block"> |
154 | | - <div class="sticky top-16 -mt-10 h-[calc(100vh-3.5rem)] overflow-hidden pt-6"> |
155 | | - <Toc data={headings} /> |
156 | | - </div> |
157 | | - </div> |
158 | | - ) : null |
159 | | - } |
160 | | - </main> |
| 123 | + <path |
| 124 | + fill="none" |
| 125 | + stroke="currentColor" |
| 126 | + stroke-linecap="round" |
| 127 | + stroke-linejoin="round" |
| 128 | + stroke-width="2" |
| 129 | + d="M12 6H6a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6m-7 1l9-9m-5 0h5v5" |
| 130 | + /> |
| 131 | + </svg> |
| 132 | + </a> |
| 133 | + ) : null} |
| 134 | + </div> |
| 135 | + ) : null |
| 136 | + } |
| 137 | + <div class="max-w-full pb-12 pt-8"> |
| 138 | + <slot /> |
| 139 | + </div> |
| 140 | + <PageNavigation /> |
161 | 141 | </div> |
| 142 | + { |
| 143 | + docs.data.toc === undefined ? ( |
| 144 | + <div class="hidden text-sm xl:block"> |
| 145 | + <div class="sticky top-16 -mt-10 h-[calc(100vh-3.5rem)] overflow-hidden pt-6"> |
| 146 | + <Toc data={headings} /> |
| 147 | + </div> |
| 148 | + </div> |
| 149 | + ) : null |
| 150 | + } |
| 151 | + </main> |
162 | 152 | </div> |
| 153 | + </div> |
163 | 154 | </RootLayout> |
0 commit comments