From 4f6264f2e2b2df1c00b4c304597302b42fa9a6d5 Mon Sep 17 00:00:00 2001 From: Marc Mintel Date: Mon, 19 Jan 2026 02:05:30 +0100 Subject: [PATCH] wip --- app/[locale]/blog/[slug]/page.tsx | 230 +++++++++++++------------ components/Footer.tsx | 2 +- components/Header.tsx | 2 +- components/blog/AnimatedImage.tsx | 24 ++- components/blog/ChatBubble.tsx | 9 +- components/blog/HighlightBox.tsx | 27 ++- components/blog/PowerCTA.tsx | 66 ++++--- components/blog/ReadingProgressBar.tsx | 34 ++++ components/blog/SplitHeading.tsx | 38 +--- components/blog/Stats.tsx | 15 +- components/blog/TableOfContents.tsx | 86 +++++++++ components/blog/VisualLinkPreview.tsx | 64 +++++-- components/home/CTA.tsx | 2 +- components/home/Experience.tsx | 4 +- components/home/Hero.tsx | 6 +- components/home/MeetTheTeam.tsx | 8 +- components/home/ProductCategories.tsx | 2 +- components/home/VideoSection.tsx | 4 +- components/ui/Heading.tsx | 4 +- docs/STYLEGUIDE.md | 1 + lib/blog.ts | 22 +++ styles/globals.css | 5 + tailwind.config.js | 2 +- tsconfig.tsbuildinfo | 2 +- 24 files changed, 431 insertions(+), 228 deletions(-) create mode 100644 components/blog/ReadingProgressBar.tsx create mode 100644 components/blog/TableOfContents.tsx diff --git a/app/[locale]/blog/[slug]/page.tsx b/app/[locale]/blog/[slug]/page.tsx index 61332d2f..fc6a6127 100644 --- a/app/[locale]/blog/[slug]/page.tsx +++ b/app/[locale]/blog/[slug]/page.tsx @@ -1,6 +1,6 @@ import { notFound } from 'next/navigation'; import { MDXRemote } from 'next-mdx-remote/rsc'; -import { getPostBySlug, getAdjacentPosts } from '@/lib/blog'; +import { getPostBySlug, getAdjacentPosts, getReadingTime, getHeadings } from '@/lib/blog'; import { Metadata } from 'next'; interface BlogPostProps { @@ -46,7 +46,7 @@ import ChatBubble from '@/components/blog/ChatBubble'; import SplitHeading from '@/components/blog/SplitHeading'; import PostNavigation from '@/components/blog/PostNavigation'; import PowerCTA from '@/components/blog/PowerCTA'; -import ShareButton from '@/components/blog/ShareButton'; +import TableOfContents from '@/components/blog/TableOfContents'; const components = { VisualLinkPreview, @@ -57,6 +57,7 @@ const components = { ChatBubble, PowerCTA, SplitHeading, + h1: () => null, a: ({ href, children, ...props }: any) => { if (href?.startsWith('/')) { return ( @@ -182,77 +183,63 @@ export default async function BlogPost({ params: { locale, slug } }: BlogPostPro notFound(); } + const headings = getHeadings(post.content); + return ( -
+
+ {/* Featured Image Header */} - {post.frontmatter.featuredImage && ( -
+ {post.frontmatter.featuredImage ? ( +
-
+
{/* Title overlay on image */} -
-
- {post.frontmatter.category && ( - - {post.frontmatter.category} - - )} -

- {post.frontmatter.title} -

-
- - - KLZ Cables -
- +
+
+
+ {post.frontmatter.category && ( +
+ + {post.frontmatter.category} + +
+ )} +

+ {post.frontmatter.title} +

+
+ + + {getReadingTime(post.content)} min read
- )} - - {/* Content */} -
- {/* Mobile Share Button */} -
- -
- {/* If no featured image, show header here */} - {!post.frontmatter.featuredImage && ( -
+ ) : ( +
+
{post.frontmatter.category && (
- + {post.frontmatter.category}
)} -

+

{post.frontmatter.title}

-
+
- - KLZ Cables + + {getReadingTime(post.content)} min read
-
- )} - - {/* Excerpt/Lead paragraph if available */} - {post.frontmatter.excerpt && ( -
-

- {post.frontmatter.excerpt} -

- )} +
+ )} - {/* Main content with enhanced styling */} -
- -
+ {/* Main Content Area with Sticky Narrative Layout */} +
+
+ {/* Left Column: Content */} +
+ {/* Excerpt/Lead paragraph if available */} + {post.frontmatter.excerpt && ( +
+

+ {post.frontmatter.excerpt} +

+
+ )} - {/* Structured Data */} -