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

further restyle tweaks
All checks were successful
Deploy Blog / deploy (push) Successful in 3m7s
Details

Browse source
This commit is contained in:
Thomas Bishop 2026-03-13 18:40:02 +00:00
parent dbf853be9e
commit a52c80333d
9 changed files with 251 additions and 194 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
src/components/LanguagesChart.jsx
View file

@ -1,29 +1,35 @@
import MetricBar from "./MetricBar"
const LanguagesChart = ({ chartData, error }) => {
return (
<div style={{marginTop:'1rem'}}>
<div className="code-stat-label" style={{marginBottom: '.5rem'}}>
Programming languages
</div>
return (
<div style={{ marginTop: "1rem" }}>
<div
className="code-stat-label"
style={{
paddingBottom: ".5rem",
marginBottom: ".5rem",
}}
>
Programming languages
</div>
{error ? (
<div>Data could not be found!</div>
) : !chartData?.length ? (
<div>No data for time period.</div>
) : (
chartData.map((x) => (
<MetricBar
key={x.language}
metric={x.language}
hours={x.hours}
percentage={x.percentage}
color="dodgerblue"
/>
))
)}
</div>
)
{error ? (
<div>Data could not be found!</div>
) : !chartData?.length ? (
<div>No data for time period.</div>
) : (
chartData.map((x) => (
<MetricBar
key={x.language}
metric={x.language}
hours={x.hours}
percentage={x.percentage}
color="black"
/>
))
)}
</div>
)
}
export default LanguagesChart

64
src/components/MetricBar.jsx
View file

@ -1,36 +1,36 @@
const MetricBar = ({ metric, hours, percentage, color }) => (
<div style={{ marginBottom: "12px", margin: '.5rem' }}>
<div
style={{
display: "flex",
justifyContent: "space-between",
marginBottom: "4px",
fontSize: "14px",
}}
>
<span style={{}}>{metric}</span>
<span style={{ color: "black" }}>
{hours}h ({percentage}%)
</span>
</div>
<div
style={{
width: "100%",
height: "8px",
backgroundColor: "lightgrey",
overflow: "hidden",
}}
>
<div
style={{
width: `${percentage}%`,
height: "100%",
backgroundColor: color,
transition: "width 0.3s ease",
}}
/>
</div>
</div>
<div style={{ marginBottom: "12px" }}>
<div
style={{
display: "flex",
justifyContent: "space-between",
marginBottom: "4px",
fontSize: "14px",
}}
>
<span style={{}}>{metric}</span>
<span style={{ color: "black" }}>
{hours}h ({percentage}%)
</span>
</div>
<div
style={{
width: "100%",
height: "8px",
backgroundColor: "lightgrey",
overflow: "hidden",
}}
>
<div
style={{
width: `${percentage}%`,
height: "100%",
backgroundColor: color,
transition: "width 0.3s ease",
}}
/>
</div>
</div>
)
export default MetricBar

54
src/components/ProjectsChart.jsx
View file

@ -1,30 +1,38 @@
import MetricBar from "./MetricBar"
const ProjectsChart = ({ chartData, error }) => {
return (
<div style={{marginTop: '1rem'}}>
<div className="code-stat-label">Repos</div>
return (
<div style={{ marginTop: "1rem" }}>
<div
className="code-stat-label"
style={{
paddingBottom: ".5rem",
marginBottom: ".5rem",
}}
>
Repos
</div>
{error ? (
<div>Data could not be found!</div>
) : !chartData?.length ? (
<div>No data for time period.</div>
) : (
chartData.map((x) => (
<MetricBar
key={x.project}
metric={x.project}
hours={x.hours}
percentage={x.percentage}
color="dodgerblue"
/>
))
)}
<div className="code-stats-disclaimer">
Data excludes workplace repos.
</div>
</div>
)
{error ? (
<div>Data could not be found!</div>
) : !chartData?.length ? (
<div>No data for time period.</div>
) : (
chartData.map((x) => (
<MetricBar
key={x.project}
metric={x.project}
hours={x.hours}
percentage={x.percentage}
color="black"
/>
))
)}
<div className="code-stats-disclaimer">
Data excludes workplace repos.
</div>
</div>
)
}
export default ProjectsChart

70
src/containers/CodeStats.jsx
View file

