hexo-design-cards 0.1.3 → 0.1.5

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## [0.1.5] - 2026-03-02
+
+### Fixed
+- Banner: added `id` attribute to `<h2>` for TOC anchor navigation (NExT theme TOC click-to-scroll now works)
+
+## [0.1.4] - 2026-03-02
+
+### Fixed
+- Compare: recommended option background color was identical to first normal option (both used c3). Reordered normal option color sequence from [c3,c2,c1,c4] to [c4,c2,c1,c3] so they are visually distinct.
+
 ## [0.1.3] - 2026-03-02
 
 ### Fixed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hexo-design-cards",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "Beautiful design card tags for Hexo — flow diagrams, header cards, accent cards, comparison cards, quotes, alerts, mini cards, and section banners with customizable colorways.",
   "main": "index.js",
   "keywords": [

package/tags/banner.js

@@ -1,11 +1,22 @@
 'use strict';
 const { getColorway } = require('../lib/colorways');
 
+function slugify(text) {
+  return text
+    .trim()
+    .toLowerCase()
+    .replace(/[^\w\u3130-\u318F\uAC00-\uD7AF\u4E00-\u9FFF\s-]/g, '')
+    .replace(/[\s]+/g, '-')
+    .replace(/-+/g, '-')
+    .replace(/^-|-$/g, '');
+}
+
 // {% banner "Section N: Title" %}
 module.exports = function(hexo) {
   hexo.extend.tag.register('banner', function(args) {
     const cw = getColorway(hexo, this);
     const text = args.join(' ').replace(/^"|"$/g, '');
-    return '<div class="dc-banner" style="background:' + cw.c1 + '"><h2>' + text + '</h2></div>';
+    const id = slugify(text);
+    return '<div class="dc-banner" style="background:' + cw.c1 + '"><h2 id="' + id + '">' + text + '</h2></div>';
   });
 };

package/tags/compare.js

@@ -21,7 +21,7 @@ module.exports = function(hexo) {
     const title = args[0] || '';
     const emoji = args[1] || '';
     const recommended = args.indexOf('recommended') > -1;
-    const colors = [cw.c3, cw.c2, cw.c1, cw.c4];
+    const colors = [cw.c4, cw.c2, cw.c1, cw.c3];
     const color = recommended ? cw.c3 : colors[optionIndex % colors.length];
     const bg = tint(color, 0.08);
     optionIndex++;

package/test/tags.test.js

@@ -11,7 +11,7 @@ describe('hexo-design-cards tags', function() {
       const html = mock.callTag('banner', ['Getting Started']);
       assert(html.includes('dc-banner'));
       assert(html.includes('Getting Started'));
-      assert(html.includes('<h2>'));
+      assert(html.includes('<h2 id="getting-started">'));
     });
   });