Merge pull request #91 from syntaxandsips/mr-dark-debug/update-blog-layout-and-fix-cluttered-text

fix: refresh blog layouts and typography

Author: Mr-Dark-debug

src/app/blogs/[slug]/NewBlogPostClient.tsx

@@ -9,17 +9,16 @@ import {
   Eye,
   Twitter,
   Linkedin,
-  Github,
   Share2,
   Copy,
   Check,
   ArrowUpRight,
 } from 'lucide-react';
 import { NewMarkdownRenderer } from '@/components/ui/NewMarkdownRenderer';
 import { NewSummarizeButton } from '@/components/ui/NewSummarizeButton';
-import { SocialFollowItem } from '@/components/ui/SocialFollowItem';
 import { CommentsSection } from '@/components/ui/CommentsSection';
 import { Breadcrumbs, type BreadcrumbItem } from '@/components/ui/Breadcrumbs';
+import { NewFollowSection } from '@/components/ui/NewFollowSection';
 import type { BlogListPost, BlogPostDetail } from '@/lib/posts';
 
 interface BlogPostClientProps {
@@ -116,6 +115,28 @@ export default function NewBlogPostClient({ post, relatedPosts, canonicalUrl, br
     [copyState, handleCopyLink, post.title, shareUrl],
   );
 
+  const recommendedTopics = useMemo(() => {
+    const unique = new Set<string>();
+    const register = (value: string | null | undefined) => {
+      if (!value) {
+        return;
+      }
+
+      const trimmed = value.trim();
+      if (trimmed.length > 0) {
+        unique.add(trimmed);
+      }
+    };
+
+    register(post.category.name ?? post.category.slug ?? null);
+    post.tags.forEach((tag) => register(tag));
+    relatedPosts.forEach((related) => {
+      register(related.category.name ?? related.category.slug ?? null);
+    });
+
+    return Array.from(unique);
+  }, [post.category.name, post.category.slug, post.tags, relatedPosts]);
+
   return (
     <div className="w-full bg-[#f0f0f0]">
       <div className="container mx-auto px-4 py-8">
@@ -126,7 +147,7 @@ export default function NewBlogPostClient({ post, relatedPosts, canonicalUrl, br
         >
           <ArrowLeft size={18} /> BACK TO BLOGS
         </Link>
-        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+        <div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
           <div className="lg:col-span-2">
             <article className="bg-white border-4 border-black rounded-lg overflow-hidden">
               <div className="p-6 border-b-4 border-black">
@@ -262,52 +283,9 @@ export default function NewBlogPostClient({ post, relatedPosts, canonicalUrl, br
               </div>
             </article>
           </div>
-          <div className="lg:col-span-1 space-y-8">
-            <div className="border-4 border-black bg-white p-6 rounded-lg">
-              <h3 className="text-xl font-bold mb-4">AI and ML Insights</h3>
-              <div className="flex flex-wrap gap-2">
-                <button className="px-3 py-1 border-2 border-black rounded-md bg-white hover:bg-black hover:text-white transition">
-                  Artificial Intelligence
-                </button>
-                <button className="px-3 py-1 border-2 border-black rounded-md bg-white hover:bg-black hover:text-white transition">
-                  Machine Learning
-                </button>
-                <button className="px-3 py-1 border-2 border-black rounded-md bg-white hover:bg-black hover:text-white transition">
-                  Neural Networks
-                </button>
-                <button className="px-3 py-1 border-2 border-black rounded-md bg-white hover:bg-black hover:text-white transition">
-                  Data Science
-                </button>
-                <button className="px-3 py-1 border-2 border-black rounded-md bg-white hover:bg-black hover:text-white transition">
-                  Computer Vision
-                </button>
-                <button className="px-3 py-1 border-2 border-black rounded-md bg-white hover:bg-black hover:text-white transition">
-                  Reinforcement Learning
-                </button>
-              </div>
-              <button className="text-[#6C63FF] font-bold hover:underline mt-4">
-                See more topics
-              </button>
-            </div>
-            <div className="border-4 border-black bg-white p-6 rounded-lg">
-              <h3 className="text-xl font-bold mb-4">Follow Syntax &amp; Sips</h3>
-              <div className="space-y-4">
-                <SocialFollowItem
-                  platform="Twitter"
-                  handle="@syntaxandsips"
-                  icon={<Twitter className="h-6 w-6 text-[#1DA1F2]" />}
-                />
-                <SocialFollowItem
-                  platform="LinkedIn"
-                  handle="/company/syntaxandsips"
-                  icon={<Linkedin className="h-6 w-6 text-[#0A66C2]" />}
-                />
-                <SocialFollowItem
-                  platform="GitHub"
-                  handle="syntaxandsips"
-                  icon={<Github className="h-6 w-6 text-black" />}
-                />
-              </div>
+          <div className="lg:col-span-1 lg:self-start">
+            <div className="lg:sticky lg:top-24">
+              <NewFollowSection topics={recommendedTopics} />
             </div>
           </div>
         </div>

src/app/globals.css

@@ -271,6 +271,82 @@ body {
   border-radius: 0.25rem;
 }
 
+.markdown-content {
+  color: rgb(17 24 39);
+  font-size: 1.05rem;
+  line-height: 1.85;
+  word-break: break-word;
+}
+
+.markdown-content > *:first-child {
+  margin-top: 0;
+}
+
+.markdown-content p,
+.markdown-content ul,
+.markdown-content ol,
+.markdown-content blockquote,
+.markdown-content pre,
+.markdown-content table,
+.markdown-content img,
+.markdown-content figure {
+  margin-top: 0;
+  margin-bottom: 1.5rem;
+}
+
+.markdown-content h2,
+.markdown-content h3,
+.markdown-content h4 {
+  font-weight: 800;
+  color: rgb(17 24 39);
+  margin-top: 2.5rem;
+  margin-bottom: 1rem;
+  line-height: 1.25;
+}
+
+.markdown-content h2 {
+  font-size: clamp(1.75rem, 2vw + 1rem, 2.25rem);
+}
+
+.markdown-content h3 {
+  font-size: clamp(1.5rem, 1.5vw + 1rem, 1.75rem);
+}
+
+.markdown-content h4 {
+  font-size: clamp(1.25rem, 1.2vw + 0.9rem, 1.5rem);
+}
+
+.markdown-content ul {
+  padding-left: 1.5rem;
+  list-style-type: disc;
+}
+
+.markdown-content ol {
+  padding-left: 1.5rem;
+  list-style-type: decimal;
+}
+
+.markdown-content li + li {
+  margin-top: 0.75rem;
+}
+
+.markdown-content blockquote {
+  border-left: 4px solid rgb(108 99 255);
+  padding-left: 1.25rem;
+  font-style: italic;
+  background-color: rgba(108, 99, 255, 0.08);
+  border-radius: 0.5rem;
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+}
+
+.markdown-content code:not([class]) {
+  background-color: rgb(229 231 235);
+  padding: 0.25rem 0.4rem;
+  border-radius: 0.4rem;
+  font-size: 0.95em;
+}
+
 .dark {
   --background: oklch(0.145 0 0);
   --foreground: oklch(0.985 0 0);

src/components/neobrutal/toggle-switch.tsx

@@ -17,13 +17,24 @@ export const NeobrutalToggleSwitch = forwardRef<
   NeobrutalToggleSwitchProps
 >(
   (
-    { checked, onCheckedChange, label, onLabel = 'On', offLabel = 'Off', className, ...rest },
+    {
+      checked,
+      onCheckedChange,
+      label,
+      onLabel = 'On',
+      offLabel = 'Off',
+      className,
+      'aria-label': ariaLabel,
+      ...rest
+    },
     ref,
   ) => {
     const handleClick = () => {
       onCheckedChange?.(!checked)
     }
 
+    const accessibleLabel = ariaLabel ?? (checked ? onLabel : offLabel)
+
     return (
       <div className={cn('flex items-center gap-3', className)}>
         {label ? (
@@ -36,32 +47,41 @@ export const NeobrutalToggleSwitch = forwardRef<
           type="button"
           role="switch"
           aria-checked={checked}
+          aria-label={accessibleLabel}
           onClick={handleClick}
           className={cn(
-            'relative flex h-9 w-20 items-center rounded-full border-4 border-black bg-white px-1 transition-transform',
+            'relative grid h-10 w-36 grid-cols-2 items-center rounded-full border-4 border-black bg-white text-[11px] font-black uppercase tracking-wide transition-shadow duration-200 ease-out',
             checked
-              ? 'bg-[#6C63FF] text-white shadow-[4px_4px_0px_0px_rgba(0,0,0,0.16)]'
-              : 'bg-white text-black shadow-[4px_4px_0px_0px_rgba(0,0,0,0.08)]',
+              ? 'shadow-[4px_4px_0px_0px_rgba(0,0,0,0.16)]'
+              : 'shadow-[4px_4px_0px_0px_rgba(0,0,0,0.08)]',
           )}
           {...rest}
         >
           <span
+            aria-hidden
+            className={cn(
+              'pointer-events-none absolute inset-y-1 left-1 z-0 rounded-full border-2 border-black bg-[#6C63FF] transition-transform duration-200 ease-out',
+              'w-[calc(50%-0.375rem)]',
+              checked ? 'translate-x-[calc(100%+0.75rem)]' : 'translate-x-0',
+            )}
+          />
+          <span
+            aria-hidden
             className={cn(
-              'flex h-6 w-6 items-center justify-center rounded-full border-2 border-black bg-white font-bold transition-transform',
-              checked ? 'translate-x-11 bg-[#FFD166]' : 'translate-x-0',
+              'relative z-10 text-center transition-colors duration-200 ease-out',
+              checked ? 'text-black' : 'text-white drop-shadow-[1px_1px_0px_rgba(0,0,0,0.45)]',
             )}
           >
-            {checked ? '✓' : ''}
+            {offLabel}
           </span>
           <span
+            aria-hidden
             className={cn(
-              'pointer-events-none absolute inset-0 flex items-center justify-center text-[11px] font-black uppercase tracking-wide transition-colors',
-              checked
-                ? 'text-white drop-shadow-[1px_1px_0px_rgba(0,0,0,0.45)]'
-                : 'text-black',
+              'relative z-10 text-center transition-colors duration-200 ease-out',
+              checked ? 'text-white drop-shadow-[1px_1px_0px_rgba(0,0,0,0.45)]' : 'text-black',
             )}
           >
-            {checked ? onLabel : offLabel}
+            {onLabel}
           </span>
         </button>
       </div>

src/components/ui/NewBlogsHeader.tsx

@@ -2,22 +2,29 @@ import React from 'react';
 
 export function NewBlogsHeader() {
   return (
-    <div className="text-center mb-16 relative">
-      <div className="absolute -top-6 -left-6 w-16 h-16 bg-[#FFD166] border-4 border-black rounded-full transform rotate-12"></div>
-      <div className="absolute -bottom-6 -right-6 w-16 h-16 bg-[#FF5252] border-4 border-black transform -rotate-12"></div>
-      <div className="relative">
-        <h1 className="text-5xl md:text-7xl font-black mb-6 leading-tight">
-          <span className="bg-[#6C63FF] text-white px-4 py-2 inline-block transform rotate-1 border-4 border-black">
-            AI & ML
-          </span>{' '}
-          <span className="bg-[#FF5252] text-white px-4 py-2 inline-block transform -rotate-1 border-4 border-black">
-            Insights
+    <div className="relative mb-12 overflow-hidden rounded-3xl border-4 border-black bg-white px-6 py-10 text-left shadow-[10px_10px_0px_rgba(0,0,0,0.12)]">
+      <div className="pointer-events-none absolute -left-10 top-6 hidden h-24 w-24 rotate-6 rounded-full border-4 border-black bg-[#FFD166] md:block" />
+      <div className="pointer-events-none absolute -right-12 -bottom-8 hidden h-28 w-28 -rotate-12 border-4 border-black bg-[#6C63FF] md:block" />
+      <div className="relative flex flex-col gap-6 md:flex-row md:items-center md:justify-between">
+        <div className="max-w-2xl space-y-4">
+          <p className="inline-flex items-center rounded-full border-2 border-black bg-[#FFD166] px-3 py-1 text-xs font-black uppercase tracking-[0.3em] text-black shadow-[4px_4px_0px_rgba(0,0,0,0.12)]">
+            Explore syntax &amp; sips
+          </p>
+          <h1 className="text-4xl font-black leading-tight text-gray-900 sm:text-5xl">
+            Discover stories, tutorials, and community updates from the Syntax &amp; Sips collective.
+          </h1>
+          <p className="text-lg font-medium text-gray-700">
+            Browse the entire library, search by topic, or filter by interests to find your next read without the clutter.
+          </p>
+        </div>
+        <div className="flex flex-col gap-3 text-sm font-bold uppercase tracking-wide text-gray-700">
+          <span className="inline-flex items-center gap-2 rounded-xl border-2 border-black bg-[#FF5252] px-4 py-3 text-white shadow-[6px_6px_0px_rgba(0,0,0,0.16)]">
+            Fresh posts weekly
           </span>
-        </h1>
-        <p className="mt-6 text-xl text-center max-w-2xl mx-auto">
-          Exploring the cutting edge of artificial intelligence, machine learning, data science workflows, quantum computing,
-          coding tutorials, and product reviews.
-        </p>
+          <span className="inline-flex items-center gap-2 rounded-xl border-2 border-black bg-[#06D6A0] px-4 py-3 text-black shadow-[6px_6px_0px_rgba(0,0,0,0.16)]">
+            Curated by our editors
+          </span>
+        </div>
       </div>
     </div>
   );

src/components/ui/NewBlogsPage.tsx

@@ -162,9 +162,9 @@ export function NewBlogsPage({ posts }: NewBlogsPageProps) {
   };
 
   return (
-    <div className="container mx-auto px-4 py-8">
+    <div className="container mx-auto px-4 pb-14 pt-10">
       <NewBlogsHeader />
-      <div className="mt-8 flex flex-col gap-10 lg:flex-row">
+      <div className="mt-8 flex flex-col gap-10 lg:flex-row lg:items-start">
         <div className="w-full lg:w-8/12">
           <NeobrutalCard className="flex flex-col gap-6">
             <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
@@ -235,8 +235,10 @@ export function NewBlogsPage({ posts }: NewBlogsPageProps) {
             </div>
           </NeobrutalCard>
         </div>
-        <div className="w-full lg:w-4/12">
-          <NewFollowSection topics={recommendedTopics} />
+        <div className="w-full lg:w-4/12 lg:self-start">
+          <div className="lg:sticky lg:top-24">
+            <NewFollowSection topics={recommendedTopics} />
+          </div>
         </div>
       </div>
     </div>