sofia/website
Archived
1
0
Fork 0
Code Issues 3 Pull requests Projects Releases Packages Wiki Activity

Add initial support for post translation

Browse source 
- 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:
Sofía Aritz 2023-01-08 21:19:30 +01:00
parent 77739d387f
commit 91b632ac2d
2 changed files with 91 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
src/lib/posts/FirstPost.svelte
View file

@ -1,8 +1,10 @@
<script>
import Post from "./Post.svelte";
const SUPPORTED_LANGS = ["es", "en"]
</script>
<Post>
<Post lang="es" langs={SUPPORTED_LANGS}>
<svelte:fragment slot="title">Primer post!</svelte:fragment>
<small slot="subtitle">01 Enero 2023 | Sofía Aritz</small>
<div slot="post">
@ -20,3 +22,21 @@
</p>
</div>
</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>

78
src/lib/posts/Post.svelte
View file

@ -1,9 +1,71 @@
<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>
<slot name="post">
<div>
<i>Post vacío</i>
<script>
import {Link, useLocation} from "svelte-navigator";
import {onMount} from "svelte";
const LIBRE_TRANSLATE_ENDPOINT = "https://libretranslate.com/?source=es&target=en"
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>
</slot>
</div>
{#if lang !== "es"}
<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>