Skip to content

feat: Webサイトに翻訳率を表示するバッジを追加 #192

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jun 13, 2025
Merged

feat: Webサイトに翻訳率を表示するバッジを追加 #192

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f33d897
feat: 翻訳率を表示するバッジを追加
3w36zj6 Jun 11, 2025
b777497
docs: READMEの翻訳進捗のバッジを削除
3w36zj6 Jun 11, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
# Typst 日本語ドキュメント (非公式)

[![CI/CD for website](https://github.com/typst-jp/typst-jp.github.io/actions/workflows/website.yml/badge.svg?branch=main&event=push)](https://github.com/typst-jp/typst-jp.github.io/actions/workflows/website.yml)
[![翻訳進捗](https://img.shields.io/badge/Translation%20Progress%20%2f%20翻訳進捗-28%25-orange.svg)](https://github.com/typst-jp/typst-jp.github.io/issues/44)

> [!NOTE]
> For English version, please refer to [README.en.md](README.en.md).
Expand Down
150 changes: 96 additions & 54 deletions website/src/components/ui/common/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,28 +5,62 @@ import {
typstOfficialUrl,
version,
} from "../../../metadata";
import { DiscordIcon, GitHubIcon, MenuIcon, SearchIcon } from "../../icons";
import { calculateTranslationProgressRate } from "../../../utils/translationStatus";
import {
DiscordIcon,
GitHubIcon,
LanguageIcon,
MenuIcon,
SearchIcon,
} from "../../icons";
import { SiteTitle } from "./SiteTitle";

const VersionBadge = () => (
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-gray-200 text-gray-600 ml-2">
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-gray-200 text-gray-600">
v{version}
</span>
);

const TranslationCoverageBadge = () => {
const rate = calculateTranslationProgressRate() * 100;
return (
<div class="inline-flex items-center gap-2 px-2 py-1 border border-gray-200 rounded-md bg-gray-50">
<div class="flex items-center gap-1">
<div class="w-4 h-4 text-gray-600">
<LanguageIcon />
</div>
<span class="text-xs text-gray-600 font-medium">翻訳率</span>
</div>
<div class="flex items-center gap-1">
<div class="w-12 h-1.5 bg-gray-200 rounded-full overflow-hidden">
<div
class="h-full bg-green-500 rounded-full transition-all duration-300"
style={`width: ${rate}%`}
/>
</div>
<span class="text-xs text-gray-600 font-medium">
{rate.toFixed(0)}%
</span>
</div>
</div>
);
};

export const Header = () => {
return (
<>
<header class="boring sticky top-0 z-40 bg-white border-b border-gray-200 hidden lg:block">
<div class="flex justify-between items-center py-3 px-6">
<div class="flex items-center gap-4">
<div class="flex items-center">
<SiteTitle />
<VersionBadge />
</div>
<div class="relative flex items-center justify-between h-16 px-6">
<div class="flex items-center gap-2 flex-shrink-0">
<SiteTitle />
<VersionBadge />
<TranslationCoverageBadge />
</div>

<div class="xl:absolute xl:left-1/2 xl:transform xl:-translate-x-1/2">
<button
type="button"
class="flex items-center gap-2 px-4 py-2 text-sm text-gray-600 hover:text-gray-800 border border-gray-200 rounded-md hover:border-gray-300 transition-colors w-48"
class="flex items-center gap-2 px-4 py-2 text-sm text-gray-600 hover:text-gray-800 border border-gray-200 rounded-md hover:border-gray-300 transition-colors xl:w-64 w-48 h-10"
x-on:click="searchOpen = true"
>
<div class="w-4 h-4 text-gray-600">
Expand All @@ -35,56 +69,64 @@ export const Header = () => {
<span class="text-left flex-1">検索...</span>
</button>
</div>
<nav class="ml-auto">
<ul class="flex items-center gap-4">
<li class="social">
<a
href={discordServerUrl}
class="text-gray-600 hover:text-gray-800 transition-colors"
>
<div class="w-4 h-4">
<DiscordIcon />
</div>
</a>
</li>
<li class="social">
<a
href={githubRepositoryUrl}
class="text-gray-600 hover:text-gray-800 transition-colors"
>
<div class="w-4 h-4 text-gray-600 hover:text-gray-800 transition-colors">
<GitHubIcon />
</div>
</a>
</li>
<li class="secondary">
<a
href={typstOfficialUrl}
class="text-sm text-gray-600 hover:text-gray-800 transition-colors"
>
Typst公式サイト
</a>
</li>
<li class="secondary">
<a
href={typstOfficialDocsUrl}
class="text-sm text-gray-600 hover:text-gray-800 transition-colors"
>
Typst公式ドキュメント
</a>
</li>
</ul>
</nav>

<div class="flex items-center gap-4 flex-shrink-0">
<nav>
<ul class="flex items-center gap-4">
<li class="social">
<a
href={discordServerUrl}
class="text-gray-600 hover:text-gray-800 transition-colors"
>
<div class="w-4 h-4">
<DiscordIcon />
</div>
</a>
</li>
<li class="social">
<a
href={githubRepositoryUrl}
class="text-gray-600 hover:text-gray-800 transition-colors"
>
<div class="w-4 h-4 text-gray-600 hover:text-gray-800 transition-colors">
<GitHubIcon />
</div>
</a>
</li>
<li class="secondary">
<a
href={typstOfficialUrl}
class="text-sm text-gray-600 hover:text-gray-800 transition-colors"
>
Typst公式サイト
</a>
</li>
<li class="secondary">
<a
href={typstOfficialDocsUrl}
class="text-sm text-gray-600 hover:text-gray-800 transition-colors"
>
Typst公式ドキュメント
</a>
</li>
</ul>
</nav>
</div>
</div>
</header>

<header class="sticky top-0 z-30 bg-white border-b border-gray-200 flex lg:hidden items-center justify-between px-4">
<div class="flex justify-between items-center py-3 w-full">
<div class="flex items-center">
<SiteTitle />
<VersionBadge />
<div class="flex justify-between items-center py-3 w-full min-h-16">
<div class="flex flex-col gap-1 min-w-0">
<div class="flex items-center gap-2">
<SiteTitle />
<VersionBadge />
</div>
<div>
<TranslationCoverageBadge />
</div>
</div>
<div class="flex items-center gap-2">
<div class="flex items-center gap-2 flex-shrink-0 self-center">
<button
type="button"
class="p-2 text-gray-600 hover:text-gray-800 transition-colors"
Expand Down