Skip to content

Commit 3f5e0bf

Browse files
KikobeatsKikobeats
authored
Add FAQ Page (#474)
Add FAQ Page
2 parents 5ff243b + 96d8459 commit 3f5e0bf

File tree

14 files changed

+331
-176
lines changed

14 files changed

+331
-176
lines changed

‎src/components/elements/Button/with-spinner.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export default (ChildComponent, spinnertStyle) => {
2020

2121
const SpinnerButton = ({ children, ...props }) => (
2222
<Spinner state='hover' {...props}>
23-
<Flex justify='center' textAlign='center' children={children} />
23+
<Flex justifyContent='center' textAlign='center' children={children} />
2424
</Spinner>
2525
)
2626

‎src/components/elements/Subhead.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ const Subhead = styled(Heading)([])
66

77
Subhead.defaultProps = {
88
as: 'h3',
9-
lineHeight: [0, 1],
9+
lineHeight: 1,
1010
fontWeight: 'regular',
1111
variant: null,
1212
fontSize: [4, 5]

‎src/components/icons/CheckMark.js‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import React from 'react'
2+
import Svg from '../elements/Svg'
3+
4+
export const CheckMark = props => (
5+
<Svg
6+
width='14px'
7+
height='12px'
8+
viewBox='0 0 14 12'
9+
version='1.1'
10+
xmlns='http://www.w3.org/2000/svg'
11+
{...props}
12+
>
13+
<g stroke='none' strokeWidth={1} fill='none' fillRule='evenodd'>
14+
<g>
15+
<rect
16+
fill='#654ea3'
17+
x={0}
18+
y={0}
19+
width='12.4444444'
20+
height={12}
21+
rx={3}
22+
/>{' '}
23+
<path
24+
d='M4,6 L6.19988776,8.12132034'
25+
stroke='#f5f4f9'
26+
strokeWidth='1.5'
27+
strokeLinecap='square'
28+
/>{' '}
29+
<path
30+
d='M6,1.75 L12.5996633,8.11396103'
31+
stroke='#f5f4f9'
32+
strokeWidth='1.5'
33+
strokeLinecap='square'
34+
transform='translate(9.299832, 4.931981) scale(-1, 1) translate(-9.299832, -4.931981) '
35+
/>
36+
</g>
37+
</g>
38+
</Svg>
39+
)

‎src/components/icons/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
export * from './External'
22
export * from './HourGlass'
33
export * from './Safari'
4+
export * from './CheckMark'

‎src/components/pages/embed/examples.js‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import {
55
Caps,
66
Container,
77
Flex,
8-
Image,
98
Input,
109
Text,
1110
ClearbitLogo
@@ -53,7 +52,7 @@ const SearchBox = ({ onSubmit, url, isLoading }) => {
5352
)
5453

5554
return (
56-
<Container py={5} px={4}>
55+
<Container py={[4, 5]} px={4}>
5756
<Header
5857
subtitle='Enter a URL, receive data'
5958
caption='Turn websites into rich media'
@@ -106,15 +105,19 @@ const SearchBox = ({ onSubmit, url, isLoading }) => {
106105

107106
const Examples = ({ demoLinks }) => (
108107
<Container
109-
py={5}
108+
py={[4, 5]}
110109
px={4}
111110
maxWidth='100%'
112111
bg='pinky'
113112
borderTop={`${borders[1]} ${colors.pinkest}`}
114113
borderBottom={`${borders[1]} ${colors.pinkest}`}
115114
>
116-
<Header pb={5} title='Examples' caption='click to see a real example.' />
117-
<Box pt={4}>
115+
<Header
116+
pb={[3, 4]}
117+
title='Examples'
118+
caption='See real examples in action.'
119+
/>
120+
<Box pt={[3, 4]}>
118121
<DemoLinks
119122
children={demoLinks}
120123
onClick={({ brand }) => navigate(`/embed/${brand.toLowerCase()}`)}

‎src/components/pages/embed/template.js‎

Lines changed: 42 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { getHostname } from 'helpers'
55
import humanizeUrl from 'humanize-url'
66
import { Plus } from 'react-feather'
77
import { navigate } from 'gatsby'
8-
import { get } from 'lodash'
8+
import { capitalize, get } from 'lodash'
99
import React from 'react'
1010

1111
import {
@@ -118,19 +118,21 @@ const Hero = ({ humanizedUrl, brand, data }) => {
118118

119119
const logoProvider = (() => {
120120
const LogoProvider = Logo[brand]
121-
if (LogoProvider) return <LogoProvider size='72px' state='hover' />
121+
if (LogoProvider) {
122+
return <LogoProvider size={['36px', '72px']} state='hover' />
123+
}
122124

123125
const logoUrl = get(data, 'logo.url')
124126

125127
if (logoUrl && !logoUrl.endsWith('ico')) {
126-
return <Image size='72px' src={logoUrl} />
128+
return <Image size={['36px', '72px']} src={logoUrl} />
127129
}
128130
})()
129131

130132
const title = (
131133
<Box>
132134
<Flex alignItems='center' justifyContent='center'>
133-
<Logo.Microlink width='72px' />
135+
<Logo.Microlink width={['36px', '72px']} />
134136
{logoProvider && (
135137
<Box ml={3} mr={3}>
136138
<Plus color={colors.gray5} />
@@ -167,6 +169,7 @@ const Sdk = ({ humanizedUrl, data }) => (
167169
borderTop={`${borders[1]} ${colors.pinkest}`}
168170
borderBottom={`${borders[1]} ${colors.pinkest}`}
169171
bg='pinky'
172+
pb={[0, 5]}
170173
>
171174
<Flex
172175
flexDirection='column'
@@ -176,7 +179,7 @@ const Sdk = ({ humanizedUrl, data }) => (
176179
>
177180
<Subheader children={['Microlink SDK', 'Make your content attractive']} />
178181

179-
<Box pb={5} px={4} textAlign={['inherit', 'center']}>
182+
<Box pb={[0, 5]} px={4} textAlign={['inherit', 'center']}>
180183
<Box pt={4}>
181184
<Text mb={[4, 4, 4, 0]} maxWidth={8}>
182185
<Link href='/docs/sdk/getting-started/overview/'>
@@ -189,7 +192,7 @@ const Sdk = ({ humanizedUrl, data }) => (
189192
links into beautiful previews, engaging better your links.
190193
</Text>
191194
</Box>
192-
<Box pt={4}>
195+
<Box pt={[0, 4]} textAlign='center'>
193196
<ButtonSecondary
194197
onClick={() => navigate('/docs/sdk/getting-started/overview/')}
195198
>
@@ -203,7 +206,7 @@ const Sdk = ({ humanizedUrl, data }) => (
203206
</Box>
204207
</Flex>
205208

206-
<Container maxWidth={16} pt={0} pb={0}>
209+
<Container maxWidth={16} pt={0} pb={[4, 0]}>
207210
{[{ size: 'large' }, { size: 'normal' }, { size: 'small' }].map(
208211
({ docLink, ...props }, index) => (
209212
<Flex
@@ -213,18 +216,22 @@ const Sdk = ({ humanizedUrl, data }) => (
213216
key={JSON.stringify(props)}
214217
mr='auto'
215218
ml='auto'
216-
pb={index === 1 ? 5 : 0}
219+
py={index === 1 ? [3, 3, 5, 5] : 0}
217220
>
218-
<Box width={500}>
219-
<Text mb={1} color='gray8' fontSize={0}>
220-
{props.size}
221-
</Text>
221+
<Box width={500} p={[4, 4, 0]}>
222+
<Heading
223+
variant={null}
224+
pb={[4, 3]}
225+
textAlign='left'
226+
fontSize={[2, 3]}
227+
children={capitalize(props.size)}
228+
/>
222229
<Microlink
223230
setData={{ ...data, logo: data.logo || DEFAULT_LOGO }}
224231
{...props}
225232
/>
226233
</Box>
227-
<Box mt={[3, 3, 3, 0]} width={500}>
234+
<Box width={500} px={4}>
228235
<MultiCodeEditor
229236
languages={generateLanguages({ ...props, url: data.url })}
230237
/>
@@ -239,7 +246,7 @@ const Sdk = ({ humanizedUrl, data }) => (
239246
const Features = ({ children }) => (
240247
<Container id='features'>
241248
<Header title='Features' caption='Capabilities under the hood.' />
242-
<Box as='section' pt={4}>
249+
<Box as='section' pt={[3, 4]}>
243250
<Hide breakpoints={[0, 1]}>
244251
<Grid children={children} itemsPerRow={3} />
245252
</Hide>
@@ -258,6 +265,7 @@ const Api = ({ data }) => {
258265
borderTop={`${borders[1]} ${colors.pinkest}`}
259266
borderBottom={`${borders[1]} ${colors.pinkest}`}
260267
bg='pinky'
268+
pb={[0, 5]}
261269
>
262270
<Flex
263271
flexDirection='column'
@@ -267,15 +275,15 @@ const Api = ({ data }) => {
267275
>
268276
<Subheader children={['Microlink API', 'Build APIs from websites']} />
269277

270-
<Box pb={5} px={4} textAlign={['inherit', 'center']}>
278+
<Box pb={[0, 5]} px={4} textAlign={['inherit', 'center']}>
271279
<Box pt={4}>
272280
<Text mb={[4, 4, 4, 0]} maxWidth={8}>
273281
Microlink Query Language (
274282
<Link href='/docs/mql/getting-started/overview'>MQL</Link>) is a
275283
programmatic way to getting content from any URL.
276284
</Text>
277285
</Box>
278-
<Box pt={4}>
286+
<Box pt={[0, 4]} textAlign='center'>
279287
<ButtonSecondary
280288
onClick={() => navigate('/docs/mql/getting-started/overview')}
281289
>
@@ -297,21 +305,31 @@ const Api = ({ data }) => {
297305
flexDirection={['column', 'column', 'column', 'row']}
298306
alignItems={['center', 'center', 'center', 'baseline']}
299307
>
300-
<Box width={500}>
301-
<Text mb={1} color='gray8' fontSize={1}>
302-
using MQL (
308+
<Box width={500} p={[4, 4, 0]}>
309+
<Heading
310+
variant={null}
311+
pb={[4, 3]}
312+
textAlign='left'
313+
fontSize={[2, 3]}
314+
>
315+
Using MQL (
303316
<Link href='/docs/mql/getting-started/overview'>docs</Link>)
304-
</Text>
317+
</Heading>
305318
<CodeEditor
306319
language='javascript'
307320
children={generateMqlCode(data)}
308321
/>
309322
</Box>
310-
<Box mt={[3, 3, 3, 0]} width={500}>
311-
<Text mb={1} color='gray8' fontSize={1}>
312-
using Microlink CLI (
323+
<Box width={500} p={[4, 4, 0]} pt={0}>
324+
<Heading
325+
variant={null}
326+
pb={[4, 3]}
327+
textAlign='left'
328+
fontSize={[2, 3]}
329+
>
330+
Using Microlink CLI (
313331
<Link href='/docs/api/getting-started/cli'>docs</Link>)
314-
</Text>
332+
</Heading>
315333
<Box mb={3}>
316334
<CodeEditor
317335
language='bash'

‎src/components/pages/screenshot/examples.js‎

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -185,7 +185,7 @@ const SearchBox = ({ onSubmit, url, isLoading }) => {
185185
}
186186

187187
return (
188-
<Container py={5} px={4}>
188+
<Container py={[4, 5]} px={4}>
189189
<Header
190190
subtitle='Take a screenshot of any website'
191191
caption='Turn websites into a snapshot'
@@ -195,6 +195,8 @@ const SearchBox = ({ onSubmit, url, isLoading }) => {
195195
pt={2}
196196
pb={3}
197197
as='form'
198+
maxWidth={aspectRatio.widths}
199+
mx='auto'
198200
justifyContent='center'
199201
onSubmit={handleSubmit}
200202
flexDirection={['column', 'row', 'row', 'row']}
@@ -212,7 +214,7 @@ const SearchBox = ({ onSubmit, url, isLoading }) => {
212214
type='text'
213215
value={inputUrl}
214216
onChange={event => setInputUrl(event.target.value)}
215-
width='100px'
217+
width={['100%', '100px']}
216218
/>
217219
</Box>
218220

@@ -222,7 +224,7 @@ const SearchBox = ({ onSubmit, url, isLoading }) => {
222224
id='screenshot-demo-waitfor'
223225
type='text'
224226
fontSize={2}
225-
width='74px'
227+
width={['100%', '74px']}
226228
mr='6px'
227229
value={inputWaitFor}
228230
onChange={event => setInputWaitFor(event.target.value)}
@@ -237,7 +239,7 @@ const SearchBox = ({ onSubmit, url, isLoading }) => {
237239
id='screenshot-demo-overlay'
238240
type='text'
239241
fontSize={2}
240-
width='73px'
242+
width={['100%', '73px']}
241243
mr='6px'
242244
value={inputOverlay}
243245
onChange={event => setInputOverlay(event.target.value)}
@@ -256,7 +258,7 @@ const SearchBox = ({ onSubmit, url, isLoading }) => {
256258
id='screenshot-demo-background'
257259
type='text'
258260
fontSize={2}
259-
width='105px'
261+
width={['100%', '105px']}
260262
mr='6px'
261263
value={inputBg}
262264
onChange={event => setInputBg(event.target.value)}
@@ -301,15 +303,19 @@ const SearchBox = ({ onSubmit, url, isLoading }) => {
301303

302304
const Examples = ({ demoLinks }) => (
303305
<Container
304-
py={5}
306+
py={[4, 5]}
305307
px={4}
306308
maxWidth='100%'
307309
bg='pinky'
308310
borderTop={`${borders[1]} ${colors.pinkest}`}
309311
borderBottom={`${borders[1]} ${colors.pinkest}`}
310312
>
311-
<Header pb={5} title='Examples' caption='click to see a real example.' />
312-
<Box pt={4}>
313+
<Header
314+
pb={[3, 4]}
315+
title='Examples'
316+
caption='See real examples in action.'
317+
/>
318+
<Box pt={[3, 4]}>
313319
<DemoLinks
314320
children={demoLinks}
315321
onClick={({ brand }) => navigate(`/screenshot/${brand.toLowerCase()}`)}

0 commit comments

Comments
 (0)