perf

Author: tannerlinsley

src/components/Markdown.tsx

@@ -14,6 +14,7 @@ import { useToast } from '~/components/ToastProvider'
 import { twMerge } from 'tailwind-merge'
 import { useMarkdownHeadings } from '~/components/MarkdownHeadingContext'
 import { renderMarkdown } from '~/utils/markdown'
+import { getNetlifyImageUrl } from '~/utils/netlifyImage'
 import { Tabs } from '~/components/Tabs'
 import { Copy } from 'lucide-react'
 
@@ -82,7 +83,7 @@ const markdownComponents: Record<string, React.FC> = {
     return (
       <span
         className={`border border-gray-500/20 bg-gray-500/10 rounded px-1 py-0.5${
-          className ?? ` ${className}`
+          className ? ` ${className}` : ''
         }`}
         {...rest}
       />
@@ -91,30 +92,16 @@ const markdownComponents: Record<string, React.FC> = {
   iframe: (props) => (
     <iframe {...props} className="w-full" title="Embedded Content" />
   ),
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  img: ({ children, alt, src, ...props }: HTMLProps<HTMLImageElement>) => {
-    // Use Netlify Image CDN for local images
-    const optimizedSrc =
-      src &&
-      !src.startsWith('http') &&
-      !src.startsWith('data:') &&
-      !src.endsWith('.svg')
-        ? `/.netlify/images?url=${encodeURIComponent(src)}&w=800&q=80`
-        : src
-
-    return (
-      <img
-        {...props}
-        src={optimizedSrc}
-        alt={alt ?? ''}
-        className={`max-w-full h-auto rounded-lg shadow-md ${
-          props.className ?? ''
-        }`}
-        loading="lazy"
-        decoding="async"
-      />
-    )
-  },
+  img: ({ alt, src, className, children: _, ...props }: HTMLProps<HTMLImageElement>) => (
+    <img
+      {...props}
+      src={src ? getNetlifyImageUrl(src) : undefined}
+      alt={alt ?? ''}
+      className={`max-w-full h-auto rounded-lg shadow-md ${className ?? ''}`}
+      loading="lazy"
+      decoding="async"
+    />
+  ),
 }
 
 export function extractPreAttributes(html: string): {
@@ -194,13 +181,10 @@ export function CodeBlock({
   ](() => {
     ;(async () => {
       const themes = ['github-light', 'tokyo-night']
-
-      // Normalize language name
       const normalizedLang = LANG_ALIASES[lang] || lang
-      const effectiveLang =
-        normalizedLang === 'mermaid' ? 'plaintext' : normalizedLang
+      const effectiveLang = normalizedLang === 'mermaid' ? 'plaintext' : normalizedLang
 
-      const highlighter = await getHighlighter(lang, themes)
+      const highlighter = await getHighlighter(lang)
 
       const htmls = await Promise.all(
         themes.map(async (theme) => {
@@ -292,33 +276,6 @@ export function CodeBlock({
   )
 }
 
-const cache = <T extends (...args: any[]) => any>(fn: T) => {
-  const cache = new Map<string, any>()
-  return async (...args: Parameters<T>) => {
-    const key = JSON.stringify(args)
-    if (cache.has(key)) {
-      return cache.get(key)
-    }
-    const value = await fn(...args)
-    cache.set(key, value)
-    return value
-  }
-}
-
-// Core languages to bundle (most commonly used in TanStack docs)
-const CORE_LANGS = [
-  'typescript',
-  'javascript',
-  'tsx',
-  'jsx',
-  'bash',
-  'json',
-  'html',
-  'css',
-  'markdown',
-  'plaintext',
-] as const
-
 // Language aliases mapping
 const LANG_ALIASES: Record<string, string> = {
   ts: 'typescript',
@@ -332,41 +289,32 @@ const LANG_ALIASES: Record<string, string> = {
   text: 'plaintext',
 }
 
-// Lazy highlighter initialization
+// Lazy highlighter singleton
 let highlighterPromise: Promise<HighlighterGeneric<any, any>> | null = null
 
-async function getShikiHighlighter() {
+async function getHighlighter(language: string) {
   if (!highlighterPromise) {
     highlighterPromise = createHighlighter({
       themes: ['github-light', 'tokyo-night'],
-      langs: CORE_LANGS as unknown as string[],
+      langs: ['typescript', 'javascript', 'tsx', 'jsx', 'bash', 'json', 'html', 'css', 'markdown', 'plaintext'],
     })
   }
-  return highlighterPromise
-}
-
-const getHighlighter = cache(async (language: string, _themes: string[]) => {
-  const highlighter = await getShikiHighlighter()
 
-  // Normalize language name
+  const highlighter = await highlighterPromise
   const normalizedLang = LANG_ALIASES[language] || language
   const langToLoad = normalizedLang === 'mermaid' ? 'plaintext' : normalizedLang
 
-  const loadedLanguages = highlighter.getLoadedLanguages()
-
-  // Only load language if not already loaded
-  if (!loadedLanguages.includes(langToLoad as any)) {
+  // Load language if not already loaded
+  if (!highlighter.getLoadedLanguages().includes(langToLoad as any)) {
     try {
-      // Load language using shiki's built-in loader (works with bundle/web)
       await highlighter.loadLanguage(langToLoad as any)
     } catch {
-      // Fallback to plaintext if language not found
       console.warn(`Shiki: Language "${langToLoad}" not found, using plaintext`)
     }
   }
 
   return highlighter
-})
+}
 
 const options: HTMLReactParserOptions = {
   replace: (domNode) => {

src/components/Navbar.tsx

@@ -448,7 +448,7 @@ export function Navbar({ children }: { children: React.ReactNode }) {
             label: (
               <>
                 <span>Feed</span>
-                <span className="px-1.5 py-0.5 text-[.6rem] font-black bg-gradient-to-r from-be-400 to-be-600 text-white rounded-md uppercase">
+                <span className="px-1.5 py-0.5 text-[.6rem] font-black bg-gradient-to-r from-blue-400 to-blue-600 text-white rounded-md uppercase">
                   Beta
                 </span>
               </>

src/components/NetlifyImage.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react'
+import { getNetlifyImageUrl } from '~/utils/netlifyImage'
 
 type NetlifyImageProps = Omit<
   React.ImgHTMLAttributes<HTMLImageElement>,
@@ -8,56 +9,26 @@ type NetlifyImageProps = Omit<
   width?: number
   height?: number
   quality?: number
-  format?: 'avif' | 'webp' | 'jpg' | 'png' | 'gif'
-  fit?: 'contain' | 'cover' | 'fill'
-  position?: 'top' | 'bottom' | 'left' | 'right' | 'center'
 }
 
 /**
  * Optimized image component using Netlify Image CDN.
- * Automatically transforms images on-demand with:
- * - Format conversion (auto webp/avif based on browser support)
- * - Resizing to specified dimensions
- * - Quality optimization
- * - Edge caching
- *
  * @see https://docs.netlify.com/build/image-cdn/overview/
  */
 export function NetlifyImage({
   src,
   width,
   height,
-  quality = 75,
-  format,
-  fit,
-  position,
+  quality,
   alt = '',
   loading = 'lazy',
   decoding = 'async',
   ...props
 }: NetlifyImageProps) {
-  const optimizedSrc = React.useMemo(() => {
-    // Skip optimization for external URLs, data URIs, or SVGs
-    if (
-      src.startsWith('http') ||
-      src.startsWith('data:') ||
-      src.endsWith('.svg')
-    ) {
-      return src
-    }
-
-    const params = new URLSearchParams()
-    params.set('url', src)
-
-    if (width) params.set('w', String(width))
-    if (height) params.set('h', String(height))
-    if (quality !== 75) params.set('q', String(quality))
-    if (format) params.set('fm', format)
-    if (fit) params.set('fit', fit)
-    if (position) params.set('position', position)
-
-    return `/.netlify/images?${params.toString()}`
-  }, [src, width, height, quality, format, fit, position])
+  const optimizedSrc = React.useMemo(
+    () => getNetlifyImageUrl(src, { width, height, quality }),
+    [src, width, height, quality],
+  )
 
   return (
     <img

src/components/SimpleMarkdown.tsx

@@ -8,6 +8,7 @@ import parse, {
   HTMLReactParserOptions,
 } from 'html-react-parser'
 import { renderMarkdown } from '~/utils/markdown'
+import { getNetlifyImageUrl } from '~/utils/netlifyImage'
 
 /**
  * Lightweight markdown renderer for simple content like excerpts.
@@ -37,27 +38,16 @@ const markdownComponents: Record<string, React.FC<any>> = {
       </pre>
     )
   },
-  img: ({ children, alt, src, ...props }: HTMLProps<HTMLImageElement>) => {
-    // Use Netlify Image CDN for local images
-    const optimizedSrc =
-      src &&
-      !src.startsWith('http') &&
-      !src.startsWith('data:') &&
-      !src.endsWith('.svg')
-        ? `/.netlify/images?url=${encodeURIComponent(src)}&w=800&q=80`
-        : src
-
-    return (
-      <img
-        {...props}
-        src={optimizedSrc}
-        alt={alt ?? ''}
-        className={`max-w-full h-auto rounded-lg shadow-md ${props.className ?? ''}`}
-        loading="lazy"
-        decoding="async"
-      />
-    )
-  },
+  img: ({ alt, src, className, children: _, ...props }: HTMLProps<HTMLImageElement>) => (
+    <img
+      {...props}
+      src={src ? getNetlifyImageUrl(src) : undefined}
+      alt={alt ?? ''}
+      className={`max-w-full h-auto rounded-lg shadow-md ${className ?? ''}`}
+      loading="lazy"
+      decoding="async"
+    />
+  ),
 }
 
 const options: HTMLReactParserOptions = {

src/hooks/useNpmDownloadCounter.ts

@@ -29,8 +29,8 @@ export function useNpmDownloadCounter(
     // Calculate how often we need to update based on rate
     // At minimum, update when count would change by 1
     const msPerIncrement = 1 / ratePerMs
-    // Clamp between 50ms and 1000ms
-    const intervalMs = Math.max(50, Math.min(1000, msPerIncrement))
+    // Clamp between 16ms (60fps) and 1000ms
+    const intervalMs = Math.max(16, Math.min(1000, msPerIncrement))
 
     const tick = () => {
       if (!elementRef.current) return

src/utils/netlifyImage.ts

@@ -0,0 +1,26 @@
+/**
+ * Build a Netlify Image CDN URL for optimized image delivery.
+ * Returns the original src in development or for external URLs, data URIs, and SVGs.
+ *
+ * @see https://docs.netlify.com/build/image-cdn/overview/
+ */
+export function getNetlifyImageUrl(
+  src: string,
+  options: { width?: number; height?: number; quality?: number } = {},
+): string {
+  // Skip in development - Netlify Image CDN only works in production
+  if (import.meta.env.DEV) {
+    return src
+  }
+
+  if (
+    src.startsWith('http') ||
+    src.startsWith('data:') ||
+    src.endsWith('.svg')
+  ) {
+    return src
+  }
+
+  const { width = 800, quality = 80 } = options
+  return `/.netlify/images?url=${encodeURIComponent(src)}&w=${width}&q=${quality}`
+}