From e51cd49b52dd7f332ccbebce5e970248524502aa Mon Sep 17 00:00:00 2001
From: Frank Sauerburger <frank@sauerburger.com>
Date: Sun, 3 Jan 2021 18:14:43 +0100
Subject: [PATCH] Use js and bootstrap from NPM
---
.gitlab-ci.yml | 2 +-
uhepp-js/src/common.scss | 11 +++++++-
uhepp-js/webpack.config.js | 18 ++++++++++---
.../templates/uhepp_vault/base.html | 10 ++++---
.../templates/uhepp_vault/plot_detail.html | 26 +++++++++----------
5 files changed, 46 insertions(+), 21 deletions(-)
diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index 0afdf17..d2d8735 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -37,7 +37,7 @@ jsbuild:
artifacts:
expire_in: 1 week
paths:
- - uhepp_org/uhepp_vault/static/uhepp-js/main.js*
+ - uhepp_org/uhepp_vault/static/react/main.js*
build:
stage: build
diff --git a/uhepp-js/src/common.scss b/uhepp-js/src/common.scss
index 93c4b1c..ec3109d 100644
--- a/uhepp-js/src/common.scss
+++ b/uhepp-js/src/common.scss
@@ -1 +1,10 @@
-@import "~bootstrap/scss/bootstrap";
\ No newline at end of file
+
+$theme-colors: (
+ "primary": #1f8aba,
+);
+
+@import "~bootstrap/scss/bootstrap";
+
+a:hover {
+ text-decoration: none;
+}
diff --git a/uhepp-js/webpack.config.js b/uhepp-js/webpack.config.js
index f55ca34..4a050e1 100644
--- a/uhepp-js/webpack.config.js
+++ b/uhepp-js/webpack.config.js
@@ -19,15 +19,27 @@ module.exports = {
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// all options are optional
- filename: '[name].[contenthash].css',
- chunkFilename: '[id].[contenthash].css',
+ filename: '[name].css',
+ chunkFilename: '[id].css',
ignoreOrder: false, // Enable to remove warnings about conflicting order
}),
],
output: {
filename: '[name].js',
library: 'uhepp',
- path: path.resolve(__dirname, '../uhepp_org/uhepp_vault/static/uhepp-js')
+ path: path.resolve(__dirname, '../uhepp_org/uhepp_vault/static/react')
+ },
+ optimization: {
+ runtimeChunk: 'single',
+ splitChunks: {
+ cacheGroups: {
+ vendor: {
+ test: /[\\/]node_modules[\\/]/,
+ name: 'vendors',
+ chunks: 'all'
+ }
+ }
+ }
},
module: {
rules: [
diff --git a/uhepp_org/uhepp_vault/templates/uhepp_vault/base.html b/uhepp_org/uhepp_vault/templates/uhepp_vault/base.html
index ceee249..8ceda47 100644
--- a/uhepp_org/uhepp_vault/templates/uhepp_vault/base.html
+++ b/uhepp_org/uhepp_vault/templates/uhepp_vault/base.html
@@ -1,6 +1,7 @@
<!doctype html>
<html lang="en">
{% load svg %}
+{% load static %}
{% load pygmentify_tags %}
<head>
<meta charset="utf-8">
@@ -8,10 +9,8 @@
<meta name="author" content="Frank Sauerburger" />
<meta name="description" content="Universal HEP Plot storage -- uhepp" />
<link rel="canonical" href="https://uhepp.org/" />
+ <link rel="stylesheet" href="{% static 'react/main.css' %}">
<link rel="stylesheet" href="{% pygmentify_css %}">
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
- <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<title>uhepp hub</title>
<style>
.navbar-brand svg {
@@ -79,5 +78,10 @@
{% endblock %}
</div>
+<script src="{% static 'react/runtime.js' %}"></script>
+<script src="{% static 'react/vendors.js' %}"></script>
+<script src="{% static 'react/main.js' %}"></script>
+{% block loadscript %}
+{% endblock %}
</body>
</html>
diff --git a/uhepp_org/uhepp_vault/templates/uhepp_vault/plot_detail.html b/uhepp_org/uhepp_vault/templates/uhepp_vault/plot_detail.html
index d861503..7c26e67 100644
--- a/uhepp_org/uhepp_vault/templates/uhepp_vault/plot_detail.html
+++ b/uhepp_org/uhepp_vault/templates/uhepp_vault/plot_detail.html
@@ -12,20 +12,7 @@ back to collection
<div id="app-root">
Loading...
</div>
-<script src="/static/uhepp-js/main.js"></script>
{{ plot.uhepp|json_script:"plot-data" }}
-<script>
-uhepp.fe.ReactDOM.render(
- uhepp.fe.React.createElement(uhepp.fe.Graph, {
- width: "555",
- height: "400",
- uhepp: JSON.parse(document.getElementById('plot-data').textContent)
- }),
- document.getElementById('app-root')
-);
-</script>
-
-<!-- <textarea cols="100" rows="10" readonly>{{ plot.uhepp }}</textarea> -->
<p>
<a class="btn btn-primary" href="{% url 'uhepp_vault:plot-download' plot.uuid %}">Download JSON</a>
@@ -53,3 +40,16 @@ hist.push({{ plot.collection.pk }})</pre>
{% endpygmentify %}
{% endblock %}
+
+{% block loadscript %}
+<script>
+uhepp.fe.ReactDOM.render(
+ uhepp.fe.React.createElement(uhepp.fe.Graph, {
+ width: "555",
+ height: "400",
+ uhepp: JSON.parse(document.getElementById('plot-data').textContent)
+ }),
+ document.getElementById('app-root')
+);
+</script>
+{% endblock %}
--
GitLab