2 files changed, 143 insertions, 0 deletions
diff --git a/communities/red-right-hand/vitepress/.vitepress/theme/components/ReloadAuto.vue b/communities/red-right-hand/vitepress/.vitepress/theme/components/ReloadAuto.vue
new file mode 100644
index 0000000..5796198
--- /dev/null
+++ b/communities/red-right-hand/vitepress/.vitepress/theme/components/ReloadAuto.vue
@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { onBeforeMount, ref } from "vue";
+
+const offlineReady = ref(false);
+function onOfflineReady() {
+  offlineReady.value = true;
+}
+async function close() {
+  offlineReady.value = false;
+}
+
+onBeforeMount(async () => {
+  const { registerSW } = await import("virtual:pwa-register");
+  registerSW({
+    immediate: true,
+    onOfflineReady,
+    onRegistered() {
+      console.info("Service Worker registered");
+    },
+    onRegisterError(e) {
+      console.error("Service Worker registration error!", e);
+    },
+  });
+});
+</script>
+
+<template>
+  <template v-if="offlineReady">
+    <div class="pwa-toast" role="alertdialog" aria-labelledby="pwa-message">
+      <div id="pwa-message" class="mb-3">App ready to work offline</div>
+      <button type="button" class="pwa-cancel" @click="close">Close</button>
+    </div>
+  </template>
+</template>
+
+<style>
+.pwa-toast {
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  margin: 16px;
+  padding: 12px;
+  border: 1px solid #8885;
+  border-radius: 4px;
+  z-index: 100;
+  text-align: left;
+  box-shadow: 3px 4px 5px 0 #8885;
+  background-color: white;
+}
+.pwa-toast #pwa-message {
+  margin-bottom: 8px;
+}
+.pwa-toast button {
+  border: 1px solid #8885;
+  outline: none;
+  margin-right: 5px;
+  border-radius: 2px;
+  padding: 3px 10px;
+}
+</style>
diff --git a/communities/red-right-hand/vitepress/.vitepress/theme/components/ReloadPrompt.vue b/communities/red-right-hand/vitepress/.vitepress/theme/components/ReloadPrompt.vue
new file mode 100644
index 0000000..6e60fb3
--- /dev/null
+++ b/communities/red-right-hand/vitepress/.vitepress/theme/components/ReloadPrompt.vue
@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { onBeforeMount, ref } from "vue";
+
+const offlineReady = ref(false);
+const needRefresh = ref(false);
+
+let updateServiceWorker: (() => Promise<void>) | undefined;
+
+function onOfflineReady() {
+  offlineReady.value = true;
+}
+function onNeedRefresh() {
+  needRefresh.value = true;
+}
+async function close() {
+  offlineReady.value = false;
+  needRefresh.value = false;
+}
+
+onBeforeMount(async () => {
+  const { registerSW } = await import("virtual:pwa-register");
+  updateServiceWorker = registerSW({
+    immediate: true,
+    onOfflineReady,
+    onNeedRefresh,
+    onRegistered() {
+      console.info("Service Worker registered");
+    },
+    onRegisterError(e) {
+      console.error("Service Worker registration error!", e);
+    },
+  });
+});
+</script>
+
+<template>
+  <template v-if="offlineReady || needRefresh">
+    <div class="pwa-toast" role="alertdialog" aria-labelledby="pwa-message">
+      <div id="pwa-message" class="mb-3">
+        {{
+          offlineReady
+            ? "App ready to work offline"
+            : "New content available, click the reload button to update."
+        }}
+      </div>
+      <button
+        v-if="needRefresh"
+        type="button"
+        class="pwa-refresh"
+        @click="updateServiceWorker?.()"
+      >
+        Reload
+      </button>
+      <button type="button" class="pwa-cancel" @click="close">Close</button>
+    </div>
+  </template>
+</template>
+
+<style>
+.pwa-toast {
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  margin: 16px;
+  padding: 12px;
+  border: 1px solid #8885;
+  border-radius: 4px;
+  z-index: 100;
+  text-align: left;
+  box-shadow: 3px 4px 5px 0 #8885;
+  background-color: white;
+}
+.pwa-toast #pwa-message {
+  margin-bottom: 8px;
+}
+.pwa-toast button {
+  border: 1px solid #8885;
+  outline: none;
+  margin-right: 5px;
+  border-radius: 2px;
+  padding: 3px 10px;
+}
+</style>