retypeset-odyssey 0.1.0

package/scripts/apply-lqip.ts

@@ -0,0 +1,276 @@
+/**
+ * Generate and apply LQIP (Low-Quality Image Placeholders) to images
+ * Source: https://frzi.medium.com/lqip-css-73dc6dda2529
+ * Usage: pnpm apply-lqip
+ */
+
+import type { HTMLElement } from 'node-html-parser'
+import fs from 'node:fs/promises'
+import path from 'node:path'
+import process from 'node:process'
+import glob from 'fast-glob'
+import { parse } from 'node-html-parser'
+import sharp from 'sharp'
+
+const distDir = 'dist'
+const assetsDir = 'src/assets'
+const lqipMapPath = 'src/assets/lqip-map.json'
+
+interface LqipMap {
+  [path: string]: string
+}
+
+interface ImageStats {
+  total: number
+  cached: number
+  new: number
+}
+
+interface FileMapping {
+  filePath: string
+  webUrl: string
+}
+
+// Pack RGB color into 11 bits (4 bits R, 4 bits G, 3 bits B)
+function packColor11Bit(r: number, g: number, b: number): number {
+  const pr = Math.round((r / 255) * 15)
+  const pg = Math.round((g / 255) * 15)
+  const pb = Math.round((b / 255) * 7)
+  return (pr << 7) | (pg << 3) | pb
+}
+
+// Pack RGB color into 10 bits (3 bits R, 4 bits G, 3 bits B)
+function packColor10Bit(r: number, g: number, b: number): number {
+  const pr = Math.round((r / 255) * 7)
+  const pg = Math.round((g / 255) * 15)
+  const pb = Math.round((b / 255) * 7)
+  return (pr << 7) | (pg << 3) | pb
+}
+
+async function generateLqipValue(imagePath: string): Promise<string | null> {
+  try {
+    const instance = sharp(imagePath)
+
+    // Resize to 3x3 to get key colors (Top-Left, Center, Bottom-Right)
+    const buffer = await instance
+      .resize(3, 3, { fit: 'fill' })
+      .removeAlpha() // Force RGB output
+      .raw()
+      .toBuffer()
+
+    // Extract colors at specific positions
+    // 0: Top-Left, 4: Center, 8: Bottom-Right
+    // Each pixel is 3 bytes (RGB)
+    const getPixel = (index: number) => ({
+      r: buffer[index * 3],
+      g: buffer[index * 3 + 1],
+      b: buffer[index * 3 + 2],
+    })
+
+    const c0 = getPixel(0)
+    const c1 = getPixel(4)
+    const c2 = getPixel(8)
+
+    // Pack colors: [Color0 11b] [Color1 11b] [Color2 10b]
+    const pc0 = packColor11Bit(c0.r, c0.g, c0.b)
+    const pc1 = packColor11Bit(c1.r, c1.g, c1.b)
+    const pc2 = packColor10Bit(c2.r, c2.g, c2.b)
+
+    // Combine into a 32-bit integer
+    const combined = (BigInt(pc0) << 21n) | (BigInt(pc1) << 10n) | BigInt(pc2)
+
+    // Convert to 8-digit hex string
+    return combined.toString(16).padStart(8, '0')
+  }
+  catch (error) {
+    console.error(`⚠️ Failed to process image: ${imagePath}`, error)
+    return null
+  }
+}
+
+/**
+ * LQIP processing functions
+ * Image analysis, mapping generation, and HTML application
+ */
+async function loadExistingLqipMap(): Promise<LqipMap> {
+  try {
+    const data = await fs.readFile(lqipMapPath, 'utf-8')
+    return JSON.parse(data) as LqipMap
+  }
+  catch {
+    return {} as LqipMap
+  }
+}
+
+async function scanAndAnalyzeImages(): Promise<{ fileMappings: FileMapping[], imageStats: ImageStats, existingMap: LqipMap }> {
+  await fs.mkdir(assetsDir, { recursive: true })
+
+  const webpFiles = await glob('_astro/**/*.webp', {
+    cwd: distDir,
+    absolute: true,
+  })
+
+  const existingMap = await loadExistingLqipMap()
+
+  const fileMappings = webpFiles.map(filePath => ({
+    filePath,
+    webUrl: `/${path.relative(distDir, filePath).replace(/\\/g, '/')}`,
+  }))
+
+  const { cached, new: newCount } = fileMappings.reduce((acc, { webUrl }) => {
+    existingMap[webUrl] !== undefined ? acc.cached++ : acc.new++
+    return acc
+  }, { cached: 0, new: 0 })
+
+  return {
+    fileMappings,
+    imageStats: { total: fileMappings.length, cached, new: newCount },
+    existingMap,
+  }
+}
+
+function cleanLqipMap(existingMap: LqipMap, fileMappings: FileMapping[]): LqipMap {
+  return fileMappings.reduce((acc, { webUrl }) => {
+    if (existingMap[webUrl] !== undefined) {
+      acc[webUrl] = existingMap[webUrl]
+    }
+    return acc
+  }, {} as LqipMap)
+}
+
+async function processNewImages(fileMappings: FileMapping[], stats: ImageStats, cleanedMap: LqipMap): Promise<LqipMap> {
+  const newMap = { ...cleanedMap }
+  let processed = 0
+  const concurrencyLimit = 10
+
+  const processFile = async ({ filePath, webUrl }: FileMapping) => {
+    const lqipValue = await generateLqipValue(filePath)
+    if (lqipValue !== null) {
+      newMap[webUrl] = lqipValue
+    }
+    processed++
+    if (processed % 10 === 0 || processed === stats.new) {
+      console.log(`🔄 Processing: ${processed}/${stats.new}`)
+    }
+  }
+
+  const toProcess = fileMappings.filter(m => cleanedMap[m.webUrl] === undefined)
+
+  for (let i = 0; i < toProcess.length; i += concurrencyLimit) {
+    const batch = toProcess.slice(i, i + concurrencyLimit)
+    await Promise.all(batch.map(processFile))
+  }
+
+  console.log(`✅ Generated LQIP styles for ${stats.new} new images`)
+
+  const isNewFile = Object.keys(cleanedMap).length === 0
+  await fs.writeFile(lqipMapPath, `${JSON.stringify(newMap, null, 2)}\n`)
+  console.log(`📁 LQIP mapping ${isNewFile ? 'saved to' : 'updated in'} ${lqipMapPath}`)
+
+  return newMap
+}
+
+function processImage(img: HTMLElement, lqipMap: LqipMap): boolean {
+  const src = img.getAttribute('src')
+  if (!src) {
+    return false
+  }
+
+  const lqipValue = lqipMap[src]
+  if (lqipValue === undefined) {
+    return false
+  }
+
+  const currentStyle = img.getAttribute('style') ?? ''
+  if (currentStyle.includes('--lqip:')) {
+    return false
+  }
+
+  const newStyle = currentStyle
+    ? `${currentStyle}; --lqip:#${lqipValue}`
+    : `--lqip:#${lqipValue}`
+
+  img.setAttribute('style', newStyle)
+  return true
+}
+
+async function applyLqipToHtml(lqipMap: LqipMap): Promise<number> {
+  const htmlFiles = await glob('**/*.html', { cwd: distDir })
+  let totalApplied = 0
+
+  for (const htmlFile of htmlFiles) {
+    try {
+      const filePath = `${distDir}/${htmlFile}`
+      const root = parse(await fs.readFile(filePath, 'utf-8'))
+      const images = root.querySelectorAll('img')
+
+      if (images.length === 0) {
+        continue
+      }
+
+      let hasChanges = false
+      for (const img of images) {
+        const wasUpdated = processImage(img, lqipMap)
+        if (wasUpdated) {
+          totalApplied++
+          hasChanges = true
+        }
+      }
+
+      if (hasChanges) {
+        await fs.writeFile(filePath, root.toString())
+      }
+    }
+    catch (error) {
+      console.warn(`⚠️ Failed to process ${htmlFile}:`, error)
+      continue
+    }
+  }
+
+  return totalApplied
+}
+
+/**
+ * Main workflow
+ * Coordinates LQIP generation and application process
+ */
+async function main() {
+  console.log('🔍 Starting LQIP processing...')
+
+  const { fileMappings, imageStats, existingMap } = await scanAndAnalyzeImages()
+
+  if (imageStats.total === 0) {
+    console.log('✨ No images found to process')
+    return
+  }
+
+  console.log(`📦 Found ${imageStats.total} images (${imageStats.cached} cached, ${imageStats.new} new)`)
+
+  const cleanedMap = cleanLqipMap(existingMap, fileMappings)
+
+  let lqipMap: LqipMap
+  if (imageStats.new > 0) {
+    lqipMap = await processNewImages(fileMappings, imageStats, cleanedMap)
+  }
+  else {
+    lqipMap = cleanedMap
+
+    if (Object.keys(existingMap).length > Object.keys(cleanedMap).length) {
+      await fs.writeFile(lqipMapPath, `${JSON.stringify(cleanedMap, null, 2)}\n`)
+    }
+  }
+
+  const appliedCount = await applyLqipToHtml(lqipMap)
+
+  if (appliedCount === 0) {
+    console.log('✨ All images already have LQIP styles')
+    return
+  }
+
+  console.log(`✨ Successfully applied LQIP styles to ${appliedCount} images`)
+}
+
+main().catch((error) => {
+  console.error('❌ LQIP processing failed:', error)
+  process.exit(1)
+})

