feat(ideal-image): allow translating status messages (#6173)

* feat(ideal-image): allow translating ideal image messages

* Add source notice

* Add note

* Revert update translation changes

* Actually return default translations

* Fixes

* Update index.ts

packages/docusaurus-plugin-ideal-image/package.json

@@ -26,12 +26,14 @@
     "@docusaurus/utils-validation": "2.0.0-beta.14",
     "@docusaurus/responsive-loader": "1.5.0",
     "@endiliey/react-ideal-image": "^0.0.11",
+    "@docusaurus/theme-translations": "2.0.0-beta.14",
     "react-waypoint": "^10.1.0",
     "sharp": "^0.29.1",
     "tslib": "^2.3.1",
     "webpack": "^5.61.0"
   },
   "devDependencies": {
+    "@docusaurus/module-type-aliases": "2.0.0-beta.14",
     "@docusaurus/types": "2.0.0-beta.14",
     "fs-extra": "^10.0.0"
   },

packages/docusaurus-plugin-ideal-image/src/deps.d.ts

@@ -5,12 +5,23 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+/// <reference types="@docusaurus/module-type-aliases" />
+
 /**
  * @see https://github.com/endiliey/react-ideal-image/blob/master/index.d.ts
+ * Note: the original type definition is WRONG. getIcon & getMessage receive full state object.
  */
 declare module '@endiliey/react-ideal-image' {
   export type LoadingState = 'initial' | 'loading' | 'loaded' | 'error';
 
+  export type State = {
+    pickedSrc: {
+      size: number;
+    };
+    loadInfo: 404 | null;
+    loadState: LoadingState;
+  };
+
   export type IconKey =
     | 'load'
     | 'loading'
@@ -32,12 +43,12 @@ declare module '@endiliey/react-ideal-image' {
     /**
      * This function decides what icon to show based on the current state of the component.
      */
-    getIcon?: (state: LoadingState) => IconKey;
+    getIcon?: (state: State) => IconKey;
     /**
      * This function decides what message to show based on the icon (returned from getIcon prop) and
      * the current state of the component.
      */
-    getMessage?: (icon: IconKey, state: LoadingState) => string;
+    getMessage?: (icon: IconKey, state: State) => string;
     /**
      * This function is called as soon as the component enters the viewport and is used to generate urls
      * based on width and format if props.srcSet doesn't provide src field.

packages/docusaurus-plugin-ideal-image/src/index.ts

@@ -14,13 +14,18 @@ import type {
 import type {PluginOptions} from '@docusaurus/plugin-ideal-image';
 import type {Configuration} from 'webpack';
 import {Joi} from '@docusaurus/utils-validation';
+import {readDefaultCodeTranslationMessages} from '@docusaurus/theme-translations';
 
 import path from 'path';
 
 export default function pluginIdealImage(
-  _context: LoadContext,
+  context: LoadContext,
   options: PluginOptions,
 ): Plugin<void> {
+  const {
+    i18n: {currentLocale},
+  } = context;
+
   return {
     name: 'docusaurus-plugin-ideal-image',
 
@@ -32,6 +37,13 @@ export default function pluginIdealImage(
       return path.resolve(__dirname, '../src/theme');
     },
 
+    getDefaultCodeTranslationMessages() {
+      return readDefaultCodeTranslationMessages({
+        locale: currentLocale,
+        name: 'plugin-ideal-image',
+      });
+    },
+
     configureWebpack(_config: Configuration, isServer: boolean) {
       const {disableInDev, ...loaderOptions} = options;
       if (disableInDev && process.env.NODE_ENV !== 'production') {

packages/docusaurus-plugin-ideal-image/src/theme/IdealImage/index.tsx

@@ -6,10 +6,81 @@
  */
 
 import React from 'react';
-import ReactIdealImage from '@endiliey/react-ideal-image';
+import ReactIdealImage, {
+  type IconKey,
+  type State,
+} from '@endiliey/react-ideal-image';
+import {translate} from '@docusaurus/Translate';
 
 import type {Props} from '@theme/IdealImage';
 
+// Adopted from https://github.com/endiliey/react-ideal-image/blob/master/src/components/helpers.js#L59-L65
+const bytesToSize = (bytes: number) => {
+  const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
+  if (bytes === 0) {
+    return 'n/a';
+  }
+  const scale = Math.floor(Math.log(bytes) / Math.log(1024));
+  if (scale === 0) {
+    return `${bytes} ${sizes[scale]}`;
+  }
+  return `${(bytes / 1024 ** scale).toFixed(1)} ${sizes[scale]}`;
+};
+
+// Adopted from https://github.com/endiliey/react-ideal-image/blob/master/src/components/IdealImage/index.js#L43-L75
+const getMessage = (icon: IconKey, state: State) => {
+  switch (icon) {
+    case 'noicon':
+    case 'loaded':
+      return null;
+    case 'loading':
+      return translate({
+        id: 'theme.IdealImageMessage.loading',
+        message: 'Loading...',
+        description: 'When the full-scale image is loading',
+      });
+    case 'load': {
+      // we can show `alt` here
+      const {pickedSrc} = state;
+      const {size} = pickedSrc;
+      const sizeMessage = size ? ` (${bytesToSize(size)})` : '';
+      return translate(
+        {
+          id: 'theme.IdealImageMessage.load',
+          message: 'Click to load{sizeMessage}',
+          description:
+            'To prompt users to load the full image. sizeMessage is a parenthesized size figure.',
+        },
+        {sizeMessage},
+      );
+    }
+    case 'offline':
+      return translate({
+        id: 'theme.IdealImageMessage.offline',
+        message: 'Your browser is offline. Image not loaded',
+        description: 'When the user is viewing an offline document',
+      });
+    case 'error': {
+      const {loadInfo} = state;
+      if (loadInfo === 404) {
+        return translate({
+          id: 'theme.IdealImageMessage.404error',
+          message: '404. Image not found',
+          description: 'When the image is not found',
+        });
+      } else {
+        return translate({
+          id: 'theme.IdealImageMessage.error',
+          message: 'Error. Click to reload',
+          description: 'When the image fails to load for unknown error',
+        });
+      }
+    }
+    default:
+      throw new Error(`Wrong icon: ${icon}`);
+  }
+};
+
 function IdealImage(props: Props): JSX.Element {
   const {alt, className, img} = props;
 
@@ -38,6 +109,7 @@ function IdealImage(props: Props): JSX.Element {
         ...image,
         src: image.path,
       }))}
+      getMessage={getMessage}
     />
   );
 }

packages/docusaurus-theme-translations/locales/ar/plugin-ideal-image.json

@@ -0,0 +1,7 @@
+{
+  "theme.IdealImageMessage.404error": "404. Image not found",
+  "theme.IdealImageMessage.error": "Error. Click to reload",
+  "theme.IdealImageMessage.load": "Click to load{sizeMessage}",
+  "theme.IdealImageMessage.loading": "Loading...",
+  "theme.IdealImageMessage.offline": "Your browser is offline. Image not loaded"
+}

packages/docusaurus-theme-translations/locales/base/plugin-ideal-image.json

@@ -0,0 +1,12 @@
+{
+  "theme.IdealImageMessage.404error": "404. Image not found",
+  "theme.IdealImageMessage.404error___DESCRIPTION": "When the image is not found",
+  "theme.IdealImageMessage.error": "Error. Click to reload",
+  "theme.IdealImageMessage.error___DESCRIPTION": "When the image fails to load for unknown error",
+  "theme.IdealImageMessage.load": "Click to load{sizeMessage}",
+  "theme.IdealImageMessage.load___DESCRIPTION": "To prompt users to load the full image. sizeMessage is a parenthesized size figure.",
+  "theme.IdealImageMessage.loading": "Loading...",
+  "theme.IdealImageMessage.loading___DESCRIPTION": "When the full-scale image is loading",
+  "theme.IdealImageMessage.offline": "Your browser is offline. Image not loaded",
+  "theme.IdealImageMessage.offline___DESCRIPTION": "When the user is viewing an offline document"
+}

