build: enhance scripts with biome formatting and improved output

- Add automatic Biome formatting to generated files
- Implement alphabetical sorting for imports and exports
- Improve code formatting with single quotes and consistent spacing
- Enhance string formatting with proper escaping
- Add better error handling for formatting failures

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

Author: ericyangpan

scripts/generate-manifest-indexes.mjs

@@ -9,6 +9,7 @@
  * Usage: node scripts/generate-manifest-indexes.mjs
  */
 
+import { execSync } from 'node:child_process'
 import fs from 'node:fs'
 import path from 'node:path'
 import { fileURLToPath } from 'node:url'
@@ -67,31 +68,27 @@ function generateIndexFile(typeName) {
     return
   }
 
-  // Generate import statements
-  const imports = files
-    .map(file => {
-      const id = file.replace('.json', '')
-      const varName = toPascalCase(id)
-      const relativePath = `../../../manifests/${typeName}/${file}`
-      return `import ${varName} from '${relativePath}'`
-    })
-    .join('\n')
+  // Generate import statements - sort alphabetically by variable name
+  const importData = files.map(file => {
+    const id = file.replace('.json', '')
+    const varName = toPascalCase(id)
+    const relativePath = `../../../manifests/${typeName}/${file}`
+    return { varName, statement: `import ${varName} from '${relativePath}'` }
+  })
 
-  // Generate array export
-  const arrayItems = files
-    .map(file => {
-      const id = file.replace('.json', '')
-      return toPascalCase(id)
-    })
-    .join(',\n  ')
+  // Sort imports alphabetically by variable name
+  importData.sort((a, b) => a.varName.localeCompare(b.varName))
+  const imports = importData.map(item => item.statement).join('\n')
+
+  // Generate array export using sorted variable names
+  const arrayItems = importData.map(item => item.varName).join(',\n  ')
 
   // Generate type name (singular)
   const typeSingular = typeName.replace(/s$/, '')
   const TypeName = toPascalCase(typeSingular)
 