package/scripts/format-posts.ts

@@ -0,0 +1,105 @@
+/**
+ * Format posts by fixing spaces and punctuations between CJK
+ * Project: https://github.com/huacnlee/autocorrect
+ * Usage: pnpm format-posts
+ */
+
+import { readFile, writeFile } from 'node:fs/promises'
+import process from 'node:process'
+import { format } from 'autocorrect-node'
+import fg from 'fast-glob'
+
+interface MarkdownContent {
+  frontmatter: string
+  body: string
+  hasFrontmatter: boolean
+}
+
+// Split Markdown file into frontmatter and content
+function splitContent(content: string): MarkdownContent {
+  const match = content.match(/^---\r?\n([\s\S]+?)\r?\n---\r?\n([\s\S]*)$/m)
+  if (!match) {
+    return {
+      frontmatter: '',
+      body: content,
+      hasFrontmatter: false,
+    }
+  }
+
+  return {
+    frontmatter: match[1],
+    body: match[2],
+    hasFrontmatter: true,
+  }
+}
+
+// Get all Markdown files to process
+async function getMarkdownFiles(): Promise<string[]> {
+  console.log('🔍 Scanning Markdown files...')
+  const files = await fg(['content/**/*.{md,mdx}'])
+  console.log(`📦 Found ${files.length} Markdown files`)
+  return files
+}
+
+// Format a single Markdown file
+async function formatSingleFile(filePath: string): Promise<boolean> {
+  const content = await readFile(filePath, 'utf8')
+  const { frontmatter, body, hasFrontmatter } = splitContent(content)
+
+  const formattedBody = format(body)
+  const newContent = hasFrontmatter
+    ? `---\n${frontmatter}\n---\n${formattedBody}`
+    : formattedBody
+
+  // Skip if content hasn't changed
+  if (content === newContent) {
+    return false
+  }
+
+  // Write updated content to file
+  await writeFile(filePath, newContent, 'utf8')
+  console.log(`✅ ${filePath}`)
+  return true
+}
+
+// Report formatting results
+function reportResults(changedCount: number, errorCount: number) {
+  if (changedCount === 0) {
+    console.log('✅ Check complete, no files needed formatting changes')
+  }
+  else {
+    console.log(`✨ Formatted ${changedCount} files successfully`)
+  }
+
+  if (errorCount > 0) {
+    console.log(`⚠️ ${errorCount} files failed to format`)
+  }
+}
+
+// Main function to format all Markdown files
+async function formatMarkdownFiles(): Promise<void> {
+  const files = await getMarkdownFiles()
+
+  let changedCount = 0
+  let errorCount = 0
+
+  for (const file of files) {
+    try {
+      const wasChanged = await formatSingleFile(file)
+      if (wasChanged) {
+        changedCount++
+      }
+    }
+    catch (error) {
+      console.error(`❌ ${file}:`, error)
+      errorCount++
+    }
+  }
+
+  reportResults(changedCount, errorCount)
+}
+
+formatMarkdownFiles().catch((error) => {
+  console.error('❌ Execution failed:', error)
+  process.exit(1)
+})

