Add bootstrap styling and webpack resource handling

This commit is contained in:
Jan Dittberner 2021-01-01 16:21:12 +01:00
parent 3f43a07f9f
commit 49c91cddb0
22 changed files with 9807 additions and 2 deletions

2
.gitignore vendored
View file

@ -2,5 +2,7 @@
/certs/ /certs/
/hydra.yaml /hydra.yaml
/idp.toml /idp.toml
/node_modules/
/resource_app.toml /resource_app.toml
/sessions/ /sessions/
/static/

View file

@ -0,0 +1 @@
@import "~bootstrap/scss/bootstrap";

View file

Before

Width:  |  Height:  |  Size: 7.4 KiB

After

Width:  |  Height:  |  Size: 7.4 KiB

View file

Before

Width:  |  Height:  |  Size: 9.4 KiB

After

Width:  |  Height:  |  Size: 9.4 KiB

View file

Before

Width:  |  Height:  |  Size: 4.6 KiB

After

Width:  |  Height:  |  Size: 4.6 KiB

View file

Before

Width:  |  Height:  |  Size: 5 KiB

After

Width:  |  Height:  |  Size: 5 KiB

View file

Before

Width:  |  Height:  |  Size: 5.9 KiB

After

Width:  |  Height:  |  Size: 5.9 KiB

View file

Before

Width:  |  Height:  |  Size: 6.5 KiB

After

Width:  |  Height:  |  Size: 6.5 KiB

View file

Before

Width:  |  Height:  |  Size: 7.1 KiB

After

Width:  |  Height:  |  Size: 7.1 KiB

View file

Before

Width:  |  Height:  |  Size: 7.7 KiB

After

Width:  |  Height:  |  Size: 7.7 KiB

View file

Before

Width:  |  Height:  |  Size: 7.8 KiB

After

Width:  |  Height:  |  Size: 7.8 KiB

View file

Before

Width:  |  Height:  |  Size: 9.1 KiB

After

Width:  |  Height:  |  Size: 9.1 KiB

View file

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

View file

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 2.2 KiB

View file

Before

Width:  |  Height:  |  Size: 3 KiB

After

Width:  |  Height:  |  Size: 3 KiB

View file

Before

Width:  |  Height:  |  Size: 3.7 KiB

After

Width:  |  Height:  |  Size: 3.7 KiB

3
frontend_src/index.js Normal file
View file

@ -0,0 +1,3 @@
import 'jquery';
import 'popper.js';
import 'bootstrap';

9679
package-lock.json generated Normal file

File diff suppressed because it is too large Load diff

33
package.json Normal file
View file

@ -0,0 +1,33 @@
{
"name": "cacert-webpack",
"version": "0.1.0",
"description": "webpack setup for CAcert static web resources",
"scripts": {
"build": "webpack",
"watch": "webpack --watch"
},
"private": true,
"author": "Jan Dittberner",
"devDependencies": {
"autoprefixer": "^9.8.6",
"bootstrap": "^4.5.3",
"clean-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^7.0.0",
"css-loader": "^5.0.1",
"file-loader": "^6.2.0",
"html-loader": "^1.3.2",
"jquery": "^3.5.1",
"mini-css-extract-plugin": "^1.3.3",
"popper.js": "^1.16.1",
"postcss-loader": "^4.1.0",
"precss": "^4.0.0",
"sass": "^1.32.0",
"sass-loader": "^10.1.0",
"style-loader": "^2.0.0",
"terser-webpack-plugin": "^5.0.3",
"url-loader": "^4.1.1",
"webpack": "^5.11.1",
"webpack-cli": "^4.3.1",
"webpack-manifest-plugin": "^3.0.0"
}
}

View file

