Client: Add structured storage to SSR

Author: winwiz1

client/src/utils/postprocess/misc.ts

@@ -1,16 +1,30 @@
-import { createMemoryHistory, createBrowserHistory } from "history";
+import {
+  createMemoryHistory,
+  createBrowserHistory,
+  History
+}
+from "history";
 
 export const isServer = (): boolean => {
   return typeof window === "undefined";
 }
 
 // https://stackoverflow.com/a/51511967/12005425
-// eslint-disable-next-line
-export const getHistory = (url = "/") => {
+export const getHistory = (url = "/"): History<unknown> => {
   const history = isServer() ?
     createMemoryHistory({
       initialEntries: [url]
     }) : createBrowserHistory();
 
   return history;
 }
+
+type PromiseCallback = () => void;
+
+export class CallbackWrapper {
+    constructor(readonly callback: PromiseCallback) {
+    }
+    readonly invoke = (): void => {
+      this.callback();
+    }
+  }

client/src/utils/postprocess/postProcess.ts

@@ -2,6 +2,7 @@ import * as fs from "fs";
 import * as path from "path";
 import { promisify } from "util";
 import { webpack } from "webpack";
+import { CallbackWrapper } from "./misc"
 import { postProcess as postProcessSSR } from "./postProcessSSR";
 import { postProcess as postProcessCSS } from "./postProcessCSS";
 
@@ -39,16 +40,6 @@ export async function postProcess(): Promise<void> {
       const webpackConfig = require("../../../webpack.config.ssr.js");
       const compiler = webpack({...webpackConfig, entry: tp[1]});
 
-      type PromiseCallback = () => void;
-
-      class CallbackWrapper {
-        constructor(readonly callback: PromiseCallback) {
-        }
-        readonly invoke = (): void => {
-          this.callback();
-        }
-      }
-
       let cbWrapper: CallbackWrapper|undefined;
       const waitForCompiler = new Promise<void>((resolve) => { cbWrapper = new CallbackWrapper(resolve)});
 

client/src/utils/postprocess/postProcessSSR.ts

@@ -1,6 +1,8 @@
 import * as fs from "fs";
 import * as path from "path";
 import { promisify } from "util";
+import { JSDOM } from "jsdom";
+import { CallbackWrapper } from "./misc"
 
 export async function postProcess(workDir: string, filePattern: string): Promise<void> {
   const readdir = promisify(fs.readdir);
@@ -15,6 +17,7 @@ export async function postProcess(workDir: string, filePattern: string): Promise
   }
 
   await postProcessBody(workDir, htmlFiles[0], txtFiles[0]);
+  await postProcessHeader(workDir, htmlFiles[0]);
 }
 
 async function postProcessBody(workDir: string, htmlFile: string, ssrFile: string): Promise<void> {
@@ -41,5 +44,40 @@ async function postProcessBody(workDir: string, htmlFile: string, ssrFile: strin
     console.error(`Failed to write to file ${htmlFilePath}, error: ${err}`)
   });
   out.forEach(str => { stream.write(str); });
+
   stream.end();
+
+  let cbWrapper: CallbackWrapper|undefined;
+  const waitForBufferFlush = new Promise<void>((resolve) => { cbWrapper = new CallbackWrapper(resolve); });
+
+  stream.on("close", function() {
+    cbWrapper?.invoke();
+  });
+
+  await waitForBufferFlush;
+}
+
+async function postProcessHeader(workDir: string, htmlFile: string): Promise<void> {
+  const htmlFilePath = path.join(workDir, htmlFile);
+  const jsdom = await JSDOM.fromFile(htmlFilePath);
+
+  if (!jsdom) {
+    throw "JSDOM creation failure";
+  }
+
+  const writeFile = promisify(fs.writeFile);
+  const hdr: HTMLHeadElement = jsdom.window.document.head;
+  const script = jsdom.window.document.createElement("script");
+  const structuredData = `{
+    "@context": "https://schema.org",
+    "@type": "WebPage",
+    "datePublished": "${new Date().toISOString().split("T")[0]}",
+  }`;
+
+  script.setAttribute("type", "application/ld+json");
+  script.textContent = structuredData;
+  hdr.appendChild(script);
+  await writeFile(htmlFilePath, jsdom.serialize());
 }
+
+