Make offline image text translatable

lang/ui.ca.json

@@ -510,6 +510,10 @@
     "defaultMessage": "Has d'<link>actualitzar el teu microprogramari</link> abans de poder connectar amb aquesta micro:bit.",
     "description": "Text in the no micro:bit found dialog"
   },
+  "offline-image-alt": {
+    "defaultMessage": "Image unavailable offline",
+    "description": "Alt text for an image placeholder when the user is offline"
+  },
   "open-action": {
     "defaultMessage": "Obert",
     "description": "Open button text"

lang/ui.de.json

@@ -510,6 +510,10 @@
     "defaultMessage": "Du musst <link>die Firmware aktualisieren</link>, bevor eine Verbindung zu diesem micro:bit hergestellt werden kann.",
     "description": "Text in the no micro:bit found dialog"
   },
+  "offline-image-alt": {
+    "defaultMessage": "Image unavailable offline",
+    "description": "Alt text for an image placeholder when the user is offline"
+  },
   "open-action": {
     "defaultMessage": "Öffnen",
     "description": "Open button text"

lang/ui.en.json

@@ -511,6 +511,10 @@
     "defaultMessage": "You must <link>update your firmware before</link> you can connect to this micro:bit.",
     "description": "Text in the no micro:bit found dialog"
   },
+  "offline-image-alt": {
+    "defaultMessage": "Image unavailable offline",
+    "description": "Alt text for an image placeholder when the user is offline"
+  },
   "open-action": {
     "defaultMessage": "Open",
     "description": "Open button text"

lang/ui.es-es.json

@@ -510,6 +510,10 @@
     "defaultMessage": "Debes <link>actualizar el firmware</link> para poder conectar a este micro:bit.",
     "description": "Text in the no micro:bit found dialog"
   },
+  "offline-image-alt": {
+    "defaultMessage": "Image unavailable offline",
+    "description": "Alt text for an image placeholder when the user is offline"
+  },
   "open-action": {
     "defaultMessage": "Abrir",
     "description": "Open button text"

lang/ui.fr.json

@@ -510,6 +510,10 @@
     "defaultMessage": "Vous devez <link>mettre à jour le micrologiciel</link> avant de pouvoir vous connecter à ce micro:bit.",
     "description": "Text in the no micro:bit found dialog"
   },
+  "offline-image-alt": {
+    "defaultMessage": "Image unavailable offline",
+    "description": "Alt text for an image placeholder when the user is offline"
+  },
   "open-action": {
     "defaultMessage": "Ouvrir",
     "description": "Open button text"

lang/ui.ja.json

@@ -510,6 +510,10 @@
     "defaultMessage": "このmicro:bitに接続するには、<link>ファームウェアを更新</link>する必要があります。",
     "description": "Text in the no micro:bit found dialog"
   },
+  "offline-image-alt": {
+    "defaultMessage": "Image unavailable offline",
+    "description": "Alt text for an image placeholder when the user is offline"
+  },
   "open-action": {
     "defaultMessage": "開く",
     "description": "Open button text"

lang/ui.ko.json

@@ -510,6 +510,10 @@
     "defaultMessage": "이 micro:bit에 연결하기 전에 <link>펌웨어를 업데이트</link>해야 합니다.",
     "description": "Text in the no micro:bit found dialog"
   },
+  "offline-image-alt": {
+    "defaultMessage": "Image unavailable offline",
+    "description": "Alt text for an image placeholder when the user is offline"
+  },
   "open-action": {
     "defaultMessage": "열기",
     "description": "Open button text"

lang/ui.nl.json

@@ -510,6 +510,10 @@
     "defaultMessage": "Je moet <link>firmware updaten voordat</link> je verbinding kan maken met deze micro:bit.",
     "description": "Text in the no micro:bit found dialog"
   },
+  "offline-image-alt": {
+    "defaultMessage": "Image unavailable offline",
+    "description": "Alt text for an image placeholder when the user is offline"
+  },
   "open-action": {
     "defaultMessage": "Open",
     "description": "Open button text"

lang/ui.zh-cn.json

@@ -510,6 +510,10 @@
     "defaultMessage": "您必须 <link>update your firmware before</link> 才能连接到此 micro:bit。",
     "description": "Text in the no micro:bit found dialog"
   },
+  "offline-image-alt": {
+    "defaultMessage": "Image unavailable offline",
+    "description": "Alt text for an image placeholder when the user is offline"
+  },
   "open-action": {
     "defaultMessage": "打开",
     "description": "Open button text"

lang/ui.zh-tw.json

@@ -510,6 +510,10 @@
     "defaultMessage": "您必須<link>更新您的韌體</link>，然後才能連線至此 micro:bit。",
     "description": "Text in the no micro:bit found dialog"
   },
