diff --git a/packages/example/src/pages/index.tsx b/packages/example/src/pages/index.tsx index 40a85f2d..937585cd 100644 --- a/packages/example/src/pages/index.tsx +++ b/packages/example/src/pages/index.tsx @@ -1,18 +1,39 @@ import React from 'react' -import { Link } from 'gatsby' +import cn from 'classnames' +import { PageProps } from 'gatsby' +import MainLayout from '@dvcorg/gatsby-theme-iterative/src/components/MainLayout' +import Link from '@dvcorg/gatsby-theme-iterative/src/components/Link' -export default function Home() { +export default function Home({ location }: PageProps) { return ( -
-

Gatsby Theme: Iterative

-

- Welcome to the documentation and example website for Iterative's - website engine! -

-

- This theme is primarily related to adding a documentation engine, which - you can see here! -

-
+ +
+

+ Gatsby Theme: Iterative +

+
+

+ Welcome to the documentation and example website for + Iterative's website engine! +

+

+ This theme is primarily related to adding a documentation engine, + which you can see here! +

+
+
+ ) } diff --git a/packages/example/tailwind.config.js b/packages/example/tailwind.config.js index c4e56a04..4ac5546b 100644 --- a/packages/example/tailwind.config.js +++ b/packages/example/tailwind.config.js @@ -1,7 +1,13 @@ +const themeConfig = require('@dvcorg/gatsby-theme-iterative/tailwind.config') + module.exports = { - content: ['./src/**/*.{js,jsx,ts,tsx}'], + ...themeConfig, + content: [...themeConfig.content, './src/**/*'], theme: { - extend: {} - }, - plugins: [] + ...themeConfig.theme, + fontFamily: { + sans: ['Tahoma', 'Arial', 'sans-serif'], + mono: ['Consolas', '"Liberation Mono"', 'Menlo', 'Courier', 'monospace'] + } + } } diff --git a/packages/gatsby-theme-iterative/config-defaults.js b/packages/gatsby-theme-iterative/config-defaults.js new file mode 100644 index 00000000..07a739e9 --- /dev/null +++ b/packages/gatsby-theme-iterative/config-defaults.js @@ -0,0 +1,8 @@ +const path = require('path') +module.exports = { + glossaryPath: path.resolve('content', 'docs', 'user-guide', 'basic-concepts'), + docsPath: path.resolve('content', 'docs'), + glossaryInstanceName: 'iterative-glossary', + docsInstanceName: 'iterative-docs', + argsLinkerPath: ['command-reference', `ref`, 'cli-reference'] +} diff --git a/packages/gatsby-theme-iterative/config/postcss/media.d.ts b/packages/gatsby-theme-iterative/config/postcss/media.d.ts deleted file mode 100644 index e0c9db09..00000000 --- a/packages/gatsby-theme-iterative/config/postcss/media.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -export const screens: Record -export const customMedia: Record diff --git a/packages/gatsby-theme-iterative/config/postcss/media.js b/packages/gatsby-theme-iterative/config/postcss/media.js deleted file mode 100644 index 1e30babc..00000000 --- a/packages/gatsby-theme-iterative/config/postcss/media.js +++ /dev/null @@ -1,19 +0,0 @@ -const screens = { - giant: 1200, - desktop: 1005, - tablet: 768, - phablet: 572, - phone: 376 -} - -module.exports = { - screens, - customMedia: { - '--xxs-scr': `(max-width: ${screens.phone}px)`, - '--xs-scr': `(max-width: ${screens.phablet}px)`, - '--sm-scr': `(max-width: ${screens.tablet}px)`, - '--md-scr': `(max-width: ${screens.desktop - 1}px)`, - '--lg-scr': `(min-width: ${screens.desktop}px)`, - '--xl-scr': `(min-width: ${screens.giant}px)` - } -} diff --git a/packages/gatsby-theme-iterative/config/postcss/mixins.js b/packages/gatsby-theme-iterative/config/postcss/mixins.js deleted file mode 100644 index 299dac94..00000000 --- a/packages/gatsby-theme-iterative/config/postcss/mixins.js +++ /dev/null @@ -1,115 +0,0 @@ -const { customMedia } = require('./media') - -const focus = { - '&:focus': { - color: 'var(--color-orange)' - } -} - -const active = { - '&:active': { - position: 'relative', - top: '1px', - left: '1px' - } -} - -const hover = { - '&:hover': { - opacity: 0.7 - } -} - -module.exports = { - mixins: { - 'h1-desktop': { - 'font-weight': '500', - 'font-size': '40px', - 'line-height': '60px' - }, - 'h1-mobile': { - 'font-weight': '500', - 'font-size': '30px', - 'line-height': '40px' - }, - 'h2-desktop': { - 'font-weight': '500', - 'font-size': '30px', - 'line-height': '40px' - }, - 'h2-mobile': { - 'font-weight': '500', - 'font-size': '25px', - 'line-height': '35px' - }, - 'h3-desktop': { - 'font-weight': '500', - 'font-size': '24px', - 'line-height': '34px' - }, - 'h3-mobile': { - 'font-weight': '500', - 'font-size': '20px', - 'line-height': '30px' - }, - 'text-desktop': { - 'font-size': '24px', - 'line-height': '34px' - }, - 'text-mobile': { - 'font-size': '20px', - 'line-height': '30px' - }, - 'text-diminished': { - 'font-size': '20px', - 'line-height': '30px' - }, - 'text-secondary': { - 'font-size': '16px', - 'line-height': '24px' - }, - 'button-big': { - 'font-size': '20px', - 'line-height': '30px' - }, - 'button-small': { - 'font-size': '16px', - 'line-height': '25px' - }, - columns: { - display: 'flex', - 'flex-direction': 'row', - 'flex-flow': 'wrap', - 'justify-content': 'space-between', - - [`@media ${customMedia['--sm-scr']}`]: { - 'flex-direction': 'row' - }, - - [`@media ${customMedia['--xs-scr']}`]: { - 'justify-content': 'center' - } - }, - column: { - 'flex-basis': '33.3%', - - [`@media ${customMedia['--sm-scr']}`]: { - 'flex-basis': '50%' - }, - - [`@media ${customMedia['--xs-scr']}`]: { - 'flex-basis': '100%' - } - }, - link: { - 'text-decoration': 'none', - color: 'var(--color-blue)', - ...hover, - ...focus, - ...active - }, - hover, - focus, - active - } -} diff --git a/packages/gatsby-theme-iterative/createPages.js b/packages/gatsby-theme-iterative/createPages.js index 50595b62..e8d5072e 100644 --- a/packages/gatsby-theme-iterative/createPages.js +++ b/packages/gatsby-theme-iterative/createPages.js @@ -3,6 +3,8 @@ const GithubSlugger = require('github-slugger') const slugger = new GithubSlugger() const SLUG_REGEXP = /\s+{#([a-z0-9-]*[a-z0-9]+)}\s*$/ +const path = require('path') + const extractSlugFromTitle = title => { // extracts expressions like {#too-many-files} from the end of a title const meta = title.match(SLUG_REGEXP) @@ -34,7 +36,7 @@ const parseHeadings = text => { const createPages = async ( { graphql, actions }, - { defaultTemplate, getTemplate, disable } + { defaultTemplate, getTemplate, disable, docsPrefix } ) => { if (disable) return const docsResponse = await graphql( @@ -73,14 +75,13 @@ const createPages = async ( } = doc const headings = parseHeadings(rawMarkdownBody) - if (slug) { + if (slug !== undefined) { actions.createPage({ component: getTemplate(template, defaultTemplate), - path: slug, + path: path.posix.join(docsPrefix, slug), context: { id, slug, - isDocs: true, headings } }) diff --git a/packages/gatsby-theme-iterative/gatsby-browser.js b/packages/gatsby-theme-iterative/gatsby-browser.js deleted file mode 100644 index 7775d5d9..00000000 --- a/packages/gatsby-theme-iterative/gatsby-browser.js +++ /dev/null @@ -1,3 +0,0 @@ -/* eslint-env node */ -const PageWrapper = require('./src/components/PageWrapper').default -exports.wrapPageElement = PageWrapper diff --git a/packages/gatsby-theme-iterative/gatsby-config.js b/packages/gatsby-theme-iterative/gatsby-config.js index 601526b2..0f8fa423 100644 --- a/packages/gatsby-theme-iterative/gatsby-config.js +++ b/packages/gatsby-theme-iterative/gatsby-config.js @@ -3,21 +3,6 @@ const fs = require('fs') const path = require('path') const autoprefixer = require('autoprefixer') -const customMedia = require('postcss-custom-media') -const customProperties = require('postcss-custom-properties') -const mixins = require('postcss-mixins') -const colorMod = require('postcss-color-mod-function') - -const mediaConfig = require('./config/postcss/media') -const mixinsConfig = require('./config/postcss/mixins') - -const defaultCssBase = path.join( - __dirname, - 'src', - 'components', - 'Page', - 'base.css' -) const customYoutubeTransformer = require('./config/gatsby-remark-embedder/custom-yt-embedder') @@ -31,26 +16,20 @@ require('./config/prismjs/dvctable') const imageMaxWidth = 700 +const defaults = require('./config-defaults') + module.exports = ({ simpleLinkerTerms, - cssBase = defaultCssBase, - customMediaConfig = { importFrom: [mediaConfig] }, - customPropertiesConfig = { - importFrom: [cssBase], - disableDeprecationNotice: true - }, - colorModConfig = { - importFrom: [cssBase] - }, postCssPlugins = [ require('tailwindcss/nesting')(require('postcss-nested')), - customMedia(customMediaConfig), - mixins(mixinsConfig), - customProperties(customPropertiesConfig), - colorMod(colorModConfig), autoprefixer, require('tailwindcss') - ] + ], + docsInstanceName = defaults.docsInstanceName, + docsPath = defaults.docsPath, + glossaryInstanceName = defaults.glossaryInstanceName, + glossaryPath = defaults.glossaryPath, + argsLinkerPath = defaults.argsLinkerPath }) => ({ plugins: [ { @@ -68,11 +47,18 @@ module.exports = ({ }, 'gatsby-plugin-react-helmet', 'gatsby-plugin-sitemap', - { + glossaryInstanceName && { resolve: 'gatsby-source-filesystem', options: { - name: 'content', - path: path.resolve('content') + name: glossaryInstanceName, + path: glossaryPath + } + }, + docsInstanceName && { + resolve: 'gatsby-source-filesystem', + options: { + name: docsInstanceName, + path: docsPath } }, 'gatsby-plugin-image', @@ -97,11 +83,7 @@ module.exports = ({ options: { icon: linkIcon, // Pathname can also be array of paths. eg: ['docs/command-reference;', 'docs/api'] - pathname: [ - 'docs/command-reference', - `docs/ref`, - 'docs/cli-reference' - ] + pathname: argsLinkerPath } }, { @@ -169,10 +151,10 @@ module.exports = ({ } } } - ], + ].filter(Boolean), siteMetadata: { author: 'Iterative', - siteUrl: 'https://cml.dev', + siteUrl: 'https://example.com', titleTemplate: '' } }) diff --git a/packages/gatsby-theme-iterative/gatsby-node.js b/packages/gatsby-theme-iterative/gatsby-node.js index b33512e7..97599e58 100644 --- a/packages/gatsby-theme-iterative/gatsby-node.js +++ b/packages/gatsby-theme-iterative/gatsby-node.js @@ -1,5 +1,6 @@ const path = require('path') const { name: packageName } = require('./package.json') +const defaults = require('./config-defaults') const defaultGetTemplate = (template, defaultTemplate) => template @@ -15,7 +16,13 @@ exports.pluginOptionsSchema = ({ Joi }) => { ), remark: Joi.boolean().default(true), filesystem: Joi.boolean().default(true), - glossaryDirectory: Joi.string().default('docs/user-guide/basic-concepts'), + glossaryDirectory: Joi.string().default( + path.resolve('content', 'docs', 'user-guide', 'basic-concepts') + ), + docsDirectory: Joi.string().default(path.resolve('content', 'docs')), + glossaryInstanceName: Joi.string().default('iterative-glossary'), + docsInstanceName: Joi.string().default('iterative-docs'), + docsPrefix: Joi.string().default('doc'), simpleLinkerTerms: Joi.array().items( Joi.object({ matches: Joi.string(), @@ -24,9 +31,10 @@ exports.pluginOptionsSchema = ({ Joi }) => { ), cssBase: Joi.string(), customMediaConfig: Joi.object(), - customPropertiesConfig: Joi.object(), - colorModConfig: Joi.object(), - postCssPlugins: Joi.array() + postCssPlugins: Joi.array(), + argsLinkerPath: Joi.alternatives() + .try(Joi.string(), Joi.array().items(Joi.string())) + .default(defaults.argsLinkerPath) }) } diff --git a/packages/gatsby-theme-iterative/gatsby-ssr.js b/packages/gatsby-theme-iterative/gatsby-ssr.js deleted file mode 100644 index 8b0fea8d..00000000 --- a/packages/gatsby-theme-iterative/gatsby-ssr.js +++ /dev/null @@ -1,5 +0,0 @@ -/* eslint-env node */ - -const PageWrapper = require('./src/components/PageWrapper').default - -exports.wrapPageElement = PageWrapper diff --git a/packages/gatsby-theme-iterative/onCreateNode.js b/packages/gatsby-theme-iterative/onCreateNode.js index b73592e3..c425cc8a 100644 --- a/packages/gatsby-theme-iterative/onCreateNode.js +++ b/packages/gatsby-theme-iterative/onCreateNode.js @@ -28,7 +28,7 @@ async function onCreateNode( createContentDigest, actions: { createNode, createParentChildLink } }, - { disable, glossaryDirectory } + { disable, glossaryInstanceName, docsInstanceName } ) { if (disable || node.internal.type !== 'MarkdownRemark') { return @@ -52,7 +52,7 @@ async function onCreateNode( return } - if (parentFileNode.relativeDirectory === glossaryDirectory) { + if (parentFileNode.sourceInstanceName === glossaryInstanceName) { // Glossary const { @@ -80,37 +80,37 @@ async function onCreateNode( createParentChildLink({ parent: node, child: entryNode }) } - // Doc page - - const splitDir = parentFileNode.relativeDirectory.split(path.sep) - if (splitDir[0] !== 'docs') return - - const { name, relativePath } = parentFileNode - splitDir[0] = 'doc' - - const slug = path.posix.join('/', ...splitDir, name === 'index' ? '' : name) - - const fieldData = { - slug, - sourcePath: relativePath, - template: node.frontmatter.template, - title: node.frontmatter.title === '' ? null : node.frontmatter.title, - description: node.frontmatter.description - } + if (parentFileNode.sourceInstanceName === docsInstanceName) { + // Doc page + const { name, relativePath, relativeDirectory } = parentFileNode + + const slug = + name === 'index' + ? relativeDirectory + : path.posix.join(relativeDirectory, name) + + const fieldData = { + slug, + sourcePath: relativePath, + template: node.frontmatter.template, + title: node.frontmatter.title === '' ? null : node.frontmatter.title, + description: node.frontmatter.description + } - const docNode = { - ...fieldData, - id: createNodeId(`MarkdownDocsPage >>> ${node.id}`), - parent: node.id, - children: [], - internal: { - type: `DocsPage`, - contentDigest: createContentDigest(fieldData) + const docNode = { + ...fieldData, + id: createNodeId(`MarkdownDocsPage >>> ${node.id}`), + parent: node.id, + children: [], + internal: { + type: `DocsPage`, + contentDigest: createContentDigest(fieldData) + } } - } - createNode(docNode) - createParentChildLink({ parent: node, child: docNode }) + createNode(docNode) + createParentChildLink({ parent: node, child: docNode }) + } } module.exports = onCreateNode diff --git a/packages/gatsby-theme-iterative/package.json b/packages/gatsby-theme-iterative/package.json index f01aa726..f3b39052 100644 --- a/packages/gatsby-theme-iterative/package.json +++ b/packages/gatsby-theme-iterative/package.json @@ -1,6 +1,6 @@ { "name": "@dvcorg/gatsby-theme-iterative", - "version": "0.1.22", + "version": "0.2.0", "description": "", "main": "index.js", "types": "src/typings.d.ts", @@ -13,6 +13,7 @@ "@reach/portal": "^0.17.0", "@reach/router": "^1.3.4", "@reach/skip-nav": "^0.17.0", + "@sentry/gatsby": "^7.11.1", "@svgr/webpack": "^6.2.1", "@types/github-slugger": "^1.3.0", "@types/isomorphic-fetch": "^0.0.36", @@ -52,16 +53,13 @@ "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-intersection-observer": "^9.3.5", "react-use": "^17.3.2", "rehype-parse": "^8.0.4", "rehype-react": "^7.0.4", diff --git a/packages/gatsby-theme-iterative/plugins/gatsby-remark-args-linker/index.js b/packages/gatsby-theme-iterative/plugins/gatsby-remark-args-linker/index.js index 104c2c93..7c94dc21 100644 --- a/packages/gatsby-theme-iterative/plugins/gatsby-remark-args-linker/index.js +++ b/packages/gatsby-theme-iterative/plugins/gatsby-remark-args-linker/index.js @@ -27,13 +27,13 @@ module.exports = async ( const { visit } = await import('unist-util-visit') if (!pathname) return markdownAST const parentNode = getNode(markdownNode.parent) - let isPath = + let isArgsLinkerPage = typeof pathname === 'string' ? parentNode.relativeDirectory.startsWith(pathname) : Array.isArray(pathname) ? pathname.some(p => parentNode.relativeDirectory.startsWith(p)) : false - if (!isPath) return markdownAST + if (!isArgsLinkerPage) return markdownAST visit( markdownAST, node => diff --git a/packages/gatsby-theme-iterative/src/components/AlertLandingLayout/index.tsx b/packages/gatsby-theme-iterative/src/components/AlertLandingLayout/index.tsx index c043e9ad..5652832f 100644 --- a/packages/gatsby-theme-iterative/src/components/AlertLandingLayout/index.tsx +++ b/packages/gatsby-theme-iterative/src/components/AlertLandingLayout/index.tsx @@ -1,12 +1,15 @@ import React from 'react' -import MainLayout, { LayoutComponent, LayoutModifiers } from '../MainLayout' +import MainLayout, { + ILayoutComponentProps, + LayoutModifiers +} from '../MainLayout' const alertComponentModifiers: LayoutModifiers[] = [ LayoutModifiers.Collapsed, LayoutModifiers.HideAlert ] -const AlertLandingLayout: LayoutComponent = props => { +const AlertLandingLayout = (props: ILayoutComponentProps) => { const modifiers: LayoutModifiers[] = props.modifiers === undefined ? alertComponentModifiers diff --git a/packages/gatsby-theme-iterative/src/components/Documentation/Layout/SearchForm/styles.module.css b/packages/gatsby-theme-iterative/src/components/Documentation/Layout/SearchForm/styles.module.css index f14149bb..2480ee4d 100644 --- a/packages/gatsby-theme-iterative/src/components/Documentation/Layout/SearchForm/styles.module.css +++ b/packages/gatsby-theme-iterative/src/components/Documentation/Layout/SearchForm/styles.module.css @@ -1,12 +1,9 @@ .searchArea { - box-sizing: border-box; height: 60px; padding-top: 10px; z-index: 10; - position: sticky; - top: var(--layout-header-height); - @media (--xs-scr) { + @media screen(xsMax) { position: relative; padding: 10px 20px 0; top: 0; @@ -28,7 +25,6 @@ } .input { - box-sizing: border-box; display: flex; flex: 1; width: 240px; diff --git a/packages/gatsby-theme-iterative/src/components/Documentation/Layout/SidebarMenu/index.tsx b/packages/gatsby-theme-iterative/src/components/Documentation/Layout/SidebarMenu/index.tsx index 855d827f..80e9b54c 100644 --- a/packages/gatsby-theme-iterative/src/components/Documentation/Layout/SidebarMenu/index.tsx +++ b/packages/gatsby-theme-iterative/src/components/Documentation/Layout/SidebarMenu/index.tsx @@ -1,11 +1,9 @@ import React, { useEffect, useRef, useState } from 'react' import { useLocation } from '@reach/router' import cn from 'classnames' -import PerfectScrollbar from 'perfect-scrollbar' import { getParentsListFromPath } from '../../../../utils/shared/sidebar' -import 'perfect-scrollbar/css/perfect-scrollbar.css' import * as styles from './styles.module.css' import InnerSidebar from './InnerSidebar' @@ -20,7 +18,6 @@ interface ISidebarMenuProps { 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) @@ -33,8 +30,6 @@ const SidebarMenu: React.FC = ({ currentPath, onClick }) => { setIsScrollHidden(true) setTimeout(() => { if (node && parent) { - psRef.current?.update() - const parentHeight = parent.clientHeight const parentScroll = parent.scrollTop const nodeOffset = node.offsetTop @@ -54,18 +49,7 @@ const SidebarMenu: React.FC = ({ currentPath, onClick }) => { } 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]) diff --git a/packages/gatsby-theme-iterative/src/components/Documentation/Layout/SidebarMenu/styles.module.css b/packages/gatsby-theme-iterative/src/components/Documentation/Layout/SidebarMenu/styles.module.css index 9f850a2b..e1522b85 100644 --- a/packages/gatsby-theme-iterative/src/components/Documentation/Layout/SidebarMenu/styles.module.css +++ b/packages/gatsby-theme-iterative/src/components/Documentation/Layout/SidebarMenu/styles.module.css @@ -1,9 +1,5 @@ .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; + @apply relative top-0 h-full overflow-y-auto overflow-x-hidden px-2; &.isScrollHidden { .ps__rail-y { @@ -12,13 +8,6 @@ } } - @media (--xs-scr) { - position: relative; - top: 0; - height: calc(100% - 60px); - padding-left: 20px; - } - :global(.ReactCollapse--collapse) { transition: height 500ms; padding-left: 10px; @@ -26,17 +15,16 @@ } .sections { - min-width: 280px; margin-bottom: 25px; margin-top: 10px; - @media (--xs-scr) { + @media screen(xsMax) { min-width: auto; } } .sectionLinks { - @media (--sm-scr) { + @media screen(smMax) { position: relative; } } @@ -53,10 +41,14 @@ text-decoration: none; color: var(--color-gray-light); + svg { + display: inline-block; + } + &:hover { color: #3c3937; - @media (--xs-scr) { + @media screen(xsMax) { color: var(--color-gray-light); } } diff --git a/packages/gatsby-theme-iterative/src/components/Documentation/Layout/index.tsx b/packages/gatsby-theme-iterative/src/components/Documentation/Layout/index.tsx index 76a23f51..287619a5 100644 --- a/packages/gatsby-theme-iterative/src/components/Documentation/Layout/index.tsx +++ b/packages/gatsby-theme-iterative/src/components/Documentation/Layout/index.tsx @@ -6,11 +6,9 @@ import LayoutWidthContainer from '../../LayoutWidthContainer' import HamburgerIcon from '../../HamburgerIcon' import SearchForm from './SearchForm' import SidebarMenu from './SidebarMenu' -import { matchMedia } from '../../../utils/front/breakpoints' import { focusElementWithHotkey } from '../../../utils/front/focusElementWithHotkey' import * as styles from './styles.module.css' -import { useWindowSize } from 'react-use' const toggleReducer: Reducer = state => !state @@ -20,15 +18,10 @@ const Layout: React.FC> = ({ }) => { const [isMenuOpen, toggleMenu] = useReducer(toggleReducer, false) - const windowSize = useWindowSize() - useEffect(() => { - if (matchMedia('--xs-scr')) { - return - } const closeEventListener = focusElementWithHotkey('#doc-search', '/') return closeEventListener - }, [windowSize]) + }, []) return ( @@ -49,15 +42,17 @@ const Layout: React.FC> = ({
- - { - if (matchMedia('--xs-scr') && isLeafItemClicked) { - toggleMenu() - } - }} - /> +
+ + { + if (isLeafItemClicked) { + toggleMenu() + } + }} + /> +
diff --git a/packages/gatsby-theme-iterative/src/components/Documentation/Layout/styles.module.css b/packages/gatsby-theme-iterative/src/components/Documentation/Layout/styles.module.css index fc3effed..841a44a0 100644 --- a/packages/gatsby-theme-iterative/src/components/Documentation/Layout/styles.module.css +++ b/packages/gatsby-theme-iterative/src/components/Documentation/Layout/styles.module.css @@ -1,9 +1,11 @@ .container { display: flex; flex-direction: row; + flex: 1; z-index: 2; + height: 100%; - @media (--xs-scr) { + @media screen(xsMax) { padding: 0 15px; } @@ -19,7 +21,7 @@ pointer-events: none; background-color: var(--color-light-blue); - @media (--xs-scr) { + @media screen(xsMax) { display: none; } } @@ -28,7 +30,7 @@ .backdrop { display: none; - @media (--xs-scr) { + @media screen(xsMax) { display: block; opacity: 0; pointer-events: none; @@ -50,26 +52,34 @@ } .side { - flex-shrink: 0; - width: 280px; + @apply flex flex-col w-72 + sm:py-0; background-color: var(--color-light-blue); - @media (--xs-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; + flex-shrink: 0; - &.opened { - transform: translateX(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); } + + @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 { @@ -77,7 +87,7 @@ justify-content: center; align-items: center; position: fixed; - z-index: 2; + z-index: 3; left: 8px; bottom: 20px; width: 45px; @@ -92,7 +102,7 @@ transform: translateX(calc(100vw - 60px)); } - @media (--xs-scr) { + @media screen(xsMax) { display: flex; > * { @@ -108,7 +118,7 @@ background-color: #fff; flex: 1; - @media (--xs-scr) { + @media screen(xsMax) { max-width: 100%; } } diff --git a/packages/gatsby-theme-iterative/src/components/Documentation/Markdown/Main/styles.module.css b/packages/gatsby-theme-iterative/src/components/Documentation/Markdown/Main/styles.module.css index 347c3434..30ff6da7 100644 --- a/packages/gatsby-theme-iterative/src/components/Documentation/Markdown/Main/styles.module.css +++ b/packages/gatsby-theme-iterative/src/components/Documentation/Markdown/Main/styles.module.css @@ -1,16 +1,4 @@ :global { - ul { - list-style-type: disc; - } - - ol { - list-style-type: decimal; - } - - em { - font-style: italic; - } - #markdown-root { @keyframes fadeIn { from { @@ -34,6 +22,22 @@ font-family: inherit; font-size: 18px; + ul { + list-style: disc; + } + + ol { + list-style: decimal; + } + + em { + font-style: italic; + } + + h1:first-child { + @apply lg:h-14 pb-2; + } + h1, h2, h3, @@ -41,6 +45,7 @@ h5, h6 { font-weight: 500; + word-wrap: normal; } img + em, @@ -114,6 +119,10 @@ .anchor { margin-left: -24px; + + svg { + display: inline; + } } li { @@ -165,7 +174,7 @@ &__tooltip { padding: 10px; - box-sizing: border-box; + color: #fff; opacity: 0; width: 100%; @@ -179,7 +188,7 @@ } a { - @mixin focus; + @apply focus; color: #fff; text-decoration: underline; @@ -193,14 +202,10 @@ } .content { + @apply py-7 xs:px-7 mt-14; min-width: 200px; - margin: 30px; flex: 1; background-color: #fff; - - @media (--xs-scr) { - margin: 15px 0; - } } .tutorialsWrapper { @@ -209,7 +214,7 @@ float: right; margin: 5px 0 0 10px; - @media (--md-scr) { + @media screen(mdMax) { margin: 0 0 15px; } @@ -225,7 +230,7 @@ z-index: 1; position: relative; - @media (--md-scr) { + @media screen(mdMax) { float: none; margin: 0 0 15px; } diff --git a/packages/gatsby-theme-iterative/src/components/Documentation/Markdown/Tooltip/DesktopView/index.tsx b/packages/gatsby-theme-iterative/src/components/Documentation/Markdown/Tooltip/DesktopView/index.tsx index 3a69b1ba..06b29973 100644 --- a/packages/gatsby-theme-iterative/src/components/Documentation/Markdown/Tooltip/DesktopView/index.tsx +++ b/packages/gatsby-theme-iterative/src/components/Documentation/Markdown/Tooltip/DesktopView/index.tsx @@ -3,7 +3,6 @@ import cn from 'classnames' import Portal from '@reach/portal' import throttle from 'lodash/throttle' -import { getHeaderHeight } from '../../../../../utils/front/scroll' import * as styles from './styles.module.css' interface IDesktopViewProps { @@ -24,7 +23,6 @@ const getPosition = (toggle: Element, tooltip: Element): ITooltipPosition => { const toggleRect = toggle.getBoundingClientRect() const tooltipRect = tooltip.getBoundingClientRect() const windowWidth = document.documentElement.clientWidth - const headerHeight = getHeaderHeight() const result: ITooltipPosition = { left: 0, top: 0, arrow: ['l', 'b'] } if (windowWidth - tooltipRect.width > toggleRect.left) { @@ -34,7 +32,7 @@ const getPosition = (toggle: Element, tooltip: Element): ITooltipPosition => { result.arrow[0] = 'r' } - if (toggleRect.top > tooltipRect.height + ARROW_SIZE + headerHeight) { + if (toggleRect.top > tooltipRect.height + ARROW_SIZE) { result.top = toggleRect.top - tooltipRect.height - ARROW_SIZE } else { result.top = toggleRect.top + toggleRect.height + ARROW_SIZE diff --git a/packages/gatsby-theme-iterative/src/components/Documentation/Markdown/Tooltip/DesktopView/styles.module.css b/packages/gatsby-theme-iterative/src/components/Documentation/Markdown/Tooltip/DesktopView/styles.module.css index 37cea78d..b0c2bf18 100644 --- a/packages/gatsby-theme-iterative/src/components/Documentation/Markdown/Tooltip/DesktopView/styles.module.css +++ b/packages/gatsby-theme-iterative/src/components/Documentation/Markdown/Tooltip/DesktopView/styles.module.css @@ -4,7 +4,6 @@ } .tooltip { - box-sizing: border-box; position: fixed; top: 0; left: 0; diff --git a/packages/gatsby-theme-iterative/src/components/Documentation/Markdown/styles.module.css b/packages/gatsby-theme-iterative/src/components/Documentation/Markdown/styles.module.css index 9f2a4912..7e96fec5 100644 --- a/packages/gatsby-theme-iterative/src/components/Documentation/Markdown/styles.module.css +++ b/packages/gatsby-theme-iterative/src/components/Documentation/Markdown/styles.module.css @@ -75,14 +75,12 @@ height: 100%; flex-flow: row nowrap; align-items: center; - box-sizing: border-box; p { margin: 0; } .cardIcon { - box-sizing: border-box; display: block; padding: 0; padding-right: 0.75rem; diff --git a/packages/gatsby-theme-iterative/src/components/Documentation/RightPanel/index.tsx b/packages/gatsby-theme-iterative/src/components/Documentation/RightPanel/index.tsx index bea39126..9a45ffdb 100644 --- a/packages/gatsby-theme-iterative/src/components/Documentation/RightPanel/index.tsx +++ b/packages/gatsby-theme-iterative/src/components/Documentation/RightPanel/index.tsx @@ -6,7 +6,7 @@ import { IHeading } from '../' import Link from '../../Link' import Tutorials from '../TutorialsLinks' -import { getScrollPosition, getHeaderHeight } from '../../../utils/front/scroll' +import { getScrollPosition } from '../../../utils/front/scroll' import { allImagesLoadedInContainer } from '../../../utils/front/images' import * as sharedStyles from '../styles.module.css' @@ -40,11 +40,8 @@ const RightPanel: React.FC = ({ if (!coordinateKeys.length) return - const headerHeight = getHeaderHeight() const filteredKeys = coordinateKeys.filter( - offsetTop => - parseInt(offsetTop, 10) <= - currentScroll + (documentHeight - headerHeight) / 2 + offsetTop => parseInt(offsetTop, 10) <= currentScroll + documentHeight / 2 ) const newCurrentHeadingSlug = filteredKeys.length @@ -92,36 +89,35 @@ const RightPanel: React.FC = ({ useEffect(updateCurrentHeader, [headingsOffsets, documentHeight]) const contentBlockRef = useRef(null) - const [ - isScrollToCurrentHeadingHappened, - setIsScrollToCurrentHeadingHappened - ] = useState(false) useEffect(() => { - if (isScrollToCurrentHeadingHappened) { - return - } - if (!document.location.hash) { - setIsScrollToCurrentHeadingHappened(true) - return - } - if (currentHeadingSlug) { - setIsScrollToCurrentHeadingHappened(true) - const currentHeadingSlugElem = document.getElementById( - `link-${currentHeadingSlug}` - ) + if (currentHeadingSlug !== undefined) { const contentBlockElem = contentBlockRef.current - if (currentHeadingSlugElem && contentBlockElem) { - const hasVerticalScrollbar = - contentBlockElem.scrollHeight > contentBlockElem.clientHeight - if (hasVerticalScrollbar) { - currentHeadingSlugElem.scrollIntoView({ - block: 'start', - inline: 'nearest' + if (contentBlockElem) { + if (currentHeadingSlug) { + const currentHeadingSlugElem = document.getElementById( + `link-${currentHeadingSlug}` + ) + if (currentHeadingSlugElem) { + const hasVerticalScrollbar = + contentBlockElem.scrollHeight > contentBlockElem.clientHeight + if (hasVerticalScrollbar) { + contentBlockElem.scrollTo({ + top: + currentHeadingSlugElem.offsetTop - + contentBlockElem.clientHeight + + currentHeadingSlugElem.clientHeight / 2, + behavior: 'smooth' + }) + } + } + } else { + contentBlockElem.scrollTo({ + top: 0 }) } } } - }) + }, [currentHeadingSlug]) return (
diff --git a/packages/gatsby-theme-iterative/src/components/Documentation/RightPanel/styles.module.css b/packages/gatsby-theme-iterative/src/components/Documentation/RightPanel/styles.module.css index c68e5964..cde6a749 100644 --- a/packages/gatsby-theme-iterative/src/components/Documentation/RightPanel/styles.module.css +++ b/packages/gatsby-theme-iterative/src/components/Documentation/RightPanel/styles.module.css @@ -1,11 +1,8 @@ .container { - position: sticky; - top: var(--layout-header-height); + @apply mt-7 pt-14 sticky h-screen top-0; flex-shrink: 0; - box-sizing: border-box; + width: 170px; - height: calc(100vh - 78px); - padding-top: 57px; font-size: 16px; display: flex; flex-direction: column; @@ -16,8 +13,10 @@ } .contentBlock { + @apply basis-36 grow min-h-[6rem]; + overflow-y: scroll; - margin-bottom: 27px; + margin-bottom: 17px; &::-webkit-scrollbar { appearance: none; @@ -30,14 +29,11 @@ } } -.separator { - border: none; - border-top: 1px solid var(--color-lighter-blue); -} - .header { + @apply h-14 pb-2 flex flex-col flex-nowrap justify-end; font-size: 14px; text-transform: uppercase; + border-bottom: 1px solid var(--color-lighter-blue); color: var(--color-black); } @@ -63,6 +59,7 @@ } .buttonsBlock { + margin-top: 10px; margin-bottom: 20px; flex-shrink: 0; } diff --git a/packages/gatsby-theme-iterative/src/components/Documentation/styles.module.css b/packages/gatsby-theme-iterative/src/components/Documentation/styles.module.css index f4bb9eda..8086f3f6 100644 --- a/packages/gatsby-theme-iterative/src/components/Documentation/styles.module.css +++ b/packages/gatsby-theme-iterative/src/components/Documentation/styles.module.css @@ -1,7 +1,7 @@ .button { position: relative; z-index: 1; - box-sizing: border-box; + display: inline-flex; justify-content: center; align-items: center; diff --git a/packages/gatsby-theme-iterative/src/components/DocumentationLayout/index.tsx b/packages/gatsby-theme-iterative/src/components/DocumentationLayout/index.tsx deleted file mode 100644 index 32bbb3cc..00000000 --- a/packages/gatsby-theme-iterative/src/components/DocumentationLayout/index.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import React from 'react' - -import MainLayout, { LayoutComponent, LayoutModifiers } from '../MainLayout' -import ThemeDocumentationLayout from '../Documentation/Layout' - -const Layout: LayoutComponent = ({ children, ...restProps }) => { - const { - location: { pathname } - } = restProps - - return ( - - - {children} - - - ) -} - -export default Layout diff --git a/packages/gatsby-theme-iterative/src/components/HamburgerIcon/index.tsx b/packages/gatsby-theme-iterative/src/components/HamburgerIcon/index.tsx index caedcea2..714d50e5 100644 --- a/packages/gatsby-theme-iterative/src/components/HamburgerIcon/index.tsx +++ b/packages/gatsby-theme-iterative/src/components/HamburgerIcon/index.tsx @@ -8,7 +8,14 @@ interface IHamburgerProps { } const HamburgerIcon: React.FC = ({ opened }) => ( -
+
diff --git a/packages/gatsby-theme-iterative/src/components/HamburgerIcon/styles.module.css b/packages/gatsby-theme-iterative/src/components/HamburgerIcon/styles.module.css index 8e6e4f4a..c2d19157 100644 --- a/packages/gatsby-theme-iterative/src/components/HamburgerIcon/styles.module.css +++ b/packages/gatsby-theme-iterative/src/components/HamburgerIcon/styles.module.css @@ -1,7 +1,4 @@ .wrapper { - display: inline-block; - cursor: pointer; - &.opened { transform: translateX(-4px); } diff --git a/packages/gatsby-theme-iterative/src/components/HamburgerMenu/styles.module.css b/packages/gatsby-theme-iterative/src/components/HamburgerMenu/styles.module.css index 9ea59bd6..dce231c2 100644 --- a/packages/gatsby-theme-iterative/src/components/HamburgerMenu/styles.module.css +++ b/packages/gatsby-theme-iterative/src/components/HamburgerMenu/styles.module.css @@ -19,7 +19,7 @@ color: #fff; overflow-y: auto; - @media (--xs-scr) { + @media screen(xsMax) { display: block; } @@ -34,15 +34,12 @@ } .toggleButton { - @mixin hover; + @apply hover px-2; - position: fixed; - display: none; - visibility: hidden; + position: relative; + display: flex; + visibility: visible; z-index: 999; - right: 16px; - top: 12px; - padding: 0; border: none; width: 40px; height: 40px; @@ -58,16 +55,15 @@ } &.opened { + position: absolute; + top: 1rem; + right: 0.5rem; outline-color: #fff; } - &.expanded { - top: 47px; - } - - @media (--xs-scr) { - display: flex; - visibility: visible; + @media screen(xs) { + display: none; + visibility: hidden; } } @@ -76,8 +72,8 @@ } .logo { - @mixin hover; - @mixin active; + @apply hover; + @apply active; width: 40px; height: 40px; @@ -91,8 +87,8 @@ } .company { - @mixin active; - @mixin hover; + @apply active; + @apply hover; font-size: 15px; line-height: 20px; @@ -145,9 +141,9 @@ } a.sectionHeading { - @mixin hover; - @mixin active; - @mixin focus; + @apply hover; + @apply active; + @apply focus; } .subSections { @@ -174,8 +170,8 @@ a.sectionHeading { } .subSectionLink { - @mixin hover; - @mixin active; + @apply hover; + @apply active; display: flex; flex-direction: column; @@ -206,7 +202,7 @@ a.sectionHeading { } .linkButton { - @mixin active; + @apply active; display: block; margin-top: 15px; diff --git a/packages/gatsby-theme-iterative/src/components/LayoutFooter/styles.module.css b/packages/gatsby-theme-iterative/src/components/LayoutFooter/styles.module.css index 25815e58..0aae44fb 100644 --- a/packages/gatsby-theme-iterative/src/components/LayoutFooter/styles.module.css +++ b/packages/gatsby-theme-iterative/src/components/LayoutFooter/styles.module.css @@ -1,4 +1,5 @@ .wrapper { + @apply z-10; width: 100%; background-color: #40364d; } @@ -13,11 +14,11 @@ display: flex; flex-wrap: wrap; - @media (--md-scr) { + @media screen(mdMax) { padding: 16px 32px; } - @media (--xs-scr) { + @media screen(xsMax) { padding: 16px; } @@ -27,8 +28,8 @@ } .logo { - @mixin active; - @mixin hover; + @apply active; + @apply hover; display: block; width: 40px; @@ -36,7 +37,7 @@ margin-right: 150px; margin-bottom: 18px; - @media (--xs-scr) { + @media screen(xsMax) { margin-bottom: 0; } @@ -54,12 +55,12 @@ display: flex; flex-direction: row; - @media (--md-scr) { + @media screen(mdMax) { width: 100%; flex-wrap: wrap; } - @media (--xs-scr) { + @media screen(xsMax) { justify-content: space-between; } } @@ -70,12 +71,12 @@ margin-top: 3px; margin-right: 86px; - @media (--md-scr) { + @media screen(mdMax) { margin-right: 36px; margin-top: 0; } - @media (--xs-scr) { + @media screen(xsMax) { margin-top: 26px; margin-right: 0; width: calc(50% - 12px); @@ -114,8 +115,8 @@ } .link { - @mixin active; - @mixin focus; + @apply active; + @apply focus; display: flex; align-items: center; @@ -126,7 +127,7 @@ letter-spacing: 0.02em; padding: 4px 0; - @media (--md-scr) { + @media screen(mdMax) { font-size: 16px; line-height: 28px; } @@ -142,7 +143,7 @@ width: 24px; height: 24px; - @media (--md-scr) { + @media screen(mdMax) { margin-right: 10px; } } @@ -153,7 +154,7 @@ width: 20px; height: 20px; - @media (--md-scr) { + @media screen(mdMax) { margin-right: 10px; width: 18px; height: 18px; @@ -166,7 +167,7 @@ justify-content: space-between; margin-top: 24px; - @media (--sm-scr) { + @media screen(smMax) { flex-direction: column; align-items: center; text-align: center; @@ -184,7 +185,7 @@ } .companyDescription { - @media (--xs-scr) { + @media screen(xsMax) { font-size: 14px; line-height: 16px; width: 100%; @@ -192,8 +193,8 @@ } .companyName { - @mixin active; - @mixin hover; + @apply active; + @apply hover; font-weight: 800; font-size: inherit; @@ -228,11 +229,11 @@ .socialIcons { display: flex; - @media (--sm-scr) { + @media screen(smMax) { margin-top: 12px; } - @media (--xxs-scr) { + @media screen(xxsMax) { width: 100%; justify-content: space-between; } @@ -241,18 +242,17 @@ .socialIcon { width: 26px; height: 26px; - padding: 11px; margin-right: 24px; - @media (--md-scr) { + @media screen(mdMax) { margin-right: 8px; } - @media (--sm-scr) { + @media screen(smMax) { margin-right: 24px; } - @media (--xxs-scr) { + @media screen(xxsMax) { margin-right: 0; } diff --git a/packages/gatsby-theme-iterative/src/components/LayoutHeader/Nav/LinkItems/data.ts b/packages/gatsby-theme-iterative/src/components/LayoutHeader/Nav/LinkItems/data.ts new file mode 100644 index 00000000..4c7cd752 --- /dev/null +++ b/packages/gatsby-theme-iterative/src/components/LayoutHeader/Nav/LinkItems/data.ts @@ -0,0 +1,18 @@ +import { getFirstPage } from '../../../../utils/shared/sidebar' +import { INavLinkData, INavLinkPopupData } from './types' + +const docsPage = getFirstPage() + +const navLinkItemsData: Array = [ + { + href: docsPage, + eventType: 'doc', + text: 'Doc' + }, + { + text: 'Other Tools', + popup: 'OtherToolsPopup' + } +] + +export default navLinkItemsData diff --git a/packages/gatsby-theme-iterative/src/components/LayoutHeader/Nav/LinkItems/getShowOnClass.ts b/packages/gatsby-theme-iterative/src/components/LayoutHeader/Nav/LinkItems/getShowOnClass.ts new file mode 100644 index 00000000..dc8c025f --- /dev/null +++ b/packages/gatsby-theme-iterative/src/components/LayoutHeader/Nav/LinkItems/getShowOnClass.ts @@ -0,0 +1,13 @@ +import cn from 'classnames' + +const showOnClasses = { + xs: 'xs:block', + sm: 'sm:block', + md: 'md:block', + lg: 'lg:block' +} + +export type ScreenSize = keyof typeof showOnClasses + +export const getShowOnClass = (size: ScreenSize | undefined): string => + size ? cn('hidden', showOnClasses[size]) : 'block' diff --git a/packages/gatsby-theme-iterative/src/components/LayoutHeader/Nav/LinkItems/index.tsx b/packages/gatsby-theme-iterative/src/components/LayoutHeader/Nav/LinkItems/index.tsx index 0455c3a2..6679cb19 100644 --- a/packages/gatsby-theme-iterative/src/components/LayoutHeader/Nav/LinkItems/index.tsx +++ b/packages/gatsby-theme-iterative/src/components/LayoutHeader/Nav/LinkItems/index.tsx @@ -8,40 +8,12 @@ import { ReactComponent as ArrowUpSVG } from '../../../../images/arrow-up-icon.s import { ReactComponent as ArrowDownSVG } from '../../../../images/arrow-down-icon.svg' import { logEvent } from '../../../../utils/front/plausible' -import { getFirstPage } from '../../../../utils/shared/sidebar' - -const docsPage = getFirstPage() import * as styles from './styles.module.css' +import { INavLinkData, INavLinkPopupData } from './types' -type PopupName = 'CommunityPopup' | 'OtherToolsPopup' - -interface INavLinkData { - href: string - eventType: string - text: string -} - -interface INavLinkPopupData { - text: string - popup: PopupName -} - -const navLinkItemsData: Array = [ - { - href: docsPage, - eventType: 'doc', - text: 'Doc' - }, - { - text: 'Other Tools', - popup: 'OtherToolsPopup' - } -] - -const isPopup = ( - item: INavLinkData | INavLinkPopupData -): item is INavLinkPopupData => (item as INavLinkPopupData).popup !== undefined +import navLinkItemsData from './data' +import { getShowOnClass } from './getShowOnClass' const LinkItems: React.FC = ({}) => { const [isCommunityPopupOpen, setIsCommunityPopupOpen] = useState(false) @@ -118,66 +90,68 @@ const LinkItems: React.FC = ({}) => { } } - return ( -
    - {navLinkItemsData.map((item, i) => ( -
  • ( +
  • + logEvent('Nav', { Item: eventType })} + href={href} + className={styles.link} + > + {text} + +
    • + ) + const PopupItem = ({ popup, showOn, text }: INavLinkPopupData) => ( +
  • + <> + - {item.popup === 'OtherToolsPopup' ? ( - - ) : ( - - )} - - ) : ( - logEvent('Nav', { Item: item.eventType })} - href={item.href} - className={styles.link} - > - {item.text} - + className={cn( + styles.link, + (popup === 'OtherToolsPopup' + ? isOtherToolsPopupOpen + : isCommunityPopupOpen) && styles.open )} -
    • - ))} + > + {text} + + + + {popup === 'OtherToolsPopup' ? ( + + ) : ( + + )} + + + ) + + return ( +
      + {navLinkItemsData.map((item, i) => + (item as INavLinkPopupData).popup === undefined ? ( + + ) : ( + + ) + )}
    ) } diff --git a/packages/gatsby-theme-iterative/src/components/LayoutHeader/Nav/LinkItems/styles.module.css b/packages/gatsby-theme-iterative/src/components/LayoutHeader/Nav/LinkItems/styles.module.css index 68216660..1529bca3 100644 --- a/packages/gatsby-theme-iterative/src/components/LayoutHeader/Nav/LinkItems/styles.module.css +++ b/packages/gatsby-theme-iterative/src/components/LayoutHeader/Nav/LinkItems/styles.module.css @@ -7,36 +7,10 @@ padding: 0; } -.linkItem { - position: relative; - margin-left: 12px; - - &:first-of-type { - margin: 0; - } - - @media (--md-scr) { - margin-left: 0; - - &:first-child { - display: none; - } - } - - @media (--sm-scr) { - margin-left: 4px; - - &:nth-child(5), - &:nth-child(4) { - display: none; - } - } -} - .link { - @mixin active; - @mixin hover; - @mixin focus; + @apply active; + @apply hover; + @apply focus; font-family: var(--font-base); font-weight: 400; @@ -76,7 +50,7 @@ display: none; } - @media (--md-scr) { + @media screen(mdMax) { font-size: 17px; line-height: 20px; diff --git a/packages/gatsby-theme-iterative/src/components/LayoutHeader/Nav/LinkItems/types.ts b/packages/gatsby-theme-iterative/src/components/LayoutHeader/Nav/LinkItems/types.ts new file mode 100644 index 00000000..6e360e9c --- /dev/null +++ b/packages/gatsby-theme-iterative/src/components/LayoutHeader/Nav/LinkItems/types.ts @@ -0,0 +1,17 @@ +import { ScreenSize } from './getShowOnClass' + +export type PopupName = 'CommunityPopup' | 'OtherToolsPopup' + +interface INavLinkCommonData { + showOn?: ScreenSize + text: string +} + +export interface INavLinkData extends INavLinkCommonData { + href: string + eventType: string +} + +export interface INavLinkPopupData extends INavLinkCommonData { + popup: PopupName +} diff --git a/packages/gatsby-theme-iterative/src/components/LayoutHeader/Nav/Popup/styles.module.css b/packages/gatsby-theme-iterative/src/components/LayoutHeader/Nav/Popup/styles.module.css index 8ee122dd..e0ab81f6 100644 --- a/packages/gatsby-theme-iterative/src/components/LayoutHeader/Nav/Popup/styles.module.css +++ b/packages/gatsby-theme-iterative/src/components/LayoutHeader/Nav/Popup/styles.module.css @@ -1,20 +1,21 @@ .popup { - display: grid; + display: none; + visibility: hidden; padding: 8px; opacity: 0; position: absolute; left: 10px; top: calc(100% + 4px); - visibility: hidden; z-index: 2; background-color: #fff; filter: drop-shadow(0 2px 8px rgb(0 0 0 / 15%)); border-radius: 12px; - box-sizing: border-box; + transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out; &.visible { opacity: 1; + display: grid; visibility: visible; } } diff --git a/packages/gatsby-theme-iterative/src/components/LayoutHeader/Nav/SocialIcons/styles.module.css b/packages/gatsby-theme-iterative/src/components/LayoutHeader/Nav/SocialIcons/styles.module.css index cb93b0cb..8c016323 100644 --- a/packages/gatsby-theme-iterative/src/components/LayoutHeader/Nav/SocialIcons/styles.module.css +++ b/packages/gatsby-theme-iterative/src/components/LayoutHeader/Nav/SocialIcons/styles.module.css @@ -1,38 +1,19 @@ .socialIcons { flex-direction: row; display: flex; - padding: 0; - margin: 0 16px 0 4px; - - @media (--xl-scr) { - margin: 0 24px 0 12px; - } - - @media (--md-scr) { - margin: 0 16px 0 0; - } - - @media (--sm-scr) { - margin: 0 16px 0 4px; - } } .socialIcon { + @apply p-1; display: block; - width: 24px; - height: 24px; color: #6f7685; - padding: 12px; - margin: 0; - - @media (--md-scr) { - width: 20px; - height: 20px; - padding: 6px; - } - svg { - width: inherit; - height: inherit; + @apply w-5 h-5; + @media screen(md) { + @apply w-6 h-6; + } + @media screen(lg) { + @apply w-7 h-7; + } } } diff --git a/packages/gatsby-theme-iterative/src/components/LayoutHeader/Nav/styles.module.css b/packages/gatsby-theme-iterative/src/components/LayoutHeader/Nav/styles.module.css index 9cbc789e..696142a9 100644 --- a/packages/gatsby-theme-iterative/src/components/LayoutHeader/Nav/styles.module.css +++ b/packages/gatsby-theme-iterative/src/components/LayoutHeader/Nav/styles.module.css @@ -1,5 +1,5 @@ .wrapper { - display: flex; + @apply hidden; flex-shrink: 0; flex-direction: row; align-items: center; @@ -8,12 +8,13 @@ list-style-type: none; } - @media (--xs-scr) { - display: none; + @media screen(xs) { + @apply flex; } } .getStartedButton { + @apply mx-2; position: relative; border-radius: 100px; z-index: 1; @@ -47,7 +48,7 @@ opacity: 1; } - @media (--md-scr) { + @media screen(mdMax) { padding: 12px 24px; font-size: 14px; } diff --git a/packages/gatsby-theme-iterative/src/components/LayoutHeader/alert.tsx b/packages/gatsby-theme-iterative/src/components/LayoutHeader/alert.tsx index 3e1e1994..d58718a8 100644 --- a/packages/gatsby-theme-iterative/src/components/LayoutHeader/alert.tsx +++ b/packages/gatsby-theme-iterative/src/components/LayoutHeader/alert.tsx @@ -8,7 +8,15 @@ import * as styles from './styles.module.css' const LayoutAlert: React.FC<{ collapsed: boolean }> | false = ({ collapsed }) => ( -
    +
    🚀 {' '} diff --git a/packages/gatsby-theme-iterative/src/components/LayoutHeader/index.tsx b/packages/gatsby-theme-iterative/src/components/LayoutHeader/index.tsx index 95d052b7..d74cbef9 100644 --- a/packages/gatsby-theme-iterative/src/components/LayoutHeader/index.tsx +++ b/packages/gatsby-theme-iterative/src/components/LayoutHeader/index.tsx @@ -12,67 +12,73 @@ import { useHamburgerMenu } from '../HamburgerMenu' -import { useHeaderIsScrolled } from '../../utils/front/scroll' import { ReactComponent as LogoSVG } from '../../images/dvc_icon-color--square_vector.svg' import * as styles from './styles.module.css' import LayoutAlert from './alert' +import { useInView } from 'react-intersection-observer' + +const LayoutHeader: React.FC = ({ modifiers }) => { + const { ref, inView } = useInView({ rootMargin: '20px 0px 0px 0px' }) + const scrolled = !inView -const LayoutHeader: React.FC> = ({ modifiers }) => { const { opened, handleToggle, handleItemClick } = useHamburgerMenu() - const scrolled = useHeaderIsScrolled() const hasCollapsedModifier = includes(modifiers, LayoutModifiers.Collapsed) const hasHideAlertModifier = includes(modifiers, LayoutModifiers.HideAlert) const collapsed = opened || hasCollapsedModifier || scrolled return ( <> -