collective page images refactoring

pages/collective.tsx

@@ -1,14 +1,15 @@
 import Head from 'next/head'
 import { App } from 'src/components/App'
 import { Meta } from 'src/components/Meta'
-import { CollectiveImage } from 'src/components/CollectiveImage'
 import { meta } from 'src/lib/meta'
-import { IMeta, IPage, ImageDefinition } from 'src/types'
+import { IMeta, IPage, ImageSize } from 'src/types'
 import { createApiUrl, requestGet } from 'src/next-lib'
 import { NextPage, NextPageContext } from 'next'
 import { CardGrid } from 'src/components/CardGrid'
 import { Card } from 'src/components/Card'
 import { Block } from 'src/components/Block'
+import { Image } from 'src/components/Image'
+import { imageSrcSet } from 'src/lib/image'
 
 const persons = [
     '/teacher/mg-timasheva',
@@ -38,7 +39,6 @@ type CardData = {
 
 type Props = {
     title: string
-    image: string
     meta: IMeta
     data: CardData[]
 }
@@ -49,6 +49,9 @@ const Page: NextPage<Props> = props => {
         return
     }
 
+    const src = 'https://art.shlisselburg.org/static/img/collective.jpg'
+    const srcSet = imageSrcSet(src, [ImageSize.big, ImageSize.large, ImageSize.medium, ImageSize.small])
+
     return (
         <App
             showAuthor={true}
@@ -59,14 +62,17 @@ const Page: NextPage<Props> = props => {
                 <Meta meta={props.meta} />
             </Head>
 
-            {!props.image ? null : (
-                <CollectiveImage
-                    data={props.image}
-                    style={{
-                        marginBottom: 'var(--size-l)',
-                    }}
-                />
-            )}
+            <Image
+                src={src}
+                srcSet={srcSet}
+                style={{
+                    marginBottom: 'var(--size-l)',
+                }}
+                imgStyle={{
+                    width: '100%',
+                    borderRadius: 'var(--radius)',
+                }}
+            />
 
             <CardGrid style={{
                 marginBottom: 'var(--size-xl)',
@@ -100,10 +106,6 @@ const Page: NextPage<Props> = props => {
 
 export const unstable_getStaticProps = async (ctx: NextPageContext) => {
     const title = 'Преподаватели Шлиссельбургской ДХШ'
-    const imageFile = 'Images/HudozkaCollective2017.jpg'
-    const resImage = await requestGet<ImageDefinition>(createApiUrl(`/api/image?file=${imageFile}`), null)
-    const image = resImage?.artifacts.large
-
     const pages = await Promise.all(persons
         .map(page => requestGet<IPage>(createApiUrl(`/api/page?page=${page}`), null))
     )
@@ -116,16 +118,15 @@ export const unstable_getStaticProps = async (ctx: NextPageContext) => {
                 title: x.title,
                 caption: x.description,
                 href: x.url,
-                imageSrc: image.src,
                 imageAlt: title,
-                imageSrcSet: image.set.join(' ')
+                imageSrc: image.src,
+                imageSrcSet: imageSrcSet(image.src, [ImageSize.medium, ImageSize.small])
             }
         })
 
     return {
         props: {
             data,
-            image,
             title,
             meta: meta({
                 title,

src/components/CollectiveImage.jsx

@@ -1,22 +0,0 @@
-import React from 'react'
-import { Image } from './Image'
-
-export const CollectiveImage = (props) => (
-    <div
-        style={props.style}
-    >
-        <Image
-            src={props.data.src}
-            alt={props.data.alt}
-            set={props.data.set}
-            opa={false}
-            style={{
-                marginBottom: 'var(--double-margin)',
-            }}
-            imgStyle={{
-                width: '100%',
-                borderRadius: 'var(--radius)',
-            }}
-        />
-    </div>
-)

src/components/Image/index.tsx

@@ -1,40 +1,23 @@
-import * as React from 'react'
-import cx from 'classnames'
+import './styles.css'
+import { memo } from 'react'
 
-export interface IImageProps {
+export type ImageProps = {
     style?: React.CSSProperties
     imgStyle?: React.CSSProperties
     src: string
-    alt: string
-    opa: boolean
-    set: Array<{
-        url: string
-        density: number
-    }>
+    alt?: string
+    srcSet?: string
 }
 
-export const Image: React.FC<IImageProps> = React.memo(props => {
-    const srcSet = props.set
-        .map(({ url, density }) => `${url} ${density}x`)
-        .join(' ')
-
+export const Image: React.FC<ImageProps> = memo(props => {
     return (
-        <picture style={props.style}>
-            <style jsx>{`
-                picture img {
-                    display: block;
-                }
-            `}</style>
-
+        <picture className={'image'} style={props.style}>
             <img
                 style={props.imgStyle}
-                className={cx({
-                    opa: props.opa
-                })}
                 alt={props.alt}
                 src={props.src}
-                srcSet={srcSet}
+                srcSet={props.srcSet}
             />
-        </picture >
+        </picture>
     )
 })

src/components/Image/styles.css

@@ -0,0 +1,7 @@
+.image {
+    display: block;
+}
+
+.image img {
+    display: block;
+}

src/lib/image.ts

@@ -0,0 +1,25 @@
+import { ImageSize } from 'src/types'
+
+export type ResizeOptions = {
+    width: number
+    height: number
+}
+
+export function resizeImage(src: string, options: ResizeOptions): string {
+    return `https://images.weserv.nl/?url=${src}&w=${options.width}&h=${options.height}&n=-1`
+}
+
+export function imageSrcSet(src: string, sizes: ImageSize[]): string {
+    const set = sizes
+        .map(x => ({
+            value: x,
+            href: resizeImage(src, {
+                width: x,
+                height: x,
+            }),
+        }))
+
+    return set
+        .map(x => `${x.href} ${x.value}w`)
+        .join(', ')
+}

src/types.ts

@@ -61,6 +61,14 @@ export interface ITag {
     href: string
 }
 
+export enum ImageSize {
+    big = 3000,
+    large = 1500,
+    medium = 1000,
+    small = 500,
+    thumbnail = 200,
+}
+
 export type ImageArtifact = {
     width: number
     height: number