cupcakearmy/svelte-i18n
1
0
Fork 0
mirror of https://github.com/cupcakearmy/svelte-i18n.git synced 2024-11-16 09:59:58 +01:00
Code Issues Packages Projects Releases Wiki Activity

docs: ✏️ update example

Browse Source
This commit is contained in:
Christian Kaisermann 2019-11-21 23:34:43 -03:00
parent 233842baa2
commit 7c443179b2
8 changed files with 119 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
example/messages/default.json
View File

@ -11,5 +11,10 @@
"success": "Great success!",
"high_five": "High five",
"try_editing": "Try editing this file (src/routes/index.svelte) to test live reloading."
},
"languages": {
"pt_BR": "",
"en": "",
"es_ES": ""
}
}

5
example/messages/en.json
View File

@ -11,5 +11,10 @@
"success": "Great success!",
"high_five": "High five",
"try_editing": "Try editing this file (src/routes/index.svelte) to test live reloading."
},
"languages": {
"pt_BR": "Portugues",
"en": "English",
"es_ES": "Spanish"
}
}

5
example/messages/es-ES.json
View File

@ -11,5 +11,10 @@
"success": "Gran éxito!",
"high_five": "Cinco altos",
"try_editing": " Intente editar este archivo (src/routes/index.svelte) para probar la recarga en vivo."
},
"languages": {
"pt_BR": "Portugués",
"en": "Ingles",
"es_ES": "Espanol"
}
}

5
example/messages/pt-BR.json
View File

@ -11,5 +11,10 @@
"success": "Suuuucesso!",
"high_five": "Toca aqui",
"try_editing": "Tente editar este arquivo (src/routes/index.svelte) para testar o recarregamento ao vivo."
},
"languages": {
"pt_BR": "Português",
"en": "Inglês",
"es_ES": "Espanhol"
}
}

116
example/src/components/Nav.svelte
View File

