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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
|
<!-- 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 { contentRoutes } from "./content/routes";
import { forumUrl, site, siteBrand, siteHome, sites, siteTopics, 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 = siteBrand[site];
// The other sites are linked by their names, which read the same in every language.
const siblings = sites
.filter((other): other is Site => other !== site)
.map((other) => ({
label: siteBrand[other],
href: siteUrl(other, siteHome[other], hostname),
}));
// Talac and Tazel list their documentation topics in the header, by the names their sidebars use.
const topicLinks = computed(() =>
siteTopics[site].map((path) => {
const route = contentRoutes[site].find((candidate) => candidate.path === path);
return { path, label: route ? route.topic[locale.value].nav : path };
}),
);
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="/" :aria-label="`${brand} ${copy.home}`">
<img src="/tala-mark.svg" width="31" height="31" alt="" />
<span>{{ brand }}</span>
</RouterLink>
<span class="status-badge">{{ copy.status }}</span>
<nav class="primary-nav" aria-label="Primary navigation">
<template v-if="site === 'language'">
<RouterLink to="/docs/overview">{{ copy.overview }}</RouterLink>
<RouterLink to="/docs/getting-started">{{ copy.start }}</RouterLink>
<RouterLink to="/docs/syntax">{{ copy.syntax }}</RouterLink>
</template>
<template v-else>
<RouterLink v-for="topic in topicLinks" :key="topic.path" :to="topic.path">{{
topic.label
}}</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>
|