[Feature Request]: English UI Support

[nkte8]

Request Details

Now, Skyshare users can use Japanese UI only. App UI and Document should support English.

Feature Scope

Better for Bluesky user, more wonderful (Blueskyユーザに対して、より魅力的にする)

Feature Add infomation

No response

[ZEKE320]

Bluesky公式アプリ (social-app) の国際化対応にはLinguiというライブラリが用いられています^1。

このライブラリについて調査を行ったところ、LinguiはViteのプラグインとしても導入可能とのことでした^2。\ つまり、ViteベースのAstroでも同様に導入できる可能性があります^3 。

このためまずは

• LinguiがSkyshareに導入できるのかどうか
• 既存の実装にどの程度の規模の変更が必要となるかどうか

などを念頭に調査を始めます。

[nkte8]

5 についてこれについて少し具体的に考えていたことを共有します（参考レベル）

Astroにおけるi18n

Astroの判例ではディレクトリ型で展開されています。 https://docs.astro.build/ja/guides/internationalization/

現在の実装に関して

現在当サイトの各ページは以下のようにAstroファイルとして展開されており、正直このままでは対応が難しいと考えています。

---
import { servicename, serviceurl, authorlink } from "@/env/vars";
import { qaurl } from "@/env/envs";
import version from "@/env/version";
import Pagelayout from "@/layouts/Pagelayout.astro";
const siteurl = Astro.url.origin

const title = `About - ${servicename}`;
const robots = ["index", "nofollow", "noarchive", "noimageindex"];
---

<Pagelayout
    cardPath=`/materials/ogp_main.png?updated=${version}`
    pageTitle={title}
    robots={robots}
    hidePostButton={true}
>
    <div class="mb-8">
        <h1>当サイトについて</h1>
        <h3>
            {servicename}のWebサービス(<a href={siteurl}>{serviceurl}</a
            >)としての仕様および注意事項について記載します。
        </h3>
    </div>
...

このまま実装は流石に厳しいこと自覚しており、以下の案が頭の中にあります

1. 文字を切り出して管理する

例えば以下のようにする考え方です。開いているパス（skyshare.uk/ja/...）を参照して、読み込むような形です。

    <div class="mb-8">
        <h1>{about_1_h1(language)}</h1>
        <h3>
            {about_1_h3(language)}
        </h3>
    </div>

メリット:

• レイアウトを直接的に編集可能で、自由度が高い
• 変数を利用できる

デメリット:

• 単位が小さいため、ページの全体像がわかりずらい
• 言語によらずレイアウトが固定されるため、各言語の兼ね合いで調整が必要

2. mdファイルにしてしまう

現在実装されているチェンジログページはChangelog.mdを参照して動的に作成しています。 Changelog.mdとは方法を変える必要はありますが、Astroではmarkdownをコレクションとして管理・Astro上で展開する機能が存在します。コンテンツコレクションは、これを管理するのに最適な手段です。 https://docs.astro.build/ja/guides/content-collections/ これにより言語ごとにmarkdownを作成し、これを開いているパス（skyshare.uk/ja/...）ごとに展開する感じです。

当サイトについて
- {servicename}のWebサービス([serviceurl](siteurl))としての仕様および注意事項について記載します。
...

メリット:

• ページの全体像がわかりやすい。
• 言語によってレイアウトを変更できる

デメリット:

• 変数が使えるかわからない
• HTMLタグのstyleが固定されている（tailwind.config.mjsを参照）ため、自由度が低い

所感

個人的には案2で変数を使う方法を模索したい（もっといい方法があるならその方法を採用したい）

[ZEKE320]

大変助かります！ ありがとうございます

[ZEKE320]

まだしばらく進捗が出そうにないので、一度Assigneesを解除しますね 情報がまとまり次第、Discussionsに投げます

[nkte8]

@ZEKE320 ↑承知です！必要であればマイルストーンとかも打つので、ご相談ください🙇

[nkte8]

Astroにおいて、markdownの中で変数を使い方法あった

MDXでフロントマター変数を使用

ので、https://github.com/nkte8/skyshare/issues/5#issuecomment-2016519333 の方針2がかなり現実的になった