Enhance navigation and page layouts for improved user experience
- Added a new navigation link for "Journii" in the navigation component. - Updated the layout of multiple pages including antifp, development, eap, privacy, terms, and uptime to enhance visual appeal and organization. - Introduced hero sections with engaging visuals and improved typography for better readability. - Enhanced table of contents and key highlights sections for clearer navigation and information presentation. - Improved styling consistency across pages with backdrop blur effects and responsive design adjustments.
This commit is contained in:
@@ -108,101 +108,191 @@ const formatDate = (dateString) => {
|
||||
const year = date.getFullYear();
|
||||
return `${day}-${month}-${year}`;
|
||||
};
|
||||
|
||||
// Calculate some stats from contribution data
|
||||
const totalContributions = Object.values(contributionData).reduce((sum, count) => sum + count, 0);
|
||||
const contributionDays = Object.keys(contributionData).length;
|
||||
const averagePerDay = contributionDays > 0 ? (totalContributions / contributionDays).toFixed(1) : 0;
|
||||
---
|
||||
|
||||
<Layout metadata={metadata}>
|
||||
<div class="max-w-4xl mx-auto px-4 py-8">
|
||||
<h1 class="text-xl sm:text-2xl md:text-4xl font-bold mb-4">{t.development.pageTitle || 'Development Progress'}</h1>
|
||||
{/* Collapsible Intro */}
|
||||
<CollapsibleIntro text={t.development.intro} client:visible />
|
||||
{/* Contribution Calendar */}
|
||||
<div class="mb-8">
|
||||
<!-- Hero Section -->
|
||||
<div class="text-center mb-12 backdrop-blur-sm bg-gradient-to-br from-green-50/80 to-blue-50/80 dark:from-slate-800/80 dark:to-slate-900/80 rounded-2xl p-8 shadow-lg">
|
||||
<div class="text-6xl mb-4">👨💻</div>
|
||||
<h1 class="text-4xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-green-600 to-blue-600 bg-clip-text text-transparent">
|
||||
{t.development.pageTitle || 'Development Progress'}
|
||||
</h1>
|
||||
<p class="text-xl text-gray-600 dark:text-slate-300 mb-6 max-w-2xl mx-auto">
|
||||
Live development activity and code contributions from the 365DevNet ecosystem
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Collapsible Intro -->
|
||||
<div class="backdrop-blur-sm bg-white/70 dark:bg-slate-900/70 rounded-xl shadow p-6 mb-8">
|
||||
<CollapsibleIntro text={t.development.intro} client:visible />
|
||||
</div>
|
||||
|
||||
<!-- Stats Overview -->
|
||||
<div class="grid md:grid-cols-3 gap-6 mb-8">
|
||||
<div class="backdrop-blur-sm bg-gradient-to-br from-green-50/80 to-teal-50/80 dark:from-slate-800/80 dark:to-slate-900/80 rounded-xl shadow p-6 text-center">
|
||||
<div class="text-3xl mb-3">📈</div>
|
||||
<h3 class="font-bold mb-2">Total Contributions</h3>
|
||||
<p class="text-2xl font-bold text-green-600 dark:text-green-400">{totalContributions}</p>
|
||||
<p class="text-sm text-gray-600 dark:text-slate-300">This year</p>
|
||||
</div>
|
||||
<div class="backdrop-blur-sm bg-gradient-to-br from-blue-50/80 to-purple-50/80 dark:from-slate-800/80 dark:to-slate-900/80 rounded-xl shadow p-6 text-center">
|
||||
<div class="text-3xl mb-3">🗓️</div>
|
||||
<h3 class="font-bold mb-2">Active Days</h3>
|
||||
<p class="text-2xl font-bold text-blue-600 dark:text-blue-400">{contributionDays}</p>
|
||||
<p class="text-sm text-gray-600 dark:text-slate-300">Days with commits</p>
|
||||
</div>
|
||||
<div class="backdrop-blur-sm bg-gradient-to-br from-purple-50/80 to-pink-50/80 dark:from-slate-800/80 dark:to-slate-900/80 rounded-xl shadow p-6 text-center">
|
||||
<div class="text-3xl mb-3">⚡</div>
|
||||
<h3 class="font-bold mb-2">Daily Average</h3>
|
||||
<p class="text-2xl font-bold text-purple-600 dark:text-purple-400">{averagePerDay}</p>
|
||||
<p class="text-sm text-gray-600 dark:text-slate-300">Commits per active day</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Contribution Calendar -->
|
||||
<div class="backdrop-blur-sm bg-white/70 dark:bg-slate-900/70 rounded-xl shadow p-6 mb-8">
|
||||
<div class="flex items-center mb-6">
|
||||
<div class="text-3xl mr-4">📊</div>
|
||||
<div>
|
||||
<h2 class="text-2xl font-bold">Contribution Activity</h2>
|
||||
<p class="text-gray-600 dark:text-slate-300">Development activity over time</p>
|
||||
</div>
|
||||
</div>
|
||||
<ContributionCalendar data={contributionData} client:visible />
|
||||
</div>
|
||||
<div class="space-y-8">
|
||||
<section>
|
||||
<h2 class="text-2xl font-semibold mb-4">{t.development.latestCommits || 'Latest Commits'}</h2>
|
||||
<p class="text-gray-600 dark:text-gray-400 mb-4">Showing contributions for user <b>Richard</b> (all repositories).</p>
|
||||
{Array.isArray(userCommits) && userCommits.length > 0 ? (
|
||||
<div class="space-y-4">
|
||||
{userCommits.map((commit) => (
|
||||
<div class="bg-white/40 dark:bg-slate-800/40 backdrop-blur-md p-6 rounded-2xl shadow-lg hover:shadow-xl transition-shadow duration-200 border border-gray-200 dark:border-slate-800 flex flex-col gap-4 md:flex-row md:items-stretch md:gap-8 mb-6">
|
||||
<div class="flex-1">
|
||||
<h3 class="font-semibold text-lg md:text-xl text-gray-900 dark:text-white mb-1">{commit.message.split('\n')[0] || 'No message'}</h3>
|
||||
{/* Format commit description with bullet points on new lines */}
|
||||
{commit.message ? (
|
||||
(() => {
|
||||
const lines = 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-300 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-300">{commit.message}</p>;
|
||||
}
|
||||
})()
|
||||
) : null}
|
||||
</div>
|
||||
{/* Desktop commit info card */}
|
||||
<div class="hidden md:flex flex-col items-end min-w-[180px] bg-gray-50 dark:bg-slate-800 rounded-xl px-5 py-3 mt-4 md:mt-0 md:ml-8 shadow border border-gray-200 dark:border-gray-700">
|
||||
<span class="text-base font-semibold text-gray-800 dark:text-gray-200 mb-1">{commit.date ? formatDate(commit.date) : ''}</span>
|
||||
{commit.author && (
|
||||
<span class="text-xs text-gray-500 dark:text-gray-400 mb-2">{commit.author === 'becarta' ? 'Richard Bergsma' : commit.author}</span>
|
||||
)}
|
||||
{commit.repo && (
|
||||
<span class="text-xs text-gray-500 dark:text-gray-400 mb-2">
|
||||
<a href={commit.repo_url} target="_blank" rel="noopener">{commit.repo}</a>
|
||||
</span>
|
||||
)}
|
||||
{commit.sha && (
|
||||
<a href={commit.compare_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="px-3 py-1 rounded-full bg-blue-50 dark:bg-blue-900 border border-blue-200 dark:border-blue-700 font-mono text-xs text-blue-700 dark:text-blue-300 hover:bg-blue-100 dark:hover:bg-blue-800 transition-colors cursor-pointer block">
|
||||
{commit.sha.slice(0, 7)}
|
||||
</code>
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
{/* Mobile commit info area, visually separated and two rows with left/right alignment */}
|
||||
<div class="md:hidden border-t border-gray-200 dark:border-gray-700 pt-3 px-3 bg-gray-50 dark:bg-slate-800 rounded-b-xl text-xs text-gray-700 dark:text-gray-300">
|
||||
<div class="flex flex-row justify-between items-center mb-1 gap-3">
|
||||
<span class="font-semibold">{commit.date ? formatDate(commit.date) : ''}</span>
|
||||
{commit.author && (
|
||||
<span>{commit.author === 'becarta' ? 'Richard Bergsma' : commit.author}</span>
|
||||
|
||||
<!-- Latest Commits Section -->
|
||||
<div class="backdrop-blur-sm bg-white/70 dark:bg-slate-900/70 rounded-xl shadow p-6">
|
||||
<div class="flex items-center mb-6">
|
||||
<div class="text-3xl mr-4">💻</div>
|
||||
<div>
|
||||
<h2 class="text-2xl font-bold">{t.development.latestCommits || 'Latest Commits'}</h2>
|
||||
<p class="text-gray-600 dark:text-slate-300">
|
||||
Showing contributions for user <span class="font-semibold text-blue-600 dark:text-blue-400">Richard</span> (all repositories)
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{Array.isArray(userCommits) && userCommits.length > 0 ? (
|
||||
<div class="space-y-4">
|
||||
{userCommits.map((commit, index) => (
|
||||
<div class="backdrop-blur-sm bg-gradient-to-r from-white/50 to-gray-50/50 dark:from-slate-800/50 dark:to-slate-900/50 rounded-xl shadow-sm hover:shadow-md transition-all duration-200 border border-gray-200/50 dark:border-slate-700/50 overflow-hidden">
|
||||
<div class="p-6">
|
||||
<div class="flex flex-col gap-4 md:flex-row md:items-start md:gap-6">
|
||||
<!-- Commit Number Badge -->
|
||||
<div class="flex-shrink-0">
|
||||
<div class="w-8 h-8 bg-gradient-to-r from-blue-500 to-purple-500 text-white rounded-full flex items-center justify-center text-sm font-bold">
|
||||
{index + 1}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="flex-1 min-w-0">
|
||||
<h3 class="font-semibold text-lg text-gray-900 dark:text-white mb-2 break-words">
|
||||
{commit.message.split('\n')[0] || 'No message'}
|
||||
</h3>
|
||||
|
||||
{/* Format commit description with bullet points on new lines */}
|
||||
{commit.message && commit.message.split('\n').length > 1 && (
|
||||
(() => {
|
||||
const lines = commit.message.split('\n').slice(1);
|
||||
const bullets = lines.filter(line => line.trim().startsWith('- '));
|
||||
if (bullets.length > 0) {
|
||||
return (
|
||||
<ul class="text-sm text-gray-600 dark:text-gray-300 list-disc ml-5 space-y-1">
|
||||
{lines.map((line, idx) =>
|
||||
line.trim().startsWith('- ')
|
||||
? <li key={idx} class="break-words">{line.trim().slice(2)}</li>
|
||||
: line.trim() !== '' && <li key={idx} class="list-none pl-0 break-words">{line}</li>
|
||||
)}
|
||||
</ul>
|
||||
);
|
||||
} else {
|
||||
const description = lines.filter(line => line.trim() !== '').join(' ');
|
||||
return description && (
|
||||
<p class="text-sm text-gray-600 dark:text-gray-300 break-words">{description}</p>
|
||||
);
|
||||
}
|
||||
})()
|
||||
)}
|
||||
|
||||
<!-- Repository Info -->
|
||||
{commit.repo && (
|
||||
<div class="flex items-center mt-3 text-sm text-gray-500 dark:text-gray-400">
|
||||
<div class="text-lg mr-2">📂</div>
|
||||
<a
|
||||
href={commit.repo_url}
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
|
||||
>
|
||||
{commit.repo}
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div class="flex flex-row justify-between items-center gap-3">
|
||||
{commit.repo && (
|
||||
<span>
|
||||
<a href={commit.repo_url} target="_blank" rel="noopener">{commit.repo}</a>
|
||||
</span>
|
||||
)}
|
||||
{commit.sha && (
|
||||
<a href={commit.compare_url} target="_blank" rel="noopener">
|
||||
<span class="sr-only">Commit:</span>
|
||||
<code class="px-3 py-1 rounded-full bg-blue-50 dark:bg-blue-900 border border-blue-200 dark:border-blue-700 font-mono text-xs text-blue-700 dark:text-blue-300 hover:bg-blue-100 dark:hover:bg-blue-800 transition-colors cursor-pointer max-w-[130px] overflow-x-auto whitespace-nowrap block">
|
||||
{commit.sha.slice(0, 7)}
|
||||
</code>
|
||||
</a>
|
||||
)}
|
||||
|
||||
<!-- Commit Info Sidebar -->
|
||||
<div class="flex-shrink-0 md:min-w-[200px]">
|
||||
<div class="bg-gray-50/80 dark:bg-slate-800/80 rounded-lg p-4 space-y-3">
|
||||
{/* Date */}
|
||||
<div class="flex items-center text-sm">
|
||||
<div class="text-gray-500 dark:text-gray-400 mr-2">📅</div>
|
||||
<span class="font-medium text-gray-700 dark:text-gray-200">
|
||||
{commit.date ? formatDate(commit.date) : 'Unknown date'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Author */}
|
||||
{commit.author && (
|
||||
<div class="flex items-center text-sm">
|
||||
<div class="text-gray-500 dark:text-gray-400 mr-2">👤</div>
|
||||
<span class="text-gray-600 dark:text-gray-300">
|
||||
{commit.author === 'becarta' ? 'Richard Bergsma' : commit.author}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Commit Hash */}
|
||||
{commit.sha && (
|
||||
<div class="flex items-center text-sm">
|
||||
<div class="text-gray-500 dark:text-gray-400 mr-2">🔗</div>
|
||||
<a
|
||||
href={commit.compare_url}
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
class="group"
|
||||
>
|
||||
<code class="px-2 py-1 rounded bg-blue-50 dark:bg-blue-900/50 border border-blue-200 dark:border-blue-700 font-mono text-xs text-blue-700 dark:text-blue-300 group-hover:bg-blue-100 dark:group-hover:bg-blue-800/50 transition-colors">
|
||||
{commit.sha.slice(0, 8)}
|
||||
</code>
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<p class="text-gray-600 dark:text-gray-400">Unable to fetch commit history at this time.</p>
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div class="text-center py-12">
|
||||
<div class="text-4xl mb-4">🤷♂️</div>
|
||||
<p class="text-gray-600 dark:text-gray-400 text-lg">
|
||||
Unable to fetch commit history at this time.
|
||||
</p>
|
||||
<p class="text-gray-500 dark:text-gray-500 text-sm mt-2">
|
||||
Please check back later or contact support if the issue persists.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
</Layout>
|
||||
Reference in New Issue
Block a user