docs2.vivliostyle.org/src/layouts/LanguageSwitchLayout.astro at 0da605c93fc4c55edf21da8001b82e836b6b9cfd · vivliostyle/docs2.vivliostyle.org · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
---
/**
 * 言語切り替えレイアウト - 言語検出とリダイレクト
 *
 * Accept-Languageヘッダーを確認し、適切な言語ページにリダイレクト。
 * SSRが必要な場合はクライアントサイドで処理。
 */

interface Props {
  targetPath: string;
  availableLanguages?: ('en' | 'ja')[];
  defaultLanguage?: 'en' | 'ja';
}

const {
  targetPath,
  availableLanguages = ['en', 'ja'],
  defaultLanguage = 'en',
} = Astro.props;
---
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vivliostyle Documentation</title>
  <meta name="robots" content="noindex">
  <link rel="canonical" href={`${Astro.url.origin}/${defaultLanguage}${targetPath}`}>
  <link rel="stylesheet" href="/styles/global.css">
  <script data-target-path={targetPath} data-supported-languages={availableLanguages.join(',')} data-default-language={defaultLanguage}>
    // 言語検出とリダイレクト
    (function() {
      const supportedLangs = document.currentScript.getAttribute('data-supported-languages').split(',');
      const defaultLang = document.currentScript.getAttribute('data-default-language');

      // ブラウザの言語設定を取得
      const browserLang = navigator.language || '';
      const langCode = browserLang.split('-')[0].toLowerCase();

      // サポートされている言語かチェック
      const targetLang = supportedLangs.includes(langCode) ? langCode : defaultLang;

      // リダイレクト
      const targetPath = document.currentScript.getAttribute('data-target-path');
      window.location.replace(`/${targetLang}${targetPath}`);
    })();
  </script>
  <noscript>
    <meta http-equiv="refresh" content={`0; url=/${defaultLanguage}${targetPath}`}>
  </noscript>
</head>
<body>
  <noscript>
    <meta http-equiv="refresh" content={`0; url=/${defaultLanguage}${targetPath}`}>
  </noscript>
  <p style="font-size: 0">Welcome to the documentation. Please navigate to <a href={`/${defaultLanguage}${targetPath}`}>English documentation</a>.</p>
</body>
</html>