1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
|
---
// Component Imports
import ArticleFooter from '../components/ArticleFooter.astro';
import SiteSidebar from '../components/SiteSidebar.astro';
import ThemeToggle from '../components/ThemeToggle.tsx';
import DocSidebar from '../components/DocSidebar.tsx';
// Component Script:
// You can write any JavaScript/TypeScript that you'd like here.
// It will run during the build, but never in the browser.
// All variables are available to use in the HTML template below.
const { content } = Astro.props;
const headers = content?.astro?.headers;
const currentPage = Astro.request.url.pathname;
const currentFile = currentPage === '/' ? 'src/pages/index.md' : `src/pages${currentPage.replace(/\/$/, "")}.md`;
const githubEditUrl = `https://github.com/USER/REPO/blob/main/${currentFile}`
// Full Astro Component Syntax:
// https://docs.astro.build/core-concepts/astro-components/
---
<html lang={ content.lang ?? 'en' }>
<head>
<title>{content.title}</title>
<link rel="stylesheet" href="/index.css" />
<script src="/theme.js" />
<link rel="icon"
type="image/svg+xml"
href="/favicon.svg">
<style>
body {
width: 100%;
display: grid;
grid-template-rows: 3.5rem 1fr;
--gutter: 0.5rem;
--doc-padding: 2rem;
}
header {
width: 100%;
height: 100%;
background-color: var(--theme-bg-offset);
display: flex;
align-items: center;
justify-content: center;
}
.layout {
display: grid;
grid-auto-flow: column;
grid-template-columns: minmax(var(--gutter), 1fr) minmax(0, var(--max-width)) minmax(var(--gutter), 1fr);
gap: 1em;
}
.menu-and-logo {
gap: 1em;
}
nav.layout {
justify-content: center;
width: 100%;
}
nav.layout :global(> :nth-child(1)) {
grid-column: 2;
}
#site-title {
display: flex;
align-items: center;
gap: 0.25em;
font-size: 1.5rem;
font-weight: 700;
margin: 0;
line-height: 1;
color: var(--theme-text);
text-decoration: none;
}
#site-title:hover,
#site-title:focus {
color: var(--theme-text-light);
}
#site-title h1 {
font: inherit;
color: inherit;
margin: 0;
}
.nav-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
max-width: 64ch;
margin: 0 auto;
}
.layout :global(> *) {
width: 100%;
height: 100%;
}
.sidebar {
max-height: 100vh;
position: sticky;
top: 0;
padding: var(--doc-padding) 0;
}
#sidebar-nav {
display: none;
max-height: 100vh;
padding: var(--doc-padding) 0;
}
#article {
padding: var(--doc-padding) var(--gutter);
grid-column: 2;
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
}
.content {
max-width: 64ch;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.content > main {
margin-bottom: 4rem;
}
#sidebar-content {
display: none;
}
@media (min-width: 64em) {
.menu-and-logo button {
display: none;
}
.layout {
grid-template-columns: 20rem minmax(0, 1fr);
padding-left: 1rem;
padding-right: 1rem;
}
#article {
grid-column: 2;
}
#sidebar-nav {
display: flex;
}
#sidebar-content {
/* display: flex; */
grid-column: 3;
}
.nav-wrapper {
display: contents;
}
}
@media (min-width: 88em) {
.layout {
grid-template-columns: minmax(var(--gutter), 1fr) 20rem minmax(0, var(--max-width)) 16rem minmax(var(--gutter), 1fr);
padding-left: 0;
padding-right: 0;
}
#sidebar-nav,
.nav-wrapper :global(:nth-child(1)) {
grid-column: 2;
}
#article,
.nav-wrapper :global(:nth-child(2)) {
grid-column: 3;
}
#sidebar-content,
.nav-wrapper :global(:nth-child(3)) {
display: flex;
grid-column: 4;
}
}
</style>
</head>
<body>
<header>
<nav class="layout">
<div class="nav-wrapper">
<div class="menu-and-logo flex">
<button id="menu-toggle">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
<a id="site-title" href="/">
<svg width="1em" height="1em" viewBox="0 0 340 340" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M320 170C320 170 296.88 171.746 267.428 188.75C237.975 205.754 205.754 237.975 188.75 267.428C171.746 296.88 170 320 170 320C170 320 168.254 296.88 151.25 267.428C134.246 237.975 102.025 205.754 72.5721 188.75C43.1197 171.746 20 170 20 170C20 170 43.1197 168.254 72.5721 151.25C102.025 134.246 134.246 102.025 151.25 72.5721C168.254 43.1197 170 20 170 20C170 20 171.746 43.1197 188.75 72.5721C205.754 102.025 237.975 134.246 267.428 151.25C296.88 168.254 320 170 320 170Z" fill="currentColor"/>
</svg>
<h1>Astroid</h1>
</a>
</div>
<div />
<div>
<ThemeToggle client:idle />
</div>
</div>
</nav>
</header>
<main class="layout">
<aside class="sidebar" id="sidebar-nav">
<SiteSidebar />
</aside>
<div id="article">
<article class="content">
<main>
<h1>{content.title}</h1>
<slot />
</main>
<ArticleFooter />
</article>
</div>
<aside class="sidebar" id="sidebar-content">
<DocSidebar client:idle headers={headers} editHref={editHref} />
</aside>
</main>
</body>
</html>
|
