├── .gitignore
├── public
    ├── favicon.ico
    └── assets
    │   └── og-main.png
├── README.md
├── lib
    ├── config-context.js
    ├── use-dom-clean.js
    ├── components
    │   ├── title.jsx
    │   ├── footer.jsx
    │   ├── layout.jsx
    │   ├── settings.jsx
    │   ├── welcome.jsx
    │   └── dashboard.jsx
    ├── use-natural-size.js
    └── utils.js
├── pages
    ├── index.jsx
    ├── _document.jsx
    └── _app.jsx
├── package.json
└── next.config.js


/.gitignore:
--------------------------------------------------------------------------------
1 | .next
2 | .now
3 | .env
4 | .idea
5 | node_modules
6 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/unix/img/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/public/assets/og-main.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/unix/img/HEAD/public/assets/og-main.png


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | ## img
2 | 
3 | Transform images for better display on social site.
4 | 
5 | <br/>
6 | 
7 | [Visit online site to learn more](https://img.unix.bio).
8 | 


--------------------------------------------------------------------------------
/lib/config-context.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | 
3 | export const ConfigContext = React.createContext({})
4 | 
5 | const useConfigs = () => React.useContext(ConfigContext)
6 | 
7 | export default useConfigs
8 | 


--------------------------------------------------------------------------------
/lib/use-dom-clean.js:
--------------------------------------------------------------------------------
 1 | import { useEffect } from 'react'
 2 | 
 3 | const useDomClean = () => {
 4 |   useEffect(() => {
 5 |     document.documentElement.removeAttribute('style')
 6 |     document.body.removeAttribute('style')
 7 |   }, [])
 8 | }
 9 | 
10 | export default useDomClean
11 | 


--------------------------------------------------------------------------------
/pages/index.jsx:
--------------------------------------------------------------------------------
 1 | import Layout from 'lib/components/layout'
 2 | import Dashboard from 'lib/components/dashboard'
 3 | import Welcome from 'lib/components/welcome'
 4 | import Footer from 'lib/components/footer'
 5 | import { useState } from 'react'
 6 | 
 7 | const Index = () => {
 8 |   const [file, setFile] = useState(null)
 9 |   
10 |   return (
11 |     <Layout>
12 |       {file ? (
13 |         <Dashboard file={file} onBack={() => setFile(null)} />
14 |       ) : <Welcome onChange={file => setFile(file)} />}
15 |       <Footer />
16 |     </Layout>
17 |   )
18 | }
19 | 
20 | export default Index
21 | 


--------------------------------------------------------------------------------
/lib/components/title.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react'
 2 | import { Input, Select, Spacer } from '@zeit-ui/react'
 3 | 
 4 | const Title = () => {
 5 |   const [isLink, setIsLink] = useState(false)
 6 |   const changeHandler = val => {
 7 |     setIsLink(val === 'link')
 8 |   }
 9 |   
10 |   
11 |   return (
12 |     <section>
13 |       <Spacer inline x={1} />
14 |       <Input label="title or link" placeholder="browser title" className="title" />
15 |   
16 |       <style jsx>{`
17 |         section :global(.title) {
18 |           width: 350px;
19 |         }
20 |       `}</style>
21 |     </section>
22 |   )
23 | }
24 | 
25 | export default Title
26 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "img",
 3 |   "version": "1.0.0",
 4 |   "main": "index.js",
 5 |   "repository": "git@github.com:unix/img.git",
 6 |   "author": "unix <unix.bio@gmail.com>",
 7 |   "license": "MIT",
 8 |   "scripts": {
 9 |     "dev": "next dev",
10 |     "build": "next build"
11 |   },
12 |   "dependencies": {
13 |     "@zeit-ui/react": "^0.0.1-beta.32",
14 |     "html2canvas": "^1.0.0-rc.5",
15 |     "next": "^9.3.5",
16 |     "react": "^16.13.1",
17 |     "react-dom": "^16.13.1"
18 |   },
19 |   "devDependencies": {
20 |     "@mdx-js/loader": "^1.5.8",
21 |     "@next/mdx": "^9.3.5",
22 |     "rehype-join-line": "^1.0.2",
23 |     "styled-jsx": "^3.2.5"
24 |   }
25 | }
26 | 


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
 1 | const withMDX = require('@next/mdx')({
 2 |   extension: /\.(md|mdx)?$/,
 3 |   options: {
 4 |     rehypePlugins: [require('rehype-join-line')],
 5 |   },
 6 | })
 7 | 
 8 | const nextConfig = {
 9 |   target: 'serverless',
10 |   
11 |   pageExtensions: ['jsx', 'js', 'mdx', 'md', 'ts', 'tsx'],
12 |   
13 |   cssModules: true,
14 |   
15 |   cssLoaderOptions: {
16 |     importLoaders: 1,
17 |     localIdentName: '[local]___[hash:base64:5]',
18 |   },
19 |   
20 |   env: {
21 |     VERSION: require('./package.json').version,
22 |   },
23 |   
24 |   webpack(config) {
25 |     config.resolve.modules.push(__dirname)
26 |     return config
27 |   },
28 | }
29 | 
30 | module.exports = withMDX(nextConfig)
31 | 


