Streamline build and commit metadata acquisition

Build info now properly uses commit info and unused types functions are
removed.

Author: michaelfortunato

components/Blog/layout.tsx

@@ -1,11 +1,11 @@
 import { blogInitialsFont } from "@/lib/fonts";
 import Link from "next/link";
 import { ThemeSwitch } from "@/components/ui/ThemeSwitch";
-import { BuildInfo } from "@/lib/buildInfo";
+import { BuildInfo, SerializedBuildInfo } from "@/lib/buildInfo";
 import BuildStamp from "@/components/BuildStamp";
 type Props = {
   children: React.ReactNode;
-  websiteWideBuildInfo?: BuildInfo;
+  websiteWideBuildInfo?: SerializedBuildInfo;
 };
 
 function Header() {
@@ -14,9 +14,9 @@ function Header() {
       <div className="flex justify-center">
         <Link
           href="/blog"
-          className={`bold ${blogInitialsFont.className} text-4xl`}
+          className={`bold ${blogInitialsFont.className} text-4xl relative inline-block after:content-['.'] after:absolute after:left-full`}
         >
-          mnf.
+          mnf
         </Link>
       </div>
       <div className="hidden md:flex md:gap-4">
@@ -38,7 +38,7 @@ const Layout = (props: Props) => {
       {props.websiteWideBuildInfo ? (
         <div className="flex-grow flex flex-col justify-end">
           <footer className="w-full text-muted-foreground mt-auto">
-            <BuildStamp buildInfo={props.websiteWideBuildInfo} />
+            <BuildStamp serializedBuildInfo={props.websiteWideBuildInfo} />
           </footer>
         </div>
       ) : null}

components/BuildStamp.tsx

@@ -1,33 +1,33 @@
 import React, { useMemo, useState } from "react";
-import { type BuildInfo, type BuildCommitInfo } from "@/lib/buildInfo";
+import {
+  type BuildInfo,
+  CommitEntry,
+  SerializedBuildInfo,
+} from "@/lib/buildInfo";
 
 import { CodeXml, DatabaseIcon } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import Link from "next/link";
 import { ClockIcon, CommitIcon } from "@radix-ui/react-icons";
 import { blogInitialsFont } from "@/lib/fonts";
 
-export function computeGithubURLs(commit: BuildCommitInfo) {
+export function computeGithubURLs(buildInfo: SerializedBuildInfo) {
   return {
-    repoURL: `https://github.com/michaelfortunato/${commit.repo}`,
-    commitURL: `https://github.com/michaelfortunato/${commit.repo}/commit/${commit.hash}`,
-    branchURL: `https://github.com/michaelfortunato/${commit.repo}/tree/${commit.branch}`,
+    repoURL: `https://github.com/michaelfortunato/personal-website`,
+    commitURL: `https://github.com/michaelfortunato/personal-website/commit/${buildInfo.buildCommitEntry.commitHash}`,
+    branchURL: `https://github.com/michaelfortunato/personal-website/tree/${buildInfo.branch}`,
   };
 }
 
 const BuildStamp: React.FC<{
-  buildInfo: BuildInfo;
+  serializedBuildInfo: SerializedBuildInfo;
   triggerFadeIn?: boolean;
-}> = ({
-  buildInfo: {
-    commitInfo: { repo, hash, branch },
-    buildTimestamp,
-  },
-}) => {
+}> = ({ serializedBuildInfo }) => {
   const { commitURL, branchURL } = useMemo(
-    () => computeGithubURLs({ repo, hash, branch }),
-    [repo, hash, branch],
+    () => computeGithubURLs(serializedBuildInfo),
+    [serializedBuildInfo.buildCommitEntry.commitHash],
   );
+
   return (
     <div className="flex justify-center p-2 pb-4">
       <div className="flex flex-col">
@@ -45,21 +45,23 @@ const BuildStamp: React.FC<{
             <div>
               <ClockIcon />
             </div>
-            <Link href={commitURL}>{buildTimestamp}</Link>
+            <Link href={commitURL}>{serializedBuildInfo.buildTimestamp}</Link>
           </div>
           <div className="flex items-center gap-1">
             <div>
               <DatabaseIcon width="15px" />
             </div>
             <div>
               <Link href={branchURL}>
-                {repo}/{branch}
+                {"personal-website/" + serializedBuildInfo.branch}
               </Link>
             </div>
           </div>
           <div className="inline-flex items-center">
             <CommitIcon className="translate-y-[1px]" />
-            <Link href={commitURL}>{hash}</Link>
+            <Link href={commitURL}>
+              {serializedBuildInfo.buildCommitEntry.shortCommitHash}
+            </Link>
           </div>
         </div>
       </div>

components/Name.tsx

@@ -50,8 +50,8 @@ export default function Name(props: NameProps) {
     <>
       {isClient && (
         <div className="relative flex justify-center overflow-visible pt-[2%] text-center text-[56px] text-[#264653]">
-          <div className="flex gap-6">
-            <div className="inline-block">
+          <div className="md:flex gap-6">
+            <div>
               <LayoutGroup>
                 {props.firstName.split("").map((_, index) => (
                   <Letter
@@ -62,7 +62,7 @@ export default function Name(props: NameProps) {
                 ))}
               </LayoutGroup>
             </div>
-            <div className="inline-block">
+            <div>
               <LayoutGroup>
                 {props.lastName.split("").map((_, index) => (
                   <Letter

components/RootPageLayout.tsx

@@ -1,7 +1,7 @@
 import { PropsWithChildren } from "react";
 import Navbar from "./Nav/Navbar";
 import { Toaster } from "./ui/toaster";
-import { BuildInfo } from "@/lib/buildInfo";
+import { BuildInfo, SerializedBuildInfo } from "@/lib/buildInfo";
 import BuildStamp from "@/components/BuildStamp";
 
 export type RootPageStyle = {
@@ -41,15 +41,15 @@ const pageConfigs: Record<string, RootPageStyle> = {
 
 export default function RootPageLayout({
   children,
-  buildInfo,
-}: PropsWithChildren<{ buildInfo: BuildInfo }>) {
+  serializedBuildInfo,
+}: PropsWithChildren<{ serializedBuildInfo: SerializedBuildInfo }>) {
   return (
     <div>
       <Navbar routes={pageConfigs} />
       <div className="absolute min-h-screen min-w-full bg-background transition duration-1000">
         {children}
         <div className="absolute bottom-0 left-0 w-full">
-          <BuildStamp buildInfo={buildInfo} />
+          <BuildStamp serializedBuildInfo={serializedBuildInfo} />
         </div>
       </div>
       <Toaster />

lib/buildInfo.ts

@@ -1,8 +1,15 @@
-export function computeGithubURLs(commit: BuildCommitInfo) {
+import {
+  fromISODateString,
+  ISODateString,
+  Serialized,
+  toISODateString,
+} from "./utils";
+
+export function computeGithubURLs(buildInfo: BuildInfo) {
   return {
-    repoURL: `https://github.com/michaelfortunato/${commit.repo}`,
-    commitURL: `https://github.com/michaelfortunato/${commit.repo}/commit/${commit.hash}`,
-    branchURL: `https://github.com/michaelfortunato/${commit.repo}/tree/${commit.branch}`,
+    repoURL: `https://github.com/michaelfortunato/personal-website`,
+    commitURL: `https://github.com/michaelfortunato/personal-website/commit/${buildInfo.buildCommitEntry.commitHash}`,
+    branchURL: `https://github.com/michaelfortunato/personal-website/tree/${buildInfo.branch}`,
   };
 }
 
@@ -18,14 +25,56 @@ export type CommitEntry = {
   message: string;
 };
 
+export type SerializedCommitEntry = Serialized<CommitEntry>;
+
+export function serializeCommitEntry(
+  entry: CommitEntry,
+): SerializedCommitEntry {
+  return {
+    ...entry,
+    timestamp: toISODateString(entry.timestamp),
+  };
+}
+
+export function deserializeCommitEntry(
+  entry: SerializedCommitEntry,
+): CommitEntry {
+  return {
+    ...entry,
+    timestamp: fromISODateString(entry.timestamp),
+  };
+}
+
 /// Define the expected structure of the Commit information.
-export type BuildCommitInfo = {
-  repo: string;
-  hash: string;
+///@deprecated use CommitEntry instead
+export type BuildInfo = {
   branch: string;
+  buildTimestamp: Date;
+  buildCommitEntry: CommitEntry;
 };
 
-export type BuildInfo = {
-  commitInfo: BuildCommitInfo;
-  buildTimestamp: string;
+export type SerializedBuildInfo = {
+  branch: string;
+  buildTimestamp: string | ISODateString;
+  buildCommitEntry: SerializedCommitEntry;
 };
+
+export function serializeBuildInfo(buildInfo: BuildInfo): SerializedBuildInfo {
+  return {
+    ...buildInfo,
+    buildCommitEntry: {
+      ...buildInfo.buildCommitEntry,
+      timestamp: toISODateString(buildInfo.buildCommitEntry.timestamp),
+    },
+    buildTimestamp: buildInfo.buildTimestamp.toLocaleDateString("en-US", {
+      month: "short",
+      day: "numeric",
+      year: "numeric",
+      hour: "numeric",
+      minute: "2-digit",
+      hour12: true,
+      timeZoneName: "short",
+      timeZone: "America/Chicago",
+    }),
+  };
+}

lib/posts.ts

@@ -1,4 +1,8 @@
-import { CommitEntry } from "@/lib/buildInfo";
+import {
+  CommitEntry,
+  deserializeCommitEntry,
+  serializeCommitEntry,
+} from "@/lib/buildInfo";
 import { fromISODateString, Serialized, toISODateString } from "@/lib/utils";
 
 type MetadataArgs = {
@@ -52,20 +56,6 @@ export type Post = {
 export type SerializedPostMetadata = Serialized<PostMetadata>;
 export type SerializedPost = Serialized<Post>;
 
-function serializeCommitEntry(entry: CommitEntry): Serialized<CommitEntry> {
-  return {
-    ...entry,
-    timestamp: toISODateString(entry.timestamp),
-  };
-}
-
-function deserializeCommitEntry(entry: Serialized<CommitEntry>): CommitEntry {
-  return {
-    ...entry,
-    timestamp: fromISODateString(entry.timestamp),
-  };
-}
-
 export function serializePostMetadata(
   metadata: PostMetadata,
 ): SerializedPostMetadata {

lib/server-only/buildInfo.ts

@@ -1,31 +1,36 @@
 import { execSync, execFile } from "child_process";
 import { promisify } from "util";
-import type { BuildInfo, BuildCommitInfo } from "@/lib/buildInfo";
+import { BuildInfo, CommitEntry } from "@/lib/buildInfo";
+import { fromISODateString, Serialized, toISODateString } from "../utils";
 const execFileAsync = promisify(execFile);
 
 export async function getBuildInfo(): Promise<BuildInfo> {
-  return {
-    commitInfo: await getBuildCommitInfo(),
-    buildTimestamp: new Date().toLocaleDateString("en-US", {
-      month: "short",
-      day: "numeric",
-      year: "numeric",
-      hour: "numeric",
-      minute: "2-digit",
-      hour12: true,
-      timeZoneName: "short",
-      timeZone: "America/Chicago",
-    }),
-  };
+  // NOTE: We assume our build environment has our git repo
+  // and git history configured, which getCommitEntryForFile already assumes.
+  // So lets just use the git cli to get the info.
+  const branch =
+    launchShellCmd("git branch --show-current")?.toString().trim() || null;
+  if (branch == null) {
+    throw "Could not compute branch for the build build, are you sure you set up git";
+  }
+  const buildCommitEntry = getCommitEntry(null, true);
+  if (buildCommitEntry == null) {
+    throw "Could not compute commit entry for build, are you sure you set up git";
+  }
+  const buildTimestamp = new Date();
+  return { branch, buildTimestamp, buildCommitEntry };
 }
 
-export function getCommitEntryForFile(filepath: string, head: boolean = true) {
+export function getCommitEntry(
+  forFilepath: string | null = null,
+  head: boolean = true,
+): CommitEntry | null {
   // Prior style for reference: "%H - %an, %at : %s"
   // Example: "8fd2212f... - Michael Fortunato, 1739958235 : tighten static props typing"
   const commitEntryFormat = "%H%x1f%an%x1f%aI%x1f%s";
   const cmd = !head
-    ? `git log --reverse --pretty=format:"${commitEntryFormat}" -- ${filepath} | head -1`
-    : `git log -1 --pretty=format:"${commitEntryFormat}" -- ${filepath}`;
+    ? `git log --reverse --pretty=format:"${commitEntryFormat}" ${forFilepath != null ? "-- " + forFilepath : ""} | head -1`
+    : `git log -1 --pretty=format:"${commitEntryFormat}" ${forFilepath != null ? "-- " + forFilepath : ""}`;
   const commitEntry = launchShellCmd(cmd)?.toString().trim();
   if (commitEntry == null) return null;
   const [commitHash, author, authorDateISO, message] =
@@ -37,6 +42,7 @@ export function getCommitEntryForFile(filepath: string, head: boolean = true) {
   if (Number.isNaN(timestamp.valueOf())) {
     return null;
   }
+
   return {
     commitHash,
     get shortCommitHash() {
@@ -60,28 +66,6 @@ export function isDirty(filepath?: string) {
   }
 }
 
-/// Returns the commit info for this build
-async function getBuildCommitInfo(): Promise<BuildCommitInfo> {
-  // NOTE: We assume our build environment has our git repo
-  // and git history configured, which getCommitEntryForFile already assumes.
-  // So lets just use the git cli to get the info.
-  const branch = launchShellCmd("git branch --show-current")?.toString().trim();
-  if (!branch)
-    throw "Could not compute build branch using git cli. Are you sure the build environment has git set up?";
-  const hash = launchShellCmd(`git log -1 --pretty=format:"%H"`)
-    ?.toString()
-    .trim();
-  if (!hash)
-    throw "Could not compute build commit hash using git cli. Are you sure the build environment has git set up?";
-  const repo = "personal-website"; // This should never change.
-
-  return {
-    repo,
-    hash,
-    branch,
-  };
-}
-
 let _gitDir: string | null = null;
 export async function getGitDir(): Promise<string> {
   if (_gitDir) return _gitDir;

lib/server-only/posts.ts

@@ -5,17 +5,13 @@ import * as cheerio from "cheerio";
 const execFileAsync = promisify(execFile);
 import { readdir } from "fs/promises";
 
-import {
-  getCommitEntryForFile,
-  getGitDir,
-  isDirty as isDirtyFunc,
-} from "./buildInfo";
+import { getCommitEntry, getGitDir, isDirty as isDirtyFunc } from "./buildInfo";
 import { PostMetadata, Post } from "@/lib/posts";
 import { parseTimestamp } from "@/lib/utils";
 
 export function getCommitInfoForFileOrFallback(filepath: string) {
-  const firstCommit = getCommitEntryForFile(filepath, false);
-  const currentCommit = getCommitEntryForFile(filepath, true);
+  const firstCommit = getCommitEntry(filepath, false);
+  const currentCommit = getCommitEntry(filepath, true);
   const isDirty = isDirtyFunc(filepath);
   if (firstCommit && currentCommit) {
     return { isDirty, firstCommit, currentCommit };

lib/utils.ts

@@ -10,7 +10,7 @@ export type ISODateString = string & { readonly __isoDateStringBrand: true };
 type Primitive = string | number | boolean | null | undefined;
 
 export type Serialized<T> = T extends Date
-  ? ISODateString
+  ? ISODateString | string
   : T extends Primitive
     ? T
     : T extends readonly (infer U)[]