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

This commit is contained in:
Shintaro Jokagi 2025-05-29 12:50:19 +12:00
parent aa7b0f608d
commit 9484ead29e
No known key found for this signature in database
GPG key ID: 0DDF8FA44C9A0DA8
4 changed files with 18 additions and 11 deletions

View file

@ -104,7 +104,10 @@ const totalPages = Math.ceil(allMods.length / defaultLimit)
</div> </div>
<div> <div>
<h2 class="text-lg font-bold"> <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> </h2>
<p class="line-clamp-2 text-sm font-thin">{mod.description}</p> <p class="line-clamp-2 text-sm font-thin">{mod.description}</p>
</div> </div>
@ -514,7 +517,7 @@ const totalPages = Math.ceil(allMods.length / defaultLimit)
</div> </div>
<div> <div>
<h2 class="text-lg font-bold"> <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> </h2>
<p class="text-sm font-thin line-clamp-2">${mod.description}</p> <p class="text-sm font-thin line-clamp-2">${mod.description}</p>
</div> </div>

View file

@ -83,6 +83,7 @@
"pagination": "{input} of {totalPages} ({totalItems} items)" "pagination": "{input} of {totalPages} ({totalItems} items)"
}, },
"search": "Type to search...", "search": "Type to search...",
"by": "by",
"sort": { "sort": {
"lastCreated": "Last created", "lastCreated": "Last created",
"lastUpdated": "Last updated", "lastUpdated": "Last updated",
@ -97,9 +98,9 @@
"description": "You need to have Zen Browser installed to install this theme.", "description": "You need to have Zen Browser installed to install this theme.",
"button": "Download now!" "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", "visitModHomepage": "Visit mod homepage",
"installMod": "Install Mod 🎉", "installMod": "Install Mod 🎉",
"uninstallMod": "Uninstall Mod", "uninstallMod": "Uninstall Mod",

View file

@ -83,6 +83,7 @@
"pagination": "{input} / {totalPages}(全{totalItems}件)" "pagination": "{input} / {totalPages}(全{totalItems}件)"
}, },
"search": "検索ワードを入力...", "search": "検索ワードを入力...",
"by": "作者",
"sort": { "sort": {
"lastCreated": "新着順", "lastCreated": "新着順",
"lastUpdated": "更新順", "lastUpdated": "更新順",
@ -97,9 +98,9 @@
"description": "このテーマをインストールするにはZenが必要です。", "description": "このテーマをインストールするにはZenが必要です。",
"button": "今すぐダウンロード!" "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のホームページへ", "visitModHomepage": "Modのホームページへ",
"installMod": "Modをインストール 🎉", "installMod": "Modをインストール 🎉",
"uninstallMod": "Modをアンインストール", "uninstallMod": "Modをアンインストール",

View file

@ -95,9 +95,11 @@ const {
<div class="flex flex-shrink-0 flex-col gap-2 font-normal"> <div class="flex flex-shrink-0 flex-col gap-2 font-normal">
<p <p
set:html={slug.createdBy 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)} /> <p set:html={slug.creationDate.replace('{createdAt}', dates.createdAt)} />
{ {