Improve build process and remove WebP support

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;

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<PageElement> => [
       name: `András Schmelczer`,
       photo: Image({
         imageWebP: meWebP,
-        imageJpeg: meJpeg,
         alt: `a picture of me`,
       }),
       about: [

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,
   }),

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,
   }),

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,
   }),

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(
+  figure: new Preview(declaredWebP, 'https://decla.red', 'The website of the video game'),
-    declaredWebP,
-    declaredJpeg,
-    '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.

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,

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,
   }),

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,
   }),

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,
   }),

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,
   }),

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,
   }),

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,
   }),

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,
   }),

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.'
   ),

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,
   }),

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 => `
   <div class="preview">
     ${Image({
       imageWebP: posterWebP,
-      imageJpeg: posterJpeg,
       alt,
       container: true,
       isIgnoredByImageViewer: true,

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));
   }

src/page/basics/video/video-parameters.ts

@@ -5,6 +5,5 @@ export interface VideoParameters {
   mp4: url;
   webm: url;
   posterWebP: ResponsiveImage;
-  posterJpeg: ResponsiveImage;
   invertButton?: boolean;
 }

src/page/basics/video/video.html.ts

@@ -9,15 +9,13 @@ export const generate = ({
   webm,
   mp4,
   posterWebP,
-  posterJpeg,
   invertButton,
 }: VideoParameters): html => `
   <div class="figure-container video-container" style="padding-top:${
-    (posterJpeg.height / posterJpeg.width) * 100
+    (posterWebP.height / posterWebP.width) * 100
   }%">
     ${Image({
       imageWebP: posterWebP,
-      imageJpeg: posterJpeg,
       alt: `thumbnail for the video`,
       isIgnoredByImageViewer: true,
     })}

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: {
+  optimization: {
-    hot: false,
+    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,
+          adapter: require('responsive-loader/sharp'),
-          name: '[contenthash].[ext]',
+          sizes: [200, 400, 800, 1200, 1920],
-          outputPath: 'static/',
+          placeholder: true,
-          sizes: [200, 400, 800, 1200, 1600, 2000],
+          placeholderSize: 64,
-          quality: 0.9,
+          quality: 90,
           format: 'webp',
           progressive: true,
+          name: '[hash:8].[ext]',
         },
       },
       {
         test: /\.(webm|mp4)$/i,
-        use: [
+        type: 'asset/resource',
-          {
+        generator: {
-            loader: 'file-loader',
+          filename: '[hash:8][ext]',
-            options: {
-              outputPath: 'static/',
-              name: '[contenthash].[ext]',
-            },
-          },
-        ],
-      },
-      {
-        test: /\.pdf$/i,
-        use: {
-          loader: 'file-loader',
-          options: {
-            outputPath: 'static/',
-            name: '[name].[ext]',
-          },
         },
       },
       {
@@ -69,13 +63,10 @@ module.exports = (env, argv) => ({
         use: 'svg-inline-loader',
       },
       {
-        test: /no-change/i,
+        test: /(\/no-change\/|.pdf$)/i,
-        use: {
+        type: 'asset/resource',
-          loader: 'file-loader',
+        generator: {
-          options: {
+          filename: '[name][ext]',
-            outputPath: '/',
-            name: '[name].[ext]',
-          },
         },
       },
       {
@@ -109,7 +100,10 @@ module.exports = (env, argv) => ({
     ],
   },
   resolve: {
-    extensions: ['.ts'],
+    extensions: [
+      '.ts',
+      '.js', // required for development
+    ],
   },
   output: {
     clean: true,