--------------------------------------------------------------------------------
/lib/components/footer.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { Code, Link, Spacer, useTheme } from '@zeit-ui/react'
 3 | 
 4 | const Footer = () => {
 5 |   const theme = useTheme()
 6 |   
 7 |   return (
 8 |     <footer>
 9 |       <Link pure target="_blank" href="https://github.com/unix/img">view source code</Link>
10 |       <Spacer y={.5} />
11 |       <Link pure target="_blank" href="https://github.com/zeit-ui/react">Built on&nbsp;<Code>@zeit-ui/react</Code></Link>
12 |       <style jsx>{`
13 |         footer {
14 |           position: fixed;
15 |           left: 50%;
16 |           bottom: 2vw;
17 |           transform: translateX(-50%);
18 |           width: ${theme.layout.pageWidth};
19 |           z-index: 10;
20 |           text-transform: uppercase;
21 |           font-size: .75rem;
22 |         }
23 |         
24 |         footer :global(a:hover) {
25 |           opacity: .7;
26 |         }
27 |       `}</style>
28 |     </footer>
29 |   )
30 | }
31 | 
32 | export default Footer
33 | 


--------------------------------------------------------------------------------
/lib/use-natural-size.js:
--------------------------------------------------------------------------------
 1 | import { useEffect, useState } from 'react'
 2 | 
 3 | const imageMap = {
 4 | }
 5 | 
 6 | const useNaturalSize = (url) => {
 7 |   const [size, setSize] = useState({ width: 0, height: 0 })
 8 |   useEffect(() => {
 9 |     if (imageMap[url]) return setSize(imageMap[url])
10 |     const id = `image-${Math.random().toString(32).slice(2, 10)}`
11 |     const img = document.createElement('img')
12 |     img.src = url
13 |     img.id = id
14 |     img.style.cssText = 'position: fixed; bottom:-9000px; left:-9000px; width:auto; height:auto;'
15 |     img.onload = () => {
16 |       const width = img.naturalWidth || img.width
17 |       const height = img.naturalHeight || img.height
18 |       const ratio = width / 700
19 |       const size = {
20 |         width: 700,
21 |         height: height / ratio,
22 |       }
23 |       imageMap[url] = size
24 |       setSize(size)
25 |       document.documentElement.removeChild(document.getElementById(id))
26 |     }
27 |     document.documentElement.appendChild(img)
28 |   })
29 |   
30 |   return size
31 | }
32 | 
33 | export default useNaturalSize
34 | 


