├── .gitattributes
├── src
    ├── lib
    │   ├── noop.js
    │   ├── to-px.js
    │   ├── is-ssr.js
    │   ├── aspect-ratio-16-9.js
    │   ├── is-dev.js
    │   ├── is-editor.js
    │   ├── is-mac.js
    │   ├── debounce.js
    │   ├── eq.js
    │   ├── is-empty.js
    │   ├── pick-by.js
    │   ├── clipboard.js
    │   ├── screenshot-url.js
    │   ├── share-code.js
    │   ├── notification.js
    │   ├── compress-json.js
    │   └── local-storage.js
    ├── components
    │   ├── presets
    │   │   ├── scope.js
    │   │   ├── index.js
    │   │   ├── simple.js
    │   │   ├── microlink.js
    │   │   ├── bytesandhumans.js
    │   │   ├── article.js
    │   │   ├── rauchg.js
    │   │   ├── news.js
    │   │   ├── vercell.js
    │   │   ├── fauna.js
    │   │   └── thepracticaldev.js
    │   ├── if.js
    │   ├── icons
    │   │   ├── svg.js
    │   │   ├── info.js
    │   │   ├── theme.js
    │   │   ├── keyboard.js
    │   │   └── github.js
    │   ├── link.js
    │   ├── code.js
    │   ├── button.js
    │   ├── main.js
    │   ├── button-icon.js
    │   ├── choose.js
    │   ├── lazy-image.js
    │   ├── tabs.js
    │   ├── overlay.js
    │   ├── inline.macro.js
    │   ├── searchable-select.js
    │   ├── drag-bars.js
    │   ├── live-editor.js
    │   └── json-viewer.js
    ├── hooks
    │   ├── use-loading.js
    │   ├── use-key-bindings.js
    │   ├── use-query-state.js
    │   └── use-screenshot-url.js
    ├── pages
    │   ├── _document.js
    │   ├── _app.js
    │   └── index.js
    └── theme.js
├── .npmrc
├── README.md
├── .babelrc
├── jsconfig.json
├── next.config.js
├── .editorconfig
├── .gitignore
├── .travis.yml
├── LICENSE.md
├── package.json
└── CHANGELOG.md


/.gitattributes:
--------------------------------------------------------------------------------
1 | * text=auto
2 | 


--------------------------------------------------------------------------------
/src/lib/noop.js:
--------------------------------------------------------------------------------
1 | export default () => {}
2 | 


--------------------------------------------------------------------------------
/src/lib/to-px.js:
--------------------------------------------------------------------------------
1 | export default n => `${n}px`
2 | 


--------------------------------------------------------------------------------
/src/lib/is-ssr.js:
--------------------------------------------------------------------------------
1 | export default typeof window === 'undefined'
2 | 


--------------------------------------------------------------------------------
/src/lib/aspect-ratio-16-9.js:
--------------------------------------------------------------------------------
1 | export default width => (width * 9) / 16
2 | 


--------------------------------------------------------------------------------
/src/lib/is-dev.js:
--------------------------------------------------------------------------------
1 | export default process.env.NODE_ENV === 'development'
2 | 


--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | unsafe-perm=true
2 | save-prefix=~
3 | shrinkwrap=false
4 | save=false
5 | 


--------------------------------------------------------------------------------
/src/lib/is-editor.js:
--------------------------------------------------------------------------------
1 | export default Router => Router.asPath.startsWith('/editor')
2 | 


--------------------------------------------------------------------------------
/src/lib/is-mac.js:
--------------------------------------------------------------------------------
1 | import isSSR from './is-ssr'
2 | export default !isSSR && window.navigator.platform.match('Mac')
3 | 


--------------------------------------------------------------------------------
/src/lib/debounce.js:
--------------------------------------------------------------------------------
1 | import { debounce } from 'throttle-debounce'
2 | export default (fn, ms = 600) => debounce(ms, fn)
3 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | <div align="center">
2 |   <img src="https://cdn.microlink.io/banner/cards.png" alt="microlink cards">
3 | </div>
4 | 


--------------------------------------------------------------------------------
/src/lib/eq.js:
--------------------------------------------------------------------------------
1 | import stringify from 'fast-safe-stringify'
2 | export default (str1, str2) => stringify(str1) === stringify(str2)
3 | 


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": ["next/babel"],
3 |   "plugins": ["macros", ["babel-plugin-styled-components", { "ssr": true }]]
4 | }
5 | 


--------------------------------------------------------------------------------
/src/lib/is-empty.js:
--------------------------------------------------------------------------------
1 | export default obj =>
2 |   [Object, Array].includes((obj || {}).constructor) &&
3 |   !Object.entries(obj || {}).length
4 | 


--------------------------------------------------------------------------------
/src/lib/pick-by.js:
--------------------------------------------------------------------------------
1 | export default obj => {
2 |   Object.keys(obj).forEach(key => obj[key] == null && delete obj[key])
3 |   return obj
4 | }
5 | 


--------------------------------------------------------------------------------
/src/components/presets/scope.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components'
2 | import Link from '../link'
3 | 
4 | export * from 'theme-ui'
5 | export { Link, styled }
6 | 


--------------------------------------------------------------------------------
/src/lib/clipboard.js:
--------------------------------------------------------------------------------
1 | export const read = async () => navigator.clipboard.readText()
2 | export const write = async text => navigator.clipboard.writeText(text)
3 | export default { read, write }
4 | 


--------------------------------------------------------------------------------
/src/lib/screenshot-url.js:
--------------------------------------------------------------------------------
1 | import { getApiUrl } from '@microlink/mql'
2 | 
3 | export default (url, opts) => {
4 |   const [screenshotUrl] = getApiUrl(url, opts)
5 |   return screenshotUrl
6 | }
7 | 


--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "baseUrl": ".",
 4 |     "paths": {
 5 |       "@/package.json": ["./package.json"],
 6 |       "@/*": ["./src/*"]
 7 |     }
 8 |   }
 9 | }