packages/docusaurus-theme-translations/locales/bn/plugin-ideal-image.json

@@ -0,0 +1,7 @@
+{
+  "theme.IdealImageMessage.404error": "404. Image not found",
+  "theme.IdealImageMessage.error": "Error. Click to reload",
+  "theme.IdealImageMessage.load": "Click to load{sizeMessage}",
+  "theme.IdealImageMessage.loading": "Loading...",
+  "theme.IdealImageMessage.offline": "Your browser is offline. Image not loaded"
+}

packages/docusaurus-theme-translations/locales/cs/plugin-ideal-image.json

@@ -0,0 +1,7 @@
+{
+  "theme.IdealImageMessage.404error": "404. Image not found",
+  "theme.IdealImageMessage.error": "Error. Click to reload",
+  "theme.IdealImageMessage.load": "Click to load{sizeMessage}",
+  "theme.IdealImageMessage.loading": "Loading...",
+  "theme.IdealImageMessage.offline": "Your browser is offline. Image not loaded"
+}

packages/docusaurus-theme-translations/locales/da/plugin-ideal-image.json

@@ -0,0 +1,7 @@
+{
+  "theme.IdealImageMessage.404error": "404. Image not found",
+  "theme.IdealImageMessage.error": "Error. Click to reload",
+  "theme.IdealImageMessage.load": "Click to load{sizeMessage}",
+  "theme.IdealImageMessage.loading": "Loading...",
+  "theme.IdealImageMessage.offline": "Your browser is offline. Image not loaded"
+}

packages/docusaurus-theme-translations/locales/de/plugin-ideal-image.json

@@ -0,0 +1,7 @@
+{
+  "theme.IdealImageMessage.404error": "404. Image not found",
+  "theme.IdealImageMessage.error": "Error. Click to reload",
+  "theme.IdealImageMessage.load": "Click to load{sizeMessage}",
+  "theme.IdealImageMessage.loading": "Loading...",
+  "theme.IdealImageMessage.offline": "Your browser is offline. Image not loaded"
+}

packages/docusaurus-theme-translations/locales/es/plugin-ideal-image.json

@@ -0,0 +1,7 @@
+{
+  "theme.IdealImageMessage.404error": "404. Image not found",
+  "theme.IdealImageMessage.error": "Error. Click to reload",
+  "theme.IdealImageMessage.load": "Click to load{sizeMessage}",
+  "theme.IdealImageMessage.loading": "Loading...",
+  "theme.IdealImageMessage.offline": "Your browser is offline. Image not loaded"
+}

packages/docusaurus-theme-translations/locales/fa/plugin-ideal-image.json

@@ -0,0 +1,7 @@
+{
+  "theme.IdealImageMessage.404error": "404. Image not found",
+  "theme.IdealImageMessage.error": "Error. Click to reload",
+  "theme.IdealImageMessage.load": "Click to load{sizeMessage}",
+  "theme.IdealImageMessage.loading": "Loading...",
+  "theme.IdealImageMessage.offline": "Your browser is offline. Image not loaded"
+}

packages/docusaurus-theme-translations/locales/fil/plugin-ideal-image.json

@@ -0,0 +1,7 @@
+{
+  "theme.IdealImageMessage.404error": "404. Image not found",
+  "theme.IdealImageMessage.error": "Error. Click to reload",
+  "theme.IdealImageMessage.load": "Click to load{sizeMessage}",
+  "theme.IdealImageMessage.loading": "Loading...",
+  "theme.IdealImageMessage.offline": "Your browser is offline. Image not loaded"
+}

packages/docusaurus-theme-translations/locales/fr/plugin-ideal-image.json