--------------------------------------------------------------------------------
/lib/components/layout.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { useTheme, Link } from '@zeit-ui/react'
 3 | 
 4 | const Layout = ({ children }) => {
 5 |   const theme = useTheme()
 6 | 
 7 |   return (
 8 |     <section>
 9 |       <div className="pc">{children}</div>
10 |       <div className="mobile">
11 |         <h3>Sorry, the current page does not provide services for the mobile.</h3>
12 |         <p>As a suggestion, you can buy an Apple Mac in an <Link target="_blank" pure color href="https://www.apple.com/mac/">Online Store</Link>.</p>
13 |       </div>
14 |       <style jsx>{`
15 |         section {
16 |           width: calc(${theme.layout.pageWidth} - 65px);
17 |           margin: 0 auto;
18 |           min-height: 100vh;
19 |           max-width: 90vw;
20 |           box-sizing: border-box;
21 |           padding: calc(${theme.layout.gap} * 3) 0;
22 |         }
23 |         
24 |         .mobile {
25 |           width: 100%;
26 |           margin: 0 auto;
27 |           display: none;
28 |         }
29 |         
30 |         @media only screen and (max-width: ${theme.layout.breakpointMobile}) {
31 |           .pc {
32 |             display: none;
33 |           }
34 |           
35 |           .mobile {
36 |             display: block;
37 |           }
38 |         }
39 |       `}</style>
40 |     </section>
41 |   )
42 | }
43 | 
44 | export default Layout
45 | 


--------------------------------------------------------------------------------
/pages/_document.jsx:
--------------------------------------------------------------------------------
 1 | import Document, { Html, Head, Main, NextScript } from 'next/document'
 2 | import { CSSBaseline } from '@zeit-ui/react'
 3 | import flush from 'styled-jsx/server'
 4 | 
 5 | class MyDocument extends Document {
 6 |   static async getInitialProps (ctx) {
 7 |     const initialProps = await Document.getInitialProps(ctx)
 8 |     const styles = CSSBaseline.flush()
 9 |   
10 |     return {
11 |       ...initialProps,
12 |       styles: (
13 |         <>
14 |           {initialProps.styles}
15 |           {styles}
16 |           {flush()}
17 |         </>
18 |       )
19 |     }
20 |   }
21 |   
22 |   render() {
23 |     return (
24 |       <Html lang="en-us">
25 |         <Head />
26 |         <body>
27 |           <script dangerouslySetInnerHTML={{ __html: `
28 |             (function(){
29 |               if (!window.localStorage) return;
30 |               if (window.localStorage.getItem('theme') === 'dark') {
31 |                 document.documentElement.style.background = '#000';
32 |                 document.body.style.background = '#000';
33 |               };
34 |             })()
35 |           `}} />
36 |           <Main />
37 |           <NextScript />
38 |           <script async src="https://www.googletagmanager.com/gtag/js?id=UA-110371817-17" />
39 |           <script
40 |             async
41 |             dangerouslySetInnerHTML={{
42 |               __html: `
43 |               window.dataLayer = window.dataLayer || [];
44 |               function gtag(){dataLayer.push(arguments);}
45 |               gtag('js', new Date());
46 |               gtag('config', 'UA-110371817-17');
47 |               `
48 |             }}
49 |           />
50 |         </body>
51 |       </Html>
52 |     )
53 |   }
54 | }
55 | 
56 | export default MyDocument
57 | 


--------------------------------------------------------------------------------
/lib/utils.js:
--------------------------------------------------------------------------------
 1 | export const getFileUrl = file => {
 2 |   if (typeof window.createObjectURL !== 'undefined') {
 3 |     return window.createObjectURL(file)
 4 |   }
 5 |   
 6 |   if (typeof window.URL !== 'undefined') {
 7 |     return window.URL.createObjectURL(file)
 8 |   }
 9 |   
10 |   if (typeof window.webkitURL !== 'undefined') {
11 |     return window.webkitURL.createObjectURL(file)
12 |   }
13 |   
14 |   return null
15 | }
16 | 
17 | export const toBlob = (data, type) => {
18 |   const bytes = window.atob(data)
19 |   let n = bytes.length
20 |   const u8arr = new Uint8Array(n)
21 |   while (n--) u8arr[n] = bytes.charCodeAt(n)
22 |   return new Blob([u8arr], { type })
23 | }
24 | 
25 | export const getImageBlob = async (el) => {
26 |   const { default: html2canvas } = await import('html2canvas')
27 |   const canvas = await html2canvas(el, {
28 |     allowTaint: true,
29 |     scale: 1,
30 |     backgroundColor: null,
31 |   })
32 |   const base64 = canvas.toDataURL('image/png', 1)
33 |   const data = base64.split('base64,').pop()
34 |   return toBlob(data, 'image/png')
35 | }
36 | 
37 | export const toCompressed = async blob => {
38 |   return fetch('https://min.unix.bio/api/png', {
39 |     method: 'POST',
40 |     mode: 'cors',
41 |     headers: { 'Content-Type': 'image/png' },
42 |     body: blob,
43 |   })
44 | }
45 | 
46 | export const getCount = async () => {
47 |   return fetch('https://min.unix.bio/api/count', {
48 |     method: 'GET',
49 |     mode: 'cors',
50 |   })
51 | }
52 | 
53 | export const download = (blob, name = 'display.png') => {
54 |   const suffix = name.split('.').reverse()[0]
55 |   const filename = name.replace(`.${suffix}`, '')
56 |   const reader = new FileReader()
57 |   reader.readAsDataURL(blob)
58 |   reader.onloadend = () => {
59 |     const a = document.createElement('a')
60 |     a.href = reader.result
61 |     a.download = `${filename}.png`
62 |     a.click()
63 |   }
64 | }
65 | 


