core
/
gitea
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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 2020-01-28 22:57:20 +01:00 committed by Lauris BH
parent d879353632
commit b9690d7c0b
16 changed files with 53 additions and 254 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.eslintrc
View File

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

5
package-lock.json generated
View File

@ -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",

1
package.json
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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;
}

2
public/vendor/plugins/highlight/highlight.pack.js vendored
View File

File diff suppressed because one or more lines are too long

3
templates/base/footer.tmpl
View File

@ -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}}

15
templates/base/head.tmpl
View File

@ -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}}

4
templates/pwa/serviceworker_js.tmpl
View File

@ -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
View 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;
}

18
web_src/js/index.js
View File

@ -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) {

1
web_src/less/index.less
View File

@ -13,3 +13,4 @@
@import "_admin";
@import "_explore";
@import "_review";
@import "~highlight.js/styles/github.css";

14
webpack.config.js
View File

@ -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: {