365DevNet/365devnet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance ContributionCalendar and development.astro for dark mode support and improved commit display

Browse Source 
- Refactor ContributionCalendar to support light and dark color schemes based on user preference.
- Implement dark mode detection using a MutationObserver to dynamically adjust styles.
- Update development.astro to include a new CollapsibleIntro component for better user experience.
- Improve commit display logic to format messages with bullet points and enhance layout for clarity.
This commit is contained in:
Richard Bergsma
2025-06-06 23:36:00 +02:00
parent bbbcb96905
commit aa37cb23cf
3 changed files with 125 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
src/pages/[lang]/development.astro
View File

@@ -5,6 +5,7 @@ import { getTranslation } from '../../i18n/translations';
import React, { useMemo } from 'react';
import dynamic from 'astro/dynamic';
import ContributionCalendar from '../../components/ContributionCalendar.jsx';
import CollapsibleIntro from '../../components/CollapsibleIntro.jsx';
const metadata = {
title: 'Development Progress | 365DevNet',
@@ -42,11 +43,11 @@ try {
// Format date to a readable format
const formatDate = (dateString: string) => {
return new Date(dateString).toLocaleDateString(lang, {
year: 'numeric',
month: 'long',
day: 'numeric',
});
const date = new Date(dateString);
const day = date.toLocaleString(lang, { day: '2-digit' });
const month = date.toLocaleString(lang, { month: 'short' }).toLowerCase().replace('.', '');
const year = date.getFullYear();
return `${day}-${month}-${year}`;
};
// Helper: Group commits by date (YYYY-MM-DD)
@@ -67,9 +68,8 @@ const contributionData = getContributionData(commits);
<Layout metadata={metadata}>
<div class="max-w-4xl mx-auto px-4 py-8">
<h1 class="text-4xl font-bold mb-4">{t.development.title || 'Development Progress'}</h1>
<p class="mb-8 text-lg text-gray-700 dark:text-gray-300">
{t.development.intro}
</p>
{/* Collapsible Intro */}
<CollapsibleIntro text={t.development.intro} client:only="react" />
{/* Contribution Calendar */}
<div class="mb-8">
<ContributionCalendar data={contributionData} client:only="react" />
@@ -80,26 +80,44 @@ const contributionData = getContributionData(commits);
{Array.isArray(commits) && commits.length > 0 ? (
<div class="space-y-4">
{commits.slice(0, 10).map((commit) => (
<div class="bg-gray-50 dark:bg-gray-800 p-4 rounded-lg">
<div class="flex justify-between items-start">
<div>
<h3 class="font-medium">{commit.commit?.message?.split('\n')[0] || 'No message'}</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">{commit.commit?.message || ''}</p>
</div>
<span class="text-sm text-gray-500">{commit.commit?.author?.date ? formatDate(commit.commit.author.date) : ''}</span>
<div class="bg-gray-50 dark:bg-gray-800 p-4 rounded-lg flex flex-col md:flex-row md:items-stretch md:gap-8">
<div class="flex-1">
<h3 class="font-medium">{commit.commit?.message?.split('\n')[0] || 'No message'}</h3>
{/* Format commit description with bullet points on new lines */}
{commit.commit?.message ? (
(() => {
const lines = commit.commit.message.split('\n');
const bullets = lines.filter(line => line.trim().startsWith('- '));
if (bullets.length > 0) {
// Render as a list if there are bullet points
return (
<ul class="text-sm text-gray-600 dark:text-gray-400 list-disc ml-5">
{lines.map((line, idx) =>
line.trim().startsWith('- ')
? <li key={idx}>{line.trim().slice(2)}</li>
: line.trim() !== '' && <li key={idx} class="list-none pl-0">{line}</li>
)}
</ul>
);
} else {
// Render as a paragraph if no bullet points
return <p class="text-sm text-gray-600 dark:text-gray-400">{commit.commit.message}</p>;
}
})()
) : null}
</div>
<div class="mt-2 text-sm">
<span class="text-gray-500">Commit:</span>{' '}
{commit.html_url ? (
<a href={commit.html_url} target="_blank" rel="noopener">
<code class="bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded">
{commit.sha ? commit.sha.slice(0, 7) : ''}
<div class="flex flex-col items-end min-w-[140px] bg-gray-100 dark:bg-gray-700 rounded-lg px-4 py-2 mt-4 md:mt-0 md:ml-8 shadow-sm border border-gray-200 dark:border-gray-600">
<span class="text-base font-semibold text-gray-800 dark:text-gray-200 mb-1">{commit.commit?.author?.date ? formatDate(commit.commit.author.date) : ''}</span>
{commit.commit?.author?.name && (
<span class="text-xs text-gray-500 dark:text-gray-400 mb-2">{commit.commit.author.name}</span>
)}
{commit.sha && (
<a href={commit.html_url} target="_blank" rel="noopener" class="block mt-1 text-right">
<span class="text-xs text-gray-500 dark:text-gray-300 block">Commit:</span>
<code class="mt-1 px-2 py-1 rounded bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 font-mono text-xs text-blue-700 dark:text-blue-300 hover:bg-blue-50 dark:hover:bg-gray-900 transition-colors cursor-pointer block">
{commit.sha.slice(0, 7)}
</code>
</a>
) : (
<code class="bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded">
{commit.sha ? commit.sha.slice(0, 7) : ''}
</code>
)}
</div>
</div>