feat(riot-v5): create the base of the new UI

This commit is contained in:
Joxit 2021-03-02 01:15:20 +01:00
parent cde932ec17
commit 11692c136e
No known key found for this signature in database
GPG Key ID: F526592B8E012263
5 changed files with 37 additions and 2 deletions

View File

@ -24,6 +24,7 @@
"@rollup/plugin-babel": "^5.2.2",
"@rollup/plugin-commonjs": "^17.0.0",
"@rollup/plugin-html": "^0.2.3",
"@rollup/plugin-json": "^4.1.0",
"@rollup/plugin-node-resolve": "^11.0.0",
"js-beautify": "^1.13.0",
"riot": "^5.3.1",

View File

@ -8,12 +8,14 @@ import scss from 'rollup-plugin-scss';
import serve from 'rollup-plugin-serve';
import html from '@rollup/plugin-html';
import htmlUseref from './rollup/html-useref';
import json from '@rollup/plugin-json';
const useServe = process.env.ROLLUP_SERVE === 'true';
const output = useServe ? '.serve' : 'dist';
const plugins = [
riot(),
json(),
nodeResolve(),
commonjs(),
scss({ output: `./${output}/docker-registry-ui.css`, outputStyle: 'compressed' }),

View File

@ -16,13 +16,39 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
-->
<docker-registry-ui>
<header>
<material-navbar>
<div class="logo">Docker Registry UI</div>
</material-navbar>
</header>
<main>
</main>
<footer>
<material-footer>
<a slot="logo" href="https://joxit.github.io/docker-registry-ui/">Docker Registry UI { version }</a>
<ul slot="link-list">
<li>
<a href="https://github.com/Joxit/docker-registry-ui">Contribute on GitHub</a>
</li>
<li>
<a href="https://github.com/Joxit/docker-registry-ui/blob/main/LICENSE">Privacy &amp; Terms</a>
</li>
</ul>
</material-footer>
</footer>
<script>
import {
version
} from '../../package.json';
import MaterialNavbar from 'riot-mui/src/material-elements/material-navbar/material-navbar.riot';
import MaterialFooter from 'riot-mui/src/material-elements/material-footer/material-footer.riot';
export default {
components: {
MaterialNavbar,
MaterialFooter
},
onMounted() {},
version
}
</script>
</docker-registry-ui>

View File

@ -34,7 +34,7 @@
</head>
<body>
<app></app>
<docker-registry-ui></docker-registry-ui>
<!-- build:js docker-registry-ui.js -->
<script src="../node_modules/riot/riot+compiler.min.js"></script>
<script src="../node_modules/riot-route/dist/route.js"></script>

View File

@ -6,5 +6,11 @@ import './style.css';
import './roboto.css';
import './material-icons.css';
import 'riot-mui/src/material-elements/material-navbar/material-navbar.scss';
import 'riot-mui/src/material-elements/material-footer/material-footer.scss';
component(DockerRegistryUI)(document.getElementsByTagName('body').item(0))
const createApp = component(DockerRegistryUI);
const tags = document.getElementsByTagName('docker-registry-ui');
for (let i = 0; i < tags.length; i++) {
createApp(tags.item(i));
}