From 127204f3663653f56342831cd047f066c3ba6cac Mon Sep 17 00:00:00 2001 From: Tatsunori Uchino Date: Sun, 19 Feb 2023 22:18:07 +0900 Subject: [PATCH 1/7] Add basic support for WebP/AVIF in `@docusaurus/lqip-loader` `sharp` does support both. Generated lqips for WebP/AVIF have the same formats as inputs, but different formats may be better. (needs improvement if so) --- packages/lqip-loader/src/lqip.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/lqip-loader/src/lqip.ts b/packages/lqip-loader/src/lqip.ts index 929e53ba6a9e..40387cb51b04 100644 --- a/packages/lqip-loader/src/lqip.ts +++ b/packages/lqip-loader/src/lqip.ts @@ -18,6 +18,8 @@ const SUPPORTED_MIMES: {[ext: string]: string} = { jpeg: 'image/jpeg', jpg: 'image/jpeg', png: 'image/png', + webp: 'image/webp', + avif: 'image/avif', }; /** From d2c9d82923e70573fa7934f130e0ce16787f91c6 Mon Sep 17 00:00:00 2001 From: Tatsunori Uchino Date: Mon, 20 Feb 2023 00:35:11 +0900 Subject: [PATCH 2/7] Add test assets for `@docusaurus/lqip-loader` - PNG is from `website/static/img` - Convert it to WebP/AVIF using Squoosh with max effort - AVIF: use YUV444; quality = 30 - WebP: use lossless --- .cspell.json | 2 ++ .../src/__tests__/__fixtures__/docusaurus.avif | Bin 0 -> 2674 bytes .../src/__tests__/__fixtures__/docusaurus.png | Bin 0 -> 5142 bytes .../src/__tests__/__fixtures__/docusaurus.webp | Bin 0 -> 3836 bytes 4 files changed, 2 insertions(+) create mode 100644 packages/lqip-loader/src/__tests__/__fixtures__/docusaurus.avif create mode 100644 packages/lqip-loader/src/__tests__/__fixtures__/docusaurus.png create mode 100644 packages/lqip-loader/src/__tests__/__fixtures__/docusaurus.webp diff --git a/.cspell.json b/.cspell.json index a98ce80bb5f3..525114e723ad 100644 --- a/.cspell.json +++ b/.cspell.json @@ -31,6 +31,8 @@ "website/docusaurus.config.localized.json", "*.xyz", "*.docx", + "*.webp", + "*.avif", "versioned_docs", "*.min.*", "jest/vendor" diff --git a/packages/lqip-loader/src/__tests__/__fixtures__/docusaurus.avif b/packages/lqip-loader/src/__tests__/__fixtures__/docusaurus.avif new file mode 100644 index 0000000000000000000000000000000000000000..9be208e0b1158833af93dff4098c9e110d16d531 GIT binary patch literal 2674 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 literal 0 HcmV?d00001 diff --git a/packages/lqip-loader/src/__tests__/__fixtures__/docusaurus.png b/packages/lqip-loader/src/__tests__/__fixtures__/docusaurus.png new file mode 100644 index 0000000000000000000000000000000000000000..f458149e3c8f53335f28fbc162ae67f55575c881 GIT binary patch literal 5142 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 F{0H{b<4^zq literal 0 HcmV?d00001 diff --git a/packages/lqip-loader/src/__tests__/__fixtures__/docusaurus.webp b/packages/lqip-loader/src/__tests__/__fixtures__/docusaurus.webp new file mode 100644 index 0000000000000000000000000000000000000000..f4cb121e0807413e38b3fd3b9909e6134e5d9025 GIT binary patch literal 3836 zcmVL0Nk&HW4gdgGMM6+kP&iEJ4gdfz$G|ZVHG?C!Z6ry`|9@SZE8RVFjfe^0 z4|Qf&M3yNY>UKX`I?~on?7w2(VsopyxO1}(UbT*IRniBr8CsTFrMeeh>~idUC+Y)P zOIshvx=}}txUW?Q*0t$LElejAN8(1gsS*Gu#(^_0b2XJ+VSFYg%?000b0XZvkC+P3Xz+qP|^ z+23s2wr&47V%x@%24~4!^Ph9g9ddRXxJ%5)zAQC@jpa5>xd*~VV6 z?(Xgoxx2f&MDFhH7P`B;ySwZ6e$R);grr1}{t=r~!1h21JH%T6k}-D&n-W_Ov_J_P z@#n;r(*|G0Sa1WlJ;&(z(h$`uc|`-(R!T4uZ3!4? zSQ@vgz8N!HEq!!b0tPbbq;`Yp6S0*r^xFpdQ=d)DZ3);1+Ms3a1I!*R(>AvyU>7{z zIJ2ZUva+a}4o4XDM)|cHdXIKBX}VYB=!wk9bvsA?OLr zl+usv?Q|61J)EQae}eB-K)^!fN@CO-$s|8CB1TSs|HQ5 zit<{|d8xq@^z&RkY}CN8I5XSW)HYUyI7v)BQmO$D4sd?)c_`zX`f<+r1jarqA(N<7E*#m;%M?ppIOqH=ls8pxqQMHy z=Wf!v@V1d%qg10ih9Q^i$aznn&(1(Y+Z17PEncfnOf`LfwYN6h@U7|lYy3&)@=hDS zIPa|fV?j|7^nwYDeas9|=yI$kJvqCo+@Nb4x-EU;nsitCFxcw4ITdASY|{?Z8fa(N zYb~Hw!4WFgnza}!#~|yQI&A&p2HDzkhLzV`c~PH`+SQmem%Pl59Fbn%pUf>UW#QI# zte6j0YOm|iRpkpurt8X=cbMkTY3FBk)7_Rn47|N#xWv3+6ANDJru>O((%bu^GZ@B1 zGj&!QuIlmk&3l>^k2Oi4~INL$;GwZAX-@=U?gos#cY z<&9qiXO?7Sd71N%mZE1e_gF0QdhJJsWF2wYd+%Ll?y*qwaydD<{G=rUb=5+~n}jcP ziZ=C&bB{@k&PvIx$k^PHeRL@A`ag^US_pG^(N5C%IP_9@NJQJoK{BGG%Pl_7+P)!Wg@M13%`xqgo5cR z${=;!`2fJeLo#-DDH-kvcEZJQ4!eUX74f>-vJDNtz>*RdXE!nL_=N<7-99l509d(> zD0+LKV7dd`|G~UDE$-cw8=_k4!-wjtUKl6W9gffOp_V$tK)Dw1Q49c9t|Q8;Uuf&R zBl#Xa)ZQcrsugYZhEgn)55WvY+S7Q*LY4^fL}X}&R#0_>1?VE-qmG51c}8AQHU!X$ zjNRj*s0MuNMcdqK_0&FMOTzkVzhSYMWsS6nnvw>1I)R$S_Gbxu&?WR|SvO&J zS#sGN%}(rlgh4G78i4scCNfbG+R{>j6i>M)k%mkZFxM$NF^gXYup z_wxyhT|_*Tb;7Ck{ecG!v-$=6j0I4R1;l8*h4Mkj&$Y1Yx9 z2Pw$)ulke0d%?lXl6P|nc6;Ht`WNu9CVg`Y7RK%u2pMgVdwHg^{m)8j>a~1Dg`y0- zl45hLvw!1q;PNJ)OX%`HpC`nZ$F{GJV9)DWR{B8QegOs^w`U&@OW1bY-bHBcGSs*X z9@TWDWX5?yaCHRx1j0usgd~Cepg6Bl=8jn56H{4|?XU`M6q6e=2cf{O6_h=@gp(h`{vR?(bl3MolyUO@=!sG*sS8kcn>B&@_k^Rz){ z{Sfq0X5Uc6l9Mpykn#!Yw4xUTA>7FpEn=DuJ7_j3 z6Zq>9$l=cg(1PLX3jE-Z00l zjqysVjF=1=QcS>?dwoH{lK8?A(m2_xA{h~x+&#X^HV!#bokKRlKczSLO`HpCEzwCb z=#W4pL@{qJ&_tTxE-w+0B=A4+bfmE60$trsl>L#B)RR3Xde&TEbKydgUPq85MJa8` z3KveyOiPuQi3k!nOzB<5KRPn>`kSg>!x2o1_xh>mbbqgaB^Hu`=EI0K2d=66l7Z zNDF7II>LH}$S&g8=>^=uk%1#iW&(H+rEJm&7-1&^uwW3_?O@1|%!~xlAwN5ueFS6o zD-%}?h~7|IT{*3fcr*aUSY`cNQ}1QR;^?b~cyoSVILw43qn;osr7I*}U+6+_FXZiU z36k3jAwA$>@$I+3J_J46Z~Qrb6F)f2yNd&lSd5clrv7rO0T1_anDhg-Ah)Ll_A9PW zQ~3yiNZ()^*QSH^ze)9-0w9z>j2YM3iv#HwY%#HaL!hKb;5RL@3G*glI%Q>&@+uL@ z{Y@i(q5AixwgCJ8C`Xj@y9mu)h8mZ_!&I~-j5$9;wcSV1t}n2I6G&6D=zRnUPrA05 zS=v4#cZV-VYZropj)>9O-R}bGh!lsK)FjoZ!tNoh3eMRIub5h?(^408ven&>w}O|= zPNDIAAaPHqyiSy4)CoplQU+tNWTV!7;v~Ih;=ZRJkun&Cw5_P&f$tX(_{`?5VCr#? zCH4_tL~9+SCea#)ew*8Dga|!_7}ZJh*X-&NQj=M2Z@rp z_#hEd&kw~c6k19h{Q^i%!R=ICV@HL?eGF26rK$2?F$SWJsAv$N2s~Lp?Lv(94-6=4ETF9vjHv-YN_DFU z2sxWV2tp)83u6nf26_J*LI5?pNtoggOB=0!g?RbDCfb-*hJxEriXZ6&RH76v212`_ z$?(6n-ZRkUg%K%r1M4N9RBk;HY3#7xu*;)+XBL! zWxpg)P77oD8LW86jU!{VaiAp>S6f3!^C<`@8A%zbmvM`Z2!s1agWfQpV99Fnh0z0! zfl~HQ5=srw6S%0p1=|;jt1Ga%^Y*y}l=vw#gHxZg*Ht%Gmx-km?FC$EUL~-enUs)v z*^HRzz}%+ljJA!U9f&7>(hTgPzq~!JU>Kq&(A=~iVQweNh1o;Vd11ALd83LJ0aU*~ z1OrJOf%-oCKO(xRlY8RsZNa9myjFiY{m$RfStiYzVm`a41#lyb Date: Mon, 20 Feb 2023 00:36:59 +0900 Subject: [PATCH 3/7] Add tests for signatures of PNG & WebP & AVIF --- .../lqip-loader/src/__tests__/lqip.test.ts | 44 ++++++++++++++++--- 1 file changed, 38 insertions(+), 6 deletions(-) diff --git a/packages/lqip-loader/src/__tests__/lqip.test.ts b/packages/lqip-loader/src/__tests__/lqip.test.ts index a433f0f0459c..068f382d693e 100644 --- a/packages/lqip-loader/src/__tests__/lqip.test.ts +++ b/packages/lqip-loader/src/__tests__/lqip.test.ts @@ -8,8 +8,10 @@ import path from 'path'; import {base64} from '../lqip'; -const imgPath = path.join(__dirname, '__fixtures__', 'endi.jpg'); -const invalidPath = path.join(__dirname, '__fixtures__', 'docusaurus.svg'); +const resolveFixturePath = (name: string) => + path.join(__dirname, '__fixtures__', name); + +const invalidPath = resolveFixturePath('docusaurus.svg'); describe('base64', () => { it('rejects unknown or unsupported file format', async () => { @@ -18,8 +20,38 @@ describe('base64', () => { ); }); - it('generates a valid base64', async () => { - const expectedBase64 = 'data:image/jpeg;base64,/9j/2wBDA'; - await expect(base64(imgPath)).resolves.toContain(expectedBase64); - }); + it.each([ + ['endi.jpg', 'data:image/jpeg;base64,/9j/2wBDA'], + // PNG's magic number (common to all PNGs) + ['docusaurus.png', 'data:image/png;base64,iVBORw0KGgoA'], + [ + 'docusaurus.avif', + // cspell:disable-next-line + // AVIF's signature: \0\0\0\x1cftypavif\0\0\0\0avifmif1miaf + 'data:image/avif;base64,AAAAHGZ0eXBhdmlmAAAAAGF2aWZtaWYxbWlhZ', + ], + ] as [string, string][])( + 'generates a valid base64 for %s', + async (imgName, expectedBase64) => { + await expect(base64(resolveFixturePath(imgName))).resolves.toContain( + expectedBase64, + ); + }, + ); + + it.each([ + [ + 'docusaurus.webp', + // WebP's magic number; expects size is less than 64kiB + // cspell:disable-next-line + /^data:image\/webp;base64,UklGR...AABXRUJQ/, + ], + ] as [string, RegExp][])( + 'generates a valid base64 for %s (using regexp)', + async (imgName, expectedBase64) => { + await expect(base64(resolveFixturePath(imgName))).resolves.toMatch( + expectedBase64, + ); + }, + ); }); From 9011d3ba06b02253c57c4559e64691ddfb9e2634 Mon Sep 17 00:00:00 2001 From: Tatsunori Uchino Date: Thu, 23 Feb 2023 17:56:45 +0900 Subject: [PATCH 4/7] Add image type definition for lqip-loader --- packages/lqip-loader/src/index.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/lqip-loader/src/index.ts b/packages/lqip-loader/src/index.ts index 66d828fffb80..b8b9c373cd81 100644 --- a/packages/lqip-loader/src/index.ts +++ b/packages/lqip-loader/src/index.ts @@ -13,6 +13,11 @@ type Options = { palette: boolean; }; +export type ImageWithLqip = { + preSrc: string; + src: Source; +}; + export default async function lqipLoader( this: LoaderContext, contentBuffer: Buffer, From 1f3d85e41ac369781dafd90f7566611e669dd34a Mon Sep 17 00:00:00 2001 From: Tatsunori Uchino Date: Sun, 5 Mar 2023 17:01:03 +0900 Subject: [PATCH 5/7] Improve image type definition --- packages/docusaurus-plugin-ideal-image/src/deps.d.ts | 2 +- .../src/plugin-ideal-image.d.ts | 8 ++++++-- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/docusaurus-plugin-ideal-image/src/deps.d.ts b/packages/docusaurus-plugin-ideal-image/src/deps.d.ts index f5a6da75b378..deb55991a5c0 100644 --- a/packages/docusaurus-plugin-ideal-image/src/deps.d.ts +++ b/packages/docusaurus-plugin-ideal-image/src/deps.d.ts @@ -37,7 +37,7 @@ declare module '@endiliey/react-ideal-image' { width: number; src?: string; size?: number; - format?: 'webp' | 'jpeg' | 'png' | 'gif'; + format?: 'webp' | 'jpeg' | 'png' | 'gif' | 'avif'; }; type ThemeKey = 'placeholder' | 'img' | 'icon' | 'noscript'; diff --git a/packages/docusaurus-plugin-ideal-image/src/plugin-ideal-image.d.ts b/packages/docusaurus-plugin-ideal-image/src/plugin-ideal-image.d.ts index 0c151f88cbf9..89961bc1afae 100644 --- a/packages/docusaurus-plugin-ideal-image/src/plugin-ideal-image.d.ts +++ b/packages/docusaurus-plugin-ideal-image/src/plugin-ideal-image.d.ts @@ -51,12 +51,13 @@ declare module '@docusaurus/plugin-ideal-image' { declare module '@theme/IdealImage' { import type {ComponentProps} from 'react'; + import type {ImageWithLqip} from '@docusaurus/lqip-loader'; export type SrcType = { width: number; path?: string; size?: number; - format?: 'webp' | 'jpeg' | 'png' | 'gif'; + format?: 'webp' | 'jpeg' | 'png' | 'gif' | 'avif'; }; export type SrcImage = { @@ -67,8 +68,11 @@ declare module '@theme/IdealImage' { images: SrcType[]; }; + export type IdealImageEnabledSrc = ImageWithLqip; + export type IdealImageSrc = IdealImageEnabledSrc | {default: string} | string; + export interface Props extends ComponentProps<'img'> { - readonly img: {default: string} | {src: SrcImage; preSrc: string} | string; + readonly img: IdealImageSrc; } export default function IdealImage(props: Props): JSX.Element; } From 6b06164c4f0c6ffd6149431f47a343d6ef9e9be1 Mon Sep 17 00:00:00 2001 From: Tatsunori Uchino Date: Sun, 5 Mar 2023 17:18:35 +0900 Subject: [PATCH 6/7] Enable responsive-loader for WebP/AVIF --- packages/docusaurus-plugin-ideal-image/src/index.ts | 7 ++++++- .../src/plugin-ideal-image.d.ts | 6 ++++++ 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/packages/docusaurus-plugin-ideal-image/src/index.ts b/packages/docusaurus-plugin-ideal-image/src/index.ts index 4b8862171859..56a8a614991c 100644 --- a/packages/docusaurus-plugin-ideal-image/src/index.ts +++ b/packages/docusaurus-plugin-ideal-image/src/index.ts @@ -46,6 +46,11 @@ export default function pluginIdealImage( return {}; } + const rulesRegex = new RegExp( + `\\.(?:png|jpe?g${options.enableWebpAvif ? '|webp|avif' : ''})$`, + 'i', + ); + return { mergeStrategy: { 'module.rules': 'prepend', @@ -53,7 +58,7 @@ export default function pluginIdealImage( module: { rules: [ { - test: /\.(?:png|jpe?g)$/i, + test: rulesRegex, use: [ require.resolve('@docusaurus/lqip-loader'), { diff --git a/packages/docusaurus-plugin-ideal-image/src/plugin-ideal-image.d.ts b/packages/docusaurus-plugin-ideal-image/src/plugin-ideal-image.d.ts index 89961bc1afae..b7b63a43f918 100644 --- a/packages/docusaurus-plugin-ideal-image/src/plugin-ideal-image.d.ts +++ b/packages/docusaurus-plugin-ideal-image/src/plugin-ideal-image.d.ts @@ -46,6 +46,12 @@ declare module '@docusaurus/plugin-ideal-image' { * Tip: use network throttling in your browser to simulate slow networks. */ disableInDev?: boolean; + /** + * You can enable this plugin for WebP/AVIF images + * by setting this to `true`. + * Note: the default is `false` to keep backward compatibility. + */ + enableWebpAvif?: boolean; }; } From b1ef5b9821f85c7da6ff6ec49ef44763cc60817d Mon Sep 17 00:00:00 2001 From: Tatsunori Uchino Date: Fri, 21 Apr 2023 21:42:05 +0900 Subject: [PATCH 7/7] Add test case in dogfooding --- .../_dogfooding/_docs tests/tests/img-tests.mdx | 14 ++++++++++++++ .../_docs tests/tests/img/docusaurus.avif | Bin 0 -> 2674 bytes .../_docs tests/tests/img/docusaurus.webp | Bin 0 -> 3836 bytes website/docusaurus.config.js | 2 ++ 4 files changed, 16 insertions(+) create mode 100644 website/_dogfooding/_docs tests/tests/img/docusaurus.avif create mode 100644 website/_dogfooding/_docs tests/tests/img/docusaurus.webp diff --git a/website/_dogfooding/_docs tests/tests/img-tests.mdx b/website/_dogfooding/_docs tests/tests/img-tests.mdx index bddaf876340e..df7d9ee0221e 100644 --- a/website/_dogfooding/_docs tests/tests/img-tests.mdx +++ b/website/_dogfooding/_docs tests/tests/img-tests.mdx @@ -10,6 +10,10 @@ import docusaurusImport from '@site/static/img/docusaurus.png'; export const docusaurusRequire = require('@site/static/img/docusaurus.png'); +import docusaurusWebPImport from './img/docusaurus.webp'; + +import docusaurusAVIFImport from './img/docusaurus.avif'; + ![URL encoded image](./img/oss_logo%20%282%29.png) ## Regular images @@ -20,6 +24,16 @@ export const docusaurusRequire = require('@site/static/img/docusaurus.png'); ## Ideal images +PNG + + +WebP + + + +AVIF + + diff --git a/website/_dogfooding/_docs tests/tests/img/docusaurus.avif b/website/_dogfooding/_docs tests/tests/img/docusaurus.avif new file mode 100644 index 0000000000000000000000000000000000000000..9be208e0b1158833af93dff4098c9e110d16d531 GIT binary patch literal 2674 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 literal 0 HcmV?d00001 diff --git a/website/_dogfooding/_docs tests/tests/img/docusaurus.webp b/website/_dogfooding/_docs tests/tests/img/docusaurus.webp new file mode 100644 index 0000000000000000000000000000000000000000..f4cb121e0807413e38b3fd3b9909e6134e5d9025 GIT binary patch literal 3836 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