my website
add dark mode
+22
-8
+2
-2
src/content/blog/explosiv-blog.md
+2
-2
src/content/blog/explosiv-blog.md
···
7
7
8
8
Earlier this year, I created [Explosiv ↗][explosiv], a lightweight & fast static site generator that allows pages to be built with JSX. This is a tutorial on how to build a functional blog with Explosiv.
9
9
10
-
# Terminology
10
+
## Terminology
11
11
12
12
We'll first talk about how the blog will be built. You can directly [jump to the programming part](#code) or directly view [the source code of the final blog on Github][explosiv-blog-source].
13
13
···
66
66
67
67
This blog post you are reading is written in markdown too! You can [view the source code here ↗][post-source].
68
68
69
-
# Code
69
+
## Code
70
70
71
71
Explosiv is a NodeJS framework. That means you'll need to have NodeJS installed first. NodeJS comes with a package manager called `npm` and we'll use it to install Explosiv.
72
72
+1
-1
src/content/blog/rabbet.md
+1
-1
src/content/blog/rabbet.md
···
15
15
- [Github ↗][github]
16
16
- [Test Page ↗][test]
17
17
18
-
# Rabbet is a monorepo
18
+
## Rabbet is a monorepo
19
19
20
20
Rabbet is built as a monorepo. That is, it is one repository (folder) but it contain other packages inside of it. The monorepo doesn't use any repo manager like Lerna or Yarn workspaces as the packages are not tightly coupled. The different packages are for different uses:
21
21
+19
-5
src/styles/global.css
+19
-5
src/styles/global.css
···
1
1
@import "tailwindcss";
2
2
3
+
:root {
4
+
--v-color-fg: #333;
5
+
--v-color-bg: #fff;
6
+
--v-color-heading: #000;
7
+
--v-color-link: #0169ec;
8
+
9
+
@media (prefers-color-scheme: dark) {
10
+
--v-color-fg: #a0a0a0;
11
+
--v-color-bg: #030f1b;
12
+
--v-color-heading: #fff;
13
+
--v-color-link: #5a99ff;
14
+
}
15
+
}
16
+
3
17
@theme {
4
18
--font-sans: "Atkinson Hyperlegible", sans-serif;
5
19
--font-block: "Ginestra Black", sans-serif;
6
20
7
-
--color-fg: #333;
8
-
--color-bg: #fff;
9
-
--color-heading: #000;
10
-
--color-link: #0169ec;
21
+
--color-fg: var(--v-color-fg);
22
+
--color-bg: var(--v-color-bg);
23
+
--color-heading: var(--v-color-heading);
24
+
--color-link: var(--v-color-link);
11
25
}
12
26
13
27
@layer base {
···
16
30
}
17
31
18
32
body {
19
-
@apply text-fg;
33
+
@apply text-fg bg-bg;
20
34
}
21
35
22
36
a {