Use self-hosted css and js

4 years ago · 7a1839c572
parent ccc62b041b
commit 7a1839c572
6 changed files with 886 additions and 33 deletions
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -12,7 +12,9 @@
    "angular-mocks": "^1.8.2",
    "babel-loader": "^8.2.2",
    "copy-webpack-plugin": "^6.3.2",
+    "css-loader": "^5.2.1",
    "electron-packager": "^15.0.0",
+    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^4.5.0",
    "jasmine-core": "^3.6.0",
    "jshint": "^2.11.1",
@ -22,7 +24,10 @@
    "karma-junit-reporter": "~2.0",
    "karma-webpack": "^5.0.0-alpha.3.0",
    "linkifyjs": "^2.1.9",
+    "mini-css-extract-plugin": "^1.4.1",
    "protractor": "^7.0.0",
+    "style-loader": "^2.0.0",
+    "url-loader": "^4.1.1",
    "webpack": "^5.8.0",
    "webpack-cli": "^4.2.0",
    "webpack-dev-server": "^3.11.0"
@ -48,6 +53,8 @@
    "angular-route": "^1.8.2",
    "angular-sanitize": "^1.8.2",
    "angular-touch": "^1.8.2",
+    "bootstrap": "^3.4.1",
+    "emojione": "^4.5.0",
    "favico.js": "^0.3.10",
    "jquery-linkify": "^2.2.1",
    "underscore": "^1.10.2",
--- a/src/index.html
+++ b/src/index.html
@ -13,15 +13,11 @@
    <!-- https://w3c.github.io/manifest/ && https://developer.mozilla.org/en-US/docs/Web/Manifest -->
    <link rel="manifest" href="webapp.manifest.json">
    <title ng-bind-template="{{ notificationStatus }}Glowing Bear {{ pageTitle}}"></title>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha512-Dop/vW3iOtayerlYAqCgkVr2aTr2ErwwTYOvRFUpzl2VhCMJyjQF0Q9TjUXIo6JhuM/3i0vVEt2e/7QQmnHQqw==" crossorigin="anonymous" />
    <link rel="shortcut icon" sizes="128x128" href="assets/img/glowing_bear_128x128.png">
    <link rel="apple-touch-icon" sizes="128x128" href="assets/img/glowing_bear_128x128.png">
    <link rel="shortcut icon" type="image/png" href="assets/img/favicon.png" >
    <link href="css/glowingbear.css" rel="stylesheet" media="screen">
    <link href="css/themes/dark.css" rel="stylesheet" media="screen" id="themeCSS" />
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/emojione/2.2.7/lib/js/emojione.min.js" integrity="sha256-9cBkVeU53NiJ9/BdcJta3HbERAmf5X9DE2WvL8V+gDs=" crossorigin="anonymous"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-linkify/2.1.9/linkify.min.js" integrity="sha512-kxj7VjlzsQgiku2vbRcZI0FJ0dXmPsiRLugiRxJrCROusKHaFfX/hGDD1/L/R0Y+xI8zlA2B5nm6USapz7nQbg==" crossorigin="anonymous"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-linkify/2.1.9/linkify-string.min.js" integrity="sha512-CMBjJdVIcw7zafkE+uedZCnw6r4ABU1Fev5xA7db0D097/NzhO6Ajo2kdZFOQ+y0kg9sE/t44bPAwuuNhUVIcQ==" crossorigin="anonymous"></script>
  </head>
  <body ng-controller="WeechatCtrl" ng-keydown="handleKeyPress($event)" ng-keyup="handleKeyRelease($event)"  ng-keypress="handleKeyPress($event)" ng-class="{'no-overflow': connected}" ng-init="init()" lang="en-US">
    <audio id="audioNotificationInitializer"><source src="data:audio/mp3;base64,/+MYxAAJs2H8AABLSZv4Af/5yAsCIElB/v/+Y///U+QiEaSchGO+IMQjZCgOLw4KVoIEkf/r69Kbfc7/WbLRPsyvp7/p/p///+MYxBQK+1oUAACNMUWSyLcrqpERhDqKCBWcgbTmuIq8ISkQSv+yf/tbZf9krRTptRUv/XT////66NJQFZTpOd3KUEtM+a+l/+MYxCMKM2YcAACNMB+Jqe+HLv+75fSreYSWGtqHJghl6y///89fcz/p8qIRKeFWYKEGo5mLFmCGBjV0FEJn/9f85V87iy98/+MYxDULA1YYAABHLbI52f2/4v////n7U/swVr0SzhrRIueMLLog0qIKcOwu/5v/lLR/r9DPN/R+vmf//////V8tAxlMY1sy/+MYxEQKM2IYAABHLZjRjUlgUSUAhTUBFHVMQU1FMy4xMDBVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV/+MYxFYJ22oAAACHMFVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV"></audio>
