0.7.0 release-ready: replace twitter emojiset with system emojis

CHANGELOG.md

@@ -3,8 +3,9 @@
 if something is ~~crossed out~~, then it is no longer a feature included by default,
 but can still easily be enabled by following instructions in the [docs](README.md).
 
-### v0.6.1 (wip)
+### v0.7.0 (2020-07-09)
 
+- new: tray option to use system default emojis (instead of twitter's emojiset).
 - new: mac support (identical functionality to others platforms with the
   exception of the native minimise/maximise/close buttons being kept, as they integrate
   better with the OS while not being out-of-place in notion).
@@ -16,10 +17,6 @@ but can still easily be enabled by following instructions in the [docs](README.m
 - bugfix: odd mix of `\\` and `/` being used for windows filepaths.
 - bugfix: app no longer crashes when sidebar is toggled.
 
-known/confirmed remaining issues:
-
-- russian symbols not supported by UTF-8
-
 ### v0.6.0 (2020-06-30)
 
 - style: custom fonts.

README.md

@@ -117,8 +117,10 @@ single-click to toggle app visibility. right click to open menu.
   on click of `⨉`. does not apply if multiple notion windows are open. (default: false)
 - **load theme.css**: loads the custom colour theme file.
   see [colour theming](STYLING.md#colour-theming) for more information. (default: false)
+- **use system emoji**: reverts notion to using normal emojis, rather than the twitter emojiset. (default: false)
 
 ![](screenshots/app-tray.jpg)
+
 _image: open application tray_
 
 ## styling

STYLING.md

@@ -18,7 +18,8 @@ css below will work for every instance of the element, but if you wish to hide o
 
 ## general/app-wide
 
-![](screenshots/app-default.jpg)
+![](screenshots/app-enhanced.jpg)
+
 _image: the default post-customisation appearance_
 
 ### colour theming
@@ -33,6 +34,7 @@ to modify, enter the `theme.css` file and change the colour values within the `:
 should describe what each colour will affect.
 
 ![](screenshots/theme-dark+.jpg)
+
 _image: the dark+ theme_
 
 ### hide discussions (comment threads at the top of each page)
@@ -44,9 +46,11 @@ _image: the dark+ theme_
 ```
 
 ![](screenshots/discussion-default.jpg)
+
 _image: before styling_
 
 ![](screenshots/discussion-hidden.jpg)
+
 _image: after styling_
 
 ### custom fonts
@@ -71,6 +75,7 @@ plenty of other fonts that can be found on google fonts or that may be on your s
 ```
 
 ![](screenshots/fonts-custom.jpg)
+
 _image: after styling_
 
 ### font resizing
@@ -108,6 +113,7 @@ to change the size, change the value of `--font-scale`.
 ```
 
 ![](screenshots/fonts-resized.jpg)
+
 _image: after styling_
 
 ### wider page preview
@@ -119,9 +125,11 @@ _image: after styling_
 ```
 
 ![](screenshots/preview-default.jpg)
+
 _image: before styling_
 
 ![](screenshots/preview-wider.jpg)
+
 _image: after styling_
 
 ### thinner cover image
@@ -137,14 +145,17 @@ _image: after styling_
 ```
 
 ![](screenshots/cover-default.jpg)
+
 _image: before styling_
 
 ![](screenshots/cover-thinner.jpg)
+
 _image: after styling_
 
 ## tables
 
 ![](screenshots/table-before.jpg)
+
 _image: before styling_
 
 ### table columns below 100px
@@ -174,6 +185,7 @@ to see how to do this, watch [this video](https://www.youtube.com/watch?v=6V7eqS
 ```
 
 ![](screenshots/table-columnunder100px.jpg)
+
 _image: after styling_
 
 ### hide '+ new' table row
@@ -185,6 +197,7 @@ _image: after styling_
 ```
 
 ![](screenshots/table-hideaddrow.jpg)
+
 _image: after styling_
 
 ### hide calculations table row
@@ -196,6 +209,7 @@ _image: after styling_
 ```
 
 ![](screenshots/table-hidecalculationsrow.jpg)
+
 _image: after styling_
 
 ### centre-align table column headers
@@ -207,6 +221,7 @@ _image: after styling_
 ```
 
 ![](screenshots/table-centredheaders.jpg)
+
 _image: after styling_
 
 ### smaller table column header icons
@@ -222,6 +237,7 @@ _image: after styling_
 ```
 
 ![](screenshots/table-smallercolumnicons.jpg)
+
 _image: after styling_
 
 ### remove icons from table column headers
@@ -233,6 +249,7 @@ _image: after styling_
 ```
 
 ![](screenshots/table-hidecolumnicons.jpg)
+
 _image: after styling_
 
 ### removing/decreasing side padding for tables
@@ -254,11 +271,13 @@ _image: after styling_
 ```
 
 ![](screenshots/table-shrinkpadding.jpg)
+
 _image: after styling_
 
 ## boards
 
 ![](screenshots/board-default.jpg)
+
 _image: before styling_
 
 ### hide '+ new' board row
@@ -271,6 +290,7 @@ _image: before styling_
 ```
 
 ![](screenshots/board-hideaddnew.jpg)
+
 _image: after styling_
 
 ### hide board view hidden columns
@@ -283,6 +303,7 @@ _image: after styling_
 ```
 
 ![](screenshots/board-hidehidden.jpg)
+
 _image: after styling_
 
 ### hide board view 'add a group'
@@ -295,6 +316,7 @@ _image: after styling_
 ```
 
 ![](screenshots/board-hideaddgroup.jpg)
+
 _image: after styling_
 
 ### removing/decreasing side padding for boards
@@ -307,4 +329,5 @@ _image: after styling_
 ```
 
 ![](screenshots/board-shrinkpadding.jpg)
+
 _image: after styling_

customiser.py

@@ -13,7 +13,7 @@ from shutil import copyfile, rmtree
 from time import sleep
 
 # to smooth the update process
-enhancer_version = '0.6.1~beta4'
+enhancer_version = '0.7.0'
 
 # for toggling notion visibility
 hotkey = 'CmdOrCtrl+Shift+A'

docs/changelog.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html><!-- Documentative--><!-- (c) 2020 dragonwocky <thedragonring.bod@gmail.com>--><!-- (https://dragonwocky.me/) under the MIT license--><html prefix="og: http://ogp.me/ns#"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>changelog | notion enhancer</title><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Code+Pro|Nunito+Sans"><link rel="stylesheet" href="docs.css"><script src="docs.js"></script><link rel="icon" href="notion.png" media="(prefers-color-scheme: dark)"><link rel="icon" href="notion.png"><meta name="title" content="changelog | notion enhancer"><meta name="description" content="an enhancer/customiser for the all-in-one productivity workspace notion.so"><meta name="theme-color" content="rgb(75, 133, 209)"><meta property="og:type" content="article"><meta property="og:url" content="https://dragonwocky.me/notion-enhancer/changelog.html"><meta property="og:title" content="changelog"><meta property="og:site_name" content="notion enhancer"><meta property="og:description" content="an enhancer/customiser for the all-in-one productivity workspace notion.so"><meta property="og:image" content="https://dragonwocky.me/notion-enhancer/notion.png"><meta property="twitter:card" content="summary"></head><body><aside class="menu"><div><div class="title"><h1>notion enhancer</h1><picture class="icon"><source srcset="notion.png" media="(prefers-color-scheme: dark)"><img src="notion.png"></picture></div></div><ul class="nav"><li class="entry"><a href="index.html">notion enhancer</a></li><li class="entry"><a href="styling.html">styling</a></li><li class="entry"><p>resources</p></li><li class="entry"><a href="#changelog">changelog</a><ul><li class="level-3"><a href="#v061-wip">v0.6.1 (wip)</a></li><li class="level-3"><a href="#v060-2020-06-30">v0.6.0 (2020-06-30)</a></li><li class="level-3"><a href="#v050-2020-05-23">v0.5.0 (2020-05-23)</a></li><li class="level-3"><a href="#v041-2020-02-13">v0.4.1 (2020-02-13)</a></li><li class="level-3"><a href="#v040">v0.4.0</a></li><li class="level-3"><a href="#v030">v0.3.0</a></li><li class="level-3"><a href="#v020">v0.2.0</a></li><li class="level-3"><a href="#v010">v0.1.0</a></li></ul></li><li class="entry"><a href="https://github.com/dragonwocky/notion-enhancer/blob/master/LICENSE">license</a></li><li class="entry"><a href="https://github.com/dragonwocky/notion-enhancer/">github</a></li><li class="entry"><a href="https://dragonwocky.me/">me (dragonwocky)</a></li></ul><p class="mark"><a href="https://dragonwocky.me/documentative">docs by documentative</a></p></aside><div class="wrapper"><div class="toggle"><button>☰</button><h1>notion enhancer</h1></div><article class="documentative"><div class="content">
+<!DOCTYPE html><!-- Documentative--><!-- (c) 2020 dragonwocky <thedragonring.bod@gmail.com>--><!-- (https://dragonwocky.me/) under the MIT license--><html prefix="og: http://ogp.me/ns#"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>changelog | notion enhancer</title><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Code+Pro|Nunito+Sans"><link rel="stylesheet" href="docs.css"><script src="docs.js"></script><link rel="icon" href="notion.png" media="(prefers-color-scheme: dark)"><link rel="icon" href="notion.png"><meta name="title" content="changelog | notion enhancer"><meta name="description" content="an enhancer/customiser for the all-in-one productivity workspace notion.so"><meta name="theme-color" content="rgb(75, 133, 209)"><meta property="og:type" content="article"><meta property="og:url" content="https://dragonwocky.me/notion-enhancer/changelog.html"><meta property="og:title" content="changelog"><meta property="og:site_name" content="notion enhancer"><meta property="og:description" content="an enhancer/customiser for the all-in-one productivity workspace notion.so"><meta property="og:image" content="https://dragonwocky.me/notion-enhancer/notion.png"><meta property="twitter:card" content="summary"></head><body><aside class="menu"><div><div class="title"><h1>notion enhancer</h1><picture class="icon"><source srcset="notion.png" media="(prefers-color-scheme: dark)"><img src="notion.png"></picture></div></div><ul class="nav"><li class="entry"><a href="index.html">notion enhancer</a></li><li class="entry"><a href="styling.html">styling</a></li><li class="entry"><p>resources</p></li><li class="entry"><a href="#changelog">changelog</a><ul><li class="level-3"><a href="#v070-2020-07-09">v0.7.0 (2020-07-09)</a></li><li class="level-3"><a href="#v060-2020-06-30">v0.6.0 (2020-06-30)</a></li><li class="level-3"><a href="#v050-2020-05-23">v0.5.0 (2020-05-23)</a></li><li class="level-3"><a href="#v041-2020-02-13">v0.4.1 (2020-02-13)</a></li><li class="level-3"><a href="#v040">v0.4.0</a></li><li class="level-3"><a href="#v030">v0.3.0</a></li><li class="level-3"><a href="#v020">v0.2.0</a></li><li class="level-3"><a href="#v010">v0.1.0</a></li></ul></li><li class="entry"><a href="https://github.com/dragonwocky/notion-enhancer/blob/master/LICENSE">license</a></li><li class="entry"><a href="https://github.com/dragonwocky/notion-enhancer/">github</a></li><li class="entry"><a href="https://dragonwocky.me/">me (dragonwocky)</a></li></ul><p class="mark"><a href="https://dragonwocky.me/documentative">docs by documentative</a></p></aside><div class="wrapper"><div class="toggle"><button>☰</button><h1>notion enhancer</h1></div><article class="documentative"><div class="content">
     
           <section class="block" id="changelog">
             <h1>
@@ -8,24 +8,22 @@
 but can still easily be enabled by following instructions in the <a href="index.html#" title="">docs</a>.</p>
 
           </section>
-          <section class="block" id="v061-wip">
+          <section class="block" id="v070-2020-07-09">
             <h3>
-              <a href="#v061-wip">v0.6.1 (wip)</a>
+              <a href="#v070-2020-07-09">v0.7.0 (2020-07-09)</a>
             </h3>
         <ul>
+<li>new: tray option to use system default emojis (instead of twitter&#39;s emojiset).</li>
 <li>new: mac support (identical functionality to others platforms with the
 exception of the native minimise/maximise/close buttons being kept, as they integrate
 better with the OS while not being out-of-place in notion).</li>
+<li>new: notion-deb-builder support for linux.</li>
 <li>improved: replaced button symbols with svgs for multi-platform support.</li>
 <li>improved: window close button is now red on hover (thanks to <a href="https://github.com/torchatlas#" title="">@torchatlas</a>).</li>
 <li>bugfix: <code>cleaner.py</code> patched for linux.</li>
 <li>bugfix: tray now operates as expected on linux.</li>
 <li>bugfix: odd mix of <code>\\</code> and <code>/</code> being used for windows filepaths.</li>
 <li>bugfix: app no longer crashes when sidebar is toggled.</li>
-</ul>
-<p>known/confirmed remaining issues:</p>
-<ul>
-<li>russian symbols not supported by UTF-8</li>
 </ul>
 
           </section>

docs/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html><!-- Documentative--><!-- (c) 2020 dragonwocky <thedragonring.bod@gmail.com>--><!-- (https://dragonwocky.me/) under the MIT license--><html prefix="og: http://ogp.me/ns#"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>notion enhancer</title><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Code+Pro|Nunito+Sans"><link rel="stylesheet" href="docs.css"><script src="docs.js"></script><link rel="icon" href="notion.png" media="(prefers-color-scheme: dark)"><link rel="icon" href="notion.png"><meta name="title" content="notion enhancer"><meta name="description" content="an enhancer/customiser for the all-in-one productivity workspace notion.so"><meta name="theme-color" content="rgb(75, 133, 209)"><meta property="og:type" content="article"><meta property="og:url" content="https://dragonwocky.me/notion-enhancer/index.html"><meta property="og:title" content="notion enhancer"><meta property="og:site_name" content="notion enhancer"><meta property="og:description" content="an enhancer/customiser for the all-in-one productivity workspace notion.so"><meta property="og:image" content="https://dragonwocky.me/notion-enhancer/notion.png"><meta property="twitter:card" content="summary"></head><body><aside class="menu"><div><div class="title"><h1>notion enhancer</h1><picture class="icon"><source srcset="notion.png" media="(prefers-color-scheme: dark)"><img src="notion.png"></picture></div></div><ul class="nav"><li class="entry"><a href="#notion-enhancer">notion enhancer</a><ul><li class="level-2"><a href="#installation">installation</a></li><li class="level-2"><a href="#faq">faq</a></li><li class="level-2"><a href="#features">features</a></li><li class="level-3"><a href="#titlebar">titlebar</a></li><li class="level-3"><a href="#nicer-scrollbars">nicer scrollbars</a></li><li class="level-3"><a href="#hotkeys">hotkeys</a></li><li class="level-3"><a href="#tray">tray</a></li><li class="level-2"><a href="#styling">styling</a></li><li class="level-2"><a href="#other-details">other details</a></li></ul></li><li class="entry"><a href="styling.html">styling</a></li><li class="entry"><p>resources</p></li><li class="entry"><a href="changelog.html">changelog</a></li><li class="entry"><a href="https://github.com/dragonwocky/notion-enhancer/blob/master/LICENSE">license</a></li><li class="entry"><a href="https://github.com/dragonwocky/notion-enhancer/">github</a></li><li class="entry"><a href="https://dragonwocky.me/">me (dragonwocky)</a></li></ul><p class="mark"><a href="https://dragonwocky.me/documentative">docs by documentative</a></p></aside><div class="wrapper"><div class="toggle"><button>☰</button><h1>notion enhancer</h1></div><article class="documentative"><div class="content">
+<!DOCTYPE html><!-- Documentative--><!-- (c) 2020 dragonwocky <thedragonring.bod@gmail.com>--><!-- (https://dragonwocky.me/) under the MIT license--><html prefix="og: http://ogp.me/ns#"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>notion enhancer</title><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Code+Pro|Nunito+Sans"><link rel="stylesheet" href="docs.css"><script src="docs.js"></script><link rel="icon" href="notion.png" media="(prefers-color-scheme: dark)"><link rel="icon" href="notion.png"><meta name="title" content="notion enhancer"><meta name="description" content="an enhancer/customiser for the all-in-one productivity workspace notion.so"><meta name="theme-color" content="rgb(75, 133, 209)"><meta property="og:type" content="article"><meta property="og:url" content="https://dragonwocky.me/notion-enhancer/index.html"><meta property="og:title" content="notion enhancer"><meta property="og:site_name" content="notion enhancer"><meta property="og:description" content="an enhancer/customiser for the all-in-one productivity workspace notion.so"><meta property="og:image" content="https://dragonwocky.me/notion-enhancer/notion.png"><meta property="twitter:card" content="summary"></head><body><aside class="menu"><div><div class="title"><h1>notion enhancer</h1><picture class="icon"><source srcset="notion.png" media="(prefers-color-scheme: dark)"><img src="notion.png"></picture></div></div><ul class="nav"><li class="entry"><a href="#notion-enhancer">notion enhancer</a><ul><li class="level-2"><a href="#supported-clients">supported clients</a></li><li class="level-2"><a href="#installation">installation</a></li><li class="level-2"><a href="#faq">faq</a></li><li class="level-2"><a href="#features">features</a></li><li class="level-3"><a href="#titlebar">titlebar</a></li><li class="level-3"><a href="#nicer-scrollbars">nicer scrollbars</a></li><li class="level-3"><a href="#hotkeys">hotkeys</a></li><li class="level-3"><a href="#tray">tray</a></li><li class="level-2"><a href="#styling">styling</a></li><li class="level-2"><a href="#other-details">other details</a></li></ul></li><li class="entry"><a href="styling.html">styling</a></li><li class="entry"><p>resources</p></li><li class="entry"><a href="changelog.html">changelog</a></li><li class="entry"><a href="https://github.com/dragonwocky/notion-enhancer/blob/master/LICENSE">license</a></li><li class="entry"><a href="https://github.com/dragonwocky/notion-enhancer/">github</a></li><li class="entry"><a href="https://dragonwocky.me/">me (dragonwocky)</a></li></ul><p class="mark"><a href="https://dragonwocky.me/documentative">docs by documentative</a></p></aside><div class="wrapper"><div class="toggle"><button>☰</button><h1>notion enhancer</h1></div><article class="documentative"><div class="content">
     
           <section class="block" id="notion-enhancer">
             <h1>
@@ -7,14 +7,14 @@
         <p>an enhancer/customiser for the all-in-one productivity workspace <a href="https://www.notion.so/#" title="">notion.so</a></p>
 
           </section>
-          <section class="block" id="installation">
+          <section class="block" id="supported-clients">
             <h2>
-              <a href="#installation">installation</a>
+              <a href="#supported-clients">supported clients</a>
             </h2>
         <p>there are a lot of ways to use notion. some official clients, many not.</p>
 <p>the enhancer supports:</p>
 <ul>
-<li>the windows/mac versions of the app downloadable from <a href="https://notion.so/desktop#" title="">https://notion.so/desktop</a>.</li>
+<li>the <a href="https://notion.so/desktop#" title="">official windows/mac releases</a>.</li>
 <li>the arch linux AUR <a href="https://aur.archlinux.org/packages/notion-app/#" title="">notion-app</a> package</li>
 <li>the linux <a href="https://github.com/jaredallard/notion-app#" title="">notion-app</a> installer</li>
 <li>the debian <a href="https://github.com/davidbailey00/notion-deb-builder/tree/229f2868e117e81858618783b83babd00c595000#" title="">notion-deb-builder</a>.</li>
@@ -30,7 +30,13 @@ so that proper support can be added for all users of that client.</p>
 these can be installed via an extension like <a href="https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne?hl=en#" title="">stylus</a>
 or a built-in feature like <a href="https://www.userchrome.org/#" title="">userChrome.css</a>.)</p>
 <p>if the script is run from the WSL, it will enhance the windows version of the app.</p>
-<ol>
+
+          </section>
+          <section class="block" id="installation">
+            <h2>
+              <a href="#installation">installation</a>
+            </h2>
+        <ol>
 <li>install node.js: <a href="https://nodejs.org/en/download/#" title="">windows/macOS</a>, <a href="https://github.com/mklement0/n-install#" title="">linux/WSL</a>.</li>
 <li>install python: <a href="https://www.python.org/downloads/#" title="">windows/macOS</a>, <a href="https://docs.python-guide.org/starting/install3/linux/#" title="">linux/WSL</a>.</li>
 <li>reboot.</li>
@@ -125,9 +131,10 @@ to your preference. you will need to run or re-run <code>customiser.py</code> af
 on click of <code>⨉</code>. does not apply if multiple notion windows are open. (default: false)</li>
 <li><strong>load theme.css</strong>: loads the custom colour theme file.
 see <a href="styling.html#colour-theming" title="">colour theming</a> for more information. (default: false)</li>
+<li><strong>use system emoji</strong>: reverts notion to using normal emojis, rather than the twitter emojiset. (default: false)</li>
 </ul>
-<p><img loading="lazy" src="screenshots/app-tray.jpg" alt="" title="">
+<p><img loading="lazy" src="screenshots/app-tray.jpg" alt="" title=""></p>
-<em>image: open application tray</em></p>
+<p><em>image: open application tray</em></p>
 
           </section>
           <section class="block" id="styling">

docs/styling.html

@@ -21,8 +21,8 @@ changes will be applied instantly on notion reload
             <h2>
               <a href="#generalapp-wide">general/app-wide</a>
             </h2>
-        <p><img loading="lazy" src="screenshots/app-default.jpg" alt="" title="">
+        <p><img loading="lazy" src="screenshots/app-enhanced.jpg" alt="" title=""></p>
-<em>image: the default post-customisation appearance</em></p>
+<p><em>image: the default post-customisation appearance</em></p>
 
           </section>
           <section class="block" id="colour-theming">
@@ -35,8 +35,8 @@ set up a distribution method (either including them as optionally-enableabled th
 <p>to enable, see the <a href="index.html#tray" title="">tray</a> options.</p>
 <p>to modify, enter the <code>theme.css</code> file and change the colour values within the <code>:root {}</code> - value names
 should describe what each colour will affect.</p>
-<p><img loading="lazy" src="screenshots/theme-dark+.jpg" alt="" title="">
+<p><img loading="lazy" src="screenshots/theme-dark+.jpg" alt="" title=""></p>
-<em>image: the dark+ theme</em></p>
+<p><em>image: the dark+ theme</em></p>
 
           </section>
           <section class="block" id="hide-discussions-comment-threads-at-the-top-of-each-page">
@@ -46,10 +46,10 @@ should describe what each colour will affect.</p>
         <pre><code class="lang-css"><span class="hljs-selector-class">.notion-page-view-discussion</span> {
   <span class="hljs-attribute">display</span>: none <span class="hljs-meta">!important</span>;
 }</code></pre>
-<p><img loading="lazy" src="screenshots/discussion-default.jpg" alt="" title="">
+<p><img loading="lazy" src="screenshots/discussion-default.jpg" alt="" title=""></p>
-<em>image: before styling</em></p>
+<p><em>image: before styling</em></p>
-<p><img loading="lazy" src="screenshots/discussion-hidden.jpg" alt="" title="">
+<p><img loading="lazy" src="screenshots/discussion-hidden.jpg" alt="" title=""></p>
-<em>image: after styling</em></p>
+<p><em>image: after styling</em></p>
 
           </section>
           <section class="block" id="custom-fonts">
@@ -70,8 +70,8 @@ plenty of other fonts that can be found on google fonts or that may be on your s
 <span class="hljs-selector-attr">[style*=<span class="hljs-string">', serif;'</span>]</span> {
   <span class="hljs-attribute">font-family</span>: <span class="hljs-string">'Roboto Slab'</span>, serif <span class="hljs-meta">!important</span>;
 }</code></pre>
-<p><img loading="lazy" src="screenshots/fonts-custom.jpg" alt="" title="">
+<p><img loading="lazy" src="screenshots/fonts-custom.jpg" alt="" title=""></p>
-<em>image: after styling</em></p>
+<p><em>image: after styling</em></p>
 
           </section>
           <section class="block" id="font-resizing">
@@ -105,8 +105,8 @@ it is suggested to instead use <code>ctrl+</code> or <code>ctrl-</code> to scale
 <span class="hljs-selector-attr">[style*=<span class="hljs-string">'font-size: 1.25em'</span>]</span> {
   <span class="hljs-attribute">font-size</span>: <span class="hljs-built_in">calc</span>(var(--font-scale) * <span class="hljs-number">1.25em</span>) <span class="hljs-meta">!important</span>;
 }</code></pre>
-<p><img loading="lazy" src="screenshots/fonts-resized.jpg" alt="" title="">
+<p><img loading="lazy" src="screenshots/fonts-resized.jpg" alt="" title=""></p>
-<em>image: after styling</em></p>
+<p><em>image: after styling</em></p>
 
           </section>
           <section class="block" id="wider-page-preview">
@@ -116,10 +116,10 @@ it is suggested to instead use <code>ctrl+</code> or <code>ctrl-</code> to scale
         <pre><code class="lang-css"><span class="hljs-selector-class">.notion-peek-renderer</span> &gt; <span class="hljs-selector-tag">div</span><span class="hljs-selector-pseudo">:nth-child(2)</span> {
   <span class="hljs-attribute">max-width</span>: <span class="hljs-number">85vw</span> <span class="hljs-meta">!important</span>;
 }</code></pre>
-<p><img loading="lazy" src="screenshots/preview-default.jpg" alt="" title="">
+<p><img loading="lazy" src="screenshots/preview-default.jpg" alt="" title=""></p>
-<em>image: before styling</em></p>
+<p><em>image: before styling</em></p>
-<p><img loading="lazy" src="screenshots/preview-wider.jpg" alt="" title="">
+<p><img loading="lazy" src="screenshots/preview-wider.jpg" alt="" title=""></p>
-<em>image: after styling</em></p>
+<p><em>image: after styling</em></p>
 
           </section>
           <section class="block" id="thinner-cover-image">
@@ -133,18 +133,18 @@ it is suggested to instead use <code>ctrl+</code> or <code>ctrl-</code> to scale
   <span class="hljs-selector-tag">img</span> {
   <span class="hljs-attribute">height</span>: <span class="hljs-number">12vh</span> <span class="hljs-meta">!important</span>;
 }</code></pre>
-<p><img loading="lazy" src="screenshots/cover-default.jpg" alt="" title="">
+<p><img loading="lazy" src="screenshots/cover-default.jpg" alt="" title=""></p>
-<em>image: before styling</em></p>
+<p><em>image: before styling</em></p>
-<p><img loading="lazy" src="screenshots/cover-thinner.jpg" alt="" title="">
+<p><img loading="lazy" src="screenshots/cover-thinner.jpg" alt="" title=""></p>
-<em>image: after styling</em></p>
+<p><em>image: after styling</em></p>
 
           </section>
           <section class="block" id="tables">
             <h2>
               <a href="#tables">tables</a>
             </h2>
-        <p><img loading="lazy" src="screenshots/table-before.jpg" alt="" title="">
+        <p><img loading="lazy" src="screenshots/table-before.jpg" alt="" title=""></p>
-<em>image: before styling</em></p>
+<p><em>image: before styling</em></p>
 
           </section>
           <section class="block" id="table-columns-below-100px">
@@ -170,8 +170,8 @@ as it is a per-table-column style, unlike all others here, it must be prepended
   <span class="hljs-selector-attr">[style^=<span class="hljs-string">'position: absolute; top: 0px; left: 0px; pointer-events: none;'</span>]</span><span class="hljs-selector-pseudo">:not(.notion-presence-container)</span> {
   <span class="hljs-attribute">display</span>: none;
 }</code></pre>
-<p><img loading="lazy" src="screenshots/table-columnunder100px.jpg" alt="" title="">
+<p><img loading="lazy" src="screenshots/table-columnunder100px.jpg" alt="" title=""></p>
-<em>image: after styling</em></p>
+<p><em>image: after styling</em></p>
 
           </section>
           <section class="block" id="hide--new-table-row">
@@ -181,8 +181,8 @@ as it is a per-table-column style, unlike all others here, it must be prepended
         <pre><code class="lang-css"><span class="hljs-selector-class">.notion-table-view-add-row</span> {
   <span class="hljs-attribute">display</span>: none <span class="hljs-meta">!important</span>;
 }</code></pre>
-<p><img loading="lazy" src="screenshots/table-hideaddrow.jpg" alt="" title="">
+<p><img loading="lazy" src="screenshots/table-hideaddrow.jpg" alt="" title=""></p>
-<em>image: after styling</em></p>
+<p><em>image: after styling</em></p>
 
           </section>
           <section class="block" id="hide-calculations-table-row">
@@ -192,8 +192,8 @@ as it is a per-table-column style, unlike all others here, it must be prepended
         <pre><code class="lang-css"><span class="hljs-selector-class">.notion-table-view-add-row</span> + <span class="hljs-selector-tag">div</span> {
   <span class="hljs-attribute">display</span>: none <span class="hljs-meta">!important</span>;
 }</code></pre>
-<p><img loading="lazy" src="screenshots/table-hidecalculationsrow.jpg" alt="" title="">
+<p><img loading="lazy" src="screenshots/table-hidecalculationsrow.jpg" alt="" title=""></p>
-<em>image: after styling</em></p>
+<p><em>image: after styling</em></p>
 
           </section>
           <section class="block" id="centre-align-table-column-headers">
@@ -203,8 +203,8 @@ as it is a per-table-column style, unlike all others here, it must be prepended
         <pre><code class="lang-css"><span class="hljs-selector-class">.notion-table-view-header-cell</span> &gt; <span class="hljs-selector-tag">div</span> &gt; <span class="hljs-selector-tag">div</span> {
   <span class="hljs-attribute">margin</span>: <span class="hljs-number">0px</span> auto;
 }</code></pre>
-<p><img loading="lazy" src="screenshots/table-centredheaders.jpg" alt="" title="">
+<p><img loading="lazy" src="screenshots/table-centredheaders.jpg" alt="" title=""></p>
-<em>image: after styling</em></p>
+<p><em>image: after styling</em></p>
 
           </section>
           <section class="block" id="smaller-table-column-header-icons">
@@ -218,8 +218,8 @@ as it is a per-table-column style, unlike all others here, it must be prepended
   <span class="hljs-attribute">width</span>: <span class="hljs-number">10px</span> <span class="hljs-meta">!important</span>;
   <span class="hljs-attribute">margin-right</span>: -<span class="hljs-number">4px</span>;
 }</code></pre>
-<p><img loading="lazy" src="screenshots/table-smallercolumnicons.jpg" alt="" title="">
+<p><img loading="lazy" src="screenshots/table-smallercolumnicons.jpg" alt="" title=""></p>
-<em>image: after styling</em></p>
+<p><em>image: after styling</em></p>
 
           </section>
           <section class="block" id="remove-icons-from-table-column-headers">
@@ -229,8 +229,8 @@ as it is a per-table-column style, unlike all others here, it must be prepended
         <pre><code class="lang-css"><span class="hljs-selector-class">.notion-table-view-header-cell</span> <span class="hljs-selector-attr">[style^=<span class="hljs-string">'margin-right: 6px;'</span>]</span> {
   <span class="hljs-attribute">display</span>: none <span class="hljs-meta">!important</span>;
 }</code></pre>
-<p><img loading="lazy" src="screenshots/table-hidecolumnicons.jpg" alt="" title="">
+<p><img loading="lazy" src="screenshots/table-hidecolumnicons.jpg" alt="" title=""></p>
-<em>image: after styling</em></p>
+<p><em>image: after styling</em></p>
 
           </section>
           <section class="block" id="removingdecreasing-side-padding-for-tables">
@@ -250,16 +250,16 @@ as it is a per-table-column style, unlike all others here, it must be prepended
   <span class="hljs-attribute">margin-left</span>: <span class="hljs-number">10px</span>;
   <span class="hljs-attribute">margin-right</span>: <span class="hljs-number">10px</span>;
 }</code></pre>
-<p><img loading="lazy" src="screenshots/table-shrinkpadding.jpg" alt="" title="">
+<p><img loading="lazy" src="screenshots/table-shrinkpadding.jpg" alt="" title=""></p>
-<em>image: after styling</em></p>
+<p><em>image: after styling</em></p>
 
           </section>
           <section class="block" id="boards">
             <h2>
               <a href="#boards">boards</a>
             </h2>
-        <p><img loading="lazy" src="screenshots/board-default.jpg" alt="" title="">
+        <p><img loading="lazy" src="screenshots/board-default.jpg" alt="" title=""></p>
-<em>image: before styling</em></p>
+<p><em>image: before styling</em></p>
 
           </section>
           <section class="block" id="hide--new-board-row">
@@ -270,8 +270,8 @@ as it is a per-table-column style, unlike all others here, it must be prepended
   <span class="hljs-selector-attr">[style=<span class="hljs-string">'user-select: none; transition: background 120ms ease-in 0s; cursor: pointer; display: inline-flex; align-items: center; flex-shrink: 0; white-space: nowrap; height: 32px; border-radius: 3px; font-size: 14px; line-height: 1.2; min-width: 0px; padding-left: 6px; padding-right: 8px; color: rgba(255, 255, 255, 0.4); width: 100%;'</span>]</span> {
   <span class="hljs-attribute">display</span>: none <span class="hljs-meta">!important</span>;
 }</code></pre>
-<p><img loading="lazy" src="screenshots/board-hideaddnew.jpg" alt="" title="">
+<p><img loading="lazy" src="screenshots/board-hideaddnew.jpg" alt="" title=""></p>
-<em>image: after styling</em></p>
+<p><em>image: after styling</em></p>
 
           </section>
           <section class="block" id="hide-board-view-hidden-columns">
@@ -282,8 +282,8 @@ as it is a per-table-column style, unlike all others here, it must be prepended
 <span class="hljs-selector-class">.notion-board-view</span> &gt; <span class="hljs-selector-attr">[data-block-id]</span> &gt; <span class="hljs-selector-tag">div</span><span class="hljs-selector-pseudo">:first-child</span> &gt; <span class="hljs-selector-tag">div</span><span class="hljs-selector-pseudo">:nth-last-child(2)</span> {
   <span class="hljs-attribute">display</span>: none <span class="hljs-meta">!important</span>;
 }</code></pre>
-<p><img loading="lazy" src="screenshots/board-hidehidden.jpg" alt="" title="">
+<p><img loading="lazy" src="screenshots/board-hidehidden.jpg" alt="" title=""></p>
-<em>image: after styling</em></p>
+<p><em>image: after styling</em></p>
 
           </section>
           <section class="block" id="hide-board-view-add-a-group">
@@ -294,8 +294,8 @@ as it is a per-table-column style, unlike all others here, it must be prepended
 <span class="hljs-selector-class">.notion-board-view</span> &gt; <span class="hljs-selector-attr">[data-block-id]</span> &gt; <span class="hljs-selector-tag">div</span><span class="hljs-selector-pseudo">:first-child</span> &gt; <span class="hljs-selector-tag">div</span><span class="hljs-selector-pseudo">:last-child</span> {
   <span class="hljs-attribute">display</span>: none <span class="hljs-meta">!important</span>;
 }</code></pre>
-<p><img loading="lazy" src="screenshots/board-hideaddgroup.jpg" alt="" title="">
+<p><img loading="lazy" src="screenshots/board-hideaddgroup.jpg" alt="" title=""></p>
-<em>image: after styling</em></p>
+<p><em>image: after styling</em></p>
 
           </section>
           <section class="block" id="removingdecreasing-side-padding-for-boards">
@@ -306,8 +306,8 @@ as it is a per-table-column style, unlike all others here, it must be prepended
   <span class="hljs-attribute">padding-left</span>: <span class="hljs-number">10px</span> <span class="hljs-meta">!important</span>;
   <span class="hljs-attribute">padding-right</span>: <span class="hljs-number">10px</span> <span class="hljs-meta">!important</span>;
 }</code></pre>
-<p><img loading="lazy" src="screenshots/board-shrinkpadding.jpg" alt="" title="">
+<p><img loading="lazy" src="screenshots/board-shrinkpadding.jpg" alt="" title=""></p>
-<em>image: after styling</em></p>
+<p><em>image: after styling</em></p>
 
     </section></div><footer class="footer"><hr><p><a href="https://github.com/dragonwocky/notion-enhancer/blob/master/STYLING.md">Edit on GitHub</a> // © 2020 dragonwocky &amp; Uzver, under the <a href="https://choosealicense.com/licenses/mit/">MIT license</a>.</p>
 </footer><nav><a class="prev" href="index.html">ᐊ</a><a class="next" href="changelog.html">ᐅ</a></nav></article></div></body></html>

resources/preload.js

@@ -21,6 +21,7 @@ require('electron').remote.getGlobal('setTimeout')(() => {
         maximized: false,
         tray: false,
         theme: false,
+        emoji: false,
       },
     }),
     isMac = process.platform === 'darwin';
@@ -152,6 +153,23 @@ require('electron').remote.getGlobal('setTimeout')(() => {
       button_elements.close.onclick = button_actions.close;
     }
 
+    /* emoji */
+    if (store.emoji) {
+      const observer = new MutationObserver((list, observer) => {
+        document
+          .querySelectorAll('.notion-record-icon .notion-emoji')
+          .forEach((el) => {
+            el.outerHTML = `<span style="font-size: 0.9em; position: relative; bottom: 0.1em; right: 0.05em">
+                ${el.getAttribute('alt')}
+              </span>`;
+          });
+        document.querySelectorAll('.notion-emoji').forEach((el) => {
+          el.outerHTML = `<span>${el.getAttribute('alt')}</span>`;
+        });
+      });
+      observer.observe(document, { childList: true, subtree: true });
+    }
+
     /* hotkey: reload window */
     document.defaultView.addEventListener(
       'keyup',

resources/tray.js

@@ -26,6 +26,7 @@ function enhancements() {
         maximized: false,
         tray: false,
         theme: false,
+        emoji: false,
       },
     });
   tray = new Tray(
@@ -87,6 +88,16 @@ function enhancements() {
         electron_1.BrowserWindow.getAllWindows().forEach((win) => win.reload());
       },
     },
+    {
+      id: 'emoji',
+      label: 'Use system emoji',
+      type: 'checkbox',
+      checked: store.emoji,
+      click: () => {
+        store.emoji = contextMenu.getMenuItemById('emoji').checked;
+        electron_1.BrowserWindow.getAllWindows().forEach((win) => win.reload());
+      },
+    },
     {
       type: 'separator',
     },