--------------------------------------------------------------------------------
/pages/_app.jsx:
--------------------------------------------------------------------------------
 1 | import Head from 'next/head'
 2 | import useDomClean from 'lib/use-dom-clean'
 3 | import React from 'react'
 4 | import { ZEITUIProvider, CSSBaseline } from '@zeit-ui/react'
 5 | 
 6 | const Application = ({ Component, pageProps }) => {
 7 |   useDomClean()
 8 | 
 9 |   return (
10 |     <>
11 |       <Head>
12 |         <title>Better social image</title>
13 |         <link rel="dns-prefetch" href="//img.unix.bio" />
14 |         <meta name="google" value="notranslate" />
15 |         <meta name="referrer" content="strict-origin" />
16 |         <meta name="description" content="Transform images for better display on social site." />
17 |         <meta property="og:site_name" content="Better social image" />
18 |         <meta property="og:description" content="Transform images for better display on social site." />
19 |         <meta property="og:type" content="website" />
20 |         <meta name="generator" content="unix.bio" />
21 |         <meta name="twitter:card" content="summary_large_image" />
22 |         <meta name="author" content="witt" />
23 |         <meta name="twitter:creator" content="@echo_witt" />
24 |         <meta property="og:title" content="img.unix.bio" />
25 |         <meta property="og:url" content="img.unix.bio" />
26 |         <meta property="og:image" content="https://img.unix.bio/assets/og-main.png" />
27 |         <meta property="twitter:image" content="https://img.unix.bio/assets/og-main.png" />
28 |         <meta itemProp="image" property="og:image" content="https://img.unix.bio/assets/og-main.png" />
29 |         <meta name="viewport" content="initial-scale=1, maximum-scale=5, minimum-scale=1, viewport-fit=cover" />
30 |       </Head>
31 |       <ZEITUIProvider theme={{ type: 'dark' }}>
32 |         <CSSBaseline />
33 |         <Component {...pageProps} />
34 |         <style global jsx>{`
35 |           body {
36 |             overflow-x: hidden;
37 |           }
38 |         `}</style>
39 |       </ZEITUIProvider>
40 |     </>
41 |   )
42 | }
43 | 
44 | export default Application
45 | 


