Merge pull request #767 from zackproser/build-optimization

Build optimization

Author: zackproser

next.config.mjs

@@ -18,7 +18,7 @@ const nextConfig = {
       "placehold.co",
       "avatars.githubusercontent.com"
     ],
-    formats: ['image/avif'], // 40% smaller than PNG
+    formats: ['image/webp'], 
   },
   transpilePackages: [
     "react-tweet",
@@ -124,11 +124,6 @@ const nextConfig = {
         destination: '/vectordatabases',
         permanent: true
       },
-      {
-        source: '/comparisons',
-        destination: '/vectordatabases',
-        permanent: false
-      },
       {
         source: '/comparisons/:db1(pinecone|milvus|chroma|weaviate|faiss|elasticsearch|qdrant|vald|lancedb|marqo|singlestoredb|pgvector|redis|vespa|deep-lake|docarray)-vs-:db2(pinecone|milvus|chroma|weaviate|faiss|elasticsearch|qdrant|vald|lancedb|marqo|singlestoredb|pgvector|redis|vespa|deep-lake|docarray)',
         destination: '/vectordatabases',

scripts/create-ai-assisted-dev-tools-comparison-pages.js

@@ -33,6 +33,8 @@ export const metadata = createMetadata({
   slug: "${slug}"
 })
 
+export const revalidate = 3600;
+
 export default function Page() {
   const tool1 = ${JSON.stringify(tool1)}
   const tool2 = ${JSON.stringify(tool2)}

scripts/create-vector-db-comparison-posts.js

@@ -53,6 +53,8 @@ export const metadata = {
   slug: "${slug}"
 }
 
+export const revalidate = 3600;
+
 export default (props) => <ArticleLayout metadata={metadata} {...props} />
 
 <Image src={vectorDatabasesCompared} alt="vector databases compared" />

src/app/demos/tokenize/TokenizeDemoLoader.tsx

@@ -0,0 +1,12 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+
+const TokenizationDemoClient = dynamic(() => import('./TokenizationDemoClient'), {
+  ssr: false,
+  loading: () => <div className="text-center p-8">Loading Interactive Demo...</div>,
+});
+
+export default function TokenizeDemoLoader() {
+  return <TokenizationDemoClient />;
+} 

src/app/demos/tokenize/page.tsx

@@ -2,7 +2,7 @@ import { Metadata } from 'next'
 import { Suspense } from 'react'
 import { createMetadata } from '@/utils/createMetadata'
 import { Container } from '@/components/Container'
-import TokenizationDemoClient from './TokenizationDemoClient'
+import TokenizeDemoLoader from './TokenizeDemoLoader'
 
 export const metadata: Metadata = createMetadata({
   title: "Interactive tokenization demo for developers",
@@ -24,7 +24,7 @@ export default function TokenizationDemoPage() {
           </p>
         </header>
         <Suspense fallback={<div>Loading...</div>}>
-          <TokenizationDemoClient />
+          <TokenizeDemoLoader />
         </Suspense>
       </div>
     </Container>

src/components/ContentCard.jsx

@@ -117,9 +117,20 @@ export function ContentCard({ article }) {
   // Simple check for external links
   const isExternalLink = slug?.startsWith('http://') || slug?.startsWith('https://');
 
-  // For external links, use the slug directly
-  // For internal links, use the slug as is - the parent component should provide the full path
-  const href = isExternalLink ? slug : slug || '#';
+  let calculatedHref = '#';
+  if (isExternalLink) {
+    calculatedHref = slug;
+  } else if (slug) {
+    if (type === 'comparison') {
+      // Ensure no double slashes if slug might accidentally have one (it shouldn't from our generator)
+      calculatedHref = `/comparisons/${slug.startsWith('/') ? slug.substring(1) : slug}`;
+    } else {
+      // For other internal links, assume slug is the intended href.
+      // If it's not a full path (e.g. /blog/my-post) Link component will resolve it relatively.
+      // If it is a full path (e.g. /blog/my-post), Link will use it as is.
+      calculatedHref = slug;
+    }
+  }
 
   // Format the date
   const formattedDate = date ? new Date(date).toLocaleDateString('en-US', {
@@ -167,7 +178,7 @@ export function ContentCard({ article }) {
         : "shadow-lg hover:shadow-xl border-gray-200 dark:border-gray-700"
     )}>
       {isExternalLink ? (
-        <a href={href} target="_blank" rel="noopener noreferrer" className="group w-full">
+        <a href={calculatedHref} target="_blank" rel="noopener noreferrer" className="group w-full">
           <CardContent 
             imageSource={imageSource} 
             title={title} 
@@ -182,7 +193,7 @@ export function ContentCard({ article }) {
           />
         </a>
       ) : (
-        <Link href={href} className="group w-full">
+        <Link href={calculatedHref} className="group w-full">
           <CardContent 
             imageSource={imageSource} 
             title={title} 

src/content/blog/openai-codex-review/page.mdx

@@ -78,6 +78,8 @@ By the time I start work, I tend to have a laundry list of items I want to compl
 As I wrote about in <Link href="/blog/walking-and-talking-with-ai">Walking and talking with AI in the woods</Link>, ideally I'd like to start my morning in an office, launch a bunch of tasks,
 get some planning out of the way, and then step out for a long walk in nature.
 
+Codex is usable from my phone even today:
+
 <Image src={phone} alt="Codex is even usable on mobile" />
 
 I think, ultimately, once some of the sharp edges are polished, Codex will support me and others in performing our work effectively away from our desks.
@@ -125,7 +127,7 @@ than 12 programming languages.
 
 Right now, it feels like I can spin up multiple tasks in parallel with a 40-60% chance that I'll be content enough with the result to hit the Open PR button instead of requesting changes.
 
-So far Codex has been perfect for firing off a bunch of maintenance-level updates: minor copy tweaks, stylistic changes, and other small chores. I've tried asking it to tackle larger refactors and the experience quickly becomes cumbersome. The current workflow wants to open a fresh pull request for every iteration, which means pushing follow-up commits to an existing branch is awkward at best.
+So far Codex has been perfect for firing off a bunch of maintenance-level updates: minor copy tweaks, style changes and other small chores. I've tried asking it to tackle larger refactors and the experience quickly becomes cumbersome. The current workflow wants to open a fresh pull request for every iteration, which means pushing follow-up commits to an existing branch is awkward at best.
 
 ### Multi-turn updates on a branch 
 
@@ -143,7 +145,7 @@ resolving annoying dependency issues by installing a more recent version of a pa
 
 Codex can't reach the internet right now, but it does have your repo freshly cloned and made available to its execution environment. 
 
-This means it can't `pnpm add @tar-fs@latest` even if you ask it to. So, for now, I'll still pulling down these branches and fixing them locally or 
+This means it can't `pnpm add @tar-fs@latest` even if you ask it to. So, for now, I'll still be pulling down these branches and fixing them locally or 
 commenting `@dependabot rebase` on PRs that support it.
 
 ## Did it unlock insane productivity gains for me? 

src/lib/comparisons.ts

@@ -13,7 +13,7 @@ export async function importComparison(
   return {
     ...metadata,
     type: 'blog',
-    slug: path.basename(comparisonFilename, '.mdx')
+    slug: path.dirname(comparisonFilename)
   }
 }