🍪 changelog section in settings

NEWS

@@ -1,4 +1,4 @@
-3.0.12 (To be released)
+:tada: 3.0.12 :tada:
 ===============
 - [Fix] Verified badges should display correctly when relevant
 - [Fix] Bring back the like/RT indicator on tweets because TweetDeck killed it

gulpfile.babel.js

@@ -84,9 +84,9 @@ gulp.task('clean', () => del(['dist/']));
 * Simply copy files like images/json to the build folder
 *
 */
-gulp.task('static', () => (
-  gulp.src(staticFiles, { base: './src' }).pipe(gulp.dest('./dist'))
-));
+gulp.task('static', () => gulp.src(staticFiles, { base: './src' }).pipe(gulp.dest('./dist')) );
+
+gulp.task('static-news', () => gulp.src('./NEWS').pipe(gulp.dest('./dist/options/')) );
 
 /*
 *
@@ -152,7 +152,7 @@ gulp.task('lint', () => (
 *
 */
 gulp.task('build', (done) => {
-  runSequence('clean', ['js', 'static', 'css', 'css-options'], done);
+  runSequence('clean', ['js', 'static', 'css', 'css-options'], 'static-news', done);
 });
 
 /*
@@ -162,10 +162,11 @@ gulp.task('build', (done) => {
 *
 */
 gulp.task('default', (done) => {
-  runSequence('clean', ['css', 'css-options', 'js', 'static'], () => {
+  runSequence('clean', ['css', 'css-options', 'js', 'static'], 'static-news', () => {
     gulp.watch(['./src/js/**/*.js',  './src/options/*.js'], ['js', 'js-options']);
     gulp.watch(['./src/css/**/*.css'], ['css', 'css-options']);
-    gulp.watch(staticFiles, ['static']);
+    gulp.watch(staticFiles, ['static', 'static-news']);
+    gulp.watch('./NEWS', ['static-news']);
     done();
   });
 });

package.json

@@ -44,6 +44,7 @@
     "jquery": "^3.0.0",
     "js-emoji": "https://github.com/iamcal/js-emoji/tarball/v3.0.2",
     "lodash": "^4.0.0",
+    "marked": "^0.3.6",
     "mustache": "^2.2.1",
     "needle": "^1.0.0",
     "normalize.css": "^4.1.1",

src/_locales/en/messages.json

@@ -14,6 +14,7 @@
   "sec_content": { "message": "Content" },
   "sec_welcome": { "message": "Welcome" },
   "sec_credits": { "message": "Credits / About" },
+  "sec_changelog": { "message": "Changelog" },
   "sec_debug": { "message": "Debug Infos" },
   "sec_links": { "message": "Links" },
   "sec_donate": { "message": "Donate" },

src/_locales/fr/messages.json

@@ -14,6 +14,7 @@
   "sec_content": { "message": "Contenu" },
   "sec_welcome": { "message": "Bienvenue" },
   "sec_credits": { "message": "Crédits / A Propos" },
+  "sec_changelog": { "message": "Nouveautés" },
   "sec_debug": { "message": "Déboggage" },
   "sec_links": { "message": "Liens" },
   "sec_donate": { "message": "Faire un don" },

src/css/options/index.css

@@ -1,5 +1,5 @@
 @import "normalize.css";
-@import "../../../node_modules/prismjs/themes/prism.css";
+@import "../../../node_modules/prismjs/themes/prism-solarizedlight.css";
 
 @import "./save-bar.css";
 @import "./sidebar.css";
@@ -106,8 +106,11 @@ body {
     column-count: 2;
   }
 
-  ul, ol {
+  &:not(.changelog) :matches(ul, ol) {
     list-style: none;
+  }
+
+  ul, ol {
     padding-left: .7em;
     font-size: 14px;
 
@@ -175,3 +178,50 @@ body {
     }
   }
 }
+
+span.emoji {
+	display: -moz-inline-box;
+	-moz-box-orient: vertical;
+	display: inline-block;
+	vertical-align: baseline;
+	*vertical-align: auto;
+	*zoom: 1;
+	*display: inline;
+	width: 1em;
+	height: 1em;
+	background-size: 1em;
+	background-repeat: no-repeat;
+	text-indent: -9999px;
+	background-position: 50%, 50%;
+	background-size: contain;
+}
+
+span.emoji-sizer {
+	line-height: 0.81em;
+	font-size: 1em;
+ 	margin: -2px 0;
+}
+
+span.emoji-outer {
+	display: -moz-inline-box;
+	display: inline-block;
+	*display: inline;
+	height: 1em;
+	width: 1em;
+}
+
+span.emoji-inner {
+	display: -moz-inline-box;
+	display: inline-block;
+	text-indent: -9999px;
+	width: 100%;
+	height: 100%;
+	vertical-align: baseline;
+	*vertical-align: auto;
+	*zoom: 1;
+}
+
+img.emoji {
+	width: 1em;
+	height: 1em;
+}

src/js/content.js

@@ -434,7 +434,7 @@ on('BTDC_ready', () => {
   const settingsBtn = `
   <a class="btd-settings-btn js-header-action link-clean cf app-nav-link padding-hl" data-title="Better TweetDeck Settings"> <div class="obj-left"> <i class="icon icon-sliders icon-large"></i> </div> <div class="nbfc padding-ts hide-condensed">Better TweetDeck Settings</div> </a>
   `;
-  $('nav.app-navigator')[0].insertAdjacentHTML('beforeend', settingsBtn);
+  $('nav.app-navigator')[0].insertAdjacentHTML('afterbegin', settingsBtn);
   $('.btd-settings-btn')[0].addEventListener('click', (e) => {
     e.preventDefault();
     window.open(settingsURL);

src/manifest.json

@@ -42,5 +42,5 @@
 		"chrome_style": false
 	},
 	"web_accessible_resources": ["js/inject.js", "js/content.js.map", "js/inject.js.map", "js/background.js.map", "emojis/sheet_twitter_64.png", "emojis/emoji-happy.svg", "icons/controller-play.svg", "options/options.html"],
-	"content_security_policy": "img-src 'self' *; default-src; connect-src * https:"
+	"content_security_policy": "img-src 'self' *; default-src; connect-src * https:; style-src 'unsafe-inline'"
 }

src/options/options.html

@@ -33,6 +33,7 @@ <h3 class="sidebar-title">Meta</h3>
       <nav class="sidebar-nav">
         <a href="#onInstall" class="nav-item" data-lang="sec_welcome">Welcome</a>
         <a href="#credits" class="nav-item" data-lang="sec_credits">Credits / About</a>
+        <a href="#changelog" class="nav-item" data-lang="sec_changelog">Changelog</a>
         <a href="#donate" class="nav-item" data-lang="sec_donate">Donate</a>
         <a href="#debug" class="nav-item" data-lang="sec_debug">Debug Infos</a>
       </nav>
@@ -292,7 +293,14 @@ <h5 data-lang="sec_settings">Settings dump</h5>
 
         <pre class="settings-pre"><code class="settings-dump language-json"></code></pre>
       </div>
-      <button class="save-button" disabled data-lang="save_no">No changes</button>
+    </section>
+
+    <section class="content-block" id="changelog">
+      <h2 class="section-title" data-lang="sec_changelog">Changelog</h2>
+
+      <div class="settings-section changelog">
+
+      </div>
     </section>
 
     <section class="content-block" id="donate">

src/options/options.js

@@ -4,9 +4,17 @@ import { schemeWhitelist } from '../js/util/thumbnails';
 import $ from 'jquery';
 import _ from 'lodash';
 import Prism from 'prismjs';
+import marked from 'marked';
 import queryString from 'query-string';
 import fecha from 'fecha';
 
+import jsEmoji from 'js-emoji';
+const Emoji = new jsEmoji.EmojiConvertor();
+Emoji.img_set = 'twitter';
+Emoji.replace_mode = 'css';
+Emoji.supports_css = true;
+Emoji.use_sheet = true;
+
 function refreshPreviews(settings) {
   if (settings.nm_disp) {
     let html;
@@ -320,6 +328,10 @@ fetch('https://api.github.com/repos/eramdam/BetterTweetDeck/contributors').then(
   });
 });
 
+fetch(chrome.extension.getURL('options/NEWS')).then(res => res.text()).then(body => {
+  $('.settings-section.changelog')[0].innerHTML = Emoji.replace_colons(marked(body)).split('/emoji-data/sheet_twitter_64.png').join(chrome.extension.getURL('emojis/sheet_twitter_64.png'));
+});
+
 // Because nobody got time to write that HTML by hand, right?
 const usedDeps = [
   { name: 'BabelJS', url: 'https://babeljs.io/' },