diff --git a/package.json b/package.json index 76c3342..fbb87b2 100644 --- a/package.json +++ b/package.json @@ -33,7 +33,8 @@ "prettier": "^2.8.4", "prop-types": "^15.8.1", "typescript": "^4.9.3", - "vite": "^4.0.0" + "vite": "^4.0.0", + "vite-imagetools": "^7.0.2" }, "packageManager": "yarn@3.5.1" } diff --git a/src/getResistantPhotoUrl.tsx b/src/getResistantPhotoUrl.tsx index 4693656..63e2ea2 100644 --- a/src/getResistantPhotoUrl.tsx +++ b/src/getResistantPhotoUrl.tsx @@ -1,13 +1,35 @@ import { Resistant } from "./Resistant"; import { getPortableAssetAbsoluteUrl } from "./getPortableAssetAbsoluteUrl"; -const photoUrls = import.meta.glob("./photos/*.jpg", { - query: "?url", +const photoUrls2048 = import.meta.glob("./photos/*.jpg", { + query: "?url&w=2048&h=2048&format=jpg", eager: true, import: "default", }); -export const getResistantPhotoUrl = (resistant: Resistant): string => { - const photoUrl = photoUrls[`./photos/${resistant.id}.jpg`] as string; +const photoUrls500 = import.meta.glob("./photos/*.jpg", { + query: "?url&w=500&h=500&format=jpg", + eager: true, + import: "default", +}); + +const photoUrls200 = import.meta.glob("./photos/*.jpg", { + query: "?url&w=200&h=200&format=jpg", + eager: true, + import: "default", +}); + +export const getResistantPhotoUrl2048 = (resistant: Resistant): string => { + const photoUrl = photoUrls2048[`./photos/${resistant.id}.jpg`] as string; + return getPortableAssetAbsoluteUrl(photoUrl); +}; + +export const getResistantPhotoUrl500 = (resistant: Resistant): string => { + const photoUrl = photoUrls500[`./photos/${resistant.id}.jpg`] as string; + return getPortableAssetAbsoluteUrl(photoUrl); +}; + +export const getResistantPhotoUrl200 = (resistant: Resistant): string => { + const photoUrl = photoUrls200[`./photos/${resistant.id}.jpg`] as string; return getPortableAssetAbsoluteUrl(photoUrl); }; diff --git a/src/routes/Liste/List/ResistantRow.tsx b/src/routes/Liste/List/ResistantRow.tsx index 003b2e2..d0ab232 100644 --- a/src/routes/Liste/List/ResistantRow.tsx +++ b/src/routes/Liste/List/ResistantRow.tsx @@ -1,16 +1,15 @@ import { useNavigate } from "react-router"; +import { EmbeddedYoutube } from "../../../components/EmbeddedYoutube"; +import { ExternalLink } from "../../../components/ExternalLink"; +import { Separator } from "../../../components/Separator"; +import { getResistantPhotoUrl200 } from "../../../getResistantPhotoUrl"; import { getResistantDateDeclarationMoisAnnee, getResistantDateFinMoisAnnee, isAncienResistant, - isResistantActif, Resistant, } from "../../../Resistant"; -import { getResistantPhotoUrl } from "../../../getResistantPhotoUrl"; -import { Separator } from "../../../components/Separator"; import { getResistantGrayscaleRule } from "../../../style/getResistantGrayscaleRule"; -import { ExternalLink } from "../../../components/ExternalLink"; -import { EmbeddedYoutube } from "../../../components/EmbeddedYoutube"; interface Props { resistant: Resistant; @@ -53,7 +52,7 @@ export const ResistantRow = ({ resistant }: Props) => { /> ) : ( {resistant.noms} { const navigate = useNavigate(); @@ -40,7 +40,7 @@ export const PopupContent = ({ resistant }: { resistant: Resistant }) => { /> ) : ( { return ( diff --git a/src/routes/PageResistant.tsx b/src/routes/PageResistant.tsx index 2786b70..3b29ca9 100644 --- a/src/routes/PageResistant.tsx +++ b/src/routes/PageResistant.tsx @@ -1,17 +1,17 @@ +import { AspectRatio } from "@mantine/core"; import { useContext } from "react"; import { useNavigate, useParams } from "react-router"; -import { AspectRatio } from "@mantine/core"; -import { getResistantPhotoUrl } from "../getResistantPhotoUrl"; -import { resistants } from "../resistants"; -import { getResistantsPageUrl } from "../getResistantsPageUrl"; -import { HomeContext } from "../context/HomeContext"; -import { ExternalLink } from "../components/ExternalLink"; import { getResistantDateDeclarationMoisAnnee, getResistantDateFinMoisAnnee, isAncienResistant, } from "../Resistant"; import { getYoutubeEmbedLink } from "../Youtube"; +import { ExternalLink } from "../components/ExternalLink"; +import { HomeContext } from "../context/HomeContext"; +import { getResistantPhotoUrl2048 } from "../getResistantPhotoUrl"; +import { getResistantsPageUrl } from "../getResistantsPageUrl"; +import { resistants } from "../resistants"; export const PageResistant = () => { const { idResistant } = useParams(); @@ -78,14 +78,14 @@ export const PageResistant = () => { > { }} alt={resistant.noms} data-image-resolution="500w" - src={getResistantPhotoUrl(resistant)} + src={getResistantPhotoUrl2048(resistant)} /> diff --git a/vite.config.ts b/vite.config.ts index ca56da0..acbe4d6 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,9 +1,10 @@ import react from "@vitejs/plugin-react-swc"; import { defineConfig } from "vite"; +import { imagetools } from "vite-imagetools"; // https://vitejs.dev/config/ export default defineConfig({ - plugins: [react()], + plugins: [react(), imagetools()], // Resistants module is deployed in framagit under /resistants base: "/resistants", build: { diff --git a/yarn.lock b/yarn.lock index 4fc0564..52d2394 100644 --- a/yarn.lock +++ b/yarn.lock @@ -77,6 +77,15 @@ __metadata: languageName: node linkType: hard +"@emnapi/runtime@npm:^1.1.1": + version: 1.2.0 + resolution: "@emnapi/runtime@npm:1.2.0" + dependencies: + tslib: ^2.4.0 + checksum: c9f5814f65a7851eda3fae96320b7ebfaf3b7e0db4e1ac2d77b55f5c0785e56b459a029413dbfc0abb1b23f059b850169888f92833150a28cdf24b9a53e535c5 + languageName: node + linkType: hard + "@emotion/babel-plugin@npm:^11.10.8": version: 11.10.8 resolution: "@emotion/babel-plugin@npm:11.10.8" @@ -397,6 +406,181 @@ __metadata: languageName: node linkType: hard +"@img/sharp-darwin-arm64@npm:0.33.4": + version: 0.33.4 + resolution: "@img/sharp-darwin-arm64@npm:0.33.4" + dependencies: + "@img/sharp-libvips-darwin-arm64": 1.0.2 + dependenciesMeta: + "@img/sharp-libvips-darwin-arm64": + optional: true + conditions: os=darwin & cpu=arm64 + languageName: node + linkType: hard + +"@img/sharp-darwin-x64@npm:0.33.4": + version: 0.33.4 + resolution: "@img/sharp-darwin-x64@npm:0.33.4" + dependencies: + "@img/sharp-libvips-darwin-x64": 1.0.2 + dependenciesMeta: + "@img/sharp-libvips-darwin-x64": + optional: true + conditions: os=darwin & cpu=x64 + languageName: node + linkType: hard + +"@img/sharp-libvips-darwin-arm64@npm:1.0.2": + version: 1.0.2 + resolution: "@img/sharp-libvips-darwin-arm64@npm:1.0.2" + conditions: os=darwin & cpu=arm64 + languageName: node + linkType: hard + +"@img/sharp-libvips-darwin-x64@npm:1.0.2": + version: 1.0.2 + resolution: "@img/sharp-libvips-darwin-x64@npm:1.0.2" + conditions: os=darwin & cpu=x64 + languageName: node + linkType: hard + +"@img/sharp-libvips-linux-arm64@npm:1.0.2": + version: 1.0.2 + resolution: "@img/sharp-libvips-linux-arm64@npm:1.0.2" + conditions: os=linux & cpu=arm64 & libc=glibc + languageName: node + linkType: hard + +"@img/sharp-libvips-linux-arm@npm:1.0.2": + version: 1.0.2 + resolution: "@img/sharp-libvips-linux-arm@npm:1.0.2" + conditions: os=linux & cpu=arm & libc=glibc + languageName: node + linkType: hard + +"@img/sharp-libvips-linux-s390x@npm:1.0.2": + version: 1.0.2 + resolution: "@img/sharp-libvips-linux-s390x@npm:1.0.2" + conditions: os=linux & cpu=s390x & libc=glibc + languageName: node + linkType: hard + +"@img/sharp-libvips-linux-x64@npm:1.0.2": + version: 1.0.2 + resolution: "@img/sharp-libvips-linux-x64@npm:1.0.2" + conditions: os=linux & cpu=x64 & libc=glibc + languageName: node + linkType: hard + +"@img/sharp-libvips-linuxmusl-arm64@npm:1.0.2": + version: 1.0.2 + resolution: "@img/sharp-libvips-linuxmusl-arm64@npm:1.0.2" + conditions: os=linux & cpu=arm64 & libc=musl + languageName: node + linkType: hard + +"@img/sharp-libvips-linuxmusl-x64@npm:1.0.2": + version: 1.0.2 + resolution: "@img/sharp-libvips-linuxmusl-x64@npm:1.0.2" + conditions: os=linux & cpu=x64 & libc=musl + languageName: node + linkType: hard + +"@img/sharp-linux-arm64@npm:0.33.4": + version: 0.33.4 + resolution: "@img/sharp-linux-arm64@npm:0.33.4" + dependencies: + "@img/sharp-libvips-linux-arm64": 1.0.2 + dependenciesMeta: + "@img/sharp-libvips-linux-arm64": + optional: true + conditions: os=linux & cpu=arm64 & libc=glibc + languageName: node + linkType: hard + +"@img/sharp-linux-arm@npm:0.33.4": + version: 0.33.4 + resolution: "@img/sharp-linux-arm@npm:0.33.4" + dependencies: + "@img/sharp-libvips-linux-arm": 1.0.2 + dependenciesMeta: + "@img/sharp-libvips-linux-arm": + optional: true + conditions: os=linux & cpu=arm & libc=glibc + languageName: node + linkType: hard + +"@img/sharp-linux-s390x@npm:0.33.4": + version: 0.33.4 + resolution: "@img/sharp-linux-s390x@npm:0.33.4" + dependencies: + "@img/sharp-libvips-linux-s390x": 1.0.2 + dependenciesMeta: + "@img/sharp-libvips-linux-s390x": + optional: true + conditions: os=linux & cpu=s390x & libc=glibc + languageName: node + linkType: hard + +"@img/sharp-linux-x64@npm:0.33.4": + version: 0.33.4 + resolution: "@img/sharp-linux-x64@npm:0.33.4" + dependencies: + "@img/sharp-libvips-linux-x64": 1.0.2 + dependenciesMeta: + "@img/sharp-libvips-linux-x64": + optional: true + conditions: os=linux & cpu=x64 & libc=glibc + languageName: node + linkType: hard + +"@img/sharp-linuxmusl-arm64@npm:0.33.4": + version: 0.33.4 + resolution: "@img/sharp-linuxmusl-arm64@npm:0.33.4" + dependencies: + "@img/sharp-libvips-linuxmusl-arm64": 1.0.2 + dependenciesMeta: + "@img/sharp-libvips-linuxmusl-arm64": + optional: true + conditions: os=linux & cpu=arm64 & libc=musl + languageName: node + linkType: hard + +"@img/sharp-linuxmusl-x64@npm:0.33.4": + version: 0.33.4 + resolution: "@img/sharp-linuxmusl-x64@npm:0.33.4" + dependencies: + "@img/sharp-libvips-linuxmusl-x64": 1.0.2 + dependenciesMeta: + "@img/sharp-libvips-linuxmusl-x64": + optional: true + conditions: os=linux & cpu=x64 & libc=musl + languageName: node + linkType: hard + +"@img/sharp-wasm32@npm:0.33.4": + version: 0.33.4 + resolution: "@img/sharp-wasm32@npm:0.33.4" + dependencies: + "@emnapi/runtime": ^1.1.1 + conditions: cpu=wasm32 + languageName: node + linkType: hard + +"@img/sharp-win32-ia32@npm:0.33.4": + version: 0.33.4 + resolution: "@img/sharp-win32-ia32@npm:0.33.4" + conditions: os=win32 & cpu=ia32 + languageName: node + linkType: hard + +"@img/sharp-win32-x64@npm:0.33.4": + version: 0.33.4 + resolution: "@img/sharp-win32-x64@npm:0.33.4" + conditions: os=win32 & cpu=x64 + languageName: node + linkType: hard + "@mantine/core@npm:^6.0.10": version: 6.0.10 resolution: "@mantine/core@npm:6.0.10" @@ -670,6 +854,22 @@ __metadata: languageName: node linkType: hard +"@rollup/pluginutils@npm:^5.0.5": + version: 5.1.0 + resolution: "@rollup/pluginutils@npm:5.1.0" + dependencies: + "@types/estree": ^1.0.0 + estree-walker: ^2.0.2 + picomatch: ^2.3.1 + peerDependencies: + rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0 + peerDependenciesMeta: + rollup: + optional: true + checksum: 3cc5a6d91452a6eabbfd1ae79b4dd1f1e809d2eecda6e175deb784e75b0911f47e9ecce73f8dd315d6a8b3f362582c91d3c0f66908b6ced69345b3cbe28f8ce8 + languageName: node + linkType: hard + "@swc/core-darwin-arm64@npm:1.3.30": version: 1.3.30 resolution: "@swc/core-darwin-arm64@npm:1.3.30" @@ -805,6 +1005,13 @@ __metadata: languageName: node linkType: hard +"@types/estree@npm:^1.0.0": + version: 1.0.5 + resolution: "@types/estree@npm:1.0.5" + checksum: dd8b5bed28e6213b7acd0fb665a84e693554d850b0df423ac8076cc3ad5823a6bc26b0251d080bdc545af83179ede51dd3f6fa78cad2c46ed1f29624ddf3e41a + languageName: node + linkType: hard + "@types/geojson@npm:*, @types/geojson@npm:^7946.0.10": version: 7946.0.10 resolution: "@types/geojson@npm:7946.0.10" @@ -1150,6 +1357,15 @@ __metadata: languageName: node linkType: hard +"color-convert@npm:^2.0.1": + version: 2.0.1 + resolution: "color-convert@npm:2.0.1" + dependencies: + color-name: ~1.1.4 + checksum: 79e6bdb9fd479a205c71d89574fccfb22bd9053bd98c6c4d870d65c132e5e904e6034978e55b43d69fcaa7433af2016ee203ce76eeba9cfa554b373e7f7db336 + languageName: node + linkType: hard + "color-name@npm:1.1.3": version: 1.1.3 resolution: "color-name@npm:1.1.3" @@ -1157,6 +1373,23 @@ __metadata: languageName: node linkType: hard +"color-name@npm:^1.0.0, color-name@npm:~1.1.4": + version: 1.1.4 + resolution: "color-name@npm:1.1.4" + checksum: b0445859521eb4021cd0fb0cc1a75cecf67fceecae89b63f62b201cca8d345baf8b952c966862a9d9a2632987d4f6581f0ec8d957dfacece86f0a7919316f610 + languageName: node + linkType: hard + +"color-string@npm:^1.9.0": + version: 1.9.1 + resolution: "color-string@npm:1.9.1" + dependencies: + color-name: ^1.0.0 + simple-swizzle: ^0.2.2 + checksum: c13fe7cff7885f603f49105827d621ce87f4571d78ba28ef4a3f1a104304748f620615e6bf065ecd2145d0d9dad83a3553f52bb25ede7239d18e9f81622f1cc5 + languageName: node + linkType: hard + "color-support@npm:^1.1.3": version: 1.1.3 resolution: "color-support@npm:1.1.3" @@ -1166,6 +1399,16 @@ __metadata: languageName: node linkType: hard +"color@npm:^4.2.3": + version: 4.2.3 + resolution: "color@npm:4.2.3" + dependencies: + color-convert: ^2.0.1 + color-string: ^1.9.0 + checksum: 0579629c02c631b426780038da929cca8e8d80a40158b09811a0112a107c62e10e4aad719843b791b1e658ab4e800558f2e87ca4522c8b32349d497ecb6adeb4 + languageName: node + linkType: hard + "colorette@npm:^2.0.20": version: 2.0.20 resolution: "colorette@npm:2.0.20" @@ -1281,6 +1524,13 @@ __metadata: languageName: node linkType: hard +"detect-libc@npm:^2.0.3": + version: 2.0.3 + resolution: "detect-libc@npm:2.0.3" + checksum: 2ba6a939ae55f189aea996ac67afceb650413c7a34726ee92c40fb0deb2400d57ef94631a8a3f052055eea7efb0f99a9b5e6ce923415daa3e68221f963cfc27d + languageName: node + linkType: hard + "detect-node-es@npm:^1.1.0": version: 1.1.0 resolution: "detect-node-es@npm:1.1.0" @@ -1432,6 +1682,13 @@ __metadata: languageName: node linkType: hard +"estree-walker@npm:^2.0.2": + version: 2.0.2 + resolution: "estree-walker@npm:2.0.2" + checksum: 6151e6f9828abe2259e57f5fd3761335bb0d2ebd76dc1a01048ccee22fabcfef3c0859300f6d83ff0d1927849368775ec5a6d265dde2f6de5a1be1721cd94efc + languageName: node + linkType: hard + "eventemitter3@npm:^5.0.1": version: 5.0.1 resolution: "eventemitter3@npm:5.0.1" @@ -1725,6 +1982,15 @@ __metadata: languageName: node linkType: hard +"imagetools-core@npm:^7.0.0": + version: 7.0.0 + resolution: "imagetools-core@npm:7.0.0" + dependencies: + sharp: ^0.33.1 + checksum: 4484c8cb92dc8367939eb118f0dccb07fc66ed05ddb756236c7d47e7309f8dd53263668b112b18b7b7d8a88371619be6fd2c37fd7d80b521b2a65e5854fef65c + languageName: node + linkType: hard + "import-fresh@npm:^3.2.1": version: 3.3.0 resolution: "import-fresh@npm:3.3.0" @@ -1803,6 +2069,13 @@ __metadata: languageName: node linkType: hard +"is-arrayish@npm:^0.3.1": + version: 0.3.2 + resolution: "is-arrayish@npm:0.3.2" + checksum: 977e64f54d91c8f169b59afcd80ff19227e9f5c791fa28fa2e5bce355cbaf6c2c356711b734656e80c9dd4a854dd7efcf7894402f1031dfc5de5d620775b4d5f + languageName: node + linkType: hard + "is-core-module@npm:^2.9.0": version: 2.11.0 resolution: "is-core-module@npm:2.11.0" @@ -2716,6 +2989,7 @@ __metadata: react-router-dom: ^6.8.0 typescript: ^4.9.3 vite: ^4.0.0 + vite-imagetools: ^7.0.2 languageName: unknown linkType: soft @@ -2851,6 +3125,15 @@ __metadata: languageName: node linkType: hard +"semver@npm:^7.6.0": + version: 7.6.2 + resolution: "semver@npm:7.6.2" + bin: + semver: bin/semver.js + checksum: 40f6a95101e8d854357a644da1b8dd9d93ce786d5c6a77227bc69dbb17bea83d0d1d1d7c4cd5920a6df909f48e8bd8a5909869535007f90278289f2451d0292d + languageName: node + linkType: hard + "set-blocking@npm:^2.0.0": version: 2.0.0 resolution: "set-blocking@npm:2.0.0" @@ -2858,6 +3141,75 @@ __metadata: languageName: node linkType: hard +"sharp@npm:^0.33.1": + version: 0.33.4 + resolution: "sharp@npm:0.33.4" + dependencies: + "@img/sharp-darwin-arm64": 0.33.4 + "@img/sharp-darwin-x64": 0.33.4 + "@img/sharp-libvips-darwin-arm64": 1.0.2 + "@img/sharp-libvips-darwin-x64": 1.0.2 + "@img/sharp-libvips-linux-arm": 1.0.2 + "@img/sharp-libvips-linux-arm64": 1.0.2 + "@img/sharp-libvips-linux-s390x": 1.0.2 + "@img/sharp-libvips-linux-x64": 1.0.2 + "@img/sharp-libvips-linuxmusl-arm64": 1.0.2 + "@img/sharp-libvips-linuxmusl-x64": 1.0.2 + "@img/sharp-linux-arm": 0.33.4 + "@img/sharp-linux-arm64": 0.33.4 + "@img/sharp-linux-s390x": 0.33.4 + "@img/sharp-linux-x64": 0.33.4 + "@img/sharp-linuxmusl-arm64": 0.33.4 + "@img/sharp-linuxmusl-x64": 0.33.4 + "@img/sharp-wasm32": 0.33.4 + "@img/sharp-win32-ia32": 0.33.4 + "@img/sharp-win32-x64": 0.33.4 + color: ^4.2.3 + detect-libc: ^2.0.3 + semver: ^7.6.0 + dependenciesMeta: + "@img/sharp-darwin-arm64": + optional: true + "@img/sharp-darwin-x64": + optional: true + "@img/sharp-libvips-darwin-arm64": + optional: true + "@img/sharp-libvips-darwin-x64": + optional: true + "@img/sharp-libvips-linux-arm": + optional: true + "@img/sharp-libvips-linux-arm64": + optional: true + "@img/sharp-libvips-linux-s390x": + optional: true + "@img/sharp-libvips-linux-x64": + optional: true + "@img/sharp-libvips-linuxmusl-arm64": + optional: true + "@img/sharp-libvips-linuxmusl-x64": + optional: true + "@img/sharp-linux-arm": + optional: true + "@img/sharp-linux-arm64": + optional: true + "@img/sharp-linux-s390x": + optional: true + "@img/sharp-linux-x64": + optional: true + "@img/sharp-linuxmusl-arm64": + optional: true + "@img/sharp-linuxmusl-x64": + optional: true + "@img/sharp-wasm32": + optional: true + "@img/sharp-win32-ia32": + optional: true + "@img/sharp-win32-x64": + optional: true + checksum: f5f91ce2a657128db9b45bc88781b1df185f91dffb16af12e76dc367b170a88353f8b0c406a93c7f110d9734b33a3c8b2d3faa6efb6508cdb5f382ffa36fdad0 + languageName: node + linkType: hard + "shebang-command@npm:^2.0.0": version: 2.0.0 resolution: "shebang-command@npm:2.0.0" @@ -2888,6 +3240,15 @@ __metadata: languageName: node linkType: hard +"simple-swizzle@npm:^0.2.2": + version: 0.2.2 + resolution: "simple-swizzle@npm:0.2.2" + dependencies: + is-arrayish: ^0.3.1 + checksum: a7f3f2ab5c76c4472d5c578df892e857323e452d9f392e1b5cf74b74db66e6294a1e1b8b390b519fa1b96b5b613f2a37db6cffef52c3f1f8f3c5ea64eb2d54c0 + languageName: node + linkType: hard + "slice-ansi@npm:^5.0.0": version: 5.0.0 resolution: "slice-ansi@npm:5.0.0" @@ -3105,6 +3466,13 @@ __metadata: languageName: node linkType: hard +"tslib@npm:^2.4.0": + version: 2.6.3 + resolution: "tslib@npm:2.6.3" + checksum: 74fce0e100f1ebd95b8995fbbd0e6c91bdd8f4c35c00d4da62e285a3363aaa534de40a80db30ecfd388ed7c313c42d930ee0eaf108e8114214b180eec3dbe6f5 + languageName: node + linkType: hard + "typescript@npm:^4.9.3": version: 4.9.4 resolution: "typescript@npm:4.9.4" @@ -3216,6 +3584,16 @@ __metadata: languageName: node linkType: hard +"vite-imagetools@npm:^7.0.2": + version: 7.0.2 + resolution: "vite-imagetools@npm:7.0.2" + dependencies: + "@rollup/pluginutils": ^5.0.5 + imagetools-core: ^7.0.0 + checksum: 94eb4fc488a9e258b0ae29939dcdc7e7f4c14200af174a3fcdbe526d4238d8124431f021cb728042944c3eb938d252b8fd7ac7754b9767e4197f9d086821cbfe + languageName: node + linkType: hard + "vite@npm:^4.0.0": version: 4.0.4 resolution: "vite@npm:4.0.4"