fix: list styling issue

ZL-Asica · Jan 1, 2025 · 7118b0e · 7118b0e
1 parent 73aa24f
commit 7118b0e
Show file tree

Hide file tree

Showing 6 changed files with 1,139 additions and 196 deletions.
diff --git a/package.json b/package.json
@@ -44,11 +44,11 @@
     "remark-math": "^6.0.0",
     "slugify": "^1.6.6",
     "twikoo": "^1.6.40",
-    "yaml": "^2.6.1"
+    "yaml": "^2.7.0"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^3.12.1",
-    "@eslint-react/eslint-plugin": "^1.22.1",
+    "@eslint-react/eslint-plugin": "^1.23.0",
     "@next/eslint-plugin-next": "^15.1.3",
     "@tailwindcss/typography": "^0.5.15",
     "@types/node": "^22.10.2",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/posts/2024-annual-summary.md b/posts/2024-annual-summary.md
diff --git a/posts/2024-columbia-travelogue.md b/posts/2024-columbia-travelogue.md
diff --git a/src/components/article/parser/markdownComponents.tsx b/src/components/article/parser/markdownComponents.tsx
@@ -111,16 +111,16 @@ function createMarkdownComponents(translation: Translation, autoSlug: boolean =
 
     ul: ({ children }) => (
       <div className="my-4 ml-2 rounded-lg border-2 border-dashed border-[var(--sakuraPink)] p-4">
-        <ul className="list-inside list-disc space-y-2">{children as ReactNode}</ul>
+        <ul className="list-disc list-inside">{children as ReactNode}</ul>
       </div>
     ),
     ol: ({ children }) => (
       <div className="my-4 ml-2 rounded-lg border-2 border-dashed border-[var(--skyblue)] p-4">
-        <ol className="list-inside list-decimal space-y-2">{children as ReactNode}</ol>
+        <ol className="list-decimal list-inside">{children as ReactNode}</ol>
       </div>
     ),
     li: ({ children }) => (
-      <li className="text-foreground mb-1 leading-relaxed marker:text-[var(--sakuraPink)]">
+      <li className="text-foreground leading-relaxed marker:text-[var(--sakuraPink)] list-outside pl-4 ml-4">
         {children as ReactNode}
       </li>
     ),

diff --git a/src/services/utils/generateHierarchicalSlug.ts b/src/services/utils/generateHierarchicalSlug.ts
@@ -21,10 +21,14 @@ function generateHierarchicalSlug(children: React.ReactNode | string, level: key
 }
 
 function slugPrefix(slug: string, level: number) {
-  return `${slug
-    .split('-')
-    .slice(0, level - 1)
-    .join('.')}.`
+  const parts = slug.split('-')
+  if (level === 6) {
+    return `${parts
+      .slice(-2)
+      .map(part => String.fromCharCode(96 + Number.parseInt(part, 10)))
+      .join('.')} `
+  }
+  return `${parts.slice(0, level - 1).join('.')} `
 }
 
 export { generateHierarchicalSlug as default, slugPrefix }