Documentation for my projects & stuff, build using 11ty.
feat: styles for tables, toc & spearate template stuff
+247
-74
+28
eleventy.config.js
+28
eleventy.config.js
···
3
3
import * as sass from "sass";
4
4
import htmlmin from "html-minifier-terser";
5
5
6
+
import markdownIt from "markdown-it";
7
+
import markdownItAnchor from "markdown-it-anchor";
8
+
6
9
import { IdAttributePlugin } from "@11ty/eleventy";
7
10
8
11
import syntaxHighlight from "@11ty/eleventy-plugin-syntaxhighlight";
···
15
18
eleventyConfig.addPassthroughCopy({
16
19
"src/public": "/",
17
20
});
21
+
22
+
const md = markdownIt({
23
+
html: true,
24
+
linkify: true,
25
+
typographer: true,
26
+
}).use(markdownItAnchor);
27
+
28
+
const defaultTableOpen =
29
+
md.renderer.rules.table_open ||
30
+
((tokens, idx, options, env, self) =>
31
+
self.renderToken(tokens, idx, options));
32
+
33
+
const defaultTableClose =
34
+
md.renderer.rules.table_close ||
35
+
((tokens, idx, options, env, self) =>
36
+
self.renderToken(tokens, idx, options));
37
+
38
+
md.renderer.rules.table_open = (tokens, idx, options, env, self) =>
39
+
'<div class="tableWrapper">\n' +
40
+
defaultTableOpen(tokens, idx, options, env, self);
41
+
42
+
md.renderer.rules.table_close = (tokens, idx, options, env, self) =>
43
+
defaultTableClose(tokens, idx, options, env, self) + "</div>\n";
44
+
45
+
eleventyConfig.setLibrary("md", md);
18
46
19
47
// Extensions
20
48
eleventyConfig.addExtension("scss", {
+2
package.json
+2
package.json
+35
pnpm-lock.yaml
+35
pnpm-lock.yaml
···
23
23
html-minifier-terser:
24
24
specifier: ^7.2.0
25
25
version: 7.2.0
26
+
markdown-it:
27
+
specifier: ^14.1.1
28
+
version: 14.1.1
29
+
markdown-it-anchor:
30
+
specifier: ^9.2.0
31
+
version: 9.2.0(@types/markdown-it@14.1.2)(markdown-it@14.1.1)
26
32
sass:
27
33
specifier: ^1.99.0
28
34
version: 1.99.0
···
182
188
'@sindresorhus/transliterate@1.6.0':
183
189
resolution: {integrity: sha512-doH1gimEu3A46VX6aVxpHTeHrytJAG6HgdxntYnCFiIFHEM/ZGpG8KiZGBChchjQmG0XFIBL552kBTjVcMZXwQ==}
184
190
engines: {node: '>=12'}
191
+
192
+
'@types/linkify-it@5.0.0':
193
+
resolution: {integrity: sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q==}
194
+
195
+
'@types/markdown-it@14.1.2':
196
+
resolution: {integrity: sha512-promo4eFwuiW+TfGxhi+0x3czqTYJkG8qB17ZUJiVF10Xm7NLVRSLUsfRTU/6h1e24VvRnXCx+hG7li58lkzog==}
197
+
198
+
'@types/mdurl@2.0.0':
199
+
resolution: {integrity: sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg==}
185
200
186
201
a-sync-waterfall@1.0.1:
187
202
resolution: {integrity: sha512-RYTOHHdWipFUliRFMCS4X2Yn2X8M87V/OpSqWzKKOGhzqyUxzyVmhHDH9sAvG+ZuQf/TAOFsLCpMw09I1ufUnA==}
···
539
554
resolution: {integrity: sha512-vtEhXh/gNjI9Yg1u4jX/0YVPMvxzHuGgCm6tC5kZyb08yjGWGnqAjGJvcXbqQR2P3MyMEFnRbpcdFS6PBcLqew==}
540
555
engines: {node: '>=12'}
541
556
557
+
markdown-it-anchor@9.2.0:
558
+
resolution: {integrity: sha512-sa2ErMQ6kKOA4l31gLGYliFQrMKkqSO0ZJgGhDHKijPf0pNFM9vghjAh3gn26pS4JDRs7Iwa9S36gxm3vgZTzg==}
559
+
peerDependencies:
560
+
'@types/markdown-it': '*'
561
+
markdown-it: '*'
562
+
542
563
markdown-it@14.1.1:
543
564
resolution: {integrity: sha512-BuU2qnTti9YKgK5N+IeMubp14ZUKUUw7yeJbkjtosvHiP0AZ5c8IAgEMk79D0eC8F23r4Ac/q8cAIFdm2FtyoA==}
544
565
hasBin: true
···
1001
1022
dependencies:
1002
1023
escape-string-regexp: 5.0.0
1003
1024
1025
+
'@types/linkify-it@5.0.0': {}
1026
+
1027
+
'@types/markdown-it@14.1.2':
1028
+
dependencies:
1029
+
'@types/linkify-it': 5.0.0
1030
+
'@types/mdurl': 2.0.0
1031
+
1032
+
'@types/mdurl@2.0.0': {}
1033
+
1004
1034
a-sync-waterfall@1.0.1: {}
1005
1035
1006
1036
acorn-walk@8.3.5:
···
1354
1384
tslib: 2.8.1
1355
1385
1356
1386
luxon@3.7.2: {}
1387
+
1388
+
markdown-it-anchor@9.2.0(@types/markdown-it@14.1.2)(markdown-it@14.1.1):
1389
+
dependencies:
1390
+
'@types/markdown-it': 14.1.2
1391
+
markdown-it: 14.1.1
1357
1392
1358
1393
markdown-it@14.1.1:
1359
1394
dependencies:
+23
src/_includes/components/head.njk
+23
src/_includes/components/head.njk
···
1
+
<!DOCTYPE html>
2
+
<html lang="en">
3
+
<head>
4
+
<meta charset="UTF-8" />
5
+
6
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
+
8
+
<title>TheClashFruit's Docs • {{ title }}</title>
9
+
10
+
<link rel="stylesheet" href="/css/style.css" />
11
+
12
+
<link rel="icon" href="/favicon.svg" />
13
+
</head>
14
+
<body>
15
+
<header>
16
+
<h1>TheClashFruit's Docs</h1>
17
+
</header>
18
+
19
+
{% include './nav.njk' %}
20
+
21
+
{% if content | toc %}
22
+
<aside class="right">{{ content | toc | safe }}</aside>
23
+
{% endif %}
+8
-36
src/_includes/main.njk
+8
-36
src/_includes/main.njk
···
1
-
<!DOCTYPE html>
2
-
<html lang="en">
3
-
<head>
4
-
<meta charset="UTF-8" />
5
-
6
-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
-
8
-
<title>TheClashFruit's Docs • {{ title }}</title>
9
-
10
-
<link rel="stylesheet" href="/css/style.css" />
11
-
12
-
<link rel="icon" href="/favicon.svg" />
13
-
</head>
14
-
<body>
15
-
<header>
16
-
<h1>TheClashFruit's Docs</h1>
17
-
</header>
1
+
{% include './components/head.njk' %}
2
+
<main>
3
+
<h2>
4
+
{{ title }}
5
+
</h2>
18
6
19
-
<aside>
20
-
<nav>
21
-
{{ collections.all | eleventyNavigation | eleventyNavigationToHtml | safe }}
22
-
</nav>
23
-
</aside>
24
-
25
-
<main>
26
-
<h2>
27
-
{{ title }}
28
-
</h2>
29
-
30
-
<article>{{ content | safe }}</article>
31
-
</main>
32
-
33
-
{% if content | toc %}
34
-
<aside>{{ content | toc }}</aside>
35
-
{% endif %}
36
-
</body>
37
-
</html>
7
+
<article>{{ content | safe }}</article>
8
+
</main>
9
+
{% include './components/foot.njk' %}
+10
-36
src/_includes/mod.njk
+10
-36
src/_includes/mod.njk
···
1
-
<!DOCTYPE html>
2
-
<html lang="en">
3
-
<head>
4
-
<meta charset="UTF-8" />
5
-
6
-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
-
8
-
<title>TheClashFruit's Docs • {{ title }}</title>
9
-
10
-
<link rel="stylesheet" href="/css/style.css" />
11
-
12
-
<link rel="icon" href="/favicon.svg" />
13
-
</head>
14
-
<body>
15
-
<header>
16
-
<h1>TheClashFruit's Docs</h1>
17
-
</header>
18
-
19
-
<aside>
20
-
<nav>
21
-
{{ collections.all | eleventyNavigation | eleventyNavigationToHtml | safe }}
22
-
</nav>
23
-
</aside>
24
-
25
-
<main>
1
+
{% include './components/head.njk' %}
2
+
<main>
3
+
<div class="modHeader">
26
4
<div class="modTitle">
27
5
<h2>
28
6
{{ title }}
···
40
18
</li>
41
19
{% endfor %}
42
20
</ul>
43
-
</div
44
-
45
-
<hr />
46
-
47
-
<article>{{ content | safe }}</article>
48
-
</main>
21
+
</div>
22
+
</div>
23
+
24
+
<hr />
49
25
50
-
{% if content | toc %}
51
-
<aside>{{ content | toc }}</aside>
52
-
{% endif %}
53
-
</body>
54
-
</html>
26
+
<article>{{ content | safe }}</article>
27
+
</main>
28
+
{% include './components/foot.njk' %}
+134
-2
src/css/style.scss
+134
-2
src/css/style.scss
···
58
58
aside {
59
59
position: absolute;
60
60
61
-
left: calc(50% - ((80ch) / 2) - (250px));
61
+
width: 250px;
62
+
63
+
&.left {
64
+
left: calc(50% - ((80ch) / 2) - (250px));
65
+
}
66
+
67
+
&.right {
68
+
right: calc(50% - ((80ch) / 2) - (250px));
69
+
}
70
+
}
71
+
72
+
details {
73
+
margin-bottom: 8px;
62
74
63
-
width: 250px;
75
+
> summary {
76
+
cursor: pointer;
77
+
}
78
+
79
+
&[open] > summary {
80
+
margin-bottom: 8px;
81
+
}
82
+
}
83
+
84
+
.tableWrapper {
85
+
overflow-x: auto;
86
+
87
+
border: 1px solid var(--outlineVariant);
88
+
border-radius: 16px;
89
+
90
+
margin-bottom: 1rem;
91
+
92
+
table {
93
+
border-collapse: collapse;
94
+
95
+
min-width: 100%;
96
+
97
+
table-layout: fixed;
98
+
99
+
> thead {
100
+
background: var(--surfaceContainerHighest);
101
+
color: var(--onSurfaceContainer);
102
+
103
+
> tr {
104
+
border-radius: 16px 0 0;
105
+
106
+
border-bottom: 1px solid var(--outlineVariant);
107
+
108
+
> th {
109
+
padding: 1rem;
110
+
111
+
text-align: left;
112
+
113
+
border-right: 1px solid var(--outlineVariant);
114
+
115
+
&:last-child {
116
+
border-right: none;
117
+
}
118
+
}
119
+
}
120
+
}
121
+
122
+
> tbody {
123
+
> tr {
124
+
border-bottom: 1px solid var(--outlineVariant);
125
+
126
+
transition: 150ms;
127
+
128
+
> td {
129
+
padding: 1rem;
130
+
131
+
border-right: 1px solid var(--outlineVariant);
132
+
133
+
&:last-child {
134
+
border-right: none;
135
+
}
136
+
}
137
+
138
+
&:nth-child(odd) {
139
+
background: var(--surfaceContainer);
140
+
}
141
+
142
+
&:nth-child(even) {
143
+
background: var(--surfaceContainerHigh);
144
+
}
145
+
146
+
&:last-child {
147
+
border-bottom: none;
148
+
}
149
+
150
+
&:hover {
151
+
background: var(--surfaceContainerLow);
152
+
}
153
+
}
154
+
}
155
+
156
+
> tfoot {
157
+
background: var(--surfaceContainerHighest);
158
+
159
+
> tr {
160
+
border-top: 1px solid var(--outlineVariant);
161
+
162
+
> td {
163
+
padding: 0.5rem;
164
+
165
+
border-right: 1px solid var(--outlineVariant);
166
+
167
+
&:last-child {
168
+
border-right: none;
169
+
}
170
+
}
171
+
}
172
+
}
173
+
}
174
+
}
175
+
176
+
.modHeader {
177
+
margin-bottom: 8px;
178
+
179
+
display: flex;
180
+
181
+
flex-direction: column;
182
+
183
+
gap: 8px;
184
+
185
+
.modDownloads > ul {
186
+
display: flex;
187
+
188
+
gap: 8px;
189
+
190
+
list-style: none;
191
+
}
192
+
}
193
+
194
+
.toc ol {
195
+
list-style: disc;
64
196
}
65
197
66
198
// @view-transition