refactor: add translation strings

Author: xovnsi

script.js

@@ -2,6 +2,7 @@
  * Adds default alt text to images that don't have one
  */
 function addAltTextToImages() {
+
   const articleBody = document.querySelector(".article-body");
   const postBody = document.querySelectorAll(".post-body");
 
@@ -13,7 +14,7 @@ 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 +28,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",