caranmegil
/
mosaic
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update to include icons and play with UI

This commit is contained in:
William Moore 2023-06-06 10:05:40 -05:00
parent a7ebf0794d
commit a780b5c599
8 changed files with 4168 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -12,6 +12,7 @@ certs/
build/
public/js/
node-modules/
dist/
# Diagnostic reports (https://nodejs.org/api/report.html)
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json

12
gulpfile.js Normal file
View File

@ -0,0 +1,12 @@
const replace = require('gulp-replace');
const { src, dest } = require('gulp');
require('dotenv/config');
// or replace multiple strings
function replaceTemplate() {
return src(['./dist/**.html'])
.pipe(replace(/FONTAWESOME_SCRIPT_URL/g, process.env.FONTAWESOME_SCRIPT_URL))
.pipe(dest('./dist/'));
};
exports.default = replaceTemplate;

4124
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

8
package.json
View File

@ -4,13 +4,14 @@
"description": "",
"main": "index.js",
"scripts": {
"start": "npx tsc && npx rollup -c",
"clean": "rm -rf build",
"start": "npx tsc && cp -R public dist && npx gulp && npx rollup -c",
"clean": "rm -rf build && rm -rf dist",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"dotenv": "^16.1.4",
"lit": "^2.7.5",
"typescript": "^5.1.3"
},
@ -18,9 +19,12 @@
"@rollup/plugin-babel": "^6.0.3",
"@rollup/plugin-node-resolve": "^15.1.0",
"@rollup/plugin-terser": "^0.4.3",
"@types/node": "^20.2.5",
"@web/rollup-plugin-copy": "^0.4.0",
"@web/rollup-plugin-html": "^2.0.0",
"@web/rollup-plugin-polyfills-loader": "^2.0.0",
"gulp": "^4.0.2",
"gulp-replace": "^1.1.4",
"rollup": "^2.79.1",
"rollup-plugin-minify-html-literals": "^1.2.6",
"rollup-plugin-summary": "^2.0.0"

8
public/css/app.css
View File

@ -2,9 +2,13 @@ body {
background-color: #967BB6;
}
.edit-link {
.link-box {
position: absolute;
bottom: .5em;
top: 0;
right: .5em;
}
.edit-link {
color: black;
}

6
public/index.html
View File

@ -3,12 +3,16 @@
<head>
<link rel="stylesheet" href="./css/app.css">
<link rel="manifest" href="./manifest.json" />
<script src="FONTAWESOME_SCRIPT_URL" crossorigin="anonymous"></script>
<script type="module" src="./js/index.js"></script>
</head>
<body>
<lavender-widgets></lavender-widgets>
<a href="./edit.html" class="edit-link" target="_blank">Edit Widgets</a>
<div class="link-box">
<a href="./edit.html" class="edit-link" target="_blank"><i class="fa-solid fa-pen-to-square"></i> Edit Widgets</a>
<a href="https://rezrov.xyz/caranmegil/lavender" class="edit-link" target="_blank"><i class="fa-brands fa-square-git"></i> Source Code</a>
</div>
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register("./js/serviceworker.js", {scope: '.'});

6
rollup.config.mjs
View File

@ -2,8 +2,8 @@
import { rollupPluginHTML as html } from "@web/rollup-plugin-html";
import {copy} from '@web/rollup-plugin-copy';
import resolve from '@rollup/plugin-node-resolve';
import * as terser from '@rollup/plugin-terser';
import * as minifyHTML from 'rollup-plugin-minify-html-literals';
// import * as terser from '@rollup/plugin-terser';
// import * as minifyHTML from 'rollup-plugin-minify-html-literals';
import summary from 'rollup-plugin-summary';
export default {
@ -11,7 +11,7 @@ export default {
// Entry point for application build; can specify a glob to build multiple
// HTML files for non-SPA app
html({
input: 'public/**.html',
input: 'dist/**.html',
}),
// Resolve bare module specifiers to relative paths
resolve(),

15
src/index.ts
View File

@ -3,6 +3,16 @@ import { customElement } from 'lit/decorators.js';
@customElement('lavender-widgets')
export class LavenderWidgets extends LitElement {
widgets = []
constructor() {
super();
const widgetJSON = localStorage.getItem('lavender-widgets') ?? '[]';
this.widgets = JSON.parse(widgetJSON);
if (this.widgets.length == 0) {
window.location.href = './edit.html';
}
}
static override styles = [
css`
.centerit {
@ -53,13 +63,10 @@ export class LavenderWidgets extends LitElement {
];
override render() {
const widgetJSON = localStorage.getItem('lavender-widgets') ?? '[]';
const widgets = JSON.parse(widgetJSON);
return html`
<h1 class="centerit">Lavender</h1>
<div class="widgets">
${widgets.map((widget: any) => {
${this.widgets.map((widget: any) => {
return html`<iframe width="100%" framespacing="0" frameborder="no" src="${widget.url}" title="${widget.title}">${widget.title}</iframe>`;
})}
</div>