perf: improve page loading time

gulpfile.js

@@ -0,0 +1,58 @@
+const { src, dest } = require("gulp");
+const uglify = require("gulp-uglify");
+const concat = require("gulp-concat");
+var order = require("gulp-order");
+const cleanCss = require("gulp-clean-css");
+
+function defaultTask(cb) {
+  const jsFiles = [
+    "public/script/external/angular.min.js",
+    "public/script/external/angular-translate.min.js",
+    "public/script/external/angular-translate-loader-static-files.min.js",
+    "public/script/external/angular-sanitize.min.js",
+    "public/script/external/angular-route.min.js",
+    "public/script/external/pdf.compat.js",
+    "public/script/external/pdf.js",
+    "public/script/external/github-emojis.js",
+    "public/script/external/marked-emoji.js",
+    "public/script/external/marked.min.js",
+    "public/script/external/purify.min.js",
+    "public/script/external/ansi_up.min.js",
+    "public/script/external/prism.min.js",
+    "public/script/external/katex.min.js",
+    "public/script/external/katex-auto-render.min.js",
+    "public/script/external/notebook.min.js",
+    "public/script/external/org.js",
+    "public/script/external/jquery-3.4.1.min.js",
+    "public/script/external/popper.min.js",
+    "public/script/external/bootstrap.min.js",
+    "public/script/external/ace/ace.js",
+    "public/script/external/ui-ace.min.js",
+    "public/script/utils.js",
+    "public/script/ng-pdfviewer.min.js",
+    "public/script/app.js",
+    "public/script/admin.js",
+  ];
+  const cssFiles = [
+    "public/css/bootstrap.min.css",
+    "public/css/font-awesome.min.css",
+    "public/css/notebook.css",
+    "public/css/katex.min.css",
+    "public/css/github-markdown.min.css",
+    "public/css/style.css",
+  ];
+  src(jsFiles)
+    .pipe(order(jsFiles, { base: "./" }))
+    .pipe(concat("bundle.min.js"))
+    .pipe(uglify())
+    .pipe(dest("public/script"))
+    .on("end", cb);
+
+  src(cssFiles)
+    .pipe(order(cssFiles, { base: "./" }))
+    .pipe(concat("all.min.css"))
+    .pipe(cleanCss())
+    .pipe(dest("public/css"));
+}
+
+exports.default = defaultTask;

package.json

@@ -9,7 +9,7 @@
     "test": "mocha --reporter spec",
     "start": "node --inspect=5858 -r ts-node/register ./src/server/index.ts",
     "dev": "nodemon --transpile-only ./src/server/index.ts",
