[Feature]: Layerable Category Button for Nested SubCategories

[Samera2022]

Type of change

• Bug fix (a non-breaking change that fixes an issue)
• New feature (a non-breaking change that adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Other (please describe):

Checklist

• I have read the CONTRIBUTING document.
• I have checked to ensure that this Pull Request is not for personal changes.
• I have performed a self-review of my own code.
• My changes generate no new warnings.

Related Issue

#701 (comment)

Changes

Technical Implementation Details

I have introduced a hierarchical category system by refactoring Categories.astro&content-utils.ts and adding a recursive CategoryNode.astro component to src/component/widget.

---

How to Use?

For md files in src\content\posts, using / to define the relationship between a Category and its SubCategories.

Example: category: Examples/Test1/Test2

---

1. content-utils.ts

Edited this file to enable Layerable Category in Categories.astro and CategoryNode.astro.

---

2. Categories.astro

URL Handling: Optimized URL generation by using c.url directly instead of getCategoryUrl(c.name).

Type Safety & Integrity: Explicitly converted badge counts using String(c.count).

Added c.name.trim() to prevent layout issues from whitespace.

Design Refinement: Changed COLLAPSED_HEIGHT from 120px to 7.5rem for better responsive scaling.

---

3. CategoryNode.astro

Located in src/components/widget, this component handles the recursive rendering of the category tree.

Key Features:

• Recursive Rendering: Supports infinite nesting levels.

• Native Collapse/Expand: Uses the <details> element for a lightweight, accessible accordion effect.

• Visual Hierarchy: Implements dynamic indentation (depth * 12px) to visualize the tree structure.

• Hybrid Display Modes:

  • Uniform Classic Mode: If none of the categories in the current level have subcategories, all items revert to the "Classic Mode" (no arrows, no dots) for a clean look.

  • Visual Alignment Mode: If at least one item in the current level is expandable, the UI adapts to maintain vertical alignment:

    • Expandable items display a rotation arrow.

    • Non-expandable items display a dot marker to occupy the same visual space as the arrow, ensuring all category names remain perfectly aligned.

• UX & Interaction Optimization:

  • Smart Event Propagation: Clicking the category name triggers the timeline view, while clicking the arrow or empty area toggles the sub-category collapse/expand state.

  • Hover States: Smooth transitions for colors, backgrounds, and indentation.

How To Test

Refer to [How to Use] in [Changes]. Once you edited the category in md with xx/xx, you will be able to see Layerable Category Button.

Screenshots (if applicable)

[vercel]

@Samera2022 is attempting to deploy a commit to the zephyirdgmailcom's projects Team on Vercel.

A member of the Team first needs to authorize it.