move highlight.js to npm/webpack (#10011)

- introduced window.config to help with js-based lazy-loading
- adjusted webpack chunk naming to avoid 'vendors~name.js' that webpack
  defaults to for vendor chunks.
- added theme class to html and prefixed all selectors. this is
  neccesary so that the theme styles win over the lazy-loaded ones.

Co-authored-by: zeripath <[email protected]>

Author: 2 people

.eslintrc

@@ -19,7 +19,6 @@ globals:
   CodeMirror: false
   Dropzone: false
   emojify: false
-  hljs: false
   SimpleMDE: false
   u2fApi: false
   Vue: false

package-lock.json

@@ -6,6 +6,7 @@
   },
   "dependencies": {
     "fomantic-ui": "2.8.3",
+    "highlight.js": "9.18.0",
     "jquery": "3.4.1",
     "jquery-migrate": "3.1.0",
     "swagger-ui": "3.24.3",

package.json

@@ -26,8 +26,8 @@ Version: 1.1.0
 File(s): /vendor/plugins/dropzone/dropzone.js
 Version: 4.2.0
 
-File(s): /vendor/plugins/highlight/highlight.pack.js
-Version: 2b46620c9d62e9becf5f25969b5ccc41fa1da470
+File(s): /js/highlight.js
+Version: 9.18.0
 
 File(s): /vendor/plugins/jquery.datetimepicker/jquery.datetimepicker.js
 Version: 2.4.5

public/vendor/VERSIONS

@@ -66,9 +66,9 @@
           <td><a href="https://github.com/enyo/dropzone/archive/v4.2.0.tar.gz">dropzone.js-4.2.0.tar.gz</a></td>
         </tr>
         <tr>
-          <td><a href="./plugins/highlight/highlight.pack.js">highlight.pack.js</a></td>
+          <td><a href="./highlight.js">highlight.js</a></td>
           <td><a href="https://github.com/highlightjs/highlight.js/blob/master/LICENSE">BSD 3-Clause</a></td>
-          <td><a href="https://github.com/highlightjs/highlight.js/archive/2b46620c.tar.gz">highlight.js-2b46620c.tar.gz</a></td>
+          <td><a href="https://github.com/highlightjs/highlight.js/archive/9.18.0.tar.gz">highlight.js.tar.gz</a></td>
         </tr>
         <tr>
           <td><a href="./plugins/jquery.datetimepicker/jquery.datetimepicker.js">jquery.datetimepicker.js</a></td>

public/vendor/librejs.html

@@ -24,9 +24,6 @@
 {{end}}
 
 <!-- Third-party libraries -->
-{{if .RequireHighlightJS}}
-	<script src="{{StaticUrlPrefix}}/vendor/plugins/highlight/highlight.pack.js"></script>
-{{end}}
 {{if .RequireMinicolors}}
 	<script src="{{StaticUrlPrefix}}/vendor/plugins/jquery.minicolors/jquery.minicolors.min.js"></script>
 {{end}}

public/vendor/plugins/highlight/LICENSE

@@ -83,6 +83,17 @@
         for the JavaScript code in this page.
 	*/`}}
 	</script>
+	<script>
+		window.config = {
+			Datetimepicker: {{if .RequireDatetimepicker}}true{{else}}false{{end}},
+			Dropzone: {{if .RequireDropzone}}true{{else}}false{{end}},
+			HighlightJS: {{if .RequireHighlightJS}}true{{else}}false{{end}},
+			Minicolors: {{if .RequireMinicolors}}true{{else}}false{{end}},
+			SimpleMDE: {{if .RequireSimpleMDE}}true{{else}}false{{end}},
+			Tribute: {{if .RequireTribute}}true{{else}}false{{end}},
+			U2F: {{if .RequireU2F}}true{{else}}false{{end}},
+		};
+	</script>
 	<link rel="shortcut icon" href="{{StaticUrlPrefix}}/img/favicon.png">
 	<link rel="apple-touch-icon" href="{{StaticUrlPrefix}}/img/favicon.png">
 	<link rel="mask-icon" href="{{StaticUrlPrefix}}/img/gitea-safari.svg" color="#609926">
@@ -106,10 +117,6 @@
 			.ui.secondary.menu .dropdown.item > .menu { margin-top: 0; }
 		</style>
 	</noscript>
-
-{{if .RequireHighlightJS}}
-	<link rel="stylesheet" href="{{StaticUrlPrefix}}/vendor/plugins/highlight/github.css">
-{{end}}
 {{if .RequireMinicolors}}
 	<link rel="stylesheet" href="{{StaticUrlPrefix}}/vendor/plugins/jquery.minicolors/jquery.minicolors.css">
 {{end}}

public/vendor/plugins/highlight/default.css

@@ -3,6 +3,7 @@ var urlsToCache = [
   // js
   '{{StaticUrlPrefix}}/fomantic/semantic.min.js?v={{MD5 AppVer}}',
   '{{StaticUrlPrefix}}/js/gitgraph.js',
+  '{{StaticUrlPrefix}}/js/highlight.js',
   '{{StaticUrlPrefix}}/js/index.js?v={{MD5 AppVer}}',
   '{{StaticUrlPrefix}}/js/jquery.js?v={{MD5 AppVer}}',
   '{{StaticUrlPrefix}}/js/swagger.js?v={{MD5 AppVer}}',
@@ -11,7 +12,6 @@ var urlsToCache = [
   '{{StaticUrlPrefix}}/vendor/plugins/codemirror/mode/meta.js',
   '{{StaticUrlPrefix}}/vendor/plugins/dropzone/dropzone.js',
   '{{StaticUrlPrefix}}/vendor/plugins/emojify/emojify.custom.js',
-  '{{StaticUrlPrefix}}/vendor/plugins/highlight/highlight.pack.js',
   '{{StaticUrlPrefix}}/vendor/plugins/jquery.areyousure/jquery.are-you-sure.js',
   '{{StaticUrlPrefix}}/vendor/plugins/jquery.datetimepicker/jquery.datetimepicker.js',
   '{{StaticUrlPrefix}}/vendor/plugins/jquery.minicolors/jquery.minicolors.min.js',
@@ -20,13 +20,13 @@ var urlsToCache = [
 
   // css
   '{{StaticUrlPrefix}}/css/gitgraph.css',
+  '{{StaticUrlPrefix}}/css/highlight.css',
   '{{StaticUrlPrefix}}/css/index.css?v={{MD5 AppVer}}',
   '{{StaticUrlPrefix}}/css/swagger.css?v={{MD5 AppVer}}',
   '{{StaticUrlPrefix}}/fomantic/semantic.min.css?v={{MD5 AppVer}}',
   '{{StaticUrlPrefix}}/vendor/assets/font-awesome/css/font-awesome.min.css',
   '{{StaticUrlPrefix}}/vendor/assets/octicons/octicons.min.css',
   '{{StaticUrlPrefix}}/vendor/plugins/dropzone/dropzone.css',
-  '{{StaticUrlPrefix}}/vendor/plugins/highlight/github.css',
   '{{StaticUrlPrefix}}/vendor/plugins/jquery.datetimepicker/jquery.datetimepicker.css',
   '{{StaticUrlPrefix}}/vendor/plugins/jquery.minicolors/jquery.minicolors.css',
   '{{StaticUrlPrefix}}/vendor/plugins/simplemde/simplemde.min.css',

public/vendor/plugins/highlight/github.css

@@ -0,0 +1,12 @@
+export default async function initHighlight() {
+  if (!window.config || !window.config.HighlightJS) return;
+
+  const hljs = await import(/* webpackChunkName: "highlight" */'highlight.js');
+
+  const nodes = [].slice.call(document.querySelectorAll('pre code') || []);
+  for (let i = 0; i < nodes.length; i++) {
+    hljs.highlightBlock(nodes[i]);
+  }
+
+  return hljs;
+}