Put this computer first on the stores page

The page had two device tabs, both for hardware most visitors do not own. The
desktop store makes the third one the likeliest answer, so "This computer" is
added and selected by default, and /desktop redirects to it the way /batocera and
/retroarch already do.

Device names now come from i18n rather than the component: "Batocera" and
"RetroArch" are product names either way, but "This computer" has to be
translatable. Every key the page uses was checked to exist in both locales.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-08-18 10:00:39 +02:00
co-authored by Claude Opus 5
parent 3eedabce43
commit 201e422be6
4 changed files with 47 additions and 7 deletions
+12
View File
@@ -215,13 +215,25 @@ export default {
engineTitle: 'Run your own store',
engineDesc: 'Nothing here is specific to us. Each store is just a config file on top of an open engine that works with any WarpEngine-based site: point it at your own catalog, give it a name and a folder of its own, and your games land on a device the same way. The two engines share warpstore, which does the catalog side for both, so a third kind of device is an adapter and a config rather than a new program. Several stores can live side by side on one machine without touching each other\'s games.',
copy: 'Copy',
desktop: {
name: 'This computer',
site: 'Teletype Games',
tagline: 'Linux, macOS or Windows',
installDesc: 'Run this on the computer you want to play on. It downloads the games, installs them under your own user account and adds them to your application menu — no administrator rights, nothing installed system-wide.',
installNote: 'The native builds are tens of megabytes each, so the first run takes a while. Games we have no native build for get an entry that opens the browser version instead, and those need the network to play.',
useDesc: 'The store has a small CLI, and `paths` shows where things went on your machine:',
},
batocera: {
name: 'Batocera',
site: 'Batocera project',
tagline: 'The plug-and-play retro distribution',
installDesc: 'Run this over SSH on the Batocera box. It installs the engine, writes the config, creates the Ports entry and runs the first sync.',
installNote: 'Then restart EmulationStation so the games show up:',
useDesc: 'On the device: Ports ▸ "Teletype Games Store". Over SSH the store has a small CLI:',
},
retroarch: {
name: 'RetroArch',
site: 'RetroArch project',
tagline: 'Desktop, Android, Steam Deck, handhelds',
installDesc: 'Run this on the machine RetroArch is installed on. It reads your retroarch.cfg to find where your playlists, thumbnails and cores live, then writes one playlist per platform with box art.',
installNote: 'Restart RetroArch afterwards — it builds its menu at startup. If the VICE x64 and TIC-80 cores are missing it still works, and RetroArch asks which core to use the first time.',
+12
View File
@@ -215,13 +215,25 @@ export default {
engineTitle: 'Csinálj saját store-t',
engineDesc: 'Itt semmi sem ránk van szabva. Mindkét store csak egy konfigurációs fájl egy nyílt motor fölött, ami bármilyen WarpEngine alapú oldallal működik: állítsd a saját katalógusodra, adj neki nevet és saját mappát, és a játékaid ugyanígy kerülnek fel egy gépre. A két motor a warpstore-on osztozik, ami mindkettőnek a katalógus-oldalt viszi, tehát egy harmadik fajta gép már csak egy adapter és egy konfiguráció, nem új program. Egy gépen több store is megfér egymás mellett anélkül, hogy egymás játékaihoz nyúlnának.',
copy: 'Másolás',
desktop: {
name: 'Ez a gép',
site: 'Teletype Games',
tagline: 'Linux, macOS vagy Windows',
installDesc: 'Futtasd azon a gépen, amin játszani szeretnél. Letölti a játékokat, a saját felhasználód alá telepíti őket, és felveszi az alkalmazás-menüdbe — nem kell rendszergazdai jog, és semmi nem kerül a rendszerbe.',
installNote: 'A natív buildek egyenként több tíz megabájtosak, ezért az első futás eltart egy ideig. Amihez nincs natív buildünk, ahhoz a böngészős változatot megnyitó bejegyzés kerül a menübe — azokhoz internet kell.',
useDesc: 'A store-nak van egy egyszerű CLI-je, a `paths` pedig megmutatja, hova került minden a gépeden:',
},
batocera: {
name: 'Batocera',
site: 'Batocera projekt',
tagline: 'A plug-and-play retró disztribúció',
installDesc: 'Futtasd ezt SSH-n a Batocera gépen. Telepíti a motort, kiírja a konfigurációt, létrehozza a Ports bejegyzést és lefuttatja az első szinkront.',
installNote: 'Utána indítsd újra az EmulationStationt, hogy megjelenjenek a játékok:',
useDesc: 'A gépen: Ports ▸ „Teletype Games Store”. SSH-n keresztül egy egyszerű CLI áll rendelkezésre:',
},
retroarch: {
name: 'RetroArch',
site: 'RetroArch projekt',
tagline: 'Asztali gép, Android, Steam Deck, kézikonzol',
installDesc: 'Futtasd azon a gépen, amin a RetroArch van. A retroarch.cfg-ből olvassa ki, hol vannak a playlistjeid, a borítóképek és a magok, majd platformonként egy playlistet ír borítóképpel.',
installNote: 'Utána indítsd újra a RetroArch-ot — a menüt indulásnál építi. Ha a VICE x64 és a TIC-80 mag nincs telepítve, akkor is működik: a RetroArch az első indításnál rákérdez, melyik maggal futtassa.',
@@ -26,7 +26,7 @@
@click="select(d.id)"
>
<i :class="d.icon" class="st-device-icon"></i>
<span class="st-device-name">{{ d.name }}</span>
<span class="st-device-name">{{ t(`stores.${d.id}.name`) }}</span>
<span class="st-device-tagline">{{ t(`stores.${d.id}.tagline`) }}</span>
</button>
</div>
@@ -39,7 +39,7 @@
<i class="fa-solid fa-book"></i> {{ t('stores.docs') }}
</a>
<a :href="current.projectUrl" target="_blank" rel="noopener noreferrer" class="st-link st-link-emerald">
<i :class="current.icon"></i> {{ current.name }}
<i :class="current.icon"></i> {{ t(`stores.${device}.site`) }}
</a>
</div>
</section>
@@ -123,15 +123,15 @@ const router = useRouter()
const FORGE = 'https://git.teletypegames.org/stores'
const ENGINES_FORGE = 'https://git.teletypegames.org/engines'
type DeviceId = 'batocera' | 'retroarch'
type DeviceId = 'desktop' | 'batocera' | 'retroarch'
const BATOCERA_CLI = '/userdata/system/batocera-store/ttg-store'
const RETROARCH_CLI = '~/.local/bin/ttg-retroarch-store'
const DESKTOP_CLI = '~/.local/bin/ttg-desktop-store'
const devices = [
{
id: 'batocera' as DeviceId,
name: 'Batocera',
icon: 'fa-solid fa-tv',
projectUrl: 'https://batocera.org',
repoUrl: `${FORGE}/ttg-batocera-store`,
@@ -147,9 +147,24 @@ const devices = [
`${BATOCERA_CLI} remove c64demo`,
].join('\n'),
},
{
id: 'desktop' as DeviceId,
icon: 'fa-solid fa-desktop',
projectUrl: 'https://teletypegames.org',
repoUrl: `${FORGE}/ttg-desktop-store`,
wikiUrl: `${CONFIG.wikiBase}/stores/ttg-desktop-store`,
installCmd: `curl -fsSL ${FORGE}/ttg-desktop-store/raw/branch/master/install.sh | sh`,
afterInstallCmd: '',
uninstallCmd: `curl -fsSL ${FORGE}/ttg-desktop-store/raw/branch/master/uninstall.sh | sh`,
cliSnippet: [
`${DESKTOP_CLI} paths # where things go on this machine`,
`${DESKTOP_CLI} list # what is installable here, and how`,
`${DESKTOP_CLI} sync # install everything new`,
`${DESKTOP_CLI} remove pong`,
].join('\n'),
},
{
id: 'retroarch' as DeviceId,
name: 'RetroArch',
icon: 'fa-solid fa-gamepad',
projectUrl: 'https://www.retroarch.com',
repoUrl: `${FORGE}/ttg-retroarch-store`,
@@ -170,7 +185,7 @@ const devices = [
// redirect here without losing which store the visitor came for.
const initial = devices.some((d) => d.id === route.query.device)
? (route.query.device as DeviceId)
: 'batocera'
: 'desktop'
const device = ref<DeviceId>(initial)
const current = computed(() => devices.find((d) => d.id === device.value) ?? devices[0])
@@ -226,7 +241,7 @@ const engines = [
}
.st-devices {
@apply grid grid-cols-1 sm:grid-cols-2 gap-3 mb-6;
@apply grid grid-cols-1 sm:grid-cols-3 gap-3 mb-6;
}
.st-device {
@apply flex flex-col items-start gap-1 text-left bg-gray-50 border-2 border-gray-100 rounded-xl px-4 py-3 transition-all hover:border-emerald-200 active:scale-95;
@@ -7,4 +7,5 @@ export const storesRouter: RouteRecordRaw[] = [
// makes after reading "RetroArch store" — and each lands on its own tab.
{ path: '/batocera', redirect: { name: 'storesIndex', query: { device: 'batocera' } } },
{ path: '/retroarch', redirect: { name: 'storesIndex', query: { device: 'retroarch' } } },
{ path: '/desktop', redirect: { name: 'storesIndex', query: { device: 'desktop' } } },
]