From 91b632ac2d42a0d950d040877795fe72de05cbad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sof=C3=ADa=20Aritz?= <sofi@sofiaritz.com>
Date: Sun, 8 Jan 2023 21:19:30 +0100
Subject: [PATCH] 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
---
 src/lib/posts/FirstPost.svelte | 22 +++++++++-
 src/lib/posts/Post.svelte      | 78 ++++++++++++++++++++++++++++++----
 2 files changed, 91 insertions(+), 9 deletions(-)

diff --git a/src/lib/posts/FirstPost.svelte b/src/lib/posts/FirstPost.svelte
index 2e4d6dd..1fafd79 100644
--- a/src/lib/posts/FirstPost.svelte
+++ b/src/lib/posts/FirstPost.svelte
@@ -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>
diff --git a/src/lib/posts/Post.svelte b/src/lib/posts/Post.svelte
index 68252b2..82198b9 100644
--- a/src/lib/posts/Post.svelte
+++ b/src/lib/posts/Post.svelte
@@ -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>