@@ -0,0 +1,7 @@
+{
+  "theme.IdealImageMessage.404error": "404. Image not found",
+  "theme.IdealImageMessage.error": "Error. Click to reload",
+  "theme.IdealImageMessage.load": "Click to load{sizeMessage}",
+  "theme.IdealImageMessage.loading": "Loading...",
+  "theme.IdealImageMessage.offline": "Your browser is offline. Image not loaded"
+}

packages/docusaurus-theme-translations/locales/he/plugin-ideal-image.json

@@ -0,0 +1,7 @@
+{
+  "theme.IdealImageMessage.404error": "404. Image not found",
+  "theme.IdealImageMessage.error": "Error. Click to reload",
+  "theme.IdealImageMessage.load": "Click to load{sizeMessage}",
+  "theme.IdealImageMessage.loading": "Loading...",
+  "theme.IdealImageMessage.offline": "Your browser is offline. Image not loaded"
+}

packages/docusaurus-theme-translations/locales/hi/plugin-ideal-image.json

@@ -0,0 +1,7 @@
+{
+  "theme.IdealImageMessage.404error": "404. Image not found",
+  "theme.IdealImageMessage.error": "Error. Click to reload",
+  "theme.IdealImageMessage.load": "Click to load{sizeMessage}",
+  "theme.IdealImageMessage.loading": "Loading...",
+  "theme.IdealImageMessage.offline": "Your browser is offline. Image not loaded"
+}

packages/docusaurus-theme-translations/locales/it/plugin-ideal-image.json

@@ -0,0 +1,7 @@
+{
+  "theme.IdealImageMessage.404error": "404. Image not found",
+  "theme.IdealImageMessage.error": "Error. Click to reload",
+  "theme.IdealImageMessage.load": "Click to load{sizeMessage}",
+  "theme.IdealImageMessage.loading": "Loading...",
+  "theme.IdealImageMessage.offline": "Your browser is offline. Image not loaded"
+}

packages/docusaurus-theme-translations/locales/ja/plugin-ideal-image.json

@@ -0,0 +1,7 @@
+{
+  "theme.IdealImageMessage.404error": "404. Image not found",
+  "theme.IdealImageMessage.error": "Error. Click to reload",
+  "theme.IdealImageMessage.load": "Click to load{sizeMessage}",
+  "theme.IdealImageMessage.loading": "Loading...",
+  "theme.IdealImageMessage.offline": "Your browser is offline. Image not loaded"
+}

packages/docusaurus-theme-translations/locales/ko/plugin-ideal-image.json

@@ -0,0 +1,7 @@
+{
+  "theme.IdealImageMessage.404error": "404. Image not found",
+  "theme.IdealImageMessage.error": "Error. Click to reload",
+  "theme.IdealImageMessage.load": "Click to load{sizeMessage}",
+  "theme.IdealImageMessage.loading": "Loading...",
+  "theme.IdealImageMessage.offline": "Your browser is offline. Image not loaded"
+}

packages/docusaurus-theme-translations/locales/pl/plugin-ideal-image.json

@@ -0,0 +1,7 @@
+{
+  "theme.IdealImageMessage.404error": "404. Image not found",
+  "theme.IdealImageMessage.error": "Error. Click to reload",
+  "theme.IdealImageMessage.load": "Click to load{sizeMessage}",
+  "theme.IdealImageMessage.loading": "Loading...",
+  "theme.IdealImageMessage.offline": "Your browser is offline. Image not loaded"
+}

packages/docusaurus-theme-translations/locales/pt-BR/plugin-ideal-image.json

@@ -0,0 +1,7 @@
+{
+  "theme.IdealImageMessage.404error": "404. Image not found",
+  "theme.IdealImageMessage.error": "Error. Click to reload",
+  "theme.IdealImageMessage.load": "Click to load{sizeMessage}",
+  "theme.IdealImageMessage.loading": "Loading...",
+  "theme.IdealImageMessage.offline": "Your browser is offline. Image not loaded"
+}

packages/docusaurus-theme-translations/locales/pt-PT/plugin-ideal-image.json

