feat: add about page, style tweaks

src/App.tsx

@@ -6,6 +6,7 @@ import "./App.css"
 import TagTemplate from "./templates/TagTemplate"
 import EntryTemplate from "./templates/EntryTemplate"
 import Settings from "./pages/settings"
+import About from "./pages/about"
 
 const queryClient = new QueryClient({
 	defaultOptions: {
@@ -24,6 +25,7 @@ export default function App() {
 				<Routes>
 					<Route index element={<Home />} />
 					<Route path="/settings" element={<Settings />} />
+					<Route path="/about" element={<About />} />
 					<Route path="/entries/:entry" element={<EntryTemplate />} />
 					<Route path="/tags/:tag" element={<TagTemplate />} />
 				</Routes>

src/containers/AppSidebar.tsx

@@ -18,7 +18,7 @@ import { Link } from "react-router"
 const footerMenu = [
    {
       title: "About",
-      url: "#",
+      url: "/about",
       icon: Info,
    },
 
@@ -77,7 +77,7 @@ export function AppSidebar() {
                            <SidebarMenuButton asChild className="rounded-none">
                               <Link to={item.url}>
                                  <item.icon />
-                                 <span>{item.title}</span>
+                                 <span className="font-medium">{item.title}</span>
                               </Link>
 
                               {/*

src/pages/about.tsx

@@ -0,0 +1,89 @@
+import PageTemplate from "@/templates/PageTemplate"
+
+const PageBody = () => {
+   return (
+      <div className="p-4 lg:p-6">
+         <p className="leading-[1.5] mb-4 not-first:mt-4">
+            Eólas is custom software I built because I wasn't happy with any of the main offerings
+            that exist for publishing personal knowledge bases. It is a work in progress and there
+            are several features I have yet to introduce.
+         </p>
+
+         <p className="leading-[1.5] mb-4 not-first:mt-4">
+            Eólas is Irish for "knowledge" or "experience", gained through practice.
+         </p>
+
+         <p className="leading-[1.5] mb-4 not-first:mt-4">
+            It is composed of several packages that combine to produce this interface:
+         </p>
+
+         <ul className="list-disc ml-10 mb-4 space-y-1">
+            <li>
+               <a
+                  className="text-foreground font-medium underline-offset-4 underline hover:text-gray-700 dark:hover:text-green-300"
+                  href="https://forgejo.systemsobscure.net/thomasabishop/eolas"
+                  target="__blank"
+               >
+                  eolas
+               </a>
+            </li>
+            <ul>
+               <li className="text-sm">The raw Markdown files that I work with locally.</li>
+            </ul>
+            <li>
+               <span>eolas-db</span>
+            </li>
+            <ul>
+               <li className="text-sm">
+                  A Python application that reads the local files, parses the content and metadata,
+                  and enters the data into an SQLite database.
+               </li>
+            </ul>
+            <li>
+               <span>eolas-api</span>
+            </li>
+            <ul>
+               <li className="text-sm">A NodeJS API that queries the SQLite database.</li>
+            </ul>
+            <li>
+               <span>eolas-app</span>
+            </li>
+            <ul>
+               <li className="text-sm">
+                  This frontend created with React that provides the public interface.
+               </li>
+            </ul>
+         </ul>
+
+         <p className="leading-[1.5] mb-4 not-first:mt-4">
+            The deployment of each sub-package is automated via Forgejo Actions. I also have a
+            script that executes each time I push from{" "}
+            <code className="rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm">
+               eolas
+            </code>{" "}
+            to the remote. This updates the database and uploads the assets to a Garage S3 bucket.
+         </p>
+
+         <p className="leading-[1.5] mb-4 not-first:mt-4">
+            Every aspect of the project, from the packages themselves to automation and version
+            management and S3, is self-hosted, running on my Virtual Private Server.
+         </p>
+
+         <p>
+            You can learn more about me at my website,{" "}
+            <a
+               className="text-foreground font-medium underline-offset-4 underline hover:text-gray-700 dark:hover:text-green-300"
+               href="https://systemsobscure.blog"
+               target="__blank"
+            >
+               Systems Obscure
+            </a>
+            .
+         </p>
+      </div>
+   )
+}
+
+export default function About() {
+   return <PageTemplate pageTitle="About" pageBody={<PageBody />} />
+}

src/pages/home.tsx

@@ -1,5 +1,7 @@
 import MainTemplate from "@/templates/MainTemplate"
 import RecentEdits from "@/containers/RecentEdits"
+import { Button } from "@/components/ui/button"
+import { Link } from "react-router"
 export default function Home() {
 	return (
 		<>
@@ -12,21 +14,14 @@ export default function Home() {
 									<h2 className="scroll-m-20 font-semibold">Welcome</h2>
 								</div>
 								<div className="p-4 lg:p-6">
-                           <p className="leading-7 [&:not(:first-child)]:mt-6 font-normal">
+									<p className="leading-7 [&:not(:first-child)]:mt-6 font-normal mb-4">
 										Eólas is my technical knowledge management system, or "second-brain",
 										comprising notes from the study of software engineering and computer
 										science.
 									</p>
-
+									<Button size="sm" variant="secondary" className="rounded-none" asChild>
-                           <p className="leading-7 [&:not(:first-child)]:mt-6 font-normal">
+										<Link to="/about">Learn more</Link>
-                              <a
+									</Button>
-                                 className="text-foreground underline-offset-3 font-medium underline hover:text-gray-700 dark:hover:text-green-300"
-                                 href="https://systemsobscure.blog/about"
-                                 target="_blank"
-                              >
-                                 Who am I?
-                              </a>
-                           </p>
 								</div>
 							</div>
 						</div>