Skip to content

Commit

Permalink
Update README, format
Browse files Browse the repository at this point in the history
  • Loading branch information
rinart73 committed Jul 9, 2023
1 parent f08d91e commit 98ec483
Show file tree
Hide file tree
Showing 3 changed files with 65 additions and 41 deletions.
92 changes: 58 additions & 34 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,58 +1,82 @@
# create-svelte
# Localize URL [![NPM lite-youtube-embed package](https://img.shields.io/npm/v/sveltekit-localize-url.svg)](https://npmjs.org/package/sveltekit-localize-url)

Everything you need to build a Svelte library, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
**SvelteKit library that handles URL localization and routing.**

Read more about creating a library [in the docs](https://kit.svelte.dev/docs/packaging).
> **Note**
> This package is WIP. It works but the future updates may introduce breaking changes to simplify setup or introduce features.
## Creating a project
## Features

If you're seeing this, you've probably already done this step. Congrats!
- Supports 3 URL structure types:
- Locale prefix except for the base locale (default) - `/about`, `/ru/o-nas`;
- Prefix for every locale - `/en/about`, `/ru/o-nas`;
- Separate domains for locales - `example.com/about`, `example.ru/o-nas`.
- Validates current URL:
- Redirects `/ru/about-us` to the corrected `/ru/o-nas`;
- Supports partially localized pages - throws 404 if a page isn’t available for the requested locale.
- Helps to build localized URLs;
- Builds alternate URLs for the `<link rel="alternate"` tags and for a language switcher;
- Supports dynamic params that depend on the server (such as localized post slugs).

```bash
# create a new project in the current directory
npm create svelte@latest
## Interactive Live Demo

# create a new project in my-app
npm create svelte@latest my-app
```
Soon

## Developing
## Compatibility

Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
This library was initially created to be used with the [typesafe-i18n](https://github.com/ivanhofer/typesafe-i18n) library, but should work fine with any i18n library (or even without one).

```bash
npm run dev
## Installation

# or start the server and open the app in a new browser tab
npm run dev -- --open
```
npm install sveltekit-localize-url
```

Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
## Usage

## Building
Please take a look the [example](https://github.com/rinart73/sveltekit-localize-url/tree/main/src) for the full setup.

To build your library:
## How does it work?

```bash
npm run package
```
Let's imagine that:

To create a production version of your showcase app:
- Your default/base locale is `en` and enabled locales are `en`, `ru` and `it`;
- You have the following structure: `/[[lang=lang]]/[l_about=l_about]`;
- Your `l_about` param is registered like this:

```bash
npm run build
```typescript
// src/params/l_about.ts
import { localizeParam, matchParam } from 'sveltekit-localize-url';

const localizedParam = localizeParam(1, 'l_about', {
en: 'about-us',
ru: 'o-nas'
// there is version in Italian
});
export const match: ParamMatcher = (param) => matchParam(param, localizedParam);
```

You can preview the production build with `npm run preview`.
When SvelteKit will match params, it will decide that **all of following paths are valid**:

> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
- `/about-us`
- `/en/about-us`
- `/ru/about-us`
- `/it/about-us`
- `/o-nas`
- `/en/o-nas`
- `/ru/o-nas`
- `/it/o-nas`

## Publishing
However the `validateUrlLocale()` function that is called in the `src/routes/[[lang=lang]]/+layout.ts` will take care of that by taking registered params and using them to construct a correct path for the current locale.

Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
- If the paths match, proceed;
- If the paths don't match, redirect to a corrected URL;
- If it can't construct a path for the current locale, throw 404.

To publish your library to [npm](https://www.npmjs.com):
So in the end we'll get the following:

```bash
npm publish
```
- `/about-us` - Correct;
- `/ru/o-nas` - Correct;
- `/o-nas`, `/en/about-us`, `/en/o-nas` - Redirect to `/about-us`;
- `/ru/about-us` - Redirect to `/ru/o-nas`;
- `/it/about-us`, `/it/o-nas` - 404 Not Found.
10 changes: 5 additions & 5 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
{
"name": "sveltekit-localize-url",
"description": "SvelteKit library that handles URL localization.",
"version": "0.1.0",
"author": "Rinart73",
"license": "MIT",
"homepage": "https://github.com/rinart73/sveltekit-localize-url",
"description": "SvelteKit library that handles URL localization and routing.",
"version": "0.1.1",
"author": "Rinart73",
"license": "MIT",
"homepage": "https://github.com/rinart73/sveltekit-localize-url",
"repository": {
"type": "git",
"url": "https://github.com/rinart73/sveltekit-localize-url"
Expand Down
4 changes: 2 additions & 2 deletions src/styles/global.scss
Original file line number Diff line number Diff line change
Expand Up @@ -87,5 +87,5 @@ nav {
}

article {
margin-bottom: 1em;
}
margin-bottom: 1em;
}

0 comments on commit 98ec483

Please sign in to comment.