Client: Add support for structured storage

winwiz1 · winwiz1 · commit 2cae8305516b · 2021-10-11T19:10:53.000+11:00
diff --git a/client/src/components/ComponentA.tsx b/client/src/components/ComponentA.tsx
@@ -8,15 +8,23 @@ import { Helmet } from "react-helmet";
 import { Header, Container } from "semantic-ui-react";
 import { Navigation } from "./Navigation";
 import { BaseComponent } from "./BaseComponent";
+import { StructuredData } from "./StructuredData";
 import { getTitle, getCanonical } from "../utils/misc";
 
 const Description: React.FC = _props => {
+  const pageName = "ComponentA";
+  const pageDescription = "Sample component called 'ComponentA'";
+
   return (
     <section>
       <Helmet>
-        <title>{getTitle("ComponentA")}</title>
+        <title>{getTitle(pageName)}</title>
         <link rel="canonical" href={getCanonical()} />
       </Helmet>
+      <StructuredData
+        name={pageName}
+        description={pageDescription}
+      />
       <Container text textAlign="justified">
         <Header as="h3">Hello from ComponentA</Header>
         <p>
diff --git a/client/src/components/ComponentB.tsx b/client/src/components/ComponentB.tsx
@@ -8,6 +8,7 @@ import * as React from "react";
 import { Helmet } from "react-helmet";
 import { Header, Icon, Container, Menu } from "semantic-ui-react";
 import { BaseComponent } from "./BaseComponent";
+import { StructuredData } from "./StructuredData";
 import * as SPAs from "../../config/spa.config";
 import { getTitle, getCanonical } from "../utils/misc";
 
@@ -79,12 +80,19 @@ const Navigation: React.FC = _props => {
 };
 
 export const ComponentB: React.FC = _props => {
+  const pageName = "ComponentB";
+  const pageDescription = "Sample component called 'ComponentB'";
+
   return (
     <React.Fragment>
       <Helmet>
-        <title>{getTitle("ComponentB")}</title>
+        <title>{getTitle(pageName)}</title>
         <link rel="canonical" href={getCanonical()} />
       </Helmet>
+      <StructuredData
+        name={pageName}
+        description={pageDescription}
+      />
       <BaseComponent leftComponent={Navigation} rightComponent={Description} />
     </React.Fragment>
   );
diff --git a/client/src/components/Lighthouse.tsx b/client/src/components/Lighthouse.tsx
@@ -15,6 +15,7 @@ import {
 } from "semantic-ui-react";
 import { Navigation } from "./Navigation";
 import { BaseComponent } from "./BaseComponent";
+import { StructuredData } from "./StructuredData";
 import { getAnchorCSS } from "../css/common-styles";
 import { getTitle, getCanonical } from "../utils/misc";
 
@@ -30,12 +31,19 @@ const cssIcon = css({
 });
 
 const Description: React.FC = _props => {
+  const pageName = "Lighthouse";
+  const pageDescription = "Sample component called 'Lighthouse'";
+
   return (
     <section>
       <Helmet>
-        <title>{getTitle("Lighthouse")}</title>
+        <title>{getTitle(pageName)}</title>
         <link rel="canonical" href={getCanonical()} />
       </Helmet>
+      <StructuredData
+        name={pageName}
+        description={pageDescription}
+      />
       <Container text textAlign="justified" css={cssContainer}>
         <Header as="h3">Hello from the Lighthouse component</Header>
         <p>
diff --git a/client/src/components/NameLookup.tsx b/client/src/components/NameLookup.tsx
@@ -20,6 +20,7 @@ import {
 } from "semantic-ui-react";
 import { Navigation } from "./Navigation";
 import { BaseComponent } from "./BaseComponent";
+import { StructuredData } from "./StructuredData";
 import {
   SampleRetrieval,
   SampleRetrievalData,
@@ -84,6 +85,9 @@ const cssDivider = css({
 //#endregion
 
 const NameLookupContent: React.FC = _props => {
+  const pageName = "NameLookup";
+  const pageDescription = "Sample component called 'NameLookup'";
+
   // API call is in progress
   const [inFlight, setInFlight] = React.useState<boolean>(false);
 
@@ -161,9 +165,13 @@ const NameLookupContent: React.FC = _props => {
   return (
     <section>
       <Helmet>
-        <title>{getTitle("Namelookup")}</title>
+        <title>{getTitle(pageName)}</title>
         <link rel="canonical" href={getCanonical()} />
       </Helmet>
+      <StructuredData
+        name={pageName}
+        description={pageDescription}
+      />
       <Container text textAlign="justified">
         <Header as="h3">Hello from NameLookup</Header>
         <p>
diff --git a/client/src/components/NotFound.tsx b/client/src/components/NotFound.tsx
@@ -1,22 +1,32 @@
 /**
- * ComponentA is a sample component. It belongs
- * to the First SPA and uses BaseComponent
- * to render self.
+ * NotFound renders the "Page Not Found" response and uses
+ *   <meta name="robots" content="noindex" />
+ * as a replacement for HTML 404 status code.
  */
 import * as React from "react";
 import { Helmet } from "react-helmet";
 import { Header, Container } from "semantic-ui-react";
 import { Navigation } from "./Navigation";
 import { BaseComponent } from "./BaseComponent";
+import { StructuredData } from "./StructuredData";
 import { getTitle } from "../utils/misc";
 
 const Description: React.FC = _props => {
+  const pageName = "Page Not Found";
+  const pageDescription = "Renders 'Page Not Found' response \
+and uses <meta name='robots' content='noindex' /> \
+as a replacement for HTML 404 status code.";
+
   return (
     <section>
       <Helmet>
-        <title>{getTitle("Page Not Found")}</title>
+        <title>{getTitle(pageName)}</title>
         <meta name="robots" content="noindex" />
       </Helmet>
+      <StructuredData
+        name={pageName}
+        description={pageDescription}
+      />
       <Container text textAlign="justified">
         <Header as="h3">Hello from Not Found</Header>
         <p>
diff --git a/client/src/components/Overview.tsx b/client/src/components/Overview.tsx
@@ -17,6 +17,7 @@ import {
 } from "semantic-ui-react";
 import { Navigation } from "./Navigation";
 import { BaseComponent } from "./BaseComponent";
+import { StructuredData } from "./StructuredData";
 import { getAnchorCSS } from "../css/common-styles";
 import styles from "../css/overview.module.css";
 import { getTitle, getCanonical } from "../utils/misc";
@@ -58,12 +59,19 @@ const Msg: React.FC = _props => {
 }
 
 const Description: React.FC = _props => {
+  const pageName = "Overview";
+  const pageDescription = "Sample component called 'Overview'";
+
   return (
     <Container text textAlign="justified">
       <Helmet>
         <title>{getTitle()}</title>
         <link rel="canonical" href={getCanonical("/")} />
       </Helmet>
+      <StructuredData
+        name={pageName}
+        description={pageDescription}
+      />
       <Message css={cssMessage} className={cssStyle.msg}>
         <Icon css={cssIcon}
           name="info circle"
@@ -111,8 +119,6 @@ const Description: React.FC = _props => {
 
 export const Overview: React.FC = _props => {
   return (
-    <React.Fragment>
-      <BaseComponent leftComponent={Navigation} rightComponent={Description} />
-    </React.Fragment>
+    <BaseComponent leftComponent={Navigation} rightComponent={Description} />
   );
 };
diff --git a/client/src/components/StructuredData.tsx b/client/src/components/StructuredData.tsx
@@ -0,0 +1,28 @@
+
+import * as React from "react";
+import { Helmet } from "react-helmet";
+
+interface IStructuredData {
+  name: string;
+  description: string;
+};
+
+export const StructuredData: React.FC<IStructuredData> = props => {
+
+  // Replace with the structured data that describes the content of your webpages.
+  // Possibly replace 'WebPage' with 'Product' or 'Article' etc.
+  const structuredData = {
+    "@context": "https://schema.org",
+    "@type": "WebPage",
+    "name": props.name,
+    "description": props.description,
+  };
+
+  return (
+    <Helmet>
+      <script type="application/ld+json">
+        {JSON.stringify(structuredData)}
+      </script>
+    </Helmet>
+  );
+};
diff --git a/client/src/utils/postprocess/misc.ts b/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();
+    }
+  }
diff --git a/client/src/utils/postprocess/postProcess.ts b/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)});
 
diff --git a/client/src/utils/postprocess/postProcessSSR.ts b/client/src/utils/postprocess/postProcessSSR.ts
@@ -1,6 +1,9 @@
 import * as fs from "fs";
 import * as path from "path";
 import { promisify } from "util";
+import { JSDOM } from "jsdom";
+import { CallbackWrapper } from "./misc"
+import * as SPAs from "../../../config/spa.config";
 
 export async function postProcess(workDir: string, filePattern: string): Promise<void> {
   const readdir = promisify(fs.readdir);
@@ -15,6 +18,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 +45,47 @@ 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");
+  // Replace with data specific to your site, then test using
+  // https://validator.schema.org/ and
+  // https://search.google.com/test/rich-results. The second
+  // test will effectively fail because 'WebSite' is not
+  // specific enough for Google. And so is 'WebPage'.
+  // See https://developers.google.com/search/docs/advanced/structured-data/sd-policies#specificity
+  const structuredData = `{
+    "@context": "https://schema.org",
+    "@type": "WebSite",
+    "name": "${SPAs.appTitle}",
+    "datePublished": "${new Date().toISOString().split("T")[0]}",
+  }`;
+
+  script.setAttribute("type", "application/ld+json");
+  script.textContent = structuredData;
+  hdr.appendChild(script);
+  await writeFile(htmlFilePath, jsdom.serialize());
 }
+
+