10 | 


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   experimental: {
 3 |     jsconfigPaths: true
 4 |   },
 5 |   exportTrailingSlash: true,
 6 |   exportPathMap: function () {
 7 |     return {
 8 |       '/': { page: '/' },
 9 |       '/editor': { page: '/' }
10 |     }
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/src/lib/share-code.js:
--------------------------------------------------------------------------------
1 | export default url => `<meta name="twitter:card" content="summary_large_image" />
2 | <meta name="image" content="${url}" />
3 | <meta itemprop="image" content="${url}" />
4 | <meta name="twitter:image" content="${url}" />
5 | <meta property="og:image" content="${url}" />`
6 | 


--------------------------------------------------------------------------------
/src/lib/notification.js:
--------------------------------------------------------------------------------
 1 | import { createSnackbar } from '@snackbar/core'
 2 | 
 3 | export default (text, props) =>
 4 |   createSnackbar(text, {
 5 |     actions: [
 6 |       {
 7 |         text: '×'
 8 |       }
 9 |     ],
10 |     timeout: 2000,
11 |     maxStack: 2,
12 |     ...props
13 |   })
14 | 


--------------------------------------------------------------------------------
/src/lib/compress-json.js:
--------------------------------------------------------------------------------
1 | import Msgpack from 'msgpack5'
2 | import URLSafeBase64 from 'urlsafe-base64'
3 | 
4 | const msgpack = new Msgpack()
5 | 
6 | export const marshall = value => URLSafeBase64.encode(msgpack.encode(value))
7 | 
8 | export const unmarshall = value => msgpack.decode(URLSafeBase64.decode(value))
9 | 


--------------------------------------------------------------------------------
/src/components/if.js:
--------------------------------------------------------------------------------
 1 | import PropTypes from 'prop-types'
 2 | 
 3 | const If = props =>
 4 |   props.condition ? (props.render ? props.render() : props.children) : null
 5 | 
 6 | If.propTypes = {
 7 |   condition: PropTypes.bool.isRequired,
 8 |   children: PropTypes.node,
 9 |   render: PropTypes.func
10 | }
11 | 
12 | export default If
13 | 


--------------------------------------------------------------------------------
/src/lib/local-storage.js:
--------------------------------------------------------------------------------
 1 | /* global localStorage */
 2 | 
 3 | import isSSR from './is-ssr'
 4 | import noop from './noop'
 5 | 
 6 | export const get = isSSR ? noop : window.localStorage.getItem.bind(localStorage)
 7 | export const set = isSSR ? noop : window.localStorage.setItem.bind(localStorage)
 8 | 
 9 | export default { get, set }
10 | 


--------------------------------------------------------------------------------
/src/components/icons/svg.js:
--------------------------------------------------------------------------------
 1 | import styled from 'styled-components'
 2 | 
 3 | const Svg = styled('svg')``
 4 | 
 5 | export default ({ color, size, ...props }) => (
 6 |   <Svg
 7 |     xmlns='http://www.w3.org/2000/svg'
 8 |     fill={color}
 9 |     stroke={color}
10 |     width={size}
11 |     height={size}
12 |     {...props}
13 |   />
14 | )
15 | 


--------------------------------------------------------------------------------
/src/components/link.js:
--------------------------------------------------------------------------------
 1 | import { useEffect } from 'react'
 2 | 
 3 | export default props => {
 4 |   useEffect(() => {
 5 |     const link = document.createElement('link')
 6 |     Object.keys(props).forEach(key => (link[key] = props[key]))
 7 |     document.head.appendChild(link)
 8 |     return () => document.head.removeChild(link)
 9 |   }, [])
10 |   return false
11 | }
12 | 


--------------------------------------------------------------------------------
/src/components/code.js:
--------------------------------------------------------------------------------
 1 | import { Box } from 'theme-ui'
 2 | 
 3 | export default ({ sx, ...props }) => (
 4 |   <Box
 5 |     as='pre'
 6 |     sx={{
 7 |       cursor: 'pointer',
 8 |       borderRadius: 2,
 9 |       overflow: 'auto',
10 |       border: 1,
11 |       width: '100%',
12 |       p: 3,
13 |       userSelect: 'all',
14 |       ...sx
15 |     }}
16 |     {...props}
17 |   />
18 | )
19 | 


--------------------------------------------------------------------------------
/src/components/button.js:
--------------------------------------------------------------------------------
 1 | import { Button } from 'theme-ui'
 2 | 
 3 | export default ({ sx, ...props }) => (
 4 |   <Button
 5 |     sx={{
 6 |       cursor: 'pointer',
 7 |       borderRadius: 2,
 8 |       py: ['4px', '4px', '8px', '8px'],
 9 |       px: ['6px', '6px', '12px', '12px'],
10 |       outline: 0,
11 |       fontSize: 1,
12 |       ...sx
13 |     }}
14 |     {...props}
15 |   />
16 | )
17 | 


--------------------------------------------------------------------------------
/src/components/main.js:
--------------------------------------------------------------------------------
 1 | import styled from 'styled-components'
 2 | import { Box } from 'theme-ui'
 3 | 
 4 | const Main = styled(Box)`
 5 |   /* Take the remaining width */
 6 |   flex: 1;
 7 | 
 8 |   /* Make it scrollable */
 9 |   overflow: auto;
10 | 
11 |   display: flex;
12 |   flex-direction: column;
13 | `
14 | 
15 | Main.defaultProps = {
16 |   as: 'main'
17 | }
18 | 
19 | export default Main
20 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # https://editorconfig.org
 2 | 
 3 | root = true
 4 | 
 5 | [*]
 6 | indent_style = space
 7 | indent_size = 2
 8 | end_of_line = lf
 9 | charset = utf-8
10 | trim_trailing_whitespace = true
11 | insert_final_newline = true
12 | max_line_length = 80
13 | indent_brace_style = 1TBS
14 | spaces_around_operators = true
15 | quote_type = auto
16 | 
17 | [package.json]
18 | indent_style = space
19 | indent_size = 2
20 | 


--------------------------------------------------------------------------------
/src/components/icons/info.js:
--------------------------------------------------------------------------------
 1 | import Svg from './svg'
 2 | 
 3 | export default ({ size = '24', ...props }) => (
 4 |   <Svg
 5 |     xmlns='http://www.w3.org/2000/svg'
 6 |     strokeWidth='0'
 7 |     viewBox='0 0 24 24'
 8 |     size={size}
 9 |     {...props}
10 |   >
11 |     <path
12 |       stroke='none'
13 |       d='M11 17h2v-6h-2v6zm1-15C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zM11 9h2V7h-2v2z'
14 |     />
15 |   </Svg>
16 | )
17 | 


--------------------------------------------------------------------------------
/src/hooks/use-loading.js:
--------------------------------------------------------------------------------
 1 | import { useState, useEffect } from 'react'
 2 | import isEditor from '@/lib/is-editor'
 3 | import isEmpty from '@/lib/is-empty'
 4 | import Router from 'next/router'
 5 | 
 6 | export default () => {
 7 |   const [isLoading, setIsLoading] = useState(true)
 8 | 
 9 |   useEffect(() => {
10 |     if (!isEditor(Router) && isEmpty(Router.query)) {
11 |       return Router.push('/editor', '/editor', { shallow: true })
12 |     }
13 |     setIsLoading(false)
14 |   }, [])
15 | 
16 |   return isLoading
17 | }
18 | 


--------------------------------------------------------------------------------
/src/components/icons/theme.js:
--------------------------------------------------------------------------------
 1 | import Svg from './svg'
 2 | 
 3 | export default ({ size = '24', ...props }) => (
 4 |   <Svg
 5 |     xmlns='http://www.w3.org/2000/svg'
 6 |     strokeWidth='0'
 7 |     viewBox='0 -2 19 23'
 8 |     size={size}
 9 |     {...props}
10 |   >
11 |     <path d='M13.66 5.93L8 .27 2.34 5.93c-3.12 3.12-3.12 8.19 0 11.31A7.98 7.98 0 008 19.58c2.05 0 4.1-.78 5.66-2.34 3.12-3.12 3.12-8.19 0-11.31zM8 17.59c-1.6 0-3.11-.62-4.24-1.76C2.62 14.69 2 13.19 2 11.59s.62-3.11 1.76-4.24L8 3.1v14.49z' />
12 |   </Svg>
13 | )
14 | 


--------------------------------------------------------------------------------
/src/components/presets/index.js:
--------------------------------------------------------------------------------
 1 | import vercell from './vercell'
 2 | import simple from './simple'
 3 | import article from './article'
 4 | import rauchg from './rauchg'
 5 | import bytesandhumans from './bytesandhumans'
 6 | import microlink from './microlink'
 7 | import thePracticalDev from './thepracticaldev'
 8 | import fauna from './fauna'
 9 | import news from './news'
10 | 
11 | export default {
12 |   article,
13 |   bytesandhumans,
14 |   fauna,
15 |   microlink,
16 |   news,
17 |   rauchg,
18 |   simple,
19 |   thePracticalDev,
20 |   vercell
21 | }
22 | 


--------------------------------------------------------------------------------
/src/components/icons/keyboard.js:
--------------------------------------------------------------------------------
 1 | import Svg from './svg'
 2 | 
 3 | export default ({ size = '24', ...props }) => (
 4 |   <Svg
 5 |     xmlns='http://www.w3.org/2000/svg'
 6 |     strokeWidth='0'
 7 |     viewBox='0 0 24 24'
 8 |     size={size}
 9 |     {...props}
10 |   >
11 |     <path
12 |       stroke='none'
13 |       d='M20 5H4c-1.1 0-1.99.9-1.99 2L2 17c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm-9 3h2v2h-2V8zm0 3h2v2h-2v-2zM8 8h2v2H8V8zm0 3h2v2H8v-2zm-1 2H5v-2h2v2zm0-3H5V8h2v2zm9 7H8v-2h8v2zm0-4h-2v-2h2v2zm0-3h-2V8h2v2zm3 3h-2v-2h2v2zm0-3h-2V8h2v2z'
14 |     />
15 |   </Svg>
16 | )
17 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | ############################
 2 | # npm
 3 | ############################
 4 | node_modules
 5 | npm-debug.log
 6 | .node_history
 7 | yarn.lock
 8 | package-lock.json
 9 | 
10 | ############################
11 | # tmp, editor & OS files
12 | ############################
13 | .tmp
14 | *.swo
15 | *.swp
16 | *.swn
17 | *.swm
18 | .DS_Store
19 | *#
20 | *~
21 | .idea
22 | *sublime*
23 | nbproject
24 | 
25 | ############################
26 | # Tests
27 | ############################
28 | testApp
29 | coverage
30 | .nyc_output
31 | 
32 | ############################
33 | # Other
34 | ############################
35 | .env
36 | .envrc
37 | .next
38 | .now
39 | 


--------------------------------------------------------------------------------
/src/components/button-icon.js:
--------------------------------------------------------------------------------
 1 | import themeBase from '@/theme'
 2 | import styled from 'styled-components'
 3 | import { Button } from 'theme-ui'
 4 | 
 5 | const ButtonIcon = styled(Button)`
 6 |   display: flex;
 7 |   cursor: pointer;
 8 |   background: none;
 9 |   border: 0;
10 |   outline: 0;
11 |   padding: 0;
12 | 
13 |   svg {
14 |     transition: fill ${themeBase.transition.medium},
15 |       stroke ${themeBase.transition.medium};
16 |     stroke: ${({ color }) => color};
17 |     fill: ${({ color }) => color};
18 |   }
19 | 
20 |   &:hover svg {
21 |     stroke: ${({ hoverColor }) => hoverColor};
22 |     fill: ${({ hoverColor }) => hoverColor};
23 |   }
24 | `
25 | 
26 | export default ButtonIcon
27 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
 1 | language: node_js
 2 | 
 3 | node_js:
 4 |   - lts/*
 5 | 
 6 | after_success: npm run coverage
 7 | 
 8 | stages:
 9 |   - Test
10 |   - name: Release
11 |     if: branch = master AND commit_message !~ /(release|no-release)/
12 | 
13 | jobs:
14 |   include:
15 |     - stage: Release
16 |       install: npm install --no-package-lock
17 |       before_deploy:
18 |         - git config user.email ${GITHUB_EMAIL:-"travis@travis-ci.org"}
19 |         - git config user.name ${GITHUB_USER:-"Travis CI"}
20 |         - git remote set-url origin https://${GH_TOKEN}@github.com/${TRAVIS_REPO_SLUG}.git
21 |         - git checkout master
22 |       deploy:
23 |         skip_cleanup: true
24 |         provider: script
25 |         script: npm run release
26 |         on:
27 |           branch: master
28 | 


--------------------------------------------------------------------------------
/src/components/choose.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import PropTypes from 'prop-types'
 3 | import If from './if'
 4 | 
 5 | const Choose = props => {
 6 |   let when = null
 7 |   let otherwise = null
 8 | 
 9 |   React.Children.forEach(props.children, children => {
10 |     if (children.props.condition === undefined) {
11 |       otherwise = children
12 |     } else if (!when && children.props.condition === true) {
13 |       when = children
14 |     }
15 |   })
16 | 
17 |   return when || otherwise
18 | }
19 | 
20 | Choose.propTypes = {
21 |   children: PropTypes.node
22 | }
23 | 
24 | Choose.When = If
25 | 
26 | Choose.Otherwise = ({ render, children }) => (render ? render() : children)
27 | 
28 | Choose.Otherwise.propTypes = {
29 |   children: PropTypes.node,
30 |   render: PropTypes.func
31 | }
32 | 
33 | export default Choose
34 | 


--------------------------------------------------------------------------------
/src/pages/_document.js:
--------------------------------------------------------------------------------
 1 | import NextDocument from 'next/document'
 2 | import { ServerStyleSheet } from 'styled-components'
 3 | 
 4 | export default class Document extends NextDocument {
 5 |   static async getInitialProps (ctx) {
 6 |     const sheet = new ServerStyleSheet()
 7 |     const originalRenderPage = ctx.renderPage
 8 | 
 9 |     try {
10 |       ctx.renderPage = () =>
11 |         originalRenderPage({
12 |           enhanceApp: App => props => sheet.collectStyles(<App {...props} />)
13 |         })
14 | 
15 |       const initialProps = await NextDocument.getInitialProps(ctx)
16 |       return {
17 |         ...initialProps,
18 |         styles: (
19 |           <>
20 |             {initialProps.styles}
21 |             {sheet.getStyleElement()}
22 |           </>
23 |         )
24 |       }
25 |     } finally {
26 |       sheet.seal()
27 |     }
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/src/components/icons/github.js:
--------------------------------------------------------------------------------
 1 | import Svg from './svg'
 2 | 
 3 | export default ({ size = '20', ...props }) => (
 4 |   <Svg
 5 |     xmlns='http://www.w3.org/2000/svg'
 6 |     viewBox='0 0 24 24'
 7 |     size={size}
 8 |     {...props}
 9 |   >
10 |     <path d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12' />
11 |   </Svg>
12 | )
13 | 


--------------------------------------------------------------------------------
/src/components/lazy-image.js:
--------------------------------------------------------------------------------
 1 | import { useState, createElement, useEffect } from 'react'
 2 | import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'
 3 | import { Image } from 'theme-ui'
 4 | import noop from '@/lib/noop'
 5 | 
 6 | const Placeholder = ({ sx, theme, ...props }) => (
 7 |   <SkeletonTheme {...theme}>
 8 |     <Skeleton {...sx} {...props} />
 9 |   </SkeletonTheme>
10 | )
11 | 
12 | const LazyImage = ({ onError, ...props }) => {
13 |   const [isLoading, setLoading] = useState(true)
14 | 
15 |   useEffect(() => {
16 |     const img = document.createElement('img')
17 |     img.onerror = onError
18 |     img.onload = () => {
19 |       img.onload = null
20 |       img.onerror = null
21 |       setLoading(false)
22 |     }
23 |     img.src = props.src
24 |   }, [])
25 | 
26 |   const Component = isLoading ? Placeholder : Image
27 |   return createElement(Component, props)
28 | }
29 | 
30 | LazyImage.defaultProps = {
31 |   onError: noop
32 | }
33 | 
34 | export default LazyImage
35 | 


--------------------------------------------------------------------------------
/src/hooks/use-key-bindings.js:
--------------------------------------------------------------------------------
 1 | import { useState, useEffect } from 'react'
 2 | import isEditor from '@/lib/is-editor'
 3 | import Router from 'next/router'
 4 | 
 5 | const isCtrl = e => e.metaKey || e.ctrlKey
 6 | 
 7 | // https://keycode.info
 8 | export default (initialKeyBindings = {}, eventListener = 'keydown') => {
 9 |   const [keyBindings] = useState(initialKeyBindings)
10 | 
11 |   useEffect(() => {
12 |     if (!isEditor(Router)) return
13 | 
14 |     document.addEventListener(
15 |       eventListener,
16 |       event => {
17 |         const { code } = event
18 |         const keyBinding = keyBindings[code]
19 |         if (keyBinding === undefined) return
20 |         const condition = keyBinding.ctrl ? isCtrl(event) : true
21 |         if (!condition) return
22 |         event.preventDefault()
23 |         keyBinding.fn(event)
24 |       },
25 |       false
26 |     )
27 | 
28 |     return () =>
29 |       Object.keys(keyBindings).forEach(keyBinding =>
30 |         document.removeEventListener(eventListener, keyBindings[keyBinding])
31 |       )
32 |   }, [])
33 | }
34 | 


--------------------------------------------------------------------------------
/src/components/tabs.js:
--------------------------------------------------------------------------------
 1 | import { Tab, Tabs as TabsBase, TabList, TabPanel } from 'react-tabs'
 2 | import styled from 'styled-components'
 3 | import themeBase from '@/theme'
 4 | 
 5 | export const Tabs = styled(TabsBase)`
 6 |   .react-tabs {
 7 |     -webkit-tap-highlight-color: transparent;
 8 |   }
 9 | 
10 |   .react-tabs__tab-list {
11 |     border-bottom: 1px solid ${props => props.theme.borderColor};
12 |     margin: 0 0 ${themeBase.space[3]};
13 |     padding: 0;
14 |   }
15 | 
16 |   .react-tabs__tab {
17 |     display: inline-block;
18 |     border: 1px solid transparent;
19 |     border-bottom: none;
20 |     bottom: -1px;
21 |     position: relative;
22 |     list-style: none;
23 |     padding: 6px 12px;
24 |     cursor: pointer;
25 |   }
26 | 
27 |   .react-tabs__tab--selected {
28 |     border-bottom: 2px solid ${props => props.theme.color};
29 |     color: ${props => props.theme.color};
30 |     outline: 0;
31 |   }
32 | 
33 |   .react-tabs__tab-panel {
34 |     display: none;
35 |     min-height: 130px;
36 |   }
37 | 
38 |   .react-tabs__tab-panel--selected {
39 |     display: block;
40 |   }
41 | `
42 | export { Tab, TabList, TabPanel }
43 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright © 2020 microlink.io <hello@microlink.io> (microlink.io)
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in
13 | all copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/src/hooks/use-query-state.js:
--------------------------------------------------------------------------------
 1 | import { useState, useEffect } from 'react'
 2 | import { flatten, unflatten } from 'flat'
 3 | import { encode } from 'qss'
 4 | import isSSR from '@/lib/is-ssr'
 5 | import eq from '@/lib/eq'
 6 | 
 7 | const fromLocation = isSSR
 8 |   ? () => ({})
 9 |   : () => {
10 |     const urlObj = new URL(window.location)
11 |     const query = Object.fromEntries(urlObj.searchParams.entries())
12 |     const decodeQuery = Object.keys(query).reduce(
13 |       (acc, key) => ({ ...acc, [key]: decodeURIComponent(query[key]) }),
14 |       {}
15 |     )
16 |     return decodeQuery
17 |   }
18 | 
19 | const condition = isSSR ? [] : [window.location.search]
20 | 
21 | export default () => {
22 |   const [query, setQuery] = useState(unflatten(fromLocation()))
23 | 
24 |   useEffect(() => {
25 |     const newQuery = fromLocation()
26 |     if (!eq(query, newQuery)) setQuery(newQuery)
27 |   }, condition)
28 | 
29 |   const set = (obj, { replace = false } = {}) => {
30 |     const newQuery = flatten(replace ? obj : { ...fromLocation(), ...obj })
31 |     setQuery(newQuery)
32 |     window.history.pushState(
33 |       {},
34 |       '',
35 |       `${window.location.pathname}?${encode(newQuery)}`
36 |     )
37 |   }
38 | 
39 |   return [query, set]
40 | }
41 | 


--------------------------------------------------------------------------------
/src/hooks/use-screenshot-url.js:
--------------------------------------------------------------------------------
 1 | import getScreenshotUrl from '@/lib/screenshot-url'
 2 | import { useState, useEffect } from 'react'
 3 | import isDev from '@/lib/is-dev'
 4 | 
 5 | const shortenUrl = isDev
 6 |   ? 'http://localhost:3000/?adblock=false&element=%23screenshot&embed=screenshot.url&meta=false&screenshot&waitUntil.0=load&waitUntil.1=networkidle0&url='
 7 |   : 'https://i.microlink.io/'
 8 | 
 9 | const getUrl = () => {
10 |   const urlObj = new URL(window.location)
11 |   urlObj.pathname = ''
12 |   return urlObj.toString()
13 | }
14 | 
15 | const getCardUrl = ({ endpoint }) => {
16 |   if (!isDev && !endpoint) {
17 |     return `${shortenUrl}${encodeURIComponent(getUrl())}`
18 |   }
19 |   return getScreenshotUrl(getUrl(), {
20 |     force: !!isDev,
21 |     endpoint: isDev ? 'http://localhost:3000' : endpoint,
22 |     adblock: false,
23 |     element: '#screenshot',
24 |     embed: 'screenshot.url',
25 |     meta: false,
26 |     screenshot: true,
27 |     waitUntil: ['load', 'networkidle0']
28 |   })
29 | }
30 | 
31 | export default queryVariables => {
32 |   const [screenshotUrl, setScreenshotUrl] = useState('')
33 | 
34 |   const sync = queryVariables => setScreenshotUrl(getCardUrl(queryVariables))
35 | 
36 |   useEffect(() => sync(queryVariables), [])
37 | 
38 |   return [screenshotUrl, sync]
39 | }
40 | 


--------------------------------------------------------------------------------
/src/components/presets/simple.js:
--------------------------------------------------------------------------------
 1 | /* eslint-disable no-use-before-define */
 2 | 
 3 | import Inline from '../inline.macro'
 4 | import { Link, Flex, Text } from './scope'
 5 | 
 6 | const code = (
 7 |   <Inline>
 8 |     <>
 9 |       <Link
10 |         href='https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;700&display=swap'
11 |         rel='stylesheet'
12 |       />
13 |       <Flex
14 |         sx={{
15 |           alignItems: 'center',
16 |           justifyContent: 'center',
17 |           flexDirection: 'column',
18 |           bg: query.bg,
19 |           color: query.color
20 |         }}
21 |       >
22 |         <Text
23 |           sx={{
24 |             fontFamily: 'Roboto',
25 |             fontSize: 6,
26 |             fontWeight: '700'
27 |           }}
28 |           children={query.headline}
29 |         />
30 |         <Text
31 |           sx={{
32 |             fontFamily: 'Roboto',
33 |             fontSize: 3,
34 |             fontWeight: '300'
35 |           }}
36 |           children={query.caption}
37 |         />
38 |       </Flex>
39 |     </>
40 |   </Inline>
41 | )
42 | 
43 | const query = {
44 |   headline: 'Add your headline',
45 |   caption: 'Add your caption',
46 |   bg: 'black',
47 |   color: 'white'
48 | }
49 | 
50 | export default {
51 |   name: 'simple',
52 |   code,
53 |   query
54 | }
55 | 


--------------------------------------------------------------------------------
/src/components/overlay.js:
--------------------------------------------------------------------------------
 1 | import { Box } from 'theme-ui'
 2 | 
 3 | export default ({
 4 |   backgroundColor,
 5 |   color,
 6 |   children,
 7 |   onClose,
 8 |   fullWidth,
 9 |   isOpen,
10 |   ...props
11 | }) => {
12 |   const onDismiss = event => {
13 |     if (event.target.dataset.overlayAction === 'close') {
14 |       onClose(event)
15 |     }
16 |   }
17 | 
18 |   return (
19 |     <Box
20 |       id='overlay'
21 |       data-overlay-action='close'
22 |       sx={{
23 |         p: 4,
24 |         position: 'fixed',
25 |         top: 0,
26 |         right: 0,
27 |         bottom: 0,
28 |         left: 0,
29 |         backgroundColor: 'rgba(0,0,0,0.85)',
30 |         zIndex: 950,
31 |         display: isOpen ? 'flex' : 'none',
32 |         flexDirection: 'column',
33 |         alignItems: 'center',
34 |         justifyContent: 'center'
35 |       }}
36 |       onClick={onDismiss}
37 |     >
38 |       <Box
39 |         id='overlay-container'
40 |         sx={{
41 |           borderRadius: 4,
42 |           display: 'flex',
43 |           flexDirection: 'column',
44 |           bg: backgroundColor,
45 |           color: color,
46 |           position: 'relative',
47 |           zIndex: 999,
48 |           width: fullWidth ? '100%' : 560,
49 |           overflow: 'auto',
50 |           p: 4
51 |         }}
52 |         {...props}
53 |       >
54 |         {children}
55 |       </Box>
56 |     </Box>
57 |   )
58 | }
59 | 


--------------------------------------------------------------------------------
/src/components/inline.macro.js:
--------------------------------------------------------------------------------
 1 | const { createMacro } = require('babel-plugin-macros')
 2 | const prettier = require('prettier/standalone')
 3 | const parserBabel = require('prettier/parser-babel')
 4 | 
 5 | const BABEL_OPTS = {
 6 |   parser: 'babel',
 7 |   plugins: [parserBabel]
 8 | }
 9 | 
10 | /**
11 |  * https://prettier.io/docs/en/options.html
12 |  */
13 | const PRETTIER_CONFIG = {
14 |   semi: true,
15 |   singleQuote: true,
16 |   jsxSingleQuote: true,
17 |   printWidth: 30,
18 |   tabWidth: 2
19 | }
20 | 
21 | const toPrettier = ({ referencePath, babel, prettierOpts }) => {
22 |   const children = referencePath.parentPath.parentPath.get('children')
23 |   const body = children[1].getSource()
24 |   let formattedBody = prettier.format(body, prettierOpts)
25 |   if (formattedBody.endsWith(';\n')) {
26 |     formattedBody = formattedBody.substring(0, formattedBody.length - 2)
27 |   }
28 |   referencePath.parentPath.parentPath.replaceWith(
29 |     babel.types.stringLiteral(formattedBody)
30 |   )
31 | }
32 | 
33 | const createInlineJSXMacro = prettierOpts => ({ references, babel }) => {
34 |   const { default: defaultImport = [] } = references
35 | 
36 |   defaultImport.forEach(referencePath => {
37 |     if (referencePath.parentPath.type === 'JSXOpeningElement') {
38 |       // prettify code inside jsx
39 |       toPrettier({ referencePath, babel, prettierOpts })
40 |     }
41 |   })
42 | }
43 | 
44 | const create = prettierOpts => createMacro(createInlineJSXMacro(prettierOpts))
45 | 
46 | module.exports = create({ ...BABEL_OPTS, ...PRETTIER_CONFIG })
47 | 


--------------------------------------------------------------------------------
/src/components/presets/microlink.js:
--------------------------------------------------------------------------------
 1 | /* eslint-disable no-use-before-define */
 2 | 
 3 | import Inline from '../inline.macro'
 4 | import { Image, Box, Link, Flex, Text } from './scope'
 5 | 
 6 | const code = (
 7 |   <Inline>
 8 |     <>
 9 |       <Link
10 |         href='https://fonts.googleapis.com/css2?family=Lato&display=swap'
11 |         rel='stylesheet'
12 |       />
13 |       <Flex
14 |         sx={{
15 |           alignItems: 'center',
16 |           justifyContent: 'center',
17 |           flexDirection: 'column'
18 |         }}
19 |       >
20 |         <Flex>
21 |           <Image
22 |             sx={{ width: '64px', objectFit: 'contain' }}
23 |             src={query.logo}
24 |           />
25 |           <Box
26 |             sx={{
27 |               background: query.bg,
28 |               width: '2px',
29 |               mx: 3,
30 |               my: '4px'
31 |             }}
32 |           />
33 |           <Text
34 |             sx={{
35 |               fontFamily: 'Lato',
36 |               fontSize: 4,
37 |               fontWeight: 400,
38 |               fontStyle: 'normal',
39 |               lineHeight: 1.8,
40 |               color: query.color,
41 |               textTransform: 'uppercase',
42 |               wordSpacing: '8px'
43 |             }}
44 |             children={query.title}
45 |           />
46 |         </Flex>
47 |       </Flex>
48 |     </>
49 |   </Inline>
50 | )
51 | 
52 | const query = {
53 |   color: '#313b53',
54 |   bg: '#313B53',
55 |   title: 'Microlink Cards',
56 |   logo: 'https://cdn.microlink.io/logo/logo.svg'
57 | }
58 | 
59 | export default { name: 'microlink', code, query }
60 | 


--------------------------------------------------------------------------------
/src/components/presets/bytesandhumans.js:
--------------------------------------------------------------------------------
 1 | /* eslint-disable no-use-before-define */
 2 | 
 3 | import Inline from '../inline.macro'
 4 | import { Link, Box, Flex, Text } from './scope'
 5 | 
 6 | const code = (
 7 |   <Inline>
 8 |     <>
 9 |       <Link
10 |         href='https://fonts.googleapis.com/css2?family=Open+Sans:wght@700&display=swap'
11 |         rel='stylesheet'
12 |       />
13 |       <Flex
14 |         sx={{
15 |           alignItems: 'center',
16 |           justifyContent: 'center',
17 |           flexDirection: 'column',
18 |           backgroundImage: `url(${query.image})`,
19 |           border: `10px solid ${query.primaryColor}`,
20 |           boxShadow: `0.5em 0.5em 0px ${query.textColor}`
21 |         }}
22 |       >
23 |         <Box
24 |           sx={{
25 |             p: 6,
26 |             textAlign: 'center'
27 |           }}
28 |         >
29 |           <Text
30 |             sx={{
31 |               lineHeight: 1.25,
32 |               bg: query.primaryColor,
33 |               color: query.textColor,
34 |               fontFamily: 'Open Sans',
35 |               fontSize: 7,
36 |               px: '60px',
37 |               py: 4,
38 |               fontWeight: '700'
39 |             }}
40 |             children={query.title}
41 |           />
42 |         </Box>
43 |       </Flex>
44 |     </>
45 |   </Inline>
46 | )
47 | 
48 | const query = {
49 |   title: 'Paradigmas con emoji',
50 |   image: 'https://bytesandhumans.netlify.app/assets/img/posts/paradigmas.png',
51 |   textColor: 'black',
52 |   bgColor: 'white',
53 |   primaryColor: '#85FFE0'
54 | }
55 | 
56 | export default { name: 'bytesandhumans', code, query }
57 | 


--------------------------------------------------------------------------------
/src/components/presets/article.js:
--------------------------------------------------------------------------------
 1 | /* eslint-disable no-use-before-define */
 2 | 
 3 | import Inline from '../inline.macro'
 4 | import { Link, Box, Text } from './scope'
 5 | 
 6 | const code = (
 7 |   <Inline>
 8 |     <>
 9 |       <Link
10 |         href='https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;700&display=swap'
11 |         rel='stylesheet'
12 |       />
13 |       <Box
14 |         sx={{
15 |           display: 'flex',
16 |           justifyContent: 'center',
17 |           flexDirection: 'column',
18 |           backgroundImage:
19 |             'url(https://w.wallhaven.cc/full/2e/wallhaven-2exmm9.jpg)',
20 |           color: 'white',
21 |           padding: 50
22 |         }}
23 |       >
24 |         <Text
25 |           sx={{
26 |             fontFamily: 'Roboto',
27 |             fontSize: 3,
28 |             fontWeight: '300'
29 |           }}
30 |           children='21 January'
31 |         />
32 |         <Text
33 |           sx={{
34 |             fontFamily: 'Roboto',
35 |             fontSize: 7,
36 |             fontWeight: '700',
37 |             textTransform: 'uppercase'
38 |           }}
39 |           children='STARSIGHT'
40 |         />
41 |         <Text
42 |           sx={{
43 |             fontFamily: 'Roboto',
44 |             fontSize: 4,
45 |             fontWeight: '300',
46 |             borderBottom: 1,
47 |             paddingBottom: 5
48 |           }}
49 |           children='The highly-anticipated sequel to Skyward.'
50 |         />
51 |       </Box>
52 |     </>
53 |   </Inline>
54 | )
55 | 
56 | const query = {
57 |   foo: 'bar'
58 | }
59 | 
60 | export default { name: 'article', code, query }
61 | 


--------------------------------------------------------------------------------
/src/components/presets/rauchg.js:
--------------------------------------------------------------------------------
 1 | /* eslint-disable no-use-before-define */
 2 | 
 3 | import Inline from '../inline.macro'
 4 | import { Image, Box, Flex, Text } from './scope'
 5 | 
 6 | const code = (
 7 |   <Inline>
 8 |     <>
 9 |       <Box
10 |         as='header'
11 |         sx={{ position: 'absolute', pt: '42px', pl: '42px', bg: query.bg }}
12 |       >
13 |         <Flex
14 |           sx={{
15 |             alignItems: 'center'
16 |           }}
17 |         >
18 |           <Image sx={{ width: 24, height: 24 }} src={query.logo} />
19 |           <Text
20 |             as='span'
21 |             sx={{
22 |               ml: 2,
23 |               letterSpacing: '-.03m',
24 |               fontFamily: 'sans-serif',
25 |               fontSize: 4,
26 |               fontWeight: '700'
27 |             }}
28 |           >
29 |             {query.domain}
30 |           </Text>
31 |         </Flex>
32 |       </Box>
33 |       <Flex
34 |         sx={{
35 |           alignItems: 'center',
36 |           justifyContent: 'center',
37 |           flexDirection: 'column',
38 |           bg: query.bg
39 |         }}
40 |       >
41 |         <Text
42 |           sx={{
43 |             px: '46px',
44 |             py: 3,
45 |             letterSpacing: '-.03m',
46 |             fontFamily: 'sans-serif',
47 |             fontSize: 6,
48 |             fontWeight: '700',
49 |             bg: query.color,
50 |             color: query.bg
51 |           }}
52 |           children={query.title}
53 |         />
54 |       </Flex>
55 |     </>
56 |   </Inline>
57 | )
58 | 
59 | const query = {
60 |   bg: 'white',
61 |   color: 'black',
62 |   logo: 'https://svgur.com/i/KBR.svg',
63 |   domain: 'rauchg.com',
64 |   title: '2020 in Review'
65 | }
66 | 
67 | export default { name: 'rauchg', code, query }
68 | 


--------------------------------------------------------------------------------
/src/components/searchable-select.js:
--------------------------------------------------------------------------------
 1 | import SearchableSelect from 'react-select'
 2 | import * as polished from 'polished'
 3 | import themeBase from '@/theme'
 4 | 
 5 | export default ({ bg, color, ...props }) => {
 6 |   const secondaryColor = polished.lighten(0.1, bg)
 7 |   const theme = () => {
 8 |     return {
 9 |       borderRadius: 4,
10 |       colors: {
11 |         primary: color,
12 |         primary75: secondaryColor,
13 |         primary50: secondaryColor,
14 |         primary25: secondaryColor,
15 |         danger: '#DE350B',
16 |         dangerLight: '#FFBDAD',
17 |         neutral0: bg,
18 |         neutral5: color,
19 |         neutral10: color,
20 |         neutral20: color,
21 |         neutral30: color,
22 |         neutral40: color,
23 |         neutral50: color,
24 |         neutral60: color,
25 |         neutral70: color,
26 |         neutral80: color,
27 |         neutral90: color
28 |       },
29 |       spacing: { baseUnit: 4, controlHeight: 38, menuGutter: 8 }
30 |     }
31 |   }
32 | 
33 |   const fontStyle = {
34 |     fontFamily: themeBase.fonts.sans,
35 |     fontSize: themeBase.fontSizes[1]
36 |   }
37 | 
38 |   const styles = {
39 |     singleValue: provided => ({
40 |       ...provided,
41 |       ...fontStyle
42 |     }),
43 |     valueContainer: provided => ({
44 |       ...provided,
45 |       padding: '2px 8px'
46 |     }),
47 |     menu: provided => ({
48 |       ...provided,
49 |       ...fontStyle
50 |     }),
51 |     indicatorSeparator: () => ({ display: 'none' }),
52 |     control: (provided, { isFocused }) => ({
53 |       ...provided,
54 |       opacity: isFocused ? 1 : 0.75,
55 |       cursor: 'pointer',
56 |       boxShadow: 'none'
57 |     })
58 |   }
59 | 
60 |   return <SearchableSelect styles={styles} theme={theme} {...props} />
61 | }
62 | 


--------------------------------------------------------------------------------
/src/theme.js:
--------------------------------------------------------------------------------
 1 | import nightOwlLight from 'prism-react-renderer/themes/nightOwlLight'
 2 | import palenight from 'prism-react-renderer/themes/palenight'
 3 | import nightOwl from 'prism-react-renderer/themes/nightOwl'
 4 | import ultramin from 'prism-react-renderer/themes/ultramin'
 5 | import dracula from 'prism-react-renderer/themes/dracula'
 6 | import github from 'prism-react-renderer/themes/github'
 7 | 
 8 | import toPx from '@/lib/to-px'
 9 | 
10 | const defaultTheme = github
11 | 
12 | export const editorTheme = {
13 |   default: defaultTheme,
14 |   ultramin,
15 |   dracula,
16 |   nightOwl,
17 |   nightOwlLight,
18 |   palenight
19 | }
20 | 
21 | const speed = {
22 |   quickly: 150,
23 |   normal: 300,
24 |   slowly: 450
25 | }
26 | 
27 | export const theme = {
28 |   borders: [0, '1px solid'],
29 |   colors: {
30 |     modes: editorTheme
31 |   },
32 |   fonts: {
33 |     sans:
34 |       'Inter, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Oxygen, Ubuntu, Cantarell, "Open Sans", sans-serif',
35 |     mono:
36 |       '"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace'
37 |   },
38 |   speed,
39 |   transition: {
40 |     short: `${speed.quickly}ms cubic-bezier(.25,.8,.25,1)`,
41 |     medium: `${speed.normal}ms cubic-bezier(.25,.8,.25,1)`,
42 |     long: `${speed.slowly}ms cubic-bezier(.4, 0, .2, 1)`
43 |   },
44 |   breakpoints: [576, 768, 991, 1220].map(toPx),
45 |   fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 96].map(toPx),
46 |   fontWeights: {
47 |     lighter: 100,
48 |     light: 200,
49 |     normal: 400,
50 |     regular: 500,
51 |     bold: 600
52 |   },
53 |   space: [0, 4, 8, 16, 32, 64, 128, 256, 512].map(toPx),
54 |   styles: {
55 |     root: {
56 |       fontFamily: 'sans',
57 |       lineHeight: 1.5,
58 |       margin: 0,
59 |       overflow: 'hidden'
60 |     }
61 |   }
62 | }
63 | 
64 | export default theme
65 | 


