Skip to content

Commit

Permalink
Update theme to 0.2.x (#402)
Browse files Browse the repository at this point in the history
  • Loading branch information
yathomasi authored Dec 16, 2022
1 parent 5bbba1f commit 3e3aadf
Show file tree
Hide file tree
Showing 55 changed files with 303 additions and 1,635 deletions.
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.16",
"@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
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;
} */
File renamed without changes.
Loading

0 comments on commit 3e3aadf

Please sign in to comment.