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

Update to include icons and play with UI

Browse Source
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/ build/
public/js/ public/js/
node-modules/ node-modules/
dist/
# Diagnostic reports (https://nodejs.org/api/report.html) # Diagnostic reports (https://nodejs.org/api/report.html)
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 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": "", "description": "",
"main": "index.js", "main": "index.js",
"scripts": { "scripts": {
"start": "npx tsc && npx rollup -c", "start": "npx tsc && cp -R public dist && npx gulp && npx rollup -c",
"clean": "rm -rf build", "clean": "rm -rf build && rm -rf dist",
"test": "echo \"Error: no test specified\" && exit 1" "test": "echo \"Error: no test specified\" && exit 1"
}, },
"author": "", "author": "",
"license": "ISC", "license": "ISC",
"dependencies": { "dependencies": {
"dotenv": "^16.1.4",
"lit": "^2.7.5", "lit": "^2.7.5",
"typescript": "^5.1.3" "typescript": "^5.1.3"
}, },
@ -18,9 +19,12 @@
"@rollup/plugin-babel": "^6.0.3", "@rollup/plugin-babel": "^6.0.3",
"@rollup/plugin-node-resolve": "^15.1.0", "@rollup/plugin-node-resolve": "^15.1.0",
"@rollup/plugin-terser": "^0.4.3", "@rollup/plugin-terser": "^0.4.3",
"@types/node": "^20.2.5",
"@web/rollup-plugin-copy": "^0.4.0", "@web/rollup-plugin-copy": "^0.4.0",
"@web/rollup-plugin-html": "^2.0.0", "@web/rollup-plugin-html": "^2.0.0",
"@web/rollup-plugin-polyfills-loader": "^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": "^2.79.1",
"rollup-plugin-minify-html-literals": "^1.2.6", "rollup-plugin-minify-html-literals": "^1.2.6",
"rollup-plugin-summary": "^2.0.0" "rollup-plugin-summary": "^2.0.0"

8
public/css/app.css
View File

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

6
public/index.html
View File

@ -3,12 +3,16 @@
<head> <head>
<link rel="stylesheet" href="./css/app.css"> <link rel="stylesheet" href="./css/app.css">
<link rel="manifest" href="./manifest.json" /> <link rel="manifest" href="./manifest.json" />
<script src="FONTAWESOME_SCRIPT_URL" crossorigin="anonymous"></script>
<script type="module" src="./js/index.js"></script> <script type="module" src="./js/index.js"></script>
</head> </head>
<body> <body>
<lavender-widgets></lavender-widgets> <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> <script>
if ('serviceWorker' in navigator) { if ('serviceWorker' in navigator) {
navigator.serviceWorker.register("./js/serviceworker.js", {scope: '.'}); 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 { rollupPluginHTML as html } from "@web/rollup-plugin-html";
import {copy} from '@web/rollup-plugin-copy'; import {copy} from '@web/rollup-plugin-copy';
import resolve from '@rollup/plugin-node-resolve'; import resolve from '@rollup/plugin-node-resolve';
import * as terser from '@rollup/plugin-terser'; // import * as terser from '@rollup/plugin-terser';
import * as minifyHTML from 'rollup-plugin-minify-html-literals'; // import * as minifyHTML from 'rollup-plugin-minify-html-literals';
import summary from 'rollup-plugin-summary'; import summary from 'rollup-plugin-summary';
export default { export default {
@ -11,7 +11,7 @@ export default {
// Entry point for application build; can specify a glob to build multiple // Entry point for application build; can specify a glob to build multiple
// HTML files for non-SPA app // HTML files for non-SPA app
html({ html({
input: 'public/**.html', input: 'dist/**.html',
}), }),
// Resolve bare module specifiers to relative paths // Resolve bare module specifiers to relative paths
resolve(), resolve(),

15
src/index.ts
View File

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