@ -1,4 +1,5 @@
import { useQuery } from "@tanstack/react-query"
import wakapiApi from "../api/wakapi-api"
import { convertDateFriendly } from "../utils/convertDate"
import Scorecard from "../components/Scorecard"
@ -32,7 +33,9 @@ const CodeStats = () => {
data &&
data?.projects.filter(
(project) =>
!project.key.includes("gp-") && !project.key.includes("unknown") && !project.key.includes("amber")
!project.key.includes("gp-") &&
!project.key.includes("unknown") &&
!project.key.includes("amber")
)
const personalProjectsSorted =
@ -67,43 +70,52 @@ const CodeStats = () => {
.slice(0, 4)
return (
<div className="">
<div className="code-stats-sect">
<div className="">
<section className="">
<div className="">
<h2 className="">
{`Code stats`}
</h2>
<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="">
<Scorecard
title="Total time:"
metric={
error ? "Error" : isLoading ? "Loading..." : grandTotalFormatted
}
/>
<h2 className="big-title">{`Code this month`}</h2>
<Scorecard
title="Main project"
metric={error ? "Error" : isLoading ? "Loading..." : mainProject}
/>
{/*
<table
border="1"
width="100%"
style={{ borderCollapse: "collapse" }}
>
<tr>
<td style={{ paddingLeft: "4px" }}>Period:</td>
<td style={{ paddingLeft: "4px" }}>
{convertDateFriendly(data?.from)} -{" "}
{convertDateFriendly(data?.to)}
</td>
</tr>
<tr>
<td style={{ paddingLeft: "4px" }}>Total time:</td>
<td style={{ paddingLeft: "4px" }}>
{error
? "Error"
: isLoading
? "Loading..."
: grandTotalFormatted}
</td>
</tr>
<tr>
<td style={{ paddingLeft: "4px" }}>Main project:</td>
<td style={{ paddingLeft: "4px" }}>
{error ? "Error" : isLoading ? "Loading..." : mainProject}
</td>
</tr>
</table>
*/}
</div>
<LanguagesChart chartData={languagesChartData} error={error} />
<ProjectsChart chartData={projectsChartData} error={error} />
<div className="code-stats-disclaimer">
Data sourced from my self-hosted{" "}
<a
href="https://wakapi.dev/"
target="__blank"
className=""
>
<a href="https://wakapi.dev/" target="__blank" className="">
Wakapi
</a>{" "}
instance.

94
src/containers/PostListing.jsx
View file

@ -4,62 +4,56 @@ import { Link } from "react-router"
import { convertDate } from "@/utils/convertDate"
const PostListing = ({ posts, title, showAllButton }) => {
return (
<div className="">
<div className="">
<section className="">
<h2 className="">
{`${title}`}
</h2>
{posts.map((post) => (
<ul className="no-bullets">
<li className="">
<div className="post-listing-item">
<span style={{ marginRight: '1rem' }}>
{convertDate(post.date)}
</span>
<Link
to={`/posts/${post.slug}`}
key={post.slug}
className=""
>
{post.title}
</Link>
</div>
</li>
</ul>
))}
</section>
</div>
</div>
)
return (
<div className="">
<div className="">
<section className="">
<h2 className="big-title">{`${title}`}</h2>
{posts.map((post) => (
<ul className="no-bullets">
<li className="">
<div className="post-listing-item">
<span style={{ marginRight: "1rem" }}>
{convertDate(post.date)}
</span>
<Link to={`/posts/${post.slug}`} key={post.slug} className="">
{post.title}
</Link>
</div>
</li>
</ul>
))}
</section>
</div>
</div>
)
}
export default PostListing
{
/*
/*
<Link
to={`/posts/${post.slug}`}
key={post.slug}
className="block no-underline"
>
<Card
key={post.slug}
className="flex flex-col h-full hover:bg-primary/5 py-4 rounded border-none "
>
<CardHeader className="">
<CardTitle className="leading-snug font-bold ">
{post.title}
</CardTitle>
<CardDescription className="text-sm text-muted-foreground">
<div className="flex justify-between gap-2">
<span className="text-sm">{convertDate(post.date)}</span>
</div>
</CardDescription>
</CardHeader>
</Card>
</Link>
to={`/posts/${post.slug}`}
key={post.slug}
className="block no-underline"
>
<Card
key={post.slug}
className="flex flex-col h-full hover:bg-primary/5 py-4 rounded border-none "
>
<CardHeader className="">
<CardTitle className="leading-snug font-bold ">
{post.title}
</CardTitle>
<CardDescription className="text-sm text-muted-foreground">
<div className="flex justify-between gap-2">
<span className="text-sm">{convertDate(post.date)}</span>
</div>
</CardDescription>
</CardHeader>
</Card>
</Link>
*/
}

44
src/index.css
View file

@ -15,20 +15,35 @@
display: flex;
flex-direction: column;
}
.title-link {
letter-spacing: 0 !important;
}
}
.post-listing-item {
display: flex;
}
h1.site-title {
font-weight: 800;
html {
font-family:
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
Oxygen,
Ubuntu,
Cantarell,
"Open Sans",
"Helvetica Neue",
sans-serif;
}
.header-links {
display: flex;
list-style: none;
gap: 0.5rem;
gap: 1rem;
margin: 0;
padding: 0;
}
@ -71,6 +86,10 @@ figure img {
overflow: auto;
}
.code-stats-sect {
font-family: sans-serif !important;
}
.code-stat-grid {
display: flex;
flex-direction: row;
@ -79,8 +98,8 @@ figure img {
}
.code-stat-label {
font-weight: 500;
font-style: italic;
font-weight: bold;
font-family: sans-serif;
}
.code-stats-disclaimer {
@ -92,3 +111,18 @@ figure img {
.about-li-padding {
padding-right: 1rem;
}
h1.site-title,
h1.post-title {
margin-bottom: 0.75rem;
}
.big-title {
padding-bottom: 0.5rem;
margin-bottom: 0.5rem;
border-bottom: 1px solid black;
}
.blog-meta {
font-size: 14px;
}

31
src/pages/home.jsx
View file

@ -7,25 +7,22 @@ import CodeStats from "../containers/CodeStats"
import { Link } from "react-router"
const HomePage = () => {
const { posts } = usePosts()
return (
<MainTemplate>
<p>A wizard who goes to bed early. This is <Link to="/about">my</Link> technical scrapbook
and digital garden.
</p>
const { posts } = usePosts()
return (
<MainTemplate>
<p>
A wizard who goes to bed early. This is <Link to="/about">my</Link>{" "}
technical scrapbook and digital garden.
</p>
<PostListing title="Recent posts" posts={posts.slice(0, 5)} />
<PostListing title="Recent posts" posts={posts.slice(0, 5)} />
<PostListing
title="Highlights"
posts={posts.filter((post) => post.tags.includes("highlight"))}
/>
<CodeStats />
</MainTemplate>
)
<PostListing
title="Highlights"
posts={posts.filter((post) => post.tags.includes("highlight"))}
/>
</MainTemplate>
)
}
export { HomePage }

24
src/templates/BlogTemplate.jsx
View file

@ -17,11 +17,19 @@ const BlogTemplate = () => {
<div>Loading...</div>
) : (
<article className="">
<header className="">
<h1 className="">
{post?.title}
</h1>
<div className="">
<header
className="big-title"
style={{ paddingBottom: "1rem", marginBottom: "2rem" }}
>
<h1 className="post-title">{post?.title}</h1>
<div
className="blog-meta"
style={{
display: "flex",
flexDirection: "row",
gap: "1rem",
}}
>
<time datetime={convertDate(post?.date)} className="text-sm">
{convertDateFriendly(post?.date)}
</time>
@ -29,7 +37,7 @@ const BlogTemplate = () => {
<span>Tag(s): </span>
{post?.tags?.map((tag, i) => (
<Link
style={{ marginRight: '0.5rem' }}
style={{ marginRight: "0.5rem" }}
key={i}
to={`/tags/${tag}`}
>
@ -40,9 +48,7 @@ const BlogTemplate = () => {
</div>
</header>
<div
dangerouslySetInnerHTML={{ __html: post?.html }}
/>
<div dangerouslySetInnerHTML={{ __html: post?.html }} />
</article>
)}
</div>

14
src/templates/MainTemplate.jsx
View file

@ -6,15 +6,15 @@ const Header = () => {
<header>
<nav className="">
<h1 className="site-title">
<Link
className="plain-link"
to="/">Systems Obscure</Link>
<Link className="title-link plain-link" to="/">
Systems Obscure
</Link>
</h1>
<ul className="header-links">
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/posts">Posts</Link>
</li>
@ -27,10 +27,9 @@ const Header = () => {
href="https://forgejo.systemsobscure.net/thomasabishop"
target="blank"
>
Forgejo (ext.)
Code
</a>
</li>
</ul>
</nav>
</header>
@ -69,4 +68,5 @@ const MainTemplate = ({ children }) => {
}
export default MainTemplate
//antialiased max-w-3xl mt-3 mx-auto bg-[#282828] no-scanlines wrapper
//main: flex-auto min-w-0 mt-0 flex flex-col px-2 md:px-0
//main: flex-auto min-w-0 mt-0 flex flex-col px-2 md:px-0