wip

scripts/migrate-visual-links.js

@@ -0,0 +1,102 @@
+const fs = require('fs');
+const path = require('path');
+const jsdom = require('jsdom');
+const { JSDOM } = jsdom;
+
+const postsDir = path.join(process.cwd(), 'reference', 'klz-cables-clone', 'posts');
+const mdxDir = path.join(process.cwd(), 'data', 'blog', 'en');
+
+const files = fs.readdirSync(postsDir);
+
+files.forEach(file => {
+  if (!file.endsWith('.html')) return;
+  
+  const slug = file.replace('.html', '');
+  const mdxPath = path.join(mdxDir, `${slug}.mdx`);
+  
+  if (!fs.existsSync(mdxPath)) {
+    console.log(`MDX file not found for ${slug}`);
+    return;
+  }
+
+  const htmlContent = fs.readFileSync(path.join(postsDir, file), 'utf8');
+  const dom = new JSDOM(htmlContent);
+  const document = dom.window.document;
+  
+  const vlpContainers = document.querySelectorAll('.vlp-link-container');
+  
+  if (vlpContainers.length === 0) return;
+
+  console.log(`Processing ${slug} with ${vlpContainers.length} visual links`);
+
+  let mdxContent = fs.readFileSync(mdxPath, 'utf8');
+  let modified = false;
+
+  vlpContainers.forEach(container => {
+    const link = container.querySelector('a.vlp-link');
+    const titleEl = container.querySelector('.vlp-link-title');
+    const summaryEl = container.querySelector('.vlp-link-summary');
+    const imgEl = container.querySelector('.vlp-link-image img');
+
+    if (!link) return;
+
+    const url = link.getAttribute('href');
+    const title = titleEl ? titleEl.textContent.trim() : '';
+    const summary = summaryEl ? summaryEl.textContent.trim() : '';
+    const image = imgEl ? imgEl.getAttribute('src') : '';
+
+    // Construct the component string
+    const component = `
+<VisualLinkPreview 
+  url="${url}"
+  title="${title.replace(/"/g, '"')}"
+  summary="${summary.replace(/"/g, '"')}"
+  image="${image}"
+/>
+`;
+
+    // Try to find the link in MDX
+    // It could be [Title](URL) or just URL or <a href="URL">...</a>
+    // We'll try to find the URL and replace the paragraph containing it if it looks like a standalone link
+    // Or just append it if we can't find it easily? No, that's risky.
+    
+    // Strategy: Look for the URL.
+    // If found in `[...](url)`, replace the whole markdown link.
+    // If found in `href="url"`, replace the anchor tag.
+    
+    const markdownLinkRegex = new RegExp(`\\[.*?\\]\\(${escapeRegExp(url)}\\)`, 'g');
+    const plainUrlRegex = new RegExp(`(?<!\\()${escapeRegExp(url)}(?!\\))`, 'g'); // URL not in parens
+
+    if (markdownLinkRegex.test(mdxContent)) {
+      mdxContent = mdxContent.replace(markdownLinkRegex, component);
+      modified = true;
+    } else if (plainUrlRegex.test(mdxContent)) {
+       // Be careful not to replace inside other attributes
+       // This is a bit loose, but might work for standalone URLs
+       // Better to check if it's a standalone line?
+       // Let's just replace it.
+       mdxContent = mdxContent.replace(plainUrlRegex, component);
+       modified = true;
+    } else {
+        console.log(`Could not find link for ${url} in ${slug}`);
+        // Maybe the URL in MDX is slightly different (e.g. trailing slash)?
+        // Or maybe it's not there at all.
+        // Let's try without trailing slash
+        const urlNoSlash = url.replace(/\/$/, '');
+        const markdownLinkRegex2 = new RegExp(`\\[.*?\\]\\(${escapeRegExp(urlNoSlash)}\\)`, 'g');
+        if (markdownLinkRegex2.test(mdxContent)) {
+            mdxContent = mdxContent.replace(markdownLinkRegex2, component);
+            modified = true;
+        }
+    }
+  });
+
+  if (modified) {
+    fs.writeFileSync(mdxPath, mdxContent);
+    console.log(`Updated ${slug}`);
+  }
+});
+
+function escapeRegExp(string) {
+  return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}