diff --git a/src/Article/Article.tsx b/src/Article/Article.tsx
new file mode 100644
index 0000000..49694c5
--- /dev/null
+++ b/src/Article/Article.tsx
@@ -0,0 +1,3 @@
+export function Article({ children }) {
+ return Article
;
+}
diff --git a/src/Article/Heading/Heading.tsx b/src/Article/Heading/Heading.tsx
new file mode 100644
index 0000000..487826c
--- /dev/null
+++ b/src/Article/Heading/Heading.tsx
@@ -0,0 +1,3 @@
+export function Heading({ children }) {
+ return Heading
;
+}
diff --git a/src/Article/Paragraph/Paragraph.tsx b/src/Article/Paragraph/Paragraph.tsx
new file mode 100644
index 0000000..d6b9ba2
--- /dev/null
+++ b/src/Article/Paragraph/Paragraph.tsx
@@ -0,0 +1,3 @@
+export function Paragraph({ children }) {
+ return Paragraph
;
+}
diff --git a/src/Article/Title/Title.tsx b/src/Article/Title/Title.tsx
new file mode 100644
index 0000000..abd327b
--- /dev/null
+++ b/src/Article/Title/Title.tsx
@@ -0,0 +1,3 @@
+export function Title({ children }) {
+ return Title
;
+}
diff --git a/src/articles/2024-01-07-bootstrap-blog.tsx b/src/articles/2024-01-07-bootstrap-blog.tsx
new file mode 100644
index 0000000..6ae29b4
--- /dev/null
+++ b/src/articles/2024-01-07-bootstrap-blog.tsx
@@ -0,0 +1,67 @@
+import { Article } from "../Article/Article.js";
+import { Heading } from "../Article/Heading/Heading.js";
+import { Paragraph } from "../Article/Paragraph/Paragraph.js";
+import { Title } from "../Article/Title/Title.js";
+
+export const tags = ["pnpm", "preact", "vite", "typescript"];
+
+export default function () {
+ return (
+
+ Bootstrapping This Clog
+
+ pnpx create-preact
+
+
+ I'll begin straight-away with some design decisions.
+
+
+ I chose preact
instead of React because of its small size and
+ good performance, despite its near-feature-parity with React.
+
+
+ I used the default create-preact
bootstrapper because I had
+ already decided to use Vite as a bundler, and indeed
+ create-preact
sets up Vite (among other things). The reason I
+ wanted to use Vite is because I wanted this clog to be a simple
+ Single-Page Application (SPA), so I didn't need bells-and-whistles
+ beyond Vite's sane defaults; and of course it's very fast ("vite" means
+ "fast" in French), which helps me keep my focus during development. I
+ tend to daydream if it takes more than 2-3 seconds.
+
+
+ I also had create-preact
setup Typescript, which is almost
+ universally accepted as "the right thing to do". In my particular case,
+ I can use it to enforce a certain structure to the blog, as I'll try to
+ explain below.
+
+ The Clog's Structure
+
+ Each Article is to have two types of content: Prose, which are typical
+ blog articles such as this one, wherein prose is the centerpiece and
+ code is interspersed as a complement, much like figures in a textbook;
+ and Codes, which are code-centric and are complemented by explanatory
+ prose. Each Article will have a switch widget to switch between the two.
+
+
+ Articles have a Title, followed by a one or more Sections, each of which
+ has a Heading followed by one or more Paragraphs or CodeBlocks.
+
+
+ Codes, however, are meant to be more interactive. Their utility comes
+ from selectively displaying code and explanatory text. Each Article may
+ develop multiple files, not all of which are of interest to the reader.
+ So when in "Codes" mode, the reader is presented with a list of Files
+ produced in the writing of the article.
+
+
+ Each File has a language (for syntax highlighting) and is composed of
+ numbered Lines. They also have CodeComments, which target any
+ combination of Lines (they don't even have to be contiguous).
+ Mousing-over a Line displays all the CodeComment ranges on the right
+ margin of the code; the ranges represented by straight lines, and the
+ ranges appearing side-by-side from left to right.
+
+
+ );
+}