From 4f47bb639acb1eb96a56c7db2d4037ac2fef171a Mon Sep 17 00:00:00 2001 From: Andras Schmelczer Date: Wed, 21 Sep 2022 23:18:03 +0200 Subject: [PATCH] Improve build process and remove WebP support --- custom.d.ts | 24 --------- src/data/portfolio.ts | 2 - src/data/projects/ad-astra.ts | 2 - src/data/projects/city-simulation.ts | 2 - src/data/projects/colors.ts | 2 - src/data/projects/declared.ts | 8 +-- src/data/projects/forex.ts | 2 - src/data/projects/great-ai.ts | 2 - src/data/projects/leds.ts | 2 - src/data/projects/my-notes.ts | 2 - src/data/projects/nuclear-editor.ts | 2 - src/data/projects/nuclear.ts | 2 - src/data/projects/photos.ts | 2 - src/data/projects/platform-game.ts | 2 - src/data/projects/sdf2d.ts | 2 - src/data/projects/towers.ts | 2 - src/page/basics/preview/preview.html.ts | 3 -- src/page/basics/preview/preview.ts | 3 +- src/page/basics/video/video-parameters.ts | 1 - src/page/basics/video/video.html.ts | 4 +- webpack.config.js | 62 ++++++++++------------- 21 files changed, 31 insertions(+), 102 deletions(-) diff --git a/custom.d.ts b/custom.d.ts index 59667d5..58bda31 100644 --- a/custom.d.ts +++ b/custom.d.ts @@ -3,24 +3,12 @@ declare module '*.svg' { export default content; } -declare module '*.jpg' { - import { ResponsiveImage } from 'src/types/responsive-image'; - const content: ResponsiveImage; - export default content; -} - declare module '*.jpg?format=webp' { import { ResponsiveImage } from 'src/types/responsive-image'; const content: ResponsiveImage; export default content; } -declare module '*.jpg?format=jpg' { - import { ResponsiveImage } from 'src/types/responsive-image'; - const content: ResponsiveImage; - export default content; -} - declare module '*.png' { import { ResponsiveImage } from 'src/types/responsive-image'; const content: ResponsiveImage; @@ -33,18 +21,6 @@ declare module '*.png?format=webp' { export default content; } -declare module '*.png?format=jpg' { - import { ResponsiveImage } from 'src/types/responsive-image'; - const content: ResponsiveImage; - export default content; -} - -declare module '*.jpeg' { - import { ResponsiveImage } from 'src/types/responsive-image'; - const content: ResponsiveImage; - export default content; -} - declare module '*.mp4' { import { url } from 'src/types/url'; const content: url; diff --git a/src/data/portfolio.ts b/src/data/portfolio.ts index 540aaa1..8f99ebb 100644 --- a/src/data/portfolio.ts +++ b/src/data/portfolio.ts @@ -7,7 +7,6 @@ import { Main } from '../page/main/main'; import { PageElement } from '../page/page-element'; import { PageTimeline } from '../page/timeline/timeline'; import cvEnglish from './media/cv-andras-schmelczer.pdf'; -import meJpeg from './media/me.jpg?format=jpg'; import meWebP from './media/me.jpg?format=webp'; import { adAstraTimelineElement } from './projects/ad-astra'; import { citySimulationTimelineElement } from './projects/city-simulation'; @@ -30,7 +29,6 @@ export const create = (): Array => [ name: `András Schmelczer`, photo: Image({ imageWebP: meWebP, - imageJpeg: meJpeg, alt: `a picture of me`, }), about: [ diff --git a/src/data/projects/ad-astra.ts b/src/data/projects/ad-astra.ts index 3ee9642..b3fbac0 100644 --- a/src/data/projects/ad-astra.ts +++ b/src/data/projects/ad-astra.ts @@ -1,6 +1,5 @@ import { Video } from '../../page/basics/video/video'; import { TimelineElementParameters } from '../../page/timeline/timeline-element/timeline-element-parameters'; -import adAstraJpeg from '../media/ad_astra.jpg?format=jpg'; import adAstraWebP from '../media/ad_astra.jpg?format=webp'; import adAstraMp4 from '../media/mp4/ad_astra.mp4'; import adAstraWebM from '../media/webm/ad_astra.webm'; @@ -11,7 +10,6 @@ export const adAstraTimelineElement: TimelineElementParameters = { date: `2020 spring`, figure: new Video({ posterWebP: adAstraWebP, - posterJpeg: adAstraJpeg, mp4: adAstraMp4, webm: adAstraWebM, }), diff --git a/src/data/projects/city-simulation.ts b/src/data/projects/city-simulation.ts index 6c0357c..0d7f06b 100644 --- a/src/data/projects/city-simulation.ts +++ b/src/data/projects/city-simulation.ts @@ -1,7 +1,6 @@ import { Video } from '../../page/basics/video/video'; import { TimelineElementParameters } from '../../page/timeline/timeline-element/timeline-element-parameters'; import citySimulationMp4 from '../media/mp4/simulation.mp4'; -import citySimulationPosterJpeg from '../media/simulation.jpg?format=jpg'; import citySimulationPosterWebP from '../media/simulation.jpg?format=webp'; import citySimulationWebM from '../media/webm/simulation.webm'; @@ -10,7 +9,6 @@ export const citySimulationTimelineElement: TimelineElementParameters = { date: `2018 July - August`, figure: new Video({ posterWebP: citySimulationPosterWebP, - posterJpeg: citySimulationPosterJpeg, mp4: citySimulationMp4, webm: citySimulationWebM, }), diff --git a/src/data/projects/colors.ts b/src/data/projects/colors.ts index b3f6adf..7b447f5 100644 --- a/src/data/projects/colors.ts +++ b/src/data/projects/colors.ts @@ -1,6 +1,5 @@ import { Image } from '../../page/basics/image/image.html'; import { TimelineElementParameters } from '../../page/timeline/timeline-element/timeline-element-parameters'; -import colourJpeg from '../media/color.jpg?format=jpg'; import colourWebP from '../media/color.jpg?format=webp'; export const colorsTimelineElement: TimelineElementParameters = { @@ -8,7 +7,6 @@ export const colorsTimelineElement: TimelineElementParameters = { date: `2018 June`, figure: Image({ imageWebP: colourWebP, - imageJpeg: colourJpeg, alt: `a picture of the app`, container: true, }), diff --git a/src/data/projects/declared.ts b/src/data/projects/declared.ts index 1009d70..2c7b02b 100644 --- a/src/data/projects/declared.ts +++ b/src/data/projects/declared.ts @@ -1,6 +1,5 @@ import { Preview } from '../../page/basics/preview/preview'; import { TimelineElementParameters } from '../../page/timeline/timeline-element/timeline-element-parameters'; -import declaredJpeg from '../media/decla-red.png?format=jpg'; import declaredWebP from '../media/decla-red.png?format=webp'; import bscThesis from '../media/sdf2d-andras-schmelczer.pdf'; import { GitHub, Open, Thesis } from '../shared'; @@ -8,12 +7,7 @@ import { GitHub, Open, Thesis } from '../shared'; export const declaredTimelineElement: TimelineElementParameters = { title: `Multiplayer game`, date: `2020 autumn`, - figure: new Preview( - declaredWebP, - declaredJpeg, - 'https://decla.red', - 'The website of the video game' - ), + figure: new Preview(declaredWebP, 'https://decla.red', 'The website of the video game'), description: ` Using SDF-2D (my ray tracing graphics library), I created a conquest-style multiplayer browser game. It even runs on mobiles. diff --git a/src/data/projects/forex.ts b/src/data/projects/forex.ts index f0aa8f5..ae143e2 100644 --- a/src/data/projects/forex.ts +++ b/src/data/projects/forex.ts @@ -1,6 +1,5 @@ import { Video } from '../../page/basics/video/video'; import { TimelineElementParameters } from '../../page/timeline/timeline-element/timeline-element-parameters'; -import forexPosterJpeg from '../media/forex.jpg?format=jpg'; import forexPosterWebP from '../media/forex.jpg?format=webp'; import forexMp4 from '../media/mp4/forex.mp4'; import forexWebM from '../media/webm/forex.webm'; @@ -10,7 +9,6 @@ export const forexTimelineElement: TimelineElementParameters = { date: `2019 autumn`, figure: new Video({ posterWebP: forexPosterWebP, - posterJpeg: forexPosterJpeg, mp4: forexMp4, webm: forexWebM, invertButton: true, diff --git a/src/data/projects/great-ai.ts b/src/data/projects/great-ai.ts index f268f4c..c9a25a8 100644 --- a/src/data/projects/great-ai.ts +++ b/src/data/projects/great-ai.ts @@ -1,7 +1,6 @@ import { Image } from '../../page/basics/image/image.html'; import { TimelineElementParameters } from '../../page/timeline/timeline-element/timeline-element-parameters'; import mscThesis from '../media/great-ai-andras-schmelczer.pdf'; -import greatAiJpeg from '../media/great-ai.png?format=jpg'; import greatAiWebP from '../media/great-ai.png?format=webp'; import { Open, PyPi, Thesis } from '../shared'; @@ -10,7 +9,6 @@ export const greatAiTimelineElement: TimelineElementParameters = { date: `2022`, figure: Image({ imageWebP: greatAiWebP, - imageJpeg: greatAiJpeg, alt: `some example code using GreatAI`, container: true, }), diff --git a/src/data/projects/leds.ts b/src/data/projects/leds.ts index e2ae5bc..dcd0299 100644 --- a/src/data/projects/leds.ts +++ b/src/data/projects/leds.ts @@ -1,6 +1,5 @@ import { Video } from '../../page/basics/video/video'; import { TimelineElementParameters } from '../../page/timeline/timeline-element/timeline-element-parameters'; -import ledPosterJpeg from '../media/led.jpg?format=jpg'; import ledPosterWebP from '../media/led.jpg?format=webp'; import ledMp4 from '../media/mp4/led.mp4'; import ledWebM from '../media/webm/led.webm'; @@ -10,7 +9,6 @@ export const ledsTimelineElement: TimelineElementParameters = { date: `2016 spring`, figure: new Video({ posterWebP: ledPosterWebP, - posterJpeg: ledPosterJpeg, mp4: ledMp4, webm: ledWebM, }), diff --git a/src/data/projects/my-notes.ts b/src/data/projects/my-notes.ts index c242458..d3dc26e 100644 --- a/src/data/projects/my-notes.ts +++ b/src/data/projects/my-notes.ts @@ -1,6 +1,5 @@ import { Image } from '../../page/basics/image/image.html'; import { TimelineElementParameters } from '../../page/timeline/timeline-element/timeline-element-parameters'; -import myNotesJpeg from '../media/my-notes.png?format=jpg'; import myNotesWebP from '../media/my-notes.png?format=webp'; import { GitHub } from '../shared'; @@ -9,7 +8,6 @@ export const myNotesTimelineElement: TimelineElementParameters = { date: `2019 November`, figure: Image({ imageWebP: myNotesWebP, - imageJpeg: myNotesJpeg, alt: `two screenshots of the application`, container: true, }), diff --git a/src/data/projects/nuclear-editor.ts b/src/data/projects/nuclear-editor.ts index b3935ed..ca36c2c 100644 --- a/src/data/projects/nuclear-editor.ts +++ b/src/data/projects/nuclear-editor.ts @@ -1,6 +1,5 @@ import { Image } from '../../page/basics/image/image.html'; import { TimelineElementParameters } from '../../page/timeline/timeline-element/timeline-element-parameters'; -import processSimulatorInputJpeg from '../media/process-simulator-input.jpg?format=jpg'; import processSimulatorInputWebP from '../media/process-simulator-input.jpg?format=webp'; export const nuclearEditorTimelineElement: TimelineElementParameters = { @@ -8,7 +7,6 @@ export const nuclearEditorTimelineElement: TimelineElementParameters = { date: `2018 October - November`, figure: Image({ imageWebP: processSimulatorInputWebP, - imageJpeg: processSimulatorInputJpeg, alt: `a picture of the simulator's UI`, container: true, }), diff --git a/src/data/projects/nuclear.ts b/src/data/projects/nuclear.ts index bad382c..2012792 100644 --- a/src/data/projects/nuclear.ts +++ b/src/data/projects/nuclear.ts @@ -1,6 +1,5 @@ import { Image } from '../../page/basics/image/image.html'; import { TimelineElementParameters } from '../../page/timeline/timeline-element/timeline-element-parameters'; -import processSimulatorJpeg from '../media/process-simulator.jpg?format=jpg'; import processSimulatorWebP from '../media/process-simulator.jpg?format=webp'; export const nuclearTimelineElement: TimelineElementParameters = { @@ -8,7 +7,6 @@ export const nuclearTimelineElement: TimelineElementParameters = { date: `2018 October - November`, figure: Image({ imageWebP: processSimulatorWebP, - imageJpeg: processSimulatorJpeg, alt: `a screenshot of the simulator`, container: true, }), diff --git a/src/data/projects/photos.ts b/src/data/projects/photos.ts index 0d2dada..f05f84c 100644 --- a/src/data/projects/photos.ts +++ b/src/data/projects/photos.ts @@ -1,6 +1,5 @@ import { Image } from '../../page/basics/image/image.html'; import { TimelineElementParameters } from '../../page/timeline/timeline-element/timeline-element-parameters'; -import photosJpeg from '../media/photos.jpg?format=jpg'; import photosWebP from '../media/photos.jpg?format=webp'; import { Open } from '../shared'; @@ -9,7 +8,6 @@ export const photosTimelineElement: TimelineElementParameters = { date: `2016 summer`, figure: Image({ imageWebP: photosWebP, - imageJpeg: photosJpeg, alt: `a picture of the website`, container: true, }), diff --git a/src/data/projects/platform-game.ts b/src/data/projects/platform-game.ts index a0c3a23..504f994 100644 --- a/src/data/projects/platform-game.ts +++ b/src/data/projects/platform-game.ts @@ -1,7 +1,6 @@ import { Video } from '../../page/basics/video/video'; import { TimelineElementParameters } from '../../page/timeline/timeline-element/timeline-element-parameters'; import platformMp4 from '../media/mp4/platform.mp4'; -import platformPosterJpeg from '../media/platform.png?format=jpg'; import platformPosterWebP from '../media/platform.png?format=webp'; import platformWebM from '../media/webm/platform.webm'; @@ -10,7 +9,6 @@ export const platformGameTimelineElement: TimelineElementParameters = { date: `2017 autumn`, figure: new Video({ posterWebP: platformPosterWebP, - posterJpeg: platformPosterJpeg, mp4: platformMp4, webm: platformWebM, }), diff --git a/src/data/projects/sdf2d.ts b/src/data/projects/sdf2d.ts index dec111c..2ef842e 100644 --- a/src/data/projects/sdf2d.ts +++ b/src/data/projects/sdf2d.ts @@ -1,6 +1,5 @@ import { Preview } from '../../page/basics/preview/preview'; import { TimelineElementParameters } from '../../page/timeline/timeline-element/timeline-element-parameters'; -import sdf2dJpeg from '../media/sdf2d.png?format=jpg'; import sdf2dWebP from '../media/sdf2d.png?format=webp'; import { NPM, Open, Youtube } from '../shared'; @@ -9,7 +8,6 @@ export const sdf2dTimelineElement: TimelineElementParameters = { date: `2020 autumn`, figure: new Preview( sdf2dWebP, - sdf2dJpeg, 'https://sdf2d.schmelczer.dev', 'A webpage showcasing the SDF-2D project.' ), diff --git a/src/data/projects/towers.ts b/src/data/projects/towers.ts index 083604b..681ac9f 100644 --- a/src/data/projects/towers.ts +++ b/src/data/projects/towers.ts @@ -1,6 +1,5 @@ import { Image } from '../../page/basics/image/image.html'; import { TimelineElementParameters } from '../../page/timeline/timeline-element/timeline-element-parameters'; -import towersJpeg from '../media/towers.png?format=jpg'; import towersWebP from '../media/towers.png?format=webp'; import { GitHub, Open } from '../shared'; @@ -9,7 +8,6 @@ export const towersTimelineElement: TimelineElementParameters = { date: `2019 August - September`, figure: Image({ imageWebP: towersWebP, - imageJpeg: towersJpeg, alt: `a picture of the website`, container: true, }), diff --git a/src/page/basics/preview/preview.html.ts b/src/page/basics/preview/preview.html.ts index 587dc0e..8195ae9 100644 --- a/src/page/basics/preview/preview.html.ts +++ b/src/page/basics/preview/preview.html.ts @@ -8,16 +8,13 @@ import './preview.scss'; export const generate = ({ alt, posterWebP, - posterJpeg, }: { alt: string; posterWebP: ResponsiveImage; - posterJpeg: ResponsiveImage; }): html => `
${Image({ imageWebP: posterWebP, - imageJpeg: posterJpeg, alt, container: true, isIgnoredByImageViewer: true, diff --git a/src/page/basics/preview/preview.ts b/src/page/basics/preview/preview.ts index 458a390..859e171 100644 --- a/src/page/basics/preview/preview.ts +++ b/src/page/basics/preview/preview.ts @@ -6,11 +6,10 @@ import { generate } from './preview.html'; export class Preview extends PageElement { public constructor( posterWebP: ResponsiveImage, - posterJpeg: ResponsiveImage, private readonly url: string, alt: string ) { - super(createElement(generate({ posterWebP, posterJpeg, alt }))); + super(createElement(generate({ posterWebP, alt }))); this.url += '?portfolioView'; this.query('.start-button').addEventListener('click', this.loadContent.bind(this)); } diff --git a/src/page/basics/video/video-parameters.ts b/src/page/basics/video/video-parameters.ts index da59482..e657c0c 100644 --- a/src/page/basics/video/video-parameters.ts +++ b/src/page/basics/video/video-parameters.ts @@ -5,6 +5,5 @@ export interface VideoParameters { mp4: url; webm: url; posterWebP: ResponsiveImage; - posterJpeg: ResponsiveImage; invertButton?: boolean; } diff --git a/src/page/basics/video/video.html.ts b/src/page/basics/video/video.html.ts index 4fbd37d..9c84c97 100644 --- a/src/page/basics/video/video.html.ts +++ b/src/page/basics/video/video.html.ts @@ -9,15 +9,13 @@ export const generate = ({ webm, mp4, posterWebP, - posterJpeg, invertButton, }: VideoParameters): html => `
${Image({ imageWebP: posterWebP, - imageJpeg: posterJpeg, alt: `thumbnail for the video`, isIgnoredByImageViewer: true, })} diff --git a/webpack.config.js b/webpack.config.js index f6d344b..8eb04d1 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,6 +1,6 @@ const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); -const Sharp = require('responsive-loader/sharp'); +const TerserPlugin = require('terser-webpack-plugin'); const InlineSourceWebpackPlugin = require('inline-source-webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const webpack = require('webpack'); @@ -10,8 +10,15 @@ module.exports = (env, argv) => ({ entry: { index: './src/index.ts', }, - devServer: { - hot: false, + optimization: { + minimize: true, + minimizer: [ + new TerserPlugin({ + terserOptions: { + module: true, + }, + }), + ], }, plugins: [ new HtmlWebpackPlugin({ @@ -31,37 +38,24 @@ module.exports = (env, argv) => ({ rules: [ { test: /\.(jpe?g|png)$/i, + exclude: /no-change/i, loader: 'responsive-loader', options: { - adapter: Sharp, - name: '[contenthash].[ext]', - outputPath: 'static/', - sizes: [200, 400, 800, 1200, 1600, 2000], - quality: 0.9, + adapter: require('responsive-loader/sharp'), + sizes: [200, 400, 800, 1200, 1920], + placeholder: true, + placeholderSize: 64, + quality: 90, format: 'webp', progressive: true, + name: '[hash:8].[ext]', }, }, { test: /\.(webm|mp4)$/i, - use: [ - { - loader: 'file-loader', - options: { - outputPath: 'static/', - name: '[contenthash].[ext]', - }, - }, - ], - }, - { - test: /\.pdf$/i, - use: { - loader: 'file-loader', - options: { - outputPath: 'static/', - name: '[name].[ext]', - }, + type: 'asset/resource', + generator: { + filename: '[hash:8][ext]', }, }, { @@ -69,13 +63,10 @@ module.exports = (env, argv) => ({ use: 'svg-inline-loader', }, { - test: /no-change/i, - use: { - loader: 'file-loader', - options: { - outputPath: '/', - name: '[name].[ext]', - }, + test: /(\/no-change\/|.pdf$)/i, + type: 'asset/resource', + generator: { + filename: '[name][ext]', }, }, { @@ -109,7 +100,10 @@ module.exports = (env, argv) => ({ ], }, resolve: { - extensions: ['.ts'], + extensions: [ + '.ts', + '.js', // required for development + ], }, output: { clean: true,