append .js to imports

src/Article/Article.tsx

@@ -0,0 +1,3 @@
+export function Article({ children }) {
+  return <div>Article</div>;
+}

src/Article/Heading/Heading.tsx

@@ -0,0 +1,3 @@
+export function Heading({ children }) {
+  return <h2>Heading</h2>;
+}

src/Article/Paragraph/Paragraph.tsx

@@ -0,0 +1,3 @@
+export function Paragraph({ children }) {
+  return <p>Paragraph</p>;
+}

src/Article/Title/Title.tsx

@@ -0,0 +1,3 @@
+export function Title({ children }) {
+  return <h1>Title</h1>;
+}

src/Blog/Blog.tsx

@@ -1,7 +1,7 @@
 import { Container } from "@mui/material";
-import { SearchHeader } from "./SearchHeader/SearchHeader";
+import { SearchHeader } from "./SearchHeader/SearchHeader.js";
-import { SearchResults } from "./SearchResults/SearchResults";
+import { SearchResults } from "./SearchResults/SearchResults.js";
-import { ChosenArticle } from "./ChosenArticle/ChosenArticle";
+import { ChosenArticle } from "./ChosenArticle/ChosenArticle.js";
 
 export function Blog() {
   return (

src/Blog/SearchHeader/SearchHeader.tsx

@@ -1,12 +1,12 @@
-import Box from "@mui/material/Box";
+import Stack from "@mui/material/Stack";
-import { SearchRow } from "./SearchRow/SearchRow";
+import { SearchRow } from "./SearchRow/SearchRow.js";
-import { TagCloud } from "./TagCloud/TagCloud";
+import { TagCloud } from "./TagCloud/TagCloud.js";
 
 export function SearchHeader() {
   return (
-    <Box class="search-header">
+    <Stack class="search-header" spacing={2}>
       <SearchRow />
       <TagCloud />
-    </Box>
+    </Stack>
   );
 }

src/Blog/SearchHeader/SearchRow/SearchTextBox/SearchTextBox.tsx

@@ -1,5 +1,5 @@
 import TextField from "@mui/material/TextField";
 
 export function SearchTextBox() {
-  return <TextField variant="outlined" label="Search Articles" />;
+  return <TextField variant="outlined" label="Search Articles" fullWidth />;
 }

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>
+  );
+}