single line message in Footer

Author: nemanjam

docs/README.md

@@ -9,7 +9,7 @@ curl http://152.70.160.21:1080
 ssh -R 1080:localhost:3000 amd2
 curl http://amd2.nemanjamitic.com:1080
 
-# flush
+# flush, works without server and ssh reboot
 sudo iptables -F
 # list
 sudo iptables -L

docs/working-notes/todo3.md

@@ -412,12 +412,13 @@ style giscus, tags and share, astrowind, use existing styleguide
     move giscus mode, add another theme change event handler
 fix content width
 migrate scroll to top and toast to react
-fix footer
-fix share, just small gray icons
+    fix footer
+    fix share, just small gray icons
 use vertical margins and margin collapsing for all vertical spacings, no paddings, when in same parent
 remove tag-lg, fix button size on mobile
 alert component style
 improve lighthouse, accessibility, aria attrs
 2 prerendered paginations, 3 and 5 items
+must export_ vars in .mdx or acor error, ask?
 ```
 

src/components/Footer.astro

@@ -6,38 +6,38 @@ import Link from '@/components/Link.astro';
 import { ROUTES } from '@/constants/routes';
 import { CONFIG } from '@/config';
 import { getLatestCommitInfo } from '@/libs/git';
-import { trimHttpProtocol } from '@/utils/strings';
+import { shortDate } from '@/utils/datetime';
+import { limitString, trimHttpProtocol } from '@/utils/strings';
 
-const { SITE_URL, AUTHOR_LINKEDIN, AUTHOR_GITHUB } = CONFIG;
+const { SITE_URL, AUTHOR_LINKEDIN, AUTHOR_GITHUB, REPO_URL } = CONFIG;
 const domain = trimHttpProtocol(SITE_URL);
+const messageLength = 20 as const;
+
+const { time, fullHash, message } = getLatestCommitInfo();
+
+const commitUrl = `${REPO_URL}/commit/${fullHash}`;
+
+const shortDateStr = shortDate(new Date(time));
+const trimmedMessage = limitString(message, messageLength);
 
-const { time, hash, message } = getLatestCommitInfo();
 // footer is full width for border, div has max-w
 ---
 
 <footer class="border-t border-base-300 py-8 px-4">
   <div class="max-w-6xl md:mx-auto flex justify-center md:justify-start">
     <div class="flex justify-between gap-4 flex-col-reverse md:flex-row md:w-full">
-      <div class="flex gap-2 flex-col text-sm text-content">
-        <div class="flex gap-2 flex-col md:flex-row">
-          <label class="font-bold text-nowrap">Under construciton:</label>
-          <div class="flex gap-2 flex-col md:flex-row">
-            <Link href="https://github.com/paularmstrong/paularmstrong.dev">Starter project</Link>
-            <Link href="https://github.com/nemanjam/nemanjam.github.io#references">
-              All references
-            </Link>
-          </div>
-        </div>
-        <div class="flex gap-2 flex-col md:flex-row">
-          <label class="font-bold text-nowrap">Latest commit:</label>
-          <div class="flex gap-2 flex-col xs:flex-row flex-wrap">
-            <span>{time}</span>
-            <span>{hash}</span>
-            <span>{message}</span>
-          </div>
-        </div>
+      <!-- left column -->
+      <div class="flex items-center gap-2 flex-wrap text-sm text-content whitespace-nowrap">
+        <label class="font-bold">Latest commit:</label>
+        <span class="flex items-center gap-2 flex-wrap">
+          <span> {shortDateStr} </span>
+          <Link href={commitUrl} title="Commit url" target="_blank">
+            {trimmedMessage}
+          </Link>
+        </span>
       </div>
 
+      <!-- right column -->
       <ul class="flex gap-2 flex-wrap xs:flex-nowrap lg:items-center">
         <li>
           <Link

src/config.ts

@@ -28,7 +28,7 @@ dotenv.config({ path: envFileName });
 const configData: ConfigType = {
   NODE_ENV: process.env.NODE_ENV,
   PREVIEW_MODE: process.env.PREVIEW_MODE,
-  /** without '/' */
+  /** all urls without '/' */
   SITE_URL: process.env.SITE_URL,
   SITE_TITLE: 'Nemanja Mitic',
   SITE_DESCRIPTION: 'I am Nemanja, full stack developer',
@@ -38,6 +38,7 @@ const configData: ConfigType = {
   AUTHOR_EMAIL: '[email protected]',
   AUTHOR_GITHUB: 'https://github.com/nemanjam',
   AUTHOR_LINKEDIN: 'https://www.linkedin.com/in/nemanja-mitic',
+  REPO_URL: 'https://github.com/nemanjam/nemanjam.github.io',
 };
 
 // todo: Config should go into import.meta.env in astro.config.ts

src/constants/metadata.ts

@@ -12,7 +12,7 @@ const { SITE_URL, SITE_DESCRIPTION, SITE_TITLE } = CONFIG;
 /** Must be url from public folder. */
 export const defaultOgImage = `${SITE_URL}/images/default/default-open-graph-image.jpg`;
 
-export const dotSeparator = '•';
+export const titleSeparator = '-';
 
 export const DEFAULT_METADATA: Required<Metadata> = {
   title: SITE_TITLE,

src/constants/routes.ts

@@ -1,3 +1,8 @@
+/**
+ * Folders - all urls with both leading and trailing '/'.
+ * Files - without trailing '/'.
+ */
+
 export const ROUTES = {
   HOME: '/',
   BLOG: '/blog/',

src/libs/git.ts

@@ -2,23 +2,25 @@ import { execSync } from 'child_process';
 
 export interface GitResult {
   time: string;
-  hash: string;
+  shortHash: string;
+  fullHash: string;
   message: string;
 }
 
 export const getLatestCommitInfo = (): GitResult => {
   const separator = '___';
-  const command = `git log -1 --pretty=format:"%ad${separator}%h${separator}%s" --date=format:'%Y-%m-%d %H:%M:%S'`;
+  const command = `git log -1 --pretty=format:"%ad${separator}%h${separator}%H${separator}%s" --date=format:'%Y-%m-%d %H:%M:%S'`;
   const output = execSync(command).toString().trim().split(separator);
 
-  if (output.length !== 3) {
+  if (output.length !== 4) {
     throw new Error('Could not parse the latest Git commit output.');
   }
 
   const result = {
     time: output[0],
-    hash: output[1],
-    message: output[2],
+    shortHash: output[1],
+    fullHash: output[2],
+    message: output[3],
   };
 
   return result;

src/schemas/config.ts

@@ -22,4 +22,5 @@ export const configSchema = z.object({
   AUTHOR_EMAIL: z.string().email(),
   AUTHOR_GITHUB: z.string().url(),
   AUTHOR_LINKEDIN: z.string().url(),
+  REPO_URL: z.string().url(),
 });

src/utils/datetime.ts

@@ -1,11 +1,16 @@
 import { format } from 'date-fns';
 
 export const dateFormats = {
-  // Jan 13, 2024
+  /** Jan 13, 2024 */
   cardDate: 'MMM dd, yyyy',
-  // 2024-02-26
+  /** 2024-02-26 */
   isoDate: 'yyyy-MM-dd',
+  /** Tue, 16th July, 9am */
+  shortDate: 'do MMMM, haaa',
 } as const;
 
 export const formatDate = (date: Date): string => format(date, dateFormats.cardDate);
+
 export const formatDateIso = (date: Date): string => format(date, dateFormats.isoDate);
+
+export const shortDate = (date: Date): string => format(date, dateFormats.shortDate);

src/utils/metadata.ts

@@ -1,4 +1,4 @@
-import { DEFAULT_METADATA, dotSeparator, PAGE_METADATA } from '@/constants/metadata';
+import { DEFAULT_METADATA, PAGE_METADATA, titleSeparator } from '@/constants/metadata';
 import { CONFIG } from '@/config';
 import { getOpenGraphImagePath } from '@/libs/api/open-graph/image-path';
 
@@ -22,7 +22,7 @@ export const handleTitle = (metadata: Metadata): Metadata => {
 
   const newMetadata = {
     ...metadata,
-    title: passedTitle ? `${passedTitle} ${dotSeparator} ${AUTHOR_NAME}` : defaultTitle,
+    title: passedTitle ? `${passedTitle} ${titleSeparator} ${AUTHOR_NAME}` : defaultTitle,
   };
 
   return newMetadata;