initial commit: bootstrap, organize app skeleton

src/Blog/Blog.tsx

@@ -0,0 +1,14 @@
+import { Container } from "@mui/material";
+import { SearchHeader } from "./SearchHeader/SearchHeader";
+import { SearchResults } from "./SearchResults/SearchResults";
+import { ChosenArticle } from "./ChosenArticle/ChosenArticle";
+
+export function Blog() {
+  return (
+    <Container class="blog">
+      <SearchHeader />
+      <SearchResults />
+      <ChosenArticle />
+    </Container>
+  );
+}

src/Blog/ChosenArticle/ChosenArticle.tsx

@@ -0,0 +1,5 @@
+import Box from "@mui/material/Box";
+
+export function ChosenArticle() {
+  return <Box class="chosen-article"></Box>;
+}

src/Blog/SearchHeader/SearchHeader.tsx

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

src/Blog/SearchHeader/SearchRow/Logo/Logo.tsx

@@ -0,0 +1,3 @@
+export function Logo() {
+  return <img class="logo"></img>;
+}

src/Blog/SearchHeader/SearchRow/SearchButton/SearchButton.tsx

@@ -0,0 +1,3 @@
+export function SearchButton() {
+  return <Button class="search-button">Search</Button>;
+}

src/Blog/SearchHeader/SearchRow/SearchRow.tsx

@@ -0,0 +1,14 @@
+import Box from "@mui/material/Box";
+import { Logo } from "./Logo/Logo";
+import { SearchTextBox } from "./SearchTextBox/SearchTextBox";
+import { SearchButton } from "./SearchButton/SearchButton";
+
+export function SearchRow() {
+  return (
+    <Box class="search-row">
+      <Logo />
+      <SearchTextBox />
+      <SearchButton />
+    </Box>
+  );
+}

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

@@ -0,0 +1,3 @@
+export function SearchTextBox() {
+  return <TextField class="search-text-box"></TextField>;
+}

src/Blog/SearchHeader/TagCloud/TagCloud.tsx

@@ -0,0 +1,3 @@
+export function TagCloud() {
+  return <Box class="tag-cloud"></Box>;
+}

src/Blog/SearchResults/SearchResults.tsx

@@ -0,0 +1,5 @@
+import Box from "@mui/material/Box";
+
+export function SearchResults() {
+  return <Box class="search-results"></Box>;
+}

src/_404.tsx

@@ -0,0 +1,8 @@
+export function NotFound() {
+	return (
+		<section>
+			<h1>404: Not Found</h1>
+			<p>It's gone :(</p>
+		</section>
+	);
+}

src/index.tsx

@@ -0,0 +1,27 @@
+import { render } from "preact";
+import { LocationProvider, Router, Route } from "preact-iso";
+
+import { Header } from "./components/Header.jsx";
+import { Blog } from "./Blog/Blog.js";
+import { NotFound } from "./_404.js";
+import "./style.css";
+import "@fontsource/roboto/300.css";
+import "@fontsource/roboto/400.css";
+import "@fontsource/roboto/500.css";
+import "@fontsource/roboto/700.css";
+
+export function App() {
+  return (
+    <LocationProvider>
+      <Header />
+      <main>
+        <Router>
+          <Route path="/" component={Blog} />
+          <Route default component={NotFound} />
+        </Router>
+      </main>
+    </LocationProvider>
+  );
+}
+
+render(<App />, document.getElementById("app"));