--------------------------------------------------------------------------------
/lib/components/settings.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useEffect, useMemo, useState } from 'react'
 2 | import { Button, Checkbox, Input, Select, Slider, Spacer, useInput } from '@zeit-ui/react'
 3 | import useNaturalSize from '../use-natural-size'
 4 | 
 5 | const Settings = ({
 6 |   url, sizeChange, settingsChange, onBack,
 7 | }) => {
 8 |   const nativeSize = useNaturalSize(url)
 9 |   const [invert, setInvert] = useState(false)
10 |   const [radius, setRadius] = useState(5)
11 |   const [ratio, setRatio] = useState(1)
12 |   const [style, setStyle] = useState('title')
13 |   const { state: title, bindings } = useInput('Demo')
14 |   const { state: link, bindings: linkBindings } = useInput('https://img.unix.bio')
15 |   const size = useMemo(() => ({
16 |     width: Number.parseInt(`${nativeSize.width * ratio}`),
17 |     height: Number.parseInt(`${nativeSize.height * ratio}`),
18 |     bar: Number.parseInt(`${40 * ratio}`),
19 |   }), [nativeSize, ratio])
20 |   useEffect(() => {
21 |     sizeChange(size)
22 |   }, [size])
23 |   
24 |   useEffect(() => {
25 |     settingsChange({ style, title, link, radius, invert })
26 |   }, [title, link, style, radius, invert])
27 | 
28 |   return (
29 |     <section>
30 |       <Select value={style} onChange={val => setStyle(val)}>
31 |         <Select.Option value="title">Browser Title</Select.Option>
32 |         <Select.Option value="link">Browser Link</Select.Option>
33 |         <Select.Option value="plain">Plain</Select.Option>
34 |       </Select>
35 |       <Spacer />
36 |       {style === 'title' && <Input width="100%" {...bindings}>Title</Input>}
37 |       {style === 'link' && <Input width="100%" {...linkBindings}>Link Address</Input>}
38 |       {style === 'plain' && (
39 |         <>
40 |           <p>Radius</p>
41 |           <Slider step={1} max={10} min={0} initialValue={radius} onChange={val => setRadius(val)} showMarkers />
42 |         </>
43 |       )}
44 |       <Spacer />
45 |       <p>Size {size.width > 0 && <span>{size.width} * {size.height}</span>}</p>
46 |       <Slider step={0.2} max={2.8} min={0.4} initialValue={ratio} onChange={val => setRatio(val)} showMarkers />
47 |       <Spacer y={1.5} />
48 |       {style !== 'plain' && (
49 |         <div>
50 |           <Checkbox checked={invert}
51 |             onChange={e => setInvert(e.target.checked)}>
52 |             Invert Background
53 |           </Checkbox>
54 |         </div>
55 |       )}
56 |       <Spacer />
57 |       <div className="back">
58 |         <Button auto type="abort" onClick={onBack}>GO BACK</Button>
59 |       </div>
60 |       <style jsx>{`
61 |         section {
62 |           display: flex;
63 |           flex-direction: column;
64 |           position: relative;
65 |         }
66 |         
67 |         .back {
68 |           position: absolute;
69 |           top: 0;
70 |           left: 0;
71 |           transform: translate(-1.25rem, -200%);
72 |         }
73 |       `}</style>
74 |     </section>
75 |   )
76 | }
77 | 
78 | export default Settings
79 | 


