Resolve templating issues before decaffinating

package.json

@@ -68,8 +68,7 @@
       "https://www.sushigirl.us/*",
       "https://tvch.moe/*"
     ],
-    "matches_extra": [
+    "matches_extra": [],
-    ],
     "exclude_matches": [
       "*://www.4chan.org/advertise",
       "*://www.4chan.org/advertise?*",
@@ -102,8 +101,10 @@
     }
   },
   "devDependencies": {
+    "@rollup/pluginutils": "^5.0.2",
     "chrome-webstore-upload": "^0.4.4",
     "coffeescript": "=1.12.7",
+    "decaffeinate": "^8.1.3",
     "esprima": "^4.0.1",
     "font-awesome": "=4.7.0",
     "jshint": "^2.13.4",
@@ -111,7 +112,8 @@
     "lodash.template": "^4.5.0",
     "markdown-it": "^12.3.2",
     "markdown-it-anchor": "^7.1.0",
-    "request": "^2.88.2"
+    "request": "^2.88.2",
+    "rollup": "^3.17.2"
   },
   "repository": {
     "type": "git",
@@ -129,6 +131,7 @@
   "license": "MIT",
   "readmeFilename": "README.md",
   "engines": {
-    "node": ">=0.10"
+    "node": ">=14.0.0"
-  }
+  },
+  "type": "module"
 }

src/Archive/Redirect.coffee

@@ -1,11 +1,8 @@
+import archives from './archives.js';
+
 Redirect =
