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

restyle tweaks
All checks were successful
Deploy Blog / deploy (push) Successful in 2m18s
Details

Browse source
This commit is contained in:
Thomas Bishop 2026-03-11 16:06:45 +00:00
parent f62963f5c9
commit dbf853be9e
11 changed files with 132 additions and 78 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/components/LanguagesChart.jsx
View file

@ -2,9 +2,9 @@ import MetricBar from "./MetricBar"
const LanguagesChart = ({ chartData, error }) => {
return (
<div className="bg-sidebar p-3 my-4">
<div className="text-muted-foreground text-sm pb-2">
programming languages
<div style={{marginTop:'1rem'}}>
<div className="code-stat-label" style={{marginBottom: '.5rem'}}>
Programming languages
</div>
{error ? (
@ -18,7 +18,7 @@ const LanguagesChart = ({ chartData, error }) => {
metric={x.language}
hours={x.hours}
percentage={x.percentage}
color="#458588"
color="dodgerblue"
/>
))
)}

7
src/components/MetricBar.jsx
View file

@ -1,5 +1,5 @@
const MetricBar = ({ metric, hours, percentage, color }) => (
<div style={{ marginBottom: "12px" }}>
<div style={{ marginBottom: "12px", margin: '.5rem' }}>
<div
style={{
display: "flex",
@ -9,7 +9,7 @@ const MetricBar = ({ metric, hours, percentage, color }) => (
}}
>
<span style={{}}>{metric}</span>
<span style={{ color: "#bdae93" }}>
<span style={{ color: "black" }}>
{hours}h ({percentage}%)
</span>
</div>
@ -17,8 +17,7 @@ const MetricBar = ({ metric, hours, percentage, color }) => (
style={{
width: "100%",
height: "8px",
backgroundColor: "#32302f",
borderRadius: "4px",
backgroundColor: "lightgrey",
overflow: "hidden",
}}
>

8
src/components/ProjectsChart.jsx
View file

@ -2,8 +2,8 @@ import MetricBar from "./MetricBar"
const ProjectsChart = ({ chartData, error }) => {
return (
<div className="bg-sidebar p-3 my-4">
<div className="text-muted-foreground text-sm pb-2">projects</div>
<div style={{marginTop: '1rem'}}>
<div className="code-stat-label">Repos</div>
{error ? (
<div>Data could not be found!</div>
@ -16,11 +16,11 @@ const ProjectsChart = ({ chartData, error }) => {
metric={x.project}
hours={x.hours}
percentage={x.percentage}
color="#fe8019"
color="dodgerblue"
/>
))
)}
<div className="text-sm text-muted-foreground">
<div className="code-stats-disclaimer">
Data excludes workplace repos.
</div>
</div>

6
src/components/Scorecard.jsx
View file

@ -1,8 +1,8 @@
const Scorecard = ({ title, metric }) => {
return (
<div className="bg-sidebar p-3">
<div className="text-muted-foreground text-sm">{title}</div>
<div className="text-lg">{metric}</div>
<div className="code-stat-grid">
<div className="code-stat-label">{title}</div>
<div className="code-stat-metric">{metric}</div>
</div>
)
}

36
src/containers/CodeStats.jsx
View file

@ -32,7 +32,7 @@ const CodeStats = () => {
data &&
data?.projects.filter(
(project) =>
!project.key.includes("gp-") && !project.key.includes("unknown")
!project.key.includes("gp-") && !project.key.includes("unknown") && !project.key.includes("amber")
)
const personalProjectsSorted =
@ -67,44 +67,42 @@ const CodeStats = () => {
.slice(0, 4)
return (
<div className="container mx-auto py-4 px-1 md: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]! h2-home scanlined px-2">
{`code stats`}
<div className="">
<div className="">
<section className="">
<div className="">
<h2 className="">
{`Code stats`}
</h2>
<div className="mb-4 text-sm text-muted">
{convertDateFriendly(data?.from)} -{" "}
{convertDateFriendly(data?.to)}
<div className="code-stat-grid">
<span className="code-stat-label" style={{marginRight: '2rem'}}>Period:</span>
<span className="code-stat-metric">{convertDateFriendly(data?.from)} -{" "}
{convertDateFriendly(data?.to)}</span>
</div>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div className="">
<Scorecard
title="time coding"
title="Total time:"
metric={
error ? "Error" : isLoading ? "Loading..." : grandTotalFormatted
}
/>
<Scorecard
title="main project"
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">
<div className="code-stats-disclaimer">
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"
className=""
>
Wakapi
</a>{" "}

2
src/containers/PostListing.jsx
View file

@ -14,7 +14,7 @@ const PostListing = ({ posts, title, showAllButton }) => {
{posts.map((post) => (
<ul className="no-bullets">
<li className="">
<div className="">
<div className="post-listing-item">
<span style={{ marginRight: '1rem' }}>
{convertDate(post.date)}
</span>

92
src/index.css
View file

@ -1,42 +1,94 @@
@media (min-width: 768px) {
main {
max-width: 768px;
margin: 0 1.5rem;
}
.post-listing-item {
display: flex;
flex-direction: row;
}
}
@media (max-width: 768px) {
.post-listing-item {
display: flex;
flex-direction: column;
}
}
.post-listing-item {
display: flex;
}
h1.site-title {
font-weight: 800;
}
.header-links {
display: flex;
list-style: none;
gap: .5rem;
margin: 0;
padding: 0;
display: flex;
list-style: none;
gap: 0.5rem;
margin: 0;
padding: 0;
}
.plain-link {
color: inherit;
text-decoration: none;
color: inherit;
text-decoration: none;
}
.no-bullets {
list-style: none;
padding-left: 0;
list-style: none;
padding-left: 0;
}
blockquote {
font-style: italic;
font-style: italic;
}
figcaption {
text-align: center;
font-style: italic;
text-align: center;
font-style: italic;
font-size: 14px;
}
figure {
text-align: center;
text-align: center;
}
figure img {
width: 100%;
max-width: 500px;
min-width: 300px;
height: auto;
width: 100%;
max-width: 500px;
min-width: 300px;
height: auto;
}
.shiki {
padding: 1rem;
border: 1pt solid black;
}
padding: 1rem;
/* border: 1pt solid black; */
background-color: whitesmoke !important;
overflow: auto;
}
.code-stat-grid {
display: flex;
flex-direction: row;
justify-content: space-between;
margin-bottom: 0.5rem;
}
.code-stat-label {
font-weight: 500;
font-style: italic;
}
.code-stats-disclaimer {
font-style: italic;
font-size: 14px;
text-align: center;
}
.about-li-padding {
padding-right: 1rem;
}

26
src/pages/about.jsx
View file

@ -57,29 +57,33 @@ const AboutPage = () => {
>
Arria NLG
</a>{" "}
and in several web developer roles. Before software I was a
and in several web developer roles. Before software, I was a
teacher.{" "}
</p>
<p>I am licenced amateur radio operator. My callsign is ME7SYO.</p>
<p className="leading-[1.6] [&:not(:first-child)]:mt-6">
Some things I like:
<ul className="no-bullets">
<li className="">🐶 Staffies and other bull-breeds</li>
<li className="">🎼 Classical music (Haydn, Mozart, JSB)</li>
<li className="">🛸 Science fiction </li>
<ul className="no-bullets">
<li className=""><span className="about-li-padding">🐶</span>Staffies and other bull-breeds</li>
<li className=""><span className="about-li-padding">🎼</span>Classical music (Haydn, Mozart, JSB)</li>
<li className=""><span className="about-li-padding">🛸</span>Science fiction </li>
<li className=""><span className="about-li-padding">🐦‍⬛</span>Bird watching</li>
</ul>
</p>
<p className="">
Some things I'm interested in:
<ul className="no-bullets">
<li className="">🧑‍💻 Self-hosting and digital resiliance</li>
<li className="">🖳 The history of computing and networks</li>
<li className="">☸️ Buddhism</li>
{/*
<li className=""><span className="about-li-padding">🧑‍💻</span>Self-hosting and digital resiliance</li>
<li className=""><span className="about-li-padding">🖥️</span>The history of computing and networks</li>
<li className=""><span className="about-li-padding">☸️</span>Buddhism</li>
<li className=""><span className="about-li-padding">📡</span>Amateur radio</li>
<li className=""><span className="about-li-padding">👽</span>SETI</li>
<li className="">📡 Civil communications infrastructure</li>
*/}
</ul>
</p>
</div>

7
src/pages/home.jsx
View file

@ -4,13 +4,13 @@ import { usePosts } from "@/hooks/usePosts"
import gruvboxComputer from "../images/gruvbox-computer.svg"
import EolasListing from "@/components/EolasListing"
import CodeStats from "../containers/CodeStats"
// import TodayILearned from "@/containers/TodayILearned"
import { Link } from "react-router"
const HomePage = () => {
const { posts } = usePosts()
return (
<MainTemplate>
<p>A wizard who goes to bed early. This is my technical scrapbook
<p>A wizard who goes to bed early. This is <Link to="/about">my</Link> technical scrapbook
and digital garden.
</p>
@ -23,8 +23,7 @@ const HomePage = () => {
/>
{/* <CodeStats />
<EolasListing /> */}
<CodeStats />
</MainTemplate>
)
}

10
src/templates/BlogTemplate.jsx
View file

@ -12,7 +12,7 @@ const BlogTemplate = () => {
return (
<MainTemplate>
<div className="container mx-auto py-4 px-1 md:p-4 grow">
<div className="">
{!post ? (
<div>Loading...</div>
) : (
@ -25,7 +25,8 @@ const BlogTemplate = () => {
<time datetime={convertDate(post?.date)} className="text-sm">
{convertDateFriendly(post?.date)}
</time>
<div className="flex flex-wrap gap-3 align-center">
<div className="">
<span>Tag(s): </span>
{post?.tags?.map((tag, i) => (
<Link
style={{ marginRight: '0.5rem' }}
@ -40,10 +41,7 @@ const BlogTemplate = () => {
</header>
<div
className="
"
dangerouslySetInnerHTML={{ __html: post?.html }}
dangerouslySetInnerHTML={{ __html: post?.html }}
/>
</article>
)}

8
src/templates/MainTemplate.jsx
View file

@ -5,12 +5,16 @@ const Header = () => {
return (
<header>
<nav className="">
<h1>
<h1 className="site-title">
<Link
className="plain-link"
to="/">Systems Obscure</Link>
</h1>
<ul className="header-links">
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/posts">Posts</Link>
</li>
@ -23,7 +27,7 @@ const Header = () => {
href="https://forgejo.systemsobscure.net/thomasabishop"
target="blank"
>
Forgejo
Forgejo (ext.)
</a>
</li>