--------------------------------------------------------------------------------
/lib/components/welcome.jsx:
--------------------------------------------------------------------------------
  1 | import React, { useEffect, useState } from 'react'
  2 | import { Code, Dot, useTheme, Tooltip, useToasts } from '@zeit-ui/react'
  3 | import { getCount } from 'lib/utils'
  4 | const limit = 10000000 // 10 M
  5 | 
  6 | const Welcome = ({ onChange }) => {
  7 |   const theme = useTheme()
  8 |   const [count, setCount] = useState(0)
  9 |   const [, setToast] = useToasts()
 10 |   const changeHandler = event => {
 11 |     const file = event.target.files[0]
 12 |     if (file.size > limit) {
 13 |       return setToast({ text: <>Abort. Image needs to be less than <Code>10M</Code>.</> })
 14 |     }
 15 |     onChange(file)
 16 |   }
 17 |   
 18 |   useEffect(() => {
 19 |     getCount()
 20 |       .then(res => res.json())
 21 |       .then(({ count }) => setCount(count))
 22 |       .catch(e => {})
 23 |   }, [])
 24 |   
 25 |   return (
 26 |     <section>
 27 |       <div className="welcome">
 28 |         <p>
 29 |           <a>UPLOAD Images.
 30 |             <input type="file" onChange={changeHandler}
 31 |               title="upload images."
 32 |               accept=".png, .jpg, .jpeg, .gif, .webp" />
 33 |           </a>
 34 |         </p>
 35 |         <p className="intro">And Better <span>Display</span>, Better <span>Social</span> Experience.</p>
 36 |         <div className="requests">
 37 |           {count !== 0 && (
 38 |             <Tooltip placement="right" text={<><Code>{count}</Code> requests in total.</>}>
 39 |               <Dot type="success">{count} RQS</Dot>
 40 |             </Tooltip>
 41 |           )}
 42 |         </div>
 43 |       </div>
 44 |       <style jsx>{`
 45 |         .welcome {
 46 |           position: fixed;
 47 |           top: 50%;
 48 |           left: 50%;
 49 |           transform: translate(-50%, -50%);
 50 |           width: ${theme.layout.pageWidth};
 51 |           z-index: 10;
 52 |           margin-top: -10vw;
 53 |           font-size: 60pt;
 54 |         }
 55 |         
 56 |         .welcome :global(.dot) {
 57 |           height: 1rem;
 58 |         }
 59 |         
 60 |         .welcome :global(.dot .label) {
 61 |           font-size: .75rem;
 62 |           line-height: 1rem;
 63 |         }
 64 |         
 65 |         .requests {
 66 |           user-select: none;
 67 |           height: 2rem;
 68 |           display: flex;
 69 |           align-items: center;
 70 |           margin-top: 2rem;
 71 |         }
 72 |         
 73 |         .requests :global(.tooltip) {
 74 |           height: 1rem;
 75 |           display: flex;
 76 |           flex-direction: column;
 77 |         }
 78 |         
 79 |         .intro {
 80 |           font-size: 22pt;
 81 |           text-transform: capitalize;
 82 |           letter-spacing: 2px;
 83 |           margin-top: 0;
 84 |         }
 85 |         
 86 |         .intro span {
 87 |           color: ${theme.palette.successLight};
 88 |           text-transform: uppercase;
 89 |           font-weight: 500;
 90 |         }
 91 |         
 92 |         .welcome a {
 93 |           color: ${theme.palette.foreground};
 94 |           position: relative;
 95 |           transition: color 200ms ease;
 96 |           font-family: ${theme.font.mono};
 97 |           user-select: none;
 98 |           display: inline-block;
 99 |           line-height: 1.2;
100 |         }
101 |         
102 |         .welcome a:hover, .welcome input:hover {
103 |           cursor: ne-resize;
104 |           color: ${theme.palette.accents_4};
105 |         }
106 |         
107 |         .welcome input {
108 |           position: absolute;
109 |           left: 0;
110 |           right: 0;
111 |           width: 100%;
112 |           bottom: 0;
113 |           top: 0;
114 |           opacity: 0;
115 |           background: transparent;
116 |           border: none;
117 |         }
118 |         
119 |         .welcome a::after {
120 |           position: absolute;
121 |           content: '';
122 |           height: 3pt;
123 |           width: 100%;
124 |           left: 0;
125 |           right: 0;
126 |           bottom: -1pt;
127 |           background-color: ${theme.palette.accents_4};
128 |         }
129 |       `}</style>
130 |     </section>
131 |   )
132 | }
133 | 
134 | export default Welcome
135 | 


