Week 01 of 2024

Development log of Tad Notes

2 items

Create an icon, write the web manifest for PWA

On Monday, 2024-12-30 by Tad Lispy

index a4427a1..88c082c 100644
--- a/src/html_export.rs
+++ b/src/html_export.rs
@@ -259,7 +259,16 @@ impl HtmlExport for Notes {
=        std::fs::write(export_path, html).expect("Writing to a file should work");
=
=        log::info!("Copy assets from {}", assets_path().display());
-        for asset in vec!["styles"] {
+        for asset in vec![
+            "styles",
+            "apple-touch-icon.png",
+            "favicon.ico",
+            "favicon.svg",
+            "favicon-96x96.png",
+            "site.webmanifest",
+            "web-app-manifest-192x192.png",
+            "web-app-manifest-512x512.png",
+        ] {
=            let from = assets_path().join(asset);
=
=            // TODO: Make the copy process cross-platform.

new file mode 100644
index 0000000..40de13b
Binary files /dev/null and b/templates/apple-touch-icon.png differ

index a8e5090..1bbd585 100644
--- a/templates/categories-index.html
+++ b/templates/categories-index.html
@@ -10,8 +10,12 @@
=
=        <link rel="stylesheet" href="styles/style.css" type="text/css" media="screen" />
=
-        <link rel="apple-touch-icon" href="/apple-touch-icon.png">
-        <!-- Place favicon.ico in the root directory -->
+        <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
+        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+        <link rel="shortcut icon" href="/favicon.ico" />
+        <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+        <meta name="apple-mobile-web-app-title" content="Tad Notes" />
+        <link rel="manifest" href="/site.webmanifest" />
=
=    </head>
=    <body>

new file mode 100644
index 0000000..65d4ca2
Binary files /dev/null and b/templates/favicon-96x96.png differ

new file mode 100644
index 0000000..6d76f06
Binary files /dev/null and b/templates/favicon.ico differ

new file mode 100644
index 0000000..893cff2
--- /dev/null
+++ b/templates/favicon.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" width="128" height="128"><svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 128 128"><path d="M116.52 45.71H13.11l5.73-18.24h90.05z" style="fill:#37474f"></path><path d="M122.87 55.32 112.08 29a4.16 4.16 0 0 0-3.92-2.77h-88.3c-1.76 0-3.33 1.11-3.92 2.77L5.13 55.32a1.87 1.87 0 0 0 1.77 2.47h114.2a1.87 1.87 0 0 0 1.77-2.47m-7.39-1.51H12.52c-1.31 0-2.23-1.29-1.81-2.53l8.54-19.71a2.945 2.945 0 0 1 2.77-1.95H106c1.24 0 2.35.78 2.77 1.95l8.54 19.71a1.93 1.93 0 0 1-1.83 2.53" style="fill:#82aec0"></path><path d="M5 56.11v65.42C5 122.9 6.1 124 7.46 124h113.07c1.36 0 2.47-1.1 2.47-2.47V55.9z" style="fill:#37474f"></path><path d="M106.73 56.1V24.21c0-.92-.75-1.67-1.67-1.67v-6.33a2.57 2.57 0 0 0-2.57-2.57H85.15a2.57 2.57 0 0 0-2.57 2.57v1.76c0 2.52-2.05 4.57-4.57 4.57H23.72c-1.35 0-2.45 1.1-2.45 2.45v31.1h85.46z" style="fill:#f3ab47"></path><path d="M105.07 22.55v-6.33a2.57 2.57 0 0 0-2.57-2.57H85.15a2.57 2.57 0 0 0-2.57 2.57v1.76c0 1.85-1.27 3.93-4.02 4.57z" style="fill:#7cb342"></path><path d="M21.27 27.47h85.47v5.21H21.27z" style="opacity:.75;fill:#de7340"></path><path d="M112.36 55.95V32.86a2.78 2.78 0 0 0-2.78-2.78H81.89a5.17 5.17 0 0 1-5.17-5.17v-1.99c0-1.61-1.3-2.91-2.91-2.91H54.19c-1.61 0-2.91 1.3-2.91 2.91v1.99a5.17 5.17 0 0 1-5.17 5.17H18.42a2.78 2.78 0 0 0-2.78 2.78v23.09z" style="fill:#ffca28"></path><path d="M76.72 24.91v-1.99c0-1.61-1.3-2.91-2.91-2.91H54.19c-1.61 0-2.91 1.3-2.91 2.91v1.99a5.17 5.17 0 0 1-5.17 5.17H81.9c-2.86 0-5.18-2.32-5.18-5.17" style="fill:#0288d1"></path><path d="M12.68 38.09h99.68v5.21H12.68z" style="fill:#f3ab47"></path><path d="M117.4 55.95V43.8a3.07 3.07 0 0 0-3.07-3.07H46.49c-3.15 0-5.71-2.56-5.71-5.71v-2.2c0-1.77-1.44-3.21-3.21-3.21H15.9c-1.77 0-3.21 1.44-3.21 3.21v7.91c-1.15 0-2.08.93-2.08 2.08v13.13H117.4z" style="fill:#ffe36c"></path><path d="M40.78 35.02v-2.2c0-1.77-1.44-3.21-3.21-3.21H15.9c-1.77 0-3.21 1.44-3.21 3.21v7.91H46.5a5.71 5.71 0 0 1-5.72-5.71" style="fill:#f44336"></path><path d="M117.4 51.27c.25 2.29-.61 2.53-1.92 2.53H12.52c-1.31 0-2.21.1-1.92-2.31l-3.95.13-1.52 3.7a1.87 1.87 0 0 0 1.77 2.47h114.2a1.87 1.87 0 0 0 1.77-2.47l-1.75-4.29z" style="fill:#82aec0"></path><path d="M46.49 82.74h33.38v17.4H46.49z" style="fill:#fafafa"></path><path d="M77.01 86.38s-1.35 2.71-1.38 6.27c-.03 4.07 1.6 7.65 1.6 7.65l-28.13-.31s1.77-2.74 1.87-6.65c.1-3.7-1.43-6.96-1.43-6.96zm1.74-4H47.97c-1.75 0-3.17 1.42-3.17 3.17v15.58c0 1.75 1.42 3.17 3.17 3.17h30.78c1.75 0 3.17-1.42 3.17-3.17V85.55a3.177 3.177 0 0 0-3.17-3.17" style="fill:#263238"></path><path d="M77.91 84.55s-1.86 2.91-1.86 6.47 1.86 7.44 1.86 7.44H48.8s1.79-3.61 1.79-6.96-1.79-6.96-1.79-6.96h29.11zm.84-4H47.97c-1.75 0-3.17 1.42-3.17 3.17V99.3c0 1.75 1.42 3.17 3.17 3.17h30.78c1.75 0 3.17-1.42 3.17-3.17V83.72a3.177 3.177 0 0 0-3.17-3.17" style="fill:#9e9e9e"></path><path d="M47.97 81.93h12.18" style="fill:none;stroke:#c9e3e6;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10"></path></svg><style>@media (prefers-color-scheme: light) { :root { filter: none; } }
+@media (prefers-color-scheme: dark) { :root { filter: none; } }
+</style></svg>
\ No newline at end of file

index 0a69f7b..58d13c2 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -9,8 +9,12 @@
=
=        <link rel="stylesheet" href="styles/style.css" type="text/css" media="screen" />
=
-        <link rel="apple-touch-icon" href="/apple-touch-icon.png">
-        <!-- Place favicon.ico in the root directory -->
+        <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
+        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+        <link rel="shortcut icon" href="/favicon.ico" />
+        <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+        <meta name="apple-mobile-web-app-title" content="Tad Notes" />
+        <link rel="manifest" href="/site.webmanifest" />
=
=    </head>
=    <body>

index df27584..eb8ebd5 100644
--- a/templates/note.html
+++ b/templates/note.html
@@ -9,8 +9,12 @@
=
=        <link rel="stylesheet" href="styles/style.css" type="text/css" media="screen" />
=
-        <link rel="apple-touch-icon" href="/apple-touch-icon.png">
-        <!-- Place favicon.ico in the root directory -->
+        <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
+        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+        <link rel="shortcut icon" href="/favicon.ico" />
+        <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+        <meta name="apple-mobile-web-app-title" content="Tad Notes" />
+        <link rel="manifest" href="/site.webmanifest" />
=
=    </head>
=    <body>

new file mode 100644
index 0000000..8356b45
--- /dev/null
+++ b/templates/site.webmanifest
@@ -0,0 +1,21 @@
+{
+  "name": "Tad Notes",
+  "short_name": "Notes",
+  "icons": [
+    {
+      "src": "/web-app-manifest-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "/web-app-manifest-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ],
+  "theme_color": "#bbc6ce",
+  "background_color": "#11191f",
+  "display": "standalone"
+}
\ No newline at end of file

new file mode 100644
index 0000000..0e0c935
Binary files /dev/null and b/templates/web-app-manifest-192x192.png differ

new file mode 100644
index 0000000..b0c0090
Binary files /dev/null and b/templates/web-app-manifest-512x512.png differ

Fix: make sure that all assets are in ${out}/lib

On Monday, 2024-12-30 by Tad Lispy

Not only styles. This is required for HTML export to pick up site.manifest and icons.

index aebe857..d7cde14 100644
--- a/Makefile
+++ b/Makefile
@@ -20,7 +20,7 @@ install-assets: prefix ?= $(out)
=install-assets:
=	test $(prefix)
=	mkdir --parents $(prefix)/lib/
-	cp --recursive templates/styles $(prefix)/lib/
+	cp --recursive templates/* $(prefix)/lib/
=.PHONY: install-assets
=
=### DEVELOPMENT