From b4df137211edfa74cb466a0261f19ce07be4164f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Leonardo=20Mur=C3=A7a?= Date: Tue, 3 Jun 2025 18:13:55 -0300 Subject: [PATCH] Add about section and fix some i18n loadings --- .svelte-kit/types/route_meta_data.json | 5 ++ .svelte-kit/types/src/routes/$types.d.ts | 6 ++- src/lib/components/LoadingTranslations.svelte | 49 ------------------- src/lib/translations/en-US/about.json | 4 ++ src/lib/translations/index.js | 30 +++++++++--- src/lib/translations/pt-BR/about.json | 4 ++ src/routes/+layout.js | 17 +++++++ src/routes/+layout.server.js | 11 +++-- src/routes/+layout.svelte | 19 ++----- src/routes/about/+page.svelte | 30 +++++++++++- 10 files changed, 99 insertions(+), 76 deletions(-) delete mode 100644 src/lib/components/LoadingTranslations.svelte create mode 100644 src/lib/translations/en-US/about.json create mode 100644 src/lib/translations/pt-BR/about.json create mode 100644 src/routes/+layout.js diff --git a/.svelte-kit/types/route_meta_data.json b/.svelte-kit/types/route_meta_data.json index b087fe6..37cb1f1 100644 --- a/.svelte-kit/types/route_meta_data.json +++ b/.svelte-kit/types/route_meta_data.json @@ -1,15 +1,20 @@ { "/": [ + "src/routes/+layout.js", "src/routes/+layout.server.js", + "src/routes/+layout.js", "src/routes/+layout.server.js" ], "/about": [ + "src/routes/+layout.js", "src/routes/+layout.server.js" ], "/donate": [ + "src/routes/+layout.js", "src/routes/+layout.server.js" ], "/viewer": [ + "src/routes/+layout.js", "src/routes/+layout.server.js" ] } \ No newline at end of file diff --git a/.svelte-kit/types/src/routes/$types.d.ts b/.svelte-kit/types/src/routes/$types.d.ts index d086b2b..6adbf91 100644 --- a/.svelte-kit/types/src/routes/$types.d.ts +++ b/.svelte-kit/types/src/routes/$types.d.ts @@ -20,9 +20,11 @@ type LayoutParentData = EnsureDefined<{}>; export type PageServerData = null; export type PageData = Expand; export type PageProps = { data: PageData } -export type LayoutServerLoad = OutputDataShape> = Kit.ServerLoad; +export type LayoutServerLoad & Record | void = Partial & Record | void> = Kit.ServerLoad; export type LayoutServerLoadEvent = Parameters[0]; export type LayoutServerData = Expand>>>>>; -export type LayoutData = Expand & EnsureDefined>; +export type LayoutLoad = OutputDataShape> = Kit.Load; +export type LayoutLoadEvent = Parameters[0]; +export type LayoutData = Expand>>> & OptionalUnion>>>>>; export type LayoutProps = { data: LayoutData; children: import("svelte").Snippet } export type RequestEvent = Kit.RequestEvent; \ No newline at end of file diff --git a/src/lib/components/LoadingTranslations.svelte b/src/lib/components/LoadingTranslations.svelte deleted file mode 100644 index 8147b0b..0000000 --- a/src/lib/components/LoadingTranslations.svelte +++ /dev/null @@ -1,49 +0,0 @@ - - - diff --git a/src/lib/translations/en-US/about.json b/src/lib/translations/en-US/about.json new file mode 100644 index 0000000..253df0e --- /dev/null +++ b/src/lib/translations/en-US/about.json @@ -0,0 +1,4 @@ +{ + "title": "ℹ About Embroidery Viewer", + "content": "

Hi there! 👋

⭐️ Embroidery Viewer was born out of a simple need — helping someone I care about. 💖

My girlfriend loves embroidery, but she often struggled to find an easy and free way to preview her embroidery design files before stitching them. Most tools she tried were either paid, overly complex, or required technical knowledge — and she’s not a techie.

So, to make things easier for her (and others like her), I decided to build this web application.

Over the course of a few weeks, I created Embroidery Viewer — a lightweight, fast, and free tool that lets you view embroidery files directly in your browser. No installation, no setup, and no tech hurdles. Just upload your file and see your design.

It’s not a super sophisticated tool, but it solves the problem it was meant to solve: making embroidery file previews accessible to everyone.

If this tool has helped you too, that makes me really happy! I plan to continue improving it based on feedback from users like you.

Thanks for stopping by — and happy stitching! 🧵✨

" +} diff --git a/src/lib/translations/index.js b/src/lib/translations/index.js index 6534c10..87c54be 100644 --- a/src/lib/translations/index.js +++ b/src/lib/translations/index.js @@ -17,7 +17,7 @@ export const SUPPORTED_LOCALES = Object.freeze({ /** @type {import('sveltekit-i18n').Config} */ const config = { initLocale: navigator.language, - fallbackLocale: SUPPORTED_LOCALES.PT_BR, + fallbackLocale: SUPPORTED_LOCALES.EN_US, loaders: [ { locale: SUPPORTED_LOCALES.EN_US, @@ -32,9 +32,15 @@ const config = { { locale: SUPPORTED_LOCALES.EN_US, key: 'home', - routes: [''], + routes: ['/'], loader: async () => (await import('./en-US/home.json')).default, }, + { + locale: SUPPORTED_LOCALES.EN_US, + key: 'about', + routes: ['/about'], + loader: async () => (await import('./en-US/about.json')).default, + }, { locale: SUPPORTED_LOCALES.PT_BR, key: 'header', @@ -48,15 +54,27 @@ const config = { { locale: SUPPORTED_LOCALES.PT_BR, key: 'home', - routes: [''], + routes: ['/'], loader: async () => (await import('./pt-BR/home.json')).default, }, + { + locale: SUPPORTED_LOCALES.PT_BR, + key: 'about', + routes: ['/about'], + loader: async () => (await import('./pt-BR/about.json')).default, + }, ], }; -export const { t, locale, locales, loading, loadTranslations } = new i18n( - config, -); +export const { + t, + locale, + locales, + loading, + loadTranslations, + setRoute, + setLocale, +} = new i18n(config); locale.subscribe(($locale) => { if (typeof document !== 'undefined') { diff --git a/src/lib/translations/pt-BR/about.json b/src/lib/translations/pt-BR/about.json new file mode 100644 index 0000000..633a50b --- /dev/null +++ b/src/lib/translations/pt-BR/about.json @@ -0,0 +1,4 @@ +{ + "title": "ℹ Sobre o Embroidery Viewer", + "content": "

Oi! 👋

⭐️ Embroidery Viewer nasceu de uma necessidade simples — ajudar alguém que eu amo. 💖

Minha namorada adora bordado, mas ela sempre teve dificuldades para encontrar uma maneira fácil e gratuita de visualizar os arquivos de design de bordado antes de começar a costurar. A maioria das ferramentas que ela tentou eram pagas, muito complexas ou exigiam conhecimento técnico — e ela não é da área de tecnologia.

Então, para facilitar a vida dela (e de outras pessoas como ela), decidi criar este aplicativo web.

Ao longo de algumas semanas, criei o Embroidery Viewer — uma ferramenta leve, rápida e gratuita que permite visualizar arquivos de bordado diretamente no navegador. Sem instalação, sem configuração e sem obstáculos técnicos. Basta enviar o arquivo e ver o design.

Não é uma ferramenta super sofisticada, mas resolve o problema para o qual foi criada: tornar a visualização de arquivos de bordado acessível para todos.

Se essa ferramenta também te ajudou, isso me deixa muito feliz! Pretendo continuar melhorando com base no feedback de usuários como você.

Obrigado por visitar — e bons bordados! 🧵✨

" +} diff --git a/src/routes/+layout.js b/src/routes/+layout.js new file mode 100644 index 0000000..89b2c80 --- /dev/null +++ b/src/routes/+layout.js @@ -0,0 +1,17 @@ +import { setLocale, setRoute } from '$lib/translations'; + +/** + * @typedef {Object} LayoutData + * @property {string} route + * @property {string} language + */ + +/** @type {import('@sveltejs/kit').Load} */ +export const load = async ({ data }) => { + const { route, language } = data ?? {}; + + if (route) await setRoute(route); + if (language) await setLocale(language); + + return data ?? {}; +}; diff --git a/src/routes/+layout.server.js b/src/routes/+layout.server.js index fa082de..195496e 100644 --- a/src/routes/+layout.server.js +++ b/src/routes/+layout.server.js @@ -1,5 +1,5 @@ import { parse } from 'accept-language-parser'; -import { loadTranslations } from '$lib/translations'; +import { loadTranslations, setLocale, setRoute } from '$lib/translations'; import { SUPPORTED_LOCALES } from '$lib/translations'; /** @@ -40,12 +40,15 @@ function localeFromHeader(header) { } /** @type {import('@sveltejs/kit').ServerLoad}*/ -export async function load({ request, cookies }) { +export async function load({ url, request, cookies }) { const cookieLocale = localeFromCookies(cookies); const headerLocale = localeFromHeader(request.headers.get('accept-language')); const language = cookieLocale || headerLocale || SUPPORTED_LOCALES.EN_US; + const route = url.pathname; - await loadTranslations(language); + await loadTranslations(language, route); + setLocale(language); + setRoute(route); - return { language }; + return { language, route }; } diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index b0a3784..324a7d4 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -1,22 +1,13 @@ -{#if !$loading && $locale !== undefined} -
-
- -
-