✨ Load changelog from CHANGELOG.md instead

package.json

@@ -4,8 +4,15 @@
   "description": "BEAT☆MUSIC☆SEQUENCE, a web-based music game of the future",
   "main": "index.js",
   "private": true,
-  "workspaces": ["website", "packages/*"],
-  "browserslist": [">0.25%", "not ie 11", "not op_mini all"],
+  "workspaces": [
+    "website",
+    "packages/*"
+  ],
+  "browserslist": [
+    ">0.25%",
+    "not ie 11",
+    "not op_mini all"
+  ],
   "scripts": {
     "bootstrap": "lerna bootstrap",
     "build": "gulp build",
@@ -38,7 +45,9 @@
     "type": "git",
     "url": "https://github.com/spacetme/bemuse.git"
   },
-  "keywords": ["bms"],
+  "keywords": [
+    "bms"
+  ],
   "author": "Thai Pangsakulyanont <dtinth@spacet.me> (http://dt.in.th/)",
   "license": "AGPL-1.0",
   "bugs": {
@@ -122,6 +131,7 @@
     "prettier-eslint": "^8.6.0",
     "prettier-eslint-cli": "^4.7.0",
     "puppeteer": "^0.13.0",
+    "raw-loader": "^0.5.1",
     "react-transform-catch-errors": "^1.0.1",
     "sass-loader": "^6.0.6",
     "script-loader": "^0.7.2",

src/app/ui/ChangelogPanel.jsx

@@ -12,11 +12,11 @@ class ChangelogPanel extends React.Component {
   }
 
   componentDidMount () {
-    const promise = Promise.resolve(
-      $.get('https://api.github.com/repos/bemusic/bemuse/releases')
+    const promise = import('!!raw-loader!../../../CHANGELOG.md').then(
+      m => m.default
     )
     promise.then(
-      releases => this.setState({ data: { status: 'completed', releases } }),
+      changelog => this.setState({ data: { status: 'completed', changelog } }),
       () => this.setState({ data: { status: 'error' } })
     )
   }
@@ -44,15 +44,7 @@ class ChangelogPanel extends React.Component {
         releasesPage
       )
     }
-    const releases = _(this.state.data.releases || [])
-      .reject('draft')
-      .sortBy('created_at')
-      .reverse()
-      .take(10)
-      .value()
-    const changelog = releases
-      .map(release => `# ${release.tag_name}` + '\n\n' + release.body)
-      .join('\n\n')
+    const changelog = this.state.data.changelog
     const seeMore =
       '# Older Versions\n\n' +
       'The change log for older versions are available at the ' +

src/app/ui/ChangelogPanel.scss

@@ -1,4 +1,3 @@
-
 .ChangelogPanel {
   &のcontent {
     width: 80vw;
@@ -12,20 +11,24 @@
   }
   &のcontent .Markdown {
     h1 {
+      display: none;
+    }
+    h2 {
       color: #d7fc70;
       font-size: 1.5em;
+      margin: 0;
     }
-    h1:not(:first-child) {
+    h2:not(:first-of-type) {
       margin-top: 1.5em;
       padding-top: 0;
       &::before {
         content: '';
         display: block;
-        border-top: 1px solid #656463;
+        border-top: 2px solid #454443;
         margin: 0 -16px 1.5em;
       }
     }
-    h2 {
+    h3 {
       font-size: 1.4em;
       font-weight: normal;
       color: #8b8685;

tasks/lint-changelog.js

@@ -0,0 +1,32 @@
+import gulp from 'gulp'
+import fs from 'fs'
+import path from 'path'
+
+gulp.task('lint-changelog', async function () {
+  const changelogPath = path.resolve(__dirname, '../CHANGELOG.md')
+  const data = fs.readFileSync(changelogPath, 'utf8')
+  const defined = new Set()
+  const referenced = new Map()
+  data.replace(
+    /^\s*\[(?:([a-z0-9-]+)\/([a-z.0-9-]+))?#(\d+)]:\s+/gim,
+    (a, owner, repo, number) => {
+      const id = `${owner || 'bemusic'}:${repo || 'bemuse'}:${number}`
+      defined.add(id)
+    }
+  )
+  data.replace(
+    /\[((?:([a-z0-9-]+)\/([a-z.0-9-]+))?#(\d+))]($|[^(])/gi,
+    (a, tag, owner, repo, number) => {
+      const id = `${owner || 'bemusic'}:${repo || 'bemuse'}:${number}`
+      referenced.set(id, tag)
+    }
+  )
+  for (const [id, ref] of referenced) {
+    if (!defined.has(id)) {
+      const [repo, owner, number] = id.split(':')
+      console.log(
+        `[${ref}]: https://github.com/${repo}/${owner}/pull/${number}`
+      )
+    }
+  }
+})