mmintel/klz-cables.com
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

feat: complete wcag accessibility and contrast improvements
Some checks failed
Build & Deploy / 🔍 Prepare (push) Successful in 12s
Details
Build & Deploy / 🧪 QA (push) Successful in 4m40s
Details
Build & Deploy / 🏗️ Build (push) Failing after 31s
Details
Build & Deploy / 🚀 Deploy (push) Has been skipped
Details
Build & Deploy / 🧪 Smoke Test (push) Has been skipped
Details
Build & Deploy / ⚡ Lighthouse (push) Has been skipped
Details
Build & Deploy / 🔔 Notify (push) Successful in 2s
Details

Browse Source
This commit is contained in:
Marc Mintel
2026-02-21 20:43:18 +01:00
parent 678c803408
commit 1153a79eb6
15 changed files with 228 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
app/[locale]/blog/page.tsx
View File

@@ -6,6 +6,7 @@ import Reveal from '@/components/Reveal';
import { Metadata } from 'next';
import { getTranslations, setRequestLocale } from 'next-intl/server';
import { SITE_URL } from '@/lib/schema';
import { BlogPaginationKeyboardObserver } from '@/components/blog/BlogPaginationKeyboardObserver';
interface BlogIndexProps {
params: Promise<{
@@ -80,7 +81,10 @@ export default async function BlogIndex({ params }: BlogIndexProps) {
{featuredPost &&
(new Date(featuredPost.frontmatter.date) > new Date() ||
featuredPost.frontmatter.public === false) && (
<Badge variant="neutral" className="border border-white/30 bg-transparent text-white/80 shadow-none">
<Badge
variant="neutral"
className="border border-white/30 bg-transparent text-white/80 shadow-none"
>
Draft Preview
</Badge>
)}
@@ -175,11 +179,10 @@ export default async function BlogIndex({ params }: BlogIndexProps) {
{post.frontmatter.category}
</Badge>
)}
</div>
)}
<div className="p-5 md:p-10 flex flex-col flex-1">
<div className="flex items-center gap-3 text-[10px] md:text-sm font-bold text-accent-dark mb-2 md:mb-4 tracking-widest uppercase">
<div className="flex items-center gap-3 text-[10px] md:text-sm font-bold text-primary/70 mb-2 md:mb-4 tracking-widest uppercase">
<span>
{new Date(post.frontmatter.date).toLocaleDateString(locale, {
year: 'numeric',
@@ -189,8 +192,10 @@ export default async function BlogIndex({ params }: BlogIndexProps) {
</span>
{(new Date(post.frontmatter.date) > new Date() ||
post.frontmatter.public === false) && (
<span className="px-1.5 py-0.5 border border-current rounded-sm text-[9px] md:text-xs">Draft</span>
)}
<span className="px-1.5 py-0.5 border border-current rounded-sm text-[9px] md:text-xs">
Draft
</span>
)}
</div>
<h3 className="text-lg md:text-2xl font-bold text-primary mb-3 md:mb-6 group-hover:text-accent-dark transition-colors line-clamp-2 leading-tight">
{post.frontmatter.title}
@@ -225,21 +230,47 @@ export default async function BlogIndex({ params }: BlogIndexProps) {
))}
</div>
{/* Pagination Placeholder */}
{/* Pagination */}
<div className="mt-12 md:mt-24 flex justify-center gap-2 md:gap-4">
<Button variant="outline" size="sm" className="md:h-11 md:px-6 md:text-base" disabled>
<Button
href="#"
variant="outline"
size="sm"
className="md:h-11 md:px-6 md:text-base pointer-events-none opacity-50"
aria-disabled="true"
aria-keyshortcuts="ArrowLeft"
tabIndex={-1}
>
{t('prev')}
</Button>
<Button variant="primary" size="sm" className="md:h-11 md:px-6 md:text-base">
<Button
href={`/${locale}/blog?page=1`}
variant="primary"
size="sm"
className="md:h-11 md:px-6 md:text-base"
aria-current="page"
>
1
</Button>
<Button variant="outline" size="sm" className="md:h-11 md:px-6 md:text-base">
<Button
href={`/${locale}/blog?page=2`}
variant="outline"
size="sm"
className="md:h-11 md:px-6 md:text-base"
>
2
</Button>
<Button variant="outline" size="sm" className="md:h-11 md:px-6 md:text-base">
<Button
href={`/${locale}/blog?page=2`}
variant="outline"
size="sm"
className="md:h-11 md:px-6 md:text-base"
aria-keyshortcuts="ArrowRight"
>
{t('next')}
</Button>
</div>
<BlogPaginationKeyboardObserver currentPage={1} totalPages={2} locale={locale} />
</Container>
</Section>
</div>