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

small tweak
All checks were successful
Deploy Blog / deploy (push) Successful in 2m4s
Details

Browse source
This commit is contained in:
Thomas Bishop 2025-12-15 17:27:14 +00:00
parent 2da50612b9
commit 09c0a803bf
8 changed files with 160 additions and 164 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
posts/self-hosting-1-initial-setup.md
View file

@ -311,9 +311,7 @@ SSL for the new server.
In researching how to do the above, I created or expanded the following entries In researching how to do the above, I created or expanded the following entries
in my Zettelkasten: in my Zettelkasten:
- [Firewalls](https://thomasabishop.github.io/eolas/Firewalls) - [Firewalls](https://eolas.systemsobscure.net/entries/Firewalls?)
- [UFW firewall management](https://thomasabishop.github.io/eolas/UFW_firewall_management) - [UFW firewall management](https://eolas.systemsobscure.net/entries/UFW_firewall_management)
- [Disable non-root SSH access](https://thomasabishop.github.io/eolas/Disable_non-root_ssh_access) - [Disable non-root SSH access](https://eolas.systemsobscure.net/entries/Disable_non-root_ssh_access)
- [IP addresses](https://thomasabishop.github.io/eolas/IP_addresses) - [IP addresses](https://eolas.systemsobscure.net/entries/IP_addresse)
- [Internet fundamentals](https://thomasabishop.github.io/eolas/Internet_fundamentals)
- [The Application Layer of the Internet Protocol](https://thomasabishop.github.io/eolas/Application_Layer_of_Internet_Protocol)

6
posts/self-hosting-2-dns-tls.md
View file

@ -113,6 +113,6 @@ domain name over HTTPS!
In researching how to do the above, I created or expanded the following entries In researching how to do the above, I created or expanded the following entries
in my Zettelkasten: in my Zettelkasten:
- [Certificates and Certificate Authorities](https://thomasabishop.github.io/eolas/Certificate_authorities) - [Certificates and Certificate Authorities](https://eolas.systemsobscure.net/entries/Certificate_authorities)
- [Let's Encrypt](https://thomasabishop.github.io/eolas/Let's_Encrypt) - [Let's Encrypt](https://eolas.systemsobscure.net/entries/Let's_Encrypt)
- [HTTPS](https://thomasabishop.github.io/eolas/HTTPS) - [HTTPS](https://eolas.systemsobscure.net/entries/HTTPS)

12
posts/self-hosting-3-reverse-proxy-grafana.md
View file

@ -470,10 +470,8 @@ queries so I can analyse everything that is going on.
In researching how to do the above, I created or expanded the following entries In researching how to do the above, I created or expanded the following entries
in my Zettelkasten: in my Zettelkasten:
- [Proxies](https://thomasabishop.github.io/eolas/Proxies) - [Proxies](https://eolas.systemsobscure.net/entries/Proxies)
- [Containerization](https://thomasabishop.github.io/eolas/Containerization) - [Containerization](https://eolas.systemsobscure.net/entries/Containerization)
- [Docker images](https://thomasabishop.github.io/eolas/Docker_images) - [Docker images](https://eolas.systemsobscure.net/entries/Docker_images)
- [Creating a Docker image](https://thomasabishop.github.io/eolas/Creating_a_Docker_image) - [Creating a Docker image](https://eolas.systemsobscure.net/entries/Creating_a_Docker_image)
- [Docker containers](https://thomasabishop.github.io/eolas/Docker_containers) - [Docker containers](https://eolas.systemsobscure.net/entries/Docker_containers)
- [Docker storage](https://thomasabishop.github.io/eolas/Docker_storage)
- [Docker Compose and Dockerfile difference](https://thomasabishop.github.io/eolas/Docker_compose_and_Dockerfile_difference)

4
src/components/EolasListing.jsx
View file

@ -37,8 +37,8 @@ const EolasListing = () => {
<div className="container mx-auto p-4 grow"> <div className="container mx-auto p-4 grow">
<div className="space-my-8"> <div className="space-my-8">
<section className="container"> <section className="container">
<h2 className="text-2xl font-semibold mb-4 text-[#d65d0e]! scanlined inline-block px-2 h2-home"> <h2 className="text-2xl font-semibold mb-4 text-[#d65d0e]! inline-block h2-home">
{`> recent learning (external)`} {`zettelkasten recent`}
</h2> </h2>
{isLoading && <div>Loading...</div>} {isLoading && <div>Loading...</div>}

192
src/containers/CodeStats.jsx
View file

@ -6,114 +6,114 @@ import LanguagesChart from "../components/LanguagesChart"
import ProjectsChart from "../components/ProjectsChart" import ProjectsChart from "../components/ProjectsChart"
const convertSeconds = (secs) => { const convertSeconds = (secs) => {
return `${Math.floor(secs / 3600)}h ${Math.floor((secs % 3600) / 60)}m` return `${Math.floor(secs / 3600)}h ${Math.floor((secs % 3600) / 60)}m`
} }
const CodeStats = () => { const CodeStats = () => {
const { data, isLoading, error } = useQuery({ const { data, isLoading, error } = useQuery({
queryKey: ["codestats"], queryKey: ["codestats"],
queryFn: () => queryFn: () =>
wakapiApi.get(`summary?interval=month`).then((res) => res.data), wakapiApi.get(`summary?interval=month`).then((res) => res.data),
}) })
const grandTotal = data?.projects.reduce((acc, curr) => acc + curr.total, 0) const grandTotal = data?.projects.reduce((acc, curr) => acc + curr.total, 0)
const grandTotalFormatted = `${Math.floor(grandTotal / 3600)}h ${Math.floor((grandTotal % 3600) / 60)}m` const grandTotalFormatted = `${Math.floor(grandTotal / 3600)}h ${Math.floor((grandTotal % 3600) / 60)}m`
const os = data?.operating_systems const os = data?.operating_systems
const osMetric = os ? ( const osMetric = os ? (
<div className="text-sm"> <div className="text-sm">
{os[0]?.key}: {convertSeconds(os[0].total)}, {os[1]?.key}:{" "} {os[0]?.key}: {convertSeconds(os[0].total)}, {os[1]?.key}:{" "}
{convertSeconds(os[1].total)} {convertSeconds(os[1].total)}
</div> </div>
) : ( ) : (
"Error" "Error"
) )
const personalProjects = const personalProjects =
data && data &&
data?.projects.filter( data?.projects.filter(
(project) => (project) =>
!project.key.includes("gp-") && !project.key.includes("unknown") !project.key.includes("gp-") && !project.key.includes("unknown")
) )
const personalProjectsSorted = const personalProjectsSorted =
personalProjects && personalProjects.sort((a, b) => b.total - a.total) personalProjects && personalProjects.sort((a, b) => b.total - a.total)
const mainProject = personalProjects ? personalProjectsSorted[0].key : "Error" const mainProject = personalProjects ? personalProjectsSorted[0].key : "Error"
const languagesChartData = data?.languages const languagesChartData = data?.languages
.map((lang) => ({ .map((lang) => ({
metric: lang.key, metric: lang.key,
language: lang.key, language: lang.key,
hours: (lang.total / 3600).toFixed(1), hours: (lang.total / 3600).toFixed(1),
percentage: ( percentage: (
(lang.total / data.languages.reduce((sum, i) => sum + i.total, 0)) * (lang.total / data.languages.reduce((sum, i) => sum + i.total, 0)) *
100 100
).toFixed(1), ).toFixed(1),
})) }))
.slice(0, 8) .slice(0, 8)
const projectsChartData = const projectsChartData =
personalProjects && personalProjects &&
personalProjects personalProjects
.map((proj) => ({ .map((proj) => ({
metric: proj.key, metric: proj.key,
project: proj.key, project: proj.key,
hours: (proj.total / 3600).toFixed(1), hours: (proj.total / 3600).toFixed(1),
percentage: ( percentage: (
(proj.total / personalProjects.reduce((sum, i) => sum + i.total, 0)) * (proj.total / personalProjects.reduce((sum, i) => sum + i.total, 0)) *
100 100
).toFixed(1), ).toFixed(1),
})) }))
.slice(0, 4) .slice(0, 4)
return ( return (
<div className="container mx-auto p-4 grow"> <div className="container mx-auto p-4 grow">
<div className="space-my-8"> <div className="space-my-8">
<section className="container"> <section className="container">
<div className="flex flex-col md:flex-row items-start md:items-center md:justify-between"> <div className="flex flex-col md:flex-row items-start md:items-center md:justify-between">
<h2 className="text-2xl font-semibold mb-4 text-[#458588]! scanlined inline-block px-1 h2-home"> <h2 className="text-2xl font-semibold mb-4 text-[#458588]! inline-block h2-home">
{`> code stats`} {`code stats`}
</h2> </h2>
<div className="mb-4 text-sm text-muted"> <div className="mb-4 text-sm text-muted">
{convertDateFriendly(data?.from)} -{" "} {convertDateFriendly(data?.from)} -{" "}
{convertDateFriendly(data?.to)} {convertDateFriendly(data?.to)}
</div> </div>
</div> </div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<Scorecard <Scorecard
title="time coding" title="time coding"
metric={ metric={
error ? "Error" : isLoading ? "Loading..." : grandTotalFormatted error ? "Error" : isLoading ? "Loading..." : grandTotalFormatted
} }
/> />
<Scorecard <Scorecard
title="main project" title="main project"
metric={error ? "Error" : isLoading ? "Loading..." : mainProject} metric={error ? "Error" : isLoading ? "Loading..." : mainProject}
/> />
<Scorecard <Scorecard
title="OS" title="OS"
metric={error ? "Error" : isLoading ? "Loading..." : osMetric} metric={error ? "Error" : isLoading ? "Loading..." : osMetric}
/> />
</div> </div>
<LanguagesChart chartData={languagesChartData} error={error} /> <LanguagesChart chartData={languagesChartData} error={error} />
<ProjectsChart chartData={projectsChartData} error={error} /> <ProjectsChart chartData={projectsChartData} error={error} />
<div className="text-sm text-center text-muted-foreground"> <div className="text-sm text-center text-muted-foreground">
Data sourced from my self-hosted{" "} Data sourced from my self-hosted{" "}
<a <a
href="https://wakapi.dev/" href="https://wakapi.dev/"
target="__blank" target="__blank"
className="underline decoration-1 hover:text-primary/80 underline-offset-4 text-primary" className="underline decoration-1 hover:text-primary/80 underline-offset-4 text-primary"
> >
Wakapi Wakapi
</a>{" "} </a>{" "}
instance. instance.
</div> </div>
</section> </section>
</div> </div>
</div> </div>
) )
} }
export default CodeStats export default CodeStats

4
src/containers/PostListing.jsx
View file

@ -8,8 +8,8 @@ const PostListing = ({ posts, title, showAllButton }) => {
<div className="container mx-auto p-4 grow"> <div className="container mx-auto p-4 grow">
<div className="space-my-8"> <div className="space-my-8">
<section className="container"> <section className="container">
<h2 className="text-2xl font-semibold mb-4 scanlined block px-2 h2-home"> <h2 className="text-2xl font-semibold mb-4 block h2-home">
{`> ${title}`} {`${title}`}
</h2> </h2>
{posts.map((post) => ( {posts.map((post) => (
<ul> <ul>

10
src/pages/home.jsx
View file

@ -23,9 +23,9 @@ const HomePage = () => {
systems obscure systems obscure
</div> </div>
</h1> </h1>
<p className="text-center sm:text-left md:text-left text-muted condensed font-medium text-lg"> <p className="text-center sm:text-left md:text-left text-muted font-medium text-lg">
Software engineer at ITV. This is my technical scrapbook and Another software engineer with a blog. This is my technical
digital garden. scrapbook and digital garden.
</p> </p>
</div> </div>
</div> </div>
@ -43,8 +43,8 @@ const HomePage = () => {
<div className="container mx-auto p-4 grow"> <div className="container mx-auto p-4 grow">
<div className="space-my-8"> <div className="space-my-8">
<section className="container"> <section className="container">
<h2 className="text-2xl font-semibold mb-4 text-[#d3869b]! scanlined block px-2 h2-home"> <h2 className="text-2xl font-semibold mb-4 text-[#d3869b]! block h2-home">
{`> projects`} {`projects`}
</h2> </h2>
<ul> <ul>
<li className="pb-2"> <li className="pb-2">

86
src/templates/BlogTemplate.jsx
View file

@ -5,44 +5,44 @@ import { convertDate } from "@/utils/convertDate"
import { usePosts } from "@/hooks/usePosts" import { usePosts } from "@/hooks/usePosts"
const BlogTemplate = () => { const BlogTemplate = () => {
const { slug } = useParams() const { slug } = useParams()
const { posts } = usePosts() const { posts } = usePosts()
const post = posts?.find((x) => x.slug === slug) const post = posts?.find((x) => x.slug === slug)
return ( return (
<MainTemplate> <MainTemplate>
<div className="container mx-auto p-4 grow"> <div className="container mx-auto p-4 grow">
{!post ? ( {!post ? (
<div>Loading...</div> <div>Loading...</div>
) : ( ) : (
<article className="prose prose-lg max-w-none"> <article className="prose prose-lg max-w-none">
<header className="mb-6 pb-4"> <header className="mb-6 pb-4">
<h1 className="text-4xl font-bold mb-4 leading-tight inline-block scanlined px-3"> <h1 className="text-4xl font-bold mb-4 leading-tight inline-block scanlined px-3">
{post?.title} {post?.title}
</h1> </h1>
<div className="flex flex-wrap align-center gap-4 text-[#928374] condensed font-medium"> <div className="flex flex-wrap align-center gap-4 text-[#928374] condensed font-medium">
<time datetime={convertDate(post?.date)} className="text-sm"> <time datetime={convertDate(post?.date)} className="text-sm">
{convertDate(post?.date)} {convertDate(post?.date)}
</time> </time>
<div className="flex flex-wrap gap-3 align-center"> <div className="flex flex-wrap gap-3 align-center">
{post?.tags?.map((tag, i) => ( {post?.tags?.map((tag, i) => (
<Link <Link
className="text-primary text-sm underline underline-offset-3 hover:text-[#689d6a]" className="text-primary text-sm underline underline-offset-3 hover:text-[#689d6a]"
key={i} key={i}
to={`/tags/${tag}`} to={`/tags/${tag}`}
> >
{tag} {tag}
</Link> </Link>
))} ))}
</div> </div>
</div> </div>
</header> </header>
<div <div
className=" className="
[&>h2]:text-2xl [&>h2]:font-medium [&>h2]:my-4 [&>h2]:text-[#fe8019]! [&>h2]:text-2xl [&>h2]:font-medium [&>h2]:my-4 [&>h2]:text-[#ebdbb2]!
[&>h3]:text-xl [&>h3]:font-medium [&>h3]:my-4 [&>h3]:text-[##fe8019] [&>h3]:text-xl [&>h3]:font-medium [&>h3]:my-4 [&>h3]:text-[#ebdbb2]!
[&>h4]:text-lg [&>h4]:font-medium [&>h4]:my-4 [&>h4]:text-[#fe8019] [&>h4]:text-lg [&>h4]:font-medium [&>h4]:my-4 [&>h4]:text-[#ebdbb2]!
[&>p]:leading-7 [&>p:not(:first-child)]:mt-4 [&>p]:leading-7 [&>p:not(:first-child)]:mt-4
[&>p+:is(h1,h2,h3,h4,h5,h6)]:mt-6 [&>p+:is(h1,h2,h3,h4,h5,h6)]:mt-6
[&>blockquote]:mt-4 [&>blockquote]:border-l-2 [&>blockquote]:pl-6 [&>blockquote]:text-muted-foreground [&>blockquote]:mt-4 [&>blockquote]:border-l-2 [&>blockquote]:pl-6 [&>blockquote]:text-muted-foreground
@ -65,13 +65,13 @@ const BlogTemplate = () => {
[&>table>tbody>tr]:m-0 [&>table>tbody>tr]:border-t [&>table>tbody>tr]:p-0 [&>table>tbody>tr:even]:bg-muted [&>table>tbody>tr]:m-0 [&>table>tbody>tr]:border-t [&>table>tbody>tr]:p-0 [&>table>tbody>tr:even]:bg-muted
[&>table>tbody>tr>td]:border [&>table>tbody>tr>td]:px-4 [&>table>tbody>tr>td]:py-2 [&>table>tbody>tr>td]:text-left [&>table>tbody>tr>td[align=center]]:text-center [&>table>tbody>tr>td[align=right]]:text-right [&>table>tbody>tr>td]:border [&>table>tbody>tr>td]:px-4 [&>table>tbody>tr>td]:py-2 [&>table>tbody>tr>td]:text-left [&>table>tbody>tr>td[align=center]]:text-center [&>table>tbody>tr>td[align=right]]:text-right
" "
dangerouslySetInnerHTML={{ __html: post?.html }} dangerouslySetInnerHTML={{ __html: post?.html }}
/> />
</article> </article>
)} )}
</div> </div>
</MainTemplate> </MainTemplate>
) )
} }
export default BlogTemplate export default BlogTemplate