-  // Get the first file to extract type
-  const firstFile = files[0].replace('.json', '')
-  const firstVarName = toPascalCase(firstFile)
+  // Get the first file (alphabetically) to extract type
+  const firstVarName = importData[0].varName
 
   // Add appropriate type import based on manifest type
   const typeImportMap = {
@@ -105,7 +102,7 @@ function generateIndexFile(typeName) {
 
   const manifestType = typeImportMap[typeName]
   const typeImport = manifestType
-    ? `\nimport type { ${manifestType} } from '../../types/manifests'`
+    ? `import type { ${manifestType} } from '../../types/manifests'\n`
     : ''
 
   const content = `/**
@@ -114,8 +111,8 @@ function generateIndexFile(typeName) {
  * Do not edit manually - run the script to regenerate
  */
 
-${imports}${typeImport}
-
+${imports}
+${typeImport}
 export const ${typeName}Data = [
   ${arrayItems},
 ]${manifestType ? ` as unknown as ${manifestType}[]` : ''}
@@ -134,18 +131,33 @@ export default ${typeName}Data
  * Generate main index.ts file that exports all manifests
  */
 function generateMainIndex() {
-  const exports = MANIFEST_TYPES.map(typeName => {
-    return `export { ${typeName}Data } from './${typeName}'
-export type { ${toPascalCase(typeName.replace(/s$/, ''))} } from './${typeName}'`
-  }).join('\n')
+  // Generate all export statements
+  const exportStatements = []
+  for (const typeName of MANIFEST_TYPES) {
+    const typeSingular = toPascalCase(typeName.replace(/s$/, ''))
+    exportStatements.push({
+      type: `export type { ${typeSingular} } from './${typeName}'`,
+      data: `export { ${typeName}Data } from './${typeName}'`,
+    })
+  }
+
+  // Sort exports alphabetically by type name and maintain type-before-data order
+  const sortedExports = exportStatements
+    .sort((a, b) => {
+      const typeA = a.type.match(/\{ (\w+) \}/)[1]
+      const typeB = b.type.match(/\{ (\w+) \}/)[1]
+      return typeA.localeCompare(typeB)
+    })
+    .flatMap(item => [item.type, item.data])
+    .join('\n')
 
   const content = `/**
  * Auto-generated main manifest index
  * Generated by scripts/generate-manifest-indexes.mjs
  * Do not edit manually - run the script to regenerate
  */
 
-${exports}
+${sortedExports}
 `
 
   const outputPath = path.join(OUTPUT_DIR, 'index.ts')
@@ -231,6 +243,18 @@ function main() {
   console.log(`\n${'='.repeat(60)}`)
   console.log('✅ All index files generated successfully!')
   console.log('='.repeat(60))
+
+  // Run biome formatting on generated files
+  console.log(`\n🎨 Formatting generated files with Biome...`)
+  try {
+    execSync(`npx biome format --write ${OUTPUT_DIR}`, {
+      cwd: path.join(__dirname, '..'),
+      stdio: 'inherit',
+    })
+    console.log(`✅ Formatting complete`)
+  } catch (error) {
+    console.error(`⚠️  Biome formatting failed:`, error.message)
+  }
 }
 
 // Run the script

scripts/generate-metadata.mjs

@@ -5,6 +5,7 @@
  * This eliminates runtime fs calls, making it compatible with Cloudflare Edge
  */
 
+import { execSync } from 'node:child_process'
 import fs from 'node:fs'
 import path from 'node:path'
 import { fileURLToPath } from 'node:url'
@@ -247,10 +248,14 @@ function generateArticleComponentsCode(articles) {
   for (const locale of locales) {
     const localeArticles = articles[locale]
     const componentEntries = localeArticles
-      .map(
-        article =>
-          `    '${article.slug}': () => import('@content/articles/${locale}/${article.slug}.mdx'),`
-      )
+      .map(article => {
+        const importLine = `    '${article.slug}': () => import('@content/articles/${locale}/${article.slug}.mdx'),`
+        // Only split if line is very long (>100 chars)
+        if (importLine.length > 100) {
+          return `    '${article.slug}': () =>\n      import('@content/articles/${locale}/${article.slug}.mdx'),`
+        }
+        return importLine
+      })
       .join('\n')
 
     if (componentEntries) {
@@ -260,7 +265,10 @@ function generateArticleComponentsCode(articles) {
     }
   }
 
-  return `const articleComponents: Record<string, Record<string, () => Promise<{ default: React.ComponentType }>>> = {\n${componentLines.join('\n')}\n}`
+  return `const articleComponents: Record<
+  string,
+  Record<string, () => Promise<{ default: React.ComponentType }>>
+> = {\n${componentLines.join('\n')}\n}`
 }
 
 // Generate component imports for docs
@@ -271,7 +279,11 @@ function generateDocComponentsCode(docs) {
   for (const locale of locales) {
     const localeDocs = docs[locale]
     const componentEntries = localeDocs
-      .map(doc => `    '${doc.slug}': () => import('@content/docs/${locale}/${doc.slug}.mdx'),`)
+      .map(doc => {
+        // Use unquoted keys for simple identifiers
+        const key = /^[a-zA-Z_][a-zA-Z0-9_]*$/.test(doc.slug) ? doc.slug : `'${doc.slug}'`
+        return `    ${key}: () => import('@content/docs/${locale}/${doc.slug}.mdx'),`
+      })
       .join('\n')
 
     if (componentEntries) {
@@ -281,7 +293,10 @@ function generateDocComponentsCode(docs) {
     }
   }
 
-  return `const docComponents: Record<string, Record<string, () => Promise<{ default: React.ComponentType }>>> = {\n${componentLines.join('\n')}\n}`
+  return `const docComponents: Record<
+  string,
+  Record<string, () => Promise<{ default: React.ComponentType }>>
+> = {\n${componentLines.join('\n')}\n}`
 }
 
 // Generate component import for manifesto (single index.mdx per locale)
@@ -323,22 +338,66 @@ function main() {
 
   const header = `// This file is auto-generated by scripts/generate-metadata.mjs\n// DO NOT EDIT MANUALLY`
 
+  // Custom JSON stringify that uses single quotes and unquoted keys
+  function formatObject(obj, indent = 0) {
+    const spaces = '  '.repeat(indent)
+    const innerSpaces = '  '.repeat(indent + 1)
+
+    if (Array.isArray(obj)) {
+      if (obj.length === 0) return '[]'
+      const items = obj.map(item => `${innerSpaces}${formatObject(item, indent + 1)}`).join(',\n')
+      return `[\n${items},\n${spaces}]`
+    }
+
+    if (obj !== null && typeof obj === 'object') {
+      const keys = Object.keys(obj)
+      if (keys.length === 0) return '{}'
+      const items = keys
+        .map(key => {
+          const quotedKey =
+            /^[a-zA-Z_][a-zA-Z0-9_]*$/.test(key) && !key.includes('-') ? key : `'${key}'`
+          const value = formatObject(obj[key], indent + 1)
+          // Check if the line would be too long (>80 chars) and split if needed
+          const fullLine = `${innerSpaces}${quotedKey}: ${value}`
+          if (fullLine.length > 80 && typeof obj[key] === 'string') {
+            return `${innerSpaces}${quotedKey}:\n${innerSpaces}  ${value}`
+          }
+          return fullLine
+        })
+        .join(',\n')
+      return `{\n${items},\n${spaces}}`
+    }
+
+    if (typeof obj === 'string') {
+      // Escape backslashes first, then escape single quotes, then escape newlines
+      const escaped = obj
+        .replace(/\\/g, '\\\\')
+        .replace(/'/g, "\\'")
+        .replace(/\n/g, '\\n')
+        .replace(/\r/g, '\\r')
+        .replace(/\t/g, '\\t')
+      return `'${escaped}'`
+    }
+
+    return JSON.stringify(obj)
+  }
+
   const content = `${header}
 
-import type { ArticleMetadata } from './articles';
-import type { DocSection } from './docs';
-import type { CollectionSection } from '../collections';
-import type { FaqItem } from '../faq';
+import type { CollectionSection } from '../collections'
+import type { FaqItem } from '../faq'
+import type { ArticleMetadata } from './articles'
+import type { DocSection } from './docs'
 
-export const articlesMetadata: Record<string, ArticleMetadata[]> = ${JSON.stringify(articles, null, 2)};
+export const articlesMetadata: Record<string, ArticleMetadata[]> = ${formatObject(articles)}
 
-export const docsMetadata: Record<string, DocSection[]> = ${JSON.stringify(docs, null, 2)};
+export const docsMetadata: Record<string, DocSection[]> = ${formatObject(docs)}
 
-export const collectionsMetadata: Record<string, CollectionSection> = ${JSON.stringify(collections, null, 2)};
+export const collectionsMetadata: Record<string, CollectionSection> = ${formatObject(collections)}
 
-export const faqMetadata: Record<string, FaqItem[]> = ${JSON.stringify(faqs, null, 2)};
+export const faqMetadata: Record<string, FaqItem[]> = ${formatObject(faqs)}
 
-export const stackCounts: Record<string, number> = ${JSON.stringify(stackCounts, null, 2)};
+export const stackCounts: Record<string, number> = ${formatObject(stackCounts)}
 `
 
   fs.writeFileSync(outputFile, content, 'utf8')
@@ -348,7 +407,7 @@ export const stackCounts: Record<string, number> = ${JSON.stringify(stackCounts,
   const articlesComponentsCode = generateArticleComponentsCode(articles)
   const articlesGeneratedContent = `${header}
 
-import { articlesMetadata } from './metadata';
+import { articlesMetadata } from './metadata'
 
 export type ArticleMetadata = {
   title: string
@@ -375,7 +434,10 @@ export function getArticleBySlug(slug: string, locale: string = 'en'): ArticleMe
 ${articlesComponentsCode}
 
 // Get a specific article component for a given locale and slug
-export async function getArticleComponent(locale: string = 'en', slug: string): Promise<React.ComponentType | null> {
+export async function getArticleComponent(
+  locale: string = 'en',
+  slug: string
+): Promise<React.ComponentType | null> {
   const loaders = articleComponents[locale] || articleComponents.en
   const loader = loaders?.[slug]
   if (!loader) return null
@@ -391,7 +453,7 @@ export async function getArticleComponent(locale: string = 'en', slug: string):
   const docsComponentsCode = generateDocComponentsCode(docs)
   const docsGeneratedContent = `${header}
 
-import { docsMetadata } from './metadata';
+import { docsMetadata } from './metadata'
 
 export type DocSection = {
   id: string
@@ -417,7 +479,10 @@ export function getDocBySlug(slug: string, locale: string = 'en'): DocSection |
 ${docsComponentsCode}
 
 // Get a specific doc component for a given locale and slug
-export async function getDocComponent(locale: string = 'en', slug: string): Promise<React.ComponentType | null> {
+export async function getDocComponent(
+  locale: string = 'en',
+  slug: string
+): Promise<React.ComponentType | null> {
   const loaders = docComponents[locale] || docComponents.en
   const loader = loaders?.[slug]
   if (!loader) return null
@@ -441,6 +506,9 @@ export async function getManifestoComponent(locale: string = 'en'): Promise<Reac
 ${manifestoComponentsCode}
 
   const loader = components[locale] || components.en
+  if (!loader) {
+    throw new Error(\`No manifesto loader found for locale: \${locale}\`)
+  }
   const mdxModule = await loader()
   return mdxModule.default
 }
@@ -478,6 +546,18 @@ ${manifestoComponentsCode}
   console.log(`   - ${path.relative(rootDir, articlesGeneratedFile)}`)
   console.log(`   - ${path.relative(rootDir, docsGeneratedFile)}`)
   console.log(`   - ${path.relative(rootDir, manifestoGeneratedFile)}`)
+
+  // Run biome formatting on generated files
+  console.log(`\n🎨 Formatting generated files with Biome...`)
+  try {
+    execSync(`npx biome format --write ${outputDir}`, {
+      cwd: rootDir,
+      stdio: 'inherit',
+    })
+    console.log(`✅ Formatting complete`)
+  } catch (error) {
+    console.error(`⚠️  Biome formatting failed:`, error.message)
+  }
 }
 
 main()