package/scripts/migration/README.md

@@ -0,0 +1,52 @@
+# Migration Scripts
+
+**ONE-TIME USE ONLY** - These scripts are for the initial Hexo → Astro migration and should NOT be part of CI/CD pipelines.
+
+## Scripts
+
+### migrate-hexo.ts
+
+Copies and converts blog posts from the Hexo Blog-src repository to Astro format.
+
+**What it does:**
+1. Reads markdown files from `Blog-src/source/_posts/`
+2. Converts Hexo frontmatter to Astro-compatible format
+3. Preserves abbrlinks for URL compatibility
+4. Copies to `content/posts/`
+
+**Usage:**
+```bash
+pnpm tsx scripts/migration/migrate-hexo.ts
+```
+
+### validate-abbrlinks.ts
+
+Validates that all abbrlinks are preserved correctly after migration.
+
+**What it does:**
+1. Reads all posts in `content/posts/`
+2. Extracts abbrlink from frontmatter
+3. Compares against original Blog-src posts
+4. Reports any missing or changed abbrlinks
+
+**Usage:**
+```bash
+pnpm tsx scripts/migration/validate-abbrlinks.ts
+```
+
+## When to Run
+
+- **migrate-hexo.ts**: Once, at the start of migration project
+- **validate-abbrlinks.ts**: After migration to verify URL preservation
+
+## NOT for CI/CD
+
+These scripts read from the local `Blog-src` directory and are designed for one-time migration only. For deployment automation, see `../deployment/` and `../../.github/workflows/`.
+
+## Post-Migration
+
+After successful migration:
+1. Verify all posts render correctly
+2. Run Playwright tests: `pnpm test`
+3. Check URL format matches: `/posts/:abbrlink.html`
+4. Archive these scripts (they won't be needed again)

package/scripts/migration/migrate-hexo.ts

@@ -0,0 +1,185 @@
+/**
+ * ONE-TIME MIGRATION SCRIPT
+ *
+ * Migrates blog posts from Hexo (Blog-src) to Astro format.
+ * Run once at the start of the migration project.
+ *
+ * Usage: pnpm tsx scripts/migration/migrate-hexo.ts
+ */
+
+import fs from 'node:fs'
+import path from 'node:path'
+
+// Configuration - adjust paths as needed
+const HEXO_POSTS_DIR = '../Blog-src/source/_posts'
+const ASTRO_POSTS_DIR = './content/posts'
+
+interface HexoFrontmatter {
+  title: string
+  date: string
+  tags?: string | string[]
+  categories?: string | string[]
+  abbrlink?: string
+  mathjax?: boolean
+  copyright?: string
+}
+
+function parseHexoFrontmatter(content: string): { frontmatter: HexoFrontmatter; body: string } {
+  const match = content.match(/^---\n([\s\S]*?)\n---\n([\s\S]*)$/)
+  if (!match) {
+    throw new Error('Invalid frontmatter format')
+  }
+
+  const yamlContent = match[1]
+  const body = match[2]
+
+  // Simple YAML parsing for common fields
+  const frontmatter: HexoFrontmatter = {
+    title: '',
+    date: '',
+  }
+
+  const lines = yamlContent.split('\n')
+  let currentKey = ''
+  let inArray = false
+  let arrayValues: string[] = []
+
+  for (const line of lines) {
+    if (line.match(/^(\w+):/)) {
+      // Save previous array if exists
+      if (inArray && currentKey) {
+        (frontmatter as any)[currentKey] = arrayValues
+        arrayValues = []
+        inArray = false
+      }
+
+      const [key, ...valueParts] = line.split(':')
+      currentKey = key.trim()
+      const value = valueParts.join(':').trim()
+
+      if (value) {
+        (frontmatter as any)[currentKey] = value
+      }
+    } else if (line.match(/^\s+-\s+/)) {
+      // Array item
+      inArray = true
+      const value = line.replace(/^\s+-\s+/, '').trim()
+      arrayValues.push(value)
+    }
+  }
+
+  // Save final array if exists
+  if (inArray && currentKey) {
+    (frontmatter as any)[currentKey] = arrayValues
+  }
+
+  return { frontmatter, body }
+}
+
+function convertToAstroFrontmatter(hexo: HexoFrontmatter): string {
+  const lines: string[] = ['---']
+
+  // Required fields
+  lines.push(`title: "${hexo.title.replace(/"/g, '\\"')}"`)
+  lines.push(`date: ${hexo.date}`)
+
+  // Optional abbrlink (critical for URL preservation)
+  if (hexo.abbrlink) {
+    lines.push(`abbrlink: ${hexo.abbrlink}`)
+  }
+
+  // Tags
+  if (hexo.tags) {
+    const tags = Array.isArray(hexo.tags) ? hexo.tags : [hexo.tags]
+    lines.push('tags:')
+    tags.forEach(tag => lines.push(`  - ${tag}`))
+  }
+
+  // Categories (converted to tags in Astro/Retypeset)
+  if (hexo.categories) {
+    const categories = Array.isArray(hexo.categories) ? hexo.categories : [hexo.categories]
+    lines.push('categories:')
+    categories.forEach(cat => lines.push(`  - ${cat}`))
+  }
+
+  // Math support
+  if (hexo.mathjax) {
+    lines.push('math: true')
+  }
+
+  lines.push('---')
+  return lines.join('\n')
+}
+
+function migratePost(hexoPath: string, astroPath: string): void {
+  const content = fs.readFileSync(hexoPath, 'utf-8')
+
+  try {
+    const { frontmatter, body } = parseHexoFrontmatter(content)
+    const astroFrontmatter = convertToAstroFrontmatter(frontmatter)
+
+    // Convert Hexo excerpt marker to Astro
+    const convertedBody = body.replace(/<!-- more -->/g, '<!-- excerpt -->')
+
+    const astroContent = `${astroFrontmatter}\n${convertedBody}`
+
+    fs.writeFileSync(astroPath, astroContent)
+    console.log(`✓ Migrated: ${path.basename(hexoPath)}`)
+  } catch (error) {
+    console.error(`✗ Failed: ${path.basename(hexoPath)} - ${error}`)
+  }
+}
+
+function main(): void {
+  console.log('='.repeat(60))
+  console.log('Hexo → Astro Migration Script (ONE-TIME)')
+  console.log('='.repeat(60))
+
+  // Resolve paths relative to project root
+  const projectRoot = process.cwd()
+  const hexoDir = path.resolve(projectRoot, HEXO_POSTS_DIR)
+  const astroDir = path.resolve(projectRoot, ASTRO_POSTS_DIR)
+
+  if (!fs.existsSync(hexoDir)) {
+    console.error(`Error: Hexo posts directory not found: ${hexoDir}`)
+    console.log('Please adjust HEXO_POSTS_DIR in the script.')
+    process.exit(1)
+  }
+
+  // Create output directory if needed
+  if (!fs.existsSync(astroDir)) {
+    fs.mkdirSync(astroDir, { recursive: true })
+  }
+
+  // Get all markdown files
+  const files = fs.readdirSync(hexoDir).filter(f => f.endsWith('.md'))
+
+  console.log(`Found ${files.length} posts to migrate`)
+  console.log('')
+
+  let success = 0
+  let failed = 0
+
+  for (const file of files) {
+    const hexoPath = path.join(hexoDir, file)
+    const astroPath = path.join(astroDir, file)
+
+    try {
+      migratePost(hexoPath, astroPath)
+      success++
+    } catch {
+      failed++
+    }
+  }
+
+  console.log('')
+  console.log('='.repeat(60))
+  console.log(`Migration complete: ${success} succeeded, ${failed} failed`)
+  console.log('='.repeat(60))
+
+  if (failed > 0) {
+    process.exit(1)
+  }
+}
+
+main()