decent improvements

decent/modules_core/app.js

···
   gives: 'app',
   create: function (api) {
     return function () {
-      document.head.appendChild(h('style', require('../style.css.json')))
+      var hasStylesheet = document.querySelector('link[rel="stylesheet"][href$="style.css"]')
+      if (!hasStylesheet) {
+        document.head.appendChild(
+          h('style', {'data-decent-style': 'true'}, require('../style.css.json'))
+        )
+      }
 
       window.addEventListener('error', window.onError = function (e) {
         document.body.appendChild(h('div.error',

decent/package.json

···
     "indexhtmlify": "^1.3.1"
   },
   "scripts": {
-    "lite": "node scripts/style.js && mkdir -p build && browserify index.js | indexhtmlify --title \"Decent SSB\" > build/index.html",
+    "lite": "node scripts/style.js && mkdir -p build && browserify index.js | indexhtmlify --title \"Decent SSB\" > build/index.html && node scripts/postprocess-index.js",
     "bundle": "node scripts/style.js && mkdir -p build && browselectrify index.js > build/bundle.js",
     "graph": "node index.js | dot -Tsvg > graph.svg",
     "test": "set -e; for t in test/*.js; do node $t; done"

decent/scripts/postprocess-index.js

···
+var fs = require('fs')
+var path = require('path')
+
+var htmlPath = path.join(__dirname, '..', 'build', 'index.html')
+if (!fs.existsSync(htmlPath)) process.exit(0)
+
+var html = fs.readFileSync(htmlPath, 'utf8')
+if (html.indexOf('decent-preload') !== -1) process.exit(0)
+
+var headClose = html.indexOf('</head>')
+if (headClose === -1) process.exit(0)
+
+var insert = [
+  '<!-- decent-preload -->',
+  '<link rel="preconnect" href="https://fonts.googleapis.com">',
+  '<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>',
+  '<link rel="preload" as="style" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css">',
+  '<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css">',
+  '<link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,400,0,0">',
+  '<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,400,0,0">',
+  '<link rel="preload" as="style" href="/style.css">',
+  '<link rel="stylesheet" href="/style.css">'
+].join('\n') + '\n'
+
+html = html.slice(0, headClose) + insert + html.slice(headClose)
+
+fs.writeFileSync(htmlPath, html)

decent/scripts/style.js

···
 var fs = require('fs')
 var path = require('path')
 
+var buildDir = path.join(__dirname, '..', 'build')
+var stylePath = path.join(__dirname, '..', 'style.css')
+
+if (!fs.existsSync(buildDir))
+  fs.mkdirSync(buildDir)
+
 fs.writeFileSync(
   path.join(__dirname, '..', 'style.css.json'),
-  JSON.stringify(fs.readFileSync(path.join(__dirname, '..', 'style.css'), 'utf8'))
+  JSON.stringify(fs.readFileSync(stylePath, 'utf8'))
 )
 
+fs.writeFileSync(
+  path.join(buildDir, 'style.css'),
+  fs.readFileSync(stylePath, 'utf8')
+)

decent/style.css

···
-@import url('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css');
-@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,400,0,0');
-
 * {
   box-sizing: border-box;
   word-break: break-word;

plugins/decent-ui.js

···
     }
 
     var filePath = path.join(decentDir, relPath)
-    fs.stat(filePath, function (err, stat) {
-      if (err || !stat || !stat.isFile()) {
-        respondNotFound(res)
-        return
-      }
-
+    function serveFile (resolvedPath) {
       if (relPath === 'index.html' && req.method === 'GET') {
-        return fs.readFile(filePath, 'utf8', function (readErr, html) {
+        return fs.readFile(resolvedPath, 'utf8', function (readErr, html) {
           if (readErr) {
             respondNotFound(res)
             return
           }
 
+          var headInsert = ''
+          if (html.indexOf('rel="stylesheet" href="/style.css"') === -1 &&
+            html.indexOf('rel="stylesheet" href="style.css"') === -1) {
+            headInsert += '<link rel="preload" as="style" href="/style.css">' +
+              '<link rel="stylesheet" href="/style.css">'
+          }
+
           var remote = getRemoteForRequest(req)
           if (remote) {
-            var script = '<script>window.PATCHBAY_REMOTE = ' +
+            headInsert += '<script>window.PATCHBAY_REMOTE = ' +
               JSON.stringify(remote) +
               ';</script>'
-            html = html.replace('</head>', script + '</head>')
           }
 
-          res.writeHead(200, {'Content-Type': getContentType(filePath)})
+          if (headInsert)
+            html = html.replace('</head>', headInsert + '</head>')
+
+          res.writeHead(200, {'Content-Type': getContentType(resolvedPath)})
           res.end(html)
         })
       }
 
-      res.writeHead(200, {'Content-Type': getContentType(filePath)})
+      res.writeHead(200, {'Content-Type': getContentType(resolvedPath)})
 
       if (req.method === 'HEAD') {
         res.end()
         return
       }
 
-      fs.createReadStream(filePath).pipe(res)
+      fs.createReadStream(resolvedPath).pipe(res)
+    }
+
+    fs.stat(filePath, function (err, stat) {
+      if (err || !stat || !stat.isFile()) {
+        if (relPath === 'style.css') {
+          var fallbackPath = path.join(__dirname, '..', 'decent', 'style.css')
+          return fs.stat(fallbackPath, function (fallbackErr, fallbackStat) {
+            if (fallbackErr || !fallbackStat || !fallbackStat.isFile()) {
+              respondNotFound(res)
+              return
+            }
+            serveFile(fallbackPath)
+          })
+        }
+        respondNotFound(res)
+        return
+      }
+
+      serveFile(filePath)
     })
   }