feat: add coding stats and improve styles

eslint.config.js

@@ -2,27 +2,26 @@ import js from "@eslint/js"
 import globals from "globals"
 import reactHooks from "eslint-plugin-react-hooks"
 import reactRefresh from "eslint-plugin-react-refresh"
-import tseslint from "typescript-eslint"
 
-export default tseslint.config(
-	{ ignores: ["dist"] },
-	{
-		extends: [js.configs.recommended, ...tseslint.configs.recommended],
-		files: ["**/*.{ts,tsx}"],
-		languageOptions: {
-			ecmaVersion: 2020,
-			globals: globals.browser,
-		},
-		plugins: {
-			"react-hooks": reactHooks,
-			"react-refresh": reactRefresh,
-		},
-		rules: {
-			...reactHooks.configs.recommended.rules,
-			"react-refresh/only-export-components": [
-				"warn",
-				{ allowConstantExport: true },
-			],
-		},
-	}
-)
+// export default eslint.config(
+// 	{ ignores: ["dist"] },
+// 	{
+// 		extends: [js.configs.recommended, ...tseslint.configs.recommended],
+// 		files: ["**/*.{ts,tsx}"],
+// 		languageOptions: {
+// 			ecmaVersion: 2020,
+// 			globals: globals.browser,
+// 		},
+// 		plugins: {
+// 			"react-hooks": reactHooks,
+// 			"react-refresh": reactRefresh,
+// 		},
+// 		rules: {
+// 			...reactHooks.configs.recommended.rules,
+// 			"react-refresh/only-export-components": [
+// 				"warn",
+// 				{ allowConstantExport: true },
+// 			],
+// 		},
+// 	}
+// )

src/api/wakapi-api.js

@@ -0,0 +1,11 @@
+import axios from "axios"
+
+const wakapiApi = axios.create({
+  baseURL: import.meta.env.VITE_WAKAPI_URL,
+  timeout: 10000,
+  headers: {
+    Authorization: `Basic ${import.meta.env.VITE_WAKAPI_TOKEN}`,
+  },
+})
+
+export default wakapiApi

src/components/EolasListing.jsx

@@ -1,7 +1,6 @@
 import { useQuery } from "@tanstack/react-query"
 import eolasApi from "@/api/eolas-api"
 import { convertDate } from "@/utils/convertDate"
-import { Link } from "react-router"
 
 const EolasEntries = ({ entries }) => {
   return (
@@ -16,7 +15,7 @@ const EolasEntries = ({ entries }) => {
             <a
               href={`https://eolas.systemsobscure.net/entries/${entry.title}`}
               key={i}
-              className="text-right overflow-hidden text-ellipsis whitespace-nowrap min-w-0 flex-1 font-medium"
+              className="text-right overflow-hidden text-ellipsis whitespace-nowrap min-w-0 flex-1 "
             >
               {entry.title.replace(/_/g, " ")}
             </a>
@@ -38,11 +37,11 @@ const EolasListing = () => {
     <div className="container mx-auto p-4 grow">
       <div className="space-my-8">
         <section className="container">
-          <h2 className="text-2xl font-medium mb-4 text-[#fabd2f]!">
+          <h2 className="text-2xl font-semibold mb-4 text-[#d65d0e]! scanlined inline-block px-1">
             recent notes (external)
           </h2>
 
-          {isLoading && <span>Loading...</span>}
+          {isLoading && <div>Loading...</div>}
 
           {error ? (
             <div className="border-l-2 border-[#cc241d] px-3 bg-[#cc241d]/20">

src/components/LanguagesChart.jsx

@@ -0,0 +1,29 @@
+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>
+
+			{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="#458588"
+					/>
+				))
+			)}
+		</div>
+	)
+}
+
+export default LanguagesChart

src/components/MetricBar.jsx

@@ -0,0 +1,37 @@
+const MetricBar = ({ metric, hours, percentage, color }) => (
+  <div style={{ marginBottom: "12px" }}>
+    <div
+      style={{
+        display: "flex",
+        justifyContent: "space-between",
+        marginBottom: "4px",
+        fontSize: "14px",
+      }}
+    >
+      <span style={{}}>{metric}</span>
+      <span style={{ color: "#bdae93" }}>
+        {hours}h ({percentage}%)
+      </span>
+    </div>
+    <div
+      style={{
+        width: "100%",
+        height: "8px",
+        backgroundColor: "#32302f",
+        borderRadius: "4px",
+        overflow: "hidden",
+      }}
+    >
+      <div
+        style={{
+          width: `${percentage}%`,
+          height: "100%",
+          backgroundColor: color,
+          transition: "width 0.3s ease",
+        }}
+      />
+    </div>
+  </div>
+)
+
+export default MetricBar

src/components/ProjectsChart.jsx

@@ -0,0 +1,30 @@
+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>
+
+			{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="#fe8019"
+					/>
+				))
+			)}
+			<div className="text-sm text-muted-foreground">
+				Data excludes workplace repos.
+			</div>
+		</div>
+	)
+}
+
+export default ProjectsChart

src/components/Scorecard.jsx

@@ -0,0 +1,10 @@
+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>
+	)
+}
+
+export default Scorecard

src/containers/CodeStats.jsx

@@ -0,0 +1,109 @@
+import { useQuery } from "@tanstack/react-query"
+import wakapiApi from "../api/wakapi-api"
+import { convertDateFriendly } from "../utils/convertDate"
+import Scorecard from "../components/Scorecard"
+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`
+}
+
+const CodeStats = () => {
+	const { data, isLoading, error } = useQuery({
+		queryKey: ["codestats"],
+		queryFn: () =>
+			wakapiApi.get(`summary?interval=week`).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 personalProjects =
+		data && data?.projects.filter((project) => !project.key.includes("gp-"))
+
+	const mainProject = personalProjects?.sort((a, b) => a.total > b.total)[0].key
+
+	console.log(personalProjects)
+
+	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, 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),
+		}))
+
+	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">
+							code stats
+						</h2>
+						<div className="mb-4 text-sm text-muted">
+							{convertDateFriendly(data?.from)} -{" "}
+							{convertDateFriendly(data?.to)}
+						</div>
+					</div>
+					{/* Score-cards */}
+					<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="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">
+							Wakapi
+						</a>{" "}
+						instance.
+					</div>
+				</section>
+			</div>
+		</div>
+	)
+}
+
+export default CodeStats

src/containers/PostListing.jsx

@@ -8,7 +8,9 @@ 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">{title}</h2>
+          <h2 className="text-2xl font-semibold mb-4 scanlined inline-block px-1">
+            {title}
+          </h2>
           {posts.map((post) => (
             <ul>
               <li className="mb-4">
@@ -19,7 +21,7 @@ const PostListing = ({ posts, title, showAllButton }) => {
                   <Link
                     to={`/posts/${post.slug}`}
                     key={post.slug}
-                    className="text-right overflow-hidden text-ellipsis whitespace-nowrap min-w-0 flex-1 font-medium"
+                    className="text-right overflow-hidden text-ellipsis whitespace-nowrap min-w-0 flex-1"
                   >
                     {post.title}
                   </Link>

src/index.css

@@ -39,16 +39,19 @@ h2 {
 h3 {
 	font-family: "IBM Plex Sans Condensed";
 }
+
 .monospaced-font {
 	font-family: "iA Writer Mono";
 }
+
 .scanlined {
-  position: relative; /* Add this */
+	position: relative;
+	/* Add this */
 }
 
 .scanlined::after {
 	content: "";
-  position: absolute; /* Change from fixed */
+	position: absolute;
 	top: 0;
 	left: 0;
 	width: 100%;
@@ -57,7 +60,8 @@ h3 {
 	background-size: 2px 2px;
 	background-repeat: repeat;
 	pointer-events: none;
-  z-index: 9999; /* Might want to lower this too */
+	z-index: 9999;
+	/* Might want to lower this too */
 }
 
 code {

src/pages/home.jsx

@@ -3,6 +3,7 @@ import PostListing from "@/containers/PostListing"
 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"
 
 const HomePage = () => {
@@ -42,7 +43,7 @@ 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]!">
+            <h2 className="text-2xl font-semibold mb-4 text-[#d3869b]! scanlined inline-block px-1">
               projects
             </h2>
             <ul>
@@ -65,7 +66,7 @@ const HomePage = () => {
           </section>
         </div>
       </div>
-
+      <CodeStats />
       <EolasListing />
     </MainTemplate>
   )

src/templates/BlogTemplate.jsx

@@ -17,7 +17,7 @@ const BlogTemplate = () => {
 				) : (
 					<article className="prose prose-lg max-w-none">
 						<header className="mb-6 pb-4">
-              <h1 className="text-4xl font-bold mb-4 leading-tight">
+							<h1 className="text-4xl font-bold mb-4 leading-tight inline-block scanlined px-1">
 								{post?.title}
 							</h1>
 							<div className="flex flex-wrap align-center gap-4 text-[#928374] condensed font-medium">

src/templates/MainTemplate.jsx

@@ -6,19 +6,12 @@ const Header = () => {
   return (
     <header className="py-6">
       <nav className="bg-sidebar container mx-auto justify-between flex gap-1">
+        <Link to="/">
           <div className="scanlined">
-					<img src={gruvboxComputer} className="w-10" />
+            <img src={gruvboxComputer} className="w-11" />
           </div>
-				<ul class="flex space-x-4 px-4 py-2">
-					<li class="flex flex-col items-center justify-center">
-						<Link
-							class="text-primary underline underline-offset-3 hover:text-[#689d6a] condensed font-semibold text-lg"
-							to="/"
-						>
-							home
         </Link>
-					</li>
-
+        <ul class="flex space-x-4 px-4 py-2">
           <li class="flex flex-col items-center justify-center">
             <Link
               class="text-primary underline underline-offset-3 hover:text-[#689d6a] condensed font-semibold text-lg"
@@ -55,15 +48,6 @@ const Footer = () => {
               forgejo
             </a>
           </li>
-					<li className="">
-						<a
-							className="text-primary underline underline-offset-3 hover:text-[#689d6a] font-semibold"
-							href="https://fosstodon.org/@systemsobscure"
-							target="blank"
-						>
-							fosstodon
-						</a>
-					</li>
         </ul>
       </nav>
     </footer>

src/utils/convertDate.js

@@ -39,4 +39,12 @@ const convertDate = (isoStamp) => {
   return `${year}-${month}-${day}`
 }
 
-export { convertDate }
+const convertDateFriendly = (isoStamp) => {
+  const unixSeconds = new Date(isoStamp)
+  const day = unixSeconds.getDate()
+  const month = months[unixSeconds.getMonth()]
+  const year = unixSeconds.getFullYear()
+  return `${day} ${month} ${year}`
+}
+
+export { convertDate, convertDateFriendly }