@ -2,7 +2,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<title>{{ .Title }}</title> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- generics --> <!-- generics -->
<link rel="icon" href="/images/favicon-32.png" sizes="32x32"> <link rel="icon" href="/images/favicon-32.png" sizes="32x32">
<link rel="icon" href="/images/favicon-57.png" sizes="57x57"> <link rel="icon" href="/images/favicon-57.png" sizes="57x57">
@ -19,9 +20,13 @@
<link rel="apple-touch-icon" href="/images/favicon-120.png" sizes="120x120"> <link rel="apple-touch-icon" href="/images/favicon-120.png" sizes="120x120">
<link rel="apple-touch-icon" href="/images/favicon-152.png" sizes="152x152"> <link rel="apple-touch-icon" href="/images/favicon-152.png" sizes="152x152">
<link rel="apple-touch-icon" href="/images/favicon-180.png" sizes="180x180"> <link rel="apple-touch-icon" href="/images/favicon-180.png" sizes="180x180">
<link rel="stylesheet" href="/css/cacert.bundle.css">
<title>{{ .Title }}</title>
</head> </head>
<body> <body>
{{ template "content" . }} {{ template "content" . }}
<script type="text/javascript" src="/js/cacert.bundle.js"></script>
</body> </body>
</html> </html>
{{ end }} {{ end }}

View file

@ -2,7 +2,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<title>{{ .Title }}</title> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- generics --> <!-- generics -->
<link rel="icon" href="/images/favicon-32.png" sizes="32x32"> <link rel="icon" href="/images/favicon-32.png" sizes="32x32">
<link rel="icon" href="/images/favicon-57.png" sizes="57x57"> <link rel="icon" href="/images/favicon-57.png" sizes="57x57">
@ -19,10 +20,15 @@
<link rel="apple-touch-icon" href="/images/favicon-120.png" sizes="120x120"> <link rel="apple-touch-icon" href="/images/favicon-120.png" sizes="120x120">
<link rel="apple-touch-icon" href="/images/favicon-152.png" sizes="152x152"> <link rel="apple-touch-icon" href="/images/favicon-152.png" sizes="152x152">
<link rel="apple-touch-icon" href="/images/favicon-180.png" sizes="180x180"> <link rel="apple-touch-icon" href="/images/favicon-180.png" sizes="180x180">
<link rel="stylesheet" href="/css/cacert.bundle.css">
<title>{{ .Title }}</title>
</head> </head>
<body> <body>
<h1>{{ .Title }}</h1> <h1>{{ .Title }}</h1>
<img src="/images/CAcert-logo.svg" width="510" height="116" alt="CAcert">
{{ template "content" . }} {{ template "content" . }}
<script type="text/javascript" src="/js/cacert.bundle.js"></script>
</body> </body>
</html> </html>
{{ end }} {{ end }}

76
webpack.config.js Normal file
View file

@ -0,0 +1,76 @@
const path = require('path');
const CopyPlugin = require('copy-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const TerserPlugin = require("terser-webpack-plugin");
const {WebpackManifestPlugin} = require("webpack-manifest-plugin");
const {CleanWebpackPlugin} = require("clean-webpack-plugin");
module.exports = {
mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
entry: {
cacert: [
path.resolve(__dirname, 'frontend_src/index.js'),
path.resolve(__dirname, 'frontend_src/_custom.scss'),
]
},
plugins: [
new CleanWebpackPlugin({cleanStaleWebpackAssets: false}),
new WebpackManifestPlugin(),
new MiniCssExtractPlugin({
filename: "css/[name].bundle.css",
}),
new CopyPlugin({
patterns: [
{
from: "images/**",
context: path.resolve(__dirname, "frontend_src"),
}
],
}),
],
output: {
path: path.resolve(__dirname, 'static'),
filename: 'js/[name].bundle.js',
},
optimization: {
minimize: true,
minimizer: [new TerserPlugin()],
},
module: {
rules: [
{
test: /\.(svg|png|jpg|jpeg|gif)$/,
type: "asset/resource",
},
{
test: /\.scss$/,
use: [{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: "/static/",
}
}, {
loader: 'css-loader',
options: {
importLoaders: 1,
modules: {auto: true},
}
}, {
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: function () {
return [
require('precss'),
require('autoprefixer'),
];
}
}
}
}, {
loader: 'sass-loader',
}]
}
],
},
}