-  archives:
+  # TODO check
-    ```<%=
+  archives: archives
-      JSON.stringify(readJSON('archives.json'), null, 2)
-        .replace(/\n {2,}(?!{)/g, ' ')
-        .replace(/\n/g, '\n    ')
-        .replace(/`/g, '\\`')
-    %>```
 
   init: ->
     @selectArchives()

src/Archive/archives.js

@@ -1,4 +1,4 @@
-[{
+const archives = [{
   "uid": 3,
   "name": "4plebs",
   "domain": "archive.4plebs.org",
@@ -99,4 +99,6 @@
   "boards": ["bant", "c", "con", "e", "i", "n", "news", "out", "p", "pw", "qst", "toy", "vip", "vp", "vt", "w", "wg", "wsr"],
   "files": ["bant", "c", "e", "i", "n", "news", "out", "p", "pw", "qst", "toy", "vip", "vp", "vt", "w", "wg", "wsr"],
   "reports": true
-}]
+}];
+
+export default archives;

src/Filtering/Filter.coffee

@@ -290,7 +290,7 @@ Filter =
       $('span', notice.el).textContent = "#{notice.filters.length} MD5s filtered."
     else
       msg = $.el 'div',
-        `<%= html('<span>MD5 filtered.</span> [<a href="javascript:;">show</a>] [<a href="javascript:;">undo</a>]') %>`
+        `{innerHTML: "<span>MD5 filtered.</span> [<a href=\"javascript:;\">show</a>] [<a href=\"javascript:;\">undo</a>]"}`
       notice = Filter.quickFilterMD5.notice = new Notice 'info', msg, undefined, ->
         delete Filter.quickFilterMD5.notice
       notice.filters = [filter]

src/Filtering/ThreadHiding.coffee

@@ -139,7 +139,7 @@ ThreadHiding =
     a = $.el 'a',
       className: "#{type}-thread-button"
       href:      'javascript:;'
-    $.extend a, `<%= html('<span class="fa fa-?{type === "hide"}{minus}{plus}-square"></span>') %>`
+    $.extend a, `{innerHTML: "<span class=\"fa fa-" + ((type === "hide") ? "minus" : "plus") + "-square\"></span>"}`
     a.dataset.fullID = thread.fullID
     $.on a, 'click', ThreadHiding.toggle
     a

src/General/Header.coffee

@@ -11,7 +11,7 @@ Header =
 
     menuButton = $.el 'span',
       className: 'menu-button'
-    $.extend menuButton, `<%= html('<i></i>') %>`
+    $.extend menuButton, `{innerHTML: "<i></i>"}`
 
     box = UI.checkbox
 
@@ -142,16 +142,7 @@ Header =
   setBoardList: ->
     Header.boardList = boardList = $.el 'span',
       id: 'board-list'
-    $.extend boardList, `<%= html(
+    $.extend boardList, `{innerHTML: "<span id=\"custom-board-list\"></span><span id=\"full-board-list\" hidden><span class=\"hide-board-list-container brackets-wrap\"><a href=\"javascript:;\" class=\"hide-board-list-button\">&nbsp;-&nbsp;</a></span> <span class=\"boardList\"></span></span>"}`
-      '<span id="custom-board-list"></span>' +
-      '<span id="full-board-list" hidden>' +
-        '<span class="hide-board-list-container brackets-wrap">' +
-          '<a href="javascript:;" class="hide-board-list-button">&nbsp;-&nbsp;</a>' +
-        '</span>' +
-        ' ' +
-        '<span class="boardList"></span>' +
-      '</span>'
-    ) %>`
 
     btn = $('.hide-board-list-button', boardList)
     $.on btn, 'click', Header.toggleBoardList
@@ -546,12 +537,9 @@ Header =
         # but it'll still work if status is 'default'.
         return
 
+    # TODO meta
     el = $.el 'span',
-      `<%= html(
+      `{innerHTML: "meta.name needs your permission to show desktop notifications. [<a href=\"meta.faq#why-is-4chan-x-asking-for-permission-to-show-desktop-notifications\" target=\"_blank\">FAQ</a>]<br><button>Authorize</button> or <button>Disable</button>"}`
-        meta.name + ' needs your permission to show desktop notifications. ' +
-        '[<a href="' + meta.faq + '#why-is-4chan-x-asking-for-permission-to-show-desktop-notifications" target="_blank">FAQ</a>]<br>' +
-        '<button>Authorize</button> or <button>Disable</button>'
-      ) %>`
     [authorize, disable] = $$ 'button', el
     $.on authorize, 'click', ->
       Notification.requestPermission (status) ->

src/General/Index.coffee

@@ -1,3 +1,6 @@
+import NavLinksPage from './Index/NavLinks.html'
+import PageListPage from './Index/PageList.html'
+
 Index =
   showHiddenThreads: false
   changed: {}
@@ -85,7 +88,7 @@ Index =
 
     # Navigation links at top of index
     @navLinks = $.el 'div', className: 'navLinks json-index'
-    $.extend @navLinks, `<%= readHTML('NavLinks.html') %>`
+    $.extend @navLinks, `{innerHTML: NavLinksPage}`
     $('.cataloglink a', @navLinks).href = CatalogLinks.catalog()
     $('.archlistlink', @navLinks).hidden = true unless BoardConfig.isArchived(g.BOARD.ID)
     $.on $('#index-last-refresh a', @navLinks), 'click', @cb.refreshFront
@@ -134,7 +137,7 @@ Index =
 
     # Page list
     @pagelist = $.el 'div', className: 'pagelist json-index'
-    $.extend @pagelist, `<%= readHTML('PageList.html') %>`
+    $.extend @pagelist, `{innerHTML: PageList}`
     $('.cataloglink a', @pagelist).href = CatalogLinks.catalog()
     $.on @pagelist, 'click', @cb.pageNav
 
@@ -188,7 +191,7 @@ Index =
 
     threadIDs = Index.threadsOnPage pageNum
     Index.buildStructure threadIDs
-    
+
   endNotice: do ->
     notify = false
     reset = -> notify = false
@@ -206,7 +209,7 @@ Index =
         el: $.el 'a',
           href:      'javascript:;'
           className: 'has-shortcut-text'
-        , `<%= html('<span></span><span class="shortcut-text">Shift+click</span>') %>`
+        , `{innerHTML: "<span></span><span class=\"shortcut-text\">Shift+click</span>"}`
         order: 20
         open: ({thread}) ->
           return false if Conf['Index Mode'] isnt 'catalog'

src/General/Settings.coffee

@@ -1,3 +1,10 @@
+import SettingsPage from './Settings/Settings.html'
+import FilterGuidePage from './Settings/Filter-guide.html'
+import SaucePage from './Settings/Sauce.html'
+import AdvancedPage from './Settings/Advanced.html'
+import KeybindsPage from './Settings/Keybinds.html'
+import FilterSelectPage from './Settings/Filter-select.html'
+
 Settings =
   init: ->
     # 4chan X settings link
@@ -43,8 +50,7 @@ Settings =
 
     Settings.dialog = dialog = $.el 'div',
       id:        'overlay'
-    ,
+    , `{ innerHTML: SettingsPage }`
-      `<%= readHTML('Settings.html') %>`
 
     $.on $('.export', dialog), 'click',  Settings.export
     $.on $('.import', dialog), 'click',  Settings.import
@@ -112,16 +118,16 @@ Settings =
       $.onExists doc, '.adg-rects > .desktop', (ad) -> $.onExists ad, 'iframe', ->
         url = Redirect.to 'thread', {boardID: 'qa', threadID: 362590}
         cb $.el 'li',
-          `<%= html(
+          `{ innerHTML:
             'To protect yourself from <a href="${url}" target="_blank">malicious ads</a>,' +
             ' you should <a href="https://github.com/gorhill/uBlock#ublock-origin" target="_blank">block ads</a> on 4chan.'
-          ) %>`
+          }`
 
   main: (section) ->
     warnings = $.el 'fieldset',
       hidden: true
     ,
-      `<%= html('<legend>Warnings</legend><ul></ul>') %>`
+      `{innerHTML: '<legend>Warnings</legend><ul></ul>'}`
     addWarning = (item) ->
       $.add $('ul', warnings), item
       warnings.hidden = false
@@ -136,7 +142,7 @@ Settings =
       for key, arr of obj when arr instanceof Array
         description = arr[1]
         div = $.el 'div',
-          `<%= html('<label><input type="checkbox" name="${key}">${key}</label><span class="description">: ${description}</span>') %>`
+          `{innerHTML: '<label><input type="checkbox" name="${key}">${key}</label><span class="description">: ${description}</span>'}`
         div.dataset.name = key
         input = $ 'input', div
         $.on input, 'change', $.cb.checked
@@ -154,11 +160,11 @@ Settings =
 
     for keyFS, obj of Config.main
       fs = $.el 'fieldset',
-        `<%= html('<legend>${keyFS}</legend>') %>`
+        `{innerHTML: '<legend>${keyFS}</legend>'}`
       addCheckboxes fs, obj
       if keyFS is 'Posting and Captchas'
         $.add fs, $.el 'p',
-          `<%= html('For more info on captcha options and issues, see the <a href="' + meta.captchaFAQ + '" target="_blank">captcha FAQ</a>.') %>`
+          `{innerHTML: 'For more info on captcha options and issues, see the <a href="' + meta.captchaFAQ + '" target="_blank">captcha FAQ</a>.'}`
       $.add section, fs
     addCheckboxes $('div[data-name="JSON Index"] > .suboption-list', section), Config.Index
 
@@ -177,7 +183,7 @@ Settings =
       return
 
     div = $.el 'div',
-      `<%= html('<button></button><span class="description">: Clear manually-hidden threads and posts on all boards. Reload the page to apply.') %>`
+      `{innerHTML: '<button></button><span class="description">: Clear manually-hidden threads and posts on all boards. Reload the page to apply.'}`
     button = $ 'button', div
     $.get {hiddenThreads: $.dict(), hiddenPosts: $.dict()}, ({hiddenThreads, hiddenPosts}) ->
       hiddenNum = 0
@@ -565,7 +571,7 @@ Settings =
           window.location.reload()
 
   filter: (section) ->
-    $.extend section, `<%= readHTML('Filter-select.html') %>`
+    $.extend section, `{ innerHTML: FilterSelectPage }`
     select = $ 'select', section
     $.on select, 'change', Settings.selectFilter
     Settings.selectFilter.call select
@@ -585,12 +591,12 @@ Settings =
         $.add div, ta
       return
     filterTypes = Object.keys(Config.filter).filter((x) -> x isnt 'general').map (x, i) ->
-      `<%= html('?{i}{,}<wbr>${x}') %>`
+      `{innerHTML: '?{i}{,}<wbr>${x}'}`
-    $.extend div, `<%= readHTML('Filter-guide.html') %>`
+    $.extend div, `{ innerHTML: FilterGuidePage }`
     $('.warning', div).hidden = Conf['Filter']
 
   sauce: (section) ->
-    $.extend section, `<%= readHTML('Sauce.html') %>`
+    $.extend section, `{ innerHTML: SaucePage }`
     $('.warning', section).hidden = Conf['Sauce']
     ta = $ 'textarea', section
     $.get 'sauces', Conf['sauces'], (item) ->
@@ -599,7 +605,7 @@ Settings =
     $.on ta, 'change', $.cb.value
 
   advanced: (section) ->
-    $.extend section, `<%= readHTML('Advanced.html') %>`
+    $.extend section, `{ innerHTML: AdvancedPage }`
     warning.hidden = Conf[warning.dataset.feature] for warning in $$ '.warning', section
 
     inputs = $.dict()
@@ -748,7 +754,7 @@ Settings =
         textContent: archive[1]
       }
 
-    $.extend td, `<%= html('<select></select>') %>`
+    $.extend td, `{innerHTML: '<select></select>'}`
     select = td.firstElementChild
     if not (select.disabled = length is 1)
       # XXX GM can't into datasets
@@ -811,7 +817,7 @@ Settings =
     $.cb.checked.call @
 
   keybinds: (section) ->
-    $.extend section, `<%= readHTML('Keybinds.html') %>`
+    $.extend section, `{ innerHTML: KeybindsPage }`
     $('.warning', section).hidden = Conf['Keybinds']
 
     tbody  = $ 'tbody', section
@@ -819,7 +825,7 @@ Settings =
     inputs = $.dict()
     for key, arr of Config.hotkeys
       tr = $.el 'tr',
-        `<%= html('<td>${arr[1]}</td><td><input class="field"></td>') %>`
+        `{innerHTML: '<td>${arr[1]}</td><td><input class="field"></td>'}`
       input = $ 'input', tr
       input.name = key
       input.spellcheck = false

src/Images/Gallery.coffee

@@ -1,3 +1,5 @@
+import galleryPage from './Gallery/Gallery.html'
+
 Gallery =
   init: ->
     return if not (@enabled = Conf['Gallery'] and g.VIEW in ['index', 'thread'])
@@ -43,7 +45,7 @@ Gallery =
 
     nodes.el = dialog = $.el 'div',
       id: 'a-gallery'
-    $.extend dialog, `<%= readHTML('Gallery.html') %>`
+    $.extend dialog, {innerHTML: galleryPage }
 
     nodes[key] = $ value, dialog for key, value of {
       buttons: '.gal-buttons'
@@ -404,7 +406,7 @@ Gallery =
     createSubEntries: ->
       subEntries = (Gallery.menu.createSubEntry item for item in ['Hide Thumbnails', 'Fit Width', 'Fit Height', 'Stretch to Fit', 'Scroll to Post'])
 
-      delayLabel = $.el 'label', `<%= html('Slide Delay: <input type="number" name="Slide Delay" min="0" step="any" class="field">') %>`
+      delayLabel = $.el 'label', `{innerHTML: 'Slide Delay: <input type="number" name="Slide Delay" min="0" step="any" class="field">'}`
       delayInput = delayLabel.firstElementChild
       delayInput.value = Gallery.delay
       $.on delayInput, 'change', Gallery.cb.setDelay

src/Images/ImageExpand.coffee

@@ -12,7 +12,7 @@ ImageExpand =
     Header.addShortcut 'expand-all', @EAI, 520
     $.on d, 'scroll visibilitychange', @cb.playVideos
     @videoControls = $.el 'span', className: 'video-controls'
-    $.extend @videoControls, `<%= html(' <a href="javascript:;" title="You can also contract the video by dragging it to the left.">contract</a>') %>`
+    $.extend @videoControls, `{innerHTML: " <a href=\"javascript:;\" title=\"You can also contract the video by dragging it to the left.\">contract</a>"}`
 
     Callbacks.Post.push
       name: 'Image Expansion'

src/Images/Metadata.coffee

@@ -15,7 +15,7 @@ Metadata =
           className: 'webm-title'
         el.dataset.index = i
         $.extend el,
-          `<%= html('<a href="javascript:;"></a>') %>`
+          `{innerHTML: "<a href=\"javascript:;\"></a>"}`
         $.add file.text, [$.tn(' '), el]
       $.one el.lastElementChild, 'mouseover focus', Metadata.load if el.children.length is 1
     return

src/Images/Volume.coffee

@@ -29,7 +29,7 @@ Volume =
     volumeEntry = $.el 'label',
       title: 'Default volume for videos.'
     $.extend volumeEntry,
-      `<%= html('<input name="Default Volume" type="range" min="0" max="1" step="0.01" value="${Conf["Default Volume"]}"> Volume') %>`
+      `{innerHTML: "<input name=\"Default Volume\" type=\"range\" min=\"0\" max=\"1\" step=\"0.01\" value=\"" + E(Conf["Default Volume"]) + "\"> Volume"}`
 
     @inputs =
       unmute: unmuteEntry.firstElementChild

src/Linkification/Embedding.coffee

@@ -1,3 +1,5 @@
+import EmbeddingPage from './Ebedding/embedding.html'
+
 Embedding =
   init: ->
     return unless g.VIEW in ['index', 'thread', 'archive'] and Conf['Linkify'] and (Conf['Embedding'] or Conf['Link Title'] or Conf['Cover Preview'])
@@ -6,7 +8,7 @@ Embedding =
 
     if Conf['Embedding'] and g.VIEW isnt 'archive'
       @dialog = UI.dialog 'embedding',
-        `<%= readHTML('Embed.html') %>`
+        `{ innerHTML: EmbeddingPage }`
       @media = $ '#media-embed', @dialog
       $.one d, '4chanXInitFinished', @ready
       $.on  d, 'IndexRefreshInternal', ->
@@ -62,7 +64,7 @@ Embedding =
       className:   'embedder'
       href:        'javascript:;'
     ,
-      `<%= html('(<span>un</span>embed)') %>`
+      `{innerHTML: '(<span>un</span>embed)'}`
 
     embed.dataset[name] = value for name, value of {key, uid, options, href}
 
@@ -223,7 +225,7 @@ Embedding =
       regExp: /^[^?#]+\.(?:gif|png|jpg|jpeg|bmp|webp)(?::\w+)?(?:[?#]|$)/i
       style: ''
       el: (a) ->
-        $.el 'div', `<%= html('<a target="_blank" href="${a.dataset.href}"><img src="${a.dataset.href}" style="max-width: 80vw; max-height: 80vh;"></a>') %>`
+        $.el 'div', `{innerHTML: '<a target="_blank" href="${a.dataset.href}"><img src="${a.dataset.href}" style="max-width: 80vw; max-height: 80vh;"></a>'}`
     ,
       key: 'video'
       regExp: /^[^?#]+\.(?:og[gv]|webm|mp4)(?:[?#]|$)/i

src/Menu/DeleteLink.coffee

@@ -93,7 +93,7 @@ DeleteLink =
 
     link.textContent = DeleteLink.linkText fileOnly
     if resDoc.title is '4chan - Banned' # Ban/warn check
-      el = $.el 'span', `<%= html('You can&#039;t delete posts because you are <a href="//www.4chan.org/banned" target="_blank">banned</a>.') %>`
+      el = $.el 'span', `{innerHTML: "You can&#039;t delete posts because you are <a href=\"//www.4chan.org/banned\" target=\"_blank\">banned</a>."}`
       new Notice 'warning', el, 20
     else if msg = resDoc.getElementById 'errmsg' # error!
       new Notice 'warning', msg.textContent, 20

src/Menu/Menu.coffee

@@ -6,7 +6,7 @@ Menu =
       className: 'menu-button'
       href:      'javascript:;'
 
-    $.extend @button, `<%= html('<i class="fa fa-angle-down"></i>') %>`
+    $.extend @button, `{innerHTML: "<i class=\"fa fa-angle-down\"></i>"}`
 
     @menu = new UI.Menu 'post'
     Callbacks.Post.push

src/Miscellaneous/FileInfo.coffee

@@ -29,9 +29,9 @@ FileInfo =
       output.push if $.hasOwn(FileInfo.formatters, c)
         FileInfo.formatters[c].call post
       else
-        `<%= html('${s}') %>`
+        `{innerHTML: E(s)}`
       ''
-    $.extend outputNode, `<%= html('@{output}') %>`
+    $.extend outputNode, `{innerHTML: E.cat(output)}`
     for a in $$ '.download-button', outputNode
       $.on a, 'click', ImageCommon.download
     for a in $$ '.quick-filter-md5', outputNode
@@ -39,25 +39,25 @@ FileInfo =
     return
 
   formatters:
-    t: -> `<%= html('${this.file.url.match(/[^\/]*$/)[0]}') %>`
+    t: -> `{innerHTML: E(this.file.url.match(/[^/]*$/)[0])}`
-    T: -> `<%= html('<a href="${this.file.url}" target="_blank">&{FileInfo.formatters.t.call(this)}</a>') %>`
+    T: -> `{innerHTML: "<a href=\"" + E(this.file.url) + "\" target=\"_blank\">" + (FileInfo.formatters.t.call(this)).innerHTML + "</a>"}`
-    l: -> `<%= html('<a href="${this.file.url}" target="_blank">&{FileInfo.formatters.n.call(this)}</a>') %>`
+    l: -> `{innerHTML: "<a href=\"" + E(this.file.url) + "\" target=\"_blank\">" + (FileInfo.formatters.n.call(this)).innerHTML + "</a>"}`
-    L: -> `<%= html('<a href="${this.file.url}" target="_blank">&{FileInfo.formatters.N.call(this)}</a>') %>`
+    L: -> `{innerHTML: "<a href=\"" + E(this.file.url) + "\" target=\"_blank\">" + (FileInfo.formatters.N.call(this)).innerHTML + "</a>"}`
     n: ->
       fullname  = @file.name
       shortname = SW.yotsuba.Build.shortFilename @file.name, @isReply
       if fullname is shortname
-        `<%= html('${fullname}') %>`
+        `{innerHTML: E(fullname)}`
       else
-        `<%= html('<span class="fnswitch"><span class="fntrunc">${shortname}</span><span class="fnfull">${fullname}</span></span>') %>`
+        `{innerHTML: "<span class=\"fnswitch\"><span class=\"fntrunc\">" + E(shortname) + "</span><span class=\"fnfull\">" + E(fullname) + "</span></span>"}`
-    N: -> `<%= html('${this.file.name}') %>`
+    N: -> `{innerHTML: E(this.file.name)}`
-    d: -> `<%= html('<a href="${this.file.url}" download="${this.file.name}" class="fa fa-download download-button"></a>') %>`
+    d: -> `{innerHTML: "<a href=\"" + E(this.file.url) + "\" download=\"" + E(this.file.name) + "\" class=\"fa fa-download download-button\"></a>"}`
-    f: -> `<%= html('<a href="javascript:;" class="fa fa-times quick-filter-md5"></a>') %>`
+    f: -> `{innerHTML: "<a href=\"javascript:;\" class=\"fa fa-times quick-filter-md5\"></a>"}`
-    p: -> `<%= html('?{this.file.isSpoiler}{Spoiler, }') %>`
+    p: -> `{innerHTML: ((this.file.isSpoiler) ? "Spoiler, " : "")}`
-    s: -> `<%= html('${this.file.size}') %>`
+    s: -> `{innerHTML: E(this.file.size)}`
-    B: -> `<%= html('${Math.round(this.file.sizeInBytes)} Bytes') %>`
+    B: -> `{innerHTML: E(Math.round(this.file.sizeInBytes)) + " Bytes"}`
-    K: -> `<%= html('${Math.round(this.file.sizeInBytes/1024)} KB') %>`
+    K: -> `{innerHTML: E(Math.round(this.file.sizeInBytes/1024)) + " KB"}`
-    M: -> `<%= html('${Math.round(this.file.sizeInBytes/1048576*100)/100} MB') %>`
+    M: -> `{innerHTML: E(Math.round(this.file.sizeInBytes/1048576*100)/100) + " MB"}`
-    r: -> `<%= html('${this.file.dimensions || "PDF"}') %>`
+    r: -> `{innerHTML: E(this.file.dimensions || "PDF")}`
-    g: -> `<%= html('?{this.file.tag}{, ${this.file.tag}}{}') %>`
+    g: -> `{innerHTML: ((this.file.tag) ? ", " + E(this.file.tag) : "")}`
-    '%': -> `<%= html('%') %>`
+    '%': -> `{innerHTML: "%"}`

src/Miscellaneous/ModContact.coffee

@@ -16,19 +16,13 @@ ModContact =
       $.add @nodes.post, moveNote
 
   template: (capcode) ->
-    `<%= html(
+    `{innerHTML: "<a href=\"https://www.4chan.org/feedback\" target=\"_blank\">feedback</a>" + (ModContact.specific[capcode]()).innerHTML}`
-      '<a href="https://www.4chan.org/feedback" target="_blank">feedback</a>&{ModContact.specific[capcode]()}'
-    ) %>`
 
   specific:
-    Mod:       -> `<%= html(' <a href="https://www.4chan-x.net/4chan-irc.html" target="_blank">IRC</a>') %>`
+    Mod:       -> `{innerHTML: " <a href=\"https://www.4chan-x.net/4chan-irc.html\" target=\"_blank\">IRC</a>"}`
     Manager:   -> ModContact.specific.Mod()
-    Developer: -> `<%= html(' <a href="https://github.com/4chan" target="_blank">github</a>') %>`
+    Developer: -> `{innerHTML: " <a href=\"https://github.com/4chan\" target=\"_blank\">github</a>"}`
-    Admin:     -> `<%= html(' <a href="https://twitter.com/hiroyuki_ni" target="_blank">twitter</a>') %>`
+    Admin:     -> `{innerHTML: " <a href=\"https://twitter.com/hiroyuki_ni\" target=\"_blank\">twitter</a>"}`
 
   moveNote:
-    qa: `<%= html(
+    qa: `{innerHTML: "Moving a thread to /qa/ does not imply mods will read it. If you wish to contact mods, use <a href=\"https://www.4chan.org/feedback\" target=\"_blank\">feedback</a><span class=\"invisible\"> (https://www.4chan.org/feedback)</span> or <a href=\"https://www.4chan-x.net/4chan-irc.html\" target=\"_blank\">IRC</a><span class=\"invisible\"> (https://www.4chan-x.net/4chan-irc.html)</span>."}`
-      'Moving a thread to /qa/ does not imply mods will read it. If you wish to contact mods, use ' +
-      '<a href="https://www.4chan.org/feedback" target="_blank">feedback</a><span class="invisible"> (https://www.4chan.org/feedback)</span> or ' +
-      '<a href="https://www.4chan-x.net/4chan-irc.html" target="_blank">IRC</a><span class="invisible"> (https://www.4chan-x.net/4chan-irc.html)</span>.'
-    ) %>`

src/Miscellaneous/PSA.coffee

@@ -1,13 +1,13 @@
 PSA =
   init: ->
     if g.SITE.software is 'yotsuba' and g.BOARD.ID is 'qa'
-      announcement = <%= html('Stay in touch with your <a href="https://www.4chan-x.net/qa_friends.html" target="_blank" rel="noopener">/qa/ friends</a>!') %>
+      announcement = {innerHTML: "Stay in touch with your <a href=\"https://www.4chan-x.net/qa_friends.html\" target=\"_blank\" rel=\"noopener\">/qa/ friends</a>!"}
       el = $.el 'div', {className: 'fcx-announcement'}, announcement
       $.onExists doc, '.boardBanner', (banner) ->
         $.after banner, el
     if 'samachan.org' of Conf['siteProperties'] and 'samachan' not in Conf['PSAseen']
       el = $.el 'span',
-        <%= html('<a href="https://sushigirl.us/yakuza/res/776.html" target="_blank" rel="noopener">Looking for a new home?<br>Some former Samachan users are regrouping on SushiChan.</a><br>(a message from 4chan X)') %>
+        {innerHTML: "<a href=\"https://sushigirl.us/yakuza/res/776.html\" target=\"_blank\" rel=\"noopener\">Looking for a new home?<br>Some former Samachan users are regrouping on SushiChan.</a><br>(a message from 4chan X)"}
       Main.ready ->
         new Notice 'info', el
         Conf['PSAseen'].push('samachan')

src/Miscellaneous/PassMessage.coffee

@@ -1,10 +1,12 @@
+import PassMessagePage from './PassMessage/PassMessage.html';
+
 PassMessage =
   init: ->
     return if Conf['passMessageClosed']
     msg = $.el 'div',
       className: 'box-outer top-box'
     ,
-      `<%= readHTML('PassMessage.html') %>`
+      `{ innerHTML: PassMessagePage }`
     msg.style.cssText = 'padding-bottom: 0;'
     close = $ 'a', msg
     $.on close, 'click', ->

src/Miscellaneous/PostJumper.coffee

@@ -56,7 +56,7 @@ PostJumper =
     classNext = 'next'
     span = $.el 'span',
       className: 'postJumper'
-    $.extend span, `<%= html('<a href="javascript:;" class="${classPrev}">${charPrev}</a><a href="javascript:;" class="${classNext}">${charNext}</a>') %>`
+    $.extend span, `{innerHTML: "<a href=\"javascript:;\" class=\"" + E(classPrev) + "\">" + E(charPrev) + "</a><a href=\"javascript:;\" class=\"" + E(classNext) + "\">" + E(charNext) + "</a>"}`
     span
 
   scroll: (fromJumper, toJumper) ->

src/Miscellaneous/Report.coffee

@@ -1,3 +1,5 @@
+import ReportPage from './ArchiveReport.html';
+
 Report =
   init: ->
     return if not (match = location.search.match /\bno=(\d+)/)
@@ -35,7 +37,7 @@ Report =
       id: 'archive-report'
       hidden: true
     ,
-      `<%= readHTML('ArchiveReport.html') %>`
+      `{ innerHTML: ReportPage }`
     enabled = $ '#archive-report-enabled', fieldset
     reason  = $ '#archive-report-reason',  fieldset
     submit  = $ '#archive-report-submit',  fieldset

src/Monitoring/Favicon.coffee

@@ -1,3 +1,43 @@
+import ferongr_unreadDead from './Favicon/ferongr.unreadDead.png';
+import ferongr_unreadDeadY from './Favicon/ferongr.unreadDeadY.png';
+import ferongr_unreadSFW from './Favicon/ferongr.unreadSFW.png';
+import ferongr_unreadSFWY from './Favicon/ferongr.unreadSFWY.png';
+import ferongr_unreadNSFW from './Favicon/ferongr.unreadNSFW.png';
+import ferongr_unreadNSFWY from './Favicon/ferongr.unreadNSFWY.png';
+import xat_unreadDead from './Favicon/xat-.unreadDead.png';
+import xat_unreadDeadY from './Favicon/xat-.unreadDeadY.png';
+import xat_unreadSFW from './Favicon/xat-.unreadSFW.png';
+import xat_unreadSFWY from './Favicon/xat-.unreadSFWY.png';
+import xat_unreadNSFW from './Favicon/xat-.unreadNSFW.png';
+import xat_unreadNSFWY from './Favicon/xat-.unreadNSFWY.png';
+import Mayhem_unreadDead from './Favicon/Mayhem.unreadDead.png';
+import Mayhem_unreadDeadY from './Favicon/Mayhem.unreadDeadY.png';
+import Mayhem_unreadSFW from './Favicon/Mayhem.unreadSFW.png';
+import Mayhem_unreadSFWY from './Favicon/Mayhem.unreadSFWY.png';
+import Mayhem_unreadNSFW from './Favicon/Mayhem.unreadNSFW.png';
+import Mayhem_unreadNSFWY from './Favicon/Mayhem.unreadNSFWY.png';
+import 4chanJS_unreadDead from './Favicon/4chanJS.unreadDead.png';
+import 4chanJS_unreadDeadY from './Favicon/4chanJS.unreadDeadY.png';
+import 4chanJS_unreadSFW from './Favicon/4chanJS.unreadSFW.png';
+import 4chanJS_unreadSFWY from './Favicon/4chanJS.unreadSFWY.png';
+import 4chanJS_unreadNSFW from './Favicon/4chanJS.unreadNSFW.png';
+import 4chanJS_unreadNSFWY from './Favicon/4chanJS.unreadNSFWY.png';
+import Original_unreadDead from './Favicon/Original.unreadDead.png';
+import Original_unreadDeadY from './Favicon/Original.unreadDeadY.png';
+import Original_unreadSFW from './Favicon/Original.unreadSFW.png';
+import Original_unreadSFWY from './Favicon/Original.unreadSFWY.png';
+import Original_unreadNSFW from './Favicon/Original.unreadNSFW.png';
+import Original_unreadNSFWY from './Favicon/Original.unreadNSFWY.png';
+import Metro_unreadDead from './Favicon/Metro.unreadDead.png';
+import Metro_unreadDeadY from './Favicon/Metro.unreadDeadY.png';
+import Metro_unreadSFW from './Favicon/Metro.unreadSFW.png';
+import Metro_unreadSFWY from './Favicon/Metro.unreadSFWY.png';
+import Metro_unreadNSFW from './Favicon/Metro.unreadNSFW.png';
+import Metro_unreadNSFWY from './Favicon/Metro.unreadNSFWY.png';
+import dead from './Favicon/dead.gif';
+import empty from './Favicon/empty.gif';
+
+
 Favicon =
   init: ->
     $.asap (-> d.head and (Favicon.el = $ 'link[rel="shortcut icon"]', d.head)), Favicon.initAsap
@@ -21,52 +61,52 @@ Favicon =
   switch: ->
     items = {
       ferongr: [
-        '<%= readBase64("ferongr.unreadDead.png") %>'
+        ferongr_unreadDead,
-        '<%= readBase64("ferongr.unreadDeadY.png") %>'
+        ferongr_unreadDeadY,
-        '<%= readBase64("ferongr.unreadSFW.png") %>'
+        ferongr_unreadSFW,
-        '<%= readBase64("ferongr.unreadSFWY.png") %>'
+        ferongr_unreadSFWY,
-        '<%= readBase64("ferongr.unreadNSFW.png") %>'
+        ferongr_unreadNSFW,
-        '<%= readBase64("ferongr.unreadNSFWY.png") %>'
+        ferongr_unreadNSFWY,
       ]
       'xat-': [
-        '<%= readBase64("xat-.unreadDead.png") %>'
+        xat_unreadDead,
-        '<%= readBase64("xat-.unreadDeadY.png") %>'
+        xat_unreadDeadY,
-        '<%= readBase64("xat-.unreadSFW.png") %>'
+        xat_unreadSFW,
-        '<%= readBase64("xat-.unreadSFWY.png") %>'
+        xat_unreadSFWY,
-        '<%= readBase64("xat-.unreadNSFW.png") %>'
+        xat_unreadNSFW,
-        '<%= readBase64("xat-.unreadNSFWY.png") %>'
+        xat_unreadNSFWY,
       ]
       Mayhem: [
-        '<%= readBase64("Mayhem.unreadDead.png") %>'
+        Mayhem_unreadDead,
-        '<%= readBase64("Mayhem.unreadDeadY.png") %>'
+        Mayhem_unreadDeadY,
-        '<%= readBase64("Mayhem.unreadSFW.png") %>'
+        Mayhem_unreadSFW,
-        '<%= readBase64("Mayhem.unreadSFWY.png") %>'
+        Mayhem_unreadSFWY,
-        '<%= readBase64("Mayhem.unreadNSFW.png") %>'
+        Mayhem_unreadNSFW,
-        '<%= readBase64("Mayhem.unreadNSFWY.png") %>'
+        Mayhem_unreadNSFWY,
       ]
       '4chanJS': [
-        '<%= readBase64("4chanJS.unreadDead.png") %>'
+        4chanJS_unreadDead,
-        '<%= readBase64("4chanJS.unreadDeadY.png") %>'
+        4chanJS_unreadDeadY,
-        '<%= readBase64("4chanJS.unreadSFW.png") %>'
+        4chanJS_unreadSFW,
-        '<%= readBase64("4chanJS.unreadSFWY.png") %>'
+        4chanJS_unreadSFWY,
-        '<%= readBase64("4chanJS.unreadNSFW.png") %>'
+        4chanJS_unreadNSFW,
-        '<%= readBase64("4chanJS.unreadNSFWY.png") %>'
+        4chanJS_unreadNSFWY,
       ]
       Original: [
-        '<%= readBase64("Original.unreadDead.png") %>'
+        Original_unreadDead,
-        '<%= readBase64("Original.unreadDeadY.png") %>'
+        Original_unreadDeadY,
-        '<%= readBase64("Original.unreadSFW.png") %>'
+        Original_unreadSFW,
-        '<%= readBase64("Original.unreadSFWY.png") %>'
+        Original_unreadSFWY,
-        '<%= readBase64("Original.unreadNSFW.png") %>'
+        Original_unreadNSFW,
-        '<%= readBase64("Original.unreadNSFWY.png") %>'
+        Original_unreadNSFWY,
       ]
       'Metro': [
-        '<%= readBase64("Metro.unreadDead.png") %>'
+        Metro_unreadDead,
-        '<%= readBase64("Metro.unreadDeadY.png") %>'
+        Metro_unreadDeadY,
-        '<%= readBase64("Metro.unreadSFW.png") %>'
+        Metro_unreadSFW,
-        '<%= readBase64("Metro.unreadSFWY.png") %>'
+        Metro_unreadSFWY,
-        '<%= readBase64("Metro.unreadNSFW.png") %>'
+        Metro_unreadNSFW,
-        '<%= readBase64("Metro.unreadNSFWY.png") %>'
+        Metro_unreadNSFWY,
       ]
     }
     items = $.getOwn(items, Conf['favicon'])
@@ -90,5 +130,6 @@ Favicon =
 
   SFW:   '//s.4cdn.org/image/favicon-ws.ico'
   NSFW:  '//s.4cdn.org/image/favicon.ico'
+  # TODO
   dead:  'data:image/gif;base64,<%= readBase64("dead.gif") %>'
   logo:  'data:image/png;base64,<%= readBase64("/src/meta/icon128.png") %>'

src/Monitoring/ReplyPruning.coffee

@@ -16,7 +16,7 @@ ReplyPruning =
     el = $.el 'span',
       title: 'Maximum number of replies to show.'
     ,
-      `<%= html(' <input type="number" name="Max Replies" min="0" step="1" value="${Conf["Max Replies"]}" class="field">') %>`
+      `{innerHTML: " <input type=\"number\" name=\"Max Replies\" min=\"0\" step=\"1\" value=\"" + E(Conf["Max Replies"]) + "\" class=\"field\">"}`
     $.prepend el, label
 
     @inputs =

src/Monitoring/ThreadStats.coffee

@@ -9,11 +9,7 @@ ThreadStats =
     if Conf['Page Count in Stats']
       @[if g.SITE.isPrunedByAge?(g.BOARD) then 'showPurgePos' else 'showPage'] = true
 
-    statsHTML = `<%= html(
+    statsHTML = `{innerHTML: "<span id=\"post-count\">?</span> / <span id=\"file-count\">?</span>" + ((Conf["IP Count in Stats"] && g.SITE.hasIPCount) ? " / <span id=\"ip-count\">?</span>" : "") + ((Conf["Page Count in Stats"]) ? " / <span id=\"page-count\">?</span>" : "")}`
-      '<span id="post-count">?</span> / <span id="file-count">?</span>' +
-      '?{Conf["IP Count in Stats"] && g.SITE.hasIPCount}{ / <span id="ip-count">?</span>}' +
-      '?{Conf["Page Count in Stats"]}{ / <span id="page-count">?</span>}'
-    ) %>`
     statsTitle = 'Posts / Files'
     statsTitle += ' / IPs'  if Conf['IP Count in Stats'] and g.SITE.hasIPCount
     statsTitle += (if @showPurgePos then ' / Purge Position' else ' / Page') if Conf['Page Count in Stats']
@@ -27,7 +23,7 @@ ThreadStats =
 
     else
       @dialog = sc = UI.dialog 'thread-stats',
-        `<%= html('<div class="move" title="${statsTitle}">&{statsHTML}</div>') %>`
+        `{innerHTML: "<div class=\"move\" title=\"" + E(statsTitle) + "\">" + (statsHTML).innerHTML + "</div>"}`
       $.addClass doc, 'float'
       $.ready ->
         $.add d.body, sc

src/Monitoring/ThreadUpdater.coffee

@@ -1,3 +1,5 @@
+import Beep from './ThreadUpdater/beep.wav'
+
 ThreadUpdater =
   init: ->
     return if g.VIEW isnt 'thread' or !Conf['Thread Updater']
@@ -12,11 +14,11 @@ ThreadUpdater =
     if Conf['Updater and Stats in Header']
       @dialog = sc = $.el 'span',
         id:        'updater'
-      $.extend sc, `<%= html('<span id="update-status" class="empty"></span><span id="update-timer" class="empty" title="Update now"></span>') %>`
+      $.extend sc, `{innerHTML: '<span id="update-status" class="empty"></span><span id="update-timer" class="empty" title="Update now"></span>'}`
       Header.addShortcut 'updater', sc, 100
     else
       @dialog = sc = UI.dialog 'updater',
-        `<%= html('<div class="move"></div><span id="update-status" class="empty"></span><span id="update-timer" class="empty" title="Update now"></span>') %>`
+        `{innerHTML: '<div class="move"></div><span id="update-status" class="empty"></span><span id="update-timer" class="empty" title="Update now"></span>'}`
       $.addClass doc, 'float'
       $.ready ->
         $.add d.body, sc
@@ -31,7 +33,7 @@ ThreadUpdater =
 
     updateLink = $.el 'span',
       className: 'brackets-wrap updatelink'
-    $.extend updateLink, `<%= html('<a href="javascript:;">Update</a>') %>`
+    $.extend updateLink, `{innerHTML: '<a href="javascript:;">Update</a>'}`
     Main.ready ->
       ($.add navLinksBot, [$.tn(' '), updateLink] if (navLinksBot = $ '.navLinksBot'))
     $.on updateLink.firstElementChild, 'click', @update
@@ -50,7 +52,7 @@ ThreadUpdater =
       subEntries.push el: el
 
     @settings = $.el 'span',
-      `<%= html('<a href="javascript:;">Interval</a>') %>`
+      `{innerHTML: '<a href="javascript:;">Interval</a>'}`
 
     $.on @settings, 'click', @intervalShortcut
 
@@ -65,7 +67,7 @@ ThreadUpdater =
     Callbacks.Thread.push
       name: 'Thread Updater'
       cb:   @node
-  
+
   node: ->
     ThreadUpdater.thread       = @
     ThreadUpdater.root         = @nodes.root

src/Monitoring/ThreadWatcher.coffee

@@ -1,3 +1,5 @@
+import ThreadWatcherPage from './ThreadWatcher/ThreadWatcher.html'
+
 ThreadWatcher =
   init: ->
     return if not (@enabled = Conf['Thread Watcher'])
@@ -11,7 +13,7 @@ ThreadWatcher =
 
     @db     = new DataBoard 'watchedThreads', @refresh, true
     @dbLM   = new DataBoard 'watcherLastModified', null, true
-    @dialog = UI.dialog 'thread-watcher', `<%= readHTML('ThreadWatcher.html') %>`
+    @dialog = UI.dialog 'thread-watcher', `{ innerHTML: ThreadWatcherPage }`
     @status = $ '#watcher-status', @dialog
     @list   = @dialog.lastElementChild
     @refreshButton = $ '.refresh', @dialog
@@ -50,7 +52,7 @@ ThreadWatcher =
         el: $.el 'a',
           href:      'javascript:;'
           className: 'has-shortcut-text'
-        , `<%= html('<span></span><span class="shortcut-text">Alt+click</span>') %>`
+        , `{innerHTML: '<span></span><span class="shortcut-text">Alt+click</span>'}`
         order: 6
         open: ({thread}) ->
           return false if Conf['Index Mode'] isnt 'catalog'

src/Posting/Captcha.v2.coffee

@@ -12,9 +12,9 @@ Captcha.v2 =
     $.on d, 'CaptchaCount', @count.bind(@)
 
     root = $.el 'div', className: 'captcha-root'
-    $.extend root, `<%= html(
+    $.extend root, `{ innerHTML:
       '<div class="captcha-counter"><a href="javascript:;"></a></div>'
-    ) %>`
+    }`
     counter   = $ '.captcha-counter > a', root
     @nodes = {root, counter}
     @count()

src/Posting/PassLink.coffee

@@ -8,7 +8,7 @@ PassLink =
 
     passLink = $.el 'span',
       className: 'brackets-wrap pass-link-container'
-    $.extend passLink, `<%= html('<a href="javascript:;">4chan Pass</a>') %>`
+    $.extend passLink, `{innerHTML: "<a href=\"javascript:;\">4chan Pass</a>"}`
     $.on passLink.firstElementChild, 'click', ->
       window.open "//sys.#{location.hostname.split('.')[1]}.org/auth",
         Date.now()

src/Posting/QR.coffee

@@ -1,3 +1,5 @@
+import QuickReplyPage from './QR/QuickReply.html'
+
 QR =
   mimeTypes: ['image/jpeg', 'image/png', 'image/gif', 'application/pdf', 'application/vnd.adobe.flash.movie', 'application/x-shockwave-flash', 'video/webm']
 
@@ -72,7 +74,7 @@ QR =
     if (origToggle = $.id 'togglePostFormLink')
       link = $.el 'h1',
         className: "qr-link-container"
-      $.extend link, `<%= html('<a href="javascript:;" class="qr-link">?{g.VIEW === "thread"}{Reply to Thread}{Start a Thread}</a>') %>`
+      $.extend link, `{innerHTML: '<a href="javascript:;" class="qr-link">?{g.VIEW === "thread"}{Reply to Thread}{Start a Thread}</a>'}`
 
       QR.link = link.firstElementChild
       $.on link.firstChild, 'click', ->
@@ -85,7 +87,7 @@ QR =
     if g.VIEW is 'thread'
       linkBot = $.el 'div',
         className: "brackets-wrap qr-link-container-bottom"
-      $.extend linkBot, `<%= html('<a href="javascript:;" class="qr-link-bottom">Reply to Thread</a>') %>`
+      $.extend linkBot, `{innerHTML: '<a href="javascript:;" class="qr-link-bottom">Reply to Thread</a>'}`
 
       $.on linkBot.firstElementChild, 'click', ->
         QR.open()
@@ -243,10 +245,10 @@ QR =
 
   connectionError: ->
     $.el 'span',
-      `<%= html(
+      `{ innerHTML:
         'Connection error while posting. ' +
         '[<a href="' + meta.faq + '#connection-errors" target="_blank">More info</a>]'
-      ) %>`
+      }`
 
   notifications: []
 
@@ -369,7 +371,7 @@ QR =
 
   openError: ->
     div = $.el 'div'
-    $.extend div, `<%= html('Could not open file. [<a href="' + meta.faq + '#error-reading-metadata" target="_blank">More info</a>]') %>`
+    $.extend div, `{ innerHTML: 'Could not open file. [<a href="' + meta.faq + '#error-reading-metadata" target="_blank">More info</a>]'}`
     QR.error div
 
   setFile: (e) ->
@@ -496,7 +498,7 @@ QR =
   dialog: ->
     QR.nodes = nodes =
       el: dialog = UI.dialog 'qr',
-        `<%= readHTML('QuickReply.html') %>`
+        `{ innerHTML: QuickReplyPage }`
 
     setNode = (name, query) ->
       nodes[name] = $ query, dialog

src/Posting/QR.post.coffee

@@ -4,7 +4,7 @@ QR.post = class
       className: 'qr-preview'
       draggable: true
       href: 'javascript:;'
-    $.extend el, `<%= html('<a class="remove fa fa-times-circle" title="Remove"></a><label class="qr-preview-spoiler"><input type="checkbox"> Spoiler</label><span></span>') %>`
+    $.extend el, `{innerHTML: '<a class="remove fa fa-times-circle" title="Remove"></a><label class="qr-preview-spoiler"><input type="checkbox"> Spoiler</label><span></span>'}`
 
     @nodes =
       el:      el
@@ -185,7 +185,7 @@ QR.post = class
 
   error: (className, message, link) ->
     div = $.el 'div', {className}
-    $.extend div, `<%= html('${message}?{link}{ [<a href="${link}" target="_blank">More info</a>]}<br>[<a href="javascript:;">delete post</a>] [<a href="javascript:;">delete all</a>]') %>`
+    $.extend div, `{innerHTML: '${message}?{link}{ [<a href="${link}" target="_blank">More info</a>]}<br>[<a href="javascript:;">delete post</a>] [<a href="javascript:;">delete all</a>]'}`
     (@errors or= []).push div
     [rm, rmAll] = $$ 'a', div
     $.on div, 'click', =>

src/Quotelinks/QuoteThreading.coffee

@@ -7,12 +7,12 @@ QuoteThreading =
     return unless Conf['Quote Threading'] and g.VIEW is 'thread'
 
     @controls = $.el 'label',
-      `<%= html('<input id="threadingControl" name="Thread Quotes" type="checkbox"> Threading') %>`
+      `{innerHTML: "<input id=\"threadingControl\" name=\"Thread Quotes\" type=\"checkbox\"> Threading"}`
 
     @threadNewLink = $.el 'span',
       className: 'brackets-wrap threadnewlink'
       hidden: true
-    $.extend @threadNewLink, `<%= html('<a href="javascript:;">Thread New Posts</a>') %>`
+    $.extend @threadNewLink, `{innerHTML: "<a href=\"javascript:;\">Thread New Posts</a>"}`
 
     @input = $('input', @controls)
     @input.checked = Conf['Thread Quotes']

src/Quotelinks/QuoteYou.coffee

@@ -59,7 +59,7 @@ QuoteYou =
       label = $.el 'label',
         className: 'toggle-you'
       ,
-        `<%= html('<input type="checkbox"> You') %>`
+        `{innerHTML: '<input type="checkbox"> You'}`
       input = $ 'input', label
       $.on input, 'change', QuoteYou.menu.toggle
       Menu.menu?.addEntry

src/classes/Fetcher.coffee

@@ -149,10 +149,10 @@ class Fetcher
         greentext = text[0] is '>'
         text = text.replace /(\[\/?[a-z]+):lit(\])/g, '$1$2'
         text = for text2, j in text.split /(>>(?:>\/[a-z\d]+\/)?\d+)/g
-          `<%= html('?{j % 2}{<span class="deadlink">${text2}</span>}{${text2}}') %>`
+          `{innerHTML: ((j % 2) ? "<span class=\"deadlink\">" + E(text2) + "</span>" : E(text2))}`
-        text = `<%= html('?{greentext}{<span class="quote">@{text}</span>}{@{text}}') %>`
+        text = `{innerHTML: ((greentext) ? "<span class=\"quote\">" + E.cat(text) + "</span>" : E.cat(text))}`
         text
-    comment = `<%= html('@{comment}') %>`
+    comment = `{innerHTML: E.cat(comment)}`
 
     @threadID = +data.thread_num
     o =
@@ -220,24 +220,24 @@ class Fetcher
     @insert post
 
   archiveTags:
-    '\n':         `<%= html('<br>') %>`
+    '\n':         `{innerHTML: "<br>"}`
-    '[b]':        `<%= html('<b>') %>`
+    '[b]':        `{innerHTML: "<b>"}`
-    '[/b]':       `<%= html('</b>') %>`
+    '[/b]':       `{innerHTML: "</b>"}`
-    '[spoiler]':  `<%= html('<s>') %>`
+    '[spoiler]':  `{innerHTML: "<s>"}`
-    '[/spoiler]': `<%= html('</s>') %>`
+    '[/spoiler]': `{innerHTML: "</s>"}`
-    '[code]':     `<%= html('<pre class="prettyprint">') %>`
+    '[code]':     `{innerHTML: "<pre class=\"prettyprint\">"}`
-    '[/code]':    `<%= html('</pre>') %>`
+    '[/code]':    `{innerHTML: "</pre>"}`
-    '[moot]':     `<%= html('<div style="padding:5px;margin-left:.5em;border-color:#faa;border:2px dashed rgba(255,0,0,.1);border-radius:2px">') %>`
+    '[moot]':     `{innerHTML: "<div style=\"padding:5px;margin-left:.5em;border-color:#faa;border:2px dashed rgba(255,0,0,.1);border-radius:2px\">"}`
-    '[/moot]':    `<%= html('</div>') %>`
+    '[/moot]':    `{innerHTML: "</div>"}`
-    '[banned]':   `<%= html('<strong style="color: red;">') %>`
+    '[banned]':   `{innerHTML: "<strong style=\"color: red;\">"}`
-    '[/banned]':  `<%= html('</strong>') %>`
+    '[/banned]':  `{innerHTML: "</strong>"}`
-    '[fortune]':  (text) -> `<%= html('<span class="fortune" style="color:${text.match(/#\\w+|$/)[0]}"><b>') %>`
+    '[fortune]':  (text) -> `{innerHTML: "<span class=\"fortune\" style=\"color:" + E(text.match(/#\w+|$/)[0]) + "\"><b>"}`
-    '[/fortune]': `<%= html('</b></span>') %>`
+    '[/fortune]': `{innerHTML: "</b></span>"}`
-    '[i]':        `<%= html('<span class="mu-i">') %>`
+    '[i]':        `{innerHTML: "<span class=\"mu-i\">"}`
-    '[/i]':       `<%= html('</span>') %>`
+    '[/i]':       `{innerHTML: "</span>"}`
-    '[red]':      `<%= html('<span class="mu-r">') %>`
+    '[red]':      `{innerHTML: "<span class=\"mu-r\">"}`
-    '[/red]':     `<%= html('</span>') %>`
+    '[/red]':     `{innerHTML: "</span>"}`
-    '[green]':    `<%= html('<span class="mu-g">') %>`
+    '[green]':    `{innerHTML: "<span class=\"mu-g\">"}`
-    '[/green]':   `<%= html('</span>') %>`
+    '[/green]':   `{innerHTML: "</span>"}`
-    '[blue]':     `<%= html('<span class="mu-b">') %>`
+    '[blue]':     `{innerHTML: "<span class=\"mu-b\">"}`
-    '[/blue]':    `<%= html('</span>') %>`
+    '[/blue]':    `{innerHTML: "</span>"}`

src/classes/Notice.coffee

@@ -1,7 +1,7 @@
 class Notice
   constructor: (type, content, @timeout, @onclose) ->
     @el = $.el 'div',
-      `<%= html('<a href="javascript:;" class="close fa fa-times" title="Close"></a><div class="message"></div>') %>`
+      `{innerHTML: "<a href=\"javascript:;\" class=\"close fa fa-times\" title=\"Close\"></a><div class=\"message\"></div>"}`
     @el.style.opacity = 0
     @setType type
     $.on @el.firstElementChild, 'click', @close

src/config/Config.coffee

@@ -1,3 +1,6 @@
+import userCss from './user.css'
+import banners from './banners.js'
+
 Config =
   main:
     'Miscellaneous':
@@ -878,7 +881,7 @@ Config =
 
   favicon: 'ferongr'
 
-  usercss: `<%= JSON.stringify(read('user.css')) %>`
+  usercss: userCss
 
   hotkeys:
     # QR & Options
@@ -1168,7 +1171,7 @@ Config =
 
   hiddenPSAList: [{}]
 
-  knownBanners: '<%= readJSON("banners.json").join(",") %>'
+  knownBanners: banners.join(',')
 
   passMessageClosed: false
 

src/main/Main.coffee

@@ -330,7 +330,7 @@ Main =
 
     if g.SITE.isIncomplete?()
       msg = $.el 'div',
-        `<%= html('The page didn&#039;t load completely.<br>Some features may not work unless you <a href="javascript:;">reload</a>.') %>`
+        `{innerHTML: 'The page didn&#039;t load completely.<br>Some features may not work unless you <a href="javascript:;">reload</a>.'}`
       $.on $('a', msg), 'click', -> location.reload()
       new Notice 'warning', msg
 
@@ -518,7 +518,7 @@ Main =
       unless nodes[i]
         (cb() if cb)
         return
-      setTimeout softTask, 0 
+      setTimeout softTask, 0
 
     softTask()
 
@@ -547,7 +547,7 @@ Main =
       return
 
     div = $.el 'div',
-      `<%= html('${errors.length} errors occurred.&{Main.reportLink(errors)} [<a href="javascript:;">show</a>]') %>`
+      `{innerHTML: '${errors.length} errors occurred.&{Main.reportLink(errors)} [<a href="javascript:;">show</a>]'}`
     $.on div.lastElementChild, 'click', ->
       [@textContent, logs.hidden] = if @textContent is 'show' then (
         ['hide', false]
@@ -565,7 +565,7 @@ Main =
   parseError: (data, reportLink) ->
     c.error data.message, data.error.stack
     message = $.el 'div',
-      `<%= html('${data.message}?{reportLink}{&{reportLink}}') %>`
+      `{innerHTML: '${data.message}?{reportLink}{&{reportLink}}'}`
     error = $.el 'div',
       textContent: "#{data.error.name or 'Error'}: #{data.error.message or 'see console for details'}"
     lines = data.error.stack?.match(/\d+(?=:\d+\)?$)/mg)?.join().replace(/^/, ' at ') or ''
@@ -595,7 +595,7 @@ Main =
     addDetails '\n`' + data.html + '`' if data.html
     details = details.replace /file:\/{3}.+\//g, '' # Remove local file paths
     url = '<%= meta.newIssue %>'.replace('%title', encodeURIComponent title).replace('%details', encodeURIComponent details)
-    `<%= html('<span class="report-error"> [<a href="${url}" target="_blank">report</a>]</span>') %>`
+    `{innerHTML: '<span class="report-error"> [<a href="${url}" target="_blank">report</a>]</span>'}`
 
   isThisPageLegit: ->
     # not 404 error page or similar.

src/platform/$.coffee

@@ -552,7 +552,7 @@ $.crxWorking = ->
       return true
   unless $.crxWarningShown
     msg = $.el 'div',
-      `<%= html('4chan X seems to have been updated. You will need to <a href="javascript:;">reload</a> the page.') %>`
+      `{innerHTML: '4chan X seems to have been updated. You will need to <a href="javascript:;">reload</a> the page.'}`
     $.on $('a', msg), 'click', -> location.reload()
     new Notice 'warning', msg
     $.crxWarningShown = true

src/site/SW.yotsuba.Build.coffee

@@ -1,3 +1,9 @@
+import PostInfoPage from './SW.yotsuba.Build/PostInfo.html'
+import FilePage from './SW.yotsuba.Build/File.html'
+import PostPage from './SW.yotsuba.Build/Post.html'
+import CatalogThreadPage from './SW.yotsuba.Build/CatalogThread.html'
+import CatalogReplyPage from './SW.yotsuba.Build/CatalogReply.html'
+
 Build =
   staticPath: '//s.4cdn.org/image/'
   gifIcon: if window.devicePixelRatio >= 2 then '@2x.gif' else '.gif'
@@ -145,7 +151,7 @@ Build =
     else
       "#{url}#q#{ID}"
 
-    postInfo = `<%= readHTML('PostInfo.html') %>`
+    postInfo = { innerHTML: PostInfoPage }
 
     ### File Info ###
 
@@ -155,13 +161,13 @@ Build =
       shortFilename = Build.shortFilename file.name
       fileThumb = if file.isSpoiler then Build.spoilerThumb(boardID) else file.thumbURL.replace(protocol, '')
 
-    fileBlock = `<%= readHTML('File.html') %>`
+    fileBlock = { innerHTML: FilePage }
 
     ### Whole Post ###
 
     postClass = if o.isReply then 'reply' else 'op'
 
-    wholePost = `<%= readHTML('Post.html') %>`
+    wholePost = `{ innerHTML: PostPage }`
 
     container = $.el 'div',
       className: "postContainer #{postClass}Container"
@@ -238,7 +244,7 @@ Build =
     postCount = data.replies + 1
     fileCount = data.images  + !!data.ext
 
-    container = $.el 'div', `<%= readHTML('CatalogThread.html') %>`
+    container = $.el 'div', { innerHTML: CatalogThreadPage }
     $.before thread.OP.nodes.info, [container.childNodes...]
 
     for br in $$('br', thread.OP.nodes.comment) when br.previousSibling and br.previousSibling.nodeName is 'BR'
@@ -266,6 +272,6 @@ Build =
 
     link = Build.postURL thread.board.ID, thread.ID, data.no
     $.el 'div', {className: 'catalog-reply'},
-      `<%= readHTML('CatalogReply.html') %>`
+      `{ innerHTML: CatalogReplyPage }`
 
 SW.yotsuba.Build = Build

tools/rollup-plugin-inline-file.js

@@ -0,0 +1,29 @@
+import { createFilter } from "rollup-pluginutils";
+
+export default function inlineFile(opts = {}) {
+  if (!opts.include) {
+    throw Error("include option should be specified");
+  }
+
+  if (opts.transformer && typeof opts.transformer !== 'function') {
+    throw new Error('If transformer is given, it must be a function');
+  }
+
+  const filter = createFilter(opts.include, opts.exclude);
+
+  return {
+    name: "inlineFile",
+
+    transform(code, id) {
+      if (filter(id)) {
+        if (opts.transformer) {
+          code = opts.transformer(code);
+        }
+        return {
+          code: `export default ${JSON.stringify(code)};`,
+          map: { mappings: "" }
+        };
+      }
+    }
+  };
+}

tools/rollup.js

@@ -0,0 +1,16 @@
+import { rollup } from "rollup";
+import inlineFile from "./rollup-plugin-inline-file";
+
+rollup({
+  entry: "main.js",
+  plugins: [
+    inlineFile({
+      include: ["**/*.html", "**/*.css"],
+    }),
+    inlineFile({
+      include: ["**/*.png", "**/*.gif"],
+      // base64 encode
+      transformer: btoa
+    })
+  ]
+});