refactor: add translation strings

Author: xovnsi

script.js

@@ -13,7 +13,10 @@ function addAltTextToImages() {
 
     imagesWithoutAlt.forEach((img) => {
       const position = Array.from(allImages).indexOf(img) + 1;
-      const altText = "Image " + position + " in article";
+      const altText = window.articleImageAltText.replace(
+        "{{position}}",
+        position
+      );
       img.setAttribute("alt", altText);
     });
   }
@@ -27,7 +30,7 @@ function addAltTextToImages() {
 
     imagesWithoutAlt.forEach((img) => {
       const position = Array.from(allImages).indexOf(img) + 1;
-      const altText = "Image " + position + " in post";
+      const altText = window.postImageAltText.replace("{{position}}", position);
       img.setAttribute("alt", altText);
     });
   }

src/imageAltText.js

@@ -1,7 +1,11 @@
 <meta content="width=device-width, initial-scale=1.0" name="viewport" />
 <!-- Make the translated search clear button label available for use in JS -->
 <!-- See buildClearSearchButton() in script.js -->
-<script type="text/javascript">window.searchClearButtonLabelLocalized = "{{t 'search_clear'}}";</script>
+<script type="text/javascript">
+  window.searchClearButtonLabelLocalized = "{{t 'search_clear'}}";
+  window.articleImageAltText = "{{t 'article_image_alt_text' position=0}}";
+  window.postImageAltText = "{{t 'post_image_alt_text' position=0}}";
+</script>
 <script type="text/javascript">
   // Load ES module polyfill only for browsers that don't support ES modules
   if (!(HTMLScriptElement.supports && HTMLScriptElement.supports('importmap'))) {

templates/document_head.hbs

@@ -1,4 +1,6 @@
 {
+  "article_image_alt_text": "Image {{position}} in article",
+  "post_image_alt_text": "Image {{position}} in post",
   "article_author_description": "Show author image and name",
   "article_author_label": "Author",
   "article_comments_description": "Show comments on articles",