--------------------------------------------------------------------------------
/lib/components/dashboard.jsx:
--------------------------------------------------------------------------------
  1 | import React, { useMemo, useRef, useState } from 'react'
  2 | import { Button, Dot, Image, Spacer, Tag, useTheme, useToasts, Link } from '@zeit-ui/react'
  3 | import { getFileUrl, download, getImageBlob, toCompressed } from '../utils'
  4 | import Settings from './settings'
  5 | 
  6 | const Dashboard = ({ file, onBack }) => {
  7 |   const theme = useTheme()
  8 |   const [, setToast] = useToasts()
  9 |   const [loading, setLoading] = useState(false)
 10 |   const [settings, setSettings] = useState({})
 11 |   const [size, setSize] = useState({ width: 700, height: 350, bar: 40 })
 12 |   const browserRef = useRef(null)
 13 |   const imgRef = useRef(null)
 14 |   const ref = useMemo(
 15 |     () => settings.style === 'plain' ? imgRef : browserRef,
 16 |     [settings, imgRef, browserRef],
 17 |   )
 18 |   const url = useMemo(() => getFileUrl(file), [file])
 19 |   
 20 |   const clickHandler = () => {
 21 |     setLoading(true)
 22 |     getImageBlob(ref.current)
 23 |       .then(blob => toCompressed(blob))
 24 |       .then(res => res.blob())
 25 |       .then(blob => {
 26 |         setLoading(false)
 27 |         if (!blob) return setToast({ text: 'Please try again later.' })
 28 |         download(blob, file.name)
 29 |       })
 30 |       .catch(err => {
 31 |         setLoading(false)
 32 |         setToast({ text: err.message })
 33 |       })
 34 |   }
 35 |   
 36 |   return (
 37 |     <section>
 38 |       <div className="group">
 39 |         <div className="form">
 40 |           <Settings url={url} sizeChange={size => setSize(size)}
 41 |             settingsChange={val => setSettings(val)} onBack={onBack} />
 42 |         </div>
 43 |         <Spacer x={5}/>
 44 |         <div className="preview">
 45 |           {settings.style === 'plain' ? <img src={url} style={{ borderRadius: settings.radius }} /> : (
 46 |             <Image.Browser title={settings.title}
 47 |               url={settings.style === 'link' ? settings.link : null}>
 48 |               <Image src={url}/>
 49 |             </Image.Browser>
 50 |           )}
 51 |         </div>
 52 |         <div className="hidden">
 53 |           {settings.style === 'plain' ? (
 54 |             <img ref={imgRef} src={url} style={{ borderRadius: settings.radius, width: size.width, height: size.height }} />
 55 |           ) : (
 56 |             <Image.Browser ref={browserRef}
 57 |               title={settings.title}
 58 |               url={settings.style === 'link' ? settings.link : null}>
 59 |               <Image src={url} width={size.width} height={size.height} />
 60 |             </Image.Browser>
 61 |           )}
 62 |         </div>
 63 |       </div>
 64 |       <Spacer y={4.5} />
 65 |       <div className="actions">
 66 |         <Button onClick={clickHandler} loading={loading}>Download</Button>
 67 |         <Spacer y={2} />
 68 |         <span>
 69 |           <Dot type="success"/> When you download, image will be <Tag
 70 |           type="lite">compressed</Tag> automatically.
 71 |         </span>
 72 |         <Spacer />
 73 |         <span>
 74 |           Any questions?&nbsp;
 75 |           <Link target="_blank" pure href="https://github.com/unix/img/issues/new">Click here for feedback.</Link>
 76 |         </span>
 77 |       </div>
 78 |       
 79 |       <style jsx>{`
 80 |         section {
 81 |           display: flex;
 82 |           flex-direction: column;
 83 |           align-items: center;
 84 |           padding-top: calc(${theme.layout.gap} * 5);
 85 |         }
 86 |         
 87 |         .group {
 88 |           display: flex;
 89 |         }
 90 |         
 91 |         .form {
 92 |           width: 350px;
 93 |         }
 94 |         
 95 |         .preview {
 96 |           flex: 1;
 97 |           width: 500px;
 98 |         }
 99 |         
100 |         .hidden {
101 |           position: fixed;
102 |           bottom: -9999px;
103 |           left: -9999px;
104 |         }
105 |         
106 |         .preview :global(img) {
107 |           max-height: 340px;
108 |           min-width: 300px;
109 |         }
110 |         
111 |         .preview :global(header), .hidden :global(header) {
112 |           background-color: ${settings.invert ? theme.palette.foreground : theme.palette.background};
113 |           border-color: ${settings.invert ? theme.palette.accents_7 : theme.palette.background};
114 |           color: ${settings.invert ? theme.palette.background : theme.palette.foreground};
115 |         }
116 |         
117 |         .preview :global(header .https), .hidden :global(header .https) {
118 |           display: none;
119 |         }
120 |         
121 |         .preview :global(.address-input), .hidden :global(.address-input) {
122 |           background-color: ${settings.invert ? theme.palette.accents_8 : theme.palette.accents_1};
123 |         }
124 |         
125 |         .preview :global(.browser), .hidden :global(.browser),
126 |         .preview :global(.image), .hidden :global(.image) {
127 |           background-color: ${settings.invert ? theme.palette.foreground : theme.palette.background};
128 |         }
129 |         
130 |         .actions {
131 |           width: 550px;
132 |           max-width: 90vw;
133 |           display: flex;
134 |           flex-direction: column;
135 |           justify-content: center;
136 |           align-items: center;
137 |         }
138 |       `}</style>
139 |     </section>
140 |   )
141 | }
142 | 
143 | export default Dashboard
144 | 


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