https://github.com/ivanhofer/typesafe-i18n-demo-sveltekit

A small project demonstrating a `typesafe-i18n` integration with SvelteKit
https://github.com/ivanhofer/typesafe-i18n-demo-sveltekit

i18n sveltekit template typescript

Last synced: 17 days ago
JSON representation

A small project demonstrating a `typesafe-i18n` integration with SvelteKit

• Host: GitHub
• URL: https://github.com/ivanhofer/typesafe-i18n-demo-sveltekit
• Owner: ivanhofer
• Created: 2021-11-07T12:51:54.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2023-08-27T09:04:54.000Z (about 1 year ago)
• Last Synced: 2024-10-14T08:46:20.577Z (30 days ago)
• Topics: i18n, sveltekit, template, typescript
• Language: TypeScript
• Homepage: https://typesafe-i18n-demo-sveltekit.vercel.app
• Size: 232 KB
• Stars: 129
• Watchers: 6
• Forks: 18
• Open Issues: 3
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# typesafe-i18n demo sveltekit

**Here is a [video](https://www.youtube.com/watch?v=C6O5pMMMTG0) for better context.** _SvelteKit has undergone some major changes since this video was published. For the most up-to-date way of handling i18n, please refer to the code in this repository._

This example demonstrates a [`typesafe-i18n`](https://github.com/ivanhofer/typesafe-i18n)-integration with [SvelteKit](https://kit.svelte.dev/).

[!IMPORTANT]  

Make sure you adopt `app.d.ts` for full TypeScript type inference. More context [here]([url](https://github.com/ivanhofer/typesafe-i18n/discussions/717#discussioncomment-6640503))

### LIVE-DEMO: https://typesafe-i18n-demo-sveltekit.vercel.app

It is a basic example and shows:

-  basic i18n setup of three different locales

-  auto-detecting user language preferences

-  full SSR support

-  SEO optimizations

-  locale switching

-  lazy loading of locales

-  persistent locale state via language routes

-  typesafety features of `typesafe-i18n`

-  plural rules

-  locale specific date-formatting

-  [`rel="alternate"` links](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel#attr-alternate)

-  [`hreflang` attribute](https://developer.mozilla.org/de/docs/Web/HTML/Element/a#attr-hreflang)

What is missing:

-  opinion how to localize slugs\

   this highly depends where your data comes from. This will probably differ from project to project.

## JavaScript version

You can find the exact same example in a JavaScript only version [here](https://github.com/ivanhofer/typesafe-i18n-demo-sveltekit-jsdoc).\

It offers the same typesafety features but instead of TypeScript files it is written in JavaScript with JsDoc comments.

## learn more

If you want to know more about `typesafe-i18n` head over to the main repo:

### https://github.com/ivanhofer/typesafe-i18n