feat: improve changelog

Author: Justineo

components/OneChangelog.vue

@@ -1,10 +1,5 @@
 <template>
-<article
-  class="content post"
-  :class="{
-    drawer: !!tag
-  }"
->
+<article class="content post">
   <h1
     v-if="!tag"
     data-md
@@ -82,7 +77,7 @@
     </veui-fieldset>
   </veui-form>
   <section
-    v-for="{ version, diffLink, codeName, date, changeset } of pagedChangelog"
+    v-for="{ version, diffLink, emoji, name, date, changeset } of pagedChangelog"
     :key="version"
     class="version-item"
     data-md
@@ -99,7 +94,7 @@
         :to="`#${getHash(version)}`"
       >
         {{ version }}
-        <small v-if="codeName">{{ codeName }}</small>
+        <small v-if="emoji && name">{{ emoji }}<span class="codename-text"> {{ name }}</span></small>
         <time
           v-if="date"
           :datetime="date"
@@ -131,7 +126,10 @@
         >{{
           getTypeEmoji(type)
         }}</span>
-        <div v-html="content"/>
+        <div
+          class="change-content"
+          v-html="content"
+        />
       </li>
     </ul>
   </section>
@@ -462,6 +460,9 @@ h2
     &:only-child
       margin 0
 
+  &-content
+    min-width 0
+
 .not-found
   display inline-flex
   flex-direction column
@@ -498,6 +499,9 @@ h2
     width -webkit-fill-available
     width -moz-available
 
+  .codename-text
+    display none
+
 @keyframes line-enter
   0%
   100%

components/OneChangelogButton.vue

@@ -7,11 +7,13 @@
     ui="s"
     @click="open = !open"
   >
+    <veui-icon name="clock"/>
     {{ t('changelog') }}
   </veui-button>
   <veui-drawer
     :title="t('changelog')"
     :open.sync="open"
+    overlay-class="drawer"
     outside-closable
     footless
   >
@@ -24,14 +26,16 @@
 </template>
 
 <script>
-import { Button, Drawer } from 'veui'
+import { Button, Drawer, Icon } from 'veui'
 import i18n from 'veui/mixins/i18n'
+import 'veui-theme-dls-icons/clock'
 
 export default {
   name: 'one-changelog-button',
   components: {
     'veui-button': Button,
     'veui-drawer': Drawer,
+    'veui-icon': Icon,
     OneChangelog: () => import('./OneChangelog')
   },
   mixins: [i18n],
@@ -58,4 +62,16 @@ export default {
 .changelog {
   padding: 12px 16px;
 }
+
+@media (max-width: 480px) {
+  .trigger {
+    top: 80px;
+    right: 30px;
+    height: auto;
+  }
+
+  .drawer {
+    --dls-drawer-width: calc(100vw - 16px);
+  }
+}
 </style>

one/build/changelog.js

@@ -2,12 +2,16 @@ import { load } from 'cheerio'
 import fetch from 'node-fetch'
 import { renderRaw } from './page'
 const VERSION_RE = /^(\d+\.\d+\.\d+(?:-[a-z]+(?:\.\d+)?)?)(?:\s+"([^"]+)")?(?:\s+\((\d{4}-\d{2}-\d{2})\))?$/i
+const CODENAME_RE = /^([^ ]+) (.+)$/
 function getVersion (title = '') {
   const [, version, codeName, date] = title.trim().match(VERSION_RE) || []
   if (!version) {
     return null
   }
-  return [version, codeName, date]
+
+  const [, emoji, name] = codeName ? codeName.trim().match(CODENAME_RE) || [] : []
+
+  return [version, emoji, name, date]
 }
 
 const TYPE_MAP = {
@@ -74,10 +78,11 @@ function extract (html) {
 
   $versions.each((_, el) => {
     const $version = $(el)
-    const [version, codeName, date] = getVersion($(el).text()) || []
+    const [version, emoji, name, date] = getVersion($(el).text()) || []
     const versionLog = {
       version,
-      codeName,
+      emoji,
+      name,
       date,
       changeset: []
     }