diff --git a/packages/auth/package.json b/packages/auth/package.json index 7900f09c3fbe1732ca4737c3800c6588925b8a6d..d128185ad5f7397765d281b30c61c074873b59df 100644 --- a/packages/auth/package.json +++ b/packages/auth/package.json @@ -16,14 +16,19 @@ "rollup-plugin-commonjs": "^10.0.2", "rollup-plugin-consts": "^1.0.1", "rollup-plugin-copy": "^3.1.0", + "rollup-plugin-delete": "^1.1.0", "rollup-plugin-json": "^4.0.0", "rollup-plugin-multi-entry": "^2.1.0", "rollup-plugin-node-resolve": "^5.2.0", + "rollup-plugin-postcss": "^2.0.3", + "rollup-plugin-replace": "^2.2.0", "rollup-plugin-serve": "^1.0.1", "rollup-plugin-terser": "^5.1.1", + "rollup-plugin-url": "^2.2.2", "vpu-common": "file:./vendor/common" }, "dependencies": { + "bulma": "^0.7.5", "lit-element": "^2.1.0" }, "scripts": { diff --git a/packages/auth/rollup.config.js b/packages/auth/rollup.config.js index 1d8e804a599df0edb6c29b82b0da974aab1795dc..197f95e4ce2e81efb1e872a66b206875901cdef6 100644 --- a/packages/auth/rollup.config.js +++ b/packages/auth/rollup.config.js @@ -6,7 +6,9 @@ import {terser} from "rollup-plugin-terser"; import json from 'rollup-plugin-json'; import serve from 'rollup-plugin-serve'; import multiEntry from 'rollup-plugin-multi-entry'; +import url from "rollup-plugin-url"; import consts from 'rollup-plugin-consts'; +import del from 'rollup-plugin-delete'; const build = (typeof process.env.BUILD !== 'undefined') ? process.env.BUILD : 'local'; console.log("build: " + build); @@ -18,6 +20,9 @@ export default { format: 'esm' }, plugins: [ + del({ + targets: 'dist/*' + }), multiEntry(), consts({ environment: build, @@ -32,6 +37,15 @@ export default { include: 'node_modules/**' }), json(), + url({ + limit: 0, + include: [ + "node_modules/bulma/**/*.css", + "node_modules/bulma/**/*.sass", + ], + emitFiles: true, + fileName: 'shared/[name].[hash][extname]' + }), (build !== 'local' && build !== 'test') ? terser() : false, copy({ targets: [ diff --git a/packages/auth/src/utils.js b/packages/auth/src/utils.js new file mode 100644 index 0000000000000000000000000000000000000000..2b6ad588dd7349984f205798233d56f78dc8e0a7 --- /dev/null +++ b/packages/auth/src/utils.js @@ -0,0 +1,9 @@ +export const getAssetURL = (path) => { + const elm = document.getElementById('vpu-library-app-src'); + if (!elm) + return path; + const url = elm.src; + // newer browsers only + //var url = import.meta.url; + return new URL(path, url).href; +}; diff --git a/packages/auth/src/vpu-auth-demo.js b/packages/auth/src/vpu-auth-demo.js index 00b9a8de162b44a2514dcbaa87c7f2f483438d95..7558824b7f768cfa3db72ec5581fc1ecec448262 100644 --- a/packages/auth/src/vpu-auth-demo.js +++ b/packages/auth/src/vpu-auth-demo.js @@ -2,6 +2,8 @@ import {i18n} from './i18n.js'; import {html, LitElement} from 'lit-element'; import './vpu-auth'; import * as commonUtils from 'vpu-common/utils'; +import bulmaCSSPath from "bulma/css/bulma.min.css"; +import * as utils from "./utils"; class AuthDemo extends LitElement { constructor() { @@ -26,10 +28,9 @@ class AuthDemo extends LitElement { } render() { + const bulmaCSS = utils.getAssetURL(bulmaCSSPath); return html` - <style> - </style> - <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css"> + <link rel="stylesheet" href="${bulmaCSS}"> <section class="section"> <div class="container"> diff --git a/packages/auth/src/vpu-auth.js b/packages/auth/src/vpu-auth.js index 3c284509d632da428f950df9fe9590dd53989a91..8366fd751c65f35f5d8e48e317c0384b3e4b2a66 100644 --- a/packages/auth/src/vpu-auth.js +++ b/packages/auth/src/vpu-auth.js @@ -3,6 +3,8 @@ import {html, css, LitElement} from 'lit-element'; import JSONLD from 'vpu-common/jsonld' import * as commonUtils from 'vpu-common/utils'; import 'vpu-common/vpu-icon.js'; +import bulmaCSSPath from "bulma/css/bulma.min.css"; +import * as utils from "./utils"; /** * Keycloak auth web component @@ -282,8 +284,9 @@ class VPUAuth extends LitElement { } render() { + const bulmaCSS = utils.getAssetURL(bulmaCSSPath); return html` - <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css"> + <link rel="stylesheet" href="${bulmaCSS}"> <div> ${this.loggedIn ? this.renderLoggedIn() : this.renderLoggedOut()}