Merge branch 'giscus' into dev

Author: estruyf

components/Docs/PageInfo.tsx

@@ -4,6 +4,7 @@ import { useMemo } from 'react';
 import { Extension } from '../../constants/extension';
 import { PageFrontMatter } from '../../models/PageFrontMatter';
 import { GitHub } from '../Images/GitHub';
+import Giscus from "@giscus/react";
 
 export interface IPageInfoProps {
   items: PageFrontMatter[];
@@ -63,15 +64,31 @@ export const PageInfo: React.FunctionComponent<IPageInfoProps> = ({page, items}:
       }
 
       <div className={`mt-16`}>
-        <h2 className={`tracking-tight font-extrabold sm:leading-none text-3xl xl:text-4xl`}>Feedback</h2>
+        <h2 className={`tracking-tight font-extrabold sm:leading-none text-3xl xl:text-4xl`}>Feedback/comments</h2>
 
-        <div className={`my-4 bg-vulcan-100 p-4`}>
+        {/* <div className={`my-4 bg-vulcan-100 p-4`}>
           <p>Do you want to provide feedback about this page/content?</p>
 
           <a href={feedbackUrl} className={`py-4 px-2 mt-4 inline-flex items-center h-5 bg-vulcan-300 hover:bg-vulcan-400`}>
             <GitHub className={`w-5 h-5 mr-2 inline`} />
             <span>Provide feedback</span>
           </a> 
+        </div> */}
+
+        <div className={`my-4`}>
+          <Giscus 
+            repo="FrontMatter/feedback"
+            repoId="R_kgDOIo5HTQ"
+            category="Comments"
+            categoryId="DIC_kwDOIo5HTc4CTI9X"
+            mapping="pathname"
+            strict="0"
+            reactionsEnabled="0"
+            emitMetadata="0"
+            inputPosition="top"
+            theme={process.env.NEXT_PUBLIC_GISCUS_THEME}
+            lang="en"
+            loading="lazy" />
         </div>
 
         {

components/Page/DocsLayout.tsx

@@ -20,10 +20,8 @@ export const DocsLayout: React.FunctionComponent<React.PropsWithChildren<IDocsLa
     <div className={`lg:ml-72 xl:ml-80`}>
 
       <aside className={`fixed inset-y-0 left-0 z-40 contents w-72 overflow-y-auto px-6 pt-4 pb-8 lg:block xl:w-80 lg:pr-8 lg:border-r lg:border-vulcan-300`}>
-        <div className={`fixed inset-x-0 top-0 z-50 flex h-16 items-center transition sm:px-6 lg:z-30 lg:px-8 backdrop-blur-md dark:backdrop-blur lg:left-72 xl:left-80 border-b border-vulcan-300/10 bg-vulcan-500/80`}>
-          <div className='ml-auto'>
-            <Header navItems={navItems} />
-          </div>
+        <div className='ml-auto'>
+          <Header navItems={navItems} />
         </div>
 
         <Home className={`hidden lg:flex h-16`} />

components/Page/Header.tsx

@@ -24,7 +24,7 @@ const Header: React.FunctionComponent<IHeaderProps> = forwardRef(({navItems}: Re
     <>
       <header
         ref={ref} 
-        className={`w-full fixed inset-x-0 top-0 z-50 flex h-16 lg:h-20 items-center justify-between px-4 transition sm:px-6 lg:z-30 lg:px-8 bg-vulcan-500/80 backdrop-blur-md`}>
+        className={`fixed inset-x-0 top-0 z-50 flex h-16 lg:h-20 items-center justify-between px-4 transition sm:px-6 lg:z-30 lg:px-8 bg-vulcan-500/80 backdrop-blur-lg ${isDocs ? "right-0 lg:left-72 xl:left-80" : ""}`}>
 
         <div className="flex items-center justify-between lg:hidden w-full">
           <Home className='h-12' />

next.config.js

@@ -9,5 +9,15 @@ module.exports = {
         permanent: true
       },
     ]
-  }
-}
+  },
+  async headers() {
+    return [
+      {
+        source: "/:path*",
+        headers: [
+          { key: "Access-Control-Allow-Origin", value: "*" },
+        ],
+      },
+    ]
+  },
+}