Update theme to 0.2.x

gatsby-browser.js

@@ -1,2 +1,7 @@
-/* eslint-env node */
-require('./src/styles/global.css')
+import React from 'react'
+
+import ModesProvider from './src/components/organisms/SwitchableMode/Provider'
+
+export const wrapRootElement = ({ element }) => (
+  <ModesProvider>{element}</ModesProvider>
+)

gatsby-config.js

@@ -26,8 +26,7 @@ const plugins = [
   {
     resolve: '@dvcorg/gatsby-theme-iterative',
     options: {
-      remark: true,
-      cssBase: path.join('src', 'components', 'organisms', 'Page', 'base.css')
+      glossaryInstanceName: false
     }
   },
   {

gatsby-ssr.js

@@ -0,0 +1,7 @@
+import React from 'react'
+
+import ModesProvider from './src/components/organisms/SwitchableMode/Provider'
+
+export const wrapRootElement = ({ element }) => (
+  <ModesProvider>{element}</ModesProvider>
+)

package.json

@@ -39,7 +39,7 @@
     "node": "^16 || ^18"
   },
   "dependencies": {
-    "@dvcorg/gatsby-theme-iterative": "^0.1.23",
+    "@dvcorg/gatsby-theme-iterative": "^0.2.6",
     "@dvcorg/websites-server": "^0.0.13",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",

src/@dvcorg/gatsby-theme-iterative/components/Documentation/Layout/SearchForm/index.tsx

@@ -0,0 +1,72 @@
+import React, { useEffect, useState } from 'react'
+import Promise from 'promise-polyfill'
+import { loadResource } from '@dvcorg/gatsby-theme-iterative/src/utils/front/resources'
+
+import * as styles from '@dvcorg/gatsby-theme-iterative/src/components/Documentation/Layout/SearchForm/styles.module.css'
+
+declare global {
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  interface Window {
+    docsearch?: (opts: object) => void
+  }
+}
+
+const apiKey = '3e17d424c7a90fede27b848fb01c0dc2'
+const appId = '1O03WAGL0D'
+const indexName = 'cml'
+
+const SearchForm: React.FC = props => {
+  const [searchAvailable, setSearchAvailable] = useState<boolean>(false)
+  useEffect(() => {
+    console.log({ window, docSearch: window?.docsearch })
+    if (window) {
+      if (!window.docsearch) {
+        Promise.all([
+          loadResource(
+            'https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn/docsearch.min.css'
+          ),
+          loadResource(
+            'https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn/docsearch.min.js'
+          )
+        ]).then(() => {
+          if (window.docsearch) {
+            window.docsearch({
+              appId,
+              apiKey,
+              indexName,
+              inputSelector: '#doc-search',
+              debug: false // Set to `true` if you want to inspect the dropdown
+            })
+            setSearchAvailable(true)
+          }
+        })
+      } else {
+        window.docsearch({
+          appId,
+          apiKey,
+          indexName,
+          inputSelector: '#doc-search',
+          debug: false // Set to `true` if you want to inspect the dropdown
+        })
+        setSearchAvailable(true)
+      }
+    }
+  }, [])
+
+  return (
+    <div className={styles.searchArea}>
+      <div className={styles.container}>
+        <input
+          className={styles.input}
+          type="text"
+          id="doc-search"
+          placeholder="Search docs"
+          disabled={!searchAvailable}
+          {...props}
+        />
+      </div>
+    </div>
+  )
+}
+
+export default SearchForm

src/components/organisms/SiteFooter/index.tsx → src/@dvcorg/gatsby-theme-iterative/components/LayoutFooter/index.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 
 import { Box, Container, Flex, Heading } from '@theme-ui/components'
-import SiteLogo from '../../molecules/SiteLogo'
-import SmartLink from '../../atoms/SmartLink'
+import SiteLogo from '../../../../components/molecules/SiteLogo'
+import SmartLink from '../../../../components/atoms/SmartLink'
 
 import { ReactComponent as DiscordIcon } from '@media/icons/discord.svg'
 import { ReactComponent as TwitterIcon } from '@media/icons/twitter.svg'

src/components/organisms/SiteHeader/Alert/index.tsx → src/@dvcorg/gatsby-theme-iterative/components/LayoutHeader/Alert/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import SmartLink from '../../../atoms/SmartLink'
+import SmartLink from '../../../../../components/atoms/SmartLink'
 import * as styles from './styles.module.css'
 
 const Alert: React.FC = () => (

src/components/organisms/SiteHeader/index.tsx → src/@dvcorg/gatsby-theme-iterative/components/LayoutHeader/index.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import { Flex, Box, Container, Button } from '@theme-ui/components'
-import InstallPopup from '../../molecules/InstallPopup'
-import SmartLink from '../../atoms/SmartLink'
-import SiteLogo from '../../molecules/SiteLogo'
+import InstallPopup from '../../../../components/molecules/InstallPopup'
+import SmartLink from '../../../../components/atoms/SmartLink'
+import SiteLogo from '../../../../components/molecules/SiteLogo'
 import Alert from './Alert'
 
 import { ReactComponent as DiscordIcon } from '@media/icons/discord.svg'
@@ -20,11 +20,11 @@ import {
   HamburgerMenu,
   HamburgerButton,
   useHamburgerMenu
-} from '../../molecules/HamburgerMenu'
+} from '../../../../components/molecules/HamburgerMenu'
 
 import * as styles from './styles.module.css'
-import usePopup from '../../../utils/hooks/usePopup'
-import onSelectKey from '../../../utils/onSelectKey'
+import usePopup from '../../../../utils/hooks/usePopup'
+import onSelectKey from '../../../../utils/onSelectKey'
 
 interface IHeaderProps {
   isMain?: boolean
@@ -155,7 +155,9 @@ const Header: React.FC<IHeaderProps> = ({ isMain }) => {
         variant="layout.Header"
         className={isMain ? '' : styles.headerForDoc}
         sx={
-          isMain ? { backgroundColor: 'transparent' } : { position: 'sticky' }
+          isMain
+            ? { backgroundColor: 'transparent' }
+            : { position: 'fixed', width: '100%' }
         }
       >
         {isMain && <Alert />}
@@ -265,22 +267,22 @@ const Header: React.FC<IHeaderProps> = ({ isMain }) => {
             </Flex>
           </Box>
         </Container>
+        {!isMain && (
+          <>
+            <HamburgerButton
+              opened={opened}
+              collapsed={collapsed}
+              handleClick={handleToggle}
+            />
+            <HamburgerMenu
+              opened={opened}
+              collapsed={collapsed}
+              handleToggle={handleToggle}
+              handleItemClick={handleItemClick}
+            />
+          </>
+        )}
       </Box>
-      {!isMain && (
-        <>
-          <HamburgerButton
-            opened={opened}
-            collapsed={collapsed}
-            handleClick={handleToggle}
-          />
-          <HamburgerMenu
-            opened={opened}
-            collapsed={collapsed}
-            handleToggle={handleToggle}
-            handleItemClick={handleItemClick}
-          />
-        </>
-      )}
     </>
   )
 }

src/components/organisms/SiteHeader/styles.module.css → src/@dvcorg/gatsby-theme-iterative/components/LayoutHeader/styles.module.css

@@ -3,20 +3,21 @@
   z-index: 7;
 
   & > div {
-    height: var(--layout-header-height);
     padding-top: 10px;
     padding-bottom: 10px;
 
-    @media (--sm-scr) {
-      height: var(--layout-header-height-mobile);
+    @media screen(sm) {
+      @apply h-14;
     }
 
     & > nav {
       width: 100%;
 
       & > div {
-        @media (--sm-scr) {
-          display: none;
+        display: none;
+
+        @media screen(sm) {
+          display: flex;
         }
       }
     }

src/components/organisms/Page/base.css → src/@dvcorg/gatsby-theme-iterative/components/MainLayout/base.css

@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 :root {
   --color-black: #24292e;
   --color-gray-light: #b0b8c5;
@@ -34,7 +38,8 @@ html {
 }
 
 body {
-  font-family: var(--font-sans);
+  @apply font-sans;
+
   font-weight: 400;
   line-height: 1.5;
 }

src/components/organisms/Page/utils.ts → src/@dvcorg/gatsby-theme-iterative/components/MainLayout/utils.ts

@@ -1,9 +1,9 @@
 import { useEffect } from 'react'
 import { useLocation } from '@reach/router'
 
-import { handleFrontRedirect } from '../../../utils/shared/redirects'
-import { scrollIntoLayout, getScrollNode } from '../../../utils/front/scroll'
-import safeQuerySelector from '../../../utils/front/safeQuerySelector'
+import { handleFrontRedirect } from '../../../../utils/shared/redirects'
+import { scrollIntoLayout, getScrollNode } from '../../../../utils/front/scroll'
+import safeQuerySelector from '../../../../utils/front/safeQuerySelector'
 
 import * as styles from './styles.module.css'
 

src/components/layouts/MainLayout/index.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react'
 
-import { IPageProps } from '../../organisms/Page'
+import { ILayoutComponentProps } from '@dvcorg/gatsby-theme-iterative/src/components/MainLayout'
 import { handleFirstTab } from '../../../utils/front/accessibility'
 
 import * as styles from './styles.module.css'
@@ -20,7 +20,7 @@ interface IMainLayoutProps {
 }
 
 export type LayoutComponent = React.FC<
-  IMainLayoutProps & IPageProps & ILayoutModifiable
+  IMainLayoutProps & ILayoutComponentProps & ILayoutModifiable
 >
 
 const MainLayout: LayoutComponent = ({ className, children }) => {