Add prettier

rosszurowski · Oct 8, 2017 · 1fa45d4 · 1fa45d4
1 parent a3d7a26
commit 1fa45d4
Show file tree

Hide file tree

Showing 27 changed files with 654 additions and 338 deletions.
diff --git a/components/100/post-image.js b/components/100/post-image.js
@@ -2,18 +2,14 @@ import React from 'react';
 import LazyloadImage from 'components/lazyload-image';
 
 type Props = {
-  src: string
+  src: string,
 };
 
-const CACHE_BUST = '20170721'
+const CACHE_BUST = '20170721';
 
 const PostImage = ({ src, ...props }: Props) => {
   const srcWithoutJPGExtension = src.replace(/\.jpe?g$/, '');
-  const srcSet = [
-    `${srcWithoutJPGExtension}-1200w.jpg?${CACHE_BUST} 1200w`,
-    `${srcWithoutJPGExtension}-2400w.jpg?${CACHE_BUST} 2400w`,
-    `${srcWithoutJPGExtension}-800w.jpg?${CACHE_BUST} 800w`,
-  ];
+  const srcSet = [`${srcWithoutJPGExtension}-1200w.jpg?${CACHE_BUST} 1200w`, `${srcWithoutJPGExtension}-2400w.jpg?${CACHE_BUST} 2400w`, `${srcWithoutJPGExtension}-800w.jpg?${CACHE_BUST} 800w`];
 
   return (
     <span>

diff --git a/components/100/post.js b/components/100/post.js
@@ -12,28 +12,32 @@ class Post extends Component {
     src: string,
     location: string,
     dimensions: { width: number, height: number },
-  }
+  };
 
   state = {
     renderedWidth: -1,
-  }
+  };
 
-  handleImageMeasure = (dimensions) => {
+  handleImageMeasure = dimensions => {
     const { width } = dimensions;
     const renderedWidth = Math.floor(width);
 
     this.setState({ renderedWidth });
-  }
+  };
 
-  render () {
+  render() {
     const { id, date, src, location, dimensions } = this.props;
     const { width, height } = dimensions;
 
     return (
       <article className="pv-5 ta-center" id={id}>
         <div className="fs-22">
-          <div><a href={`#${id}`}>Day {id}</a></div>
-          <div className="o-50p mt-2"><a href={`#${id}`}>{formatPostDate(new Date(date))}</a></div>
+          <div>
+            <a href={`#${id}`}>Day {id}</a>
+          </div>
+          <div className="o-50p mt-2">
+            <a href={`#${id}`}>{formatPostDate(new Date(date))}</a>
+          </div>
         </div>
         <figure className="mt-5">
           <PostImage src={src} alt={location} width={width} height={height} />

diff --git a/components/heat-distortion.js b/components/heat-distortion.js
@@ -3,14 +3,7 @@
 import React, { Component } from 'react';
 import fit from 'canvas-fit';
 
-import {
-  getContext,
-  createProgram,
-  createShader,
-  createTexture,
-  createUniform,
-  setRectangle,
-} from 'lib/glsl';
+import { getContext, createProgram, createShader, createTexture, createUniform, setRectangle } from 'lib/glsl';
 
 import type { WebGLTexture2DSource } from 'lib/glsl';
 
@@ -96,14 +89,7 @@ const initScene = (gl: WebGLRenderingContext, textureSource: WebGLTexture2DSourc
 
   buffers.texCoord = gl.createBuffer();
   gl.bindBuffer(gl.ARRAY_BUFFER, buffers.texCoord);
-  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
-    0.0, 0.0,
-    1.0, 0.0,
-    0.0, 1.0,
-    0.0, 1.0,
-    1.0, 0.0,
-    1.0, 1.0,
-  ]), gl.STATIC_DRAW);
+  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0, 1.0]), gl.STATIC_DRAW);
 
   createTexture(gl, textureSource);
 
@@ -142,7 +128,7 @@ const draw = (gl: WebGLRenderingContext) => {
   gl.drawArrays(gl.TRIANGLES, 0, 6);
 };
 
-const getRenderableSVG = (html:string, width:number, height:number) => `
+const getRenderableSVG = (html: string, width: number, height: number) => `
   <svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}">
     <foreignObject width="100%" height="100%">
       <div xmlns="http://www.w3.org/1999/xhtml">
