refactor(ModsList, translations): enhance author display with localized "by" label

src/components/ModsList.astro

@@ -104,7 +104,10 @@ const totalPages = Math.ceil(allMods.length / defaultLimit)
           </div>
           <div>
             <h2 class="text-lg font-bold">
-              {mod.name} <span class="ml-1 text-sm font-normal">by @{mod.author}</span>
+              {mod.name}{' '}
+              <span class="ml-1 text-sm font-normal">
+                {translations.by} @{mod.author}
+              </span>
             </h2>
             <p class="line-clamp-2 text-sm font-thin">{mod.description}</p>
           </div>
@@ -514,7 +517,7 @@ const totalPages = Math.ceil(allMods.length / defaultLimit)
                   </div>
                   <div>
                     <h2 class="text-lg font-bold">
-                      ${mod.name} <span class="ml-1 text-sm font-normal">by @${mod.author}</span>
+                      ${mod.name} <span class="ml-1 text-sm font-normal">${this.translations.by} @${mod.author}</span>
                     </h2>
                     <p class="text-sm font-thin line-clamp-2">${mod.description}</p>
                   </div>

src/i18n/en/translation.json

@@ -83,6 +83,7 @@
         "pagination": "{input} of {totalPages} ({totalItems} items)"
       },
       "search": "Type to search...",
+      "by": "by",
       "sort": {
         "lastCreated": "Last created",
         "lastUpdated": "Last updated",
@@ -97,9 +98,9 @@
           "description": "You need to have Zen Browser installed to install this theme.",
           "button": "Download now!"
         },
-        "createdBy": "Created by <a href={link} class=\"zen-link font-bold\">{author}</a> • <span class=\"font-bold\">v{version}</span>",
+        "createdBy": "Created by {author} (v{version})",
-        "creationDate": "Creation date • <b>{createdAt}</b>",
+        "creationDate": "Creation date: <b>{createdAt}</b>",
-        "latestUpdate": "Latest update • <b>{updatedAt}</b>",
+        "latestUpdate": "Latest update: <b>{updatedAt}</b>",
         "visitModHomepage": "Visit mod homepage",
         "installMod": "Install Mod 🎉",
         "uninstallMod": "Uninstall Mod",

src/i18n/ja/translation.json

@@ -83,6 +83,7 @@
         "pagination": "{input} / {totalPages}（全{totalItems}件）"
       },
       "search": "検索ワードを入力...",
+      "by": "作者",
       "sort": {
         "lastCreated": "新着順",
         "lastUpdated": "更新順",
@@ -97,9 +98,9 @@
           "description": "このテーマをインストールするにはZenが必要です。",
           "button": "今すぐダウンロード！"
         },
-        "createdBy": "作成者：<a href={link} class=\"zen-link font-bold\">{author}</a> • <span class=\"font-bold\">v{version}</span>",
+        "createdBy": "作者：{author} (v{version})",
-        "creationDate": "作成日 • <b>{createdAt}</b>",
+        "creationDate": "作成日：<b>{createdAt}</b>",
-        "latestUpdate": "最終更新 • <b>{updatedAt}</b>",
+        "latestUpdate": "最終更新：<b>{updatedAt}</b>",
         "visitModHomepage": "Modのホームページへ",
         "installMod": "Modをインストール 🎉",
         "uninstallMod": "Modをアンインストール",

src/pages/[...locale]/mods/[...slug].astro

@@ -95,9 +95,11 @@ const {
         <div class="flex flex-shrink-0 flex-col gap-2 font-normal">
           <p
             set:html={slug.createdBy
-              .replace('{author}', mod.author)
+              .replace(
-              .replace('{version}', mod.version)
+                '{author}',
-              .replace('{link}', getAuthorLink(mod.author))}
+                `<a href="${getAuthorLink(mod.author)}" class="zen-link font-bold">${mod.author}</a>`
+              )
+              .replace('{version}', mod.version)}
           />
           <p set:html={slug.creationDate.replace('{createdAt}', dates.createdAt)} />
           {