-    "build": "rm -rf build && tsc",
+    "build": "rm -rf build && tsc && gulp",
     "knip": "knip"
   },
   "repository": {
@@ -85,6 +85,11 @@
     "@types/passport": "^1.0.16",
     "@types/passport-github2": "^1.2.9",
     "@types/unzip-stream": "^0.3.4",
+    "gulp": "^5.0.0",
+    "gulp-clean-css": "^4.3.0",
+    "gulp-concat": "^2.6.1",
+    "gulp-order": "^1.2.0",
+    "gulp-uglify": "^3.0.2",
     "knip": "^5.1.0",
     "mocha": "^10.4.0",
     "nodemon": "^3.1.0",

public/favicon/site.webmanifest

@@ -3,12 +3,12 @@
     "short_name": "Anonymous Github",
     "icons": [
         {
-            "src": "/android-chrome-192x192.png",
+            "src": "/favicon/android-chrome-192x192.png",
             "sizes": "192x192",
             "type": "image/png"
         },
         {
-            "src": "/android-chrome-256x256.png",
+            "src": "/favicon/android-chrome-256x256.png",
             "sizes": "256x256",
             "type": "image/png"
         }

public/index.html

@@ -33,54 +33,7 @@
     <meta name="msapplication-config" content="/favicon/browserconfig.xml" />
     <meta name="theme-color" content="#ffffff" />
 
-    <!-- CSS -->
-    <link rel="stylesheet" href="/css/bootstrap.min.css" />
-    <link rel="stylesheet" href="/css/font-awesome.min.css" />
-
-    <link rel="stylesheet" href="/css/color-schema.css" />
-    <link rel="stylesheet" href="/css/style.css" />
-    <link rel="stylesheet" href="/css/notebook.css" />
-    <link rel="stylesheet" href="/css/katex.min.css" />
-    <link rel="stylesheet" href="/css/github-markdown.min.css" />
-
-    <!-- JS -->
-    <script src="/script/external/angular.min.js"></script>
-    <script src="/script/external/angular-translate.min.js"></script>
-    <script src="/script/external/angular-translate-loader-static-files.min.js"></script>
-    <script src="/script/external/angular-sanitize.min.js"></script>
-    <script src="/script/external/angular-route.min.js"></script>
-
-    <script src="/script/external/jquery-3.4.1.min.js"></script>
-    <script src="/script/external/popper.min.js"></script>
-    <script src="/script/external/bootstrap.min.js"></script>
-
-    <!-- PDF -->
-    <script src="/script/external/pdf.compat.js"></script>
-    <script src="/script/external/pdf.js"></script>
-
-    <!-- Code -->
-    <script src="/script/external/ace/ace.js"></script>
-    <script src="/script/external/ui-ace.min.js"></script>
-    <script src="/script/langColors.js"></script>
-
-    <!-- Notebook -->
-    <script src="/script/external/github-emojis.js"></script>
-    <script src="/script/external/marked-emoji.js"></script>
-    <script src="/script/external/marked.min.js"></script>
-    <script src="/script/external/purify.min.js"></script>
-    <script src="/script/external/ansi_up.min.js"></script>
-    <script src="/script/external/prism.min.js"></script>
-    <script src="/script/external/katex.min.js"></script>
-    <script src="/script/external/katex-auto-render.min.js"></script>
-    <script src="/script/external/notebook.min.js"></script>
-
-    <script src="/script/external/org.js"></script>
-
-    <!-- Anonymous GitHub scripts -->
-    <script src="/script/utils.js"></script>
-    <script src="/script/ng-pdfviewer.min.js"></script>
-    <script src="/script/admin.js"></script>
-    <script src="/script/app.js"></script>
+    <link rel="stylesheet" href="/css/all.min.css" />
   </head>
   <body keypress-events class="d-flex flex-column">
     <ng-include src="'partials/header.htm'"></ng-include>
@@ -115,6 +68,11 @@
       </div>
     </div>
 
+    <script src="/script/bundle.min.js"></script>
+    <script>
+      ace.config.set("basePath", "/script/external/ace/");
+      PDFJS.workerSrc = "/script/external/pdf.worker.js";
+    </script>
     <script src="https://storage.ko-fi.com/cdn/scripts/overlay-widget.js"></script>
     <script>
       kofiWidgetOverlay.draw("tdurieux", {

public/script/app.js

@@ -7,133 +7,138 @@ angular
     "pascalprecht.translate",
     "admin",
   ])
-  .config(function ($routeProvider, $locationProvider, $translateProvider) {
-    $translateProvider.useStaticFilesLoader({
-      prefix: "/i18n/locale-",
-      suffix: ".json",
-    });
-
-    $translateProvider.preferredLanguage("en");
-
-    $routeProvider
-      .when("/", {
-        templateUrl: "/partials/home.htm",
-        controller: "homeController",
-        title: "Anonymous GitHub",
-      })
-      .when("/dashboard", {
-        templateUrl: "/partials/dashboard.htm",
-        controller: "dashboardController",
-        title: "Dashboard - Anonymous GitHub",
-      })
-      .when("/pr-dashboard", {
-        templateUrl: "/partials/pr-dashboard.htm",
-        controller: "prDashboardController",
-        title: "Pull Request Dashboard - Anonymous GitHub",
-      })
-      .when("/anonymize/:repoId?", {
-        templateUrl: "/partials/anonymize.htm",
-        controller: "anonymizeController",
-        title: "Anonymize - Anonymous GitHub",
-      })
-      .when("/pull-request-anonymize/:pullRequestId?", {
-        templateUrl: "/partials/anonymizePullRequest.htm",
-        controller: "anonymizePullRequestController",
-        title: "Anonymize - Anonymous GitHub",
-      })
-      .when("/status/:repoId", {
-        templateUrl: "/partials/status.htm",
-        controller: "statusController",
-        title: "Repository status - Anonymous GitHub",
-      })
-      .when("/conferences", {
-        templateUrl: "/partials/conferences.htm",
-        controller: "conferencesController",
-        title: "Conferences - Anonymous GitHub",
-      })
-      .when("/conference/new", {
-        templateUrl: "/partials/newConference.htm",
-        controller: "newConferenceController",
-        title: "Add a conference - Anonymous GitHub",
-      })
-      .when("/conference/:conferenceId/edit", {
-        templateUrl: "/partials/newConference.htm",
-        controller: "newConferenceController",
-        title: "Edit conference - Anonymous GitHub",
-      })
-      .when("/conference/:conferenceId", {
-        templateUrl: "/partials/conference.htm",
-        controller: "conferenceController",
-        title: "Conference - Anonymous GitHub",
-      })
-      .when("/faq", {
-        templateUrl: "/partials/faq.htm",
-        controller: "faqController",
-        title: "FAQ - Anonymous GitHub",
-      })
-      .when("/profile", {
-        templateUrl: "/partials/profile.htm",
-        controller: "profileController",
-        title: "Profile - Anonymous GitHub",
-      })
-      .when("/claim", {
-        templateUrl: "/partials/claim.htm",
-        controller: "claimController",
-        title: "Claim repository - Anonymous GitHub",
-      })
-      .when("/pr/:pullRequestId", {
-        templateUrl: "/partials/pullRequest.htm",
-        controller: "pullRequestController",
-        title: "Anonymized Pull Request - Anonymous GitHub",
-        reloadOnUrl: false,
-      })
-      .when("/r/:repoId/:path*?", {
-        templateUrl: "/partials/explorer.htm",
-        controller: "exploreController",
-        title: "Anonymized Repository - Anonymous GitHub",
-        reloadOnUrl: false,
-      })
-      .when("/repository/:repoId/:path*?", {
-        templateUrl: "/partials/explorer.htm",
-        controller: "exploreController",
-        title: "Anonymized Repository - Anonymous GitHub",
-        reloadOnUrl: false,
-      })
-      .when("/admin/", {
-        templateUrl: "/partials/admin/repositories.htm",
-        controller: "repositoriesAdminController",
-        title: "Repositories Admin - Anonymous GitHub",
-      })
-      .when("/admin/users", {
-        templateUrl: "/partials/admin/users.htm",
-        controller: "usersAdminController",
-        title: "Users Admin - Anonymous GitHub",
-      })
-      .when("/admin/users/:username", {
-        templateUrl: "/partials/admin/user.htm",
-        controller: "userAdminController",
-        title: "User Admin - Anonymous GitHub",
-      })
-      .when("/admin/conferences", {
-        templateUrl: "/partials/admin/conferences.htm",
-        controller: "conferencesAdminController",
-        title: "Conferences Admin - Anonymous GitHub",
-      })
-      .when("/admin/queues", {
-        templateUrl: "/partials/admin/queues.htm",
-        controller: "queuesAdminController",
-        title: "Queues Admin - Anonymous GitHub",
-      })
-      .when("/404", {
-        templateUrl: "/partials/404.htm",
-        title: "Page not found - Anonymous GitHub",
-      })
-      .otherwise({
-        templateUrl: "/partials/404.htm",
-        title: "Page not found - Anonymous GitHub",
+  .config([
+    "$routeProvider",
+    "$locationProvider",
+    "$translateProvider",
+    function ($routeProvider, $locationProvider, $translateProvider) {
+      $translateProvider.useStaticFilesLoader({
+        prefix: "/i18n/locale-",
+        suffix: ".json",
       });
-    $locationProvider.html5Mode(true);
-  })
+
+      $translateProvider.preferredLanguage("en");
+
+      $routeProvider
+        .when("/", {
+          templateUrl: "/partials/home.htm",
+          controller: "homeController",
+          title: "Anonymous GitHub",
+        })
+        .when("/dashboard", {
+          templateUrl: "/partials/dashboard.htm",
+          controller: "dashboardController",
+          title: "Dashboard - Anonymous GitHub",
+        })
+        .when("/pr-dashboard", {
+          templateUrl: "/partials/pr-dashboard.htm",
+          controller: "prDashboardController",
+          title: "Pull Request Dashboard - Anonymous GitHub",
+        })
+        .when("/anonymize/:repoId?", {
+          templateUrl: "/partials/anonymize.htm",
+          controller: "anonymizeController",
+          title: "Anonymize - Anonymous GitHub",
+        })
+        .when("/pull-request-anonymize/:pullRequestId?", {
+          templateUrl: "/partials/anonymizePullRequest.htm",
+          controller: "anonymizePullRequestController",
+          title: "Anonymize - Anonymous GitHub",
+        })
+        .when("/status/:repoId", {
+          templateUrl: "/partials/status.htm",
+          controller: "statusController",
+          title: "Repository status - Anonymous GitHub",
+        })
+        .when("/conferences", {
+          templateUrl: "/partials/conferences.htm",
+          controller: "conferencesController",
+          title: "Conferences - Anonymous GitHub",
+        })
+        .when("/conference/new", {
+          templateUrl: "/partials/newConference.htm",
+          controller: "newConferenceController",
+          title: "Add a conference - Anonymous GitHub",
+        })
+        .when("/conference/:conferenceId/edit", {
+          templateUrl: "/partials/newConference.htm",
+          controller: "newConferenceController",
+          title: "Edit conference - Anonymous GitHub",
+        })
+        .when("/conference/:conferenceId", {
+          templateUrl: "/partials/conference.htm",
+          controller: "conferenceController",
+          title: "Conference - Anonymous GitHub",
+        })
+        .when("/faq", {
+          templateUrl: "/partials/faq.htm",
+          controller: "faqController",
+          title: "FAQ - Anonymous GitHub",
+        })
+        .when("/profile", {
+          templateUrl: "/partials/profile.htm",
+          controller: "profileController",
+          title: "Profile - Anonymous GitHub",
+        })
+        .when("/claim", {
+          templateUrl: "/partials/claim.htm",
+          controller: "claimController",
+          title: "Claim repository - Anonymous GitHub",
+        })
+        .when("/pr/:pullRequestId", {
+          templateUrl: "/partials/pullRequest.htm",
+          controller: "pullRequestController",
+          title: "Anonymized Pull Request - Anonymous GitHub",
+          reloadOnUrl: false,
+        })
+        .when("/r/:repoId/:path*?", {
+          templateUrl: "/partials/explorer.htm",
+          controller: "exploreController",
+          title: "Anonymized Repository - Anonymous GitHub",
+          reloadOnUrl: false,
+        })
+        .when("/repository/:repoId/:path*?", {
+          templateUrl: "/partials/explorer.htm",
+          controller: "exploreController",
+          title: "Anonymized Repository - Anonymous GitHub",
+          reloadOnUrl: false,
+        })
+        .when("/admin/", {
+          templateUrl: "/partials/admin/repositories.htm",
+          controller: "repositoriesAdminController",
+          title: "Repositories Admin - Anonymous GitHub",
+        })
+        .when("/admin/users", {
+          templateUrl: "/partials/admin/users.htm",
+          controller: "usersAdminController",
+          title: "Users Admin - Anonymous GitHub",
+        })
+        .when("/admin/users/:username", {
+          templateUrl: "/partials/admin/user.htm",
+          controller: "userAdminController",
+          title: "User Admin - Anonymous GitHub",
+        })
+        .when("/admin/conferences", {
+          templateUrl: "/partials/admin/conferences.htm",
+          controller: "conferencesAdminController",
+          title: "Conferences Admin - Anonymous GitHub",
+        })
+        .when("/admin/queues", {
+          templateUrl: "/partials/admin/queues.htm",
+          controller: "queuesAdminController",
+          title: "Queues Admin - Anonymous GitHub",
+        })
+        .when("/404", {
+          templateUrl: "/partials/404.htm",
+          title: "Page not found - Anonymous GitHub",
+        })
+        .otherwise({
+          templateUrl: "/partials/404.htm",
+          title: "Page not found - Anonymous GitHub",
+        });
+      $locationProvider.html5Mode(true);
+    },
+  ])
   .filter("humanFileSize", function () {
     return humanFileSize;
   })
@@ -2442,28 +2447,3 @@ angular
       getConference();
     },
   ]);
-function humanFileSize(bytes, si = false, dp = 1) {
-  const thresh = si ? 1000 : 1024;
-
-  bytes = bytes / 8;
-
-  if (Math.abs(bytes) < thresh) {
-    return bytes + "B";
-  }
-
-  const units = si
-    ? ["kB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"]
-    : ["KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"];
-  let u = -1;
-  const r = 10 ** dp;
-
-  do {
-    bytes /= thresh;
-    ++u;
-  } while (
-    Math.round(Math.abs(bytes) * r) / r >= thresh &&
-    u < units.length - 1
-  );
-
-  return bytes.toFixed(dp) + "" + units[u];
-}

public/script/utils.js

@@ -1,3 +1,29 @@
+function humanFileSize(bytes, si = false, dp = 1) {
+  const thresh = si ? 1000 : 1024;
+
+  bytes = bytes / 8;
+
+  if (Math.abs(bytes) < thresh) {
+    return bytes + "B";
+  }
+
+  const units = si
+    ? ["kB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"]
+    : ["KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"];
+  let u = -1;
+  const r = 10 ** dp;
+
+  do {
+    bytes /= thresh;
+    ++u;
+  } while (
+    Math.round(Math.abs(bytes) * r) / r >= thresh &&
+    u < units.length - 1
+  );
+
+  return bytes.toFixed(dp) + "" + units[u];
+}
+
 function urlRel2abs(url) {
   /* Only accept commonly trusted protocols:
    * Only data-image URLs are accepted, Exotic flavours (escaped slash,
@@ -110,14 +136,13 @@ function parseGithubUrl(url) {
   }
 }
 
-marked.use(
-  markedEmoji({
-    emojis: githubEmojis,
-    unicode: false,
-  })
-);
-
 function renderMD(md, baseUrlValue) {
+  marked.use(
+    markedEmoji({
+      emojis: githubEmojis,
+      unicode: false,
+    })
+  );
   md = contentAbs2Relative(md);
   const renderer = new marked.Renderer();