李瑞豪

1

npm install -g auto-changelog-plus

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

Usage: auto-changelog-plus [options]

Options:
 -o, --output [file] # output file, default: CHANGELOG.md
 -c, --config [file] # config file location, default: .auto-changelog
 -t, --template [template] # specify template to use [compact, keepachangelog, json], default: compact
 -r, --remote [remote] # specify git remote to use for links, default: origin
 -p, --package # use version from package.json as latest release
 -v, --latest-version [version] # use specified version as latest release
 -u, --unreleased # include section for unreleased changes
 -l, --commit-limit [count] # number of commits to display per release, default: 3
 -b, --backfill-limit [count] # number of commits to backfill empty releases with, default: 3
 --commit-url [url] # override url for commits, use {id} for commit id
 --issue-url [url] # override url for issues, use {id} for issue id
 --merge-url [url] # override url for merges, use {id} for merge id
 --compare-url [url] # override url for compares, use {from} and {to} for tags
 --issue-pattern [regex] # override regex pattern for issues in commit messages
 --breaking-pattern [regex] # regex pattern for breaking change commits
 --merge-pattern [regex] # add custom regex pattern for merge commits
 --commit-pattern [regex] # pattern to include when parsing commits
 --ignore-commit-pattern [regex] # pattern to ignore when parsing commits
 --tag-pattern [regex] # override regex pattern for version tags
 --tag-prefix [prefix] # prefix used in version tags, default: v
 --starting-version [tag] # specify earliest version to include in changelog
 --starting-date [yyyy-mm-dd] # specify earliest date to include in changelog
 --ending-version [tag] # specify latest version to include in changelog
 --sort-commits [property] # sort commits by property [relevance, date, date-desc, subject, subject-desc], default: relevance
 --release-summary # display tagged commit message body as release summary
 --unreleased-only # only output unreleased changes
 --hide-empty-releases # hide empty releases
 --hide-credit # hide auto-changelog credit
 --handlebars-setup [file] # handlebars setup file
 --append-git-log [string] # string to append to git log command
 --append-git-tag [string] # string to append to git tag command
 --prepend # prepend changelog to output file
 --stdout # output changelog to stdout
 -V, --version # output the version number
 -h, --help # output usage information

1
2
3
4
5
6
7
8

# 在当前目录写入日志到 CHANGELOG.md
auto-changelog-plus

# 使用 keepachangelog 模板写入日志到 HISTORY.md
auto-changelog-plus --output HISTORY.md --template keepachangelog

# 禁用提交限制，渲染每个发布的所有提交
auto-changelog-plus --commit-limit false

1
2
3
4
5

npm install auto-changelog-plus --save-dev
# 或
yarn add auto-changelog-plus --dev
# 或
pnpm add -D auto-changelog-plus

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

{
 "name": "my-awesome-package",
 "version": "1.0.0",
 "devDependencies": {
 "auto-changelog-plus": "*"
 },
 "scripts": {
 "version": "auto-changelog-plus -p && git add CHANGELOG.md"
 }
}

1
2
3

npx auto-changelog-plus
# 或
pnpx auto-changelog-plus

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

name: Release for new tag

on:
 push:
 tags:
 - 'v*.*.*'
 workflow_dispatch:

jobs:
 release:
 runs-on: ubuntu-latest
 steps:
 - name: Checkout repository
 uses: actions/checkout@v5
 with:
 fetch-depth: 0 # Fetch all history for generating release notes

 - name: Setup Node.js
 uses: actions/setup-node@v5
 with:
 node-version: 'lts/*'

 - name: Generate release notes
 run: |
 npx auto-changelog-plus --starting-version ${{ github.ref_name }}
 sed -i '1,4d' CHANGELOG.md

 - name: GitHub Release
 uses: softprops/action-gh-release@v2
 with:
 draft: true
 body_path: CHANGELOG.md

1

mermaid.initialize({ theme: 'dark' });

1
2
3
4
5
6
7
8
9

[data-theme='dark'] .mermaid {
 filter: invert(0.88);
}

@media (prefers-color-scheme: dark) {
 :root:not([data-theme='light']) .mermaid {
 filter: invert(0.88);
 }
}

1
2
3
4
5

import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.js';
import zenuml from 'https://cdn.jsdelivr.net/npm/@mermaid-js/mermaid-zenuml/dist/mermaid-zenuml.esm.min.mjs';
await mermaid.registerExternalDiagrams([zenuml]);
mermaid.startOnLoad = false;
window.mermaid = mermaid;

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

initMermaid() {
 if (!this.config.mermaid) return;

 const themes = this.config.mermaid.themes ?? ['default', 'dark'];
 let processing = false;
 let delayTask = null;

 const loadMermaid = async () => {
 processing = true;
 // https://mermaid.js.org/config/schema-docs/config.html
 window.mermaid.initialize({
 startOnLoad: false,
 darkMode: this.isDark,
 theme: this.isDark ? themes[1] : themes[0],
 securityLevel: this.config.mermaid.securityLevel,
 look: this.config.mermaid.look,
 fontFamily: this.config.mermaid.fontFamily,
 altFontFamily: this.config.mermaid.fontFamily
 });
 await window.mermaid.run({
 querySelector: '.mermaid',
 suppressErrors: true,
 });
 processing = false;
 if (delayTask && typeof delayTask === 'function') {
 delayTask();
 delayTask = null;
 // console.log('Delayed task executed');
 }
 };

 const reloadMermaid = async () => {
 await this.util.forEach(document.querySelectorAll('.mermaid[data-processed]'), (el) => {
 el.removeAttribute('data-processed');
 el.parentElement.replaceChild(el.nextElementSibling.content.cloneNode(true), el);
 });
 await loadMermaid();
 };

 const waitForMermaid = () => {
 return new Promise((resolve) => {
 const timer = setInterval(() => {
 if (window.mermaid && window.mermaid.initialize) {
 clearInterval(timer);
 resolve();
 }
 }, 100);
 });
 };

 waitForMermaid().then(() => {
 loadMermaid();
 this.switchThemeEventSet.add(() => {
 if (processing) {
 console.warn('Mermaid is still processing, delaying the reload.');
 delayTask = reloadMermaid;
 return;
 }
 // console.log('reload immediately');
 reloadMermaid().catch(console.error);
 });

 this.beforeprintEventSet.add(() => {
 // Optionally set theme to 'neutral' for printing if required
 });
 })
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

.mermaid {
 position: relative;
 overflow: hidden !important;

 &[data-processed] {
 text-align: center;
 }

 &:not([data-processed])::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 backdrop-filter: blur(0.5rem);
 background-position: center;
 background-repeat: no-repeat;
 background-image: var(#{$rootPrefix}loading-img);
 background-size: 60px;
 }

 svg {
 max-width: 100%;
 height: auto; 
 }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Mermaid Light/Dark Mode switching</title>
 <style>
 .diagrams-container {
 display: flex;
 justify-content: space-evenly;
 }
 .mermaid-container {
 .mermaid-dark {
 display: none;
 }

 [data-theme="dark"] & {
 .mermaid {
 display: none;
 }
 .mermaid-dark {
 display: block;
 }
 }
 }
 </style>
</head>
<body>
 <script>
 function toggleTheme() {
 const currentTheme = document.body.dataset.theme;
 const newTheme = currentTheme === 'dark' ? 'default' : 'dark';
 document.body.dataset.theme = newTheme;
 }
 </script>
 <button id="toggler">切换主题</button>
 <div class="diagrams-container">
 <div class="mermaid-container">
 <pre class="mermaid">graph TD;
 A[开始] --> B{是否完成？};
 B -- 是 --> C[结束];
 B -- 否 --> D[继续];
 D --> B;
 </pre>
 <pre class="mermaid-dark">graph TD;
 A[开始] --> B{是否完成？};
 B -- 是 --> C[结束];
 B -- 否 --> D[继续];
 D --> B;
 </pre>
 </div>
 </div>

 <script type="module">
 import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs';

 async function loadMermaid(theme) {
 const isDark = theme === 'dark';
 const querySelector = isDark ? '.mermaid-dark' : '.mermaid';
 mermaid.initialize({ startOnLoad: false, darkMode: isDark, theme });
 // Mermaid run 函数内部会跳过 data-processed 的元素，所以这样不会重复渲染
 await mermaid.run({ querySelector });
 }

 await loadMermaid('default')

 document.getElementById('toggler').addEventListener('click', () => {
 const currentTheme = document.body.dataset.theme || 'default';
 const newTheme = currentTheme === 'dark' ? 'default' : 'dark';
 document.body.dataset.theme = newTheme;
 loadMermaid(newTheme);
 });
 </script>
</body>
</html>

1

<my-dog food="hotpot" mood="happy"></my-dog>

1
2

<my-app></my-app>
<script type="module" src="app.js"></script>

1

<script src="https://unpkg.com/@cell-x/caniuse-embed-element/dist/caniuse-embed-element.iife.js"></script>

1

<caniuse-embed feature="css-grid"></caniuse-embed>

1

npm install @cell-x/caniuse-embed-element

1

import '@cell-x/caniuse-embed-element'

1

<caniuse-embed feature="css-grid"></caniuse-embed>

1
2
3
4
5
6
7

<caniuse-embed
 feature="flexbox"
 theme="dark"
 past="3"
 future="2"
 origin="https://caniuse.lruihao.cn"
></caniuse-embed>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

<script setup>
import '@cell-x/caniuse-embed-element'
</script>

<template>
 <div>
 <caniuse-embed
 feature="css-grid"
 theme="dark"
 :past="3"
 :future="2"
 />
 </div>
</template>

1
2
3
4
5
6
7
8
9

# Clone the repository
git clone https://github.com/Lruihao/caniuse-embed-element.git
cd caniuse-embed-element

# Install dependencies
pnpm install

# Start development server
pnpm dev

1
2
3
4
5
6
7

# Build all formats
pnpm build:all

# Build specific formats
pnpm build:lib # ES modules and types
pnpm build:iife # IIFE for CDN usage
pnpm build # Demo build