highperfocused/grimoire
1
0
Fork 0
mirror of https://github.com/purrgrammer/grimoire.git synced 2026-04-13 17:07:27 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: add PWA installability support

Browse Source 
Add comprehensive PWA configuration to make Grimoire installable as a standalone app:
- Install and configure vite-plugin-pwa for automated PWA setup
- Create grimoire-themed app icon (purple book with magical rune)
- Configure web app manifest with app metadata, theme colors, and shortcuts
- Add service worker with Workbox for offline capabilities and font caching
- Add PWA meta tags to index.html for iOS and Android compatibility
- Enable auto-update for service worker registration

The app is now installable on mobile devices and desktop browsers.
This commit is contained in:
Claude
2026-01-17 21:21:52 +00:00
parent c7cced2a9e
commit eab922030c
5 changed files with 4241 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
index.html
View File

@@ -2,14 +2,28 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<link rel="icon" type="image/svg+xml" href="/icon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- PWA Meta Tags -->
<meta name="theme-color" content="#1a1a1a" />
<meta
name="description"
content="A Nostr protocol explorer and developer tool with a tiling window manager interface"
/>
<link rel="apple-touch-icon" href="/icon.svg" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="apple-mobile-web-app-title" content="Grimoire" />
<!-- Font Preconnects -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Oxygen+Mono&display=swap"
rel="stylesheet"
/>
<title>grimoire - a nostr client for magicians</title>
</head>
<body>

4175
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

1
package.json
View File

@@ -112,6 +112,7 @@
"typescript": "~5.6.2",
"typescript-eslint": "^8.18.2",
"vite": "^6.0.5",
"vite-plugin-pwa": "^1.2.0",
"vitest": "^4.0.15"
}
}

27
public/icon.svg Normal file
View File

@@ -0,0 +1,27 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="none">
<!-- Background -->
<rect width="512" height="512" fill="#1a1a1a"/>
<!-- Book cover -->
<rect x="128" y="96" width="256" height="320" rx="8" fill="#8b5cf6"/>
<!-- Book spine highlight -->
<rect x="128" y="96" width="32" height="320" rx="8" fill="#a78bfa"/>
<!-- Book pages -->
<rect x="384" y="104" width="8" height="304" fill="#f3f4f6"/>
<rect x="380" y="108" width="8" height="296" fill="#e5e7eb"/>
<rect x="376" y="112" width="8" height="288" fill="#d1d5db"/>
<!-- Magical rune/symbol in center -->
<circle cx="256" cy="256" r="64" fill="none" stroke="#fbbf24" stroke-width="4"/>
<path d="M 256 192 L 256 320" stroke="#fbbf24" stroke-width="4" stroke-linecap="round"/>
<path d="M 192 256 L 320 256" stroke="#fbbf24" stroke-width="4" stroke-linecap="round"/>
<circle cx="256" cy="256" r="12" fill="#fbbf24"/>
<!-- Decorative corners -->
<path d="M 148 116 L 168 116 L 168 136" stroke="#fbbf24" stroke-width="2" fill="none"/>
<path d="M 364 116 L 344 116 L 344 136" stroke="#fbbf24" stroke-width="2" fill="none"/>
<path d="M 148 396 L 168 396 L 168 376" stroke="#fbbf24" stroke-width="2" fill="none"/>
<path d="M 364 396 L 344 396 L 344 376" stroke="#fbbf24" stroke-width="2" fill="none"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

88
vite.config.ts
View File

@@ -2,12 +2,98 @@ import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import path from "node:path";
import { fileURLToPath } from "node:url";
import { VitePWA } from "vite-plugin-pwa";
const __dirname = path.dirname(fileURLToPath(import.meta.url));
// https://vite.dev/config/
export default defineConfig({
plugins: [react()],
plugins: [
react(),
VitePWA({
registerType: "autoUpdate",
includeAssets: ["icon.svg"],
manifest: {
name: "Grimoire - Nostr Protocol Explorer",
short_name: "Grimoire",
description:
"A Nostr protocol explorer and developer tool with a tiling window manager interface",
theme_color: "#1a1a1a",
background_color: "#1a1a1a",
display: "standalone",
scope: "/",
start_url: "/",
orientation: "any",
icons: [
{
src: "icon.svg",
sizes: "any",
type: "image/svg+xml",
purpose: "any",
},
{
src: "icon.svg",
sizes: "512x512",
type: "image/svg+xml",
purpose: "maskable",
},
],
categories: ["productivity", "developer tools", "social"],
shortcuts: [
{
name: "Open Command Palette",
short_name: "Commands",
description: "Open the command palette to run Nostr commands",
url: "/?cmd=true",
icons: [
{
src: "icon.svg",
sizes: "any",
type: "image/svg+xml",
},
],
},
],
},
workbox: {
globPatterns: ["**/*.{js,css,html,svg,png,ico,woff,woff2}"],
runtimeCaching: [
{
urlPattern: /^https:\/\/fonts\.googleapis\.com\/.*/i,
handler: "CacheFirst",
options: {
cacheName: "google-fonts-cache",
expiration: {
maxEntries: 10,
maxAgeSeconds: 60 * 60 * 24 * 365, // 1 year
},
cacheableResponse: {
statuses: [0, 200],
},
},
},
{
urlPattern: /^https:\/\/fonts\.gstatic\.com\/.*/i,
handler: "CacheFirst",
options: {
cacheName: "gstatic-fonts-cache",
expiration: {
maxEntries: 10,
maxAgeSeconds: 60 * 60 * 24 * 365, // 1 year
},
cacheableResponse: {
statuses: [0, 200],
},
},
},
],
},
devOptions: {
enabled: true,
type: "module",
},
}),
],
resolve: {
alias: {
"@": path.resolve(__dirname, "./src"),