Documenation updates

docs/components/Docs/Markdown.tsx

@@ -1,4 +1,6 @@
+import Link from 'next/link';
 import * as React from 'react';
+import { useEffect } from 'react';
 import ReactMarkdown from 'react-markdown';
 import rehypeRaw from 'rehype-raw';
 
@@ -21,6 +23,16 @@ export const Markdown: React.FunctionComponent<IMarkdownProps> = ({content}: Rea
     return title.toLowerCase().replace(/\s/g, '-');
   };
 
+  useEffect(() => {
+    const elms = document.querySelectorAll('blockquote > p > strong');
+    for (let i = 0; i < elms.length; i++) {
+      const elm = elms[i];
+      if (elm.textContent?.toLowerCase() === "important") {
+        elm.parentElement?.parentElement?.classList.add('important');
+      }
+    }
+  }, ['']);
+
   return (
     <div className={`markdown`}>
       {/* eslint-disable react/no-children-prop */}
@@ -29,7 +41,7 @@ export const Markdown: React.FunctionComponent<IMarkdownProps> = ({content}: Rea
           a: ({node, ...props}) => {
             const url = props?.href || "";
             const title = getTitle(props);
-            const elm = <a key={url as string} href={url as string} title={title}>{title}</a>;
+            const elm = <Link key={url as string} href={url as string}><a title={title}>{title}</a></Link>;
             return elm;
           },
           h1: ({node, ...props}) => (<h1 id={generateId(props)}>{getTitle(props)}</h1>),

docs/components/Docs/Page.tsx

@@ -1,14 +1,16 @@
 import * as React from 'react';
 import { PageFrontMatter } from '../../models/PageFrontMatter';
+import { PageInfo } from './PageInfo';
 import { Sidebar } from './Sidebar';
 
 export interface IPageProps {
   items: PageFrontMatter[];
+  page: PageFrontMatter | undefined;
 }
 
-export const Page: React.FunctionComponent<IPageProps> = ({items, children}: React.PropsWithChildren<IPageProps>) => {
+export const Page: React.FunctionComponent<IPageProps> = ({items, page, children}: React.PropsWithChildren<IPageProps>) => {
   return (
-    <div className={`py-8 w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8`}>
+    <div className={`mb-6 py-8 w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8`}>
       <div className={`lg:flex`}>
 
         <div className={`h-screen sticky top-16 lg:block hidden lg:w-60 xl:w-72`}>
@@ -17,6 +19,8 @@ export const Page: React.FunctionComponent<IPageProps> = ({items, children}: Rea
 
         <div className={`min-w-0 w-full flex-auto lg:static lg:max-h-full lg:overflow-visible`}>
           {children}
+
+          <PageInfo page={page} />
         </div>
       </div>
     </div>

docs/components/Docs/PageInfo.tsx

@@ -0,0 +1,33 @@
+import { format, parseJSON } from 'date-fns';
+import * as React from 'react';
+import { Extension } from '../../constants/extension';
+import { PageFrontMatter } from '../../models/PageFrontMatter';
+
+export interface IPageInfoProps {
+  page: PageFrontMatter | undefined;
+}
+
+export const PageInfo: React.FunctionComponent<IPageInfoProps> = ({page}: React.PropsWithChildren<IPageInfoProps>) => {
+
+  if (!page) {
+    return null;
+  }
+
+  const date = parseJSON(page.date);
+
+  return (
+    <div className={`mt-16`}>
+      {
+        date && (
+          <div className="text-base">
+            <span>Last updated on</span>{` `}<span>{format(date, `MMM dd, yyyy`)}</span>
+          </div>
+        )
+      }
+
+      <div className="mt-2 text-sm">
+        <p>Did you spot an issue in our documentation, or want to contribute? Edit this page on <a className={`text-teal-500 hover:text-teal-900`} href={`${Extension.githubLink}/edit/main/docs/content/docs/${page.fileName}.md`} target="_blank">Github</a>!</p>
+      </div>
+    </div>
+  );
+};

docs/components/Page/CTA.tsx

@@ -22,7 +22,7 @@ export const CTA: React.FunctionComponent<ICTAProps> = (props: React.PropsWithCh
 
           <div className="mt-10 max-w-sm mx-auto sm:max-w-none">
             <div className="space-y-4 sm:space-y-0 sm:mx-auto sm:inline-grid sm:grid-cols-2 sm:gap-5">
-              <a href={Extension.extensionLink} className="flex items-center justify-center px-4 py-3 border border-transparent text-base font-medium shadow-sm text-white bg-teal-500 hover:bg-opacity-70 sm:px-8" rel={`noopener noreferrer`}>
+              <a href={Extension.installLink} className="flex items-center justify-center px-4 py-3 border border-transparent text-base font-medium shadow-sm text-white bg-teal-500 hover:bg-opacity-70 sm:px-8" rel={`noopener noreferrer`}>
                 {strings(`cta_button_primary`)}
               </a>
               <a href={`/docs`} title={`Read our documentation`} className="flex items-center justify-center px-4 py-3 border border-transparent text-base font-medium shadow-sm text-vulcan-500 bg-whisper-500 hover:bg-opacity-70 sm:px-8">