commit 0c15acee707fc373831f635e081d472737d271be
parent 36f24a1800b6000eaf6f1634c0e4048d604e718b
Author: weetat <wtenison@protonmail.com>
Date: Tue, 15 Apr 2025 21:28:55 +0000
Start PWA support
Add a web manifest, icons and service worker registration. Also add
home.fmd and a test subject page.
Diffstat:
18 files changed, 168 insertions(+), 1 deletion(-)
diff --git a/web/global/manifest.json b/web/global/manifest.json
@@ -0,0 +1,64 @@
+{
+ "name": "My Wiki",
+ "short_name": "Miki",
+ "description": "A personal wiki and note taking application.",
+ "start_url": "/home/index.html",
+
+ "display": "standalone",
+ "orientation": "any",
+ "form_factor": "wide",
+ "theme_color": "#ff7675",
+ "background_color": "#2d3436",
+ "icons": [
+ {
+ "src": "/web/icons/icon-48x48.png",
+ "sizes": "48x48",
+ "type": "image/png"
+ },
+ {
+ "src": "/web/icons/icon-72x72.png",
+ "sizes": "72x72",
+ "type": "image/png"
+ },
+ {
+ "src": "/web/icons/icon-96x96.png",
+ "sizes": "96x96",
+ "type": "image/png"
+ },
+ {
+ "src": "/web/icons/icon-128x128.png",
+ "sizes": "128x128",
+ "type": "image/png"
+ },
+ {
+ "src": "/web/icons/icon-144x144.png",
+ "sizes": "144x144",
+ "type": "image/png"
+ },
+ {
+ "src": "/web/icons/icon-152x152.png",
+ "sizes": "152x152",
+ "type": "image/png"
+ },
+ {
+ "src": "/web/icons/icon-192x192.png",
+ "sizes": "192x192",
+ "type": "image/png"
+ },
+ {
+ "src": "/web/icons/icon-256x256.png",
+ "sizes": "256x256",
+ "type": "image/png"
+ },
+ {
+ "src": "/web/icons/icon-384x384.png",
+ "sizes": "384x384",
+ "type": "image/png"
+ },
+ {
+ "src": "/web/icons/icon-512x512.png",
+ "sizes": "512x512",
+ "type": "image/png"
+ }
+ ]
+}
+\ No newline at end of file
diff --git a/web/global/meta.tmpl.html b/web/global/meta.tmpl.html
@@ -1,5 +1,6 @@
{{define "meta"}}
<meta name="viewport" charset="utf-8" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="/web/global/styles.css" />
+<link rel="manifest" href="/web/global/manifest.json" />
<script src="/web/global/script.js" defer></script>
{{end}}
\ No newline at end of file
diff --git a/web/global/script.js b/web/global/script.js
@@ -1,5 +1,19 @@
// GLOBAL SETTINGS
+if ('serviceWorker' in navigator) {
+
+ navigator.serviceWorker.register('/sw.js')
+ .then(registration => {
+ console.log('> Service Worker registered with scope:', registration.scope);
+ })
+ .catch(error => {
+ console.error('> Service Worker registration failed:', error);
+ })
+
+} else {
+ console.error('> Service Worker is not supported by this browser.');
+}
+
window.onload = () => {
if (sessionStorage.getItem("theme") != null) {
document.body.style.colorScheme = sessionStorage.getItem("theme")
diff --git a/web/global/styles.css b/web/global/styles.css
@@ -88,6 +88,7 @@
body {
position: relative;
+ height: 100%;
margin: var(--fmd_margin);
color-scheme: light;
@@ -381,6 +382,50 @@
display: grid;
}
+ #subcard {
+ width: min(75vw);
+
+ display: grid;
+ justify-self: center;
+
+ background-color: var(--fmd_color__bg-l);
+
+ @media screen and (min-width: 900px) {
+ width: calc(var(--fmd_gold) * 12rem);
+ margin-right: var(--fmd_margin--double);
+ margin-bottom: var(--fmd_margin--double);
+ float: left;
+ }
+
+ >.collapsible_ {
+
+ >._button {
+ border-radius: 1rem;
+
+ transition: .33s;
+
+ &::before {
+ content: "open\a0";
+ }
+
+ &.active {
+ background-color: var(--color__theme);
+
+ &::before {
+ content: "close\a0";
+ }
+ }
+ }
+
+ >._content {
+ padding: 0;
+ width: 100%;
+
+ transition: .5s;
+ }
+ }
+ }
+
@scope(#fmd-view) {
& {
height: max(50vh);
diff --git a/web/global/wasm_exec.js b/web/global/wasm_exec.js
@@ -568,5 +568,5 @@ function loadFMDFileHTML(url, container) {
container.innerHTML = "FMD Parsing Failed"
}
})
- .catch(err => console.error('_ERROR:fetch:failed to load FMD url:', err));
+ .catch(err => console.error('> ERROR:fetch:failed to load FMD url:', err));
}
diff --git a/web/home/home.fmd b/web/home/home.fmd
@@ -0,0 +1,7 @@
+h1:{Welcome}
+_(id:"subcard"):{This is a subcard
+} Miki is a personal documentation application in development with the intent of providing a standard interface for creating, organizing, and viewing wiki like articles generated by the user. The repo for this project exists a(link:"https://codeberg.org/wtenison/miki"):here (i:{Codeberg.org}).
+
+The project is a work in progress; polish and precision takes care and time. The current point of order is completing an functional editor interface for the markdown language (my own FMD). The current version of the editor can be viewed a(link:"https://miki.wtenison.com/edit"):here.
+
+i:{Example article:} a(link:"https://miki.wtenison.com/subject?s=test"):{Test page}
+\ No newline at end of file
diff --git a/web/icons/icon-128x128.png b/web/icons/icon-128x128.png
Binary files differ.
diff --git a/web/icons/icon-144x144.png b/web/icons/icon-144x144.png
Binary files differ.
diff --git a/web/icons/icon-152x152.png b/web/icons/icon-152x152.png
Binary files differ.
diff --git a/web/icons/icon-192x192.png b/web/icons/icon-192x192.png
Binary files differ.
diff --git a/web/icons/icon-256x256.png b/web/icons/icon-256x256.png
Binary files differ.
diff --git a/web/icons/icon-384x384.png b/web/icons/icon-384x384.png
Binary files differ.
diff --git a/web/icons/icon-48x48.png b/web/icons/icon-48x48.png
Binary files differ.
diff --git a/web/icons/icon-512x512.png b/web/icons/icon-512x512.png
Binary files differ.
diff --git a/web/icons/icon-72x72.png b/web/icons/icon-72x72.png
Binary files differ.
diff --git a/web/icons/icon-96x96.png b/web/icons/icon-96x96.png
Binary files differ.
diff --git a/web/subject/test.fmd b/web/subject/test.fmd
@@ -0,0 +1,11 @@
+h1:{Test page}
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris commodo orci a maximus aliquam. Maecenas non vestibulum massa, nec porttitor lectus. Ut lacinia felis condimentum maximus faucibus. In hac habitasse platea dictumst. Nam eget erat vitae diam sagittis maximus. Mauris vel augue at neque feugiat blandit. Fusce tristique magna varius malesuada maximus. Aliquam quis commodo est. In auctor iaculis eros, id sagittis nisi dapibus vitae. Vivamus felis tellus, dictum ut faucibus id, semper eget massa. Vivamus nibh odio, mollis eget risus vitae, consectetur tempus sapien.
+
+Aliquam tincidunt sapien id felis maximus, sed lacinia dui hendrerit. Donec pellentesque scelerisque velit, varius sodales nulla rhoncus ac. Quisque turpis lectus, ornare at maximus eu, mattis ut arcu. Ut interdum sit amet sapien vitae gravida. In nec ullamcorper sem, vel interdum lacus. Donec sit amet rhoncus sapien. In id consequat odio, in molestie mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In viverra tellus at tellus vestibulum, in tincidunt nulla condimentum. Sed ac metus ante. Duis in pulvinar augue, vel facilisis ex. Nunc a neque laoreet, pulvinar lacus non, ullamcorper tellus. Sed lacinia facilisis nulla quis ultricies. Vivamus ut dignissim eros. Integer tincidunt suscipit pretium.
+
+Nullam eget viverra metus, nec consequat turpis. Vestibulum rutrum nisi lectus, a egestas dolor commodo ac. In mauris nisi, porttitor eu pretium ullamcorper, hendrerit eget diam. Proin sollicitudin tempus malesuada. Nunc euismod nisl vitae felis fringilla tempus. Nam hendrerit hendrerit arcu id tempus. Quisque dignissim vel justo vitae facilisis. Cras fermentum consequat finibus. Praesent non nisi dui.
+
+Nulla sed purus tincidunt, varius tellus id, tincidunt enim. Nunc nec fermentum metus, at vehicula urna. Vestibulum cursus fringilla mattis. Sed ligula dolor, dictum non lorem in, dictum pretium sem. Pellentesque consectetur rutrum pretium. Proin euismod pretium quam at laoreet. Nam cursus ex nunc. Suspendisse quis arcu tristique, euismod quam vel, aliquam eros. Vivamus vitae libero sollicitudin, blandit ex sed, pulvinar nisl. Etiam in placerat sapien, eget blandit purus. Donec bibendum sem sit amet mi efficitur, non vestibulum leo consectetur. Aliquam erat volutpat. Curabitur leo sem, tristique vitae laoreet vel, fringilla ut enim.
+
+Phasellus non urna congue, posuere diam at, mollis massa. Quisque dictum eros id lacinia blandit. Maecenas sed rutrum turpis. In hac habitasse platea dictumst. Mauris vehicula, mauris ut tincidunt elementum, enim risus consectetur massa, non pellentesque orci est sed libero. Nunc in elementum metus. Curabitur in vulputate mauris, et imperdiet dolor. Vivamus sit amet felis pretium orci finibus ornare. Proin lectus urna, lobortis a sapien eget, tincidunt cursus diam.
+
diff --git a/web/sw.js b/web/sw.js
@@ -0,0 +1,22 @@
+self.addEventListener("install", (event) => {
+ event.waitUntil(
+ caches.open("v1")
+ .then((cache) => {
+ return cache.addAll([
+ "/",
+ "/home/",
+ "/home/index.html",
+ "/home/script.js",
+ "/global/",
+ "/global/styles.css",
+ "/global/script.js",
+ "/global/fmd.wasm",
+ "/global/wasm_exec.js",
+ ]).catch(err => console.error("Failed to cache files: ", err))
+ })
+ );
+});
+
+self.addEventListener("fetch", (event) => {
+ console.log("> Fetch: ", event.request.url);
+});
+\ No newline at end of file
