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 <art27@cantab.net>
This commit is contained in:
silverwind
Lauris BH
parent
d879353632
commit
b9690d7c0b
16 changed files with 53 additions and 254 deletions
|
|
@ -19,7 +19,6 @@ globals:
|
|||
CodeMirror: false
|
||||
Dropzone: false
|
||||
emojify: false
|
||||
hljs: false
|
||||
SimpleMDE: false
|
||||
u2fApi: false
|
||||
Vue: false
|
||||
|
|
|
|||
5
package-lock.json
generated
5
package-lock.json
generated
|
|
@ -7341,6 +7341,11 @@
|
|||
"integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==",
|
||||
"dev": true
|
||||
},
|
||||
"highlight.js": {
|
||||
"version": "9.18.0",
|
||||
"resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-9.18.0.tgz",
|
||||
"integrity": "sha512-A97kI1KAUzKoAiEoaGcf2O9YPS8nbDTCRFokaaeBhnqjQTvbAuAJrQMm21zw8s8xzaMtCQBtgbyGXLGxdxQyqQ=="
|
||||
},
|
||||
"hmac-drbg": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
4
public/vendor/VERSIONS
vendored
4
public/vendor/VERSIONS
vendored
|
|
@ -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
|
||||
|
|
|
|||
4
public/vendor/librejs.html
vendored
4
public/vendor/librejs.html
vendored
|
|
@ -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>
|
||||
|
|
|
|||
25
public/vendor/plugins/highlight/LICENSE
vendored
25
public/vendor/plugins/highlight/LICENSE
vendored
|
|
@ -1,25 +0,0 @@
|
|||
Copyright (c) 2006, Ivan Sagalaev
|
||||
All rights reserved.
|
||||
Redistribution and use in source and binary forms, with or without
|
||||
modification, are permitted provided that the following conditions are met:
|
||||
|
||||
* Redistributions of source code must retain the above copyright
|
||||
notice, this list of conditions and the following disclaimer.
|
||||
* Redistributions in binary form must reproduce the above copyright
|
||||
notice, this list of conditions and the following disclaimer in the
|
||||
documentation and/or other materials provided with the distribution.
|
||||
* Neither the name of highlight.js nor the names of its contributors
|
||||
may be used to endorse or promote products derived from this software
|
||||
without specific prior written permission.
|
||||
|
||||
THIS SOFTWARE IS PROVIDED BY THE REGENTS AND CONTRIBUTORS ``AS IS'' AND ANY
|
||||
EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
|
||||
WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
|
||||
DISCLAIMED. IN NO EVENT SHALL THE REGENTS AND CONTRIBUTORS BE LIABLE FOR ANY
|
||||
DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
|
||||
(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
|
||||
LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
|
||||
ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
|
||||
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
|
||||
SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
||||
|
||||
99
public/vendor/plugins/highlight/default.css
vendored
99
public/vendor/plugins/highlight/default.css
vendored
|
|
@ -1,99 +0,0 @@
|
|||
/*
|
||||
|
||||
Original highlight.js style (c) Ivan Sagalaev <maniac@softwaremaniacs.org>
|
||||
|
||||
*/
|
||||
|
||||
.hljs {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
padding: 0.5em;
|
||||
background: #F0F0F0;
|
||||
}
|
||||
|
||||
|
||||
/* Base color: saturation 0; */
|
||||
|
||||
.hljs,
|
||||
.hljs-subst {
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.hljs-comment {
|
||||
color: #888888;
|
||||
}
|
||||
|
||||
.hljs-keyword,
|
||||
.hljs-attribute,
|
||||
.hljs-selector-tag,
|
||||
.hljs-meta-keyword,
|
||||
.hljs-doctag,
|
||||
.hljs-name {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
/* User color: hue: 0 */
|
||||
|
||||
.hljs-type,
|
||||
.hljs-string,
|
||||
.hljs-number,
|
||||
.hljs-selector-id,
|
||||
.hljs-selector-class,
|
||||
.hljs-quote,
|
||||
.hljs-template-tag,
|
||||
.hljs-deletion {
|
||||
color: #880000;
|
||||
}
|
||||
|
||||
.hljs-title,
|
||||
.hljs-section {
|
||||
color: #880000;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hljs-regexp,
|
||||
.hljs-symbol,
|
||||
.hljs-variable,
|
||||
.hljs-template-variable,
|
||||
.hljs-link,
|
||||
.hljs-selector-attr,
|
||||
.hljs-selector-pseudo {
|
||||
color: #BC6060;
|
||||
}
|
||||
|
||||
|
||||
/* Language color: hue: 90; */
|
||||
|
||||
.hljs-literal {
|
||||
color: #78A960;
|
||||
}
|
||||
|
||||
.hljs-built_in,
|
||||
.hljs-bullet,
|
||||
.hljs-code,
|
||||
.hljs-addition {
|
||||
color: #397300;
|
||||
}
|
||||
|
||||
|
||||
/* Meta color: hue: 200 */
|
||||
|
||||
.hljs-meta {
|
||||
color: #1f7199;
|
||||
}
|
||||
|
||||
.hljs-meta-string {
|
||||
color: #4d99bf;
|
||||
}
|
||||
|
||||
|
||||
/* Misc effects */
|
||||
|
||||
.hljs-emphasis {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.hljs-strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
99
public/vendor/plugins/highlight/github.css
vendored
99
public/vendor/plugins/highlight/github.css
vendored
|
|
@ -1,99 +0,0 @@
|
|||
/*
|
||||
|
||||
github.com style (c) Vasily Polovnyov <vast@whiteants.net>
|
||||
|
||||
*/
|
||||
|
||||
.hljs {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
padding: 0.5em;
|
||||
color: #333;
|
||||
background: #f8f8f8;
|
||||
}
|
||||
|
||||
.hljs-comment,
|
||||
.hljs-quote {
|
||||
color: #998;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.hljs-keyword,
|
||||
.hljs-selector-tag,
|
||||
.hljs-subst {
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hljs-number,
|
||||
.hljs-literal,
|
||||
.hljs-variable,
|
||||
.hljs-template-variable,
|
||||
.hljs-tag .hljs-attr {
|
||||
color: #008080;
|
||||
}
|
||||
|
||||
.hljs-string,
|
||||
.hljs-doctag {
|
||||
color: #d14;
|
||||
}
|
||||
|
||||
.hljs-title,
|
||||
.hljs-section,
|
||||
.hljs-selector-id {
|
||||
color: #900;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hljs-subst {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.hljs-type,
|
||||
.hljs-class .hljs-title {
|
||||
color: #458;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hljs-tag,
|
||||
.hljs-name,
|
||||
.hljs-attribute {
|
||||
color: #000080;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.hljs-regexp,
|
||||
.hljs-link {
|
||||
color: #009926;
|
||||
}
|
||||
|
||||
.hljs-symbol,
|
||||
.hljs-bullet {
|
||||
color: #990073;
|
||||
}
|
||||
|
||||
.hljs-built_in,
|
||||
.hljs-builtin-name {
|
||||
color: #0086b3;
|
||||
}
|
||||
|
||||
.hljs-meta {
|
||||
color: #999;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hljs-deletion {
|
||||
background: #fdd;
|
||||
}
|
||||
|
||||
.hljs-addition {
|
||||
background: #dfd;
|
||||
}
|
||||
|
||||
.hljs-emphasis {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.hljs-strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -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}}
|
||||
|
|
|
|||
|
|
@ -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}}
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
12
web_src/js/features/highlight.js
Normal file
12
web_src/js/features/highlight.js
Normal file
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -6,7 +6,8 @@ import './publicPath.js';
|
|||
import './polyfills.js';
|
||||
import './gitGraphLoader.js';
|
||||
import './semanticDropdown.js';
|
||||
import initContextPopups from './features/contextPopup';
|
||||
import initContextPopups from './features/contextPopup.js';
|
||||
import initHighlight from './features/highlight.js';
|
||||
|
||||
import ActivityTopAuthors from './components/ActivityTopAuthors.vue';
|
||||
|
||||
|
|
@ -20,6 +21,7 @@ let previewFileModes;
|
|||
let simpleMDEditor;
|
||||
const commentMDEditors = {};
|
||||
let codeMirrorEditor;
|
||||
let hljs;
|
||||
|
||||
// Disable Dropzone auto-discover because it's manually initialized
|
||||
if (typeof (Dropzone) !== 'undefined') {
|
||||
|
|
@ -2318,7 +2320,7 @@ function initTemplateSearch() {
|
|||
changeOwner();
|
||||
}
|
||||
|
||||
$(document).ready(() => {
|
||||
$(document).ready(async () => {
|
||||
csrf = $('meta[name=_csrf]').attr('content');
|
||||
suburl = $('meta[name=_suburl]').attr('content');
|
||||
|
||||
|
|
@ -2370,14 +2372,6 @@ $(document).ready(() => {
|
|||
window.location = $(this).data('href');
|
||||
});
|
||||
|
||||
// Highlight JS
|
||||
if (typeof hljs !== 'undefined') {
|
||||
const nodes = [].slice.call(document.querySelectorAll('pre code') || []);
|
||||
for (let i = 0; i < nodes.length; i++) {
|
||||
hljs.highlightBlock(nodes[i]);
|
||||
}
|
||||
}
|
||||
|
||||
// Dropzone
|
||||
const $dropzone = $('#dropzone');
|
||||
if ($dropzone.length > 0) {
|
||||
|
|
@ -2591,6 +2585,10 @@ $(document).ready(() => {
|
|||
$repoName.val($cloneAddr.val().match(/^(.*\/)?((.+?)(\.git)?)$/)[3]);
|
||||
}
|
||||
});
|
||||
|
||||
[hljs] = await Promise.all([
|
||||
initHighlight(),
|
||||
]);
|
||||
});
|
||||
|
||||
function changeHash(hash) {
|
||||
|
|
|
|||
|
|
@ -13,3 +13,4 @@
|
|||
@import "_admin";
|
||||
@import "_explore";
|
||||
@import "_review";
|
||||
@import "~highlight.js/styles/github.css";
|
||||
|
|
|
|||
|
|
@ -65,6 +65,10 @@ module.exports = {
|
|||
},
|
||||
}),
|
||||
],
|
||||
splitChunks: {
|
||||
chunks: 'async',
|
||||
name: (_, chunks) => chunks.map((item) => item.name).join('-'),
|
||||
}
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
|
|
@ -142,10 +146,8 @@ module.exports = {
|
|||
}),
|
||||
new SourceMapDevToolPlugin({
|
||||
filename: 'js/[name].js.map',
|
||||
exclude: [
|
||||
'js/gitgraph.js',
|
||||
'js/jquery.js',
|
||||
'js/swagger.js',
|
||||
include: [
|
||||
'js/index.js',
|
||||
],
|
||||
}),
|
||||
],
|
||||
|
|
@ -153,7 +155,9 @@ module.exports = {
|
|||
maxEntrypointSize: 512000,
|
||||
maxAssetSize: 512000,
|
||||
assetFilter: (filename) => {
|
||||
return !filename.endsWith('.map') && filename !== 'js/swagger.js';
|
||||
if (filename.endsWith('.map')) return false;
|
||||
if (['js/swagger.js', 'js/highlight.js'].includes(filename)) return false;
|
||||
return true;
|
||||
},
|
||||
},
|
||||
resolve: {
|
||||
|
|
|
|||
Loading…
Reference in a new issue