Update theme to 0.2.x #402
Conversation
shcheklein
had a problem deploying
to
cml-dev-update-theme-xdnnu7hzr
Link Check ReportThere were no links to check! |
| import React, { useEffect, useState } from 'react' | ||
| import Promise from 'promise-polyfill' | ||
| import { loadResource } from '@dvcorg/gatsby-theme-iterative/src/utils/front/resources' | ||
|
|
||
| import * as styles from '@dvcorg/gatsby-theme-iterative/src/components/Documentation/Layout/SearchForm/styles.module.css' | ||
|
|
||
| declare global { | ||
| // eslint-disable-next-line @typescript-eslint/naming-convention | ||
| interface Window { | ||
| docsearch?: (opts: object) => void | ||
| } | ||
| } | ||
|
|
||
| const apiKey = '3e17d424c7a90fede27b848fb01c0dc2' | ||
| const appId = '1O03WAGL0D' | ||
| const indexName = 'cml' | ||
|
|
||
| const SearchForm: React.FC = props => { | ||
| const [searchAvailable, setSearchAvailable] = useState<boolean>(false) | ||
| useEffect(() => { | ||
| console.log({ window, docSearch: window?.docsearch }) | ||
| if (window) { | ||
| if (!window.docsearch) { | ||
| Promise.all([ | ||
| loadResource( | ||
| 'https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn/docsearch.min.css' | ||
| ), | ||
| loadResource( | ||
| 'https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn/docsearch.min.js' | ||
| ) | ||
| ]).then(() => { | ||
| if (window.docsearch) { | ||
| window.docsearch({ | ||
| appId, | ||
| apiKey, | ||
| indexName, | ||
| inputSelector: '#doc-search', | ||
| debug: false // Set to `true` if you want to inspect the dropdown | ||
| }) | ||
| setSearchAvailable(true) | ||
| } | ||
| }) | ||
| } else { | ||
| window.docsearch({ | ||
| appId, | ||
| apiKey, | ||
| indexName, | ||
| inputSelector: '#doc-search', | ||
| debug: false // Set to `true` if you want to inspect the dropdown | ||
| }) | ||
| setSearchAvailable(true) | ||
| } | ||
| } | ||
| }, []) | ||
|
|
||
| return ( | ||
| <div className={styles.searchArea}> | ||
| <div className={styles.container}> | ||
| <input | ||
| className={styles.input} | ||
| type="text" | ||
| id="doc-search" | ||
| placeholder="Search docs" | ||
| disabled={!searchAvailable} | ||
| {...props} | ||
| /> | ||
| </div> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export default SearchForm |
There was a problem hiding this comment.
We'll have to follow up on making this more reusable
There was a problem hiding this comment.
Yes, we have had this pending for a while
| import React from 'react' | ||
| import SmartLink from '../../../atoms/SmartLink' | ||
| import SmartLink from '../../../../../components/atoms/SmartLink' | ||
| import * as styles from './styles.module.css' | ||
|
|
||
| const Alert: React.FC = () => ( |
There was a problem hiding this comment.
We should be able to drop the Alert component and let the theme control it now.
gatsby-browser.js
Outdated
| import React from 'react' | ||
|
|
||
| import ModesProvider from './src/components/organisms/SwitchableMode/Provider' | ||
|
|
||
| export const wrapRootElement = ({ element }) => ( | ||
| <ModesProvider>{element}</ModesProvider> | ||
| ) |
There was a problem hiding this comment.
I think it'd be better to just wrap our components in the normal React area in this rather than use the wrapRootElement escape hatch.
|
|
I just used the same approach 😄. It's working fine locally and let's see how it goes to preview deployment as the previous one was also fine locally but not on preview deployment. |
|
Looking great! I've been clicking around and can only see one final thing wrong: we need After that, I think we're ready for approval! 2022-12-14.22-50-15.mp4 |
There was a problem hiding this comment.
Fantastic work @yathomasi! The scroll margin issue is fixed enough, and now I can't find any showstoppers browsing around the deploy or looking through the code.
| @@ -15,7 +15,7 @@ import { | |||
| } from "../../../../gatsby-plugin-theme-ui/components" | |||
|
|
|||
| const UseCasesSection: React.ForwardRefRenderFunction<HTMLElement> = () => ( | |||
| <section id="use-cases"> | |||
| <section id="use-cases" style={{scrollMarginTop:"-3.5rem"}} > | |||
There was a problem hiding this comment.
might want to do this with tailwind but not a huge deal right now.
There was a problem hiding this comment.
It didn't do well with the tailwind so I had to increase specificity with inline CSS.
Similar to iterative/dvc.org#4118 for
cml.dev.Depends on Update theme for cml.dev gatsby-theme-iterative#139 to merge and ship.