hexo-design-cards 0.1.0

package/.github/workflows/ci.yml

@@ -0,0 +1,21 @@
+name: CI
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [18, 20, 22]
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+      - run: npm install
+      - run: npm test

package/CHANGELOG.md

@@ -0,0 +1,12 @@
+# Changelog
+
+## [0.1.0] - 2026-03-01
+
+### Added
+- 8 tag plugins: `banner`, `cards`, `accents`, `compare`, `alert`, `quotes`, `minicards`, `flow`
+- 5 colorways: deep-sea, olive-garden, fiery-ocean, rustic-earth, sunny-beach
+- Per-post colorway override via front matter
+- Optional font size parameter for cards, accents, compare, alert
+- CSS auto-injection via `after_render:html` filter
+- Responsive layout (single-column on mobile)
+- Markdown rendering inside card/accent/compare/alert/mini content

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 leafbird
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,218 @@
+# hexo-design-cards
+
+[![CI](https://github.com/leafbird/hexo-design-cards/actions/workflows/ci.yml/badge.svg)](https://github.com/leafbird/hexo-design-cards/actions/workflows/ci.yml) [![GitHub release](https://img.shields.io/github/v/release/leafbird/hexo-design-cards)](https://github.com/leafbird/hexo-design-cards/releases) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
+Beautiful design card tags for [Hexo](https://hexo.io) — replace verbose inline HTML with clean tag syntax.
+
+> Flow diagrams, header cards, accent cards, comparison cards, quotes, alerts, mini cards, and section banners with customizable colorways.
+
+## Install
+
+### From GitHub Packages
+
+```bash
+# Add to .npmrc in your Hexo project
+echo "@leafbird:registry=https://npm.pkg.github.com" >> .npmrc
+echo "//npm.pkg.github.com/:_authToken=YOUR_GITHUB_TOKEN" >> .npmrc
+
+npm install @leafbird/hexo-design-cards
+```
+
+### From npm (coming soon)
+
+```bash
+npm install hexo-design-cards
+```
+
+## Quick Start
+
+After installing, use tag syntax in your Hexo markdown files. No additional configuration needed — the plugin auto-injects CSS and uses the **Deep Sea** colorway by default.
+
+## Tags
+
+### Banner
+
+Section divider with a bold colored bar.
+
+```markdown
+{% banner "Section 1: Getting Started" %}
+```
+
+![Banner](screenshots/00-banner.png)
+
+### Cards
+
+Grid of cards with colored headers. Great for comparing concepts side by side.
+
+```markdown
+{% cards 2 %}
+{% card "Title A" %}
+Description with **markdown** support.
+`code snippets` work too.
+{% endcard %}
+{% card "Title B" %}
+Another card's content.
+{% endcard %}
+{% endcards %}
+```
+
+- First argument: number of columns (1–4)
+- Optional last argument: font size in px (e.g. `{% cards 2 15 %}`)
+
+![Cards](screenshots/01-cards.png)
+
+### Accent Cards
+
+Cards with a colored left border. Perfect for highlighting key points.
+
+```markdown
+{% accents 2 %}
+{% accent "Point 1" %}Description of the first point{% endaccent %}
+{% accent "Point 2" %}Description of the second point{% endaccent %}
+{% accent "Point 3" %}Third point here{% endaccent %}
+{% accent "Point 4" %}Fourth point here{% endaccent %}
+{% endaccents %}
+```
+
+- First argument: number of columns (1–4)
+- Optional last argument: font size in px
+
+![Accent Cards](screenshots/02-accent-cards.png)
+
+### Compare
+
+Side-by-side comparison of two options.
+
+```markdown
+{% compare %}
+{% option "Option A" "🔧" %}
+Description of option A.
+{% endoption %}
+{% option "Option B" "🚀" recommended %}
+Description of option B.
+This one is **recommended**.
+{% endoption %}
+{% endcompare %}
+```
+
+- Second argument (optional): emoji
+- `recommended` flag: thicker border for emphasis
+- Optional font size: `{% compare 15 %}`
+
+![Compare](screenshots/03-compare.png)
+
+### Alert
+
+Info, warning, or tip box.
+
+```markdown
+{% alert info %}Title|Body text with **markdown**{% endalert %}
+{% alert warning %}Warning title|Warning body{% endalert %}
+{% alert tip %}Tip title|Tip body{% endalert %}
+```
+
+- Types: `info` (ℹ️), `warning` (⚠️), `tip` (💡)
+- Use `|` to separate title and body (optional — omit for no title)
+- Optional font size: `{% alert warning 17 %}`
+
+![Alert](screenshots/04-alert.png)
+
+### Quotes
+
+A collection of styled quotes with colored left borders.
+
+```markdown
+{% quotes "Section Title" %}
+{% dcquote "Source 1" %}Quote text here{% enddcquote %}
+{% dcquote "Source 2" %}Another quote{% enddcquote %}
+{% endquotes %}
+```
+
+![Quotes](screenshots/05-quotes.png)
+
+### Mini Cards
+
+Compact cards in a 3-column grid. Good for listing short items.
+
+```markdown
+{% minicards %}
+{% mini "Item A" %}Short description{% endmini %}
+{% mini "Item B" %}Short description{% endmini %}
+{% mini "Item C" %}Short description{% endmini %}
+{% endminicards %}
+```
+
+![Mini Cards](screenshots/06-mini-cards.png)
+
+### Flow
+
+Simple horizontal flow diagram with arrow connectors.
+
+```markdown
+{% flow "Step A|description" "*Step B|description" "Step C|description" %}
+```
+
+- `*` prefix: highlighted step (bold border)
+- `|` inside quotes: separates title and description
+- Trailing `|` after all steps: caption text
+
+```markdown
+{% flow "Request" "*Process" "Response" | Data flow overview %}
+```
+
+![Flow](screenshots/07-flow-1.png)
+![Flow](screenshots/07-flow-2.png)
+
+## Font Size Parameter
+
+Most container tags accept an optional font size (in px) as the last numeric argument:
+
+```markdown
+{% cards 2 15 %}...{% endcards %}       → 2 columns, 15px body text
+{% accents 2 14 %}...{% endaccents %}   → 2 columns, 14px body text
+{% compare 16 %}...{% endcompare %}     → 16px body text
+{% alert warning 17 %}...{% endalert %} → 17px body text
+```
+
+When omitted, the plugin's CSS defaults apply.
+
+## Colorways
+
+Five built-in color palettes. Each has 5 colors (C1–C5) from darkest to lightest.
+
+| Colorway | Vibe |
+|----------|------|
+| `deep-sea` (default) | Calm blue-grey |
+| `olive-garden` | Warm olive-gold |
+| `fiery-ocean` | Bold red-blue contrast |
+| `rustic-earth` | Natural earth tones |
+| `sunny-beach` | Vivid orange-teal |
+
+Color palettes from [Coolors.co](https://coolors.co).
+
+### Global Setting
+
+In your Hexo `_config.yml`:
+
+```yaml
+design_cards:
+  colorway: deep-sea
+```
+
+### Per-Post Override
+
+In a post's front matter:
+
+```yaml
+---
+colorway: fiery-ocean
+---
+```
+
+## Responsive
+
+All grid layouts collapse to single-column on screens narrower than 768px. Flow diagrams switch to vertical layout.
+
+## License
+
+[MIT](LICENSE)

package/index.js

@@ -0,0 +1,21 @@
+'use strict';
+
+const { getCSS } = require('./lib/css');
+
+// Register all tag plugins
+require('./tags/flow')(hexo);
+require('./tags/cards')(hexo);
+require('./tags/accents')(hexo);
+require('./tags/compare')(hexo);
+require('./tags/quotes')(hexo);
+require('./tags/alert')(hexo);
+require('./tags/minicards')(hexo);
+require('./tags/banner')(hexo);
+
+// Inject CSS once per page
+hexo.extend.filter.register('after_render:html', function(str) {
+  if (str.indexOf('data-hexo-design-cards') > -1) return str;
+  if (str.indexOf('dc-') === -1) return str; // no design cards used
+  const css = getCSS();
+  return str.replace('</head>', css + '\n</head>');
+});

package/lib/colorways.js

@@ -0,0 +1,41 @@
+'use strict';
+
+const colorways = {
+  'deep-sea': {
+    name: 'Deep Sea',
+    c1: '#0d1b2a', c2: '#1b263b', c3: '#415a77', c4: '#778da9', c5: '#e0e1dd'
+  },
+  'olive-garden': {
+    name: 'Olive Garden Feast',
+    c1: '#283618', c2: '#606c38', c3: '#bc6c25', c4: '#dda15e', c5: '#fefae0'
+  },
+  'fiery-ocean': {
+    name: 'Fiery Ocean',
+    c1: '#780000', c2: '#c1121f', c3: '#003049', c4: '#669bbc', c5: '#fdf0d5'
+  },
+  'rustic-earth': {
+    name: 'Rustic Earthy Tones',
+    c1: '#414833', c2: '#656d4a', c3: '#7f5539', c4: '#a68a64', c5: '#ede0d4'
+  },
+  'sunny-beach': {
+    name: 'Sunny Beach Day',
+    c1: '#001524', c2: '#78290f', c3: '#15616d', c4: '#ff7d00', c5: '#ffecd1'
+  }
+};
+
+function getColorway(hexo, page) {
+  const pageColorway = page && page.colorway;
+  const globalColorway = hexo.config.design_cards && hexo.config.design_cards.colorway;
+  const key = pageColorway || globalColorway || 'olive-garden';
+  return colorways[key] || colorways['olive-garden'];
+}
+
+function tint(hex, opacity) {
+  opacity = opacity || 0.12;
+  const r = parseInt(hex.slice(1,3), 16);
+  const g = parseInt(hex.slice(3,5), 16);
+  const b = parseInt(hex.slice(5,7), 16);
+  return 'rgba(' + r + ',' + g + ',' + b + ',' + opacity + ')';
+}
+
+module.exports = { colorways, getColorway, tint };

package/lib/css.js

@@ -0,0 +1,65 @@
+'use strict';
+
+function getCSS() {
+  return `
+<style data-hexo-design-cards>
+.dc-flow{display:flex;align-items:center;justify-content:center;gap:12px;margin:20px 0;flex-wrap:wrap}
+.dc-flow-step{color:#fff;padding:12px 20px;border-radius:8px;text-align:center}
+.dc-flow-step b{display:block}
+.dc-flow-step span{font-size:12px}
+.dc-flow-step.dc-highlight{border-width:3px;border-style:solid}
+.dc-flow-arrow{font-size:24px}
+.dc-flow-caption{text-align:center;font-size:13px;margin:0 0 10px}
+
+.dc-cards{display:grid;gap:20px;margin:25px 0}
+.dc-card{border-width:2px;border-style:solid;border-radius:12px;overflow:hidden}
+.dc-card-header{padding:12px 15px}
+.dc-card-header h4{margin:0;color:#fff;font-size:18px}
+.dc-card-body{padding:15px}
+.dc-card-body p{font-size:15px;color:#555;margin:0 0 10px}
+.dc-card-body code{background:var(--dc-c5);padding:2px 6px;border-radius:4px;font-size:13px}
+
+.dc-accents{display:grid;gap:15px;margin:25px 0}
+.dc-accent{padding:15px;border-radius:8px;border-left:5px solid}
+.dc-accent b{display:block;margin-bottom:4px}
+.dc-accent p{font-size:15px;margin:5px 0 0;color:#555}
+
+.dc-compare{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:20px 0}
+.dc-compare-option{padding:20px;border-radius:12px;border-width:3px;border-style:solid}
+.dc-compare-option.dc-recommended{border-width:2px}
+.dc-compare-option h4{margin:0 0 10px;text-align:center}
+.dc-compare-option .dc-emoji{text-align:center;font-size:40px}
+.dc-compare-body{text-align:center}
+.dc-compare-body p{font-size:15px;color:#555;line-height:1.6}
+.dc-compare-body p strong{font-size:24px;display:block;margin:10px 0}
+
+.dc-quotes{border-width:3px;border-style:solid;border-radius:12px;padding:20px;margin:25px 0}
+.dc-quotes h4{margin:0 0 15px}
+.dc-quote{border-left:3px solid;padding-left:15px;margin-bottom:15px}
+.dc-quote p{margin:0;font-size:14px;font-style:italic}
+.dc-quote cite{display:block;margin:5px 0 0;font-size:12px;font-style:normal}
+
+.dc-alert{border-width:2px;border-style:solid;border-radius:12px;padding:20px;margin:25px 0}
+.dc-alert h4{margin:0 0 10px}
+.dc-alert p,.dc-alert div{margin:0;line-height:1.8}
+
+.dc-minicards{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin:20px 0}
+.dc-mini{border-width:3px;border-style:solid;border-radius:8px;padding:15px}
+.dc-mini h5{margin:0 0 8px}
+.dc-mini p{font-size:13px;color:#555;margin:0}
+.dc-mini code{background:rgba(0,0,0,0.06);padding:1px 5px;border-radius:3px;font-size:0.85em}
+
+.dc-banner{color:#fff;padding:15px 20px;border-radius:8px;margin:60px 0 20px}
+.dc-banner h2{margin:0;font-size:20px;font-weight:bold}
+
+@media(max-width:768px){
+  .dc-cards,.dc-accents{grid-template-columns:1fr!important}
+  .dc-compare{grid-template-columns:1fr}
+  .dc-minicards{grid-template-columns:1fr}
+  .dc-flow{flex-direction:column}
+  .dc-flow-arrow{transform:rotate(90deg)}
+}
+</style>`;
+}
+
+module.exports = { getCSS };

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "hexo-design-cards",
+  "version": "0.1.0",
+  "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": [
+    "hexo",
+    "hexo-plugin",
+    "hexo-tag",
+    "design",
+    "cards",
+    "colorway",
+    "diagram"
+  ],
+  "author": "leafbird",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/leafbird/hexo-design-cards.git"
+  },
+  "homepage": "https://github.com/leafbird/hexo-design-cards",
+  "directories": {
+    "lib": "lib"
+  },
+  "scripts": {
+    "test": "mocha test/"
+  },
+  "bugs": {
+    "url": "https://github.com/leafbird/hexo-design-cards/issues"
+  },
+  "devDependencies": {
+    "mocha": "^11.7.5"
+  }
+}

package/tags/accents.js

@@ -0,0 +1,32 @@
+'use strict';
+const { getColorway, tint } = require('../lib/colorways');
+
+module.exports = function(hexo) {
+  const colors_cycle = ['c3', 'c1', 'c4', 'c2'];
+  let accentIndex = 0;
+  let accentFontSize = null;
+
+  hexo.extend.tag.register('accents', function(args) {
+    const cols = parseInt(args[0]) || 2;
+    const lastArg = args[args.length - 1];
+    accentFontSize = (args.length > 1 && /^\d+$/.test(lastArg)) ? lastArg + 'px' : null;
+    accentIndex = 0;
+    return '<div class="dc-accents" style="grid-template-columns:repeat(' + cols + ',1fr)">';
+  });
+
+  hexo.extend.tag.register('endaccents', function() {
+    return '</div>';
+  });
+
+  hexo.extend.tag.register('accent', function(args, content) {
+    const cw = getColorway(hexo, this);
+    const title = args.join(' ').replace(/^"|"$/g, '');
+    const colorKey = colors_cycle[accentIndex % colors_cycle.length];
+    const color = cw[colorKey];
+    accentIndex++;
+    const rendered = hexo.render.renderSync({ text: content, engine: 'markdown' });
+    const fsStyle = accentFontSize ? ' style="font-size:' + accentFontSize + '"' : '';
+    return '<div class="dc-accent" style="background:' + tint(color, 0.1) + ';border-left-color:' + color + '">' +
+      '<b>' + title + '</b><div' + fsStyle + '>' + rendered + '</div></div>';
+  }, { ends: true });
+};

package/tags/alert.js

@@ -0,0 +1,35 @@
+'use strict';
+const { getColorway, tint } = require('../lib/colorways');
+
+module.exports = function(hexo) {
+  hexo.extend.tag.register('alert', function(args, content) {
+    const cw = getColorway(hexo, this);
+    const type = args[0] || 'info';
+    // Check if last arg is a number (font size)
+    const lastArg = args[args.length - 1];
+    const fontSize = (args.length > 1 && /^\d+$/.test(lastArg)) ? lastArg + 'px' : null;
+
+    const icons = { info: 'ℹ️', warning: '⚠️', tip: '💡' };
+    const colorMap = { info: cw.c3, warning: cw.c2, tip: cw.c4 };
+    const bgMap = { info: tint(cw.c3, 0.08), warning: tint(cw.c2, 0.08), tip: tint(cw.c4, 0.08) };
+    const color = colorMap[type] || cw.c3;
+    const bg = bgMap[type] || tint(cw.c3, 0.08);
+    const icon = icons[type] || 'ℹ️';
+
+    const rendered = content.trim();
+    const pipeIdx = rendered.indexOf('|');
+    let title = '', body = rendered;
+    if (pipeIdx > 0 && pipeIdx < 60) {
+      title = rendered.slice(0, pipeIdx).trim();
+      body = rendered.slice(pipeIdx + 1).trim();
+    }
+
+    const fsStyle = fontSize ? ' style="font-size:' + fontSize + '"' : '';
+    let html = '<div class="dc-alert" style="background:' + bg + ';border-color:' + color + '">';
+    if (title) html += '<h4 style="color:' + color + '">' + icon + ' ' + title + '</h4>';
+    else html += '<h4 style="color:' + color + '">' + icon + '</h4>';
+    html += '<div' + fsStyle + '>' + hexo.render.renderSync({ text: body, engine: 'markdown' }) + '</div>';
+    html += '</div>';
+    return html;
+  }, { ends: true });
+};

package/tags/banner.js

@@ -0,0 +1,11 @@
+'use strict';
+const { getColorway } = require('../lib/colorways');
+
+// {% 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>';
+  });
+};

