Merge pull request #252 from dotCMS/making-blogs-responsive

some surgery to make blog posts responsive

Author: jdcmsd

app/blog/[slug]/page.js

@@ -168,8 +168,8 @@ export default async function BlogPage({ params }) {
             <Header />
             <JsonLd post={post} hostname={hostname} />
 
-            <div className="flex flex-1">
-                <main className="flex-1">
+            <div className="flex min-h-0 min-w-0 w-full flex-1 flex-col">
+                <main className="min-w-0 w-full flex-1">
                     <BlogDetailComponent post={post} />
                 </main>
             </div>

app/globals.css

@@ -133,6 +133,36 @@
     hyphens: none;
     white-space: normal;
   }
+
+  /* Prose / block editor (blogs, etc.): keep wide content inside the viewport */
+  .prose table {
+    max-width: 100%;
+  }
+  .prose th,
+  .prose td {
+    overflow-wrap: break-word;
+    word-break: normal;
+    hyphens: auto;
+  }
+  .prose td code,
+  .prose th code {
+    word-break: break-word;
+    overflow-wrap: break-word;
+    hyphens: none;
+    white-space: normal;
+  }
+  .prose img,
+  .prose video {
+    max-width: 100%;
+    height: auto;
+  }
+  .prose iframe {
+    max-width: 100%;
+  }
+  .prose pre {
+    max-width: 100%;
+    overflow-x: auto;
+  }
 }
 
 

app/learn/[slug]/CourseIntroduction.js

@@ -0,0 +1,16 @@
+"use client";
+
+import { DotCMSBlockEditorRenderer } from "@dotcms/react";
+
+/**
+ * Block editor must run on the client — @dotcms/react bundles TinyMCE, which breaks
+ * when the learn course page is evaluated as a Server Component during `next build`.
+ */
+export default function CourseIntroduction({ blocks }) {
+  return (
+    <DotCMSBlockEditorRenderer
+      className="prose dark:prose-invert"
+      blocks={blocks}
+    />
+  );
+}

app/learn/[slug]/page.js

@@ -1,6 +1,6 @@
 import { getCourseDetail } from "@/services/courses/getCourse";
-import { DotCMSBlockEditorRenderer } from "@dotcms/react";
 import ChapterFooter from "./ChapterFooter";