@ -1,62 +1,86 @@
<script>
import { _ } from 'svelte-i18n'
export let segment;
import { _, locale, dictionary, locales } from 'svelte-i18n'
export let segment
</script>
<style>
nav {
border-bottom: 1px solid rgba(255,62,0,0.1);
font-weight: 300;
padding: 0 1em;
}
nav {
border-bottom: 1px solid rgba(255, 62, 0, 0.1);
font-weight: 300;
padding: 0 1em;
display: flex;
justify-content: space-between;
}
ul {
margin: 0;
padding: 0;
}
ul {
margin: 0;
padding: 0;
}
/* clearfix */
ul::after {
content: '';
display: block;
clear: both;
}
/* clearfix */
ul::after {
content: '';
display: block;
clear: both;
}
li {
display: block;
float: left;
}
li {
display: block;
float: left;
}
.selected {
position: relative;
display: inline-block;
}
.selected {
position: relative;
display: inline-block;
}
.selected::after {
position: absolute;
content: '';
width: calc(100% - 1em);
height: 2px;
background-color: rgb(255,62,0);
display: block;
bottom: -1px;
}
.selected::after {
position: absolute;
content: '';
width: calc(100% - 1em);
height: 2px;
background-color: rgb(255, 62, 0);
display: block;
bottom: -1px;
}
a {
text-decoration: none;
padding: 1em 0.5em;
display: block;
}
a,
.a {
cursor: pointer;
text-decoration: none;
padding: 1em 0.5em;
display: block;
}
</style>
<nav>
<ul>
<li><a class:selected='{segment === undefined}' href='.'>{$_('nav.home')}</a></li>
<li><a class:selected='{segment === "about"}' href='about'>{$_('nav.about')}</a></li>
<ul>
<li>
<a class:selected={segment === undefined} href=".">{$_('nav.home')}</a>
</li>
<li>
<a class:selected={segment === 'about'} href="about">{$_('nav.about')}</a>
</li>
<!-- for the blog link, we're using rel=prefetch so that Sapper prefetches
<!-- for the blog link, we're using rel=prefetch so that Sapper prefetches
the blog data when we hover over the link or tap it on a touchscreen -->
<li><a rel=prefetch class:selected='{segment === "blog"}' href='blog'>{$_('nav.blog')}</a></li>
</ul>
<li>
<a rel="prefetch" class:selected={segment === 'blog'} href="blog">
{$_('nav.blog')}
</a>
</li>
</ul>
<ul class="lang">
{#each $locales as item}
<li>
<span
class="a"
class:selected={$locale.includes(item)}
href={`#!${item}`}
on:click={() => ($locale = item)}>
{item.replace('-', '_')}
</span>
</li>
{/each}
</ul>
</nav>

17
example/src/routes/_layout.svelte
View File

@ -1,5 +1,5 @@
<script context="module">
import { locales, locale, isLoading, waitInitialLocale } from 'svelte-i18n'
import { isLoading, waitInitialLocale } from 'svelte-i18n'
export async function preload() {
return waitInitialLocale({
@ -12,13 +12,6 @@
<script>
import Nav from '../components/Nav.svelte'
const localeLabels = {
'pt-BR': 'Português',
en: 'English',
'en-US': 'English US',
'es-ES': 'Espanõl',
}
export let segment
</script>
@ -54,13 +47,7 @@
{/if}
<Nav {segment} />
<main>
<select bind:value={$locale}>
{#each $locales as locale}
{#if locale in localeLabels}
<option value={locale}>{localeLabels[locale]}</option>
{/if}
{/each}
</select>
<slot />
</main>

1
package.json
View File

@ -80,6 +80,7 @@
"estree-walker": "^0.9.0",
"fast-memoize": "^2.5.1",
"intl-messageformat": "^7.5.2",
"messageformat": "^2.3.0",
"nano-memoize": "^1.1.7",
"object-resolve-path": "^1.1.1",
"tiny-glob": "^0.2.6"

26
yarn.lock
View File

@ -3434,6 +3434,13 @@ make-error@1.x:
resolved "https://registry.yarnpkg.com/make-error/-/make-error-1.3.5.tgz#efe4e81f6db28cadd605c70f29c831b58ef776c8"
integrity sha512-c3sIjNUow0+8swNwVpqoH4YCShKNFkMaw6oH1mNS2haDZQqkeZFlHS3dhoeEbKKmJB4vXpJucU6oH75aDYeE9g==
make-plural@^4.3.0:
version "4.3.0"
resolved "https://registry.yarnpkg.com/make-plural/-/make-plural-4.3.0.tgz#f23de08efdb0cac2e0c9ba9f315b0dff6b4c2735"
integrity sha512-xTYd4JVHpSCW+aqDof6w/MebaMVNTVYBZhbB/vi513xXdiPT92JMVCo0Jq8W2UZnzYRFeVbQiQ+I25l13JuKvA==
optionalDependencies:
minimist "^1.2.0"
makeerror@1.0.x:
version "1.0.11"
resolved "https://registry.yarnpkg.com/makeerror/-/makeerror-1.0.11.tgz#e01a5c9109f2af79660e4e8b9587790184f5a96c"
@ -3458,6 +3465,25 @@ merge-stream@^2.0.0:
resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"
integrity sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==
messageformat-formatters@^2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/messageformat-formatters/-/messageformat-formatters-2.0.1.tgz#0492c1402a48775f751c9b17c0354e92be012b08"
integrity sha512-E/lQRXhtHwGuiQjI7qxkLp8AHbMD5r2217XNe/SREbBlSawe0lOqsFb7rflZJmlQFSULNLIqlcjjsCPlB3m3Mg==
messageformat-parser@^4.1.2:
version "4.1.2"
resolved "https://registry.yarnpkg.com/messageformat-parser/-/messageformat-parser-4.1.2.tgz#fd34ec39912a14868a1595eaeb742485ab8ab372"
integrity sha512-7dWuifeyldz7vhEuL96Kwq1fhZXBW+TUfbnHN4UCrCxoXQTYjHnR78eI66Gk9LaLLsAvzPNVJBaa66DRfFNaiA==
messageformat@^2.3.0:
version "2.3.0"
resolved "https://registry.yarnpkg.com/messageformat/-/messageformat-2.3.0.tgz#de263c49029d5eae65d7ee25e0754f57f425ad91"
integrity sha512-uTzvsv0lTeQxYI2y1NPa1lItL5VRI8Gb93Y2K2ue5gBPyrbJxfDi/EYWxh2PKv5yO42AJeeqblS9MJSh/IEk4w==
dependencies:
make-plural "^4.3.0"
messageformat-formatters "^2.0.1"
messageformat-parser "^4.1.2"
micromatch@^3.1.10, micromatch@^3.1.4:
version "3.1.10"
resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-3.1.10.tgz#70859bc95c9840952f359a068a3fc49f9ecfac23"