Improve images

vishnu3636 · Apr 17, 2022 · 8438d6f · 8438d6f
1 parent b8a10ec
commit 8438d6f
Show file tree

Hide file tree

Showing 18 changed files with 6,797 additions and 5,764 deletions.
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -19,6 +19,7 @@ export const decorators = [
         <style>{tokenStyles}</style>
         <div id="story-root" className="storyRoot">
           <Story />
+          <div id="portal-root" />
         </div>
       </ThemeProvider>
     );

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -7,14 +7,13 @@
   "author": "Hamish Williams <hello@hamishw.com>",
   "devDependencies": {
     "@mapbox/rehype-prism": "^0.8.0",
-    "@storybook/addon-a11y": "^6.4.20",
-    "@storybook/addon-actions": "^6.4.20",
-    "@storybook/addon-controls": "^6.4.20",
-    "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/addon-toolbars": "^6.4.20",
-    "@storybook/builder-webpack5": "^6.4.21",
-    "@storybook/manager-webpack5": "^6.4.21",
-    "@storybook/react": "^6.4.20",
+    "@storybook/addon-a11y": "^6.4.22",
+    "@storybook/addon-actions": "^6.4.22",
+    "@storybook/addon-controls": "^6.4.22",
+    "@storybook/addon-toolbars": "^6.4.22",
+    "@storybook/builder-webpack5": "^6.4.22",
+    "@storybook/manager-webpack5": "^6.4.22",
+    "@storybook/react": "^6.4.22",
     "@svgr/webpack": "^6.2.1",
     "esbuild": "^0.14.36",
     "eslint": "^8.13.0",
@@ -37,8 +36,9 @@
     "framer-motion": "^6.3.0",
     "mdx-bundler": "^9.0.0",
     "next": "^12.1.5",
-    "react-dom": "^18.0.0",
     "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "storybook": "^6.4.22",
     "three": "^0.139.2"
   },
   "scripts": {

diff --git a/src/components/Carousel/Carousel.js b/src/components/Carousel/Carousel.js
@@ -15,7 +15,7 @@ import {
   WebGLRenderer,
   sRGBEncoding,
 } from 'three';
-import { getImageFromSrcSet } from 'utils/image';
+import { resolveSrcFromSrcSet } from 'utils/image';
 import { cssProps } from 'utils/style';
 import { cleanRenderer, cleanScene } from 'utils/three';
 import styles from './Carousel.module.css';
@@ -99,7 +99,7 @@ export const Carousel = ({ width, height, images, placeholder, ...rest }) => {
       const anisotropy = renderer.current.capabilities.getMaxAnisotropy();
 
       const texturePromises = images.map(async image => {
-        const imageSrc = await getImageFromSrcSet(image);
+        const imageSrc = await resolveSrcFromSrcSet(image);
         const imageTexture = await textureLoader.loadAsync(imageSrc);
         await renderer.current.initTexture(imageTexture);
         imageTexture.encoding = sRGBEncoding;
@@ -378,7 +378,7 @@ export const Carousel = ({ width, height, images, placeholder, ...rest }) => {
               aria-hidden
               className={styles.placeholder}
               data-loaded={loaded && !!textures}
-              src={placeholder}
+              src={placeholder.src}
               ref={placeholderRef}
               alt=""
               role="presentation"

diff --git a/src/components/Carousel/Carousel.stories.js b/src/components/Carousel/Carousel.stories.js
@@ -15,15 +15,15 @@ export const images = () => (
       placeholder={placeholderImg}
       images={[
         {
-          src: 'https://source.unsplash.com/ANJHXftvvJ8/1280x720',
+          src: { src: 'https://source.unsplash.com/ANJHXftvvJ8/1280x720' },
           alt: 'A neon sign with kanji',
         },
         {
-          src: 'https://source.unsplash.com/qEWEz-U5p8Q/1280x720',
+          src: { src: 'https://source.unsplash.com/qEWEz-U5p8Q/1280x720' },
           alt: 'Tokyo at night',
         },
         {
-          src: 'https://source.unsplash.com/lx9RWIg1Rdg/1280x720',
+          src: { src: 'https://source.unsplash.com/lx9RWIg1Rdg/1280x720' },
           alt: 'A rad cyberpunk dude',
         },
       ]}

diff --git a/src/components/Image/Image.js b/src/components/Image/Image.js
@@ -3,7 +3,7 @@ import { Icon } from 'components/Icon';
 import { useTheme } from 'components/ThemeProvider';
 import { useInViewport, usePrefersReducedMotion } from 'hooks';
 import { Fragment, useCallback, useEffect, useRef, useState } from 'react';
-import { resolveVideoSrcFromSrcSet } from 'utils/image';
+import { resolveSrcFromSrcSet, srcSetToString } from 'utils/image';
 import { classes, cssProps, numToMs } from 'utils/style';
 import styles from './Image.module.css';
 
@@ -13,13 +13,15 @@ export const Image = ({
   reveal,
   delay = 0,
   raised,
-  src,
+  src: baseSrc,
+  srcSet,
   placeholder,
   ...rest
 }) => {
   const [loaded, setLoaded] = useState(false);
   const { themeId } = useTheme();
   const containerRef = useRef();
+  const src = baseSrc || srcSet?.[0];
   const inViewport = useInViewport(containerRef, !getIsVideo(src));
 
   const onLoad = useCallback(() => {
@@ -43,6 +45,7 @@ export const Image = ({
         inViewport={inViewport}
         reveal={reveal}
         src={src}
+        srcSet={srcSet}
         placeholder={placeholder}
         {...rest}
       />
@@ -62,6 +65,7 @@ const ImageElements = ({
   play = true,
   restartOnPause,
   reveal,
+  sizes,
   ...rest
 }) => {
   const prefersReducedMotion = usePrefersReducedMotion();
@@ -73,10 +77,11 @@ const ImageElements = ({
   const videoRef = useRef();
   const isVideo = getIsVideo(src);
   const showFullRes = inViewport;
+  const srcSetString = srcSetToString(srcSet);
 
   useEffect(() => {
     const resolveVideoSrc = async () => {
-      const resolvedVideoSrc = await resolveVideoSrcFromSrcSet(srcSet);
+      const resolvedVideoSrc = await resolveSrcFromSrcSet({ srcSet, sizes });
       setVideoSrc(resolvedVideoSrc);
     };
 
@@ -167,10 +172,11 @@ const ImageElements = ({
           onLoad={onLoad}
           decoding="async"
           src={showFullRes ? src.src : undefined}
-          srcSet={showFullRes ? srcSet : undefined}
+          srcSet={showFullRes ? srcSetString : undefined}
           width={src.width}
           height={src.height}
           alt={alt}
+          sizes={sizes}
           {...rest}
         />
       )}
@@ -195,5 +201,5 @@ const ImageElements = ({
 };
 
 function getIsVideo(src) {
-  return typeof src === 'string' && src.endsWith('.mp4');
+  return typeof src.src === 'string' && src.src.endsWith('.mp4');
 }
diff --git a/src/components/Image/Image.stories.js b/src/components/Image/Image.stories.js
@@ -0,0 +1,31 @@
+import { Image } from 'components/Image';
+import { StoryContainer } from '../../../.storybook/StoryContainer';
+
+export default {
+  title: 'Image',
+};
+
+const imageSrc = {
+  src: {
+    src: 'https://images.unsplash.com/photo-1563089145-599997674d42?auto=format&fit=crop&w=1317&q=80',
+    width: 1317,
+    height: 878,
+  },
+  placeholder: {
+    src: 'https://images.unsplash.com/photo-1563089145-599997674d42?auto=format&fit=crop&w=439&q=2',
+    width: 1317,
+    height: 878,
+  },
+};
+
+export const image = () => (
+  <StoryContainer>
+    <Image {...imageSrc} />
+  </StoryContainer>
+);
+
+export const reveal = () => (
+  <StoryContainer>
+    <Image reveal {...imageSrc} />
+  </StoryContainer>
+);
diff --git a/src/components/Model/Model.js b/src/components/Model/Model.js
@@ -24,7 +24,7 @@ import {
 } from 'three';
 import { HorizontalBlurShader } from 'three/examples/jsm/shaders/HorizontalBlurShader.js';
 import { VerticalBlurShader } from 'three/examples/jsm/shaders/VerticalBlurShader.js';
-import { getImageFromSrcSet } from 'utils/image';
+import { resolveSrcFromSrcSet } from 'utils/image';
 import { classes, cssProps, numToMs } from 'utils/style';
 import { cleanRenderer, cleanScene, modelLoader, removeLights } from 'utils/three';
 import styles from './Model.module.css';
@@ -397,7 +397,7 @@ const Device = ({
         if (node.name === MeshType.Screen) {
           applyScreenTexture(placeholder, node);
           loadFullResTexture = async () => {
-            const image = await getImageFromSrcSet(texture);
+            const image = await resolveSrcFromSrcSet(texture);
             const fullSize = await textureLoader.current.loadAsync(image);
             await applyScreenTexture(fullSize, node);
           };

diff --git a/src/layouts/Home/Profile.js b/src/layouts/Home/Profile.js
@@ -82,8 +82,7 @@ export const Profile = ({ id, visible, sectionRef }) => {
                   reveal
                   delay={100}
                   placeholder={profileImgPlaceholder}
-                  src={profileImg}
-                  srcSet={`${profileImg.src} 480w, ${profileImgLarge.src} 960w`}
+                  srcSet={[profileImg, profileImgLarge]}
                   sizes={`(max-width: ${media.mobile}px) 100vw, 480px`}
                   alt="Me standing in front of the Torii on Miyajima, an island off the coast of Hiroshima in Japan"
                 />

diff --git a/src/layouts/Post/Post.js b/src/layouts/Post/Post.js
@@ -82,16 +82,18 @@ export const Post = ({
           </RouterLink>
           <div className={styles.bannerReadTime}>{readTime}</div>
         </div>
-        <div className={styles.banner}>
-          <Image
-            reveal
-            delay={600}
-            className={styles.bannerImage}
-            src={banner ? banner : undefined}
-            placeholder={{ src: bannerPlaceholder }}
-            alt={bannerAlt}
-          />
-        </div>
+        {banner && (
+          <div className={styles.banner}>
+            <Image
+              reveal
+              delay={600}
+              className={styles.bannerImage}
+              src={{ src: banner }}
+              placeholder={{ src: bannerPlaceholder }}
+              alt={bannerAlt}
+            />
+          </div>
+        )}
       </header>
       <Section className={styles.contentWrapper} id="postContent" tabIndex={-1}>
         <div className={styles.content}>{children}</div>

diff --git a/src/pages/Contact/Contact.js b/src/pages/Contact/Contact.js
@@ -1,6 +1,7 @@
 import { Button } from 'components/Button';
 import { DecoderText } from 'components/DecoderText';
 import { Divider } from 'components/Divider';
+import { Footer } from 'components/Footer';
 import { Heading } from 'components/Heading';
 import { Icon } from 'components/Icon';
 import { Input } from 'components/Input';
@@ -175,6 +176,7 @@ export const Contact = () => {
           </div>
         )}
       </Transition>
+      <Footer className={styles.footer} />
     </Section>
   );
 };

diff --git a/src/pages/articles/Articles.js b/src/pages/articles/Articles.js
@@ -37,7 +37,7 @@ const ArticlesPost = ({
               restartOnPause
               play={hovered}
               className={styles.postImage}
-              src={banner}
+              src={{ src: banner }}
               placeholder={{ src: bannerPlaceholder }}
               alt={bannerAlt}
             />

diff --git a/src/pages/contact/Contact.module.css b/src/pages/contact/Contact.module.css
@@ -2,9 +2,11 @@
   --formHeight: 530px;
 
   position: absolute;
-  display: flex;
+  display: grid;
+  grid-template-rows: 1fr auto;
+  justify-items: center;
   justify-content: center;
-  padding-top: calc(50vh - var(--formHeight) / 2);
+  align-items: center;
   min-height: 100vh;
   width: 100%;
 

diff --git a/src/pages/projects/slice/Slice.js b/src/pages/projects/slice/Slice.js
@@ -89,16 +89,14 @@ export const Slice = () => {
             <div className={styles.sidebarImages}>
               <Image
                 className={styles.sidebarImage}
-                src={sliceSidebarLayers}
-                srcSet={`${sliceSidebarLayers.src} 300w, ${sliceSidebarLayersLarge.src} 700w`}
+                srcSet={[sliceSidebarLayers, sliceSidebarLayersLarge]}
                 placeholder={sliceSidebarLayersPlaceholder}
                 alt="The layers sidebar design, now with user profiles."
                 sizes={`(max-width: ${media.mobile}px) 200px, 343px`}
               />
               <Image
                 className={styles.sidebarImage}
-                src={sliceSidebarAnnotations}
-                srcSet={`${sliceSidebarAnnotations.src} 300w, ${sliceSidebarAnnotationsLarge.src} 700w`}
+                srcSet={[sliceSidebarAnnotations, sliceSidebarAnnotationsLarge]}
                 placeholder={sliceSidebarAnnotationsPlaceholder}
                 alt="Multiple user annotations on a shared layer."
                 sizes={`(max-width: ${media.mobile}px) 200px, 343px`}
@@ -120,8 +118,7 @@ export const Slice = () => {
               </ProjectSectionText>
             </ProjectTextRow>
             <Image
-              src={sliceSlides}
-              srcSet={`${sliceSlides.src} 800w, ${sliceSlidesLarge.src} 1440w`}
+              srcSet={[sliceSlides, sliceSlidesLarge]}
               placeholder={sliceSlidesPlaceholder}
               alt="The new My Slides tab in slice, showing annotated and favorited slides."
               sizes={`(max-width: ${media.mobile}px) 500px, (max-width: ${media.tablet}px) 800px, 1000px`}
@@ -133,8 +130,7 @@ export const Slice = () => {
             <div className={styles.gridImage}>
               <div className={styles.gridBackground}>
                 <Image
-                  src={sliceBackgroundBar}
-                  srcSet={`${sliceBackgroundBar.src} 400w, ${sliceBackgroundBarLarge.src} 898w`}
+                  srcSet={[sliceBackgroundBar, sliceBackgroundBarLarge]}
                   placeholder={sliceBackgroundBarPlaceholder}
                   alt=""
                   role="presentation"
@@ -143,8 +139,7 @@ export const Slice = () => {
               </div>
               <div className={styles.gridForeground}>
                 <Image
-                  src={sliceAnnotation}
-                  srcSet={`${sliceAnnotation.src} 440w, ${sliceAnnotationLarge.src} 880w`}
+                  srcSet={[sliceAnnotation, sliceAnnotationLarge]}
                   placeholder={sliceAnnotationPlaceholder}
                   alt="An annotation preview popover with statistics for shape perimeter and area."
                   sizes={`(max-width: ${media.mobile}px) 584px, (max-width: ${media.tablet}px) 747px, 556px`}

diff --git a/src/pages/projects/smart-sparrow/Earth.js b/src/pages/projects/smart-sparrow/Earth.js
@@ -471,6 +471,8 @@ export const Earth = ({
   }, []);
 
   const handleScroll = useCallback(() => {
+    if (!container.current) return;
+
     const { offsetTop } = container.current;
     const { innerHeight } = window;