+import CourseIntroduction from "./CourseIntroduction";
 import { notFound } from "next/navigation";
 
 export default async function CoursePage({ params }) {
@@ -12,10 +12,7 @@ export default async function CoursePage({ params }) {
     <>
       <p className="text-sm text-white/50 mb-2">Introduction</p>
       <h1 className="text-4xl font-bold mb-8">{course.title}</h1>
-      <DotCMSBlockEditorRenderer
-        className="prose dark:prose-invert"
-        blocks={course.introduction.json}
-      />
+      <CourseIntroduction blocks={course.introduction.json} />
       <ChapterFooter courseSlug={slug} currentIndex={-1} chapters={course.chapters} />
     </>
   );

components/MarkdownContent.tsx

@@ -302,14 +302,13 @@ const MarkdownContent: React.FC<MarkdownContentProps> = ({ content, className, d
     },
     hr: () => <hr className="border-t border-border mb-6" />,
 
-    img: ({ src, alt, ...props }: any) => (
-      <img 
-        src={src} 
-        alt={alt} 
-        className="inline rounded-lg max-w-full h-auto"
-        {...props} 
-      />
-    ),
+    img: ({ src, alt, ...props }: any) =>
+      React.createElement('img', {
+        src,
+        alt,
+        className: 'inline rounded-lg max-w-full h-auto',
+        ...props,
+      }),
 
     video: ({ node, ...props }: any) => {
       if (!node?.children) return null;

components/blogs/blog-component.tsx

@@ -12,7 +12,7 @@ export default function BlogComponent(props: BlogProps) {
   const customRenderers: any = {};
 
   return (
-    <div className="prose dark:prose-invert mb-6 sm:mb-8 break-words whitespace-normal overflow-hidden max-w-none">
+    <div className="prose dark:prose-invert mb-6 sm:mb-8 max-w-none min-w-0 w-full overflow-x-auto break-words whitespace-normal prose-img:max-w-full prose-pre:max-w-full prose-pre:overflow-x-auto">
         <DotBlockEditor blocks={body?.json || body} customRenderers={customRenderers} />
     </div>
   );

components/blogs/blog-detail.js

@@ -14,21 +14,21 @@ export default function BlogDetailComponent({ post }) {
     const customRenderers = {};
 
     return (
-        <div className="container mx-auto">
+        <div className="container mx-auto w-full min-w-0 max-w-full">
             {/* Main Content Grid */}
-            <div className="flex gap-4 py-8 ">
+            <div className="flex w-full min-w-0 flex-col gap-4 py-8 xl:flex-row">
 
 
                 {/* Main Content */}
-                <article className="flex-1 px-4 max-w-4xl">
+                <article className="w-full min-w-0 max-w-4xl flex-1 px-4">
 
                     <DetailHeader post={post} />
 
                     <BlogComponent body={post.body.json} />
                 </article>
 
                 {/* Right Sidebar */}
-                <div className="w-64 shrink-0 hidden xl:block">
+                <div className="hidden w-64 shrink-0 xl:block">
                     <div className="sticky top-16">
                         <Authors authors={post.author} />
                         <OnThisPage />

components/content-types/feature-card.tsx

@@ -24,6 +24,8 @@ interface FeatureCardProps {
 
     imageUrl?: string;
     externalLink?:boolean;
+    /** e.g. `v=2` — appended as a cache-busting query on the resolved image URL */
+    imageCacheBust?: string;
 }
 
 export default function FeatureCard({
@@ -37,11 +39,14 @@ export default function FeatureCard({
     links = [],
     useIconOnly = false,
     imageUrl,
-    externalLink = false
+    externalLink = false,
+    imageCacheBust,
 }: FeatureCardProps) {
 
     const myHref = href ? href :  "#";
     const imageUrlAlt = imageIdentifier && (imageIdentifier.startsWith('http') || imageIdentifier.startsWith('/dA/')) ? imageIdentifier : `${Config.CDNHost}/dA/${imageIdentifier}/`;
+    const withImageBust = (url: string) =>
+        url && imageCacheBust ? `${url}${url.includes("?") ? "&" : "?"}${imageCacheBust}` : url;
 
     return (
         <div className="space-y-4">
@@ -75,7 +80,7 @@ export default function FeatureCard({
                         <div className="mt-auto flex justify-center items-center w-full">
                             {imageUrl ? (
                                     <Image
-                                    src={`${imageUrl}`}
+                                    src={withImageBust(`${imageUrl}`)}
                                     alt={`${title} illustration`}
                                     width={200}
                                     height={200}
@@ -96,7 +101,7 @@ export default function FeatureCard({
                                 </div>
                             ) : (
                                 <Image
-                                    src={`${imageUrlAlt}`}
+                                    src={withImageBust(`${imageUrlAlt}`)}
                                     alt={`${title} illustration`}
                                     width={400}
                                     height={150}

components/content-types/hero.tsx

@@ -68,6 +68,7 @@ export default function Hero(props: HeroProps) {
                     title={card1?.title}
                     description={card1?.description}
                     imageIdentifier={card1?.titleImage?.idPath || ""}
+                    imageCacheBust="v=2"
                     color="[#a21caf]"
                     count={0}
                     links={developerLinks}

components/navigation/NavTree.tsx

@@ -95,6 +95,8 @@ const NavTree = React.memo(
       // Restore scroll position immediately
       navElement.scrollTop = savedScroll;
       setIsInitialSetupComplete(true);
+      // savedScroll is updated on every scroll; listing it would re-run this effect constantly.
+      // eslint-disable-next-line react-hooks/exhaustive-deps -- intentional: mount + isMobile only
     }, [isMobile]);
 
     // Helper function to find active link with flexible matching