fix(blog): add back unoptimized tag, fix styling (#2461)

2026-09-24 15:45:35 +08:00 · 2025-12-18 15:55:47 -08:00
parent 83d813a7cc
commit 90c3c43607
8 changed files with 159 additions and 70 deletions
@@ -64,6 +64,7 @@ export default async function Page({ params }: { params: Promise<{ slug: string
                sizes='(max-width: 768px) 100vw, 450px'
                priority
                itemProp='image'
+                unoptimized
              />
            </div>
          </div>
@@ -144,6 +145,7 @@ export default async function Page({ params }: { params: Promise<{ slug: string
                    className='h-[160px] w-full object-cover'
                    sizes='(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw'
                    loading='lazy'
+                    unoptimized
                  />
                  <div className='p-3'>
                    <div className='mb-1 text-gray-600 text-xs'>
@@ -38,6 +38,7 @@ export default async function AuthorPage({ params }: { params: Promise<{ id: str
            width={40}
            height={40}
            className='rounded-full'
+            unoptimized
          />
        ) : null}
        <h1 className='font-medium text-[32px] leading-tight'>{author.name}</h1>
@@ -52,6 +53,7 @@ export default async function AuthorPage({ params }: { params: Promise<{ id: str
                width={600}
                height={315}
                className='h-[160px] w-full object-cover transition-transform group-hover:scale-[1.02]'
+                unoptimized
              />
              <div className='p-3'>
                <div className='mb-1 text-gray-600 text-xs'>
@@ -1,8 +1,7 @@
-import Image from 'next/image'
 import Link from 'next/link'
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
 import { getAllPostMeta } from '@/lib/blog/registry'
 import { soehne } from '@/app/_styles/fonts/soehne/soehne'
+import { PostGrid } from '@/app/(landing)/studio/post-grid'

 export const revalidate = 3600

@@ -18,7 +17,6 @@ export default async function StudioIndex({
  const all = await getAllPostMeta()
  const filtered = tag ? all.filter((p) => p.tags.includes(tag)) : all

-  // Sort to ensure featured post is first on page 1
  const sorted =
    pageNum === 1
      ? filtered.sort((a, b) => {
@@ -63,68 +61,7 @@ export default async function StudioIndex({
      </div> */}

      {/* Grid layout for consistent rows */}
-      <div className='grid grid-cols-1 gap-4 md:grid-cols-2 md:gap-6 lg:grid-cols-3'>
-        {posts.map((p, i) => {
-          return (
-            <Link key={p.slug} href={`/studio/${p.slug}`} className='group flex flex-col'>
-              <div className='flex h-full flex-col overflow-hidden rounded-xl border border-gray-200 transition-colors duration-300 hover:border-gray-300'>
-                <Image
-                  src={p.ogImage}
-                  alt={p.title}
-                  width={800}
-                  height={450}
-                  className='h-48 w-full object-cover'
-                  sizes='(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw'
-                  loading='lazy'
-                />
-                <div className='flex flex-1 flex-col p-4'>
-                  <div className='mb-2 text-gray-600 text-xs'>
-                    {new Date(p.date).toLocaleDateString('en-US', {
-                      month: 'short',
-                      day: 'numeric',
-                      year: 'numeric',
-                    })}
-                  </div>
-                  <h3 className='shine-text mb-1 font-medium text-lg leading-tight'>{p.title}</h3>
-                  <p className='mb-3 line-clamp-3 flex-1 text-gray-700 text-sm'>{p.description}</p>
-                  <div className='flex items-center gap-2'>
-                    <div className='-space-x-1.5 flex'>
-                      {(p.authors && p.authors.length > 0 ? p.authors : [p.author])
-                        .slice(0, 3)
-                        .map((author, idx) => (
-                          <Avatar key={idx} className='size-4 border border-white'>
-                            <AvatarImage src={author?.avatarUrl} alt={author?.name} />
-                            <AvatarFallback className='border border-white bg-gray-100 text-[10px] text-gray-600'>
-                              {author?.name.slice(0, 2)}
-                            </AvatarFallback>
-                          </Avatar>
-                        ))}
-                    </div>
-                    <span className='text-gray-600 text-xs'>
-                      {(p.authors && p.authors.length > 0 ? p.authors : [p.author])
-                        .slice(0, 2)
-                        .map((a) => a?.name)
-                        .join(', ')}
-                      {(p.authors && p.authors.length > 0 ? p.authors : [p.author]).length > 2 && (
-                        <>
-                          {' '}
-                          and{' '}
-                          {(p.authors && p.authors.length > 0 ? p.authors : [p.author]).length - 2}{' '}
-                          other
-                          {(p.authors && p.authors.length > 0 ? p.authors : [p.author]).length - 2 >
-                          1
-                            ? 's'
-                            : ''}
-                        </>
-                      )}
-                    </span>
-                  </div>
-                </div>
-              </div>
-            </Link>
-          )
-        })}
-      </div>
+      <PostGrid posts={posts} />

      {totalPages > 1 && (
        <div className='mt-10 flex items-center justify-center gap-3'>
@@ -0,0 +1,90 @@
+'use client'
+
+import Image from 'next/image'
+import Link from 'next/link'
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+
+interface Author {
+  id: string
+  name: string
+  avatarUrl?: string
+  url?: string
+}
+
+interface Post {
+  slug: string
+  title: string
+  description: string
+  date: string
+  ogImage: string
+  author: Author
+  authors?: Author[]
+  featured?: boolean
+}
+
+export function PostGrid({ posts }: { posts: Post[] }) {
+  return (
+    <div className='grid grid-cols-1 gap-4 md:grid-cols-2 md:gap-6 lg:grid-cols-3'>
+      {posts.map((p, index) => (
+        <Link key={p.slug} href={`/studio/${p.slug}`} className='group flex flex-col'>
+          <div className='flex h-full flex-col overflow-hidden rounded-xl border border-gray-200 transition-colors duration-300 hover:border-gray-300'>
+            {/* Image container with fixed aspect ratio to prevent layout shift */}
+            <div className='relative aspect-video w-full overflow-hidden'>
+              <Image
+                src={p.ogImage}
+                alt={p.title}
+                sizes='(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw'
+                unoptimized
+                priority={index < 6}
+                loading={index < 6 ? undefined : 'lazy'}
+                fill
+                style={{ objectFit: 'cover' }}
+              />
+            </div>
+            <div className='flex flex-1 flex-col p-4'>
+              <div className='mb-2 text-gray-600 text-xs'>
+                {new Date(p.date).toLocaleDateString('en-US', {
+                  month: 'short',
+                  day: 'numeric',
+                  year: 'numeric',
+                })}
+              </div>
+              <h3 className='shine-text mb-1 font-medium text-lg leading-tight'>{p.title}</h3>
+              <p className='mb-3 line-clamp-3 flex-1 text-gray-700 text-sm'>{p.description}</p>
+              <div className='flex items-center gap-2'>
+                <div className='-space-x-1.5 flex'>
+                  {(p.authors && p.authors.length > 0 ? p.authors : [p.author])
+                    .slice(0, 3)
+                    .map((author, idx) => (
+                      <Avatar key={idx} className='size-4 border border-white'>
+                        <AvatarImage src={author?.avatarUrl} alt={author?.name} />
+                        <AvatarFallback className='border border-white bg-gray-100 text-[10px] text-gray-600'>
+                          {author?.name.slice(0, 2)}
+                        </AvatarFallback>
+                      </Avatar>
+                    ))}
+                </div>
+                <span className='text-gray-600 text-xs'>
+                  {(p.authors && p.authors.length > 0 ? p.authors : [p.author])
+                    .slice(0, 2)
+                    .map((a) => a?.name)
+                    .join(', ')}
+                  {(p.authors && p.authors.length > 0 ? p.authors : [p.author]).length > 2 && (
+                    <>
+                      {' '}
+                      and {(p.authors && p.authors.length > 0 ? p.authors : [p.author]).length - 2}{' '}
+                      other
+                      {(p.authors && p.authors.length > 0 ? p.authors : [p.author]).length - 2 > 1
+                        ? 's'
+                        : ''}
+                    </>
+                  )}
+                </span>
+              </div>
+            </div>
+          </div>
+        </Link>
+      ))}
+    </div>
+  )
+}
@@ -759,3 +759,24 @@ input[type="search"]::-ms-clear {
    --surface-elevated: #202020;
  }
 }
+
+/**
+ * Remove backticks from inline code in prose (Tailwind Typography default)
+ */
+.prose code::before,
+.prose code::after {
+  content: none !important;
+}
+
+/**
+ * Remove underlines from heading anchor links in prose
+ */
+.prose h1 a,
+.prose h2 a,
+.prose h3 a,
+.prose h4 a,
+.prose h5 a,
+.prose h6 a {
+  text-decoration: none !important;
+  color: inherit !important;
+}
@@ -1,5 +1,7 @@
 'use client'

+import { useState } from 'react'
+import { Check, Copy } from 'lucide-react'
 import { Code } from '@/components/emcn'

 interface CodeBlockProps {
@@ -8,5 +10,36 @@ interface CodeBlockProps {
 }

 export function CodeBlock({ code, language }: CodeBlockProps) {
-  return <Code.Viewer code={code} showGutter={true} language={language} />
+  const [copied, setCopied] = useState(false)
+
+  const handleCopy = () => {
+    navigator.clipboard.writeText(code)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }
+
+  return (
+    <div className='dark w-full overflow-hidden rounded-md border border-[#2a2a2a] bg-[#1F1F1F] text-sm'>
+      <div className='flex items-center justify-between border-[#2a2a2a] border-b px-4 py-1.5'>
+        <span className='text-[#A3A3A3] text-xs'>{language}</span>
+        <button
+          onClick={handleCopy}
+          className='text-[#A3A3A3] transition-colors hover:text-gray-300'
+          title='Copy code'
+        >
+          {copied ? (
+            <Check className='h-3 w-3' strokeWidth={2} />
+          ) : (
+            <Copy className='h-3 w-3' strokeWidth={2} />
+          )}
+        </button>
+      </div>
+      <Code.Viewer
+        code={code}
+        showGutter
+        language={language}
+        className='[&_pre]:!pb-0 m-0 rounded-none border-0 bg-transparent'
+      />
+    </div>
+  )
 }
@@ -13,6 +13,7 @@ export const mdxComponents: MDXRemoteProps['components'] = {
      className={clsx('h-auto w-full rounded-lg', props.className)}
      sizes='(max-width: 768px) 100vw, 800px'
      loading='lazy'
+      unoptimized
    />
  ),
  h2: (props: any) => (
@@ -66,7 +67,7 @@ export const mdxComponents: MDXRemoteProps['components'] = {
  a: (props: any) => {
    const isAnchorLink = props.className?.includes('anchor')
    if (isAnchorLink) {
-      return <a {...props} />
+      return <a {...props} className={clsx('text-inherit no-underline', props.className)} />
    }
    return (
      <a
@@ -112,7 +113,7 @@ export const mdxComponents: MDXRemoteProps['components'] = {
      const mappedLanguage = languageMap[language.toLowerCase()] || 'javascript'

      return (
-        <div className='my-6'>
+        <div className='not-prose my-6'>
          <CodeBlock
            code={typeof codeContent === 'string' ? codeContent.trim() : String(codeContent)}
            language={mappedLanguage}
@@ -128,9 +129,10 @@ export const mdxComponents: MDXRemoteProps['components'] = {
        <code
          {...props}
          className={clsx(
-            'rounded bg-gray-100 px-1.5 py-0.5 font-mono text-[0.9em] text-red-600',
+            'rounded bg-gray-100 px-1.5 py-0.5 font-mono font-normal text-[0.9em] text-red-600',
            props.className
          )}
+          style={{ fontWeight: 400 }}
        />
      )
    }
@@ -38,7 +38,9 @@ function slugify(text: string): string {
 }

 async function scanFrontmatters(): Promise<BlogMeta[]> {
-  if (cachedMeta) return cachedMeta
+  if (cachedMeta) {
+    return cachedMeta
+  }
  await ensureContentDirs()
  const entries = await fs.readdir(BLOG_DIR).catch(() => [])
  const authorsMap = await loadAuthors()