samcyn · samcyn · Apr 19, 2024 · Apr 19, 2024
diff --git a/packages/site/gatsby-ssr.tsx b/packages/site/gatsby-ssr.tsx
@@ -2,3 +2,11 @@
 import LayoutComponent from './wrapPageElement';
 
 export const wrapPageElement = LayoutComponent;
+
+const HtmlAttributes = {
+  lang: 'en',
+};
+
+export const onRenderBody = ({ setHtmlAttributes }) => {
+  setHtmlAttributes(HtmlAttributes);
+};
diff --git a/packages/site/src/components/AppLayout/index.tsx b/packages/site/src/components/AppLayout/index.tsx
@@ -26,7 +26,10 @@ const AppLayout = ({ children }: { children: ReactNode }) => {
         >
           {/* overlay */}
           {open && (
-            <div onClick={onOpen} className="absolute lg:hidden inset-0 h-full min-h-screen bg-white/70 z-[1000]"></div>
+            <div
+              onClick={onOpen}
+              className="absolute lg:hidden inset-0 h-full min-h-screen bg-white/70 dark:bg-dark/90 z-[1000]"
+            ></div>
           )}
           <section className="px-4 md:px-6 xl:px-19">
             <AppHeader onOpen={onOpen} />

diff --git a/packages/site/src/components/AppTabs/index.tsx b/packages/site/src/components/AppTabs/index.tsx
@@ -1,4 +1,4 @@
-import React, { Children, JSXElementConstructor, ReactElement, ReactNode, useState } from 'react';
+import React, { Children, FunctionComponentElement, ReactNode, useState } from 'react';
 
 type AppTabProps = {
   isActive?: boolean;
@@ -9,7 +9,7 @@ type AppTabProps = {
 };
 
 type Props = {
-  children: Array<ReactElement<AppTabProps, JSXElementConstructor<unknown>>>;
+  children: Array<FunctionComponentElement<AppTabProps>>;
 };
 
 export const AppTab = ({ isActive, position, ariaLabelledby, children }: AppTabProps) => {
@@ -26,12 +26,15 @@ export const AppTab = ({ isActive, position, ariaLabelledby, children }: AppTabP
   );
 };
 
+AppTab.displayName = 'AppTab';
+
 const AppTabs = ({ children }: Props) => {
   const [activeIndex, setActiveIndex] = useState(0);
 
   const nodes = Children.map(children, (node) => {
-    if (node.type.name !== 'AppTab') {
-      throw new Error('Use AppTab within AppTabs');
+    console.log(node.type.name);
+    if (node.type.displayName !== 'AppTab') {
+      console.warn('Use AppTab within AppTabs');
     }
     return node;
   });

diff --git a/packages/site/src/docs/demo.mdx b/packages/site/src/docs/demo.mdx
@@ -1,6 +1,6 @@
 ---
 title: Gatsby Source
-tail: Hubspot Node Plugin v1.0.1
+tail: Hubspot Node  Demo
 slug: demo
 date: 2019-01-29
 tableOfContentsDepth: 2
@@ -12,7 +12,7 @@ import AppCardWithPhoto from '@components/AppCard/AppCardWithPhoto';
 import AppCardWithContact from '@components/AppCard/AppCardWithContact';
 
 Examples using Github repo data
-<AppCard className="p-4 mb-10 bg-white dark:bg-gray-80 shadow">
+<AppCard className="p-4 mb-10 bg-white dark:bg-gray-80 shadow-inner lg:shadow">
   <ul className="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-5 place-content-between md:place-items-center bg-brand-dgray dark:bg-dark shadow-sm rounded-md px-6 py-4 gap-4">
     <li className="flex justify-center md:justify-normal basis-full md:basis-auto">
       <div className="text-center">

diff --git a/packages/site/src/docs/development.mdx b/packages/site/src/docs/development.mdx
@@ -65,15 +65,15 @@ The rest of this part of the Tutorial walks you through how to install the follo
 
 Follow the installation instructions below, based on your computer's operating system. (Click the header to expand the section.)
 
-<iframe
+{/* <iframe
   width="100%"
   height="415"
   src="https://codesandbox.io/p/sandbox/quirky-fire-x8h7j6?file=%2Fsrc%2Findex.js"
   title="YouTube video player"
   frameBorder="0"
   allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
   allowFullScreen
-></iframe>
+></iframe> */}
 {/* <Collapsible
   summary={<h4>Mac instructions</h4>}
 >

diff --git a/packages/site/src/pages/demo.tsx b/packages/site/src/pages/demo.tsx
@@ -27,7 +27,7 @@ export default DashboardPage;
 export const Head: HeadFC = () => (
   <>
     <html lang="en" />
-    <title>Dashboard Page</title>
+    <title>Demo Page</title>
     <meta name="author" content="Samson Iyanda"></meta>
     <meta name="description" content="site for gatsby source hubspot plugin documentation"></meta>
     <meta name="keywords" content="gatsby, gatsby plugin, reactjs, hubspot"></meta>

diff --git a/packages/site/src/pages/index.tsx b/packages/site/src/pages/index.tsx
@@ -36,6 +36,9 @@ export const query = graphql`
 export const Head: HeadFC<Queries.IndexPageQuery> = ({ data }) => (
   <>
     <title>{data.mdx.frontmatter.title}</title>
+    <meta name="author" content="Samson Iyanda"></meta>
+    <meta name="description" content="site for gatsby source hubspot plugin documentation"></meta>
+    <meta name="keywords" content="gatsby, gatsby plugin, reactjs, hubspot"></meta>
   </>
 );
 

diff --git a/packages/site/src/templates/docs.tsx b/packages/site/src/templates/docs.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import type { PageProps } from 'gatsby';
+import type { HeadFC, PageProps } from 'gatsby';
 
 import { Props as TableContentProps } from '@components/AppTableOfContents';
 import ContentMarkUp from '@components/ContentMarkUp';
@@ -19,4 +19,17 @@ const DocMarkUp: React.FC<PageProps<unknown, Queries.GetAllDocumentsQuery['allMd
   );
 };
 
+export const Head: HeadFC<unknown, Queries.GetAllDocumentsQuery['allMdx']['nodes'][0]> = (data) => {
+  const { title, tail, summary } = data.pageContext.frontmatter;
+  return (
+    <>
+      <title>
+        {title} {tail ? tail : ''}
+      </title>
+      <meta name="author" content="Samson Iyanda"></meta>
+      <meta name="description" content={summary}></meta>
+    </>
+  );
+};
+
 export default DocMarkUp;