webapp: Add NProgress

Author: dev

package-lock.json

@@ -4,7 +4,7 @@
     "version": "0.1.0",
     "private": true,
     "scripts": {
-        "templates": "handlebars src/templates/*.handlebars -f src/templates/precompiled.js -c handlebars/runtime -m && cat src/pages/*.tsx | shasum -a 256 | cut -d' ' -f1 > src/jsx_templates/templates_sha256.txt",
+        "templates": "handlebars src/templates_handlebars/*.handlebars -f src/templates_handlebars/precompiled.js -c handlebars/runtime -m && cat src/templates_tsx/*.tsx | shasum -a 256 | cut -d' ' -f1 > src/templates_tsx/templates_sha256.txt",
         "deploy": "wrangler deploy",
         "dev": "wrangler dev",
         "css": "tailwindcss -i src/index.css -o src/public/theme/index-`git rev-parse HEAD`.css --minify",

phoenix-blog/package.json

@@ -0,0 +1,28 @@
+import { sha256Sum } from "@phoenix/core/crypto";
+import { Context } from "./context";
+
+let etagsCache = new Map<string, string>();
+
+export async function getEtag(path: string, content: string): Promise<string> {
+  let etag = etagsCache.get(path);
+  if (!etag) {
+    etag = await sha256Sum(content);
+    etagsCache.set(path, etag);
+  }
+  return etag;
+}
+
+export function handleCaching(ctx: Context, cacheControl: string, etag: string): Response | null {
+  ctx.res.headers.set('Cache-Control', cacheControl);
+  ctx.res.headers.set('ETag', `"${etag}"`);
+
+  const ifNoneMatch = ctx.req.header('If-None-Match')?.trim().replace('W/', '').replaceAll('"', '');
+  if (ifNoneMatch && ifNoneMatch === etag) {
+    return new Response(null, {
+      status: 304,
+      headers: ctx.res.headers,
+    });
+  }
+
+  return null;
+}

phoenix-blog/src/cache.ts

@@ -1,6 +1,6 @@
 import { Hono } from 'hono';
 import { NotFoundError } from '@phoenix/core/errors';
-import { ErrorTemplate } from './jsx_templates/error';
+import { ErrorTemplate } from './templates_tsx/error';
 import { Bindings, Variables } from './context';
 import { robotsTxt } from './routes/robotstxt';
 import { favicon } from './routes/favicon';

phoenix-blog/src/caching.ts

@@ -1,10 +1,9 @@
-import { useEtagsCache } from "../cache";
 import { Context } from "../context";
-import { getEtag, handleCaching } from "../utils";
+import { getEtag, handleCaching } from "../caching";
 import faviconFileContent from '../public/favicon.ico';
 
 export async function favicon(ctx: Context): Promise<Response> {
-  let etag = await getEtag(useEtagsCache(), '/favicon.ico', '/favicon.ico');
+  let etag = await getEtag('/favicon.ico', '/favicon.ico');
   const cacheHit = handleCaching(ctx, 'public, max-age=3600, must-revalidate', etag);
   if (cacheHit) {
     return cacheHit;

phoenix-blog/src/index.ts

@@ -1,7 +1,6 @@
 import { sha256Sum } from "@phoenix/core/crypto";
 import { Context } from "../context";
-import { handleCaching } from "../utils";
-
+import { handleCaching } from "../caching";
 
 export async function handlebars(ctx: Context): Promise<Response> {
   const name = ctx.req.query('name') ?? 'Handlebars'

phoenix-blog/src/routes/favicon.ts

@@ -1,7 +1,8 @@
 import { sha256Sum } from "@phoenix/core/crypto";
 import { Context } from "../context";
-import { PostsTemplate } from "../jsx_templates/posts";
-import { getBlog, getPosts, handleCaching } from "../utils";
+import { PostsTemplate } from "../templates_tsx/posts";
+import { getBlog, getPosts } from "../utils";
+import { handleCaching } from "../caching";
 
 export async function index(ctx: Context): Promise<Response> {
   // const reqUrl = new URL(ctx.req.url);

phoenix-blog/src/routes/handlebars.ts

@@ -1,11 +1,9 @@
-import { useEtagsCache } from "../cache";
+import { getEtag, handleCaching } from "../caching";
 import { Context } from "../context";
-import { getEtag, handleCaching } from "../utils";
 import indexCssFielContent from '../public/theme/index-5eca4c37898bca4ff1a357cf7c481dfe0375b737.css';
 
-
 export async function indexCss(ctx: Context): Promise<Response> {
-  let etag = await getEtag(useEtagsCache(), '/theme/index-5eca4c37898bca4ff1a357cf7c481dfe0375b737.css', indexCssFielContent);
+  let etag = await getEtag('/theme/index-5eca4c37898bca4ff1a357cf7c481dfe0375b737.css', indexCssFielContent);
   const cacheHit = handleCaching(ctx, 'public, max-age=31536000, immutable', etag);
   if (cacheHit) {
     return cacheHit;

phoenix-blog/src/routes/index.ts

@@ -1,8 +1,9 @@
 import { sha256Sum } from "@phoenix/core/crypto";
 import { Context } from "../context";
-import { getBlog, getPage, handleCaching, maxTime } from "../utils";
-import templatesHash from '../jsx_templates/templates_sha256.txt';
-import { PageTemplate } from "../jsx_templates/page";
+import { getBlog, getPage, maxTime } from "../utils";
+import templatesHash from '../templates_tsx/templates_sha256.txt';
+import { PageTemplate } from "../templates_tsx/page";
+import { handleCaching } from "../caching";
 
 export async function page(ctx: Context): Promise<Response> {
   const reqUrl = new URL(ctx.req.url);

phoenix-blog/src/routes/indexcss.ts

@@ -1,10 +1,9 @@
-import { useEtagsCache } from "../cache";
+import { getEtag, handleCaching } from "../caching";
 import { Context } from "../context";
-import { getEtag, handleCaching } from "../utils";
 import robotsTxtFileContent from '../public/robots.txt';
 
 export async function robotsTxt(ctx: Context): Promise<Response> {
-  let etag = await getEtag(useEtagsCache(), '/robots.txt', robotsTxtFileContent);
+  let etag = await getEtag('/robots.txt', robotsTxtFileContent);
   const cacheHit = handleCaching(ctx, 'public, max-age=1800, must-revalidate', etag);
   if (cacheHit) {
     return cacheHit;

phoenix-blog/src/routes/page.ts

@@ -4,21 +4,6 @@ import { InternalServerError, NotFoundError } from "@phoenix/core/errors";
 import { sha256Sum } from "@phoenix/core/crypto";
 import { Context } from "./context";
 
-export function handleCaching(ctx: Context, cacheControl: string, etag: string): Response | null {
-  ctx.res.headers.set('Cache-Control', cacheControl);
-  ctx.res.headers.set('ETag', `"${etag}"`);
-
-  const ifNoneMatch = ctx.req.header('If-None-Match')?.trim().replace('W/', '').replaceAll('"', '');
-  if (ifNoneMatch && ifNoneMatch === etag) {
-    return new Response(null, {
-      status: 304,
-      headers: ctx.res.headers,
-    });
-  }
-
-  return null;
-}
-
 export async function getBlog(ctx: Context, domain: string): Promise<Blog> {
   // service bindings expects a request with a full URL, se we set an invalid host
   const apiReq = new Request(`https://localhost/headless/blog?domain=${domain}`, ctx.req.raw);
@@ -95,12 +80,3 @@ export function date(val: Date | undefined) {
   const date = new Date(val);
   return `${date.getFullYear()}-${date.getMonth()}-${date.getDay()}`;
 }
-
-export async function getEtag(cache: Map<string, string>, path: string, content: string): Promise<string> {
-  let etag = cache.get(path);
-  if (!etag) {
-    etag = await sha256Sum(content);
-    cache.set(path, etag);
-  }
-  return etag;
-}

phoenix-blog/src/routes/robotstxt.ts

@@ -21,6 +21,7 @@
     "@tiptap/pm": "^2.1.12",
     "@tiptap/starter-kit": "^2.1.12",
     "@tiptap/vue-3": "^2.1.12",
+    "nprogress": "^0.2.0",
     "pinia": "^2.1.7",
     "vue": "^3.3.4",
     "vue-router": "^4.2.5"
@@ -29,6 +30,7 @@
     "@tailwindcss/typography": "^0.5.10",
     "@tsconfig/node18": "^18.2.2",
     "@types/node": "^20.8.9",
+    "@types/nprogress": "^0.2.2",
     "@vitejs/plugin-vue": "^4.4.0",
     "@vue/tsconfig": "^0.4.0",
     "autoprefixer": "^10.4.16",

phoenix-blog/src/handlebars_templates/base.handlebars phoenix-blog/src/templates_handlebars/base.handlebars

@@ -14,10 +14,11 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, watch } from 'vue';
 import Navbar from './components/navbar.vue';
 import Sidebar from './components/sidebar.vue';
 import { useStore } from './app/store';
+import NProgress from 'nprogress';
 
 // props
 
@@ -33,6 +34,13 @@ const $store = useStore();
 // computed
 
 // watch
+watch(() => $store.loading, (newValue, oldValue) => {
+  if (!oldValue && newValue) {
+    NProgress.start();
+  } else if (!newValue && oldValue) {
+    NProgress.done();
+  }
+})
 
 // functions
 </script>

phoenix-blog/src/handlebars_templates/handlebars.handlebars phoenix-blog/src/templates_handlebars/handlebars.handlebars

@@ -2,6 +2,7 @@ import { defineStore } from 'pinia'
 
 export interface AppState {
   isAuthenticated: boolean;
+  loading: boolean,
 }
 
 export const useStore = defineStore('store', {
@@ -12,12 +13,16 @@ export const useStore = defineStore('store', {
     },
     setIsAutenticated(isAuthenticated: boolean) {
       this.isAuthenticated = isAuthenticated;
+    },
+    setLoading(loading: boolean) {
+      this.loading = loading;
     }
   },
 })
 
 function defaultAppState(): AppState {
   return {
     isAuthenticated: false,
+    loading: false,
   };
 }

phoenix-blog/src/handlebars_templates/index.ts phoenix-blog/src/templates_handlebars/index.ts

@@ -9,7 +9,7 @@
     </div>
   </div>
 
-  <div class="text-center" v-if="!loading && blogs.length === 0">
+  <div class="text-center" v-if="!$store.loading && blogs.length === 0">
     <FireIcon class="inline-flex items-center -ml-0.5 mr-1.5 h-16 w-16 color-grey" aria-hidden="true" />
     <h3 class="mt-2 text-sm font-semibold text-gray-900">No blogs</h3>
     <p class="mt-1 text-sm text-gray-500">Get started by creating a new blog.</p>
@@ -23,7 +23,7 @@
     </div>
   </div>
 
-  <div v-else-if="!loading && blogs.length > 0" class="flex flex-col justify-center max-w-2xl mx-auto">
+  <div v-else-if="!$store.loading && blogs.length > 0" class="flex flex-col justify-center max-w-2xl mx-auto">
     <div class="flex">
       <RouterLink  :to="newBlogUrl">
         <CfButton>
@@ -66,19 +66,20 @@ import { onBeforeMount, ref, type Ref } from 'vue';
 import * as api from '@phoenix/core/api';
 import { PlusIcon, FireIcon, ChevronRightIcon } from '@heroicons/vue/24/outline';
 import CfButton from '@/components/cf_button.vue';
+import { useStore } from '@/app/store';
 
 // props
 
 // events
 
 // composables
 const $apiClient = useApiClient();
+const $store = useStore();
 
 // lifecycle
 onBeforeMount(() => fetchData());
 
 // variables
-let loading = ref(false);
 let error = ref('');
 const newBlogUrl = '/blogs/new'
 
@@ -90,15 +91,15 @@ const blogs: Ref<Blog[]> = ref([]);
 
 // functions
 async function fetchData() {
-  loading.value = true;
+  $store.setLoading(true);
   error.value = '';
 
   try {
     blogs.value = await api.getBlogs($apiClient);
   } catch (err: any) {
     error.value = err.message;
   } finally {
-    loading.value = false;
+    $store.setLoading(false);
   }
 }
 </script>