From 710ea9e73a8cafba9ebb2e910714304d672c0647 Mon Sep 17 00:00:00 2001
From: Robert Knight <robert@microbit.org>
Date: Thu, 25 Apr 2024 15:58:25 +0100
Subject: [PATCH] Make offline image text translatable

---
 lang/ui.ca.json                            | 4 ++++
 lang/ui.de.json                            | 4 ++++
 lang/ui.en.json                            | 4 ++++
 lang/ui.es-es.json                         | 4 ++++
 lang/ui.fr.json                            | 4 ++++
 lang/ui.ja.json                            | 4 ++++
 lang/ui.ko.json                            | 4 ++++
 lang/ui.nl.json                            | 4 ++++
 lang/ui.zh-cn.json                         | 4 ++++
 lang/ui.zh-tw.json                         | 4 ++++
 src/documentation/OfflineImageFallback.tsx | 6 ++++--
 src/messages/ui.ca.json                    | 6 ++++++
 src/messages/ui.de.json                    | 6 ++++++
 src/messages/ui.en.json                    | 6 ++++++
 src/messages/ui.es-es.json                 | 6 ++++++
 src/messages/ui.fr.json                    | 6 ++++++
 src/messages/ui.ja.json                    | 6 ++++++
 src/messages/ui.ko.json                    | 6 ++++++
 src/messages/ui.nl.json                    | 6 ++++++
 src/messages/ui.zh-cn.json                 | 6 ++++++
 src/messages/ui.zh-tw.json                 | 6 ++++++
 21 files changed, 104 insertions(+), 2 deletions(-)

diff --git a/lang/ui.ca.json b/lang/ui.ca.json
index 2f3e3bc5c..7afef7801 100644
--- a/lang/ui.ca.json
+++ b/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"
diff --git a/lang/ui.de.json b/lang/ui.de.json
index d3d8703c1..2a6d770c8 100644
--- a/lang/ui.de.json
+++ b/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"
diff --git a/lang/ui.en.json b/lang/ui.en.json
index e83ebd588..099c2060d 100644
--- a/lang/ui.en.json
+++ b/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"
diff --git a/lang/ui.es-es.json b/lang/ui.es-es.json
index d615ce3dd..8095d91e3 100644
--- a/lang/ui.es-es.json
+++ b/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"
diff --git a/lang/ui.fr.json b/lang/ui.fr.json
index 3c8cf76f4..4f7c89778 100644
--- a/lang/ui.fr.json
+++ b/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"
diff --git a/lang/ui.ja.json b/lang/ui.ja.json
index b8b56e462..32053ace0 100644
--- a/lang/ui.ja.json
+++ b/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"
diff --git a/lang/ui.ko.json b/lang/ui.ko.json
index 47ec75d06..c01795706 100644
--- a/lang/ui.ko.json
+++ b/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"
diff --git a/lang/ui.nl.json b/lang/ui.nl.json
index 8ab388e35..41bb461a3 100644
--- a/lang/ui.nl.json
+++ b/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"
diff --git a/lang/ui.zh-cn.json b/lang/ui.zh-cn.json
index 661ee1a8e..81eb1a868 100644
--- a/lang/ui.zh-cn.json
+++ b/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"
diff --git a/lang/ui.zh-tw.json b/lang/ui.zh-tw.json
index 47d0b0ca5..76b8f3664 100644
--- a/lang/ui.zh-tw.json
+++ b/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"
diff --git a/src/documentation/OfflineImageFallback.tsx b/src/documentation/OfflineImageFallback.tsx
index 6e9809c59..dfc1ec129 100644
--- a/src/documentation/OfflineImageFallback.tsx
+++ b/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,6 +11,7 @@ const OfflineImageFallback = ({
   width,
   ...props
 }: OfflineImageFallbackProps) => {
+  const intl = useIntl();
   return (
     <>
       {useIcon ? (
@@ -17,12 +19,12 @@ const OfflineImageFallback = ({
           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>
       )}
diff --git a/src/messages/ui.ca.json b/src/messages/ui.ca.json
index db70d5413..0dd716576 100644
--- a/src/messages/ui.ca.json
+++ b/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,
diff --git a/src/messages/ui.de.json b/src/messages/ui.de.json
index 8cc1572e6..2d0d04714 100644
--- a/src/messages/ui.de.json
+++ b/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,
diff --git a/src/messages/ui.en.json b/src/messages/ui.en.json
index 10477babc..afc1029de 100644
--- a/src/messages/ui.en.json
+++ b/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,
diff --git a/src/messages/ui.es-es.json b/src/messages/ui.es-es.json
index e8514d9fc..c1810b0ea 100644
--- a/src/messages/ui.es-es.json
+++ b/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,
diff --git a/src/messages/ui.fr.json b/src/messages/ui.fr.json
index 6609d1414..4524245ed 100644
--- a/src/messages/ui.fr.json
+++ b/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,
diff --git a/src/messages/ui.ja.json b/src/messages/ui.ja.json
index 0b4b8dbe5..517c1ba71 100644
--- a/src/messages/ui.ja.json
+++ b/src/messages/ui.ja.json
@@ -1169,6 +1169,12 @@
       "value": "する必要があります。"
     }
   ],
+  "offline-image-alt": [
+    {
+      "type": 0,
+      "value": "Image unavailable offline"
+    }
+  ],
   "open-action": [
     {
       "type": 0,
diff --git a/src/messages/ui.ko.json b/src/messages/ui.ko.json
index 4813008aa..19138f9ec 100644
--- a/src/messages/ui.ko.json
+++ b/src/messages/ui.ko.json
@@ -1173,6 +1173,12 @@
       "value": "해야 합니다."
     }
   ],
+  "offline-image-alt": [
+    {
+      "type": 0,
+      "value": "Image unavailable offline"
+    }
+  ],
   "open-action": [
     {
       "type": 0,
diff --git a/src/messages/ui.nl.json b/src/messages/ui.nl.json
index af753f47b..072eda99b 100644
--- a/src/messages/ui.nl.json
+++ b/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,
diff --git a/src/messages/ui.zh-cn.json b/src/messages/ui.zh-cn.json
index 360498f1c..daf74448d 100644
--- a/src/messages/ui.zh-cn.json
+++ b/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,
diff --git a/src/messages/ui.zh-tw.json b/src/messages/ui.zh-tw.json
index fff0089b2..0ca4779b7 100644
--- a/src/messages/ui.zh-tw.json
+++ b/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,