@ -45,7 +41,7 @@
        <strong>Secure connection error</strong> Unable to connect to unencrypted relay when you are connecting to Glowing Bear over HTTPS. Please use an encrypted relay or load the page without using HTTPS.
      </div>
      <div class="alert alert-danger" ng-show="oldWeechatError" ng-cloak>
-        <strong>Weechat version error</strong> Weechat connected but did not respond to a handshake. This could mean weechat < version 2.9. Verify your weechat is 2.8 or older and check "Compatibility with Weechat 2.8 and older" or consider updating weechat.
+        <strong>Weechat version error</strong> Weechat connected but did not respond to a handshake. This could mean weechat &lt; version 2.9. Verify your weechat is 2.8 or older and check "Compatibility with Weechat 2.8 and older" or consider updating weechat.
      </div>
      <div class="alert alert-danger" ng-show="hashAlgorithmDisagree" ng-cloak>
        <strong>Hash algorithm error</strong> Weechat and glowing bear did not agree on a hashing algorithm, please do /set relay.network.password_hash_algo "pbkdf2+sha512" in weechat.
@ -119,7 +115,7 @@
                  <div class="checkbox indent" ng-show="settings.compatibilityWeechat28">
                    <label class="control-label" for="useTotp">
                      <input type="checkbox" id="useTotp" ng-model="settings.useTotp">
-                      Use Time-based One-Time Password (automatic for Weechat >= 2.9)<a href="https://blog.weechat.org/post/2019/01/14/Support-of-TOTP" target="_blank"><i class="glyphicon glyphicon-info-sign"></i></a>
+                      Use Time-based One-Time Password (automatic for Weechat &gt;= 2.9)<a href="https://blog.weechat.org/post/2019/01/14/Support-of-TOTP" target="_blank"><i class="glyphicon glyphicon-info-sign"></i></a>
                    </label>
                  </div>
                  <div class="checkbox">
--- a/src/main.js
+++ b/src/main.js
@ -6,6 +6,12 @@ import "angular-route";
 import "angular-sanitize";
 import "angular-touch";

+import 'bootstrap/dist/css/bootstrap.min.css';
+import 'bootstrap/dist/fonts/glyphicons-halflings-regular.woff2';
+import 'emojione/lib/js/emojione.min.js';
+import 'linkifyjs/dist/linkify.min.js';
+import 'linkifyjs/dist/linkify-string.min.js';
+
 import "./js/localstorage.js";
 import "./js/irc-utils.js";
 import "./js/bufferResume.js";
--- a/webpack.config.js
+++ b/webpack.config.js
@ -1,10 +1,10 @@
-
 "use strict";

 const path = require("path");

 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const CopyWebpackPlugin = require("copy-webpack-plugin");
+const webpack = require("webpack");

 module.exports = {
    context: path.resolve(__dirname, 'src'),
@ -35,7 +35,13 @@ module.exports = {
                "manifest.webapp",
                "webapp.manifest.json"
            ]
-        })
+        }),
+        new webpack.ProvidePlugin({
+            $: "jquery",
+            jQuery: "jquery",
+            "window.jQuery": "jquery",
+            Popper: ["popper.js", "default"],
+        }),
    ],
    module: {
        rules: [
@ -47,6 +53,22 @@ module.exports = {
                        loader: 'babel-loader'
                    }
                ]
+            },
+            {
+                test: /\.css$/,
+                use: ['style-loader', 'css-loader']
+            },
+            {
+                test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
+                use: [
+                    {
+                        loader: 'file-loader',
+                        options: {
+                            name: '[name].[ext]',
+                            outputPath: 'fonts/'
+                        }
+                    }
+                ]
            }
        ]
    }