package/tags/cards.js

@@ -0,0 +1,33 @@
+'use strict';
+const { getColorway } = require('../lib/colorways');
+
+module.exports = function(hexo) {
+  const colors_cycle = ['c3', 'c2', 'c4', 'c1'];
+  let cardIndex = 0;
+  let cardFontSize = null;
+
+  hexo.extend.tag.register('cards', function(args) {
+    const cols = parseInt(args[0]) || 2;
+    const lastArg = args[args.length - 1];
+    cardFontSize = (args.length > 1 && /^\d+$/.test(lastArg)) ? lastArg + 'px' : null;
+    cardIndex = 0;
+    return '<div class="dc-cards" style="grid-template-columns:repeat(' + cols + ',1fr)">';
+  });
+
+  hexo.extend.tag.register('endcards', function() {
+    return '</div>';
+  });
+
+  hexo.extend.tag.register('card', function(args, content) {
+    const cw = getColorway(hexo, this);
+    const title = args.join(' ').replace(/^"|"$/g, '');
+    const colorKey = colors_cycle[cardIndex % colors_cycle.length];
+    const color = cw[colorKey];
+    cardIndex++;
+    const rendered = hexo.render.renderSync({ text: content, engine: 'markdown' });
+    const fsStyle = cardFontSize ? ' style="font-size:' + cardFontSize + '"' : '';
+    return '<div class="dc-card" style="border-color:' + color + '">' +
+      '<div class="dc-card-header" style="background:' + color + '"><h4>' + title + '</h4></div>' +
+      '<div class="dc-card-body"' + fsStyle + '>' + rendered + '</div></div>';
+  }, { ends: true });
+};

