fix: code-canning char sanitization

package.json

@@ -38,16 +38,17 @@
   "devDependencies": {
     "@next/eslint-plugin-next": "^15.0.3",
     "@tailwindcss/typography": "^0.5.15",
-    "@types/node": "^22",
+    "@types/node": "^22.9.0",
     "@types/react": "npm:[email protected]",
     "@types/react-dom": "npm:[email protected]",
-    "@zl-asica/prettier-config": "^1",
-    "eslint": "^9",
-    "eslint-config-zl-asica": "^1",
+    "@zl-asica/prettier-config": "^1.0.7",
+    "autoprefixer": "^10.4.20",
+    "eslint": "^9.14.0",
+    "eslint-config-zl-asica": "^1.0.17",
     "husky": "^9.1.6",
     "lint-staged": "^15.2.10",
     "postcss": "^8.4.49",
-    "prettier": "^3",
+    "prettier": "^3.3.3",
     "prettier-plugin-tailwindcss": "^0.6.8",
     "tailwindcss": "^3.4.1",
     "typescript": "^5.6.0"

postcss.config.mjs

@@ -2,6 +2,7 @@
 const config = {
   plugins: {
     tailwindcss: {},
+    autoprefixer: {},
   },
 };
 

src/services/content/getPostFromFile.ts

@@ -56,11 +56,8 @@
     showComments: defaultTo(data.showComments, true),
   };
 
-  // Clean up HTML comments
-  let contentSanitized = markdownContent.replaceAll(/<!--[^>]*-->/g, (match) =>
-    match === '<!--more-->' ? match : ''
-  );
-
+  // Clean up HTML comments and render friend links
+  let contentSanitized = removeHtmlComments(markdownContent);
   if (contentSanitized.includes('{% links %}')) {
     contentSanitized = contentSanitized.replaceAll(
       /{% links %}([\S\s]*?){% endlinks %}/g,
@@ -87,6 +84,17 @@
   };
 }
 
+function removeHtmlComments(input) {
+  let previous;
+  do {
+    previous = input;
+    input = input.replaceAll(/<!--[^>]*-->/g, (match) =>
+      match === '<!--more-->' ? match : ''
+    );
+  } while (input !== previous);
+  return input;
+}
+
 // Helper function to resolve thumbnail
 async function resolveThumbnail(thumbnail?: string): Promise<string> {
   if (thumbnail && !thumbnail.includes('://')) {
@@ -126,7 +134,7 @@
       .join('');
     return `<div class="friends-links"><ul class="friends-links-list" role="list">${linksHtml}</ul></div>`;
   } catch {
-    return '<>Invalid JSON in links block</>';
+    return '<div>Invalid JSON in links block</div>';
   }
 }
 
@@ -152,15 +160,19 @@
 
 // Helper function to create post abstract
 function processPostAbstract(contentHtml: string): string {
-  const plainText = contentHtml
+  // Use negative lookahead to match all comments except <!--more-->
+  const sanitizedContent = contentHtml.replaceAll(/<!--(?!more\b)[^>]*-->/g, '');
+
+  // Clean all but keep <!--more--> to split content
+  const plainText = sanitizedContent
     .replaceAll('<!--more-->', '[[MORE_PLACEHOLDER]]')
     .replaceAll(/<[^>]*>/g, '');
-  const moreIndex = plainText.indexOf('[[MORE_PLACEHOLDER]]');
-  return (
-    moreIndex > 0 ? plainText.slice(0, moreIndex) : plainText.slice(0, 150)
-  )
-    .replaceAll(/\s+/g, ' ')
-    .trim();
+
+  // Find the index of <!--more--> and slice the content
+  const moreIndex = plainText.indexOf('[[MORE_PLACEHOLDER]]') || 0;
+
+  // Remove extra spaces and return the abstract
+  return plainText.slice(0, moreIndex).replaceAll(/\s+/g, ' ').trim();
 }
 
-export { getPostFromFile };
+export default getPostFromFile;

src/services/content/index.ts

@@ -5,7 +5,7 @@ import path from 'node:path';
 
 import { filter } from 'es-toolkit/compat';
 
-import { getPostFromFile } from '@/services/content/getPostFromFile';
+import getPostFromFile from '@/services/content/getPostFromFile';
 
 const postsDirectory = path.join(process.cwd(), 'posts');