@@ -0,0 +1,7 @@
+{
+  "theme.IdealImageMessage.404error": "404. Image not found",
+  "theme.IdealImageMessage.error": "Error. Click to reload",
+  "theme.IdealImageMessage.load": "Click to load{sizeMessage}",
+  "theme.IdealImageMessage.loading": "Loading...",
+  "theme.IdealImageMessage.offline": "Your browser is offline. Image not loaded"
+}

packages/docusaurus-theme-translations/locales/ru/plugin-ideal-image.json

@@ -0,0 +1,7 @@
+{
+  "theme.IdealImageMessage.404error": "404. Image not found",
+  "theme.IdealImageMessage.error": "Error. Click to reload",
+  "theme.IdealImageMessage.load": "Click to load{sizeMessage}",
+  "theme.IdealImageMessage.loading": "Loading...",
+  "theme.IdealImageMessage.offline": "Your browser is offline. Image not loaded"
+}

packages/docusaurus-theme-translations/locales/sr/plugin-ideal-image.json

@@ -0,0 +1,7 @@
+{
+  "theme.IdealImageMessage.404error": "404. Image not found",
+  "theme.IdealImageMessage.error": "Error. Click to reload",
+  "theme.IdealImageMessage.load": "Click to load{sizeMessage}",
+  "theme.IdealImageMessage.loading": "Loading...",
+  "theme.IdealImageMessage.offline": "Your browser is offline. Image not loaded"
+}

packages/docusaurus-theme-translations/locales/tr/plugin-ideal-image.json

@@ -0,0 +1,7 @@
+{
+  "theme.IdealImageMessage.404error": "404. Image not found",
+  "theme.IdealImageMessage.error": "Error. Click to reload",
+  "theme.IdealImageMessage.load": "Click to load{sizeMessage}",
+  "theme.IdealImageMessage.loading": "Loading...",
+  "theme.IdealImageMessage.offline": "Your browser is offline. Image not loaded"
+}

packages/docusaurus-theme-translations/locales/vi/plugin-ideal-image.json

@@ -0,0 +1,7 @@
+{
+  "theme.IdealImageMessage.404error": "404. Image not found",
+  "theme.IdealImageMessage.error": "Error. Click to reload",
+  "theme.IdealImageMessage.load": "Click to load{sizeMessage}",
+  "theme.IdealImageMessage.loading": "Loading...",
+  "theme.IdealImageMessage.offline": "Your browser is offline. Image not loaded"
+}

packages/docusaurus-theme-translations/locales/zh-Hans/plugin-ideal-image.json

@@ -0,0 +1,7 @@
+{
+  "theme.IdealImageMessage.404error": "未找到图片",
+  "theme.IdealImageMessage.error": "出现错误，点击重试",
+  "theme.IdealImageMessage.load": "点击加载图片{sizeMessage}",
+  "theme.IdealImageMessage.loading": "加载中……",
+  "theme.IdealImageMessage.offline": "你的浏览器处于离线状态。图片未加载"
+}

packages/docusaurus-theme-translations/locales/zh-Hant/plugin-ideal-image.json

@@ -0,0 +1,7 @@
+{
+  "theme.IdealImageMessage.404error": "未找到圖片",
+  "theme.IdealImageMessage.error": "出現錯誤，點擊重試",
+  "theme.IdealImageMessage.load": "點擊以加載{sizeMessage}",
+  "theme.IdealImageMessage.loading": "加載中...",
+  "theme.IdealImageMessage.offline": "你的瀏覽器處於離線狀態。圖片未加載"
+}

packages/docusaurus-theme-translations/update.js

@@ -34,6 +34,10 @@ const Themes = [
     name: 'plugin-pwa',
     src: [getPackageCodePath('docusaurus-plugin-pwa')],
   },
+  {
+    name: 'plugin-ideal-image',
+    src: [getPackageCodePath('docusaurus-plugin-ideal-image')],
+  },
 ];
 const AllThemesSrcDirs = Themes.flatMap((theme) => theme.src);