package/tags/compare.js

@@ -0,0 +1,36 @@
+'use strict';
+const { getColorway, tint } = require('../lib/colorways');
+
+module.exports = function(hexo) {
+  let optionIndex = 0;
+  let compareFontSize = null;
+
+  hexo.extend.tag.register('compare', function(args) {
+    optionIndex = 0;
+    const lastArg = args[args.length - 1];
+    compareFontSize = (args.length > 0 && /^\d+$/.test(lastArg)) ? lastArg + 'px' : null;
+    return '<div class="dc-compare">';
+  });
+
+  hexo.extend.tag.register('endcompare', function() {
+    return '</div>';
+  });
+
+  hexo.extend.tag.register('option', function(args, content) {
+    const cw = getColorway(hexo, this);
+    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 color = recommended ? cw.c3 : colors[optionIndex % colors.length];
+    const bg = tint(color, 0.08);
+    optionIndex++;
+    const rendered = hexo.render.renderSync({ text: content, engine: 'markdown' });
+    const fsStyle = compareFontSize ? ' style="font-size:' + compareFontSize + '"' : '';
+    return '<div class="dc-compare-option' + (recommended ? ' dc-recommended' : '') +
+      '" style="background:' + bg + ';border-color:' + color + '">' +
+      '<h4 style="color:' + color + '">' + title + '</h4>' +
+      (emoji ? '<div class="dc-emoji">' + emoji + '</div>' : '') +
+      '<div class="dc-compare-body"' + fsStyle + '>' + rendered + '</div></div>';
+  }, { ends: true });
+};

package/tags/flow.js

@@ -0,0 +1,46 @@
+'use strict';
+const { getColorway } = require('../lib/colorways');
+
+// {% flow "Step A|desc" "*Step B|desc" "Step C|desc" %}
+// {% flow "Step A|desc" "*Step B|desc" "Step C|desc" | caption %}
+module.exports = function(hexo) {
+  hexo.extend.tag.register('flow', function(args) {
+    const cw = getColorway(hexo, this);
+
+    // Hexo strips quotes and delivers each quoted group as one element in args[].
+    // Find caption: look for a bare "|" separator in args
+    let caption = '';
+    let stepArgs = args;
+    const pipeIdx = args.indexOf('|');
+    if (pipeIdx > 0) {
+      caption = args.slice(pipeIdx + 1).join(' ');
+      stepArgs = args.slice(0, pipeIdx);
+    }
+
+    // Each arg is a step: "title|desc" or "*title|desc"
+    const steps = stepArgs;
+    const colors = [cw.c3, cw.c2, cw.c1, cw.c4];
+    let html = '<div class="dc-flow">';
+    steps.forEach(function(step, i) {
+      if (i > 0) {
+        html += '<span class="dc-flow-arrow" style="color:' + cw.c4 + '">→</span>';
+      }
+      const highlight = step.startsWith('*');
+      const text = highlight ? step.slice(1) : step;
+      const parts = text.split('|');
+      const title = parts[0];
+      const desc = parts[1] || '';
+      const bg = highlight ? cw.c1 : colors[i % colors.length];
+      const borderStyle = highlight ? ';border:3px solid ' + cw.c4 : '';
+      html += '<div class="dc-flow-step' + (highlight ? ' dc-highlight' : '') + '" style="background:' + bg + borderStyle + '">';
+      html += '<b>' + title + '</b>';
+      if (desc) html += '<span>' + desc + '</span>';
+      html += '</div>';
+    });
+    html += '</div>';
+    if (caption) {
+      html += '<p class="dc-flow-caption" style="color:' + cw.c4 + '">' + caption + '</p>';
+    }
+    return html;
+  });
+};

package/tags/minicards.js

@@ -0,0 +1,27 @@
+'use strict';
+const { getColorway } = require('../lib/colorways');
+
+module.exports = function(hexo) {
+  const colors_cycle = ['c1', 'c2', 'c3', 'c4'];
+  let miniIndex = 0;
+
+  hexo.extend.tag.register('minicards', function() {
+    miniIndex = 0;
+    return '<div class="dc-minicards">';
+  });
+
+  hexo.extend.tag.register('endminicards', function() {
+    return '</div>';
+  });
+
+  hexo.extend.tag.register('mini', function(args, content) {
+    const cw = getColorway(hexo, this);
+    const title = args.join(' ').replace(/^"|"$/g, '');
+    const colorKey = colors_cycle[miniIndex % colors_cycle.length];
+    miniIndex++;
+    const rendered = hexo.render.renderSync({ text: content, engine: 'markdown' });
+    return '<div class="dc-mini" style="border-color:' + cw[colorKey] + ';background:' + cw.c5 + '">' +
+      '<h5 style="color:' + cw.c2 + '">' + title + '</h5>' +
+      rendered + '</div>';
+  }, { ends: true });
+};

package/tags/quotes.js

@@ -0,0 +1,30 @@
+'use strict';
+const { getColorway } = require('../lib/colorways');
+
+module.exports = function(hexo) {
+  const colors_cycle = ['c3', 'c2', 'c4', 'c1'];
+  let quoteIndex = 0;
+
+  hexo.extend.tag.register('quotes', function(args) {
+    const cw = getColorway(hexo, this);
+    const title = args.join(' ').replace(/^"|"$/g, '');
+    quoteIndex = 0;
+    let html = '<div class="dc-quotes" style="background:' + cw.c5 + ';border-color:' + cw.c4 + '">';
+    if (title) html += '<h4 style="color:' + cw.c1 + '">' + title + '</h4>';
+    return html;
+  });
+
+  hexo.extend.tag.register('endquotes', function() {
+    return '</div>';
+  });
+
+  hexo.extend.tag.register('dcquote', function(args, content) {
+    const cw = getColorway(hexo, this);
+    const source = args.join(' ').replace(/^"|"$/g, '');
+    const colorKey = colors_cycle[quoteIndex % colors_cycle.length];
+    quoteIndex++;
+    return '<div class="dc-quote" style="border-left-color:' + cw[colorKey] + '">' +
+      '<p>' + content.trim() + '</p>' +
+      '<cite style="color:' + cw.c4 + '">— ' + source + '</cite></div>';
+  }, { ends: true });
+};

package/test/mock-hexo.js

@@ -0,0 +1,43 @@
+'use strict';
+
+/**
+ * Minimal Hexo mock for testing tag plugins.
+ */
+function createMockHexo(options) {
+  options = options || {};
+  const tags = {};
+
+  const hexo = {
+    config: options.config || {},
+    extend: {
+      tag: {
+        register: function(name, fn, opts) {
+          tags[name] = { fn: fn, opts: opts || {} };
+        }
+      },
+      filter: {
+        register: function() {}
+      }
+    },
+    render: {
+      renderSync: function(data) {
+        // Simple passthrough — wrap in <p> to mimic markdown
+        return '<p>' + (data.text || '').trim() + '</p>';
+      }
+    }
+  };
+
+  function callTag(name, args, content) {
+    const tag = tags[name];
+    if (!tag) throw new Error('Tag not registered: ' + name);
+    var ctx = options.page || {};
+    if (tag.opts.ends) {
+      return tag.fn.call(ctx, args, content || '');
+    }
+    return tag.fn.call(ctx, args);
+  }
+
+  return { hexo: hexo, tags: tags, callTag: callTag };
+}
+
+module.exports = { createMockHexo: createMockHexo };

package/test/tags.test.js

@@ -0,0 +1,228 @@
+'use strict';
+const assert = require('assert');
+const { createMockHexo } = require('./mock-hexo');
+
+describe('hexo-design-cards tags', function() {
+
+  describe('banner', function() {
+    it('should render a banner with title', function() {
+      const mock = createMockHexo();
+      require('../tags/banner')(mock.hexo);
+      const html = mock.callTag('banner', ['Getting Started']);
+      assert(html.includes('dc-banner'));
+      assert(html.includes('Getting Started'));
+      assert(html.includes('<h2>'));
+    });
+  });
+
+  describe('cards', function() {
+    it('should render cards container with correct columns', function() {
+      const mock = createMockHexo();
+      require('../tags/cards')(mock.hexo);
+      const open = mock.callTag('cards', ['3']);
+      assert(open.includes('repeat(3,1fr)'));
+      const close = mock.callTag('endcards', []);
+      assert.strictEqual(close, '</div>');
+    });
+
+    it('should render a card with title and content', function() {
+      const mock = createMockHexo();
+      require('../tags/cards')(mock.hexo);
+      mock.callTag('cards', ['2']);
+      const html = mock.callTag('card', ['Title A'], 'Some content');
+      assert(html.includes('dc-card'));
+      assert(html.includes('dc-card-header'));
+      assert(html.includes('Title A'));
+      assert(html.includes('Some content'));
+    });
+
+    it('should apply font size when specified', function() {
+      const mock = createMockHexo();
+      require('../tags/cards')(mock.hexo);
+      mock.callTag('cards', ['2', '14']);
+      const html = mock.callTag('card', ['Title'], 'Content');
+      assert(html.includes('font-size:14px'));
+    });
+  });
+
+  describe('accents', function() {
+    it('should render accents container', function() {
+      const mock = createMockHexo();
+      require('../tags/accents')(mock.hexo);
+      const open = mock.callTag('accents', ['2']);
+      assert(open.includes('dc-accents'));
+      assert(open.includes('repeat(2,1fr)'));
+    });
+
+    it('should render accent card with title', function() {
+      const mock = createMockHexo();
+      require('../tags/accents')(mock.hexo);
+      mock.callTag('accents', ['2']);
+      const html = mock.callTag('accent', ['Point 1'], 'Description');
+      assert(html.includes('dc-accent'));
+      assert(html.includes('Point 1'));
+      assert(html.includes('Description'));
+    });
+  });
+
+  describe('compare', function() {
+    it('should render compare container', function() {
+      const mock = createMockHexo();
+      require('../tags/compare')(mock.hexo);
+      const open = mock.callTag('compare', []);
+      assert(open.includes('dc-compare'));
+    });
+
+    it('should render option with emoji and recommended', function() {
+      const mock = createMockHexo();
+      require('../tags/compare')(mock.hexo);
+      const html = mock.callTag('option', ['Option B', '🚀', 'recommended'], 'Best choice');
+      assert(html.includes('dc-compare-option'));
+      assert(html.includes('🚀'));
+      assert(html.includes('Option B'));
+      assert(html.includes('Best choice'));
+    });
+  });
+
+  describe('alert', function() {
+    it('should render info alert', function() {
+      const mock = createMockHexo();
+      require('../tags/alert')(mock.hexo);
+      const html = mock.callTag('alert', ['info'], 'Title|Body text');
+      assert(html.includes('dc-alert'));
+      assert(html.includes('Title'));
+      assert(html.includes('Body text'));
+    });
+
+    it('should render warning alert', function() {
+      const mock = createMockHexo();
+      require('../tags/alert')(mock.hexo);
+      const html = mock.callTag('alert', ['warning'], 'Warn|Be careful');
+      assert(html.includes('dc-alert'));
+      assert(html.includes('⚠️'));
+    });
+
+    it('should render tip alert', function() {
+      const mock = createMockHexo();
+      require('../tags/alert')(mock.hexo);
+      const html = mock.callTag('alert', ['tip'], 'Tip|Useful info');
+      assert(html.includes('dc-alert'));
+      assert(html.includes('💡'));
+    });
+  });
+
+  describe('quotes', function() {
+    it('should render quotes container with title', function() {
+      const mock = createMockHexo();
+      require('../tags/quotes')(mock.hexo);
+      const open = mock.callTag('quotes', ['Famous Quotes']);
+      assert(open.includes('dc-quotes'));
+      assert(open.includes('Famous Quotes'));
+    });
+
+    it('should render dcquote with source', function() {
+      const mock = createMockHexo();
+      require('../tags/quotes')(mock.hexo);
+      const html = mock.callTag('dcquote', ['Author'], 'Quote text');
+      assert(html.includes('dc-quote'));
+      assert(html.includes('Author'));
+      assert(html.includes('Quote text'));
+    });
+  });
+
+  describe('minicards', function() {
+    it('should render minicards container', function() {
+      const mock = createMockHexo();
+      require('../tags/minicards')(mock.hexo);
+      const open = mock.callTag('minicards', []);
+      assert(open.includes('dc-minicards'));
+    });
+
+    it('should render mini card with title', function() {
+      const mock = createMockHexo();
+      require('../tags/minicards')(mock.hexo);
+      const html = mock.callTag('mini', ['Item A'], 'Short desc');
+      assert(html.includes('dc-mini'));
+      assert(html.includes('Item A'));
+      assert(html.includes('Short desc'));
+    });
+  });
+
+  describe('flow', function() {
+    it('should render flow steps', function() {
+      const mock = createMockHexo();
+      require('../tags/flow')(mock.hexo);
+      const html = mock.callTag('flow', ['Step A', '*Step B', 'Step C']);
+      assert(html.includes('dc-flow'));
+      assert(html.includes('dc-flow-step'));
+      assert(html.includes('Step A'));
+      assert(html.includes('Step B'));
+      assert(html.includes('Step C'));
+      assert(html.includes('dc-flow-arrow'));
+    });
+
+    it('should highlight step with * prefix', function() {
+      const mock = createMockHexo();
+      require('../tags/flow')(mock.hexo);
+      const html = mock.callTag('flow', ['A', '*B', 'C']);
+      assert(html.includes('dc-highlight'));
+      // Should not show the * in the output
+      assert(!html.includes('>*B<'));
+    });
+
+    it('should render step description with pipe separator', function() {
+      const mock = createMockHexo();
+      require('../tags/flow')(mock.hexo);
+      const html = mock.callTag('flow', ['Draft|Write it', '*Build|hexo generate', 'Deploy|Push']);
+      assert(html.includes('Draft'));
+      assert(html.includes('Write it'));
+    });
+
+    it('should render caption after bare pipe', function() {
+      const mock = createMockHexo();
+      require('../tags/flow')(mock.hexo);
+      const html = mock.callTag('flow', ['Request', '*Process', 'Response', '|', 'Data flow overview']);
+      assert(html.includes('dc-flow-caption'));
+      assert(html.includes('Data flow overview'));
+    });
+  });
+
+  describe('colorways', function() {
+    it('should default to olive-garden', function() {
+      const { getColorway } = require('../lib/colorways');
+      const hexo = { config: {} };
+      const cw = getColorway(hexo, {});
+      assert.strictEqual(cw.c1, '#283618');
+    });
+
+    it('should respect page colorway override', function() {
+      const { getColorway } = require('../lib/colorways');
+      const hexo = { config: {} };
+      const cw = getColorway(hexo, { colorway: 'fiery-ocean' });
+      assert.strictEqual(cw.c1, '#780000');
+    });
+
+    it('should fall back to olive-garden for unknown colorway', function() {
+      const { getColorway } = require('../lib/colorways');
+      const hexo = { config: {} };
+      const cw = getColorway(hexo, { colorway: 'nonexistent' });
+      assert.strictEqual(cw.c1, '#283618');
+    });
+  });
+
+  describe('CSS injection', function() {
+    it('should generate CSS with all tag classes', function() {
+      const { getCSS } = require('../lib/css');
+      const css = getCSS();
+      assert(css.includes('dc-flow'));
+      assert(css.includes('dc-cards'));
+      assert(css.includes('dc-accent'));
+      assert(css.includes('dc-compare'));
+      assert(css.includes('dc-alert'));
+      assert(css.includes('dc-quotes'));
+      assert(css.includes('dc-mini'));
+      assert(css.includes('dc-banner'));
+      assert(css.includes('data-hexo-design-cards'));
+    });
+  });
+});