[seo,json-ld][m]: implement json-ld (schema markups)

site/components/JSONLD.tsx

@@ -0,0 +1,65 @@
+import { ArticleJsonLd } from 'next-seo';
+import { useRouter } from 'next/router';
+
+export default function JSONLD({
+  meta,
+  source,
+}: {
+  meta: any;
+  source: string;
+}): JSX.Element {
+  if (!source) {
+    return <></>;
+  }
+
+  const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || 'https://portaljs.org';
+  const pageUrl = `${baseUrl}/${meta.urlPath}`;
+
+  const imageMatches = source.match(
+    /(?<=src: ")(.*)\.((png)|(jpg)|(jpeg))(?=")/g
+  );
+  let images = [];
+  if (imageMatches) {
+    images = [...imageMatches];
+    images = images.map((img) =>
+      img.startsWith('http')
+        ? img
+        : `${baseUrl}${img.startsWith('/') ? '' : '/'}${img}`
+    );
+  }
+
+  let Component: JSX.Element;
+
+  const isBlog: boolean =
+    /^blog\/.*/.test(meta.urlPath) || meta.filetype === 'blog';
+  const isDoc: boolean = /^((docs)|(howtos\/)|(guide\/)).*/.test(meta.urlPath);
+
+  if (isBlog) {
+    Component = (
+      <ArticleJsonLd
+        type="BlogPosting"
+        url={pageUrl}
+        title={meta.title}
+        datePublished={meta.date}
+        dateModified={meta.date}
+        authorName={meta.authors.length ? meta.authors[0].name : 'PortalJS'}
+        description={meta.description}
+        images={images}
+      />
+    );
+  } else if (isDoc) {
+    Component = (
+      <ArticleJsonLd
+        url={pageUrl}
+        title={meta.title}
+        images={images}
+        datePublished={meta.date}
+        dateModified={meta.date}
+        authorName={meta.authors.length ? meta.authors[0].name : 'PortalJS'}
+        description={meta.description}
+      />
+    );
+  }
+
+  return Component;
+}

site/content/docs/index.md

@@ -52,12 +52,7 @@ Let’s try editing the starter page.
 
 After refreshing the page, you should see the new text:
 
-<<<<<<< HEAD
 <img src="/assets/docs/editing-the-page-1.png" alt="PortalJS tutorial project after a simple change is made by a user" />
-=======
-<img src="/assets/docs/editing-the-page-1.png" alt="Editing base example" />
-
-> > > > > > > da226ef2056391bc2f710b6229645c25488485fb
 
 Congratulations! The app is up and running and you learned how to edit a page. In the next lesson, you are going to learn how to create new datasets.
 

site/pages/[...slug].tsx

@@ -12,6 +12,7 @@ import { GetStaticProps, GetStaticPropsResult } from 'next';
 import { CustomAppProps } from './_app.jsx';
 import computeFields from '@/lib/computeFields';
 import { getAuthorsDetails } from '@/lib/getAuthorsDetails';
+import JSONLD from '@/components/JSONLD';
 
 export default function Page({ source, meta, sidebarTree }) {
   source = JSON.parse(source);
@@ -29,15 +30,18 @@ export default function Page({ source, meta, sidebarTree }) {
   }, [router.asPath]); // update table of contents on route change with next/link
 
   return (
-    <Layout
+    <>
-      tableOfContents={tableOfContents}
+      <JSONLD meta={meta} source={source.compiledSource} />
-      title={meta.title}
+      <Layout
-      description={meta.description}
+        tableOfContents={tableOfContents}
-      sidebarTree={sidebarTree}
+        title={meta.title}
-      urlPath={meta.urlPath}
+        description={meta.description}
-    >
+        sidebarTree={sidebarTree}
-      <MDXPage source={source} frontMatter={meta} />
+        urlPath={meta.urlPath}
-    </Layout>
+      >
+        <MDXPage source={source} frontMatter={meta} />
+      </Layout>
+    </>
   );
 }
 

site/pages/index.tsx

@@ -8,6 +8,7 @@ import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
 import { collectHeadings } from '@portaljs/core';
 import Head from 'next/head';
+import { LogoJsonLd } from 'next-seo';
 
 export default function Home({ sidebarTree }) {
   const router = useRouter();
@@ -24,6 +25,10 @@ export default function Home({ sidebarTree }) {
 
   return (
     <>
+      <LogoJsonLd
+        url="https://portaljs.org"
+        logo="https://portaljs.org/icon.png"
+      />
       <Layout
         isHomePage={true}
         tableOfContents={tableOfContents}