update noogle ui to work as PWA

2025-10-03 20:52:54 +02:00 · 2024-10-28 09:17:31 +01:00
parent d02162b423
commit 49e5a329d8
10 changed files with 61 additions and 26 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -192,3 +192,4 @@ tests/pagerank/index_map_99bb5591c9116600f845107d31f9b59e2f7c7e09a1ff802e84f1d43
 tests/pagerank/network_graph_99bb5591c9116600f845107d31f9b59e2f7c7e09a1ff802e84f1d43da557ca64.json
 tests/test_data/wallet_mint_api/wallet.sqlite3
 .env_bkp2
+/ui/noogle/dev-dist
--- a/ui/noogle/index.html
+++ b/ui/noogle/index.html
@@ -5,6 +5,7 @@
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nostr decentralized search and other stuff</title>
+    <meta name="theme-color" content="#ffffff">
  </head>
  <body>
    <div id="app"></div>
--- a/ui/noogle/package.json
+++ b/ui/noogle/package.json
@@ -5,7 +5,7 @@
  "type": "module",
  "scripts": {
    "dev": "vite",
-    "build": "vue-tsc --build --force && vite build",
+    "build": "vite build",
    "preview": "vite preview",
    "build-only": "vite build",
    "type-check": "vue-tsc --build --force"
@@ -38,8 +38,10 @@
    "tailwindcss": "^3.4.1",
    "typescript": "~5.3.0",
    "vite": "^5.0.10",
+    "vite-plugin-pwa": "^0.20.5",
    "vue-router": "^4.2.5",
-    "vue-tsc": "^2.0.29"
+    "vue-tsc": "^2.0.29",
+    "workbox-window": "^7.1.0"
  },
  "optionalDependencies": {
    "@rollup/rollup-linux-x64-gnu": "4.6.1"
--- a/ui/noogle/public/pwa-192x192.png
+++ b/ui/noogle/public/pwa-192x192.png
--- a/ui/noogle/public/pwa-512x512.png
+++ b/ui/noogle/public/pwa-512x512.png
--- a/ui/noogle/src/components/Login.vue
+++ b/ui/noogle/src/components/Login.vue
@@ -147,23 +147,23 @@
 <!--         <template v-if="supports_android_signer">-->
 <!--          <button className="btn" @click="sign_in_amber()">Amber Sign in</button>-->
 <!--        </template>-->
-<!--           <button className="btn" onclick="nsecmodal.showModal()">NSec/NCryptSec</button>-->
-<!--      <dialog id="nsecmodal" class="modal">-->
-<!--      <div class="modal-box">-->
-<!--        <h3 class="font-bold text-lg">Login with key</h3>-->
-<!--        <p class="py-4">Login with nsec or ncryptsec. Your keys will be stored in your Browser. This is the least recommended sign-in method</p>-->
-<!--        <input class="u-Input" style="margin-left: 10px" type="search" name="user" autofocus  placeholder="nsec.../ncryptsec..." v-model="this.ncryptsec">-->
-<!--        <input v-if="ncryptsec.startsWith('ncryptsec')" class="u-Input" style="margin-left: 10px" type="password" name="user" autofocus  placeholder="password..." v-model="this.pw">-->
+           <button className="btn" onclick="nsecmodal.showModal()">NSec/NCryptSec</button>
+      <dialog id="nsecmodal" class="modal">
+      <div class="modal-box">
+        <h3 class="font-bold text-lg">Login with key</h3>
+        <p class="py-4">Login with nsec or ncryptsec. Your keys will be stored in your Browser. This is the least recommended sign-in method</p>
+        <input class="u-Input" style="margin-left: 10px" type="search" name="user" autofocus  placeholder="nsec.../ncryptsec..." v-model="this.ncryptsec">
+        <input v-if="ncryptsec.startsWith('ncryptsec')" class="u-Input" style="margin-left: 10px" type="password" name="user" autofocus  placeholder="password..." v-model="this.pw">

-<!--        <div class="modal-action">-->
-<!--          <form method="dialog">-->
-<!--            <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>-->
-<!--            &lt;!&ndash; if there is a button in form, it will close the modal &ndash;&gt;-->
-<!--            <button class="btn" @click="sign_in_key()">Login</button>-->
-<!--          </form>-->
-<!--        </div>-->
-<!--      </div>-->
-<!--</dialog>-->
+        <div class="modal-action">
+          <form method="dialog">
+            <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
+            <!-- if there is a button in form, it will close the modal -->
+            <button class="btn" @click="sign_in_key()">Login</button>
+          </form>
+        </div>
+      </div>
+</dialog>
        </div>
      </div>
    </div>
--- a/ui/noogle/src/components/Nip89view.vue
+++ b/ui/noogle/src/components/Nip89view.vue
@@ -13,7 +13,7 @@
 <br><br>

          <div class="card card-compact rounded-box bg-black/30">
-            <div class="card-body !text-base">
+            <div class="card-body">
                <div class="card-title text-base-100-content font-bold">
                  What is this?
                </div>
@@ -46,7 +46,7 @@

 <br><br>

-<div class="grid gap-6 ">
+<div class="grid gap-5">
    <div className="card  bg-base-200 shadow-xl"  style="height: 300px"   v-for="dvm in store.state.nip89dvms"
        :key="dvm.id">
     <!--   -->
@@ -85,7 +85,7 @@


  <figure style="max-width: 20%; flex:  fit-content; background-size: cover;" >
-    <img v-if="dvm.image"  style=" width: 100%; object-fit: cover;" :src="dvm.image"  :alt="dvm.name" onerror="this.src='https://noogle.lol/favicon.ico'"/>
+    <img v-if="dvm.image"  style=" width: 90%; object-fit: cover;" :src="dvm.image"  :alt="dvm.name" onerror="this.src='https://noogle.lol/favicon.ico'"/>
  </figure>
  <div class="card-body">
      <div style="margin-left: auto; margin-right: 10px;">
@@ -98,9 +98,9 @@
  <path d="M5.52.359A.5.5 0 0 1 6 0h4a.5.5 0 0 1 .474.658L8.694 6H12.5a.5.5 0 0 1 .395.807l-7 9a.5.5 0 0 1-.873-.454L6.823 9.5H3.5a.5.5 0 0 1-.48-.641zM6.374 1 4.168 8.5H7.5a.5.5 0 0 1 .478.647L6.78 13.04 11.478 7H8a.5.5 0 0 1-.474-.658L9.306 1z"/></svg> {{dvm.amount/1000}}</div></p>
  </div>
    <h2 class="card-title">{{ dvm.name }}</h2>
-    <h3 class="fa-cut text-gray" >Kind: {{ dvm.kind }}</h3>
+    <h3 class="text-gray" >Kind: {{ dvm.kind }}</h3>

-          <h3  v-if="dvm.about !== null" class="fa-cut" v-html="dvm.about"></h3>
+          <h4  v-if="dvm.about !== null" class="fa-cut" style="max-width: 200px" v-html="dvm.about"></h4>
    <div class="card-actions justify-end">
     <button className="btn" @click="copyDoiToClipboard(dvm.event);">Copy Event Json</button>
    </div>
--- a/ui/noogle/src/layouts/ThreeColumnLayout.vue
+++ b/ui/noogle/src/layouts/ThreeColumnLayout.vue
@@ -81,7 +81,7 @@ import {isVisible} from "bootstrap/js/src/util/index.js";

    position: fixed;
    bottom:0;
-    background: rgba(0, 0, 0, 0.5);;
+    background: rgba(0, 0, 0, 0);;
    grid-area: footer;
    width: 100vw;
    height: 32px;
--- a/ui/noogle/src/main.js
+++ b/ui/noogle/src/main.js
@@ -22,6 +22,9 @@ import '@vuepic/vue-datepicker/dist/main.css'
 //This is all for notifications
 import VueNotifications from "vue-notifications";
 import miniToastr from 'mini-toastr'
+import { registerSW } from 'virtual:pwa-register'
+
+registerSW({ immediate: true })

 miniToastr.init()

--- a/ui/noogle/vite.config.ts
+++ b/ui/noogle/vite.config.ts
@@ -1,11 +1,39 @@
 import { fileURLToPath, URL } from 'node:url'
-
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import { VitePWA } from 'vite-plugin-pwa'
 // https://vitejs.dev/config/
 export default defineConfig({
  plugins: [
-    vue()
+    vue(),
+    VitePWA({
+
+      registerType: 'autoUpdate',
+        manifest: {
+        name: 'Noogle',
+        short_name: 'Noogle',
+        description: 'Other Stuff on Nostr',
+        theme_color: '#ffffff',
+          icons: [
+          {
+            src: 'pwa-192x192.png',
+            sizes: '192x192',
+            type: 'image/png'
+          },
+          {
+            src: 'pwa-512x512.png',
+            sizes: '512x512',
+            type: 'image/png'
+          }
+        ]
+      },
+      devOptions: {
+        enabled: true,
+      },
+      workbox: {
+        maximumFileSizeToCacheInBytes: 8000000,
+      },
+    })
  ],
  resolve: {
    alias: {