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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
|
<!-- SPDX-FileCopyrightText: 2026 Progmasoft <support@progmasoft.com> -->
<!-- SPDX-License-Identifier: AGPL-3.0-or-later WITH AdditionRef-Progmasoft-Patent-Grant-1.1 -->
<script setup lang="ts">
import { computed } from "vue";
import { RouterLink, RouterView } from "vue-router";
import { localeLabels } from "./locales";
import { locale, supportedLocales, theme } from "./preferences";
import { forumUrl, site, siteHome, siteUrl, type Site } from "./site";
const labels = {
"en-US": {
syntax: "Syntax",
home: "Home",
overview: "Overview",
start: "Getting started",
forum: "Forum",
source: "Source",
theme: "Switch color theme",
language: "Language",
status: "In active development",
footer: "A Progmasoft project. Tala is an independent language identity.",
},
"de-DE": {
syntax: "Syntax",
home: "Startseite",
overview: "Überblick",
start: "Erste Schritte",
forum: "Forum",
source: "Quellcode",
theme: "Farbschema wechseln",
language: "Sprache",
status: "In aktiver Entwicklung",
footer: "Ein Progmasoft-Projekt. Tala hat eine eigenständige Sprachidentität.",
},
"ru-RU": {
syntax: "Синтаксис",
home: "Главная",
overview: "Обзор",
start: "Начало работы",
forum: "Форум",
source: "Исходный код",
theme: "Сменить цветовую тему",
language: "Язык",
status: "В активной разработке",
footer: "Проект Progmasoft. Tala — самостоятельный язык со своей идентичностью.",
},
"he-IL": {
syntax: "תחביר",
home: "בית",
overview: "סקירה",
start: "צעדים ראשונים",
forum: "פורום",
source: "קוד מקור",
theme: "החלפת ערכת הצבעים",
language: "שפה",
status: "בפיתוח פעיל",
footer: "פרויקט של Progmasoft. ל-Tala זהות שפה עצמאית.",
},
} as const;
const copy = computed(() => labels[locale.value]);
const hostname = window.location.hostname;
const brand = { language: "Tala", talac: "talac", tazel: "Tazel" }[site];
// The other two sites are linked by their names, which read the same in every language.
const siblings = (["language", "talac", "tazel"] as const)
.filter((other): other is Site => other !== site)
.map((other) => ({
label: { language: "Tala", talac: "talac", tazel: "Tazel" }[other],
href: siteUrl(other, siteHome[other], hostname),
}));
function toggleTheme() {
theme.value = theme.value === "dark" ? "light" : "dark";
}
</script>
<template>
<a class="skip-link" href="#main">Skip to content</a>
<div class="site-shell">
<header class="site-header">
<RouterLink class="brand" :to="siteHome[site]" :aria-label="`${brand} ${copy.home}`">
<img src="/tala-mark.svg" width="31" height="31" alt="" />
<span>{{ brand }}</span>
</RouterLink>
<nav class="primary-nav" aria-label="Primary navigation">
<template v-if="site === 'language'">
<RouterLink to="/">{{ copy.home }}</RouterLink>
<RouterLink to="/docs/overview">{{ copy.overview }}</RouterLink>
<RouterLink to="/docs/getting-started">{{ copy.start }}</RouterLink>
<RouterLink to="/docs/syntax">{{ copy.syntax }}</RouterLink>
</template>
<a v-for="sibling in siblings" :key="sibling.href" :href="sibling.href">{{
sibling.label
}}</a>
<a :href="forumUrl">{{ copy.forum }}</a>
</nav>
<div class="header-tools">
<label class="language-control">
<span class="sr-only">{{ copy.language }}</span>
<select v-model="locale" :aria-label="copy.language">
<option v-for="supported in supportedLocales" :key="supported" :value="supported">
{{ localeLabels[supported] }}
</option>
</select>
</label>
<button class="icon-button" type="button" :aria-label="copy.theme" @click="toggleTheme">
{{ theme === "dark" ? "☀" : "◐" }}
</button>
<a
class="source-link"
href="https://github.com/Progmasoft/tala"
target="_blank"
rel="noopener noreferrer"
>{{ copy.source }} ↗</a
>
</div>
</header>
<main id="main"><RouterView /></main>
<footer class="site-footer">
<div>
<span class="footer-wordmark">Tala</span>
<p>{{ copy.footer }}</p>
</div>
<div class="footer-links">
<a :href="siteUrl('language', '/docs/overview', hostname)">{{ copy.overview }}</a
><a href="https://github.com/Progmasoft/tala/tree/main/Spec">Specification</a
><a href="https://github.com/Progmasoft/website">Website source</a>
</div>
<small>© 2026 Progmasoft</small>
</footer>
</div>
</template>
|