--------------------------------------------------------------------------------
/src/components/drag-bars.js:
--------------------------------------------------------------------------------
 1 | import { useCallback, useState } from 'react'
 2 | import styled, { css } from 'styled-components'
 3 | 
 4 | const Dragger = styled('div').attrs(({ isDrag, isHorizontal }) => ({
 5 |   style: {
 6 |     [!isHorizontal ? 'width' : 'height']: !isDrag ? '10px' : '100vw',
 7 |     position: !isDrag ? 'absolute' : 'fixed',
 8 |     zIndex: !isDrag ? 'initial' : 9999,
 9 |     transform: !isDrag ? `translate${!isHorizontal ? 'X' : 'Y'}(-50%)` : 'none'
10 |   }
11 | }))`
12 |   left: 0;
13 |   top: 0;
14 |   bottom: 0;
15 |   cursor: ew-resize;
16 |   will-change: transform, position, width, height, z-index;
17 | 
18 |   ${({ isHorizontal }) => css`
19 |     ${!isHorizontal ? 'bottom' : 'right'}: 0;
20 |     cursor: ${!isHorizontal ? 'ew-resize' : 'ns-resize'};
21 |   `}
22 | `
23 | 
24 | const DragBar = ({ isHorizontal = false, onDrag = () => {} }) => {
25 |   const [isDrag, setIsDrag] = useState(false)
26 |   const onMouseMove = useCallback(e => {
27 |     const vw = Math.max(
28 |       document.documentElement[!isHorizontal ? 'clientWidth' : 'clientHeight'],
29 |       window[!isHorizontal ? 'innerWidth' : 'innerHeight'] || 0
30 |     )
31 |     const cursorPos = e[!isHorizontal ? 'clientX' : 'clientY']
32 |     const percent = Math.round(100 - (cursorPos / vw) * 100)
33 |     return onDrag(`${percent}%`)
34 |   }, [])
35 | 
36 |   const addListener = useCallback(() => {
37 |     setIsDrag(true)
38 |     return document.addEventListener('mousemove', onMouseMove)
39 |   }, [onMouseMove])
40 | 
41 |   const removeListener = useCallback(() => {
42 |     setIsDrag(false)
43 |     return document.removeEventListener('mousemove', onMouseMove)
44 |   }, [onMouseMove])
45 | 
46 |   return (
47 |     <Dragger
48 |       isDrag={isDrag}
49 |       isHorizontal={isHorizontal}
50 |       onMouseDown={addListener}
51 |       onMouseUp={removeListener}
52 |       onMouseOut={removeListener}
53 |     />
54 |   )
55 | }
56 | 
57 | export const VerticalDragBar = props => <DragBar {...props} />
58 | 
59 | export const HorizontalDragBar = props => <DragBar isHorizontal {...props} />
60 | 


--------------------------------------------------------------------------------
/src/components/presets/news.js:
--------------------------------------------------------------------------------
 1 | /* eslint-disable no-use-before-define */
 2 | 
 3 | import Inline from '../inline.macro'
 4 | import { Flex, Link, Box, Text, Image } from './scope'
 5 | 
 6 | const code = (
 7 |   <Inline>
 8 |     <>
 9 |       <Link
10 |         href='https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;700&display=swap'
11 |         rel='stylesheet'
12 |       />
13 |       <Box
14 |         sx={{
15 |           fontFamily: 'Roboto',
16 |           backgroundImage:
17 |             'url(https://kikobeats.com/images/avatar-glitch.jpg)',
18 |           color: 'white',
19 |           zIndex: 1
20 |         }}
21 |       >
22 |         <Flex
23 |           sx={{
24 |             justifyContent: 'center',
25 |             flexDirection: 'column',
26 |             height: '100%',
27 |             background:
28 |               'linear-gradient(70deg,white 0%,white 70%,transparent 0%)',
29 |             color: 'black',
30 |             width: '70%',
31 |             padding: 30,
32 |             zIndex: 2
33 |           }}
34 |         >
35 |           <Flex sx={{ alignItems: 'center', marginBottom: 4 }}>
36 |             <Image
37 |               sx={{
38 |                 width: '50px'
39 |               }}
40 |               src='https://upload.wikimedia.org/wikipedia/commons/thumb/9/99/Unofficial_JavaScript_logo_2.svg/490px-Unofficial_JavaScript_logo_2.svg.png'
41 |             />
42 |             <Text sx={{ textTransform: 'uppercase', marginLeft: 2 }}>
43 |               wellpaid.io
44 |             </Text>
45 |           </Flex>
46 | 
47 |           <Box>
48 |             <Text
49 |               sx={{
50 |                 fontSize: 6,
51 |                 lineHeight: 1,
52 |                 marginBottom: 3,
53 |                 fontWeight: '700'
54 |               }}
55 |             >
56 |               What NOT to do when remote working
57 |             </Text>
58 |             <Text sx={{ width: '80%' }}>
59 |               Lorem ipsum dolor sit amet consectetur adipisicing elit.
60 |               Temporibus consectetur totam sequi ducimus, laboriosam voluptatum,
61 |               expedita fuga hic quibusdam facilis quasi architecto nobis
62 |             </Text>
63 |           </Box>
64 |         </Flex>
65 |       </Box>
66 |     </>
67 |   </Inline>
68 | )
69 | 
70 | const query = {
71 |   foo: 'bar'
72 | }
73 | 
74 | export default { name: 'news', code, query }
75 | 


--------------------------------------------------------------------------------
/src/components/presets/vercell.js:
--------------------------------------------------------------------------------
 1 | /* eslint-disable no-use-before-define */
 2 | 
 3 | import Inline from '../inline.macro'
 4 | import { Image, Link, Box, Text } from './scope'
 5 | 
 6 | const code = (
 7 |   <Inline>
 8 |     <Box
 9 |       sx={{
10 |         display: 'flex',
11 |         alignItems: 'center',
12 |         justifyContent: 'center',
13 |         flexDirection: 'column',
14 |         backgroundImage: `radial-gradient(${
15 |           query.radial[query.theme]
16 |         } 1px, transparent 0), radial-gradient(${
17 |           query.radial[query.theme]
18 |         } 1px, transparent 0)`,
19 |         backgroundPosition: '0 0, 25px 25px',
20 |         backgroundSize: '50px 50px',
21 |         color: query.color[query.theme],
22 |         bg: query.bg[query.theme]
23 |       }}
24 |     >
25 |       <Link
26 |         href='https://fonts.googleapis.com/css2?family=Inter:wght@300;700&display=swap'
27 |         rel='stylesheet'
28 |       />
29 |       <Image src={query.logos[query.theme][query.logo]} />
30 |       <Text
31 |         sx={{
32 |           fontFamily: 'Inter',
33 |           fontSize: 6,
34 |           mt: 5,
35 |           textAlign: 'center',
36 |           fontWeight: '700',
37 |           lineHeight: 1
38 |         }}
39 |         children={query.headline}
40 |       />
41 |       <Text
42 |         sx={{
43 |           fontFamily: 'Inter',
44 |           fontSize: 6,
45 |           mt: 2,
46 |           textAlign: 'center',
47 |           fontWeight: '300'
48 |         }}
49 |         children={query.caption}
50 |       />
51 |     </Box>
52 |   </Inline>
53 | )
54 | 
55 | const query = {
56 |   headline: 'Serverless Deployments',
57 |   caption: 'with Vercell',
58 |   logo: 'vercell',
59 |   theme: 'dark',
60 |   bg: {
61 |     light: 'white',
62 |     dark: 'black'
63 |   },
64 |   color: {
65 |     light: 'black',
66 |     dark: 'white'
67 |   },
68 |   radial: {
69 |     light: 'lightgray',
70 |     dark: 'dimgray'
71 |   },
72 |   logos: {
73 |     light: {
74 |       vercell:
75 |         'https://assets.zeit.co/image/upload/front/assets/design/zeit-black-triangle.svg',
76 |       next:
77 |         'https://assets.zeit.co/image/upload/front/assets/design/nextjs-black-logo.svg',
78 |       hyper:
79 |         'https://assets.zeit.co/image/upload/front/assets/design/hyper-color-logo.svg'
80 |     },
81 |     dark: {
82 |       vercell:
83 |         'https://assets.zeit.co/image/upload/front/assets/design/zeit-white-triangle.svg',
84 |       next:
85 |         'https://assets.zeit.co/image/upload/front/assets/design/nextjs-white-logo.svg',
86 |       hyper:
87 |         'https://assets.zeit.co/image/upload/front/assets/design/hyper-bw-logo.svg'
88 |     }
89 |   }
90 | }
91 | 
92 | export default {
93 |   name: 'Vercell',
94 |   code,
95 |   query
96 | }
97 | 


--------------------------------------------------------------------------------
/src/components/live-editor.js:
--------------------------------------------------------------------------------
  1 | import styled from 'styled-components'
  2 | import theme from '@/theme'
  3 | import * as scope from '@/components/presets/scope'
  4 | 
  5 | import {
  6 |   LiveProvider as BaseProvider,
  7 |   LiveEditor as BaseEditor,
  8 |   LiveError as BaseError,
  9 |   LivePreview as BasePreview
 10 | } from 'react-live'
 11 | 
 12 | const BASE_HEIGHT = 441
 13 | const BASE_WIDTH = 843
 14 | const ratios = [1, 1, 1, 1]
 15 | 
 16 | const LivePreviewWrapper = styled('div')`
 17 |   cursor: pointer;
 18 |   height: 100%;
 19 |   width: 100%;
 20 |   margin: auto;
 21 |   padding: ${({ isEditor }) => (isEditor ? theme.space[3] : 0)};
 22 | 
 23 |   ${({ isThumbnail }) =>
 24 |     isThumbnail &&
 25 |     `
 26 |     height: ${props => props.thumbnailHeight};
 27 |     width: ${props => props.thumbnailWidth};
 28 |     zoom: 0.5;
 29 |     `}
 30 | 
 31 |   ${({ isEditor, isThumbnail }) =>
 32 |     !isEditor &&
 33 |     !isThumbnail &&
 34 |     `
 35 |     ${ratios.reduce(
 36 |       (acc, ratio, index) =>
 37 |         acc +
 38 |         `
 39 |       @media screen and (min-width: ${theme.breakpoints[index]}) {
 40 |         height: ${ratio * BASE_HEIGHT}px;
 41 |         width: ${ratio * BASE_WIDTH}px;
 42 |       }
 43 |     `,
 44 |       ''
 45 |     )}
 46 |   `}
 47 | `
 48 | 
 49 | LivePreviewWrapper.defaultProps = {
 50 |   id: 'screenshot'
 51 | }
 52 | 
 53 | export const LiveError = styled(BaseError)`
 54 |   position: relative;
 55 |   margin: auto;
 56 |   padding: ${theme.space[3]};
 57 |   display: block;
 58 |   background: #ff5555;
 59 |   color: #f8f8f2;
 60 |   white-space: pre-wrap;
 61 |   text-align: left;
 62 |   font-size: ${theme.fontSizes[2]};
 63 |   font-family: ${theme.fonts.mono};
 64 |   bottom: 0;
 65 |   width: calc(100% - ${theme.space[5]});
 66 | 
 67 |   @media screen and (min-width: ${theme.breakpoints[2]}) {
 68 |     position: absolute;
 69 |     width: 70%;
 70 |   }
 71 | `
 72 | 
 73 | export const LivePreview = styled(BasePreview)`
 74 |   > div {
 75 |     height: inherit;
 76 |     width: inherit;
 77 |   }
 78 | `
 79 | 
 80 | LivePreview.defaultProps = {
 81 |   Component: LivePreviewWrapper
 82 | }
 83 | 
 84 | const LiveProviderBase = styled(BaseProvider)``
 85 | 
 86 | LiveProviderBase.defaultProps = {
 87 |   scope,
 88 |   theme: undefined,
 89 |   noInline: false
 90 | }
 91 | 
 92 | export const LiveProvider = ({ queryVariables: query, ...props }) => {
 93 |   const extendedScope = { ...scope, query }
 94 |   return <LiveProviderBase {...props} scope={extendedScope} />
 95 | }
 96 | 
 97 | export const LiveEditor = styled(BaseEditor)`
 98 |   pre,
 99 |   textarea {
100 |     padding: 0 !important;
101 |     font-family: ${theme.fonts.mono} !important;
102 |     font-weight: ${theme.fontWeights.light} !important;
103 |   }
104 |   textarea:focus {
105 |     outline: none;
106 |   }
107 | `
108 | 


--------------------------------------------------------------------------------
/src/components/presets/fauna.js:
--------------------------------------------------------------------------------
  1 | /* eslint-disable no-use-before-define */
  2 | 
  3 | import Inline from '../inline.macro'
  4 | import { Flex, Link, Box, Text, Image } from './scope'
  5 | 
  6 | const code = (
  7 |   <Inline>
  8 |     <>
  9 |       <Link
 10 |         href='https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;700&display=swap'
 11 |         rel='stylesheet'
 12 |       />
 13 |       <Flex
 14 |         sx={{
 15 |           bg: 'white',
 16 |           justifyContent: 'center',
 17 |           flexDirection: 'column'
 18 |         }}
 19 |       >
 20 |         <Box
 21 |           sx={{
 22 |             bg: 'white',
 23 |             color: '#323FCB',
 24 |             padding: 100
 25 |           }}
 26 |         >
 27 |           <Image
 28 |             sx={{ width: '200px', marginBottom: '50px' }}
 29 |             src='https://fauna.com/assets/img/Fauna-logo-blue.png'
 30 |           />
 31 |           <Flex
 32 |             sx={{
 33 |               justifyContent: 'space-between'
 34 |             }}
 35 |           >
 36 |             <Box>
 37 |               <Text
 38 |                 sx={{
 39 |                   fontFamily: 'Roboto',
 40 |                   fontSize: 7,
 41 |                   fontWeight: '700',
 42 |                   width: '40px',
 43 |                   lineHeight: 1
 44 |                 }}
 45 |               >
 46 |                 {query.title}
 47 |               </Text>
 48 |               <Box sx={{ marginTop: 2 }}>
 49 |                 <Text
 50 |                   sx={{
 51 |                     fontFamily: 'Roboto',
 52 |                     fontSize: 2,
 53 |                     fontWeight: '300',
 54 |                     display: 'inline-block',
 55 |                     color: 'white',
 56 |                     bg: '#323FCB',
 57 |                     padding: '1px 10px',
 58 |                     marginRight: 1,
 59 |                     textTransform: 'uppercase'
 60 |                   }}
 61 |                 >
 62 |                   Podcast
 63 |                 </Text>
 64 |                 <Text
 65 |                   sx={{
 66 |                     fontFamily: 'Roboto',
 67 |                     fontSize: 3,
 68 |                     fontWeight: '300',
 69 |                     display: 'inline-block'
 70 |                   }}
 71 |                 >
 72 |                   with Fauna
 73 |                 </Text>
 74 |               </Box>
 75 |             </Box>
 76 |             <Box>
 77 |               <Text
 78 |                 sx={{
 79 |                   fontFamily: 'Roboto',
 80 |                   fontSize: 5,
 81 |                   fontWeight: '700'
 82 |                 }}
 83 |               >
 84 |                 Disscenting Static.fun
 85 |               </Text>
 86 |               <Box
 87 |                 sx={{
 88 |                   bg: '#323FCB',
 89 |                   height: '2px',
 90 |                   width: '30px',
 91 |                   margin: '10px 0'
 92 |                 }}
 93 |               />
 94 |               <Text sx={{ display: 'inline-block' }}>Allen Hai </Text>
 95 |               <Text sx={{ display: 'inline-block' }}>
 96 |                 Software Engineer @ ZEIT
 97 |               </Text>
 98 |             </Box>
 99 |           </Flex>
100 |         </Box>
101 |       </Flex>
102 |     </>
103 |   </Inline>
104 | )
105 | 
106 | const query = {
107 |   title: 'Build_ Fearlessly'
108 | }
109 | 
110 | export default { name: 'fauna', code, query }
111 | 


--------------------------------------------------------------------------------
/src/components/json-viewer.js:
--------------------------------------------------------------------------------
  1 | import dynamic from 'next/dynamic'
  2 | import styled from 'styled-components'
  3 | import * as polished from 'polished'
  4 | 
  5 | const DynamicReactJson = dynamic(import('react-json-view'), { ssr: false })
  6 | 
  7 | const ThemeWrapper = styled.div`
  8 |   div.key-modal-request > div > span {
  9 |     background: transparent !important;
 10 |   }
 11 | 
 12 |   textarea,
 13 |   input {
 14 |     border-radius: 4px;
 15 |     outline: 0;
 16 |     background: transparent !important;
 17 |     border: 1px solid ${props => props.color} !important;
 18 |     color: ${props => props.color} !important;
 19 |   }
 20 |   .key-modal-submit {
 21 |     position: relative;
 22 |     right: 4px;
 23 |   }
 24 |   .key-modal-submit svg {
 25 |     color: ${props => props.addColor} !important;
 26 |   }
 27 | 
 28 |   .click-to-add-icon {
 29 |     position: relative;
 30 |     top: 6px;
 31 |   }
 32 | 
 33 |   .click-to-edit,
 34 |   .click-to-remove {
 35 |     position: relative;
 36 |     top: 4px;
 37 |   }
 38 | 
 39 |   .click-to-add-icon svg {
 40 |     color: ${props => props.plusColor} !important;
 41 |   }
 42 | 
 43 |   .edit-check svg {
 44 |     color: ${props => props.editColor} !important;
 45 |   }
 46 | 
 47 |   .edit-cancel svg,
 48 |   .click-to-remove svg {
 49 |     color: ${props => props.removeColor} !important;
 50 |   }
 51 | `
 52 | 
 53 | export default ({ onChange, children, theme, ...props }) => {
 54 |   const stringColor = theme.styles.find(item => item.types.includes('string'))
 55 |     .style.color
 56 |   const secondaryColor = polished.lighten(0.1, theme.plain.backgroundColor)
 57 |   const terciaryColor = polished.rgba(theme.plain.color, 0.6)
 58 |   const removeColor = theme.styles.find(item => item.types.includes('tag'))
 59 |     .style.color
 60 |   const editColor = theme.styles.find(item => item.types.includes('operator'))
 61 |   const plusColor = theme.styles.find(item => item.types.includes('attr-name'))
 62 |     .style.color
 63 | 
 64 |   return (
 65 |     <ThemeWrapper
 66 |       plusColor={plusColor}
 67 |       editColor={editColor}
 68 |       removeColor={removeColor}
 69 |       stringColor={stringColor}
 70 |       color={theme.plain.color}
 71 |     >
 72 |       <DynamicReactJson
 73 |         displayDataTypes={false}
 74 |         enableClipboard={false}
 75 |         displayObjectSize={false}
 76 |         indentWidth={2}
 77 |         name={null}
 78 |         src={children}
 79 |         onEdit={value => {
 80 |           onChange(value.updated_src)
 81 |           return true
 82 |         }}
 83 |         onAdd={value => {
 84 |           onChange(value.updated_src)
 85 |           return true
 86 |         }}
 87 |         onDelete={value => {
 88 |           onChange(value.updated_src)
 89 |           return true
 90 |         }}
 91 |         theme={{
 92 |           base00: theme.plain.backgroundColor,
 93 |           base01: theme.plain.color,
 94 |           base02: terciaryColor, // line
 95 |           base03: secondaryColor,
 96 |           base04: secondaryColor,
 97 |           base05: secondaryColor,
 98 |           base06: theme.plain.color,
 99 |           base07: stringColor, // key
100 |           base08: theme.plain.color,
101 |           base09: stringColor, // value, close bg
102 |           base0A: theme.plain.color,
103 |           base0B: theme.plain.color,
104 |           base0C: theme.plain.color,
105 |           base0D: terciaryColor, // arrow
106 |           base0E: theme.plain.color,
107 |           base0F: theme.plain.color
108 |         }}
109 |       />
110 |     </ThemeWrapper>
111 |   )
112 | }
113 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "microlink-cards",
  3 |   "description": "The easiest way to generate dynamic social images at scale.",
  4 |   "homepage": "https://github.com/microlinkhq/cards",
  5 |   "version": "0.0.36",
  6 |   "author": {
  7 |     "email": "hello@microlink.io",
  8 |     "name": "microlink.io",
  9 |     "url": "https://microlink.io"
 10 |   },
 11 |   "contributors": [
 12 |     {
 13 |       "name": "Kiko Beats",
 14 |       "email": "josefrancisco.verdu@gmail.com"
 15 |     }
 16 |   ],
 17 |   "repository": {
 18 |     "type": "git",
 19 |     "url": "git+https://github.com/microlinkhq/cards.git"
 20 |   },
 21 |   "bugs": {
 22 |     "url": "https://github.com/microlinkhq/cards/issues"
 23 |   },
 24 |   "keywords": [
 25 |     "cards",
 26 |     "img",
 27 |     "meta",
 28 |     "metatags",
 29 |     "microlink",
 30 |     "og-image",
 31 |     "opengraph",
 32 |     "seo",
 33 |     "share"
 34 |   ],
 35 |   "dependencies": {
 36 |     "@mdx-js/loader": "~1.5.8",
 37 |     "@microlink/mql": "~0.6.11",
 38 |     "@next/mdx": "~9.3.4",
 39 |     "@snackbar/core": "~1.7.0",
 40 |     "babel-plugin-macros": "~2.8.0",
 41 |     "cycled": "~1.1.0",
 42 |     "deep-object-diff": "~1.1.0",
 43 |     "fast-safe-stringify": "~2.0.7",
 44 |     "msgpack5": "~4.2.1",
 45 |     "next": "~9.3.4",
 46 |     "polished": "~3.5.1",
 47 |     "prettier": "~2.0.4",
 48 |     "prism-react-renderer": "~1.0.2",
 49 |     "qss": "~2.0.3",
 50 |     "react": "~16.13.1",
 51 |     "react-dom": "~16.13.1",
 52 |     "react-json-view": "~1.19.1",
 53 |     "react-live": "~2.2.2",
 54 |     "react-loading-skeleton": "~2.0.1",
 55 |     "react-select": "~3.1.0",
 56 |     "react-tabs": "~3.1.0",
 57 |     "styled-components": "~5.1.0",
 58 |     "theme-ui": "~0.3.1",
 59 |     "throttle-debounce": "~2.1.0",
 60 |     "tickedoff": "~1.0.2",
 61 |     "urlsafe-base64": "~1.0.0"
 62 |   },
 63 |   "devDependencies": {
 64 |     "@commitlint/cli": "latest",
 65 |     "@commitlint/config-conventional": "latest",
 66 |     "babel-plugin-styled-components": "latest",
 67 |     "conventional-github-releaser": "latest",
 68 |     "finepack": "latest",
 69 |     "git-authors-cli": "latest",
 70 |     "git-dirty": "latest",
 71 |     "husky": "latest",
 72 |     "lint-staged": "latest",
 73 |     "npm-check-updates": "latest",
 74 |     "prettier-standard": "latest",
 75 |     "standard": "latest",
 76 |     "standard-markdown": "latest",
 77 |     "standard-version": "latest"
 78 |   },
 79 |   "engines": {
 80 |     "node": "12.x"
 81 |   },
 82 |   "scripts": {
 83 |     "build": "NODE_ENV=production next build",
 84 |     "clean": "rm -rf node_modules",
 85 |     "contributors": "(git-authors-cli && finepack && git add package.json && git commit -m 'build: contributors' --no-verify) || true",
 86 |     "dev": "NODE_ENV=development next -p 3001",
 87 |     "export": "next export",
 88 |     "lint": "standard-markdown README.md && standard",
 89 |     "postrelease": "npm run release:tags && npm run release:github",
 90 |     "prerelease": "npm run update:check && npm run contributors",
 91 |     "pretest": "npm run lint",
 92 |     "release": "standard-version -a",
 93 |     "release:github": "conventional-github-releaser -p angular",
 94 |     "release:tags": "git push --follow-tags origin HEAD:master",
 95 |     "start": "next start",
 96 |     "test": "exit 0",
 97 |     "update": "ncu -u",
 98 |     "update:check": "ncu -- --error-level 2"
 99 |   },
100 |   "private": true,
101 |   "license": "MIT",
102 |   "commitlint": {
103 |     "extends": [
104 |       "@commitlint/config-conventional"
105 |     ]
106 |   },
107 |   "husky": {
108 |     "hooks": {
109 |       "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
110 |       "pre-commit": "lint-staged"
111 |     }
112 |   },
113 |   "lint-staged": {
114 |     "package.json": [
115 |       "finepack"
116 |     ],
117 |     "*.js": [
118 |       "prettier-standard"
119 |     ],
120 |     "*.md": [
121 |       "standard-markdown"
122 |     ]
123 |   }
124 | }
125 | 


