chore: update commit history table

dapp/src/components/CommitHistory.astro

@@ -1,22 +1,23 @@
 ---
-import { getCommitHistory } from '../constants/CommitHistory';
+import { getCommitHistory } from '../service/GithubService';
 import CommitRecord from './CommitRecord.astro';
 import { formatDate } from '../service/utils';
+import type { FormattedCommit } from '../types/github';
 
-const commitHistory = getCommitHistory();
+const commitHistory = await getCommitHistory('tupui', 'soroban-versioning');
 ---
 
-<div class="commit-history-container relative pl-8 before:content-[''] before:absolute before:left-[0.5rem] before:top-0 before:bottom-0 before:w-0.5 before:bg-zinc-700">
-  {commitHistory.map((day) => (
+<div class="commit-history-container space-y-4 relative pl-8 before:content-[''] before:absolute before:left-[0.5rem] before:top-0 before:bottom-0 before:w-0.5 before:bg-zinc-700">
+  {commitHistory && commitHistory.length > 0 && commitHistory.map((day: { date: string; commits: FormattedCommit[] }) => (
     <div class="day-group relative">
-      <h3 class="text-lg font-semibold pt-5 pb-4 relative">
-        <div class="commit-dot absolute left-[-2.2rem] top-[1.3rem] w-[25px] h-[25px] bg-[#f3f3f3] rounded-full before:content-[''] before:absolute before:left-[50%] before:top-[50%] before:transform before:-translate-x-1/2 before:-translate-y-1/2 before:w-[15px] before:h-[15px] before:border-[2px] before:rounded-full"></div>
+      <h3 class="text-lg font-semibold pb-4 relative">
+        <div class="commit-dot absolute left-[-2.2rem] top-0 w-[25px] h-[25px] bg-[#f3f3f3] rounded-full before:content-[''] before:absolute before:left-[50%] before:top-[50%] before:transform before:-translate-x-1/2 before:-translate-y-1/2 before:w-[15px] before:h-[15px] before:border-[2px] before:rounded-full"></div>
         <span class="pr-2 relative z-10">{formatDate(day.date)}</span>
       </h3>
       <div class="space-y-4 relative">
-        {day.commits.map((commit) => (
+        {day.commits.map((commit: FormattedCommit) => (
           <div class="relative">
-            <div class="absolute left-[-1.25rem] top-1/2 w-2 h-2 bg-gray-400 rounded-full transform -translate-y-1/2"></div>
+            <div class="absolute left-[-1.25rem] top-1/2 w-2 h-2 rounded-full transform -translate-y-1/2"></div>
             <CommitRecord
               message={commit.message}
               date={commit.commit_date}

dapp/src/components/CommitRecord.astro

@@ -11,18 +11,32 @@ interface Props {
 const { message, date, authorName, authorGithubLink, sha, commitLink } = Astro.props;
 
 import { formatTime } from '../service/utils';
+
+const formattedMessage = message.split(/\r?\n/).map(line => line.trim()).filter(Boolean);
+const firstLine = formattedMessage[0];
+const hasMoreLines = formattedMessage.length > 1;
 ---
 
-<div class="commit-record bg-white p-4 rounded-lg border border-gray-200 shadow-sm flex justify-between items-center">
-  <div class="commit-info">
-    <a href={commitLink} target="_blank" rel="noopener noreferrer" class="commit-message text-lg font-medium hover:underline hover:text-blue-500">{message}</a>
+<div class="commit-record bg-white p-4 rounded-lg border border-gray-200 shadow-sm flex justify-between items-start">
+  <div class="commit-info flex-grow overflow-hidden mr-4">
+    <div class="flex items-center">
+      <a href={commitLink} target="_blank" rel="noopener noreferrer" class="commit-message text-lg font-medium hover:underline hover:text-blue-500 truncate">{firstLine}</a>
+      {hasMoreLines && (
+        <button class="expand-button ml-2 text-xs bg-zinc-200 hover:bg-zinc-300 text-gray-700 font-semibold py-1 px-2 rounded-md transition-colors duration-200 flex-shrink-0">
+          . . .
+        </button>
+      )}
+    </div>
+    {hasMoreLines && (
+      <div class="expanded-message hidden mt-2 text-sm text-gray-700 whitespace-pre-wrap">{formattedMessage.slice(1).join('\n')}</div>
+    )}
     <div class="commit-details text-sm text-gray-600 mt-1">
       <a href={authorGithubLink} target="_blank" rel="noopener noreferrer" class="author-name font-semibold hover:underline hover:text-blue-500">{authorName}</a>
       <span class="mx-1">committed on</span>
       <span class="commit-date">{formatTime(date)}</span>
     </div>
   </div>
-  <div class="commit-sha flex items-center space-x-2">
+  <div class="commit-sha flex items-center space-x-2 flex-shrink-0">
     <a href={commitLink} target="_blank" rel="noopener noreferrer" class="sha text-sm font-mono text-gray-500 hover:bg-zinc-400 transition-colors duration-200 px-2 py-1 rounded">{sha.substring(0, 7)}</a>
     <button class="copy-button hover:bg-zinc-400 transition-colors duration-200 p-1 rounded" data-sha={sha}>
       <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 text-gray-400 hover:text-gray-600">
@@ -63,9 +77,24 @@ import { formatTime } from '../service/utils';
     });
   }
 
+  function setupExpandButtons() {
+    const expandButtons = document.querySelectorAll('.expand-button');
+    expandButtons.forEach(button => {
+      button.addEventListener('click', () => {
+        const record = button.closest('.commit-record');
+        const expandedMessage = record?.querySelector('.expanded-message');
+        if (expandedMessage) {
+          expandedMessage.classList.toggle('hidden');
+          button.textContent = expandedMessage.classList.contains('hidden') ? '. . .' : 'Less';
+        }
+      });
+    });
+  }
+
   document.addEventListener('astro:page-load', () => {
     const copyButtons = document.querySelectorAll('.copy-button');
     copyButtons.forEach(button => setupCopyButton(button as HTMLButtonElement));
+    setupExpandButtons();
   });
 </script>
 

dapp/src/service/utils.ts

@@ -11,13 +11,13 @@ export function formatTime(dateString: string): string {
     const formattedTime = date.toLocaleTimeString(undefined, timeOptions);
     return `Today, ${formattedTime}`;
   } else {
-    const dateOptions: Intl.DateTimeFormatOptions = { year: 'numeric', month: 'long', day: 'numeric' };
+    const dateOptions: Intl.DateTimeFormatOptions = { year: 'numeric', month: 'short', day: 'numeric' };
     return date.toLocaleDateString(undefined, dateOptions);
   }
 }
 
 export function formatDate(dateString: string): string {
   const date = new Date(dateString);
-  const dateOptions: Intl.DateTimeFormatOptions = { year: 'numeric', month: 'long', day: 'numeric' };
+  const dateOptions: Intl.DateTimeFormatOptions = { year: 'numeric', month: 'short', day: 'numeric' };
   return date.toLocaleDateString(undefined, dateOptions);
 }