4.0.0-rc5.2

* Changed: Begin pulling a Changelog from GitHub commits rather than loading HTML from the FFZ CDN.

Implement a Markdown Vue component for safely and easily displaying rich content.

package-lock.json

@@ -355,7 +355,6 @@
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
       "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
-      "dev": true,
       "requires": {
         "sprintf-js": "1.0.3"
       }
@@ -2829,6 +2828,11 @@
         "tapable": "0.2.8"
       }
     },
+    "entities": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-1.1.1.tgz",
+      "integrity": "sha1-blwtClYhtdra7O+AuQ7ftc13cvA="
+    },
     "errno": {
       "version": "0.1.6",
       "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.6.tgz",
@@ -5293,6 +5297,14 @@
         "type-check": "0.3.2"
       }
     },
+    "linkify-it": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-2.0.3.tgz",
+      "integrity": "sha1-2UpGSPmxwXnWT6lykSaL22zpQ08=",
+      "requires": {
+        "uc.micro": "1.0.5"
+      }
+    },
     "load-json-file": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
@@ -5479,6 +5491,18 @@
         "object-visit": "1.0.1"
       }
     },
+    "markdown-it": {
+      "version": "8.4.1",
+      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-8.4.1.tgz",
+      "integrity": "sha512-CzzqSSNkFRUf9vlWvhK1awpJreMRqdCrBvZ8DIoDWTOkESMIF741UPAhuAmbyWmdiFPA6WARNhnu2M6Nrhwa+A==",
+      "requires": {
+        "argparse": "1.0.10",
+        "entities": "1.1.1",
+        "linkify-it": "2.0.3",
+        "mdurl": "1.0.1",
+        "uc.micro": "1.0.5"
+      }
+    },
     "material-colors": {
       "version": "1.2.5",
       "resolved": "https://registry.npmjs.org/material-colors/-/material-colors-1.2.5.tgz",
@@ -5512,6 +5536,11 @@
         }
       }
     },
+    "mdurl": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz",
+      "integrity": "sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4="
+    },
     "media-typer": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
@@ -8392,8 +8421,7 @@
     "sprintf-js": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
-      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
+      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw="
-      "dev": true
     },
     "sshpk": {
       "version": "1.14.1",
@@ -8994,6 +9022,11 @@
       "integrity": "sha512-uRdSdu1oA1rncCQL7sCj8vSyZkgtL7faaw9Tc9rZ3mGgraQ7+Pdx7w5mnOSF3gw9ZNG6oc+KXfkon3bKuROm0g==",
       "dev": true
     },
