Files
archived-tauri-docs/packages/i18n-tracker/lib/translation-status/template.html
2024-05-24 20:22:18 +02:00

286 lines
7.2 KiB
HTML

<!doctype html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
<meta name="theme-color" content="hsl(186, 44%, 15%)" media="(prefers-color-scheme: dark)" />
<meta name="theme-color" content="hsl(186, 37%, 93%)" media="(prefers-color-scheme: light)" />
<title>Tauri Docs Translation Status</title>
<meta
name="description"
content="Translation progress tracker for the Tauri Docs site. See how much has been translated in your language and get involved!"
/>
<link rel="canonical" href="https://v2.tauri.app" />
<meta property="og:title" content="Tauri Docs Translation Status" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://v2.tauri.app/" />
<meta
property="og:description"
content="Translation progress tracker for the Tauri Docs site. See how much has been translated in your language and get involved!"
/>
<style>
:root {
color-scheme: dark;
--font-fallback: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif,
Apple Color Emoji, Segoe UI Emoji;
--font-body: system-ui, var(--font-fallback);
--theme-accent: hsl(186, 100%, 87%);
--theme-bg: hsl(186, 13%, 10%);
--theme-table-header: hsl(186, 14%, 16%);
--theme-table-border: 1px solid hsl(186, 13%, 16%);
--theme-table-hover: hsl(186, 13%, 16%);
--theme-text: hsl(186, 8%, 77%);
--theme-text-bright: hsl(0, 0%, 100%);
--overlay-blurple: hsla(186, 60%, 60%, 0.2);
}
* {
box-sizing: border-box;
margin: 0;
}
body {
color: var(--theme-text);
display: flex;
flex-direction: column;
min-height: 100vh;
font-family: var(--font-body);
font-size: 16px;
line-height: 1.5;
margin-block: 2rem;
margin-inline: 1rem;
background:
linear-gradient(215deg, var(--overlay-blurple), transparent 40%),
radial-gradient(var(--overlay-blurple), transparent 40%) no-repeat -60vw -40vh / 105vw
200vh,
radial-gradient(var(--overlay-blurple), transparent 65%) no-repeat 50% calc(100% + 20rem) /
60rem 30rem,
var(--theme-bg);
}
:is(h1, h2, h3, h4, h5, h6) {
color: var(--theme-text-bright);
margin-bottom: 1rem;
font-weight: bold;
line-height: 1.3;
}
:is(h2):not(:first-child) {
margin-top: 4rem;
}
:is(h3, h4):not(:first-child) {
margin-top: 3rem;
}
:is(h5, h6):not(:first-child) {
margin-top: 2rem;
}
h1,
h2 {
max-width: 40ch;
}
h1 {
font-size: 2.25rem;
font-weight: 900;
}
h2 {
font-size: 1.875rem;
}
@media (min-width: 37.75em) {
h1 {
font-size: 2.5rem;
}
}
main {
max-width: 80ch;
margin-inline: auto;
}
.limit-to-viewport {
max-width: calc(100vw - 2rem);
}
p + p {
margin-top: 1.25rem;
}
a {
color: var(--theme-accent);
text-decoration: none;
}
h2 a {
color: inherit;
}
p a {
color: var(--theme-accent);
text-decoration: underline;
}
a:hover {
text-decoration: underline;
color: var(--theme-text-bright);
}
ul {
font-size: 0.875rem;
}
details {
margin-bottom: 1.25rem;
}
details summary {
cursor: pointer;
user-select: none;
}
details summary:hover strong {
color: var(--theme-accent-secondary);
}
details h5 {
margin-top: 1rem !important;
}
details > :last-child {
margin-bottom: 1rem;
}
.create-button {
padding: 0.1em 0.5em;
background-color: hsl(213deg 89% 64% / 20%);
display: inline-block;
border-radius: 0.5em;
font-weight: bold;
font-size: 0.75rem;
}
.status-by-page {
margin-bottom: 1rem;
border-collapse: collapse;
margin-inline: -1rem;
border: var(--theme-table-border);
font-size: 0.8125rem;
width: 85%;
}
.table-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 30px;
width: 100%;
gap: 5px;
}
.status-by-page th {
position: sticky;
top: -1px;
background: var(--theme-table-header);
white-space: nowrap;
padding-inline: 0.3rem;
}
.status-by-page th,
.status-by-page td {
padding-block: 0.2rem;
}
.status-by-page tbody tr:not(.spacer):hover td {
background: var(--theme-table-hover);
}
.status-by-page .spacer td {
height: 0.5rem;
}
.status-by-page th:first-of-type,
.status-by-page td:first-of-type {
text-align: left;
padding-inline-start: 1rem;
}
.status-by-page th:last-of-type,
.status-by-page td:last-of-type {
text-align: center;
padding-inline-end: 1rem;
}
.status-by-page td:not(:first-of-type) {
min-width: 2rem;
text-align: center;
cursor: default;
}
.status-by-page td:not(:first-of-type) a {
text-decoration: none;
}
.progress-summary {
font-size: 0.8125rem;
}
.progress-bar {
font-size: 0.6875rem;
}
.main-container {
position: relative;
}
</style>
</head>
<body>
<main class="main-container">
<div class="limit-to-viewport">
<h1>Tauri Docs Translation Status</h1>
<p>
If you're interested in helping us translate
<a href="https://v2.tauri.app/">v2.tauri.app</a> into one of the languages listed below,
you've come to the right place! This auto-updating page always lists all the content that
could use your help right now.
</p>
<p>
Read the
<a href="https://github.com/tauri-apps/tauri-docs/blob/v2/.github/TRANSLATING.md"
>Translations Guide</a
>
for how to translate a document. Before starting a new translation, be sure to check the
<a href="#needs-review">existing Tauri Docs PRs</a> to see if this page has already been
translated, and consider reviewing any open PRs in your language!
</p>
<h2 id="by-language">
<a href="#by-language">Translation progress by language</a>
</h2>
<!-- TranslationStatusByLanguage -->
<h2 id="needs-review">
<a href="#needs-review">Translations that need reviews</a>
</h2>
<!-- TranslationNeedsReview -->
<h2 id="by-content">
<a href="#by-content">Translation status by content</a>
</h2>
</div>
<!-- This table is not limited to the viewport to allow horizontal scrolling -->
<!-- TranslationStatusByPage -->
</main>
</body>
</html>