Skip to content

Commit 9201867

Browse files
benfacebenface
authored
Update Supported Networks on Get Started page + visual improvements to search (#600)
* Update Supported Networks on Get Started page + visual improvements to search * Better variable name
1 parent 343be90 commit 9201867

File tree

11 files changed

+861
-984
lines changed

11 files changed

+861
-984
lines changed

‎package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,14 +25,14 @@
2525
"eslint": "^8.56.0",
2626
"eslint-plugin-mdx": "^2.3.4",
2727
"husky": "^9.0.10",
28-
"lint-staged": "^15.2.1",
29-
"prettier": "^3.2.4",
28+
"lint-staged": "^15.2.2",
29+
"prettier": "^3.2.5",
3030
"remark-frontmatter": "^5.0.0",
3131
"remark-lint-first-heading-level": "^3.1.2",
3232
"remark-lint-heading-increment": "^3.1.2",
3333
"remark-lint-no-heading-punctuation": "^3.1.2",
3434
"remark-lint-restrict-elements": "workspace:*",
35-
"turbo": "^1.12.2",
35+
"turbo": "^1.12.3",
3636
"typescript": "^5.3.3"
3737
},
3838
"lint-staged": {

‎packages/nextra-theme/package.json‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -39,16 +39,16 @@
3939
"@radix-ui/react-collapsible": "^1.0.3",
4040
"@radix-ui/react-visually-hidden": "^1.0.3",
4141
"lodash": "^4.17.21",
42-
"react-intersection-observer": "^9.6.0",
42+
"react-intersection-observer": "^9.7.0",
4343
"react-use": "^17.5.0"
4444
},
4545
"devDependencies": {
46-
"@edgeandnode/gds": "^3.6.3",
47-
"@edgeandnode/go": "^4.7.2",
46+
"@edgeandnode/gds": "^3.8.0",
47+
"@edgeandnode/go": "^4.9.0",
4848
"@emotion/react": "^11.11.3",
4949
"@types/lodash": "^4.14.202",
50-
"@types/react": "^18.2.51",
51-
"@types/react-dom": "^18.2.18",
50+
"@types/react": "^18.2.55",
51+
"@types/react-dom": "^18.2.19",
5252
"next": "^14.1.0",
5353
"next-seo": "^6.4.0",
5454
"nextra": "^2.13.3",

‎packages/nextra-theme/src/components/DocSearch.tsx‎

Lines changed: 37 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { DocSearchModal, DocSearchProps, useDocSearchKeyboardEvents } from '@docsearch/react'
2+
import { keyframes } from '@emotion/react'
23
import { useCallback, useRef, useState } from 'react'
34
import { createPortal } from 'react-dom'
45
import { Global } from 'theme-ui'
@@ -12,6 +13,7 @@ import {
1213
FontSize,
1314
FontWeight,
1415
Icon,
16+
LineHeight,
1517
Link,
1618
Opacity,
1719
Responsive,
@@ -20,6 +22,11 @@ import {
2022
useTheme,
2123
} from '@edgeandnode/gds'
2224

25+
const animationFadeIn = keyframes({
26+
from: { opacity: 0 },
27+
to: { opacity: 1 },
28+
})
29+
2330
export function DocSearch(props: DocSearchProps) {
2431
const searchButtonRef = useRef<HTMLButtonElement>(null)
2532
const [isOpen, setIsOpen] = useState(false)
@@ -153,30 +160,33 @@ export function DocSearch(props: DocSearchProps) {
153160
'--docsearch-spacing': '0 !important',
154161
'--docsearch-container-background': `${theme.colors!.Midnight88} !important`,
155162
'--docsearch-modal-width': 'min(calc(100vw - 32px), 840px) !important',
156-
'--docsearch-modal-background': '#292738 !important',
163+
'--docsearch-modal-background': `${theme.colors!.Tooltip} !important`,
157164
'--docsearch-modal-shadow': 'none !important',
158-
'--docsearch-searchbox-height': '96px !important',
165+
'--docsearch-searchbox-height': ['64px !important', null, '96px !important'],
159166
'--docsearch-searchbox-focus-background': 'transparent !important',
160167
'--docsearch-searchbox-shadow': 'none !important',
161168
'--docsearch-hit-background': 'transparent !important',
162169
'--docsearch-hit-color': `${theme.colors!.White88} !important`,
163170
'--docsearch-hit-active-color': `${theme.colors!.White} !important`,
164171
'--docsearch-highlight-color': `${theme.colors!.Purple} !important`,
165172
},
173+
'.DocSearch-Container': {
174+
animation: `${animationFadeIn} 150ms ease-in-out`,
175+
},
166176
'.DocSearch-Modal': {
167177
m: [null, null, '96px auto auto'],
168-
border: buildBorder('White8'),
178+
border: [null, null, 'White8'],
169179
overflow: 'hidden',
170180
cursor: 'default',
171181
},
172182
'.DocSearch-SearchBar': {
173-
p: `0 ${Spacing['24px']}`,
183+
p: [`0 ${Spacing['16px']}`, null, `0 ${Spacing['24px']}`],
174184
'&::after': {
175185
content: `''`,
176186
zIndex: 100,
177187
position: 'absolute',
178-
left: Spacing['24px'],
179-
right: Spacing['24px'],
188+
left: [Spacing['16px'], null, Spacing['24px']],
189+
right: [Spacing['16px'], null, Spacing['24px']],
180190
bottom: '-1px',
181191
borderBottom: buildBorder('White16'),
182192
bg: 'var(--docsearch-modal-background)',
@@ -188,10 +198,15 @@ export function DocSearch(props: DocSearchProps) {
188198
'.DocSearch-MagnifierLabel, .DocSearch-LoadingIndicator': {
189199
color: 'white',
190200
svg: {
191-
width: '18px',
192-
height: '18px',
201+
width: '20px',
202+
height: '20px',
193203
},
194204
},
205+
'.DocSearch-Search-Icon': {
206+
left: '3px',
207+
color: 'transparent',
208+
backgroundImage: `url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="fill: white;"><path fill-rule="evenodd" clip-rule="evenodd" d="M6.70768 1C9.85995 1 12.4154 3.55542 12.4154 6.70768C12.4154 8.08963 11.9242 9.35686 11.107 10.3444C11.3349 10.5734 11.6474 10.8859 12.0424 11.2809L12.4833 11.7218C13.1109 12.3494 13.8972 13.1357 14.8423 14.0808C15.0526 14.2911 15.0526 14.632 14.8423 14.8423C14.632 15.0526 14.2911 15.0526 14.0808 14.8423L10.3444 11.107C9.35686 11.9242 8.08963 12.4154 6.70768 12.4154C3.55542 12.4154 1 9.85995 1 6.70768C1 3.55542 3.55542 1 6.70768 1ZM6.70768 2.07692C4.15018 2.07692 2.07692 4.15018 2.07692 6.70768C2.07692 9.26518 4.15018 11.3384 6.70768 11.3384C9.26518 11.3384 11.3384 9.26518 11.3384 6.70768C11.3384 4.15018 9.26518 2.07692 6.70768 2.07692Z" /></svg>')`,
209+
},
195210
'.DocSearch-Input': {
196211
p: `${Spacing['32px']} ${Spacing['16px']}`,
197212
outline: 'none',
@@ -232,9 +247,10 @@ export function DocSearch(props: DocSearchProps) {
232247
'.DocSearch-Hit-source': {
233248
m: 0,
234249
mb: Spacing['2px'],
235-
p: `0 ${Spacing['16px']}`,
250+
p: `${Spacing['8px']} ${Spacing['16px']}`,
236251
fontWeight: FontWeight.MEDIUM,
237252
fontSize: FontSize['12px'],
253+
lineHeight: LineHeight.TIGHT,
238254
textTransform: 'uppercase',
239255
letterSpacing: '0.15em',
240256
color: 'White32',
@@ -327,8 +343,19 @@ export function DocSearch(props: DocSearchProps) {
327343
},
328344
'.DocSearch-NoResults-Prefill-List': {
329345
p: 0,
330-
mt: Spacing['32px'],
346+
mt: Spacing['48px'],
331347
textAlign: 'center',
348+
ul: {
349+
display: 'flex',
350+
flexDirection: 'column',
351+
gap: Spacing['8px'],
352+
li: {
353+
listStyle: 'none',
354+
},
355+
},
356+
},
357+
'.DocSearch-Prefill': {
358+
fontWeight: FontWeight.REGULAR,
332359
},
333360
}}
334361
/>

‎packages/nextra-theme/src/layout/MDXLayoutOutline.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ export const MDXLayoutOutline = () => {
3030
<EditPageLink sx={{ mt: Spacing['4px'] }} />
3131
{headings.length > 0 ? (
3232
<>
33-
<Divider sx={{ my: Spacing['24px'] }} />
33+
<Divider sx={{ mt: '20px', mb: Spacing['24px'] }} />
3434
<nav sx={{ paddingInlineEnd: '16px' }}>
3535
<Text.C10 as="header" color="White64" sx={{ mb: Spacing['12px'] }}>
3636
{t('global.pageSections')}

‎packages/og-image/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,11 @@
1717
},
1818
"devDependencies": {
1919
"@cloudflare/workers-types": "^4.20240129.0",
20-
"@types/react": "^18.2.51",
20+
"@types/react": "^18.2.55",
2121
"jest-image-snapshot": "^6.4.0",
2222
"tsx": "^4.7.0",
2323
"typescript": "^5.3.3",
2424
"vitest": "^0.34.6",
25-
"wrangler": "^3.26.0"
25+
"wrangler": "^3.27.0"
2626
}
2727
}

0 commit comments

Comments
 (0)