interim commit

posts/amateur-radio-licence.md

@@ -0,0 +1,20 @@
+---
+title: "Amateur radio licence"
+slug: /amateur-radio-licence/
+date: 2026-03-12
+tags: ["radio"]
+---
+
+In February I finally bit the bullet and booked the exam for the UK Amateur
+Radio Licence (Foundation Level).
+
+My natural learning style is both meandering and thorough. I like to work at my
+own pace and pursue rabbit holes and tangents. I dislike exams and any aspect of
+competition injected into the learning process. At school my grades were always
+lower than my actual knowledge level because I never studied for the test, I
+pursued what was interesting to me to depths not required by the exams.
+
+I think all people who love learning for its own sake are like this but I did
+actually _need_ the licence in order to be able to transmit and start gaining
+practical knowledge. Having the test booked for the end of the month helped me
+concentrate and stay on target.

src/components/LanguagesChart.jsx

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

src/components/MetricBar.jsx

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

src/components/ProjectsChart.jsx

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

src/containers/CodeStats.jsx

@@ -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="">
+            <h2 className="big-title">{`Code this month`}</h2>
-              {`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
-              }
-            />
 
-            <Scorecard
+            {/*
-              title="Main project"
+            <table
-              metric={error ? "Error" : isLoading ? "Loading..." : mainProject}
+              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
+            <a href="https://wakapi.dev/" target="__blank" className="">
-              href="https://wakapi.dev/"
-              target="__blank"
-              className=""
-            >
               Wakapi
             </a>{" "}
             instance.

src/containers/PostListing.jsx

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

src/index.css

@@ -15,20 +15,35 @@
     display: flex;
     flex-direction: column;
   }
+
+  .title-link {
+    letter-spacing: 0 !important;
+  }
 }
 
 .post-listing-item {
   display: flex;
 }
 
-h1.site-title {
+html {
-  font-weight: 800;
+  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-weight: bold;
-  font-style: italic;
+  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;
+}

src/pages/home.jsx

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

src/templates/BlogTemplate.jsx

@@ -17,11 +17,19 @@ const BlogTemplate = () => {
           <div>Loading...</div>
         ) : (
           <article className="">
-            <header className="">
+            <header
-              <h1 className="">
+              className="big-title"
-                {post?.title}
+              style={{ paddingBottom: "1rem", marginBottom: "2rem" }}
-              </h1>
+            >
-              <div className="">
+              <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
+            <div dangerouslySetInnerHTML={{ __html: post?.html }} />
-             dangerouslySetInnerHTML={{ __html: post?.html }}
-            />
           </article>
         )}
       </div>

src/templates/MainTemplate.jsx

@@ -6,15 +6,15 @@ const Header = () => {
     <header>
       <nav className="">
         <h1 className="site-title">
-          <Link
+          <Link className="title-link plain-link" to="/">
-            className="plain-link"
+            Systems Obscure
-            to="/">Systems Obscure</Link>
+          </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
+