From cd635d478bbdbb20640bcfdeb975e398617ee9b5 Mon Sep 17 00:00:00 2001
From: pkupczyk <piotr.kupczyk@id.ethz.ch>
Date: Thu, 25 May 2023 12:14:51 +0200
Subject: [PATCH] SSDM-13504 : unify logos and icons : admin ui part using
webpack bundling + regular urls for webmanifest related files
---
ui-admin/index.html | 8 +++---
ui-admin/package.json | 1 +
ui-admin/src/js/components/login/Login.jsx | 2 +-
ui-admin/src/js/webmanifest.js | 25 ------------------
.../img/android-chrome-192x192.png | Bin
.../img/android-chrome-512x512.png | Bin
.../{ => resources}/img/apple-touch-icon.png | Bin
.../src/{ => resources}/img/favicon-16x16.png | Bin
.../src/{ => resources}/img/favicon-32x32.png | Bin
ui-admin/src/{ => resources}/img/favicon.ico | Bin
.../img/openbis-favicon-transparent.png | Bin
.../img/openbis-logo-transparent.png | Bin
.../src/resources/manifest/site.webmanifest | 19 +++++++++++++
ui-admin/webpack.config.dev.js | 16 +++++------
ui-admin/webpack.config.js | 10 +++----
15 files changed, 36 insertions(+), 45 deletions(-)
delete mode 100644 ui-admin/src/js/webmanifest.js
rename ui-admin/src/{ => resources}/img/android-chrome-192x192.png (100%)
rename ui-admin/src/{ => resources}/img/android-chrome-512x512.png (100%)
rename ui-admin/src/{ => resources}/img/apple-touch-icon.png (100%)
rename ui-admin/src/{ => resources}/img/favicon-16x16.png (100%)
rename ui-admin/src/{ => resources}/img/favicon-32x32.png (100%)
rename ui-admin/src/{ => resources}/img/favicon.ico (100%)
rename ui-admin/src/{ => resources}/img/openbis-favicon-transparent.png (100%)
rename ui-admin/src/{ => resources}/img/openbis-logo-transparent.png (100%)
create mode 100644 ui-admin/src/resources/manifest/site.webmanifest
diff --git a/ui-admin/index.html b/ui-admin/index.html
index 0aa3e2a03bb..5250d61c8af 100644
--- a/ui-admin/index.html
+++ b/ui-admin/index.html
@@ -3,10 +3,10 @@
<head>
<title>openBIS Admin</title>
<meta charset="utf-8" />
- <link rel="apple-touch-icon" sizes="180x180" href="<%= require('@src/img/apple-touch-icon.png') %>">
- <link rel="icon" type="image/png" sizes="32x32" href="<%= require('@src/img/favicon-32x32.png?url') %>">
- <link rel="icon" type="image/png" sizes="16x16" href="<%= require('@src/img/favicon-16x16.png?url') %>">
- <link rel="manifest" href="<%= require('@src/js/webmanifest.js').default %>">
+ <link rel="apple-touch-icon" sizes="180x180" href="<%= require('@src/resources/img/apple-touch-icon.png') %>">
+ <link rel="icon" type="image/png" sizes="32x32" href="<%= require('@src/resources/img/favicon-32x32.png') %>">
+ <link rel="icon" type="image/png" sizes="16x16" href="<%= require('@src/resources/img/favicon-16x16.png') %>">
+ <link rel="manifest" href="manifest/site.webmanifest">
<style>
html {
diff --git a/ui-admin/package.json b/ui-admin/package.json
index caed5e74b6a..134257eaabd 100644
--- a/ui-admin/package.json
+++ b/ui-admin/package.json
@@ -41,6 +41,7 @@
"babel-jest": "^29.3.1",
"babel-loader": "^9.1.0",
"babel-plugin-transform-amd-to-commonjs": "^1.6.0",
+ "copy-webpack-plugin": "^11.0.0",
"css-loader": "^6.7.3",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.7",
diff --git a/ui-admin/src/js/components/login/Login.jsx b/ui-admin/src/js/components/login/Login.jsx
index d9c0b6a8ffa..46592d7ba87 100644
--- a/ui-admin/src/js/components/login/Login.jsx
+++ b/ui-admin/src/js/components/login/Login.jsx
@@ -18,7 +18,7 @@ import openbis from '@src/js/services/openbis.js'
import messages from '@src/js/common/messages.js'
import logger from '@src/js/common/logger.js'
-import Logo from '@src/img/openbis-logo-transparent.png'
+import Logo from '@src/resources/img/openbis-logo-transparent.png'
const styles = theme => ({
card: {
diff --git a/ui-admin/src/js/webmanifest.js b/ui-admin/src/js/webmanifest.js
deleted file mode 100644
index debc48bd7da..00000000000
--- a/ui-admin/src/js/webmanifest.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import AndroidChrome192 from '@src/img/android-chrome-192x192.png?url'
-import AndroidChrome512 from '@src/img/android-chrome-512x512.png?url'
-
-const config = {
- name: 'openBIS Admin UI',
- short_name: 'Admin UI',
- icons: [
- {
- src: AndroidChrome192,
- sizes: '192x192',
- type: 'image/png'
- },
- {
- src: AndroidChrome512,
- sizes: '512x512',
- type: 'image/png'
- }
- ],
- theme_color: '#ffffff',
- background_color: '#ffffff',
- display: 'standalone'
-}
-
-export default 'data:application/manifest+json;base64,' +
- Buffer.from(JSON.stringify(config)).toString('base64')
diff --git a/ui-admin/src/img/android-chrome-192x192.png b/ui-admin/src/resources/img/android-chrome-192x192.png
similarity index 100%
rename from ui-admin/src/img/android-chrome-192x192.png
rename to ui-admin/src/resources/img/android-chrome-192x192.png
diff --git a/ui-admin/src/img/android-chrome-512x512.png b/ui-admin/src/resources/img/android-chrome-512x512.png
similarity index 100%
rename from ui-admin/src/img/android-chrome-512x512.png
rename to ui-admin/src/resources/img/android-chrome-512x512.png
diff --git a/ui-admin/src/img/apple-touch-icon.png b/ui-admin/src/resources/img/apple-touch-icon.png
similarity index 100%
rename from ui-admin/src/img/apple-touch-icon.png
rename to ui-admin/src/resources/img/apple-touch-icon.png
diff --git a/ui-admin/src/img/favicon-16x16.png b/ui-admin/src/resources/img/favicon-16x16.png
similarity index 100%
rename from ui-admin/src/img/favicon-16x16.png
rename to ui-admin/src/resources/img/favicon-16x16.png
diff --git a/ui-admin/src/img/favicon-32x32.png b/ui-admin/src/resources/img/favicon-32x32.png
similarity index 100%
rename from ui-admin/src/img/favicon-32x32.png
rename to ui-admin/src/resources/img/favicon-32x32.png
diff --git a/ui-admin/src/img/favicon.ico b/ui-admin/src/resources/img/favicon.ico
similarity index 100%
rename from ui-admin/src/img/favicon.ico
rename to ui-admin/src/resources/img/favicon.ico
diff --git a/ui-admin/src/img/openbis-favicon-transparent.png b/ui-admin/src/resources/img/openbis-favicon-transparent.png
similarity index 100%
rename from ui-admin/src/img/openbis-favicon-transparent.png
rename to ui-admin/src/resources/img/openbis-favicon-transparent.png
diff --git a/ui-admin/src/img/openbis-logo-transparent.png b/ui-admin/src/resources/img/openbis-logo-transparent.png
similarity index 100%
rename from ui-admin/src/img/openbis-logo-transparent.png
rename to ui-admin/src/resources/img/openbis-logo-transparent.png
diff --git a/ui-admin/src/resources/manifest/site.webmanifest b/ui-admin/src/resources/manifest/site.webmanifest
new file mode 100644
index 00000000000..9641ebbd5ea
--- /dev/null
+++ b/ui-admin/src/resources/manifest/site.webmanifest
@@ -0,0 +1,19 @@
+{
+ "name": "openBIS Admin UI",
+ "short_name": "Admin UI",
+ "icons": [
+ {
+ "src": "img/android-chrome-192x192.png",
+ "sizes": "192x192",
+ "type": "image/png"
+ },
+ {
+ "src": "img/android-chrome-512x512.png",
+ "sizes": "512x512",
+ "type": "image/png"
+ }
+ ],
+ "theme_color": "#ffffff",
+ "background_color": "#ffffff",
+ "display": "standalone"
+}
diff --git a/ui-admin/webpack.config.dev.js b/ui-admin/webpack.config.dev.js
index 48b3422098f..ee809179fc3 100644
--- a/ui-admin/webpack.config.dev.js
+++ b/ui-admin/webpack.config.dev.js
@@ -1,6 +1,7 @@
/* eslint-disable */
const Webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
+const CopyWebpackPlugin = require('copy-webpack-plugin')
const path = require('path')
module.exports = {
@@ -25,9 +26,12 @@ module.exports = {
devMiddleware: {
publicPath: '/admin/'
},
- static: {
- directory: './src/js'
- }
+ static: [
+ {
+ directory: './src/resources',
+ publicPath: '/admin'
+ }
+ ]
},
devtool: 'source-map',
@@ -47,14 +51,8 @@ module.exports = {
},
{
test: /\.(png|svg|jpg|jpeg|gif|ico)$/i,
- resourceQuery: { not: [/url/] },
type: 'asset'
},
- {
- test: /\.(png|svg|jpg|jpeg|gif|ico)$/i,
- resourceQuery: /url/,
- type: 'asset/resource'
- },
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
diff --git a/ui-admin/webpack.config.js b/ui-admin/webpack.config.js
index 249ba677fcf..9dfc3316f8e 100644
--- a/ui-admin/webpack.config.js
+++ b/ui-admin/webpack.config.js
@@ -1,6 +1,7 @@
/* eslint-disable */
const Webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
+const CopyWebpackPlugin = require('copy-webpack-plugin')
const path = require('path')
module.exports = {
@@ -26,14 +27,8 @@ module.exports = {
},
{
test: /\.(png|svg|jpg|jpeg|gif|ico)$/i,
- resourceQuery: { not: [/url/] },
type: 'asset'
},
- {
- test: /\.(png|svg|jpg|jpeg|gif|ico)$/i,
- resourceQuery: /url/,
- type: 'asset/resource'
- },
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
@@ -67,6 +62,9 @@ module.exports = {
}),
new Webpack.ProvidePlugin({
process: 'process/browser'
+ }),
+ new CopyWebpackPlugin({
+ patterns: [{ from: 'src/resources' }]
})
]
}
--
GitLab