From 9e738b4e4336890aefab497de5780d72917a718a Mon Sep 17 00:00:00 2001
From: Avraham Sakal <avraham@torahanytime.com>
Date: Sun, 10 Nov 2024 09:08:23 -0500
Subject: [PATCH] begin `Article` components and subcomponents

---
 src/Article/Article.tsx                    |  3 +
 src/Article/Heading/Heading.tsx            |  3 +
 src/Article/Paragraph/Paragraph.tsx        |  3 +
 src/Article/Title/Title.tsx                |  3 +
 src/articles/2024-01-07-bootstrap-blog.tsx | 67 ++++++++++++++++++++++
 5 files changed, 79 insertions(+)
 create mode 100644 src/Article/Article.tsx
 create mode 100644 src/Article/Heading/Heading.tsx
 create mode 100644 src/Article/Paragraph/Paragraph.tsx
 create mode 100644 src/Article/Title/Title.tsx
 create mode 100644 src/articles/2024-01-07-bootstrap-blog.tsx

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 <div>Article</div>;
+}
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 <h2>Heading</h2>;
+}
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 <p>Paragraph</p>;
+}
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 <h1>Title</h1>;
+}
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 (
+    <Article>
+      <Title>Bootstrapping This Clog</Title>
+      <Heading>
+        <pre>pnpx create-preact</pre>
+      </Heading>
+      <Paragraph>
+        I'll begin straight-away with some design decisions.
+      </Paragraph>
+      <Paragraph>
+        I chose <pre>preact</pre> instead of React because of its small size and
+        good performance, despite its near-feature-parity with React.
+      </Paragraph>
+      <Paragraph>
+        I used the default <pre>create-preact</pre> bootstrapper because I had
+        already decided to use Vite as a bundler, and indeed
+        <pre>create-preact</pre> 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.
+      </Paragraph>
+      <Paragraph>
+        I also had <pre>create-preact</pre> 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.
+      </Paragraph>
+      <Heading>The Clog's Structure</Heading>
+      <Paragraph>
+        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.
+      </Paragraph>
+      <Paragraph>
+        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.
+      </Paragraph>
+      <Paragraph>
+        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.
+      </Paragraph>
+      <Paragraph>
+        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.
+      </Paragraph>
+    </Article>
+  );
+}