mirror of
https://codeberg.org/sofiaritz/website.git
synced 2023-09-06 01:24:41 +00:00
Add initial support for post translation
- The `Post` component now accepts the props `lang` and `langs` that indicate which languages are supported and which language is that post. - Posts now accept a `?lang` query param to ask for a specific lang - If only one lang is supported, a link is created to a LibreTranslate endpoint that contains the post. Translation right now is done just from Spanish to English (though the user can choose other languages in the LibreTranslate UI) - Added default notice for non-spanish posts about the fact that I'm not native and that grammar/wording issues can be reported on the Codeberg repo
This commit is contained in:
parent
77739d387f
commit
91b632ac2d
2 changed files with 91 additions and 9 deletions
|
|
@ -1,8 +1,10 @@
|
||||||
<script>
|
<script>
|
||||||
import Post from "./Post.svelte";
|
import Post from "./Post.svelte";
|
||||||
|
|
||||||
|
const SUPPORTED_LANGS = ["es", "en"]
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Post>
|
<Post lang="es" langs={SUPPORTED_LANGS}>
|
||||||
<svelte:fragment slot="title">Primer post!</svelte:fragment>
|
<svelte:fragment slot="title">Primer post!</svelte:fragment>
|
||||||
<small slot="subtitle">01 Enero 2023 | Sofía Aritz</small>
|
<small slot="subtitle">01 Enero 2023 | Sofía Aritz</small>
|
||||||
<div slot="post">
|
<div slot="post">
|
||||||
|
|
@ -20,3 +22,21 @@
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</Post>
|
</Post>
|
||||||
|
|
||||||
|
<Post lang="en" langs={SUPPORTED_LANGS}>
|
||||||
|
<svelte:fragment slot="title">First post!</svelte:fragment>
|
||||||
|
<small slot="subtitle">01 January 2023 | Sofía Aritz</small>
|
||||||
|
<div slot="post">
|
||||||
|
<p>
|
||||||
|
This is my first post! You can subscribe to the <a href="/blog/feed.rss">feed</a> to be up-to-date with
|
||||||
|
whatever I add here :)
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
The objective of this weblog is to talk about the things I find at the Internet and to talk about computer
|
||||||
|
stuff. Some post may be quite technical while others may be quite personal.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
With that being said, I wish everyone one a happy new year ;p
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</Post>
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,71 @@
|
||||||
<div>
|
<script>
|
||||||
<h1><slot name="title"><i>Sin título</i></slot></h1>
|
import {Link, useLocation} from "svelte-navigator";
|
||||||
<slot name="subtitle"><small><i>Fecha desconocida</i> | <i>Autor desconocido</i></small></slot>
|
import {onMount} from "svelte";
|
||||||
<slot name="post">
|
|
||||||
<div>
|
const LIBRE_TRANSLATE_ENDPOINT = "https://libretranslate.com/?source=es&target=en"
|
||||||
<i>Post vacío</i>
|
|
||||||
|
export let lang = "es"
|
||||||
|
export let langs = ["es"]
|
||||||
|
|
||||||
|
let location = useLocation()
|
||||||
|
$: is_lang = lang === "es" ? ($location.search.includes(`lang=${lang}`) || !$location.search.includes("lang=")) : $location.search.includes(`lang=${lang}`)
|
||||||
|
|
||||||
|
let libre_translate_link = LIBRE_TRANSLATE_ENDPOINT
|
||||||
|
onMount(() => {
|
||||||
|
libre_translate_link = `${LIBRE_TRANSLATE_ENDPOINT}&q=${encodeURIComponent(document.getElementById("post").textContent)}`
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#if is_lang}
|
||||||
|
<div>
|
||||||
|
<h1><slot name="title"><i>Sin título</i></slot></h1>
|
||||||
|
<slot name="subtitle"><small><i>Fecha desconocida</i> | <i>Autor desconocido</i></small></slot>
|
||||||
|
{#if langs.length > 1}
|
||||||
|
<div class="translation-container">
|
||||||
|
{#each langs as lang}
|
||||||
|
<small class="translation-link">
|
||||||
|
<Link to={`${$location.pathname}?lang=${lang}`}>{lang.toUpperCase()}</Link>
|
||||||
|
</small>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
{:else}
|
||||||
|
<div class="translation-container">
|
||||||
|
<small class="translation-link">
|
||||||
|
<Link to={`${$location.pathname}?lang=${langs[0]}`}>{langs[0].toUpperCase()}</Link>
|
||||||
|
</small>
|
||||||
|
<small class="translation-link">
|
||||||
|
<a href={libre_translate_link}>LibreTranslate</a>
|
||||||
|
</small>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
<div id="post">
|
||||||
|
<slot name="post">
|
||||||
|
<div>
|
||||||
|
<i>Post vacío</i>
|
||||||
|
</div>
|
||||||
|
</slot>
|
||||||
</div>
|
</div>
|
||||||
</slot>
|
{#if lang !== "es"}
|
||||||
</div>
|
<hr>
|
||||||
|
<small>
|
||||||
|
<i>
|
||||||
|
Note: I'm not native. If you find any weird grammar or any error, please
|
||||||
|
<a href="https://codeberg.org/sofiaritz/website/issues">open an issue</a> :)
|
||||||
|
</i>
|
||||||
|
</small>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.translation-container {
|
||||||
|
display: inline-block;
|
||||||
|
margin-left: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.translation-link {
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: 5px;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue