feat: add about page, style tweaks
All checks were successful
Deploy eolas-app / deploy (push) Successful in 51s
All checks were successful
Deploy eolas-app / deploy (push) Successful in 51s
This commit is contained in:
parent
7143d0f389
commit
01b915552c
4 changed files with 145 additions and 59 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
{/*
|
||||
|
|
|
|||
89
src/pages/about.tsx
Normal file
89
src/pages/about.tsx
Normal file
|
|
@ -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 />} />
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
||||
<p className="leading-7 [&:not(:first-child)]:mt-6 font-normal">
|
||||
<a
|
||||
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>
|
||||
<Button size="sm" variant="secondary" className="rounded-none" asChild>
|
||||
<Link to="/about">Learn more</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue