thomasabishop/eolas-app
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: add about page, style tweaks
All checks were successful
Deploy eolas-app / deploy (push) Successful in 51s
Details

Browse source
This commit is contained in:
Thomas Bishop 2025-12-06 16:59:42 +00:00
parent 7143d0f389
commit 01b915552c
4 changed files with 145 additions and 59 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
src/App.tsx
View file

@ -6,29 +6,31 @@ import "./App.css"
import TagTemplate from "./templates/TagTemplate" import TagTemplate from "./templates/TagTemplate"
import EntryTemplate from "./templates/EntryTemplate" import EntryTemplate from "./templates/EntryTemplate"
import Settings from "./pages/settings" import Settings from "./pages/settings"
import About from "./pages/about"
const queryClient = new QueryClient({ const queryClient = new QueryClient({
defaultOptions: { defaultOptions: {
queries: { queries: {
staleTime: 15 * 60 * 1000, // 15 minutes staleTime: 15 * 60 * 1000, // 15 minutes
retry: 3, retry: 3,
refetchOnWindowFocus: false, refetchOnWindowFocus: false,
}, },
}, },
}) })
export default function App() { export default function App() {
return ( return (
<BrowserRouter> <BrowserRouter>
<QueryClientProvider client={queryClient}> <QueryClientProvider client={queryClient}>
<Routes> <Routes>
<Route index element={<Home />} /> <Route index element={<Home />} />
<Route path="/settings" element={<Settings />} /> <Route path="/settings" element={<Settings />} />
<Route path="/entries/:entry" element={<EntryTemplate />} /> <Route path="/about" element={<About />} />
<Route path="/tags/:tag" element={<TagTemplate />} /> <Route path="/entries/:entry" element={<EntryTemplate />} />
</Routes> <Route path="/tags/:tag" element={<TagTemplate />} />
<ReactQueryDevtools initialIsOpen={false} /> </Routes>
</QueryClientProvider> <ReactQueryDevtools initialIsOpen={false} />
</BrowserRouter> </QueryClientProvider>
) </BrowserRouter>
)
} }

4
src/containers/AppSidebar.tsx
View file

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

89
src/pages/about.tsx Normal file
View 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 />} />
}

69
src/pages/home.tsx
View file

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