@@ -157,21 +143,22 @@ let getSVGImage;
 if (typeof global.window !== 'undefined') {
   const w = global.window.URL || global.window.webkitURL || global.window;
 
-  getSVGImage = (ctx: CanvasRenderingContext2D, html: string): Promise<HTMLImageElement> => new Promise((resolve) => {
-    if (!w) return;
+  getSVGImage = (ctx: CanvasRenderingContext2D, html: string): Promise<HTMLImageElement> =>
+    new Promise(resolve => {
+      if (!w) return;
 
-    // NOTE: multiplying by 2x here to get a higher resolution for type
-    // rendering. Look into better ways of solving this.
-    const data = getRenderableSVG(html, ctx.canvas.width / 2, ctx.canvas.height / 2);
-    const img = new Image();
+      // NOTE: multiplying by 2x here to get a higher resolution for type
+      // rendering. Look into better ways of solving this.
+      const data = getRenderableSVG(html, ctx.canvas.width / 2, ctx.canvas.height / 2);
+      const img = new Image();
 
-    img.onload = () => {
-      resolve(img);
-    };
+      img.onload = () => {
+        resolve(img);
+      };
 
-    img.crossOrigin = 'anonymous';
-    img.src = `data:image/svg+xml;charset=utf-8,${data}`;
-  });
+      img.crossOrigin = 'anonymous';
+      img.src = `data:image/svg+xml;charset=utf-8,${data}`;
+    });
 }
 
 type Props = {
@@ -183,13 +170,13 @@ type State = {
 };
 
 export default class HeatDistortion extends Component<Props, State> {
-  props: Props
+  props: Props;
 
   state = {
     hasRendered: false,
-  }
+  };
 
-  componentDidMount () {
+  componentDidMount() {
     if (!this.$canvas) return;
     if (!this.$root) return;
 
@@ -213,7 +200,7 @@ export default class HeatDistortion extends Component<Props, State> {
     window.addEventListener('resize', this.handleResize, false);
 
     requestAnimationFrame(() => {
-      getSVGImage(this.textCtx, this.props.html).then((image) => {
+      getSVGImage(this.textCtx, this.props.html).then(image => {
         const scene = initScene(this.gl, image);
         this.program = scene.program;
         this.attributes = scene.attributes;
@@ -225,28 +212,28 @@ export default class HeatDistortion extends Component<Props, State> {
     });
   }
 
-  componentWillUnmount () {
+  componentWillUnmount() {
     window.removeEventListener('resize', this.handleResize, false);
   }
 
-  fit: Function
-  $root: ?HTMLElement
-  $canvas: ?HTMLCanvasElement
-  $textCanvas: ?HTMLCanvasElement
-  textCtx: CanvasRenderingContext2D
-  gl: WebGLRenderingContext
-  program: WebGLProgram
-  attributes: Object
-  buffers: Object
-  uniforms: Object
-  frame: number = 0
+  fit: Function;
+  $root: ?HTMLElement;
+  $canvas: ?HTMLCanvasElement;
+  $textCanvas: ?HTMLCanvasElement;
+  textCtx: CanvasRenderingContext2D;
+  gl: WebGLRenderingContext;
+  program: WebGLProgram;
+  attributes: Object;
+  buffers: Object;
+  uniforms: Object;
+  frame: number = 0;
 
   tick = () => {
     createUniform(this.gl, this.program, '1f', 'u_time', this.frame);
     draw(this.gl);
     this.frame++;
     requestAnimationFrame(this.tick);
-  }
+  };
 
   handleResize = () => {
     this.fit();
@@ -255,15 +242,15 @@ export default class HeatDistortion extends Component<Props, State> {
       const { buffers, uniforms } = this;
       this.gl.bindBuffer(this.gl.ARRAY_BUFFER, buffers.position);
       setRectangle(this.gl, 0, 0, width, height);
-      getSVGImage(this.textCtx, this.props.html).then((image) => {
+      getSVGImage(this.textCtx, this.props.html).then(image => {
         createTexture(this.gl, image);
       });
       this.gl.uniform2f(uniforms.resolution, width, height);
       this.gl.viewport(0, 0, width, height);
     }
-  }
+  };
 
-  render () {
+  render() {
     return (
       <div ref={el => (this.$root = el)}>
         <canvas className={this.state.hasRendered ? 'is-ready' : ''} ref={el => (this.$canvas = el)} width={600} height={600} />
@@ -274,17 +261,21 @@ export default class HeatDistortion extends Component<Props, State> {
           }
 
           canvas {
-            opacity: 0.0;
+            opacity: 0;
             transition: opacity 1200ms ease;
           }
 
           canvas.is-ready {
-            opacity: 1.0;
+            opacity: 1;
           }
 
           @keyframes fadeIn {
-            from { opacity: 0.0; }
-            to { opacity: 1.0; }
+            from {
+              opacity: 0;
+            }
+            to {
+              opacity: 1;
+            }
           }
         `}</style>
       </div>

diff --git a/components/homepage-cv-panel.js b/components/homepage-cv-panel.js
@@ -17,7 +17,9 @@ const CVPanel = ({ name, href, period }: Props) => (
     <div>
       <a className="x xa-baseline h-fade c-white td-none" href={href} target="_blank" rel="noopener noreferrer" style={{ color: 'white', textDecoration: 'none' }}>
         <span style={{ width: 120 }}>{name}</span>
-        <span className="p-relative" style={{ top: 2, transform: 'rotate(-46deg)' }}><Arrow fill="white" width={14} /></span>
+        <span className="p-relative" style={{ top: 2, transform: 'rotate(-46deg)' }}>
+          <Arrow fill="white" width={14} />
+        </span>
       </a>
     </div>
   </div>

diff --git a/components/homepage-heat-distortion.js b/components/homepage-heat-distortion.js
@@ -18,7 +18,8 @@ const HomepageVisual = ({ isDesktop }: Props) => (
             <div style="background-color: #f79e98; width: 210px; height: 200px; transform: rotate(${randomInt(-50, -20)}deg)"></div>
             <div style="background-color: #f79e98; width: 320px; height: 80px; transform: rotate(${randomInt(-90, 90)}deg)"></div>
           </div>
-        `} />
+        `}
+      />
     ) : null}
   </div>
 );

diff --git a/components/japan/end-notes.js b/components/japan/end-notes.js
@@ -4,7 +4,7 @@ import React from 'react';
 import type { Node } from 'react';
 
 type Props = {
-  children: Node
+  children: Node,
 };
 
 const EndNotes = ({ children, ...props }: Props) => (

diff --git a/components/japan/icon.js b/components/japan/icon.js
@@ -5,29 +5,29 @@ import React from 'react';
 const icons = {
   volumeOff: (
     <svg viewBox="0 0 44 42" xmlns="http://www.w3.org/2000/svg">
-      <path d="M34.352 20.573a9.403 9.403 0 0 1-1.732 5.44l-3.088-3.301v-7.997c0-.65.561-1.162 1.216-1.162.328 0 .609.14.843.372a9.323 9.323 0 0 1 2.761 6.648zM0 26.5C0 28.825 2.16 31 4.5 31H12l9.575 8.542c.656.697 1.779.744 2.48.14.375-.326.562-.791.562-1.303v-8.136l10.484 11.065c.983.93 2.527.93 3.463-.046.89-.884.936-2.325.094-3.255L5.1 2.581c-.982-.93-2.527-.93-3.463.046a2.365 2.365 0 0 0-.094 3.255l4.634 4.928H4.212C1.92 10.81 0 12.67 0 14.994V26.5zM32.948 3.325c-1.217-.512-2.62.046-3.136 1.255-.514 1.162 0 2.51 1.124 3.068 7.207 3.348 10.25 11.902 6.88 19.015a12.5 12.5 0 0 1-1.826 2.883l3.323 3.533c6.927-7.95 6.084-19.991-1.919-26.872a19.652 19.652 0 0 0-4.446-2.882zm-11.373-1.72l-6.224 5.95 9.313 9.903V2.767C24.664 1.79 23.87 1 22.933 1c-.562 0-1.03.232-1.358.604z" fillRule="nonzero" />
+      <path
+        d="M34.352 20.573a9.403 9.403 0 0 1-1.732 5.44l-3.088-3.301v-7.997c0-.65.561-1.162 1.216-1.162.328 0 .609.14.843.372a9.323 9.323 0 0 1 2.761 6.648zM0 26.5C0 28.825 2.16 31 4.5 31H12l9.575 8.542c.656.697 1.779.744 2.48.14.375-.326.562-.791.562-1.303v-8.136l10.484 11.065c.983.93 2.527.93 3.463-.046.89-.884.936-2.325.094-3.255L5.1 2.581c-.982-.93-2.527-.93-3.463.046a2.365 2.365 0 0 0-.094 3.255l4.634 4.928H4.212C1.92 10.81 0 12.67 0 14.994V26.5zM32.948 3.325c-1.217-.512-2.62.046-3.136 1.255-.514 1.162 0 2.51 1.124 3.068 7.207 3.348 10.25 11.902 6.88 19.015a12.5 12.5 0 0 1-1.826 2.883l3.323 3.533c6.927-7.95 6.084-19.991-1.919-26.872a19.652 19.652 0 0 0-4.446-2.882zm-11.373-1.72l-6.224 5.95 9.313 9.903V2.767C24.664 1.79 23.87 1 22.933 1c-.562 0-1.03.232-1.358.604z"
+        fillRule="nonzero"
+      />
     </svg>
   ),
   volumeFull: (
     <svg viewBox="0 0 44 42" xmlns="http://www.w3.org/2000/svg">
-      <path d="M3.092 11.377a5.991 5.991 0 0 1 2.903-.745h6.911l8.24-7.911a2.53 2.53 0 0 1 2.751-.522 2.509 2.509 0 0 1 1.538 2.329v32.944a2.509 2.509 0 0 1-1.538 2.33 2.53 2.53 0 0 1-2.75-.523l-8.241-7.91h-6.91a6.018 6.018 0 0 1-2.895-.742A5.002 5.002 0 0 1 0 26V16a5.002 5.002 0 0 1 3.092-4.623zm28.577 2.945a1.186 1.186 0 0 0-1.296-.29c-.45.176-.747.61-.748 1.091v11.754c.003.481.3.912.75 1.088.451.175.964.06 1.294-.292a9.454 9.454 0 0 0 0-13.351zM44 20.998c0-7.385-4.291-14.104-11.01-17.239a2.391 2.391 0 0 0-3.165 1.167 2.37 2.37 0 0 0 1.172 3.15 14.295 14.295 0 0 1 8.215 12.922 14.295 14.295 0 0 1-8.215 12.922 2.37 2.37 0 0 0-1.172 3.15 2.391 2.391 0 0 0 3.164 1.166C39.71 35.1 44 28.383 44 20.998z" fillRule="nonzero" />
+      <path
+        d="M3.092 11.377a5.991 5.991 0 0 1 2.903-.745h6.911l8.24-7.911a2.53 2.53 0 0 1 2.751-.522 2.509 2.509 0 0 1 1.538 2.329v32.944a2.509 2.509 0 0 1-1.538 2.33 2.53 2.53 0 0 1-2.75-.523l-8.241-7.91h-6.91a6.018 6.018 0 0 1-2.895-.742A5.002 5.002 0 0 1 0 26V16a5.002 5.002 0 0 1 3.092-4.623zm28.577 2.945a1.186 1.186 0 0 0-1.296-.29c-.45.176-.747.61-.748 1.091v11.754c.003.481.3.912.75 1.088.451.175.964.06 1.294-.292a9.454 9.454 0 0 0 0-13.351zM44 20.998c0-7.385-4.291-14.104-11.01-17.239a2.391 2.391 0 0 0-3.165 1.167 2.37 2.37 0 0 0 1.172 3.15 14.295 14.295 0 0 1 8.215 12.922 14.295 14.295 0 0 1-8.215 12.922 2.37 2.37 0 0 0-1.172 3.15 2.391 2.391 0 0 0 3.164 1.166C39.71 35.1 44 28.383 44 20.998z"
+        fillRule="nonzero"
+      />
     </svg>
   ),
 };
 
 type Props = {
-  icon:
-    | 'volumeOff'
-    | 'volumeFull',
+  icon: 'volumeOff' | 'volumeFull',
   fill: string,
-  size: number
-}
+  size: number,
+};
 
-const Icon = ({ icon, fill, size }: Props) => (
-  <span style={{ display: 'inline-block', fill, width: `${size}px`, height: `${size}px` }}>
-    {icons[icon]}
-  </span>
-);
+const Icon = ({ icon, fill, size }: Props) => <span style={{ display: 'inline-block', fill, width: `${size}px`, height: `${size}px` }}>{icons[icon]}</span>;
 
 Icon.defaultProps = {
   fill: '#000',

diff --git a/components/japan/image.js b/components/japan/image.js
@@ -9,11 +9,9 @@ const sizeToSrcSet = srcId => size => `${getImageUrl(srcId, size)} ${size}w`;
 
 type Props = {
   srcId: string,
-  sizes: Array<number>
-}
+  sizes: Array<number>,
+};
 
-const Image = ({ srcId, sizes, ...rest }: Props) => (
-  <LazyloadImage srcSet={sizes.map(sizeToSrcSet(srcId))} {...rest} />
-);
+const Image = ({ srcId, sizes, ...rest }: Props) => <LazyloadImage srcSet={sizes.map(sizeToSrcSet(srcId))} {...rest} />;
 
 export default Image;
diff --git a/components/japan/link.js b/components/japan/link.js
@@ -7,7 +7,7 @@ type Props = {
   children: Node,
   external: boolean,
   href: string,
-}
+};
 
 const Link = ({ children, external, ...props }: Props) => (
   <a target={external ? '_blank' : undefined} rel={external ? 'noopener noreferrer' : undefined} {...props}>

diff --git a/components/japan/paragraph-container.js b/components/japan/paragraph-container.js
@@ -4,7 +4,7 @@ import React from 'react';
 
 type Props = {
   className?: string,
-}
+};
 
 const ParagraphContainer = ({ className, ...props }: Props) => (
   // $FlowFixMe: Flow doesn't support defaultProps in functional components

diff --git a/components/japan/paragraph.js b/components/japan/paragraph.js
@@ -4,7 +4,7 @@ import React from 'react';
 import type { Node } from 'react';
 
 type Props = {
-  children: Node
+  children: Node,
 };
 
 const Paragraph = ({ children }: Props) => (