--------------------------------------------------------------------------------
/src/components/presets/thepracticaldev.js:
--------------------------------------------------------------------------------
  1 | /* eslint-disable no-use-before-define */
  2 | 
  3 | import Inline from '../inline.macro'
  4 | import { Link, Flex, Image, Box, Text } from './scope'
  5 | 
  6 | const code = (
  7 |   <Inline>
  8 |     <>
  9 |       <Flex
 10 |         sx={{
 11 |           bg: query.bg,
 12 |           justifyContent: 'center',
 13 |           flexDirection: 'column'
 14 |         }}
 15 |       >
 16 |         <Box
 17 |           sx={{
 18 |             bg: 'white',
 19 |             color: query.color,
 20 |             margin: 50,
 21 |             borderTopLeftRadius: '10px',
 22 |             borderTopRightRadius: '10px',
 23 |             padding: '30px',
 24 |             border: '2px solid',
 25 |             borderColor: query.color,
 26 |             boxShadow: `10px 10px 0px 0px ${query.color}`
 27 |           }}
 28 |         >
 29 |           <Link
 30 |             href='https://fonts.googleapis.com/css2?family=Merriweather:wght@400;900&display=swap'
 31 |             rel='stylesheet'
 32 |           />
 33 |           <Text
 34 |             sx={{
 35 |               pt: 4,
 36 |               pb: 5,
 37 |               fontSize: 6,
 38 |               lineHeight: 1.4,
 39 |               fontWeight: '900',
 40 |               fontFamily: 'Merriweather',
 41 |               maxWidth: '36rem'
 42 |             }}
 43 |             children={query.title}
 44 |           />
 45 |           <Flex
 46 |             sx={{
 47 |               justifyContent: 'space-between'
 48 |             }}
 49 |           >
 50 |             <Flex
 51 |               sx={{
 52 |                 alignItems: 'center'
 53 |               }}
 54 |             >
 55 |               <Image
 56 |                 sx={{
 57 |                   border: '2px solid',
 58 |                   borderColor: query.color,
 59 |                   maxHeight: '50px',
 60 |                   borderRadius: '50%',
 61 |                   marginRight: '10px'
 62 |                 }}
 63 |                 src={query.avatar}
 64 |               />
 65 |               <Text
 66 |                 sx={{
 67 |                   fontSize: 3,
 68 |                   fontWeight: '400',
 69 |                   fontFamily: 'Merriweather'
 70 |                 }}
 71 |                 children={query.author}
 72 |               />
 73 |               <Text
 74 |                 sx={{
 75 |                   fontSize: 3,
 76 |                   px: 2,
 77 |                   fontWeight: '400',
 78 |                   fontFamily: 'Merriweather'
 79 |                 }}
 80 |                 children='•'
 81 |               />
 82 |               <Text
 83 |                 sx={{
 84 |                   fontSize: 3,
 85 |                   fontWeight: '400',
 86 |                   fontFamily: 'Merriweather'
 87 |                 }}
 88 |                 children={query.date}
 89 |               />
 90 |             </Flex>
 91 | 
 92 |             <Flex
 93 |               sx={{
 94 |                 width: '200px',
 95 |                 justifyContent: 'space-between'
 96 |               }}
 97 |             >
 98 |               {query.logos.map((image, index) => {
 99 |                 return (
100 |                   <Image
101 |                     sx={{
102 |                       maxHeight: '50px'
103 |                     }}
104 |                     style={{
105 |                       transform: `rotate(${index % 2 === 1 ? '0deg' : '15deg'})`
106 |                     }}
107 |                     key={image}
108 |                     src={image}
109 |                   />
110 |                 )
111 |               })}
112 |             </Flex>
113 |           </Flex>
114 |         </Box>
115 |       </Flex>
116 |     </>
117 |   </Inline>
118 | )
119 | 
120 | const query = {
121 |   title: 'Learn Web Development for Free',
122 |   avatar: 'https://kikobeats.com/images/avatar-glitch.jpg',
123 |   author: 'Kiko Beats',
124 |   date: '29 Apr',
125 |   bg: '#EAF1F7',
126 |   color: '#000',
127 |   logos: [
128 |     'https://upload.wikimedia.org/wikipedia/commons/thumb/9/99/Unofficial_JavaScript_logo_2.svg/490px-Unofficial_JavaScript_logo_2.svg.png',
129 |     'https://miro.medium.com/max/1024/1*dOizsWycMALIUfqbpNvaMQ.png',
130 |     'https://vuejs.org/images/logo.png'
131 |   ]
132 | }
133 | 
134 | export default { name: 'thepracticaldev', code, query }
135 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
  1 | # Changelog
  2 | 
  3 | All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
  4 | 
  5 | ### [0.0.36](https://github.com/microlinkhq/cards/compare/v0.0.35...v0.0.36) (2020-04-21)
  6 | 
  7 | ### [0.0.35](https://github.com/microlinkhq/cards/compare/v0.0.34...v0.0.35) (2020-04-21)
  8 | 
  9 | ### [0.0.34](https://github.com/microlinkhq/cards/compare/v0.0.33...v0.0.34) (2020-04-21)
 10 | 
 11 | ### [0.0.33](https://github.com/microlinkhq/cards/compare/v0.0.32...v0.0.33) (2020-04-21)
 12 | 
 13 | ### [0.0.32](https://github.com/microlinkhq/cards/compare/v0.0.31...v0.0.32) (2020-04-21)
 14 | 
 15 | ### [0.0.31](https://github.com/microlinkhq/cards/compare/v0.0.30...v0.0.31) (2020-04-21)
 16 | 
 17 | 
 18 | ### Bug Fixes
 19 | 
 20 | * remove debounce over store ([9a0af74](https://github.com/microlinkhq/cards/commit/9a0af74420419171acb3e0b8d0f39f693382ccaa))
 21 | 
 22 | ### [0.0.30](https://github.com/microlinkhq/cards/compare/v0.0.29...v0.0.30) (2020-04-21)
 23 | 
 24 | 
 25 | ### Bug Fixes
 26 | 
 27 | * select options font style ([038f1cb](https://github.com/microlinkhq/cards/commit/038f1cb5a5aec2b144249f95e5852c7505ef7e63))
 28 | 
 29 | ### [0.0.29](https://github.com/microlinkhq/cards/compare/v0.0.28...v0.0.29) (2020-04-19)
 30 | 
 31 | ### [0.0.28](https://github.com/microlinkhq/cards/compare/v0.0.27...v0.0.28) (2020-04-18)
 32 | 
 33 | ### [0.0.27](https://github.com/microlinkhq/cards/compare/v0.0.26...v0.0.27) (2020-04-18)
 34 | 
 35 | 
 36 | ### Bug Fixes
 37 | 
 38 | * typo ([fdc74d0](https://github.com/microlinkhq/cards/commit/fdc74d01d35e187cc4a83d5a05324704d05c9f01))
 39 | 
 40 | ### [0.0.26](https://github.com/microlinkhq/cards/compare/v0.0.25...v0.0.26) (2020-04-18)
 41 | 
 42 | ### [0.0.25](https://github.com/microlinkhq/cards/compare/v0.0.24...v0.0.25) (2020-04-18)
 43 | 
 44 | ### [0.0.24](https://github.com/microlinkhq/cards/compare/v0.0.23...v0.0.24) (2020-04-17)
 45 | 
 46 | ### [0.0.23](https://github.com/microlinkhq/cards/compare/v0.0.22...v0.0.23) (2020-04-17)
 47 | 
 48 | 
 49 | ### Bug Fixes
 50 | 
 51 | * remove slash ([ace6946](https://github.com/microlinkhq/cards/commit/ace694629452333c0dfba6117e6a78f71858f1b5))
 52 | * use the correct endpoint ([d9012c0](https://github.com/microlinkhq/cards/commit/d9012c023057f2b66f70a0a901ff34f704521e66))
 53 | 
 54 | ### [0.0.22](https://github.com/microlinkhq/cards/compare/v0.0.21...v0.0.22) (2020-04-17)
 55 | 
 56 | 
 57 | ### Bug Fixes
 58 | 
 59 | * use shorten url alias ([48747ca](https://github.com/microlinkhq/cards/commit/48747caa53d436119ce88c33bc82bbdc3692f448))
 60 | 
 61 | ### [0.0.21](https://github.com/microlinkhq/cards/compare/v0.0.20...v0.0.21) (2020-04-17)
 62 | 
 63 | 
 64 | ### Bug Fixes
 65 | 
 66 | * decode url ([bc279d0](https://github.com/microlinkhq/cards/commit/bc279d02e125dac6c3dbd2572db4db2a220ad4b1))
 67 | * linter ([18869f3](https://github.com/microlinkhq/cards/commit/18869f3ad4b453b6c394260e1e74259af1190d73))
 68 | * query short url ([e9542d7](https://github.com/microlinkhq/cards/commit/e9542d7d6deb1e014849bcaa0d35b85f71dcbbf0))
 69 | * use query color ([c03bead](https://github.com/microlinkhq/cards/commit/c03bead39b76c7e780a307a2a22676a8d0a85e74))
 70 | 
 71 | ### [0.0.20](https://github.com/microlinkhq/cards/compare/v0.0.19...v0.0.20) (2020-04-17)
 72 | 
 73 | ### [0.0.19](https://github.com/microlinkhq/cards/compare/v0.0.18...v0.0.19) (2020-04-16)
 74 | 
 75 | 
 76 | ### Bug Fixes
 77 | 
 78 | * call set query ([e0a1bf1](https://github.com/microlinkhq/cards/commit/e0a1bf1f5adbf37c83d4776a98c465a03f0f031a))
 79 | 
 80 | ### [0.0.18](https://github.com/microlinkhq/cards/compare/v0.0.17...v0.0.18) (2020-04-16)
 81 | 
 82 | 
 83 | ### Bug Fixes
 84 | 
 85 | * encode properly ([f5cf54b](https://github.com/microlinkhq/cards/commit/f5cf54b6f3c6a2c0974fabb7c441b368ec86fee1))
 86 | 
 87 | ### [0.0.17](https://github.com/microlinkhq/cards/compare/v0.0.16...v0.0.17) (2020-04-16)
 88 | 
 89 | 
 90 | ### Bug Fixes
 91 | 
 92 | * update query ([e42c2a4](https://github.com/microlinkhq/cards/commit/e42c2a45ac1627394962d52e269e09737e77899b))
 93 | 
 94 | ### [0.0.16](https://github.com/microlinkhq/cards/compare/v0.0.15...v0.0.16) (2020-04-16)
 95 | 
 96 | ### [0.0.15](https://github.com/microlinkhq/cards/compare/v0.0.14...v0.0.15) (2020-04-16)
 97 | 
 98 | ### [0.0.14](https://github.com/microlinkhq/cards/compare/v0.0.13...v0.0.14) (2020-04-16)
 99 | 
100 | 
101 | ### Bug Fixes
102 | 
103 | * avoid decode twice ([50f6a69](https://github.com/microlinkhq/cards/commit/50f6a69a9b0af6f6045614851001cab21f7dee80))
104 | * decode ([68c9311](https://github.com/microlinkhq/cards/commit/68c9311559372acc62cef0b3ff95ef93971cdb57))
105 | 
106 | ### [0.0.13](https://github.com/microlinkhq/cards/compare/v0.0.12...v0.0.13) (2020-04-16)
107 | 
108 | ### [0.0.12](https://github.com/microlinkhq/cards/compare/v0.0.11...v0.0.12) (2020-04-16)
109 | 
110 | ### [0.0.11](https://github.com/microlinkhq/cards/compare/v0.0.10...v0.0.11) (2020-04-16)
111 | 
112 | ### [0.0.10](https://github.com/microlinkhq/cards/compare/v0.0.9...v0.0.10) (2020-04-16)
113 | 
114 | 
115 | ### Bug Fixes
116 | 
117 | * set load after defer ([990cf00](https://github.com/microlinkhq/cards/commit/990cf001af75893bac6d606861af65b8c991f1ae))
118 | 
119 | ### [0.0.9](https://github.com/microlinkhq/cards/compare/v0.0.8...v0.0.9) (2020-04-16)
120 | 
121 | ### [0.0.8](https://github.com/microlinkhq/cards/compare/v0.0.7...v0.0.8) (2020-04-16)
122 | 
123 | 
124 | ### Bug Fixes
125 | 
126 | * reset query between presets ([c48fe17](https://github.com/microlinkhq/cards/commit/c48fe17b0c65d8d7b10123bcdf253ba523d755b0))
127 | 
128 | ### [0.0.7](https://github.com/microlinkhq/cards/compare/v0.0.6...v0.0.7) (2020-04-16)
129 | 
130 | 
131 | ### Bug Fixes
132 | 
133 | * ensure to flat/unflat query ([d28b35d](https://github.com/microlinkhq/cards/commit/d28b35d388b4f3b93fd2ee0747c406f48ca2e2ef)), closes [#13](https://github.com/microlinkhq/cards/issues/13)
134 | 
135 | ### [0.0.6](https://github.com/microlinkhq/cards/compare/v0.0.5...v0.0.6) (2020-04-15)
136 | 
137 | 
138 | ### Bug Fixes
139 | 
140 | * remove CMD key ([9044e56](https://github.com/microlinkhq/cards/commit/9044e565af6fbdddc8fcd8a4732d53762acb0b70))
141 | 
142 | ### [0.0.5](https://github.com/microlinkhq/cards/compare/v0.0.4...v0.0.5) (2020-04-15)
143 | 
144 | 
145 | ### Bug Fixes
146 | 
147 | * sync screenshot url ([399f40e](https://github.com/microlinkhq/cards/commit/399f40ea9f2a27c5f59fb6dbb5ee8457c315a63c))
148 | * use ctrl in key bindings ([151aa20](https://github.com/microlinkhq/cards/commit/151aa20ba836f38a53cb77a1896f41e8e5358673))
149 | 
150 | ### [0.0.4](https://github.com/microlinkhq/cards/compare/v0.0.2...v0.0.4) (2020-04-15)
151 | 
152 | ### [0.0.3](https://github.com/microlinkhq/cards/compare/v0.0.2...v0.0.3) (2020-04-15)
153 | 
154 | ### 0.0.2 (2020-04-15)
155 | 
156 | 
157 | ### Bug Fixes
158 | 
159 | * add prod url ([15abf5a](https://github.com/microlinkhq/cards/commit/15abf5af5f5bd428d3b1f57298b85cbb7dee0b05))
160 | * adjust preview resolution ([ac56695](https://github.com/microlinkhq/cards/commit/ac566950ba1dd09ad1c7be9979ba118d0d8b0946))
161 | * border preview ([ec2ae67](https://github.com/microlinkhq/cards/commit/ec2ae67eb7fe28f35863f089112e7a5a04c2d4fd))
162 | * cmd+s for saving ([8d824a9](https://github.com/microlinkhq/cards/commit/8d824a92ce1991e218440b2fcd6e53d0afdf36e8))
163 | * container scroll ([a0aeeef](https://github.com/microlinkhq/cards/commit/a0aeeefd636960238f40cfc8e84f8e772c08f335))
164 | * image proportion ([a3da7b9](https://github.com/microlinkhq/cards/commit/a3da7b98987bdc5fb3035254335d8233724a7b4e))
165 | * linter ([1bd1284](https://github.com/microlinkhq/cards/commit/1bd12843271a1e3a47bd192d319a36d111db5a71))
166 | * prop name ([d702880](https://github.com/microlinkhq/cards/commit/d70288036e815895e54742d39c06689efc3e3c0d))
167 | * remove debug ([65ad867](https://github.com/microlinkhq/cards/commit/65ad867a6afbc30a19b9fb82e036513f3101604b))
168 | 
169 | ### 0.0.1 (2020-04-15)
170 | 
171 | 
172 | ### Bug Fixes
173 | 
174 | * add prod url ([15abf5a](https://github.com/microlinkhq/cards/commit/15abf5af5f5bd428d3b1f57298b85cbb7dee0b05))
175 | * adjust preview resolution ([ac56695](https://github.com/microlinkhq/cards/commit/ac566950ba1dd09ad1c7be9979ba118d0d8b0946))
176 | * border preview ([ec2ae67](https://github.com/microlinkhq/cards/commit/ec2ae67eb7fe28f35863f089112e7a5a04c2d4fd))
177 | * cmd+s for saving ([8d824a9](https://github.com/microlinkhq/cards/commit/8d824a92ce1991e218440b2fcd6e53d0afdf36e8))
178 | * container scroll ([a0aeeef](https://github.com/microlinkhq/cards/commit/a0aeeefd636960238f40cfc8e84f8e772c08f335))
179 | * image proportion ([a3da7b9](https://github.com/microlinkhq/cards/commit/a3da7b98987bdc5fb3035254335d8233724a7b4e))
180 | * linter ([1bd1284](https://github.com/microlinkhq/cards/commit/1bd12843271a1e3a47bd192d319a36d111db5a71))
181 | * prop name ([d702880](https://github.com/microlinkhq/cards/commit/d70288036e815895e54742d39c06689efc3e3c0d))
182 | * remove debug ([65ad867](https://github.com/microlinkhq/cards/commit/65ad867a6afbc30a19b9fb82e036513f3101604b))
183 | 


--------------------------------------------------------------------------------
/src/pages/_app.js:
--------------------------------------------------------------------------------
  1 | import NextApp from 'next/app'
  2 | import Head from 'next/head'
  3 | import { createGlobalStyle } from 'styled-components'
  4 | import { ThemeProvider } from 'theme-ui'
  5 | import theme from '@/theme'
  6 | import pkg from '@/package.json'
  7 | 
  8 | const GlobalStylesheet = createGlobalStyle`
  9 |   * {
 10 |     box-sizing: border-box;
 11 |   }
 12 |   html {
 13 |     background: rgba(255, 255, 255, 0.1);
 14 |   }
 15 |   .snackbars {
 16 |     display: block;
 17 |     position: fixed;
 18 |     left: 0;
 19 |     bottom: 0;
 20 |     width: 100%;
 21 |     height: 0;
 22 |     z-index: 999;
 23 |     overflow: visible;
 24 |   }
 25 |   .snackbar {
 26 |     position: fixed;
 27 |     box-sizing: border-box;
 28 |     left: 50%;
 29 |     bottom: 14px;
 30 |     width: 344px;
 31 |     margin-left: -172px;
 32 |     transform-origin: center;
 33 |     will-change: transform;
 34 |     transition: transform 300ms ease, opacity 300ms ease;
 35 |   }
 36 |   .snackbar[aria-hidden='false'] {
 37 |     -webkit-animation: snackbar-show 300ms ease 1;
 38 |             animation: snackbar-show 300ms ease 1;
 39 |   }
 40 |   .snackbar[aria-hidden='true'] {
 41 |     -webkit-animation: snackbar-hide 300ms ease forwards 1;
 42 |             animation: snackbar-hide 300ms ease forwards 1;
 43 |   }
 44 |   @media (min-width: 1080px) {
 45 |       .snackbars-right .snackbar {
 46 |         left: auto;
 47 |         right: 20px;
 48 |         margin-left: 0;
 49 |       }
 50 |       .snackbars-left .snackbar {
 51 |         left: 20px;
 52 |         margin-left: 0;
 53 |       }
 54 |   }
 55 |   @-webkit-keyframes snackbar-show {
 56 |     from {
 57 |       opacity: 0;
 58 |       transform: translate3d(0, 100%, 0)
 59 |     }
 60 |   }
 61 |   @keyframes snackbar-show {
 62 |     from {
 63 |       opacity: 0;
 64 |       transform: translate3d(0, 100%, 0)
 65 |     }
 66 |   }
 67 |   @-webkit-keyframes snackbar-hide {
 68 |     to {
 69 |       opacity: 0;
 70 |       transform: translateY(100%);
 71 |     }
 72 |   }
 73 |   @keyframes snackbar-hide {
 74 |     to {
 75 |       opacity: 0;
 76 |       transform: translateY(100%);
 77 |     }
 78 |   }
 79 |   @media (max-width: 400px) {
 80 |     .snackbar {
 81 |       width: 100%;
 82 |       bottom: 0;
 83 |       left: 0;
 84 |       margin-left: 0;
 85 |       border-radius: 0;
 86 |     }
 87 |   }
 88 |   .snackbar--container {
 89 |     display: flex;
 90 |     background: #2a2a2a;
 91 |     border-radius: 2px;
 92 |     box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
 93 |     color: #eee;
 94 |     cursor: default;
 95 |     margin-bottom: 10px;
 96 |   }
 97 |   .snackbar--text {
 98 |     flex: 1 1 auto;
 99 |     padding: 16px;
100 |     font-size: 100%;
101 |     font-family: ${theme.fonts.sans};
102 |   }
103 |   .snackbar--button {
104 |     position: relative;
105 |     flex: 0 1 auto;
106 |     padding: 8px;
107 |     height: 36px;
108 |     margin: auto 8px auto -8px;
109 |     background: none;
110 |     border: none;
111 |     border-radius: 3px;
112 |     color: white;
113 |     font-weight: inherit;
114 |     letter-spacing: 0.05em;
115 |     font-size: 100%;
116 |     text-transform: uppercase;
117 |     text-align: center;
118 |     cursor: pointer;
119 |     overflow: hidden;
120 |     transition: background-color 200ms ease;
121 |     outline: none;
122 |   }
123 | 
124 |   .snackbar--button:focus:before {
125 |     content: '';
126 |     position: absolute;
127 |     left: 50%;
128 |     top: 50%;
129 |     width: 120%;
130 |     height: 0;
131 |     padding: 0 0 120%;
132 |     margin: -60% 0 0 -60%;
133 |     background: rgba(255, 255, 255, 0.1);
134 |     border-radius: 50%;
135 |     transform-origin: center;
136 |     will-change: transform;
137 |     -webkit-animation: focus-ring 300ms ease-out forwards 1;
138 |             animation: focus-ring 300ms ease-out forwards 1;
139 |     pointer-events: none;
140 |   }
141 | 
142 |   @-webkit-keyframes focus-ring {
143 |     from {
144 |       transform: scale(0.01);
145 |     }
146 |   }
147 | 
148 |   @keyframes focus-ring {
149 |     from {
150 |       transform: scale(0.01);
151 |     }
152 |   }
153 | 
154 |   #overlay-container[aria-hidden='false'] {
155 |     -webkit-animation: snackbar-show 300ms ease 1;
156 |             animation: snackbar-show 300ms ease 1;
157 |   }
158 | 
159 |   #overlay-container[aria-hidden='true'] {
160 |     -webkit-animation: snackbar-hide 300ms ease forwards 1;
161 |             animation: snackbar-hide 300ms ease forwards 1;
162 |   }
163 | 
164 |   .react-loading-skeleton {
165 |     display: block !important;
166 |   }
167 | `
168 | const meta = {
169 |   title: 'Microlink Cards',
170 |   description: pkg.description,
171 |   image: 'https://cdn.microlink.io/banner/cards.png',
172 |   logo: 'https://cdn.microlink.io/logo/trim.png',
173 |   url: 'https://cards.microlink.io',
174 |   siteName: 'Microlink Cards',
175 |   type: 'website'
176 | }
177 | 
178 | export default class App extends NextApp {
179 |   render () {
180 |     const { Component, pageProps } = this.props
181 | 
182 |     return (
183 |       <ThemeProvider theme={theme}>
184 |         <GlobalStylesheet />
185 |         <Head>
186 |           {/* <!-- Basic --> */}
187 |           <meta charSet='utf-8' />
188 |           <meta httpEquiv='x-ua-compatible' content='ie=edge' />
189 |           {/* <!-- Search Engine --> */}
190 |           <meta name='description' content={meta.description} />
191 |           <meta name='image' content={meta.image} />
192 |           <link rel='canonical' href={meta.url} />
193 |           <title>{meta.title}</title>
194 |           <meta
195 |             name='viewport'
196 |             content='width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0'
197 |           />
198 |           {/* <!-- Schema.org for Google --> */}
199 |           <meta itemProp='name' content={meta.title} />
200 |           <meta itemProp='description' content={meta.description} />
201 |           <meta itemProp='image' content={meta.image} />
202 |           {/* <!-- Twitter --> */}
203 |           <meta name='twitter:card' content='summary_large_image' />
204 |           <meta name='twitter:title' content={meta.title} />
205 |           <meta name='twitter:description' content={meta.description} />
206 |           <meta name='twitter:image' content={meta.image} />
207 |           {/* <!-- Open Graph general (Facebook, Pinterest & Google+) --> */}
208 |           <meta property='og:title' content={meta.title} />
209 |           <meta property='og:logo' content={meta.logo} />
210 |           <meta property='og:description' content={meta.description} />
211 |           <meta property='og:image' content={meta.image} />
212 |           <meta property='og:url' content={meta.url} />
213 |           <meta property='og:site_name' content={meta.siteName} />
214 |           <meta property='og:type' content={meta.type} />
215 |           {/* <!-- Favicon --> */}
216 |           <link
217 |             rel='apple-touch-icon-precomposed'
218 |             sizes='57x57'
219 |             href='https://cdn.microlink.io/logo/apple-touch-icon-57x57.png'
220 |           />
221 |           <link
222 |             rel='apple-touch-icon-precomposed'
223 |             sizes='114x114'
224 |             href='https://cdn.microlink.io/logo/apple-touch-icon-114x114.png'
225 |           />
226 |           <link
227 |             rel='apple-touch-icon-precomposed'
228 |             sizes='72x72'
229 |             href='https://cdn.microlink.io/logo/apple-touch-icon-72x72.png'
230 |           />
231 |           <link
232 |             rel='apple-touch-icon-precomposed'
233 |             sizes='144x144'
234 |             href='https://cdn.microlink.io/logo/apple-touch-icon-144x144.png'
235 |           />
236 |           <link
237 |             rel='apple-touch-icon-precomposed'
238 |             sizes='60x60'
239 |             href='https://cdn.microlink.io/logo/apple-touch-icon-60x60.png'
240 |           />
241 |           <link
242 |             rel='apple-touch-icon-precomposed'
243 |             sizes='120x120'
244 |             href='https://cdn.microlink.io/logo/apple-touch-icon-120x120.png'
245 |           />
246 |           <link
247 |             rel='apple-touch-icon-precomposed'
248 |             sizes='76x76'
249 |             href='https://cdn.microlink.io/logo/apple-touch-icon-76x76.png'
250 |           />
251 |           <link
252 |             rel='apple-touch-icon-precomposed'
253 |             sizes='152x152'
254 |             href='https://cdn.microlink.io/logo/apple-touch-icon-152x152.png'
255 |           />
256 |           <link
257 |             rel='icon'
258 |             type='image/png'
259 |             href='https://cdn.microlink.io/logo/favicon-196x196.png'
260 |             sizes='196x196'
261 |           />
262 |           <link
263 |             rel='icon'
264 |             type='image/png'
265 |             href='https://cdn.microlink.io/logo/favicon-96x96.png'
266 |             sizes='96x96'
267 |           />
268 |           <link
269 |             rel='icon'
270 |             type='image/png'
271 |             href='https://cdn.microlink.io/logo/favicon-32x32.png'
272 |             sizes='32x32'
273 |           />
274 |           <link
275 |             rel='icon'
276 |             type='image/png'
277 |             href='https://cdn.microlink.io/logo/favicon-16x16.png'
278 |             sizes='16x16'
279 |           />
280 |           <link
281 |             rel='icon'
282 |             type='image/png'
283 |             href='https://cdn.microlink.io/logo/favicon-128.png'
284 |             sizes='128x128'
285 |           />
286 |           <link
287 |             href='https://fonts.googleapis.com/css2?family=Inter&display=swap'
288 |             rel='stylesheet'
289 |           />
290 |         </Head>
291 |         <Component {...pageProps} />
292 |       </ThemeProvider>
293 |     )
294 |   }
295 | }
296 | 


--------------------------------------------------------------------------------
/src/pages/index.js:
--------------------------------------------------------------------------------
  1 | import { HorizontalDragBar, VerticalDragBar } from '@/components/drag-bars'
  2 | import { Tab, Tabs, TabList, TabPanel } from '@/components/tabs'
  3 | import { Image, Text, Box, Flex, useThemeUI } from 'theme-ui'
  4 | import SearchableSelect from '@/components/searchable-select'
  5 | import { marshall, unmarshall } from '@/lib/compress-json'
  6 | import useScreenshotUrl from '@/hooks/use-screenshot-url'
  7 | import KeyboardIcon from '@/components/icons/keyboard'
  8 | import useKeyBindings from '@/hooks/use-key-bindings'
  9 | import useQueryState from '@/hooks/use-query-state'
 10 | import GitHubIcon from '@/components/icons/github'
 11 | import aspectRatio from '@/lib/aspect-ratio-16-9'
 12 | import JSONViewer from '@/components/json-viewer'
 13 | import ButtonIcon from '@/components/button-icon'
 14 | import ThemeIcon from '@/components/icons/theme'
 15 | import InfoIcon from '@/components/icons/info'
 16 | import notification from '@/lib/notification'
 17 | import useLoading from '@/hooks/use-loading'
 18 | import presets from '@/components/presets'
 19 | import Overlay from '@/components/overlay'
 20 | import Button from '@/components/button'
 21 | import shareCode from '@/lib/share-code'
 22 | import Choose from '@/components/choose'
 23 | import { diff } from 'deep-object-diff'
 24 | import store from '@/lib/local-storage'
 25 | import clipboard from '@/lib/clipboard'
 26 | import debounce from '@/lib/debounce'
 27 | import Main from '@/components/main'
 28 | import Code from '@/components/code'
 29 | import isEmpty from '@/lib/is-empty'
 30 | import * as polished from 'polished'
 31 | import isMac from '@/lib/is-mac'
 32 | import Router from 'next/router'
 33 | import { useState } from 'react'
 34 | import themeBase from '@/theme'
 35 | import toPx from '@/lib/to-px'
 36 | import defer from 'tickedoff'
 37 | import Cycled from 'cycled'
 38 | 
 39 | import {
 40 |   LiveProvider,
 41 |   LiveEditor,
 42 |   LiveError,
 43 |   LivePreview
 44 | } from '@/components/live-editor'
 45 | 
 46 | import pkg from '@/package.json'
 47 | 
 48 | const DEFAULT_PRESET = 'rauchg'
 49 | const ASIDE_HEIGHT_KEY = 'sidebar-json-height'
 50 | const ASIDE_WIDTH_KEY = 'sidebar-width'
 51 | const DEFAULT_ASIDE_WIDTH = '40%'
 52 | const DEFAULT_ASIDE_HEIGHT = '25%'
 53 | const ASIDE_MIN_WIDTH = '40%'
 54 | const ASIDE_MAX_WIDTH = '60%'
 55 | const ASIDE_MIN_HEIGHT = '15%'
 56 | const ASIDE_MAX_HEIGHT = '70%'
 57 | 
 58 | const OVERLAY_STATE = {
 59 |   PREVIEW: 'preview',
 60 |   ABOUT: 'about',
 61 |   KEYBINDINGS: 'keybindings'
 62 | }
 63 | 
 64 | const PREVIEW_WIDTH = 500
 65 | const PREVIEW_HEIGHT = aspectRatio(PREVIEW_WIDTH)
 66 | 
 67 | const updateQuery = debounce(({ setQuery, code, queryVariables }) => {
 68 |   let newQuery = {}
 69 |   if (!isEmpty(code)) newQuery.p = marshall(code)
 70 |   if (!isEmpty(queryVariables)) newQuery = { ...newQuery, ...queryVariables }
 71 |   setQuery(newQuery)
 72 | })
 73 | 
 74 | const updateStore = ({ key, value }) => store.set(key, value)
 75 | 
 76 | const cycledMode = new Cycled(Object.keys(themeBase.colors.modes))
 77 | const nextMode = () => cycledMode.next()
 78 | 
 79 | export default () => {
 80 |   const isLoading = useLoading()
 81 |   const [query, setQuery] = useQueryState()
 82 |   const { theme, colorMode, setColorMode } = useThemeUI()
 83 |   const [isOverlay, setOverlay] = useState('')
 84 |   const [asideWidth, setAsideWidth] = useState(
 85 |     store.get(ASIDE_WIDTH_KEY) || DEFAULT_ASIDE_WIDTH
 86 |   )
 87 | 
 88 |   const [jsonHeight, setJsonHeight] = useState(
 89 |     store.get(ASIDE_HEIGHT_KEY) || DEFAULT_ASIDE_HEIGHT
 90 |   )
 91 | 
 92 |   const [preset, setPreset] = useState(presets[query.preset || DEFAULT_PRESET])
 93 | 
 94 |   const [code, setCode] = useState(() => {
 95 |     if (isEmpty(query)) return preset.code
 96 |     const { p } = query
 97 |     if (isEmpty(p)) return preset.code
 98 |     return unmarshall(p)
 99 |   })
100 | 
101 |   const [queryVariables, setQueryVariables] = useState(() => {
102 |     if (isEmpty(query)) return preset.query
103 |     const { p, preset: queryPreset, ...queryVariables } = query
104 |     if (isEmpty(queryVariables)) return preset.query
105 |     return { ...preset.query, ...queryVariables }
106 |   })
107 | 
108 |   const [screenshotUrl, syncScreenshotUrl] = useScreenshotUrl(queryVariables)
109 | 
110 |   const showOverlay = state => () => {
111 |     syncScreenshotUrl(queryVariables)
112 |     defer(() => setOverlay(state))
113 |   }
114 | 
115 |   const hideOverlay = () => setOverlay('')
116 | 
117 |   async function toClipboard (text, name) {
118 |     await clipboard.write(text)
119 |     notification(`Copied ${name} to clipboard`)
120 |   }
121 | 
122 |   const changeTheme = () => setColorMode(nextMode())
123 | 
124 |   useKeyBindings({
125 |     Escape: { fn: hideOverlay },
126 |     KeyH: { ctrl: true, fn: showOverlay(OVERLAY_STATE.KEYBINDINGS) },
127 |     KeyI: { ctrl: true, fn: showOverlay(OVERLAY_STATE.ABOUT) },
128 |     KeyP: { ctrl: true, fn: changeTheme },
129 |     KeyS: { ctrl: true, fn: showOverlay(OVERLAY_STATE.PREVIEW) }
130 |   })
131 | 
132 |   const handleCode = newCode => {
133 |     setCode(newCode)
134 |     updateQuery({ setQuery, code: newCode })
135 |   }
136 | 
137 |   const handleQueryVariables = newJSON => {
138 |     setQueryVariables(newJSON)
139 |     updateQuery({ setQuery, queryVariables: diff(preset.query, newJSON) })
140 |   }
141 | 
142 |   const handleAsideWidthReize = width => {
143 |     setAsideWidth(width)
144 |     updateStore({ key: ASIDE_WIDTH_KEY, value: width })
145 |   }
146 | 
147 |   const handleAsideHeightResize = height => {
148 |     setJsonHeight(height)
149 |     updateStore({ key: ASIDE_HEIGHT_KEY, value: height })
150 |   }
151 | 
152 |   const handleSelectChange = event => {
153 |     const presetName = event.value
154 |     const newPreset = presets[presetName]
155 |     setPreset(newPreset)
156 |     setCode(newPreset.code)
157 |     setQueryVariables(newPreset.query)
158 |     setQuery({ p: undefined, preset: presetName }, { replace: true })
159 |   }
160 | 
161 |   if (isLoading) return null
162 | 
163 |   const isEditor = Router.asPath.startsWith('/editor')
164 |   const editorTheme = theme.colors.modes[colorMode]
165 |   const color = editorTheme.plain.color
166 |   const bg = editorTheme.plain.backgroundColor
167 |   const borderColor = polished.rgba(color, 0.1)
168 |   const iconColor = polished.rgba(color, 0.75)
169 | 
170 |   const stringColor = theme.colors.styles.find(item =>
171 |     item.types.includes('string')
172 |   ).style.color
173 | 
174 |   const OverlayHeader = ({ sx, children }) => {
175 |     return (
176 |       <Box as='header' sx={{ position: 'sticky' }}>
177 |         <Box
178 |           sx={{
179 |             display: 'flex',
180 |             maxWidth: '100%',
181 |             border: 1,
182 |             borderColor,
183 |             ...sx
184 |           }}
185 |         >
186 |           {children}
187 |         </Box>
188 |       </Box>
189 |     )
190 |   }
191 | 
192 |   const OverlayFooter = () => {
193 |     return (
194 |       <Flex as='footer' sx={{ justifyContent: 'flex-end', pt: 4 }}>
195 |         <Button
196 |           sx={{ bg: color, color: bg }}
197 |           onClick={hideOverlay}
198 |           children='Got it'
199 |         />
200 |       </Flex>
201 |     )
202 |   }
203 | 
204 |   const OverlayKeyBindings = () => {
205 |     const ctrl = isMac ? 'cmd' : 'ctrl'
206 |     return (
207 |       <>
208 |         <Box sx={{ width: '100%' }}>
209 |           <Flex
210 |             as='header'
211 |             sx={{
212 |               p: '10px',
213 |               fontWeight: 'bold',
214 |               borderBottom: 1,
215 |               borderColor
216 |             }}
217 |           >
218 |             <Box sx={{ width: '25%', mr: 3 }}>Combination</Box>
219 |             <Box sx={{ width: '75%' }}>Description</Box>
220 |           </Flex>
221 |           {[
222 |             {
223 |               combination: [ctrl, ' + ', 'h'],
224 |               description: 'Show keybindings information'
225 |             },
226 |             {
227 |               combination: [ctrl, ' + ', 'i'],
228 |               description: 'Show information about the project'
229 |             },
230 |             {
231 |               combination: [ctrl, ' + ', 's'],
232 |               description: 'Get the current image URL'
233 |             },
234 |             {
235 |               combination: [ctrl, ' + ', 'click'],
236 |               description: 'Edit the selected value on query variables'
237 |             },
238 |             {
239 |               combination: [ctrl, ' + ', 'p'],
240 |               description: 'Change the editor theme'
241 |             },
242 |             {
243 |               combination: ['esc'],
244 |               description: 'Close the active modal'
245 |             }
246 |           ].map(({ combination, description }) => (
247 |             <Flex
248 |               as='section'
249 |               key={combination}
250 |               sx={{ lineHeight: 2, p: 3, borderBottom: 1, borderColor }}
251 |             >
252 |               <Box sx={{ width: '25%', mr: 3 }}>
253 |                 <Box
254 |                   sx={{
255 |                     display: 'inline',
256 |                     py: '3px',
257 |                     px: '6px',
258 |                     border: 1,
259 |                     borderColor,
260 |                     borderRadius: 4
261 |                   }}
262 |                 >
263 |                   {combination.map(key => (
264 |                     <Text
265 |                       sx={{
266 |                         fontSize: 0,
267 |                         textTransform: 'uppercase',
268 |                         color,
269 |                         display: 'inherit'
270 |                       }}
271 |                       key={key}
272 |                       children={key}
273 |                     />
274 |                   ))}
275 |                 </Box>
276 |               </Box>
277 |               <Box sx={{ width: '75%' }}>{description}</Box>
278 |             </Flex>
279 |           ))}
280 |         </Box>
281 |         <OverlayFooter />
282 |       </>
283 |     )
284 |   }
285 | 
286 |   const OverlayAbout = () => {
287 |     return (
288 |       <>
289 |         <OverlayHeader>
290 |           <Image
291 |             src='https://cdn.microlink.io/banner/cards.png'
292 |             alt='microlink cards'
293 |           />
294 |         </OverlayHeader>
295 | 
296 |         <Text sx={{ color, my: 3, fontSize: 2, fontWeight: 'normal' }}>
297 |           <b>Microlink Cards</b> generates social images on demand, ready to be
298 |           embed in your{' '}
299 |           <Text as='code' sx={{ fontFamily: 'mono' }}>
300 |             &lt;meta&gt;
301 |           </Text>{' '}
302 |           tags.
303 |         </Text>
304 |         <Text sx={{ color, my: 3, fontSize: 2, fontWeight: 'normal' }}>
305 |           The tool is an interactive editor that allows generate your images
306 |           writing them with code and feed with dynamic content.
307 |         </Text>
308 |         <Text sx={{ color, my: 3, fontSize: 2, fontWeight: 'normal' }}>
309 |           It's powered by{' '}
310 |           <Text
311 |             as='a'
312 |             sx={{ textDecoration: 'none', color: stringColor }}
313 |             href='https://microlink.io'
314 |             target='_blank'
315 |             rel='noopener noreferrer'
316 |           >
317 |             Microlink API
318 |           </Text>
319 |           , the fastest and scalable headless browser platform on the cloud.
320 |         </Text>
321 |         <Text sx={{ my: 3, fontSize: 2, fontWeight: 'normal' }}>
322 |           It starts from <b>free</b> and code is available on{' '}
323 |           <Text
324 |             as='a'
325 |             sx={{ textDecoration: 'none', color: stringColor }}
326 |             href={pkg.homepage}
327 |             target='_blank'
328 |             rel='noopener noreferrer'
329 |           >
330 |             GitHub
331 |           </Text>
332 |           .
333 |         </Text>
334 |         <OverlayFooter />
335 |       </>
336 |     )
337 |   }
338 | 
339 |   const OverlayPreview = () => {
340 |     return (
341 |       <>
342 |         <OverlayHeader
343 |           sx={{
344 |             height: PREVIEW_HEIGHT
345 |           }}
346 |         >
347 |           <LivePreview
348 |             isThumbnail
349 |             thumbnailHeight={`calc(${toPx(PREVIEW_HEIGHT)} + 2px)`}
350 |             thumbnailWidth={`calc(${toPx(PREVIEW_WIDTH)} + 2px)`}
351 |             onClick={() => toClipboard(screenshotUrl, 'URL')}
352 |           />
353 |         </OverlayHeader>
354 | 
355 |         <Text sx={{ color, my: 3, fontSize: 2, fontWeight: 'normal' }}>
356 |           Add it to your website by copying the code below
357 |         </Text>
358 | 
359 |         <Box as='section' sx={{ overflow: 'scroll' }}>
360 |           <Tabs theme={{ borderColor, color, bg }}>
361 |             <TabList>
362 |               <Tab>SEO tags</Tab>
363 |               <Tab>HTML</Tab>
364 |               <Tab>Markdown</Tab>
365 |               <Tab>Direct URL</Tab>
366 |             </TabList>
367 | 
368 |             <TabPanel>
369 |               <Code
370 |                 sx={{
371 |                   borderColor,
372 |                   color: stringColor
373 |                 }}
374 |                 onClick={e => toClipboard(e.target.textContent, 'SEO Tags')}
375 |                 children={shareCode(screenshotUrl)}
376 |               />
377 |             </TabPanel>
378 |             <TabPanel>
379 |               <Code
380 |                 sx={{
381 |                   borderColor,
382 |                   color: stringColor
383 |                 }}
384 |                 children={`<img src="${screenshotUrl}" alt="Generated by https://cards.microlink.io">`}
385 |                 onClick={e => toClipboard(e.target.textContent, 'HTML')}
386 |               />
387 |             </TabPanel>
388 |             <TabPanel>
389 |               <Code
390 |                 sx={{
391 |                   borderColor,
392 |                   color: stringColor
393 |                 }}
394 |                 children={`![Generated by https://cards.microlink.io](${screenshotUrl})`}
395 |                 onClick={e => toClipboard(e.target.textContent, 'Markdown')}
396 |               />
397 |             </TabPanel>
398 |             <TabPanel>
399 |               <Code
400 |                 sx={{
401 |                   borderColor,
402 |                   color: stringColor
403 |                 }}
404 |                 children={screenshotUrl}
405 |                 onClick={e => toClipboard(e.target.textContent, 'URL')}
406 |               />
407 |             </TabPanel>
408 |           </Tabs>
409 |         </Box>
410 |         <OverlayFooter />
411 |       </>
412 |     )
413 |   }
414 | 
415 |   return (
416 |     <LiveProvider
417 |       theme={editorTheme}
418 |       queryVariables={queryVariables}
419 |       code={code}
420 |     >
421 |       <Overlay
422 |         aria-hidden={isOverlay === ''}
423 |         backgroundColor={bg}
424 |         color={color}
425 |         isOpen={isOverlay !== ''}
426 |         onClose={hideOverlay}
427 |       >
428 |         <Choose.When condition={isOverlay === OVERLAY_STATE.PREVIEW}>
429 |           <OverlayPreview />
430 |         </Choose.When>
431 |         <Choose.When condition={isOverlay === OVERLAY_STATE.ABOUT}>
432 |           <OverlayAbout />
433 |         </Choose.When>
434 |         <Choose.When condition={isOverlay === OVERLAY_STATE.KEYBINDINGS}>
435 |           <OverlayKeyBindings />
436 |         </Choose.When>
437 |       </Overlay>
438 |       <Flex sx={{ bg: 'plain.backgroundColor', height: '100vh' }}>
439 |         <Main>
440 |           <LivePreview
441 |             onClick={showOverlay(OVERLAY_STATE.PREVIEW)}
442 |             isEditor={isEditor}
443 |           />
444 |           <LiveError />
445 |         </Main>
446 |         {isEditor && (
447 |           <Flex
448 |             as='aside'
449 |             sx={{
450 |               mt: 3,
451 |               mb: 3,
452 |               pl: 3,
453 |               borderLeft: 1,
454 |               borderColor,
455 |               bg: 'plain.backgroundColor',
456 |               flexDirection: 'column',
457 |               fontFamily: 'mono',
458 |               fontSize: 2,
459 |               fontWeight: 'light',
460 |               height: 'calc(100vh - 32px)',
461 |               maxWidth: ASIDE_MAX_WIDTH,
462 |               minWidth: ASIDE_MIN_WIDTH,
463 |               position: 'relative',
464 |               width: asideWidth,
465 |               willChange: 'width'
466 |             }}
467 |           >
468 |             <VerticalDragBar onDrag={handleAsideWidthReize} />
469 | 
470 |             <Flex
471 |               as='header'
472 |               sx={{
473 |                 alignItems: 'center',
474 |                 bg: 'plain.backgroundColor',
475 |                 borderBottom: 1,
476 |                 borderColor,
477 |                 py: 3,
478 |                 mr: 3,
479 |                 color: 'plain.color',
480 |                 justifyContent: 'space-between'
481 |               }}
482 |             >
483 |               <Flex sx={{ alignItems: 'center' }}>
484 |                 <Box
485 |                   sx={{
486 |                     width: ['150px', '150px', '150px', '200px']
487 |                   }}
488 |                 >
489 |                   <SearchableSelect
490 |                     color={color}
491 |                     bg={bg}
492 |                     value={{ value: preset.name, label: preset.name }}
493 |                     options={Object.keys(presets).map(key => ({
494 |                       value: key,
495 |                       label: presets[key].name
496 |                     }))}
497 |                     onChange={handleSelectChange}
498 |                   />
499 |                 </Box>
500 |                 <Box sx={{ ml: [1, 1, 1, 2] }}>
501 |                   <Button
502 |                     sx={{ color: bg, bg: color }}
503 |                     onClick={showOverlay(OVERLAY_STATE.PREVIEW)}
504 |                     children='Get URL'
505 |                   />
506 |                 </Box>
507 |               </Flex>
508 |               <Flex
509 |                 sx={{
510 |                   alignItems: 'center'
511 |                 }}
512 |               >
513 |                 <ButtonIcon
514 |                   as='button'
515 |                   title='Show keybindings'
516 |                   color={iconColor}
517 |                   hoverColor={color}
518 |                   onClick={showOverlay(OVERLAY_STATE.KEYBINDINGS)}
519 |                 >
520 |                   <KeyboardIcon />
521 |                 </ButtonIcon>
522 |                 <Box sx={{ ml: [1, 1, 1, 2] }}>
523 |                   <ButtonIcon
524 |                     as='button'
525 |                     title='Learn more about the project'
526 |                     color={iconColor}
527 |                     hoverColor={color}
528 |                     onClick={showOverlay(OVERLAY_STATE.ABOUT)}
529 |                   >
530 |                     <InfoIcon />
531 |                   </ButtonIcon>
532 |                 </Box>
533 |                 <Box sx={{ ml: [1, 1, 1, 2] }}>
534 |                   <ButtonIcon
535 |                     as='a'
536 |                     href={pkg.homepage}
537 |                     target='_blank'
538 |                     rel='noopener noreferrer'
539 |                     title='See on GitHub'
540 |                     color={iconColor}
541 |                     hoverColor={color}
542 |                   >
543 |                     <GitHubIcon />
544 |                   </ButtonIcon>
545 |                 </Box>
546 |                 <Box sx={{ ml: [1, 1, 1, 2] }}>
547 |                   <ButtonIcon
548 |                     as='button'
549 |                     title='Change color mode'
550 |                     onClick={changeTheme}
551 |                     color={iconColor}
552 |                     hoverColor={color}
553 |                   >
554 |                     <ThemeIcon />
555 |                   </ButtonIcon>
556 |                 </Box>
557 |               </Flex>
558 |             </Flex>
559 |             <Flex sx={{ flex: 1, minHeight: 0, flexDirection: 'column' }}>
560 |               <Box
561 |                 as='section'
562 |                 sx={{
563 |                   borderBottom: 1,
564 |                   borderColor,
565 |                   p: 3,
566 |                   mr: 3,
567 |                   overflow: 'auto',
568 |                   flex: 1
569 |                 }}
570 |               >
571 |                 <LiveEditor onChange={handleCode} />
572 |               </Box>
573 |               <Box
574 |                 sx={{
575 |                   height: jsonHeight,
576 |                   maxHeight: ASIDE_MAX_HEIGHT,
577 |                   minHeight: ASIDE_MIN_HEIGHT,
578 |                   position: 'relative',
579 |                   willChange: 'height',
580 |                   overflow: 'auto'
581 |                 }}
582 |               >
583 |                 <HorizontalDragBar onDrag={handleAsideHeightResize} />
584 |                 <Box
585 |                   as='section'
586 |                   sx={{
587 |                     bg: 'plain.backgroundColor',
588 |                     py: 3,
589 |                     mr: 3
590 |                   }}
591 |                 >
592 |                   <JSONViewer
593 |                     theme={editorTheme}
594 |                     children={queryVariables}
595 |                     onChange={handleQueryVariables}
596 |                   />
597 |                 </Box>
598 |               </Box>
599 |             </Flex>
600 |           </Flex>
601 |         )}
602 |       </Flex>
603 |     </LiveProvider>
604 |   )
605 | }
606 | 


--------------------------------------------------------------------------------