From 3e3aadf32f1ba41a1829b07419abe1733dc542ff Mon Sep 17 00:00:00 2001 From: Thomas Kunwar Date: Fri, 16 Dec 2022 18:30:44 +0545 Subject: [PATCH] Update theme to 0.2.x (#402) --- gatsby-browser.js | 2 - gatsby-config.js | 3 +- package.json | 2 +- .../Documentation/Layout/SearchForm/index.tsx | 72 +++ .../Documentation/Layout/styles.module.css | 66 ++- .../components/LayoutFooter}/index.tsx | 4 +- .../components/LayoutHeader/Alert/index.tsx | 16 + .../LayoutHeader}/Alert/styles.module.css | 4 + .../components/LayoutHeader}/index.tsx | 46 +- .../LayoutHeader}/styles.module.css | 15 +- .../MainLayout}/DefaultSEO/index.tsx | 0 .../components/MainLayout}/base.css | 12 +- .../components/MainLayout}/fonts.css | 0 .../components/MainLayout/index.tsx | 17 + .../components/MainLayout}/styles.module.css | 0 .../components/MainLayout}/utils.ts | 6 +- .../components/Page/index.tsx | 3 - src/components/atoms/GithubLine/index.tsx | 3 +- src/components/layouts/MainLayout/index.tsx | 4 +- .../layouts/WrappedLayout/index.tsx | 18 - .../molecules/HamburgerMenu/styles.module.css | 47 +- src/components/molecules/Video/index.js | 6 +- src/components/organisms/Page/index.tsx | 53 -- .../organisms/SiteHeader/Alert/index.tsx | 22 - .../organisms/SubscribeSection/Form/index.tsx | 64 --- .../SubscribeSection/Form/styles.module.css | 53 -- .../organisms/SubscribeSection/glyph-1.svg | 20 - .../organisms/SubscribeSection/glyph-2.svg | 20 - .../organisms/SubscribeSection/index.tsx | 29 -- .../SubscribeSection/styles.module.css | 67 --- .../SwitchableMode/Provider/index.js | 20 +- .../organisms/SwitchableMode/Switch/index.js | 6 +- .../Documentation/Layout/SearchForm/index.tsx | 60 --- .../Layout/SearchForm/styles.module.css | 53 -- .../Layout/SidebarMenu/cml_bw_logo.svg | 7 - .../Layout/SidebarMenu/cml_logo.svg | 23 - .../Layout/SidebarMenu/external-link-icon.svg | 1 - .../Layout/SidebarMenu/house.svg | 1 - .../Layout/SidebarMenu/index.tsx | 234 --------- .../Layout/SidebarMenu/studio_gray_icon.svg | 457 ------------------ .../Layout/SidebarMenu/studio_icon.svg | 28 -- .../Layout/SidebarMenu/styles.module.css | 118 ----- .../pages/Documentation/Layout/index.tsx | 69 --- .../pages/Home/HeroSection/index.tsx | 2 +- .../pages/Home/UseCasesSection/index.tsx | 2 +- src/components/pages/Home/index.tsx | 4 +- src/components/pages/NotFound/index.tsx | 2 +- .../pages/NotFound/styles.module.css | 20 +- src/gatsby-plugin-theme-ui/components.js | 5 +- src/gatsby-plugin-theme-ui/index.js | 7 +- src/pages/404.tsx | 8 +- src/pages/index.tsx | 11 +- src/styles/global.css | 3 - tailwind.config.js | 24 +- yarn.lock | 99 +--- 55 files changed, 303 insertions(+), 1635 deletions(-) delete mode 100644 gatsby-browser.js create mode 100644 src/@dvcorg/gatsby-theme-iterative/components/Documentation/Layout/SearchForm/index.tsx rename src/{components/pages => @dvcorg/gatsby-theme-iterative/components}/Documentation/Layout/styles.module.css (68%) rename src/{components/organisms/SiteFooter => @dvcorg/gatsby-theme-iterative/components/LayoutFooter}/index.tsx (97%) create mode 100644 src/@dvcorg/gatsby-theme-iterative/components/LayoutHeader/Alert/index.tsx rename src/{components/organisms/SiteHeader => @dvcorg/gatsby-theme-iterative/components/LayoutHeader}/Alert/styles.module.css (95%) rename src/{components/organisms/SiteHeader => @dvcorg/gatsby-theme-iterative/components/LayoutHeader}/index.tsx (90%) rename src/{components/organisms/SiteHeader => @dvcorg/gatsby-theme-iterative/components/LayoutHeader}/styles.module.css (61%) rename src/{components/organisms/Page => @dvcorg/gatsby-theme-iterative/components/MainLayout}/DefaultSEO/index.tsx (100%) rename src/{components/organisms/Page => @dvcorg/gatsby-theme-iterative/components/MainLayout}/base.css (93%) rename src/{components/organisms/Page => @dvcorg/gatsby-theme-iterative/components/MainLayout}/fonts.css (100%) create mode 100644 src/@dvcorg/gatsby-theme-iterative/components/MainLayout/index.tsx rename src/{components/organisms/Page => @dvcorg/gatsby-theme-iterative/components/MainLayout}/styles.module.css (100%) rename src/{components/organisms/Page => @dvcorg/gatsby-theme-iterative/components/MainLayout}/utils.ts (78%) delete mode 100644 src/@dvcorg/gatsby-theme-iterative/components/Page/index.tsx delete mode 100644 src/components/layouts/WrappedLayout/index.tsx delete mode 100644 src/components/organisms/Page/index.tsx delete mode 100644 src/components/organisms/SiteHeader/Alert/index.tsx delete mode 100644 src/components/organisms/SubscribeSection/Form/index.tsx delete mode 100644 src/components/organisms/SubscribeSection/Form/styles.module.css delete mode 100644 src/components/organisms/SubscribeSection/glyph-1.svg delete mode 100644 src/components/organisms/SubscribeSection/glyph-2.svg delete mode 100644 src/components/organisms/SubscribeSection/index.tsx delete mode 100644 src/components/organisms/SubscribeSection/styles.module.css delete mode 100644 src/components/pages/Documentation/Layout/SearchForm/index.tsx delete mode 100644 src/components/pages/Documentation/Layout/SearchForm/styles.module.css delete mode 100644 src/components/pages/Documentation/Layout/SidebarMenu/cml_bw_logo.svg delete mode 100644 src/components/pages/Documentation/Layout/SidebarMenu/cml_logo.svg delete mode 100644 src/components/pages/Documentation/Layout/SidebarMenu/external-link-icon.svg delete mode 100644 src/components/pages/Documentation/Layout/SidebarMenu/house.svg delete mode 100644 src/components/pages/Documentation/Layout/SidebarMenu/index.tsx delete mode 100644 src/components/pages/Documentation/Layout/SidebarMenu/studio_gray_icon.svg delete mode 100644 src/components/pages/Documentation/Layout/SidebarMenu/studio_icon.svg delete mode 100644 src/components/pages/Documentation/Layout/SidebarMenu/styles.module.css delete mode 100644 src/components/pages/Documentation/Layout/index.tsx delete mode 100644 src/styles/global.css diff --git a/gatsby-browser.js b/gatsby-browser.js deleted file mode 100644 index 6408214f..00000000 --- a/gatsby-browser.js +++ /dev/null @@ -1,2 +0,0 @@ -/* eslint-env node */ -require('./src/styles/global.css') diff --git a/gatsby-config.js b/gatsby-config.js index 569cb893..cce9aa69 100644 --- a/gatsby-config.js +++ b/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 } }, { diff --git a/package.json b/package.json index 6a533505..bdcfdcd7 100644 --- a/package.json +++ b/package.json @@ -39,7 +39,7 @@ "node": "^16 || ^18" }, "dependencies": { - "@dvcorg/gatsby-theme-iterative": "^0.1.23", + "@dvcorg/gatsby-theme-iterative": "^0.2.7", "@dvcorg/websites-server": "^0.0.16", "@emotion/react": "^11.10.4", "@emotion/styled": "^11.10.4", diff --git a/src/@dvcorg/gatsby-theme-iterative/components/Documentation/Layout/SearchForm/index.tsx b/src/@dvcorg/gatsby-theme-iterative/components/Documentation/Layout/SearchForm/index.tsx new file mode 100644 index 00000000..75084aeb --- /dev/null +++ b/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(false) + useEffect(() => { + console.log({ window, docSearch: window?.docsearch }) + if (window) { + if (!window.docsearch) { + Promise.all([ + loadResource( + 'https://cdn.jsdelivr.net/npm/docsearch.js@2.6.2/dist/cdn/docsearch.min.css' + ), + loadResource( + 'https://cdn.jsdelivr.net/npm/docsearch.js@2.6.2/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 ( +
+
+ +
+
+ ) +} + +export default SearchForm diff --git a/src/components/pages/Documentation/Layout/styles.module.css b/src/@dvcorg/gatsby-theme-iterative/components/Documentation/Layout/styles.module.css similarity index 68% rename from src/components/pages/Documentation/Layout/styles.module.css rename to src/@dvcorg/gatsby-theme-iterative/components/Documentation/Layout/styles.module.css index 0f63d389..1cade78b 100644 --- a/src/components/pages/Documentation/Layout/styles.module.css +++ b/src/@dvcorg/gatsby-theme-iterative/components/Documentation/Layout/styles.module.css @@ -1,11 +1,13 @@ .container { display: flex; flex-direction: row; + flex: 1; z-index: 2; + height: 100%; font-family: var(--font-brandon); -webkit-font-smoothing: antialiased; - @media (--sm-scr) { + @media screen(xsMax) { padding: 0 15px; } @@ -21,24 +23,16 @@ pointer-events: none; background-color: var(--color-light-blue); - @media (--sm-scr) { + @media screen(xsMax) { display: none; } } - - h5 { - font: inherit; - vertical-align: baseline; - margin: 0; - border: 0; - font-size: 14px; - } } .backdrop { display: none; - @media (--sm-scr) { + @media screen(xsMax) { display: block; opacity: 0; pointer-events: none; @@ -60,38 +54,41 @@ } .side { - flex-shrink: 0; - width: 280px; - background-color: var(--color-light-blue); + @apply flex flex-col w-72 + sm:py-0; - @media (--sm-scr) { - position: fixed; - display: block; - z-index: 2; - top: var(--layout-header-height); - bottom: 0; - left: 0; - right: 60px; - box-shadow: rgb(0 0 0 / 14%) 0 0 4px, rgb(0 0 0 / 28%) 0 4px 8px; - transform: translateX(-110%); - transition: transform 0.35s ease; + background-color: var(--color-light-blue); + flex-shrink: 0; + position: fixed; + z-index: 2; + bottom: 0; + left: 0; + box-shadow: rgb(0 0 0 / 14%) 0 0 4px, rgb(0 0 0 / 28%) 0 4px 8px; + transform: translateX(-110%); + transition: transform 0.35s ease; - &.opened { - transform: translateX(0); - } + &.opened { + transform: translateX(0); + } - @media (--sm-scr) { - top: var(--layout-header-height-mobile); - } + @media screen(xs) { + position: static; + transform: none; + box-shadow: none; + width: 280px; } } +.innerSidebar { + @apply flex flex-col h-screen pt-14 xs:sticky xs:h-auto xs:max-h-screen xs:top-0 z-20; +} + .sideToggle { display: none; justify-content: center; align-items: center; position: fixed; - z-index: 2; + z-index: 3; left: 8px; bottom: 20px; width: 45px; @@ -106,7 +103,7 @@ transform: translateX(calc(100vw - 60px)); } - @media (--sm-scr) { + @media screen(xsMax) { display: flex; > * { @@ -120,8 +117,9 @@ flex-direction: row; max-width: calc(100% - 280px); background-color: #fff; + flex: 1; - @media (--sm-scr) { + @media screen(xsMax) { max-width: 100%; } } diff --git a/src/components/organisms/SiteFooter/index.tsx b/src/@dvcorg/gatsby-theme-iterative/components/LayoutFooter/index.tsx similarity index 97% rename from src/components/organisms/SiteFooter/index.tsx rename to src/@dvcorg/gatsby-theme-iterative/components/LayoutFooter/index.tsx index 8adc7f54..22ad5406 100644 --- a/src/components/organisms/SiteFooter/index.tsx +++ b/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' diff --git a/src/@dvcorg/gatsby-theme-iterative/components/LayoutHeader/Alert/index.tsx b/src/@dvcorg/gatsby-theme-iterative/components/LayoutHeader/Alert/index.tsx new file mode 100644 index 00000000..294f2515 --- /dev/null +++ b/src/@dvcorg/gatsby-theme-iterative/components/LayoutHeader/Alert/index.tsx @@ -0,0 +1,16 @@ +import React from 'react' +import { AlertContent } from '@dvcorg/gatsby-theme-iterative/src/components/LayoutHeader/Alert/content' + +import * as styles from './styles.module.css' + +const Alert: React.FC = () => ( +
+
+

+ +

+
+
+) + +export default Alert diff --git a/src/components/organisms/SiteHeader/Alert/styles.module.css b/src/@dvcorg/gatsby-theme-iterative/components/LayoutHeader/Alert/styles.module.css similarity index 95% rename from src/components/organisms/SiteHeader/Alert/styles.module.css rename to src/@dvcorg/gatsby-theme-iterative/components/LayoutHeader/Alert/styles.module.css index e971c6d6..a730d149 100644 --- a/src/components/organisms/SiteHeader/Alert/styles.module.css +++ b/src/@dvcorg/gatsby-theme-iterative/components/LayoutHeader/Alert/styles.module.css @@ -48,5 +48,9 @@ color: rgba(58 45 76 / 70%); opacity: 0.7; } + + &:visited { + color: inherit; + } } } diff --git a/src/components/organisms/SiteHeader/index.tsx b/src/@dvcorg/gatsby-theme-iterative/components/LayoutHeader/index.tsx similarity index 90% rename from src/components/organisms/SiteHeader/index.tsx rename to src/@dvcorg/gatsby-theme-iterative/components/LayoutHeader/index.tsx index e7a4e784..05a701c9 100644 --- a/src/components/organisms/SiteHeader/index.tsx +++ b/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 = ({ isMain }) => { variant="layout.Header" className={isMain ? '' : styles.headerForDoc} sx={ - isMain ? { backgroundColor: 'transparent' } : { position: 'sticky' } + isMain + ? { backgroundColor: 'transparent' } + : { position: 'fixed', width: '100%' } } > {isMain && } @@ -265,22 +267,22 @@ const Header: React.FC = ({ isMain }) => { + {!isMain && ( + <> + + + + )} - {!isMain && ( - <> - - - - )} ) } diff --git a/src/components/organisms/SiteHeader/styles.module.css b/src/@dvcorg/gatsby-theme-iterative/components/LayoutHeader/styles.module.css similarity index 61% rename from src/components/organisms/SiteHeader/styles.module.css rename to src/@dvcorg/gatsby-theme-iterative/components/LayoutHeader/styles.module.css index 36c25638..9fa315d6 100644 --- a/src/components/organisms/SiteHeader/styles.module.css +++ b/src/@dvcorg/gatsby-theme-iterative/components/LayoutHeader/styles.module.css @@ -1,22 +1,27 @@ +html { + @apply scroll-pt-14; +} + .headerForDoc { top: 0; 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; } } } diff --git a/src/components/organisms/Page/DefaultSEO/index.tsx b/src/@dvcorg/gatsby-theme-iterative/components/MainLayout/DefaultSEO/index.tsx similarity index 100% rename from src/components/organisms/Page/DefaultSEO/index.tsx rename to src/@dvcorg/gatsby-theme-iterative/components/MainLayout/DefaultSEO/index.tsx diff --git a/src/components/organisms/Page/base.css b/src/@dvcorg/gatsby-theme-iterative/components/MainLayout/base.css similarity index 93% rename from src/components/organisms/Page/base.css rename to src/@dvcorg/gatsby-theme-iterative/components/MainLayout/base.css index e4b377e2..6f124215 100644 --- a/src/components/organisms/Page/base.css +++ b/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; } @@ -92,3 +97,8 @@ body.user-is-tabbing .link-with-focus { * { text-size-adjust: none; } + +/* svg { + display: inline; + vertical-align: unset; +} */ diff --git a/src/components/organisms/Page/fonts.css b/src/@dvcorg/gatsby-theme-iterative/components/MainLayout/fonts.css similarity index 100% rename from src/components/organisms/Page/fonts.css rename to src/@dvcorg/gatsby-theme-iterative/components/MainLayout/fonts.css diff --git a/src/@dvcorg/gatsby-theme-iterative/components/MainLayout/index.tsx b/src/@dvcorg/gatsby-theme-iterative/components/MainLayout/index.tsx new file mode 100644 index 00000000..2c6073af --- /dev/null +++ b/src/@dvcorg/gatsby-theme-iterative/components/MainLayout/index.tsx @@ -0,0 +1,17 @@ +import React from 'react' +import MainLayout from '@dvcorg/gatsby-theme-iterative/src/components/MainLayout' + +import ModesProvider from '../../../../components/organisms/SwitchableMode/Provider' +import { PageProps } from 'gatsby' +export * from '@dvcorg/gatsby-theme-iterative/src/components/MainLayout' +const WrapMainLayout = ({ children, location, ...rest }: PageProps) => { + return ( + + + {children} + + + ) +} + +export default WrapMainLayout diff --git a/src/components/organisms/Page/styles.module.css b/src/@dvcorg/gatsby-theme-iterative/components/MainLayout/styles.module.css similarity index 100% rename from src/components/organisms/Page/styles.module.css rename to src/@dvcorg/gatsby-theme-iterative/components/MainLayout/styles.module.css diff --git a/src/components/organisms/Page/utils.ts b/src/@dvcorg/gatsby-theme-iterative/components/MainLayout/utils.ts similarity index 78% rename from src/components/organisms/Page/utils.ts rename to src/@dvcorg/gatsby-theme-iterative/components/MainLayout/utils.ts index aa50d091..10948218 100644 --- a/src/components/organisms/Page/utils.ts +++ b/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' diff --git a/src/@dvcorg/gatsby-theme-iterative/components/Page/index.tsx b/src/@dvcorg/gatsby-theme-iterative/components/Page/index.tsx deleted file mode 100644 index 6896fc65..00000000 --- a/src/@dvcorg/gatsby-theme-iterative/components/Page/index.tsx +++ /dev/null @@ -1,3 +0,0 @@ -import Page from '../../../../components/organisms/Page' - -export default Page diff --git a/src/components/atoms/GithubLine/index.tsx b/src/components/atoms/GithubLine/index.tsx index 08730a94..34be063e 100644 --- a/src/components/atoms/GithubLine/index.tsx +++ b/src/components/atoms/GithubLine/index.tsx @@ -27,6 +27,7 @@ const GithubLine: React.FC = () => { We’re on{' '} { GitHub {stars && ( - + diff --git a/src/components/layouts/MainLayout/index.tsx b/src/components/layouts/MainLayout/index.tsx index 6f36ac74..9f04c9b3 100644 --- a/src/components/layouts/MainLayout/index.tsx +++ b/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 }) => { diff --git a/src/components/layouts/WrappedLayout/index.tsx b/src/components/layouts/WrappedLayout/index.tsx deleted file mode 100644 index bf51ab5b..00000000 --- a/src/components/layouts/WrappedLayout/index.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react' - -import MainLayout from '../MainLayout' -import SiteHeader from '../../organisms/SiteHeader' -import SiteFooter from '../../organisms/SiteFooter' -import { IPageProps } from '../../organisms/Page' - -const WrappedLayout: React.FC = ({ children, ...restProps }) => { - return ( - <> - - {children} - - - ) -} - -export default WrappedLayout diff --git a/src/components/molecules/HamburgerMenu/styles.module.css b/src/components/molecules/HamburgerMenu/styles.module.css index c02416a3..c49b3e1d 100644 --- a/src/components/molecules/HamburgerMenu/styles.module.css +++ b/src/components/molecules/HamburgerMenu/styles.module.css @@ -3,8 +3,7 @@ } .wrapper { - display: none; - visibility: hidden; + display: block; padding: 12px 16px; position: fixed; z-index: 11; @@ -19,8 +18,9 @@ color: #fff; overflow-y: auto; - @media (--sm-scr) { - display: block; + @media screen(sm) { + display: none; + visibility: hidden; } &.opened { @@ -34,14 +34,14 @@ } .toggleButton { - @mixin hover; + @apply hover; position: fixed; - display: none; - visibility: hidden; + display: flex; + visibility: visible; z-index: 999; right: 16px; - top: 12px; + top: 5px; padding: 0; border: none; width: 40px; @@ -65,9 +65,9 @@ background-color: #fff; } - @media (--sm-scr) { - display: flex; - visibility: visible; + @media screen(sm) { + display: none; + visibility: hidden; } } @@ -76,8 +76,8 @@ } .logo { - @mixin hover; - @mixin active; + @apply hover; + @apply active; width: 75px; height: 40px; @@ -87,8 +87,8 @@ } .company { - @mixin active; - @mixin hover; + @apply active; + @apply hover; font-size: 12px; line-height: 20px; @@ -129,9 +129,10 @@ } .sectionHeading { + @apply font-brandon; + display: block; padding: 15px 0; - font-family: var(--font-brandon); font-weight: 400; font-size: 13px; line-height: 20px; @@ -141,9 +142,9 @@ } a.sectionHeading { - @mixin hover; - @mixin active; - @mixin focus; + @apply hover; + @apply active; + @apply focus; } .subSections { @@ -160,8 +161,8 @@ a.sectionHeading { } .subSectionLink { - @mixin hover; - @mixin active; + @apply hover; + @apply active; display: flex; flex-direction: column; @@ -213,14 +214,14 @@ a.sectionHeading { } .linkButton { - @mixin active; + @apply active; + @apply font-brandon; display: block; margin-top: 15px; height: 38px; border-radius: 4px; background-color: #fff; - font-family: var(--font-brandon); font-size: 16px; line-height: 38px; text-align: center; diff --git a/src/components/molecules/Video/index.js b/src/components/molecules/Video/index.js index 8fbcab16..2ecc6a11 100644 --- a/src/components/molecules/Video/index.js +++ b/src/components/molecules/Video/index.js @@ -1,6 +1,6 @@ -import React, { useContext, useEffect, useRef } from 'react' +import React, { useEffect, useRef } from 'react' import useRehydrated from '../../../utils/use-rehydrated' -import { ModeContext } from '../../organisms/SwitchableMode/Provider' +import { useMode } from '../../organisms/SwitchableMode/Provider' import { Box } from '@theme-ui/components' const Video = ({ @@ -16,7 +16,7 @@ const Video = ({ loading = 'lazy', ...rest }) => { - const { currentMode: contextMode } = useContext(ModeContext) + const { currentMode: contextMode } = useMode() const videoRef = useRef() const videoElement = videoRef.current diff --git a/src/components/organisms/Page/index.tsx b/src/components/organisms/Page/index.tsx deleted file mode 100644 index 39c79799..00000000 --- a/src/components/organisms/Page/index.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import React from 'react' - -import MainLayout from '../../layouts/MainLayout' -import DefaultSEO from './DefaultSEO' -import DocumentationLayout from '../../pages/Documentation/Layout' -import ModesProvider from '../SwitchableMode/Provider' - -import { useRedirects, useAnchorNavigation, useSmoothScroll } from './utils' - -import './base.css' -import './fonts.css' -import WrappedLayout from '../../layouts/WrappedLayout' - -export interface IPageProps { - location: { - pathname: string - } - pageContext: { - is404: boolean - isDocs: boolean - pageInfo?: { - currentPage: number - nextPage?: string - } - } - children: React.ReactNode - enableSmoothScroll: boolean -} - -const Page: React.FC = props => { - let LayoutComponent = MainLayout - - useRedirects() - useAnchorNavigation() - useSmoothScroll(props.enableSmoothScroll) - - if (!props.pageContext.is404) { - if (props.pageContext.isDocs) { - LayoutComponent = DocumentationLayout - } - } else { - LayoutComponent = WrappedLayout - } - - return ( - - - - - ) -} - -export default Page diff --git a/src/components/organisms/SiteHeader/Alert/index.tsx b/src/components/organisms/SiteHeader/Alert/index.tsx deleted file mode 100644 index 7c14265c..00000000 --- a/src/components/organisms/SiteHeader/Alert/index.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import React from 'react' -import SmartLink from '../../../atoms/SmartLink' -import * as styles from './styles.module.css' - -const Alert: React.FC = () => ( -
-
- - 🚀 - {' '} -

- New Release!{' '} - - Git-backed Machine Learning Model Registry - {' '} - for all your model management needs. -

-
-
-) - -export default Alert diff --git a/src/components/organisms/SubscribeSection/Form/index.tsx b/src/components/organisms/SubscribeSection/Form/index.tsx deleted file mode 100644 index f94ae996..00000000 --- a/src/components/organisms/SubscribeSection/Form/index.tsx +++ /dev/null @@ -1,64 +0,0 @@ -import React, { EventHandler, SyntheticEvent, useCallback, useRef } from 'react' -import { nanoid } from 'nanoid' - -import { logEvent } from '@dvcorg/gatsby-theme-iterative/src/utils/front/plausible' - -import * as styles from './styles.module.css' - -const Form: React.FC = () => { - const hiddenInputRef = useRef(null) - const honeypotNameRef = useRef(nanoid()) - const sendGAEvent = useCallback>( - e => { - if (hiddenInputRef.current?.value) { - // It's a bot. - return e.preventDefault() - } - - logEvent('Subscribe Form') - }, - [hiddenInputRef?.current] - ) - return ( -
- - - {/*real people should not fill this in and expect good things - do not remove this or risk form bot signups*/} - - - -
- ) -} - -export default Form diff --git a/src/components/organisms/SubscribeSection/Form/styles.module.css b/src/components/organisms/SubscribeSection/Form/styles.module.css deleted file mode 100644 index 9249cfe3..00000000 --- a/src/components/organisms/SubscribeSection/Form/styles.module.css +++ /dev/null @@ -1,53 +0,0 @@ -.form { - width: 100%; - height: 100%; - border-radius: 8px; - background-color: #fff; - display: flex; - - @media (--xs-scr) { - flex-direction: column; - } -} - -.input { - font-family: var(--font-sans); - display: flex; - flex: 1; - padding: 16px; - border: none; - border-radius: 8px 0 0 8px; - font-size: 20px; - font-weight: 500; - - &:focus { - background: var(--color-light-blue); - } - - @media (--xs-scr) { - border-radius: 4px 4px 0 0; - } -} - -.button { - font-family: var(--font-sans); - width: 115px; - border: none; - border-radius: 0 8px 8px 0; - background-color: #e4fbff; - font-size: 20px; - font-weight: 500; - color: #13adc7; - cursor: pointer; - - &:hover { - background-color: #daf1f5; - } - - @media (--xs-scr) { - min-height: 60px; - width: 100%; - border-radius: 0 0 4px 4px; - justify-content: center; - } -} diff --git a/src/components/organisms/SubscribeSection/glyph-1.svg b/src/components/organisms/SubscribeSection/glyph-1.svg deleted file mode 100644 index bad8d31c..00000000 --- a/src/components/organisms/SubscribeSection/glyph-1.svg +++ /dev/null @@ -1,20 +0,0 @@ - - - - Glyphe 1 - Created with Sketch. - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/src/components/organisms/SubscribeSection/glyph-2.svg b/src/components/organisms/SubscribeSection/glyph-2.svg deleted file mode 100644 index 21bf2a59..00000000 --- a/src/components/organisms/SubscribeSection/glyph-2.svg +++ /dev/null @@ -1,20 +0,0 @@ - - - - Glyph 2 - Created with Sketch. - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/src/components/organisms/SubscribeSection/index.tsx b/src/components/organisms/SubscribeSection/index.tsx deleted file mode 100644 index fe067f39..00000000 --- a/src/components/organisms/SubscribeSection/index.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import React from 'react' -import cn from 'classnames' - -import SubscribeForm from './Form' -import { default as Glyph1Src } from './glyph-1.svg' -import { default as Glyph2Src } from './glyph-2.svg' - -import * as styles from './styles.module.css' - -const SubscribeSection: React.FC = () => ( -
- -
-
- Subscribe for updates. We won't spam you. -
-
- -
-
- -
-) - -export default SubscribeSection diff --git a/src/components/organisms/SubscribeSection/styles.module.css b/src/components/organisms/SubscribeSection/styles.module.css deleted file mode 100644 index 5aacac3e..00000000 --- a/src/components/organisms/SubscribeSection/styles.module.css +++ /dev/null @@ -1,67 +0,0 @@ -.wrapper { - box-sizing: border-box; - position: relative; - display: flex; - align-items: center; - min-height: 300px; - padding: 20px 15px 30px; - background-color: #13adc7; - - @media (--xs-scr) { - min-height: auto; - } -} - -.container { - margin: 0 auto; - width: 100%; - max-width: 1000px; -} - -.glyph { - position: absolute; - z-index: 0; - width: 158px; - height: auto; - object-fit: contain; - - @media (--md-scr) { - width: 110px; - } - - @media (--xs-scr) { - display: none; - } - - &.topleft { - top: -32px; - left: 28px; - } - - &.rigthbottom { - bottom: -60px; - right: 28px; - } -} - -.title { - @mixin h2-desktop; - - color: #fff; - margin: 0 auto; - text-align: center; -} - -.subscribeContainer { - margin: 15px auto 0; - max-width: 510px; - border-radius: 8px; - background-color: #fff; - - @media (--xs-scr) { - width: 100%; - margin: 0 auto; - margin-top: 20px; - min-height: auto; - } -} diff --git a/src/components/organisms/SwitchableMode/Provider/index.js b/src/components/organisms/SwitchableMode/Provider/index.js index cc97bb95..45b46e15 100644 --- a/src/components/organisms/SwitchableMode/Provider/index.js +++ b/src/components/organisms/SwitchableMode/Provider/index.js @@ -1,7 +1,11 @@ -import React, { useState, useEffect } from 'react' +import React, { useState, useEffect, useContext } from 'react' import { defaultModes } from '../common' -export const ModeContext = React.createContext(undefined) +export const ModeContext = React.createContext({ + currentMode: 'gitlab', + // eslint-disable-next-line @typescript-eslint/no-empty-function + updateMode: () => {} +}) const isRuntime = typeof window !== 'undefined' @@ -65,7 +69,7 @@ const ModeSwitchRadios = ({ name, idPrefix, modes, currentMode }) => { ) } -const ModeProvider = ({ +const ModesProvider = ({ name = 'site-mode-switcher-mode', idPrefix = 'site-mode-', modes = defaultModes, @@ -87,5 +91,13 @@ const ModeProvider = ({ ) } +export const useMode = () => { + const { currentMode, updateMode } = useContext(ModeContext) + return { + currentMode, + updateMode + } +} + export const modes = defaultModes -export default ModeProvider +export default ModesProvider diff --git a/src/components/organisms/SwitchableMode/Switch/index.js b/src/components/organisms/SwitchableMode/Switch/index.js index 06433181..79f5065d 100644 --- a/src/components/organisms/SwitchableMode/Switch/index.js +++ b/src/components/organisms/SwitchableMode/Switch/index.js @@ -1,12 +1,12 @@ -import React, { useContext } from 'react' +import React from 'react' import { Box } from '@theme-ui/components' import msx from '../styleHelpers.js' import { defaultIdPrefix } from '../common.js' import { clickOnKeyPress } from '../../../../utils/handlers' -import { ModeContext } from '../Provider/index.js' +import { useMode } from '../Provider/index.js' const ModeSwitchLabel = ({ idPrefix, mode, variant, className, children }) => { - const { updateMode } = useContext(ModeContext) + const { updateMode } = useMode() return ( void - } -} - -const SearchForm: React.FC = props => { - const [isLoaded, setLoaded] = useState(false) - - useEffect(() => { - Promise.all([ - loadResource( - 'https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css' - ), - loadResource( - 'https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js' - ) - ]).then(() => setLoaded(true)) - }, []) - - useEffect(() => { - if (isLoaded) { - window.docsearch && - window.docsearch({ - appId: '1O03WAGL0D', - apiKey: '3e17d424c7a90fede27b848fb01c0dc2', - indexName: 'cml', - inputSelector: '#doc-search', - debug: false // Set to `true` if you want to inspect the dropdown - }) - } - }, [isLoaded]) - - if (!isLoaded) { - return null - } - - return ( -
-
- -
-
- ) -} - -export default SearchForm diff --git a/src/components/pages/Documentation/Layout/SearchForm/styles.module.css b/src/components/pages/Documentation/Layout/SearchForm/styles.module.css deleted file mode 100644 index b0d1b481..00000000 --- a/src/components/pages/Documentation/Layout/SearchForm/styles.module.css +++ /dev/null @@ -1,53 +0,0 @@ -.searchArea { - box-sizing: border-box; - height: 60px; - padding-top: 20px; - background: rgb(238 244 248); - background: linear-gradient( - 180deg, - rgb(238 244 248 / 100%) 0%, - rgb(238 244 248 / 100%) 86%, - rgb(238 244 248 / 0%) 100% - ); - z-index: 10; - position: sticky; - top: var(--layout-header-height); - - @media (--sm-scr) { - position: relative; - padding: 15px 20px 0; - top: 0; - } - - input { - height: 40px; - } - - :global(.algolia-autocomplete .ds-dropdown-menu) { - margin-top: -5px; - } -} - -.container { - width: 100%; - height: 100%; - display: flex; -} - -.input { - box-sizing: border-box; - display: flex; - flex: 1; - width: 240px; - height: 100%; - padding-left: 48px; - padding-right: 24px; - border: solid 1px var(--color-lighter-blue); - border-radius: 200px; - background-color: #fff; - background-image: url("/img/search.svg"); - background-repeat: no-repeat; - background-position: 15px center; - font-size: 16px; - font-weight: 500; -} diff --git a/src/components/pages/Documentation/Layout/SidebarMenu/cml_bw_logo.svg b/src/components/pages/Documentation/Layout/SidebarMenu/cml_bw_logo.svg deleted file mode 100644 index 459ee2be..00000000 --- a/src/components/pages/Documentation/Layout/SidebarMenu/cml_bw_logo.svg +++ /dev/null @@ -1,7 +0,0 @@ - -image/svg+xml - - - diff --git a/src/components/pages/Documentation/Layout/SidebarMenu/cml_logo.svg b/src/components/pages/Documentation/Layout/SidebarMenu/cml_logo.svg deleted file mode 100644 index 40dd5f85..00000000 --- a/src/components/pages/Documentation/Layout/SidebarMenu/cml_logo.svg +++ /dev/null @@ -1,23 +0,0 @@ - - - - - - - - diff --git a/src/components/pages/Documentation/Layout/SidebarMenu/external-link-icon.svg b/src/components/pages/Documentation/Layout/SidebarMenu/external-link-icon.svg deleted file mode 100644 index a6c4bbd0..00000000 --- a/src/components/pages/Documentation/Layout/SidebarMenu/external-link-icon.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/src/components/pages/Documentation/Layout/SidebarMenu/house.svg b/src/components/pages/Documentation/Layout/SidebarMenu/house.svg deleted file mode 100644 index a24454c0..00000000 --- a/src/components/pages/Documentation/Layout/SidebarMenu/house.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/src/components/pages/Documentation/Layout/SidebarMenu/index.tsx b/src/components/pages/Documentation/Layout/SidebarMenu/index.tsx deleted file mode 100644 index ec22bb29..00000000 --- a/src/components/pages/Documentation/Layout/SidebarMenu/index.tsx +++ /dev/null @@ -1,234 +0,0 @@ -import React, { useEffect, useRef, useState, SyntheticEvent } from 'react' -import { useLocation } from '@reach/router' -import cn from 'classnames' -import { Collapse } from 'react-collapse' -import PerfectScrollbar from 'perfect-scrollbar' -import includes from 'lodash/includes' - -import Link from '../../../../atoms/Link' -import { ReactComponent as ExternalLinkIcon } from './external-link-icon.svg' -import { ReactComponent as HouseIcon } from './house.svg' -import { ReactComponent as CMLIcon } from './cml_bw_logo.svg' -import { ReactComponent as StudioIcon } from './studio_gray_icon.svg' - -import { - structure, - getParentsListFromPath, - getPathWithSource -} from '../../../../../utils/shared/sidebar' - -import 'perfect-scrollbar/css/perfect-scrollbar.css' -import * as styles from './styles.module.css' - -// A map for optional special icons that can be used in menu items -// Use the key string here as the "icon" field in sidebar.json -const ICONS: { [key: string]: React.FC<{ className?: string }> } = { - house: HouseIcon, - cml: CMLIcon, - studio: StudioIcon -} - -interface ISidebarMenuItemProps { - children?: Array<{ label: string; path: string; source: boolean | string }> - label: string - path: string - source: boolean | string - onClick: (isLeafItemClicked: boolean) => void - activePaths?: Array - type?: string - style?: string - icon?: string -} - -const SidebarMenuItem: React.FC = ({ - children, - label, - path, - activePaths, - onClick, - style, - icon, - type -}) => { - const [isExpanded, setIsExpanded] = useState( - activePaths && includes(activePaths, path) - ) - - useEffect(() => { - setIsExpanded(activePaths && includes(activePaths, path)) - }, [activePaths]) - - const isRootParent = - activePaths && activePaths.length > 1 && activePaths[0] === path - - const isLeafItem = children === undefined || children.length === 0 - - const currentLevelOnClick = ( - event: SyntheticEvent - ): void => { - if (event.currentTarget.getAttribute('aria-current') === 'page') { - event.preventDefault() - setIsExpanded(!isExpanded) - } - onClick(isLeafItem) - } - - const bulletIconClick = (event: SyntheticEvent): void => { - event.preventDefault() - setIsExpanded(!isExpanded) - } - - // Fetch a special icon if one is defined - const IconComponent = icon && ICONS[icon] - const iconElement = IconComponent ? ( - - ) : null - - const className = cn( - styles.sectionLink, - isExpanded && styles.active, - isRootParent && 'docSearch-lvl0', - 'link-with-focus', - style && styles[style] - ) - - const bulletIconClassName = cn( - styles.sidebarDefaultBullet, - isExpanded && styles.active, - isLeafItem && styles.sidebarLeafBullet - ) - - const bulletIconJSX = isLeafItem ? ( - - ) : ( - - ) - - const parentElement = - type === 'external' ? ( - - {iconElement ? ( - iconElement - ) : ( - - )} - {label} - - ) : ( - - {iconElement ? iconElement : bulletIconJSX} - {label} - - ) - - return ( - <> - {parentElement} - {children && ( - - )} - - ) -} - -interface ISidebarMenuProps { - currentPath: string - onClick: (isLeafItemClicked: boolean) => void -} - -const SidebarMenu: React.FC = ({ currentPath, onClick }) => { - const location = useLocation() - const rootRef = useRef(null) - const psRef = useRef(undefined) - const [isScrollHidden, setIsScrollHidden] = useState(false) - const activePaths = currentPath && getParentsListFromPath(currentPath) - - const scrollToActiveItem = (): void => { - const node = document.getElementById(currentPath) - const parent = rootRef.current - - setIsScrollHidden(true) - setTimeout(() => { - if (node && parent) { - psRef.current?.update() - - const parentHeight = parent.clientHeight - const parentScroll = parent.scrollTop - const nodeOffset = node.offsetTop - const nodeHeight = node.clientHeight - const scrollOffset = nodeOffset - parentHeight + nodeHeight - - if ( - parentScroll > nodeOffset + nodeHeight || - parentScroll + parentHeight < nodeOffset - ) { - parent.scrollTop = scrollOffset - } - } - - setIsScrollHidden(false) - }, 400) - } - - useEffect(() => { - if (!psRef.current && rootRef.current) { - psRef.current = new PerfectScrollbar(rootRef.current, { - wheelPropagation: true - }) - } - - scrollToActiveItem() - - return (): void => { - psRef.current?.destroy() - psRef.current = undefined - } - }, []) - useEffect(scrollToActiveItem, [location.pathname]) - - return ( -
-
-
- {structure.map(item => ( - - ))} -
-
-
- ) -} - -export default SidebarMenu diff --git a/src/components/pages/Documentation/Layout/SidebarMenu/studio_gray_icon.svg b/src/components/pages/Documentation/Layout/SidebarMenu/studio_gray_icon.svg deleted file mode 100644 index 3cad3360..00000000 --- a/src/components/pages/Documentation/Layout/SidebarMenu/studio_gray_icon.svg +++ /dev/null @@ -1,457 +0,0 @@ - - - - - - image/svg+xml - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/components/pages/Documentation/Layout/SidebarMenu/studio_icon.svg b/src/components/pages/Documentation/Layout/SidebarMenu/studio_icon.svg deleted file mode 100644 index af633ed0..00000000 --- a/src/components/pages/Documentation/Layout/SidebarMenu/studio_icon.svg +++ /dev/null @@ -1,28 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/components/pages/Documentation/Layout/SidebarMenu/styles.module.css b/src/components/pages/Documentation/Layout/SidebarMenu/styles.module.css deleted file mode 100644 index 4ee1e495..00000000 --- a/src/components/pages/Documentation/Layout/SidebarMenu/styles.module.css +++ /dev/null @@ -1,118 +0,0 @@ -.menu { - position: sticky; - top: calc(var(--layout-header-height) + 60px); - height: calc(100vh - var(--layout-header-height) - 60px); - overflow-y: hidden; - -webkit-overflow-scrolling: touch; - - &.isScrollHidden { - .ps__rail-y { - opacity: 0; - overflow: hidden; - } - } - - @media (--md-scr) { - position: relative; - top: 0; - height: calc(100% - 60px); - padding-left: 20px; - } - - :global(.ReactCollapse--collapse) { - transition: height 500ms; - padding-left: 10px; - } -} - -.sections { - min-width: 280px; - margin-bottom: 25px; - margin-top: 10px; - - @media (--sm-scr) { - min-width: auto; - } -} - -.sectionLinks { - @media (--sm-scr) { - position: relative; - } -} - -.sectionLink { - display: block; - position: relative; - min-height: 26px; - margin: 0; - padding: 0 0 5px 15px; - font-size: 18px; - line-height: 26px; - font-weight: 400; - text-decoration: none; - color: var(--color-gray-light); - - &:hover { - color: #3c3937; - - @media (--sm-scr) { - color: var(--color-gray-light); - } - } - - &.active { - color: var(--color-gray-hover); - - .sidebarDefaultBullet { - animation: rotateIcon 0.5s forwards; - } - } -} - -@keyframes rotateIcon { - 100% { - transform: rotate(90deg); - } -} - -.footer { - margin-top: 30px; - padding-bottom: 30px; -} - -.specialIcon { - color: var(--color-gray-light); - position: absolute; - width: 0.65rem; - height: 0.65rem; - top: 0.5rem; - left: -0.08rem; -} - -.sidebarDefaultBullet { - content: ""; - position: absolute; - left: 0; - top: 9px; - display: block; - border: none; - height: 8px; - width: 8px; - background: url("/img/triangle_dark.svg") no-repeat center center; - transition: 0.5s all; - - &:focus { - outline-color: var(--color-gray-light); - outline-offset: 0; - } - - &:hover { - transform: scale(1.5); - } - - &.sidebarLeafBullet { - background: url("/img/default_bullet_dark.svg") no-repeat center center; - transform: unset; - } -} diff --git a/src/components/pages/Documentation/Layout/index.tsx b/src/components/pages/Documentation/Layout/index.tsx deleted file mode 100644 index 09911407..00000000 --- a/src/components/pages/Documentation/Layout/index.tsx +++ /dev/null @@ -1,69 +0,0 @@ -import React, { useCallback, useState } from 'react' -import cn from 'classnames' - -import MainLayout, { - LayoutComponent, - LayoutModifiers -} from '../../../layouts/MainLayout' -import LayoutWidthContainer from '../../../atoms/LayoutWidthContainer' -import HamburgerIcon from '../../../molecules/HamburgerIcon' -import SearchForm from './SearchForm' -import SidebarMenu from './SidebarMenu' -import { matchMedia } from '../../../../utils/front/breakpoints' -import SiteHeader from '../../../organisms/SiteHeader' -import SiteFooter from '../../../organisms/SiteFooter' - -import * as styles from './styles.module.css' - -const Layout: LayoutComponent = ({ children, ...restProps }) => { - const [isMenuOpen, setIsMenuOpen] = useState(false) - const { - location: { pathname } - } = restProps - - const toggleMenu = useCallback(() => setIsMenuOpen(!isMenuOpen), [isMenuOpen]) - - return ( - <> - - - - {/* eslint-disable jsx-a11y/no-static-element-interactions */} - {/* eslint-disable jsx-a11y/click-events-have-key-events */} -
- {/* eslint-enable jsx-a11y/no-static-element-interactions */} - {/* eslint-enable jsx-a11y/click-events-have-key-events */} - - - -
- - { - if (matchMedia('--xs-scr') && isLeafItemClicked) { - toggleMenu() - } - }} - /> -
-
{children}
- - - - - ) -} - -export default Layout diff --git a/src/components/pages/Home/HeroSection/index.tsx b/src/components/pages/Home/HeroSection/index.tsx index 87e7e354..a2c3602a 100644 --- a/src/components/pages/Home/HeroSection/index.tsx +++ b/src/components/pages/Home/HeroSection/index.tsx @@ -2,7 +2,7 @@ import React, { forwardRef } from 'react' import { Box, Link, Heading } from '@theme-ui/components' -import Header from '../../../organisms/SiteHeader' +import Header from '../../../../@dvcorg/gatsby-theme-iterative/components/LayoutHeader' import GithubLine from '../../../atoms/GithubLine' import LandingVideo from '../../../molecules/Video/LandingVideo' import Collapser from '../../../atoms/Collapser' diff --git a/src/components/pages/Home/UseCasesSection/index.tsx b/src/components/pages/Home/UseCasesSection/index.tsx index 76a369f4..fce5bafe 100644 --- a/src/components/pages/Home/UseCasesSection/index.tsx +++ b/src/components/pages/Home/UseCasesSection/index.tsx @@ -15,7 +15,7 @@ import { } from "../../../../gatsby-plugin-theme-ui/components" const UseCasesSection: React.ForwardRefRenderFunction = () => ( -
+
{ return ( @@ -12,7 +12,7 @@ const Home: React.FC = () => { - + ) } diff --git a/src/components/pages/NotFound/index.tsx b/src/components/pages/NotFound/index.tsx index 2c8c06c0..c9775f8f 100644 --- a/src/components/pages/NotFound/index.tsx +++ b/src/components/pages/NotFound/index.tsx @@ -2,7 +2,7 @@ import React from 'react' import * as styles from './styles.module.css' -const NotFound: React.FC = () => ( +const NotFound = () => (

Not Found

diff --git a/src/components/pages/NotFound/styles.module.css b/src/components/pages/NotFound/styles.module.css index 20af5bd6..0a08acdc 100644 --- a/src/components/pages/NotFound/styles.module.css +++ b/src/components/pages/NotFound/styles.module.css @@ -7,24 +7,20 @@ } .title { - @media (--md-scr) { - @mixin h1-mobile; - } + @apply font-medium text-3xl; - @media (--lg-scr) { - @mixin h1-desktop; + @media screen(lg) { + @apply text-4xl; } } .content { - @media (--md-scr) { - @mixin text-mobile; + @apply text-lg; - padding: 0 15px; - text-align: center; - } + padding: 0 15px; + text-align: center; - @media (--lg-scr) { - @mixin text-desktop; + @media screen(lg) { + @apply text-xl; } } diff --git a/src/gatsby-plugin-theme-ui/components.js b/src/gatsby-plugin-theme-ui/components.js index 8e97ee13..09a08cb5 100644 --- a/src/gatsby-plugin-theme-ui/components.js +++ b/src/gatsby-plugin-theme-ui/components.js @@ -105,7 +105,10 @@ export const FullWidthBox = ({ export const HomeFeature = ({ children, heading, icon: Icon }) => { return ( - + {heading} diff --git a/src/gatsby-plugin-theme-ui/index.js b/src/gatsby-plugin-theme-ui/index.js index 10f6dade..4a4e51ca 100644 --- a/src/gatsby-plugin-theme-ui/index.js +++ b/src/gatsby-plugin-theme-ui/index.js @@ -423,6 +423,8 @@ export default { Footer: { variant: 'styles.invert', py: 1, + width: '100%', + zIndex: 5, Inner: { flexDirection: ['column', null, null, 'row'], flexWrap: ['nowrap', null, null, 'wrap'], @@ -931,7 +933,10 @@ export default { color: 'text', flex: 1, ':first-of-type': { textAlign: 'left' }, - ':last-of-type': { textAlign: 'right' } + ':last-of-type': { textAlign: 'right' }, + marginBlock: '1em', + fontWeight: 'bold', + fontSize: '1.17em' }, '&>svg': { minWidth: '60px', diff --git a/src/pages/404.tsx b/src/pages/404.tsx index 08cac495..fb2a8e5f 100644 --- a/src/pages/404.tsx +++ b/src/pages/404.tsx @@ -1,16 +1,18 @@ import React from 'react' +import MainLayout from '@dvcorg/gatsby-theme-iterative/src/components/MainLayout' +import { PageProps } from 'gatsby' import NotFound from '../components/pages/NotFound' import SEO from '../components/organisms/SEO' -const NotFoundPage: React.FC = () => ( - <> +const NotFoundPage = ({ location }: PageProps) => ( + - + ) export default NotFoundPage diff --git a/src/pages/index.tsx b/src/pages/index.tsx index dc0600d7..81e17067 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,7 +1,16 @@ +import SEO from '@dvcorg/gatsby-theme-iterative/src/components/SEO' import React from 'react' +import ModesProvider from '../components/organisms/SwitchableMode/Provider' import Home from '../components/pages/Home' -const HomePage: React.FC = () => +const HomePage: React.FC = () => { + return ( + + + + + ) +} export default HomePage diff --git a/src/styles/global.css b/src/styles/global.css deleted file mode 100644 index b5c61c95..00000000 --- a/src/styles/global.css +++ /dev/null @@ -1,3 +0,0 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; diff --git a/tailwind.config.js b/tailwind.config.js index 36504ab2..35918c4a 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,10 +1,20 @@ +const themeConfig = require('@dvcorg/gatsby-theme-iterative/tailwind.config') + module.exports = { - content: ['./src/**/*.{js,jsx,ts,tsx}'], - corePlugins: { - preflight: false - }, + ...themeConfig, theme: { - extend: {} - }, - plugins: [] + ...themeConfig.theme, + fontFamily: { + sans: ['DM Sans', 'Tahoma', 'Arial', 'sans-serif'], + mono: [ + 'SFMono-Regular', + 'Consolas', + 'Liberation Mono', + 'Menlo', + 'Courier', + 'monospace' + ], + brandon: ['BrandonGrotesque', 'Tahoma', 'Arial', 'sans-serif'] + } + } } diff --git a/yarn.lock b/yarn.lock index d19015b4..f1da4bdc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1125,80 +1125,7 @@ resolved "https://registry.yarnpkg.com/@csstools/selector-specificity/-/selector-specificity-2.0.2.tgz#1bfafe4b7ed0f3e4105837e056e0a89b108ebe36" integrity sha512-IkpVW/ehM1hWKln4fCA3NzJU8KwD+kIOvPZA4cqxoJHtE21CCzjyp+Kxbu0i5I4tBNOlXPL9mjwnWlL0VEG4Fg== -"@dvcorg/gatsby-theme-iterative@^0.1.23": - version "0.1.24" - resolved "https://registry.yarnpkg.com/@dvcorg/gatsby-theme-iterative/-/gatsby-theme-iterative-0.1.24.tgz#156264e5cb72e21c5dff1926306ff0121683c79e" - integrity sha512-NFmiq+tJ7UkrkGY+36KC9XkIqtaJFxiz19RN9Zq14pHA8ZKjSxBG+qqFyR+kxo7KcF9CIJivoSHNQ10YZzhiOg== - dependencies: - "@reach/portal" "^0.17.0" - "@reach/router" "^1.3.4" - "@reach/skip-nav" "^0.17.0" - "@svgr/webpack" "^6.2.1" - "@types/github-slugger" "^1.3.0" - "@types/isomorphic-fetch" "^0.0.36" - "@types/promise-polyfill" "^6.0.4" - "@types/react-collapse" "^5.0.1" - "@types/react-helmet" "^6.1.5" - "@types/unist" "^2.0.6" - autoprefixer "^10.4.4" - classnames "^2.3.1" - ease-component "^1.0.0" - gatsby-plugin-image "^2.14.1" - gatsby-plugin-manifest "^4.14.0" - gatsby-plugin-postcss "^5.14.0" - gatsby-plugin-react-helmet "^5.14.0" - gatsby-plugin-sharp "^4.14.1" - gatsby-plugin-sitemap "^5.14.0" - gatsby-plugin-svgr "^3.0.0-beta.0" - gatsby-remark-autolink-headers "^5.14.0" - gatsby-remark-copy-linked-files "^5.14.0" - gatsby-remark-embed-gist "^1.2.1" - gatsby-remark-embedder "^6.0.0" - gatsby-remark-external-links "^0.0.4" - gatsby-remark-images "^6.14.0" - gatsby-remark-prismjs "^6.14.0" - gatsby-remark-relative-images "^2.0.2" - gatsby-remark-responsive-iframe "^5.14.0" - gatsby-remark-smartypants "^5.14.0" - gatsby-source-filesystem "^4.14.0" - gatsby-transformer-remark "^5.14.0" - gatsby-transformer-sharp "^4.14.0" - github-markdown-css "^5.1.0" - github-slugger "^1.4.0" - hast-util-select "^5.0.1" - iso-url "^1.2.1" - isomorphic-fetch "^3.0.0" - lodash "^4.17.21" - nanoid "^4.0.0" - perfect-scrollbar "^1.5.5" - postcss "^8.4.14" - postcss-color-mod-function "^3.0.3" - postcss-custom-media "^8.0.0" - postcss-custom-properties "^12.1.6" - postcss-mixins "^9.0.2" - postcss-nested "^5.0.6" - prismjs "^1.28.0" - promise-polyfill "^8.2.3" - react-collapse "^5.1.1" - react-collapsible "^2.8.4" - react-helmet "^6.1.0" - react-use "^17.3.2" - rehype-parse "^8.0.4" - rehype-react "^7.0.4" - rehype-stringify "^9.0.3" - remark "^14.0.2" - remark-html "^15.0.1" - remark-parse "^10.0.1" - remark-preset-lint-recommended "^6.1.2" - reset-css "^5.0.1" - scroll "^3.0.1" - tailwindcss "^3.1.3" - title-case "^3.0.3" - unified "^10.1.2" - unist-util-remove-position "^4.0.1" - unist-util-visit "^4.1.0" - -"@dvcorg/gatsby-theme-iterative@^0.2.0": +"@dvcorg/gatsby-theme-iterative@^0.2.0", "@dvcorg/gatsby-theme-iterative@^0.2.7": version "0.2.7" resolved "https://registry.yarnpkg.com/@dvcorg/gatsby-theme-iterative/-/gatsby-theme-iterative-0.2.7.tgz#a6e71e099e1c4ab24b3627ff5b7ff7a122e48850" integrity sha512-icMrQCSHOG0xwPSlLY62S6LoNEtnuKJPxelRGE+cFdvqAH7GZtYy/yuZqdEYYCAIa1+nij5d2Iw0+PFgY2yqsQ== @@ -8167,15 +8094,6 @@ gatsby-remark-prismjs@6.24.0: parse-numeric-range "^1.2.0" unist-util-visit "^2.0.3" -gatsby-remark-prismjs@^6.14.0: - version "6.25.0" - resolved "https://registry.yarnpkg.com/gatsby-remark-prismjs/-/gatsby-remark-prismjs-6.25.0.tgz#62ac49623be52e6d67e8b95bb2de81b953af357c" - integrity sha512-O33q0aQjl3X8nVEFboQ0RKtnHLhhb0BU+ErK0D9MA6w4qSDRmDjFIWDY7nrsBP5QR80V1sjbjr4zBAAdOre/dA== - dependencies: - "@babel/runtime" "^7.15.4" - parse-numeric-range "^1.2.0" - unist-util-visit "^2.0.3" - gatsby-remark-relative-images@2.0.2, gatsby-remark-relative-images@^2.0.2: version "2.0.2" resolved "https://registry.yarnpkg.com/gatsby-remark-relative-images/-/gatsby-remark-relative-images-2.0.2.tgz#17a26ba15762670c8125a33ecd8316a0124cb06f" @@ -12751,7 +12669,7 @@ postcss-calc@^8.2.3: postcss-selector-parser "^6.0.9" postcss-value-parser "^4.2.0" -postcss-color-mod-function@3.0.3, postcss-color-mod-function@^3.0.3: +postcss-color-mod-function@3.0.3: version "3.0.3" resolved "https://registry.yarnpkg.com/postcss-color-mod-function/-/postcss-color-mod-function-3.0.3.tgz#816ba145ac11cc3cb6baa905a75a49f903e4d31d" integrity sha512-YP4VG+xufxaVtzV6ZmhEtc+/aTXH3d0JLpnYfxqTvwZPbJhWqp8bSY3nfNzNRFLgB4XSaBA82OE4VjOOKpCdVQ== @@ -12778,7 +12696,7 @@ postcss-convert-values@^5.1.2: browserslist "^4.20.3" postcss-value-parser "^4.2.0" -postcss-custom-media@8.0.2, postcss-custom-media@^8.0.0: +postcss-custom-media@8.0.2: version "8.0.2" resolved "https://registry.yarnpkg.com/postcss-custom-media/-/postcss-custom-media-8.0.2.tgz#c8f9637edf45fef761b014c024cee013f80529ea" integrity sha512-7yi25vDAoHAkbhAzX9dHx2yc6ntS4jQvejrNcC+csQJAXjj15e7VcWfMgLqBNAbOvqi5uIa9huOVwdHbf+sKqg== @@ -12792,13 +12710,6 @@ postcss-custom-properties@12.1.8: dependencies: postcss-value-parser "^4.2.0" -postcss-custom-properties@^12.1.6: - version "12.1.11" - resolved "https://registry.yarnpkg.com/postcss-custom-properties/-/postcss-custom-properties-12.1.11.tgz#d14bb9b3989ac4d40aaa0e110b43be67ac7845cf" - integrity sha512-0IDJYhgU8xDv1KY6+VgUwuQkVtmYzRwu+dMjnmdMafXYv86SWqfxkc7qdDvWS38vsjaEtv8e0vGOUQrAiMBLpQ== - dependencies: - postcss-value-parser "^4.2.0" - postcss-discard-comments@^5.1.2: version "5.1.2" resolved "https://registry.yarnpkg.com/postcss-discard-comments/-/postcss-discard-comments-5.1.2.tgz#8df5e81d2925af2780075840c1526f0660e53696" @@ -12923,7 +12834,7 @@ postcss-minify-selectors@^5.2.1: dependencies: postcss-selector-parser "^6.0.5" -postcss-mixins@9.0.4, postcss-mixins@^9.0.2: +postcss-mixins@9.0.4: version "9.0.4" resolved "https://registry.yarnpkg.com/postcss-mixins/-/postcss-mixins-9.0.4.tgz#75cd3cdb619a7e08c4c51ebb094db5f6d65b3831" integrity sha512-XVq5jwQJDRu5M1XGkdpgASqLk37OqkH4JCFDXl/Dn7janOJjCTEKL+36cnRVy7bMtoBzALfO7bV7nTIsFnUWLA== @@ -13197,7 +13108,7 @@ pretty-quick@^3.1.3: mri "^1.1.5" multimatch "^4.0.0" -prismjs@^1.28.0, prismjs@^1.29.0: +prismjs@^1.29.0: version "1.29.0" resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.29.0.tgz#f113555a8fa9b57c35e637bba27509dcf802dd12" integrity sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==