Markdown file use hash query string

netlify.toml

@@ -6,4 +6,5 @@
   # Define which paths this specific [[headers]] block will cover.
   for = "/*"
     [headers.values]
-    Access-Control-Allow-Origin = "*"
+    Access-Control-Allow-Origin = "*"
+    Cache-Control = "public, max-age=31536000, immutable"

packages/gem-book/src/bin/builder.ts

@@ -2,7 +2,7 @@ import path from 'path';
 import { writeFileSync, symlinkSync, renameSync } from 'fs';
 
 import webpack from 'webpack';
-import express from 'express';
+import serveStatic from 'serve-static';
 import WebpackDevServer from 'webpack-dev-server';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import CopyWebpackPlugin from 'copy-webpack-plugin';
@@ -173,7 +173,7 @@ export function startBuilder(dir: string, options: Required<CliUniqueConfig>, bo
         historyApiFallback: true,
         open: process.env.PORT ? false : true,
         setupMiddlewares: (middlewares, devServer) => {
-          devServer.app!.use('/_assets/', express.static(process.cwd()));
+          devServer.app!.use('/_assets/', serveStatic(process.cwd()));
           return middlewares;
         },
         port: Number(process.env.PORT) || 8091,

packages/gem-book/src/bin/index.ts

@@ -26,13 +26,14 @@ import {
   getBaseDir,
   isDirConfigFile,
   getMetadata,
-  isMdfile,
+  isMdFile,
   isSomeContent,
   inspectObject,
   getRepoTitle,
   checkRelativeLink,
   readDirConfig,
   getIconDataUrl,
+  getHash,
 } from './utils';
 import { startBuilder } from './builder';
 import lang from './lang.json'; // https://developers.google.com/search/docs/advanced/crawling/localized-versions#language-codes
@@ -100,12 +101,13 @@ function readDir(dir: string, link = '/') {
       const item: NavItem = { title: '', link: '' };
       const fullPath = path.join(dir, filename);
       if (fs.statSync(fullPath).isFile()) {
-        if (isMdfile(fullPath)) {
+        if (isMdFile(fullPath)) {
           if (cliConfig.debug) {
             checkRelativeLink(fullPath, docsRootDir);
           }
           item.type = 'file';
           item.link = `${link}${filename}`;
+          item.hash = getHash(fullPath);
           const {
             title,
             headings: children,
@@ -131,6 +133,7 @@ function readDir(dir: string, link = '/') {
 }
 
 async function generateBookConfig(dir: string) {
+  const t = Date.now();
   //icon path
   if (cliConfig.icon) {
     bookConfig.icon ??= await getIconDataUrl(cliConfig.icon);
@@ -183,7 +186,7 @@ async function generateBookConfig(dir: string) {
       fs.writeFileSync(configPath, configStr);
     }
   }
-  console.log(`${new Date().toISOString()} <gem-book> config file updated!`);
+  console.log(`${new Date().toISOString()} <gem-book> config file updated! ${Date.now() - t}ms`);
 }
 
 const debounceCommand = debounce(generateBookConfig, 300);
@@ -274,7 +277,7 @@ program
     await generateBookConfig(dir);
     if (!cliConfig.build) {
       fs.watch(dir, { recursive: true }, (type, filePath) => {
-        if (type === 'rename' || isDirConfigFile(filePath) || isMdfile(filePath)) {
+        if (type === 'rename' || isDirConfigFile(filePath) || isMdFile(filePath)) {
           debounceCommand(dir);
         }
       });

packages/gem-book/src/bin/utils.ts

@@ -2,6 +2,7 @@ import path from 'path';
 import { readFileSync, existsSync, statSync, readdirSync, lstatSync } from 'fs';
 import util from 'util';
 import { URL } from 'url';
+import { createHash } from 'crypto';
 
 import gitRemoteOriginUrl from 'git-remote-origin-url';
 import parseGithub from 'parse-github-url';
@@ -119,6 +120,13 @@ export function readDirConfig(fullPath: string) {
   }
 }
 
+export function getHash(fullPath: string) {
+  const hash = createHash('sha256');
+  const fileData = readFileSync(fullPath);
+  hash.update(fileData);
+  return hash.digest('hex').substring(0, 8);
+}
+
 type FileMetadata = FrontMatter & {
   title: string;
   headings?: NavItem[];
@@ -159,13 +167,13 @@ export function getMetadata(fullPath: string, displayRank: boolean | undefined):
       title: getTitle(),
       ...readDirConfig(fullPath),
     };
-  } else if (isMdfile(fullPath)) {
+  } else if (isMdFile(fullPath)) {
     return parseMd(fullPath);
   }
   return { title: '' };
 }
 
-export function isMdfile(filename: string) {
+export function isMdFile(filename: string) {
   return /\.md$/i.test(path.extname(filename));
 }
 

packages/gem-book/src/common/config.ts

@@ -5,6 +5,9 @@ export type NavItem = FrontMatter & {
   link: string;
   type?: 'dir' | 'file' | 'heading';
   children?: NavItem[];
+
+  // md file
+  hash?: string;
 };
 
 export type SidebarConfig = NavItem[] | { [lang: string]: { name: string; data: NavItem[] } };

packages/gem-book/src/element/elements/edit-link.ts

@@ -61,8 +61,8 @@ export class EditLink extends GemElement<State> {
     const link = links.find(({ originLink }) => getUserLink(originLink) === path);
     if (!link) return;
     const basePath = base ? `/${base}` : '';
-    const sroucePath = sourceDir ? `/${sourceDir}` : '';
-    return `${basePath}${sroucePath}${getRemotePath(link.originLink, lang)}`;
+    const sourcePath = sourceDir ? `/${sourceDir}` : '';
+    return `${basePath}${sourcePath}${getRemotePath(link.originLink, lang)}`;
   };
 
   render() {

packages/gem-book/src/element/elements/meta.ts

@@ -1,7 +1,7 @@
 import { connectStore, customElement, GemElement, html, history } from '@mantou/gem';
 import { mediaQuery } from '@mantou/gem/helper/mediaquery';
 
-import { getAlternateUrl, getRemotePath } from '../lib/utils';
+import { getAlternateUrl, getURL } from '../lib/utils';
 import { bookStore } from '../store';
 
 import '@mantou/gem/elements/reflect';
@@ -27,7 +27,7 @@ export class Meta extends GemElement {
           ? null
           : links
               ?.filter((e) => e.type === 'file')
-              .map(({ originLink }) => html`<link rel="prefetch" href=${getRemotePath(originLink, lang)}></link>`)}
+              .map(({ originLink, hash }) => html`<link rel="prefetch" href=${getURL(originLink, lang, hash)}></link>`)}
 
         <!-- search engine -->
         <link rel="canonical" href=${canonicalLink} />

packages/gem-book/src/element/lib/fetch.ts

@@ -1,9 +1,9 @@
-import { getRemotePath } from './utils';
+import { getURL } from './utils';
 
 const cache = new Map<string, string>();
 
-export async function fetchDocument({ link, lang }: { link: string; lang: string }) {
-  const mdPath = getRemotePath(link, lang);
+export async function fetchDocument(link: string, lang: string, hash?: string) {
+  const mdPath = getURL(link, lang, hash);
   let md = cache.get(mdPath);
   if (!md) {
     md = await (await fetch(mdPath)).text();

packages/gem-book/src/element/lib/utils.ts

@@ -23,11 +23,15 @@ export function flatNav(nav: NavItem[]): NavItemWithLink[] {
     .flat();
 }
 
-export function getRemotePath(originPath: string, lang?: string) {
-  const langPath = lang ? `/${lang}` : '';
+export function getRemotePath(originPath: string, lang = '') {
+  const langPath = lang && `/${lang}`;
   return `${langPath}${originPath}`;
 }
 
+export function getURL(originPath: string, lang = '', hash = '') {
+  return `${getRemotePath(originPath, lang)}?hash=${hash}`;
+}
+
 export function getAlternateUrl(lang: string, pathname?: string) {
   const { origin } = location;
   const { path, query, hash } = history.getParams();

packages/gem-book/src/element/store.ts

@@ -110,15 +110,15 @@ function getNavRoutes(nav: NavItem[]): RouteItem[] {
 function getRouter(links: NavItemWithLink[], title: string, lang: string, displayRank: boolean | undefined) {
   const routes: RouteItem<NavItemWithLink>[] = [];
   links.forEach((item) => {
-    const { title: pageTitle, link, userFullPath, originLink } = item;
+    const { title: pageTitle, link, userFullPath, originLink, hash } = item;
     const routeTitle = `${capitalize(pageTitle)}${pageTitle ? ' - ' : ''}${title}`;
 
     routes.push({
       title: routeTitle,
       pattern: link,
       async getContent() {
         const renderer = getRenderer({ lang, link: originLink, displayRank });
-        const content = await fetchDocument({ lang, link: originLink });
+        const content = await fetchDocument(originLink, lang, hash);
         return html`<gem-book-main role="article" .renderer=${renderer} .content=${content}></gem-book-main>`;
       },
       data: item,