Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update theme to 0.2.x #402

Merged
merged 22 commits into from
Dec 16, 2022
Merged
Show file tree
Hide file tree
Changes from 21 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 0 additions & 2 deletions gatsby-browser.js

This file was deleted.

3 changes: 1 addition & 2 deletions gatsby-config.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
},
{
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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.14",
"@emotion/react": "^11.10.4",
"@emotion/styled": "^11.10.4",
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
import React, { useEffect, useState } from 'react'
import Promise from 'promise-polyfill'
import { loadResource } from '@dvcorg/gatsby-theme-iterative/src/utils/front/resources'

import * as styles from '@dvcorg/gatsby-theme-iterative/src/components/Documentation/Layout/SearchForm/styles.module.css'

declare global {
// eslint-disable-next-line @typescript-eslint/naming-convention
interface Window {
docsearch?: (opts: object) => void
}
}

const apiKey = '3e17d424c7a90fede27b848fb01c0dc2'
const appId = '1O03WAGL0D'
const indexName = 'cml'

const SearchForm: React.FC = props => {
const [searchAvailable, setSearchAvailable] = useState<boolean>(false)
useEffect(() => {
console.log({ window, docSearch: window?.docsearch })
if (window) {
if (!window.docsearch) {
Promise.all([
loadResource(
'https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn/docsearch.min.css'
),
loadResource(
'https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn/docsearch.min.js'
)
]).then(() => {
if (window.docsearch) {
window.docsearch({
appId,
apiKey,
indexName,
inputSelector: '#doc-search',
debug: false // Set to `true` if you want to inspect the dropdown
})
setSearchAvailable(true)
}
})
} else {
window.docsearch({
appId,
apiKey,
indexName,
inputSelector: '#doc-search',
debug: false // Set to `true` if you want to inspect the dropdown
})
setSearchAvailable(true)
}
}
}, [])

return (
<div className={styles.searchArea}>
<div className={styles.container}>
<input
className={styles.input}
type="text"
id="doc-search"
placeholder="Search docs"
disabled={!searchAvailable}
{...props}
/>
</div>
</div>
)
}

export default SearchForm
Comment on lines +1 to +72
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We'll have to follow up on making this more reusable

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, we have had this pending for a while

Original file line number Diff line number Diff line change
@@ -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;
}

Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -106,7 +103,7 @@
transform: translateX(calc(100vw - 60px));
}

@media (--sm-scr) {
@media screen(xsMax) {
display: flex;

> * {
Expand All @@ -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%;
}
}
Original file line number Diff line number Diff line change
@@ -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'
Expand Down
Original file line number Diff line number Diff line change
@@ -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 = () => (
<div className={styles.alert}>
<div className={styles.text}>
<p>
<AlertContent />
</p>
</div>
</div>
)

export default Alert
Original file line number Diff line number Diff line change
Expand Up @@ -48,5 +48,9 @@
color: rgba(58 45 76 / 70%);
opacity: 0.7;
}

&:visited {
color: inherit;
}
}
}
Original file line number Diff line number Diff line change
@@ -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'
Expand All @@ -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
Expand Down Expand Up @@ -155,7 +155,9 @@ const Header: React.FC<IHeaderProps> = ({ isMain }) => {
variant="layout.Header"
className={isMain ? '' : styles.headerForDoc}
sx={
isMain ? { backgroundColor: 'transparent' } : { position: 'sticky' }
isMain
? { backgroundColor: 'transparent' }
: { position: 'fixed', width: '100%' }
}
>
{isMain && <Alert />}
Expand Down Expand Up @@ -265,22 +267,22 @@ const Header: React.FC<IHeaderProps> = ({ isMain }) => {
</Flex>
</Box>
</Container>
{!isMain && (
<>
<HamburgerButton
opened={opened}
collapsed={collapsed}
handleClick={handleToggle}
/>
<HamburgerMenu
opened={opened}
collapsed={collapsed}
handleToggle={handleToggle}
handleItemClick={handleItemClick}
/>
</>
)}
</Box>
{!isMain && (
<>
<HamburgerButton
opened={opened}
collapsed={collapsed}
handleClick={handleToggle}
/>
<HamburgerMenu
opened={opened}
collapsed={collapsed}
handleToggle={handleToggle}
handleItemClick={handleItemClick}
/>
</>
)}
</>
)
}
Expand Down
Original file line number Diff line number Diff line change
@@ -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;
}
}
}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
--color-black: #24292e;
--color-gray-light: #b0b8c5;
Expand Down Expand Up @@ -34,7 +38,8 @@ html {
}

body {
font-family: var(--font-sans);
@apply font-sans;

font-weight: 400;
line-height: 1.5;
}
Expand Down Expand Up @@ -92,3 +97,8 @@ body.user-is-tabbing .link-with-focus {
* {
text-size-adjust: none;
}

/* svg {
display: inline;
vertical-align: unset;
} */
Loading