+    "uc.micro": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.5.tgz",
+      "integrity": "sha512-JoLI4g5zv5qNyT09f4YAvEZIIV1oOjqnewYg5D38dkQljIzpPT296dbIGvKro3digYI1bkb7W6EP1y4uDlmzLg=="
+    },
     "uglify-es": {
       "version": "3.3.9",
       "resolved": "https://registry.npmjs.org/uglify-es/-/uglify-es-3.3.9.tgz",

package.json

@@ -55,6 +55,7 @@
     "graphql": "^0.13.2",
     "graphql-tag": "^2.9.1",
     "js-cookie": "^2.2.0",
+    "markdown-it": "^8.4.1",
     "path-to-regexp": "^2.2.1",
     "popper.js": "^1.14.3",
     "raven-js": "^3.24.2",

src/main.js

@@ -100,7 +100,7 @@ class FrankerFaceZ extends Module {
 FrankerFaceZ.Logger = Logger;
 
 const VER = FrankerFaceZ.version_info = {
-	major: 4, minor: 0, revision: 0, extra: '-rc5.1',
+	major: 4, minor: 0, revision: 0, extra: '-rc5.2',
 	build: __webpack_hash__,
 	toString: () =>
 		`${VER.major}.${VER.minor}.${VER.revision}${VER.extra || ''}${DEBUG ? '-dev' : ''}`

src/modules/main_menu/components/changelog.vue

@@ -4,44 +4,141 @@
 			<h2>{{ t('home.changelog', 'Changelog') }}</h2>
 		</div>
 
-		<div ref="changes" />
+		<ul>
+			<li v-for="commit of display" :key="commit.sha" class="tw-mg-b-2">
+				<div class="tw-flex tw-align-items-center tw-border-b tw-mg-b-05">
+					<div class="tw-font-size-4">
+						{{ commit.title }}
+					</div>
+					<div
+						v-if="commit.hash"
+						class="tw-font-size-8 tw-c-text-alt-2"
+					>
+						@<a :href="commit.link" target="_blank" rel="noopener noreferrer" class="tw-link tw-link--inherit">{{ commit.hash }}</a>
+					</div>
+					<time
+						v-if="commit.date"
+						:datetime="commit.date"
+						class="tw-align-right tw-flex-grow-1 tw-c-text-alt-2"
+					>({{ formatDate(commit.date) }})</time>
+				</div>
+				<markdown :source="commit.message" />
+			</li>
+		</ul>
+
+		<div class="tw-align-center tw-pd-1">
+			<div v-if="error">
+				{{ t('home.changelog.error', 'An error occured loading changes from GitHub.') }}
+			</div>
+			<h1 v-else-if="loading" class="tw-mg-5 ffz-i-zreknarf loading" />
+			<div v-else-if="! more">
+				{{ t('home.changelog.no-more', 'There are no more commits to load.') }}
+			</div>
+			<button v-else class="tw-button" @click="fetchMore">
+				<div class="tw-button__text">
+					{{ t('home.changelog.load', 'Load More') }}
+				</div>
+			</button>
+		</div>
 	</div>
 </template>
 
 
 <script>
 
-import {SERVER} from 'utilities/constants';
+import {get} from 'utilities/object';
+
+const TITLE_MATCH = /^(\d+\.\d+\.\d+(?:\-[^\n]+)?)\n+/;
 
 export default {
 	props: ['item', 'context'],
 
+	data() {
+		return {
+			error: false,
+			loading: false,
+			more: true,
+			commits: []
+		}
+	},
+
+	computed: {
+		display() {
+			const out = [],
+				old_commit = this.t('home.changelog.nonversioned', 'Non-Versioned Commit');
+
+			for(const commit of this.commits) {
+				let message = commit.commit.message,
+					title = old_commit;
+
+				const match = TITLE_MATCH.exec(message);
+				if ( match ) {
+					title = match[1];
+					message = message.slice(match[0].length);
+				}
+
+				out.push({
+					title,
+					message,
+					hash: commit.sha && commit.sha.slice(0,7),
+					link: commit.html_url,
+					sha: commit.sha,
+					date: new Date(commit.commit.author.date)
+				});
+			}
+
+			return out;
+		}
+	},
+
 	mounted() {
-		this.fetch(`${SERVER}/script/changelog.html?_=${Date.now()}`, this.$refs.changes);
+		this.commit_ids = new Set;
+		this.fetchMore();
 	},
 
 	methods: {
-		fetch(url, container) {
+		formatDate(value) {
-			const done = data => {
+			if ( ! value )
-				if ( ! data )
+				return '';
-					data = 'There was an error loading this page from the server.';
 
-				container.innerHTML = data;
+			const date = value instanceof Date ? value : new Date(value),
+				today = new Date,
+				is_today = date.toDateString() === today.toDateString();
 
-				const btn = container.querySelector('#ffz-old-news-button');
+			if ( is_today )
-				if ( btn )
+				return date.toLocaleTimeString();
-					btn.addEventListener('click', () => {
+
-						btn.remove();
+			return date.toLocaleDateString();
-						const old_news = container.querySelector('#ffz-old-news');
+		},
-						if ( old_news )
+
-							this.fetch(`${SERVER}/script/old_changes.html`, old_news);
+		async fetchMore() {
-					});
+			const last_commit = this.commits[this.commits.length - 1],
+				until = last_commit && get('commit.author.date', last_commit);
+
+			this.loading = true;
+
+			try {
+				const resp = await fetch(`https://api.github.com/repos/frankerfacez/frankerfacez/commits${until ? `?until=${until}` : ''}`),
+					data = resp.ok ? await resp.json() : null;
+
+				if ( ! data || ! Array.isArray(data) ) {
+					this.more = false;
+					return;
+				}
+
+				for(const commit of data) {
+					if ( this.commit_ids.has(commit.sha) )
+						continue;
+
+					this.commit_ids.add(commit.sha)
+					this.commits.push(commit);
+				}
+
+				this.loading = false;
+
+			} catch(err) {
+				this.error = true;
 			}
-
-			fetch(url)
-				.then(resp => resp.ok ? resp.text() : null)
-				.then(done)
-				.catch(() => done(null));
 		}
 	}
 }

styles/widgets.scss

@@ -165,33 +165,10 @@
 
 
 .ffz--changelog {
-	h2, p {
+	ul, p {
 		margin-bottom: 1rem;
 	}
 
-	.list-header {
-		margin: 10px 20px 5px;
-		padding: 15px 0 5px;
-		border-bottom: 1px solid #dad8de;
-		font-size: 16px;
-		font-variant: small-caps;
-
-		.tw-theme--dark & {
-			border-bottom-color: #2c2541;
-		}
-
-		span {
-			opacity: 0.5;
-			font-size: 10px;
-			font-variant: normal;
-		}
-
-		time {
-			float: right;
-			opacity: 0.5;
-		}
-	}
-
 	code {
 		padding: 2px 5px;
 		border-radius: 2px;
@@ -201,14 +178,4 @@
 			background-color: rgba(255,255,255,0.05);
 		}
 	}
-
-	.chat-menu-content {
-		margin: 0 20px 20px;
-	}
-
-	#ffz-old-news-button {
-		text-align: center;
-		text-transform: none;
-		padding-bottom: 15px;
-	}
 }