This commit is contained in:
parent
2da50612b9
commit
09c0a803bf
8 changed files with 160 additions and 164 deletions
|
|
@ -311,9 +311,7 @@ SSL for the new server.
|
|||
In researching how to do the above, I created or expanded the following entries
|
||||
in my Zettelkasten:
|
||||
|
||||
- [Firewalls](https://thomasabishop.github.io/eolas/Firewalls)
|
||||
- [UFW firewall management](https://thomasabishop.github.io/eolas/UFW_firewall_management)
|
||||
- [Disable non-root SSH access](https://thomasabishop.github.io/eolas/Disable_non-root_ssh_access)
|
||||
- [IP addresses](https://thomasabishop.github.io/eolas/IP_addresses)
|
||||
- [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)
|
||||
- [Firewalls](https://eolas.systemsobscure.net/entries/Firewalls?)
|
||||
- [UFW firewall management](https://eolas.systemsobscure.net/entries/UFW_firewall_management)
|
||||
- [Disable non-root SSH access](https://eolas.systemsobscure.net/entries/Disable_non-root_ssh_access)
|
||||
- [IP addresses](https://eolas.systemsobscure.net/entries/IP_addresse)
|
||||
|
|
|
|||
|
|
@ -113,6 +113,6 @@ domain name over HTTPS!
|
|||
In researching how to do the above, I created or expanded the following entries
|
||||
in my Zettelkasten:
|
||||
|
||||
- [Certificates and Certificate Authorities](https://thomasabishop.github.io/eolas/Certificate_authorities)
|
||||
- [Let's Encrypt](https://thomasabishop.github.io/eolas/Let's_Encrypt)
|
||||
- [HTTPS](https://thomasabishop.github.io/eolas/HTTPS)
|
||||
- [Certificates and Certificate Authorities](https://eolas.systemsobscure.net/entries/Certificate_authorities)
|
||||
- [Let's Encrypt](https://eolas.systemsobscure.net/entries/Let's_Encrypt)
|
||||
- [HTTPS](https://eolas.systemsobscure.net/entries/HTTPS)
|
||||
|
|
|
|||
|
|
@ -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 my Zettelkasten:
|
||||
|
||||
- [Proxies](https://thomasabishop.github.io/eolas/Proxies)
|
||||
- [Containerization](https://thomasabishop.github.io/eolas/Containerization)
|
||||
- [Docker images](https://thomasabishop.github.io/eolas/Docker_images)
|
||||
- [Creating a Docker image](https://thomasabishop.github.io/eolas/Creating_a_Docker_image)
|
||||
- [Docker containers](https://thomasabishop.github.io/eolas/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)
|
||||
- [Proxies](https://eolas.systemsobscure.net/entries/Proxies)
|
||||
- [Containerization](https://eolas.systemsobscure.net/entries/Containerization)
|
||||
- [Docker images](https://eolas.systemsobscure.net/entries/Docker_images)
|
||||
- [Creating a Docker image](https://eolas.systemsobscure.net/entries/Creating_a_Docker_image)
|
||||
- [Docker containers](https://eolas.systemsobscure.net/entries/Docker_containers)
|
||||
|
|
|
|||
|
|
@ -37,8 +37,8 @@ const EolasListing = () => {
|
|||
<div className="container mx-auto p-4 grow">
|
||||
<div className="space-my-8">
|
||||
<section className="container">
|
||||
<h2 className="text-2xl font-semibold mb-4 text-[#d65d0e]! scanlined inline-block px-2 h2-home">
|
||||
{`> recent learning (external)`}
|
||||
<h2 className="text-2xl font-semibold mb-4 text-[#d65d0e]! inline-block h2-home">
|
||||
{`zettelkasten recent`}
|
||||
</h2>
|
||||
|
||||
{isLoading && <div>Loading...</div>}
|
||||
|
|
|
|||
|
|
@ -6,114 +6,114 @@ import LanguagesChart from "../components/LanguagesChart"
|
|||
import ProjectsChart from "../components/ProjectsChart"
|
||||
|
||||
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 { data, isLoading, error } = useQuery({
|
||||
queryKey: ["codestats"],
|
||||
queryFn: () =>
|
||||
wakapiApi.get(`summary?interval=month`).then((res) => res.data),
|
||||
})
|
||||
const { data, isLoading, error } = useQuery({
|
||||
queryKey: ["codestats"],
|
||||
queryFn: () =>
|
||||
wakapiApi.get(`summary?interval=month`).then((res) => res.data),
|
||||
})
|
||||
|
||||
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 os = data?.operating_systems
|
||||
const osMetric = os ? (
|
||||
<div className="text-sm">
|
||||
{os[0]?.key}: {convertSeconds(os[0].total)}, {os[1]?.key}:{" "}
|
||||
{convertSeconds(os[1].total)}
|
||||
</div>
|
||||
) : (
|
||||
"Error"
|
||||
)
|
||||
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 os = data?.operating_systems
|
||||
const osMetric = os ? (
|
||||
<div className="text-sm">
|
||||
{os[0]?.key}: {convertSeconds(os[0].total)}, {os[1]?.key}:{" "}
|
||||
{convertSeconds(os[1].total)}
|
||||
</div>
|
||||
) : (
|
||||
"Error"
|
||||
)
|
||||
|
||||
const personalProjects =
|
||||
data &&
|
||||
data?.projects.filter(
|
||||
(project) =>
|
||||
!project.key.includes("gp-") && !project.key.includes("unknown")
|
||||
)
|
||||
const personalProjects =
|
||||
data &&
|
||||
data?.projects.filter(
|
||||
(project) =>
|
||||
!project.key.includes("gp-") && !project.key.includes("unknown")
|
||||
)
|
||||
|
||||
const personalProjectsSorted =
|
||||
personalProjects && personalProjects.sort((a, b) => b.total - a.total)
|
||||
const personalProjectsSorted =
|
||||
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
|
||||
.map((lang) => ({
|
||||
metric: lang.key,
|
||||
language: lang.key,
|
||||
hours: (lang.total / 3600).toFixed(1),
|
||||
percentage: (
|
||||
(lang.total / data.languages.reduce((sum, i) => sum + i.total, 0)) *
|
||||
100
|
||||
).toFixed(1),
|
||||
}))
|
||||
.slice(0, 8)
|
||||
const languagesChartData = data?.languages
|
||||
.map((lang) => ({
|
||||
metric: lang.key,
|
||||
language: lang.key,
|
||||
hours: (lang.total / 3600).toFixed(1),
|
||||
percentage: (
|
||||
(lang.total / data.languages.reduce((sum, i) => sum + i.total, 0)) *
|
||||
100
|
||||
).toFixed(1),
|
||||
}))
|
||||
.slice(0, 8)
|
||||
|
||||
const projectsChartData =
|
||||
personalProjects &&
|
||||
personalProjects
|
||||
.map((proj) => ({
|
||||
metric: proj.key,
|
||||
project: proj.key,
|
||||
hours: (proj.total / 3600).toFixed(1),
|
||||
percentage: (
|
||||
(proj.total / personalProjects.reduce((sum, i) => sum + i.total, 0)) *
|
||||
100
|
||||
).toFixed(1),
|
||||
}))
|
||||
.slice(0, 4)
|
||||
const projectsChartData =
|
||||
personalProjects &&
|
||||
personalProjects
|
||||
.map((proj) => ({
|
||||
metric: proj.key,
|
||||
project: proj.key,
|
||||
hours: (proj.total / 3600).toFixed(1),
|
||||
percentage: (
|
||||
(proj.total / personalProjects.reduce((sum, i) => sum + i.total, 0)) *
|
||||
100
|
||||
).toFixed(1),
|
||||
}))
|
||||
.slice(0, 4)
|
||||
|
||||
return (
|
||||
<div className="container mx-auto p-4 grow">
|
||||
<div className="space-my-8">
|
||||
<section className="container">
|
||||
<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">
|
||||
{`> code stats`}
|
||||
</h2>
|
||||
<div className="mb-4 text-sm text-muted">
|
||||
{convertDateFriendly(data?.from)} -{" "}
|
||||
{convertDateFriendly(data?.to)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
<Scorecard
|
||||
title="time coding"
|
||||
metric={
|
||||
error ? "Error" : isLoading ? "Loading..." : grandTotalFormatted
|
||||
}
|
||||
/>
|
||||
return (
|
||||
<div className="container mx-auto p-4 grow">
|
||||
<div className="space-my-8">
|
||||
<section className="container">
|
||||
<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]! inline-block h2-home">
|
||||
{`code stats`}
|
||||
</h2>
|
||||
<div className="mb-4 text-sm text-muted">
|
||||
{convertDateFriendly(data?.from)} -{" "}
|
||||
{convertDateFriendly(data?.to)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
<Scorecard
|
||||
title="time coding"
|
||||
metric={
|
||||
error ? "Error" : isLoading ? "Loading..." : grandTotalFormatted
|
||||
}
|
||||
/>
|
||||
|
||||
<Scorecard
|
||||
title="main project"
|
||||
metric={error ? "Error" : isLoading ? "Loading..." : mainProject}
|
||||
/>
|
||||
<Scorecard
|
||||
title="main project"
|
||||
metric={error ? "Error" : isLoading ? "Loading..." : mainProject}
|
||||
/>
|
||||
|
||||
<Scorecard
|
||||
title="OS"
|
||||
metric={error ? "Error" : isLoading ? "Loading..." : osMetric}
|
||||
/>
|
||||
</div>
|
||||
<LanguagesChart chartData={languagesChartData} error={error} />
|
||||
<ProjectsChart chartData={projectsChartData} error={error} />
|
||||
<div className="text-sm text-center text-muted-foreground">
|
||||
Data sourced from my self-hosted{" "}
|
||||
<a
|
||||
href="https://wakapi.dev/"
|
||||
target="__blank"
|
||||
className="underline decoration-1 hover:text-primary/80 underline-offset-4 text-primary"
|
||||
>
|
||||
Wakapi
|
||||
</a>{" "}
|
||||
instance.
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
<Scorecard
|
||||
title="OS"
|
||||
metric={error ? "Error" : isLoading ? "Loading..." : osMetric}
|
||||
/>
|
||||
</div>
|
||||
<LanguagesChart chartData={languagesChartData} error={error} />
|
||||
<ProjectsChart chartData={projectsChartData} error={error} />
|
||||
<div className="text-sm text-center text-muted-foreground">
|
||||
Data sourced from my self-hosted{" "}
|
||||
<a
|
||||
href="https://wakapi.dev/"
|
||||
target="__blank"
|
||||
className="underline decoration-1 hover:text-primary/80 underline-offset-4 text-primary"
|
||||
>
|
||||
Wakapi
|
||||
</a>{" "}
|
||||
instance.
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default CodeStats
|
||||
|
|
|
|||
|
|
@ -8,8 +8,8 @@ const PostListing = ({ posts, title, showAllButton }) => {
|
|||
<div className="container mx-auto p-4 grow">
|
||||
<div className="space-my-8">
|
||||
<section className="container">
|
||||
<h2 className="text-2xl font-semibold mb-4 scanlined block px-2 h2-home">
|
||||
{`> ${title}`}
|
||||
<h2 className="text-2xl font-semibold mb-4 block h2-home">
|
||||
{`${title}`}
|
||||
</h2>
|
||||
{posts.map((post) => (
|
||||
<ul>
|
||||
|
|
|
|||
|
|
@ -23,9 +23,9 @@ const HomePage = () => {
|
|||
systems obscure
|
||||
</div>
|
||||
</h1>
|
||||
<p className="text-center sm:text-left md:text-left text-muted condensed font-medium text-lg">
|
||||
Software engineer at ITV. This is my technical scrapbook and
|
||||
digital garden.
|
||||
<p className="text-center sm:text-left md:text-left text-muted font-medium text-lg">
|
||||
Another software engineer with a blog. This is my technical
|
||||
scrapbook and digital garden.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -43,8 +43,8 @@ const HomePage = () => {
|
|||
<div className="container mx-auto p-4 grow">
|
||||
<div className="space-my-8">
|
||||
<section className="container">
|
||||
<h2 className="text-2xl font-semibold mb-4 text-[#d3869b]! scanlined block px-2 h2-home">
|
||||
{`> projects`}
|
||||
<h2 className="text-2xl font-semibold mb-4 text-[#d3869b]! block h2-home">
|
||||
{`projects`}
|
||||
</h2>
|
||||
<ul>
|
||||
<li className="pb-2">
|
||||
|
|
|
|||
|
|
@ -5,44 +5,44 @@ import { convertDate } from "@/utils/convertDate"
|
|||
import { usePosts } from "@/hooks/usePosts"
|
||||
|
||||
const BlogTemplate = () => {
|
||||
const { slug } = useParams()
|
||||
const { posts } = usePosts()
|
||||
const post = posts?.find((x) => x.slug === slug)
|
||||
const { slug } = useParams()
|
||||
const { posts } = usePosts()
|
||||
const post = posts?.find((x) => x.slug === slug)
|
||||
|
||||
return (
|
||||
<MainTemplate>
|
||||
<div className="container mx-auto p-4 grow">
|
||||
{!post ? (
|
||||
<div>Loading...</div>
|
||||
) : (
|
||||
<article className="prose prose-lg max-w-none">
|
||||
<header className="mb-6 pb-4">
|
||||
<h1 className="text-4xl font-bold mb-4 leading-tight inline-block scanlined px-3">
|
||||
{post?.title}
|
||||
</h1>
|
||||
<div className="flex flex-wrap align-center gap-4 text-[#928374] condensed font-medium">
|
||||
<time datetime={convertDate(post?.date)} className="text-sm">
|
||||
{convertDate(post?.date)}
|
||||
</time>
|
||||
<div className="flex flex-wrap gap-3 align-center">
|
||||
{post?.tags?.map((tag, i) => (
|
||||
<Link
|
||||
className="text-primary text-sm underline underline-offset-3 hover:text-[#689d6a]"
|
||||
key={i}
|
||||
to={`/tags/${tag}`}
|
||||
>
|
||||
{tag}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
return (
|
||||
<MainTemplate>
|
||||
<div className="container mx-auto p-4 grow">
|
||||
{!post ? (
|
||||
<div>Loading...</div>
|
||||
) : (
|
||||
<article className="prose prose-lg max-w-none">
|
||||
<header className="mb-6 pb-4">
|
||||
<h1 className="text-4xl font-bold mb-4 leading-tight inline-block scanlined px-3">
|
||||
{post?.title}
|
||||
</h1>
|
||||
<div className="flex flex-wrap align-center gap-4 text-[#928374] condensed font-medium">
|
||||
<time datetime={convertDate(post?.date)} className="text-sm">
|
||||
{convertDate(post?.date)}
|
||||
</time>
|
||||
<div className="flex flex-wrap gap-3 align-center">
|
||||
{post?.tags?.map((tag, i) => (
|
||||
<Link
|
||||
className="text-primary text-sm underline underline-offset-3 hover:text-[#689d6a]"
|
||||
key={i}
|
||||
to={`/tags/${tag}`}
|
||||
>
|
||||
{tag}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div
|
||||
className="
|
||||
[&>h2]:text-2xl [&>h2]:font-medium [&>h2]:my-4 [&>h2]:text-[#fe8019]!
|
||||
[&>h3]:text-xl [&>h3]:font-medium [&>h3]:my-4 [&>h3]:text-[##fe8019]
|
||||
[&>h4]:text-lg [&>h4]:font-medium [&>h4]:my-4 [&>h4]:text-[#fe8019]
|
||||
<div
|
||||
className="
|
||||
[&>h2]:text-2xl [&>h2]:font-medium [&>h2]:my-4 [&>h2]:text-[#ebdbb2]!
|
||||
[&>h3]:text-xl [&>h3]:font-medium [&>h3]:my-4 [&>h3]:text-[#ebdbb2]!
|
||||
[&>h4]:text-lg [&>h4]:font-medium [&>h4]:my-4 [&>h4]:text-[#ebdbb2]!
|
||||
[&>p]:leading-7 [&>p:not(:first-child)]:mt-4
|
||||
[&>p+:is(h1,h2,h3,h4,h5,h6)]:mt-6
|
||||
[&>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>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 }}
|
||||
/>
|
||||
</article>
|
||||
)}
|
||||
</div>
|
||||
</MainTemplate>
|
||||
)
|
||||
dangerouslySetInnerHTML={{ __html: post?.html }}
|
||||
/>
|
||||
</article>
|
||||
)}
|
||||
</div>
|
||||
</MainTemplate>
|
||||
)
|
||||
}
|
||||
|
||||
export default BlogTemplate
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue