feat(style): refine changelog style

This commit is contained in:
Justineo 2021-09-25 23:32:02 +08:00
parent 31e9b5726d
commit b0724b4722
No known key found for this signature in database
GPG Key ID: B73F0979CF18A0EA
2 changed files with 79 additions and 9 deletions

View File

@ -1,7 +1,6 @@
import { readFileSync } from 'fs' import { readFileSync } from 'fs'
import cheerio from 'cheerio' import cheerio from 'cheerio'
import { render } from './page' import { render } from './page'
const VERSION_RE = /^(\d+\.\d+\.\d+(?:-[a-z]+(?:\.\d+)?)?)(?:\s+"([^"]+)")?$/i const VERSION_RE = /^(\d+\.\d+\.\d+(?:-[a-z]+(?:\.\d+)?)?)(?:\s+"([^"]+)")?$/i
function getVersion (title = '') { function getVersion (title = '') {
const [, version, codeName] = title.trim().match(VERSION_RE) || [] const [, version, codeName] = title.trim().match(VERSION_RE) || []
@ -39,6 +38,25 @@ function getTags (comment) {
.filter(tag => !!tag) .filter(tag => !!tag)
} }
const EDIT_TYPE_RE = /^\[([+-^])\]/
const EDIT_TYPE_MAP = {
'-': 'remove',
'+': 'add',
'^': 'modify'
}
function getEditType (text) {
const [, sign] = text.match(EDIT_TYPE_RE) || []
if (sign) {
return EDIT_TYPE_MAP[sign]
}
return null
}
function trim (text) {
return text.trim().replace(/^\n+|\n+$/g, '')
}
function extract (html) { function extract (html) {
const changelog = [] const changelog = []
@ -85,18 +103,27 @@ function extract (html) {
.reduce((all, current) => all.concat(current), []) .reduce((all, current) => all.concat(current), [])
$change.contents().filter((_, el) => el.type === 'comment').remove() $change.contents().filter((_, el) => el.type === 'comment').remove()
$change.find('*').contents().filter((_, el) => el.type === 'comment').remove()
const $container = trim($change.html()).startsWith('<p>') ? $change.children('p').first() : $change
let html = trim($container.html())
const editType = getEditType($container.text())
html = html.replace(EDIT_TYPE_RE, '')
$container.html(html)
versionLog.changeset.push({ versionLog.changeset.push({
type, type,
tags, tags,
content: $change.html().replace(/^\n+|\n+$/g, '') editType,
content: trim($change.html())
}) })
}) })
}) })
changelog.push(versionLog) changelog.push(versionLog)
}) })
return changelog return changelog
} }

View File

@ -85,14 +85,21 @@
minor: isMinor(version), minor: isMinor(version),
}" }"
> >
{{ version }} <small>{{ codeName }}</small> {{ version }}<small v-if="codeName">{{ codeName }}</small>
</h2> </h2>
<ul> <ul class="changeset">
<li <li
v-for="({ type, tags, content }, index) of changeset" v-for="({ type, tags, content }, index) of changeset"
:key="index" :key="index"
v-html="content" class="change"
/> :class="type"
>
<span
class="emoji"
:title="getTypeLabel(type)"
>{{ getTypeEmoji(type) }}</span>
<div v-html="content"/>
</li>
</ul> </ul>
</section> </section>
<section <section
@ -117,6 +124,10 @@ const allTypes = [
{ label: '问题修复', value: 'bugfix', emoji: '🐞' }, { label: '问题修复', value: 'bugfix', emoji: '🐞' },
{ label: '实验性功能', value: 'experimental', emoji: '🧪' } { label: '实验性功能', value: 'experimental', emoji: '🧪' }
] ]
const typeMap = allTypes.reduce((map, { label, value, emoji }) => {
map[value] = { label, emoji }
return map
}, {})
const allVersions = changelog.map(({ version }) => ({ label: version, value: version })) const allVersions = changelog.map(({ version }) => ({ label: version, value: version }))
const allTags = [ const allTags = [
@ -190,7 +201,8 @@ export default {
watch: { watch: {
compare (val) { compare (val) {
if (!val) { if (!val) {
this.from = this.to = null this.from = null
this.to = allVersions[0].value
} }
} }
}, },
@ -202,6 +214,12 @@ export default {
methods: { methods: {
isMajor, isMajor,
isMinor, isMinor,
getTypeEmoji (type) {
return typeMap[type].emoji
},
getTypeLabel (type) {
return typeMap[type].label
},
updateShrugger () { updateShrugger () {
this.shrugger = getShrugger() this.shrugger = getShrugger()
} }
@ -231,6 +249,8 @@ export default {
margin-bottom 0 margin-bottom 0
h2 h2
display flex
align-items center
font-size 20px font-size 20px
margin 1.2em 0 0.6em margin 1.2em 0 0.6em
@ -246,7 +266,30 @@ h2
content "§" content "§"
small small
font-size 18px font-size 14px
&::before
content "·"
font-size 20px
margin 0 8px
.changeset
list-style-type none
padding-left 0
.change
display flex
.emoji
flex none
margin-right 8px
cursor help
& >>> p
margin-top 0
&:only-child
margin 0
.not-found .not-found
display inline-flex display inline-flex