+  "offline-image-alt": {
+    "defaultMessage": "Image unavailable offline",
+    "description": "Alt text for an image placeholder when the user is offline"
+  },
   "open-action": {
     "defaultMessage": "開啟",
     "description": "Open button text"

src/documentation/OfflineImageFallback.tsx

@@ -1,5 +1,6 @@
 import { BoxProps, Image, Text, VStack } from "@chakra-ui/react";
 import offlinePlaceholder from "./offline.svg";
+import { FormattedMessage, useIntl } from "react-intl";
 
 interface OfflineImageFallbackProps extends BoxProps {
   useIcon?: boolean;
@@ -10,19 +11,20 @@ const OfflineImageFallback = ({
   width,
   ...props
 }: OfflineImageFallbackProps) => {
+  const intl = useIntl();
   return (
     <>
       {useIcon ? (
         <Image
           fallbackSrc={offlinePlaceholder}
           {...props}
           p={2}
-          alt="Image unavailable offline"
+          alt={intl.formatMessage({ id: "offline-image-alt" })}
         />
       ) : (
         <VStack justifyContent="center" {...props} maxWidth={width}>
           <Text textAlign="center" wordBreak="break-word">
-            Image unavailable offline
+            <FormattedMessage id="offline-image-alt" />
           </Text>
         </VStack>
       )}

src/messages/ui.ca.json

@@ -1127,6 +1127,12 @@
       "value": "Has d<link>actualitzar el teu microprogramari</link> abans de poder connectar amb aquesta micro:bit."
     }
   ],
+  "offline-image-alt": [
+    {
+      "type": 0,
+      "value": "Image unavailable offline"
+    }
+  ],
   "open-action": [
     {
       "type": 0,

src/messages/ui.de.json

@@ -1205,6 +1205,12 @@
       "value": ", bevor eine Verbindung zu diesem micro:bit hergestellt werden kann."
     }
   ],
+  "offline-image-alt": [
+    {
+      "type": 0,
+      "value": "Image unavailable offline"
+    }
+  ],
   "open-action": [
     {
       "type": 0,

src/messages/ui.en.json

@@ -1161,6 +1161,12 @@
       "value": " you can connect to this micro:bit."
     }
   ],
+  "offline-image-alt": [
+    {
+      "type": 0,
+      "value": "Image unavailable offline"
+    }
+  ],
   "open-action": [
     {
       "type": 0,

src/messages/ui.es-es.json

@@ -1161,6 +1161,12 @@
       "value": " para poder conectar a este micro:bit."
     }
   ],
+  "offline-image-alt": [
+    {
+      "type": 0,
+      "value": "Image unavailable offline"
+    }
+  ],
   "open-action": [
     {
       "type": 0,

src/messages/ui.fr.json

@@ -1161,6 +1161,12 @@
       "value": " avant de pouvoir vous connecter à ce micro:bit."
     }
   ],
+  "offline-image-alt": [
+    {
+      "type": 0,
+      "value": "Image unavailable offline"
+    }
+  ],
   "open-action": [
     {
       "type": 0,

src/messages/ui.ja.json

@@ -1169,6 +1169,12 @@
       "value": "する必要があります。"
     }
   ],
+  "offline-image-alt": [
+    {
+      "type": 0,
+      "value": "Image unavailable offline"
+    }
+  ],
   "open-action": [
     {
       "type": 0,

src/messages/ui.ko.json

@@ -1173,6 +1173,12 @@
       "value": "해야 합니다."
     }
   ],
+  "offline-image-alt": [
+    {
+      "type": 0,
+      "value": "Image unavailable offline"
+    }
+  ],
   "open-action": [
     {
       "type": 0,

src/messages/ui.nl.json

@@ -1181,6 +1181,12 @@
       "value": " je verbinding kan maken met deze micro:bit."
     }
   ],
+  "offline-image-alt": [
+    {
+      "type": 0,
+      "value": "Image unavailable offline"
+    }
+  ],
   "open-action": [
     {
       "type": 0,

src/messages/ui.zh-cn.json

@@ -1165,6 +1165,12 @@
       "value": " 才能连接到此 micro:bit。"
     }
   ],
+  "offline-image-alt": [
+    {
+      "type": 0,
+      "value": "Image unavailable offline"
+    }
+  ],
   "open-action": [
     {
       "type": 0,

src/messages/ui.zh-tw.json

@@ -1161,6 +1161,12 @@
       "value": "，然後才能連線至此 micro:bit。"
     }
   ],
+  "offline-image-alt": [
+    {
+      "type": 0,
+      "value": "Image unavailable offline"
+    }
+  ],
   "open-action": [
     {
       "type": 0,