Spanish website translation + Hability to localize the site

config.toml → config/_default/config.toml

@@ -1,10 +1,7 @@
 baseURL = "https://florisboard.org/"
-languageCode = "en-US"
+defaultContentLanguage = "en"
 disableKinds = ["RSS", "taxonomy", "taxonomyTerm"]
 assetDir = "src"
 enableRobotsTXT = true
 
 title = "FlorisBoard"
-
-[params]
-description = "An open-source keyboard for Android which respects your privacy. Currently in early-beta."

config/_default/translations/languages.en.toml

@@ -0,0 +1,3 @@
+contentDir = "content/en"
+weight = 1
+languageCode = "en-US"

config/_default/translations/languages.es.toml

@@ -0,0 +1,3 @@
+contentDir = "content/es"
+weight = 2
+languageCode = "es-ES"

content/es/legal/privacy.md

@@ -0,0 +1,42 @@
+---
+title: "Política de privacidad"
+description: "Política de privacidad de FlorisBoard que explica el acceso y uso de tus datos personales"
+lastmod: "2022-08-25"
+---
+
+FlorisBoard (el "Proyecto") es un teclado libre que respeta la privacidad, desarrollado y mantenido principalmente por Patrick Goldinger ([@patrickgold](https://github.com/patrickgold)), junto al increíble apoyo de la comunidad de este proyecto. Esta política de privacidad existe para darte un mejor entendimiento de los datos a los que se debe de acceder y/o almacenar localmente por lo menos para proveerte con un servicio de teclado.
+
+## Acceso y uso a los datos
+
+El compromiso principal de este proyecto es acceder y almacenar a los mínimos datos personales posibles mientras que se provee una buena experiencia personalizada. Cualquier datos personales a los que se acceda o que se almacenen se mantienen exclusivamente localmente,!ªQ en memoria o en el directorio de datos privados de la aplicación, y **nunca** se comparten con nadie.
+
+### ¿A qué datos personales accede FlorisBoard y por qué?
+
+En cualquier momento que enfoques una área de texto y FlorisBoard sea el método de entrada por defecto (el "IME"), FlorisBoard tiene acceso a los contenidos completos de esa área de texto. Monitorizará y almacenará una pequeña ventana alrededor del cursor en memoria para ayudar a hacer un seguimiento del estado actual y mejorar el rendimiento. Adicionalmente, como un IME por defecto, FlorisBoard tiene acceso al portapapeles del sistema y lo monitoriza para proveerte con las características del portapapeles. Más allá, FlorisBoard tiene acceso al diccionario de usuario del sistema, aunque solo leyendo los contenidos si la comprobación ortográfica, las sugerencias, o la escritura por deslizamiento están activadas.
+
+A menos que enuncie de otra manera en la siguiente sección, cualquiera de los datos personales a los que se acceda solo se almacenan temporalmente en memoria, y se descartarán cuando el campo de texto pierda el enfoque o el proceso del teclado termine.
+
+### ¿Qué datos personales guarda FlorisBoard y por qué?
+
+Algunas de las características requieren datos personales que se persistan de manera local en el disco, para poder ser reutilizados más tarde. Esto se aplica a:
+
+- **Comprobación ortográfica, sugerencias y escritura por deslizamiento**
+  Para poder crear diccionarios personales automáticamente y proveer sugerencias dinámicas basadas en tus entradas anteriores, FlorisBoard tiene que monitorizar tu comportamiento de escritura, aprender de él y guardar los resultados localmente. El monitorizado del comportamiento de escritura se para completamente si el teclado está en modo incógnito, o si no hay ninguna característica habilitada que requiera esta opción.
+- **Historial del portapapeles**
+  Para poder almacenar y mostrar múltiples ítems del portapapeles, FlorisBoard almacena los ítems del portapapeles en una base de datos local. La base de datos solo se mantiene y se usa si la característica de historial del portapapeles está habilitada.
+
+### ¿Alguno de los datos personales almacenados deja el dispositivo?
+
+No. Cualquier dato personal que persista se almacena localmente y **nunca** deja tu dispositivo.
+
+## Otro
+
+Para información sobre la lista de permisos pedidos por FlorisBoard, por favor, lee [este](https://github.com/florisboard/florisboard/wiki/List-of-perimssions-Florisboard-requests) documento.
+
+### Actualizaciones de esta política de privacidad
+
+Nos reservamos el derecho de revisar y actualizar esta política periódicamente. Los cambios a está política se anunciarán públicamente y se enlazarán en el correspondiente conjunto de cambios de la versión en la que la nueva política tome efecto. El uso continuado de FlorisBoard se considerará la aceptación de esos cambios.
+
+### Contacto
+
+Si tienes preguntas adicionales, comentarios o preocupaciones con respecto a esta política de privacidad, por favor ponte en contacto con [[email protected]](mailto:[email protected]) o presenta una incidencia en el [gestor de incidencias](https://github.com/florisboard/florisboard/issues) de FlorisBoard.

i18n/en.toml

@@ -0,0 +1,23 @@
+[repo]
+    other = "Visit GitHub repo"
+
+[privacy]
+    other = "Privacy policy"
+
+[not-found]
+    other = "The requested resource could not be found. Please check the address and try again."
+
+[footer]
+    other = "For more information and download options check out the GitHub repo!"
+
+[modified]
+    other = "Last modified"
+
+[florisboard-icon]
+    other = "FlorisBoard app icon"
+
+[florisboard-screenshot]
+    other = "Florisboard screenshot"
+
+[description]
+    other = "An open-source keyboard for Android which respects your privacy. Currently in early-beta."

i18n/es.toml

@@ -0,0 +1,23 @@
+[repo]
+    other = "Visitar el repositorio de GitHub"
+
+[privacy]
+    other = "Política de privacidad"
+
+[not-found]
+    other = "No se pudo encontrar el recurso solicitado. Por favor, comprueba la dirección y prueba otra vez"
+
+[footer]
+    other = "¡Para más información y opciones de descarga echa un vistazo al repositorio de GitHub!"
+
+[modified]
+    other = "Modificado por última vez el"
+
+[florisboard-icon]
+    other = "Icono de la aplicación FlorisBard"
+
+[florisboard-screenshot]
+    other = "Captura de pantalla de FlorisBoard"
+
+[description]
+    other = "Un teclado libre para Android que respeta tu privacidad. Actualmente en beta temprana."

layouts/404.html

@@ -1,3 +1,3 @@
 {{ define "main" }}
-<p style="color: red;">The requested resource could not be found. Please check the address and try again.</p>
+<p style="color: red;">{{ i18n "not-found" }}</p>
 {{ end }}

layouts/_default/single.html

@@ -1,5 +1,6 @@
 {{ define "main" }}
 <h1>{{ .Title }}</h1>
-{{ with .Lastmod }}<p class="last-modified">Last modified: {{ . | time.Format ":date_medium" }}</p>{{ end }}
+<!-- <p class="last-modified">{{ i18n "modified" }} {{ with .Lastmod }}{{ . | time.Format ":date_medium" }}</p>{{ end }} -->
+{{ with .Lastmod }}<p class="last-modified">{{ i18n "modified" }}: {{ . | time.Format ":date_medium" }}</p>{{ end }}
 {{ .Content }}
 {{ end }}

layouts/index.html

@@ -1,8 +1,8 @@
 {{ define "main" }}
 <main id="floris-main">
-    <p class="main-description">An open-source keyboard for Android which respects your privacy. Currently in early-beta.</p>
-    <img src="/images/florisboard-screenshot.jpeg" class="main-image" alt="FlorisBoard screenshot">
-    <p class="main-moreinfo">For more information and download options check out the GitHub repo!</p>
-    <a href="https://github.com/florisboard/florisboard" target="_blank">Visit GitHub repo</a>
+    <p class="main-description">{{ i18n "description" }}</p>
+    <img src="/images/florisboard-screenshot.{{ .Lang }}.jpeg" class="main-image" alt="{{ i18n "florisboard-screenshot" }}">
+    <p class="main-moreinfo">{{ i18n "footer" }}</p>
+    <a href="https://github.com/florisboard/florisboard" target="_blank">{{ i18n "repo" }}</a>
 </main>
 {{ end }}

layouts/partials/footer.html

@@ -1,3 +1,3 @@
 <footer id="floris-footer">
-    <span class="copyright">&copy; 2022 Patrick Goldinger</span>&nbsp;&bullet;&nbsp;<a href="/legal/privacy/">Privacy policy</a>
+    <span class="copyright">&copy; 2022 Patrick Goldinger</span>&nbsp;&bullet;&nbsp;<a href="{{ if (ne .Language.Lang "en") }}/{{ .Language.Lang }}{{ end }}/legal/privacy/">{{ i18n "privacy" }}</a>
 </footer>

layouts/partials/header.html

@@ -1,9 +1,19 @@
 <header id="floris-header">
     <a href="{{ .Site.BaseURL }}" class="floris-branding-banner">
-        <img src="/images/app-icon.png" alt="FlorisBoard app icon">
+        <img src="/images/app-icon.png" alt="{{ i18n "florisboard-icon" }}">
         <span>FlorisBoard</span>
     </a>
-    <a href="https://github.com/florisboard/florisboard" target="_blank">
-        <span>Visit GitHub repo</span>
-    </a>
+    <div>
+        <nav id="lang-select">
+            <input type="checkbox" id="lang">
+            <label for="lang" id="lang-label"><span>{{ $.Site.Language  }} ▼</span></label>
+
+            <div class="langs">
+                {{ range .AllTranslations }}{{ if (ne $.Lang .Lang)}}<p><a href="{{ .Permalink }}">{{ .Lang }}</a></p>{{ end }}{{ end}}
+            </div>
+        </nav>
+        <a href="https://github.com/florisboard/florisboard" target="_blank">
+            <span>{{ i18n "repo" }}</span>
+        </a>
+    </div>
 </header>

src/css/main.css

@@ -100,3 +100,62 @@ a:hover, a:focus {
     padding: 16px;
     width: 100%;
 }
+
+/* Language switcher */
+#lang-select {
+    position: relative;
+    display: inline-block;
+    margin-right: .5em;
+}
+
+.langs {
+    display: none;
+    position: absolute;
+    background-color: var(--surface);
+    padding: 12px 16px;
+    margin-top: 12px;
+    border-radius: 0px 0px 12px 12px;
+    min-width: 2.4rem;
+    /* opacity: 0%;
+       transition: all 100ms ease-in-out; */
+}
+
+#lang:checked ~ .langs {
+    display: block;
+    /* opacity: 100%;
+       transition: all 100ms ease-in-out; */
+}
+
+#lang {
+    display: none;
+}
+
+#lang-label {
+    padding: 12px 16px;
+    border-radius: 12px;
+    cursor: pointer;
+    /* transition: all 100ms ease-in-out; */
+    transition: background 100ms ease-in-out;
+}
+
+#lang-label:hover {
+    background-color: var(--surface);
+}
+
+.langs p {
+    margin: auto;
+}
+
+.langs a {
+    text-decoration: none;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    text-align: center;
+    margin-bottom: 1rem;
+}
+
+#lang:checked ~ #lang-label {
+    border-radius: 12px 12px 0px 0px;
+    background-color: var(--surface);
+}