From 716096eed05575c9bc5f2263d4326bf199313c78 Mon Sep 17 00:00:00 2001
From: Darek Adamkiewicz <d_adamkiewicz@yahoo.co.uk>
Date: Sat, 20 Jul 2024 16:22:20 +0200
Subject: [PATCH 1/5] initial commit, use of '@sveltekit-i18n/base',
 '@sveltekit-i18n/parser-icu' for i18n, see: ' .env.example.en', 
 '.env.example.en'

---
 .env.example.en                              |  18 +
 .env.example.pl                              |  18 +
 .gitignore                                   |   1 +
 package.json                                 |   2 +
 src/hooks.server.js                          |   1 +
 src/lib/components/EditorControls.svelte     | 338 +++++++-------
 src/lib/components/EditorToolbar.svelte      |   8 +-
 src/lib/components/Footer.svelte             |  44 +-
 src/lib/components/ImageEditor.svelte        | 305 ++++++------
 src/lib/components/PlainTextEditor.svelte    | 153 +++---
 src/lib/components/Post.svelte               |  62 +--
 src/lib/components/PostTeaser.svelte         | 157 ++++---
 src/lib/components/RecipientsSelector.svelte | 413 ++++++++--------
 src/lib/components/Testimonial.svelte        |   1 +
 src/lib/components/WebsiteNav.svelte         | 328 ++++++-------
 src/lib/constants.js                         |   9 +-
 src/lib/en/common.json                       |  65 +++
 src/lib/lang.json                            |   4 +
 src/lib/pl/common.json                       |  65 +++
 src/lib/translations.js                      |  38 ++
 src/routes/+error.svelte                     |  20 +-
 src/routes/+layout.js                        |  14 +
 src/routes/+layout.server.js                 |  31 ++
 src/routes/+page.server.js                   |   1 +
 src/routes/+page.svelte                      | 467 ++++++++++---------
 src/routes/friends/+page.svelte              |  41 +-
 src/routes/friends/[id]/+page.svelte         | 140 +++---
 src/routes/friends/new/+page.svelte          |  88 ++--
 src/routes/login/+page.svelte                |  47 +-
 src/routes/logout/+page.svelte               |  30 +-
 src/routes/posts/[slug]/+page.svelte         |   6 +-
 src/routes/posts/new/+page.svelte            |  98 ++--
 32 files changed, 1670 insertions(+), 1343 deletions(-)
 create mode 100644 .env.example.en
 create mode 100644 .env.example.pl
 create mode 100644 src/lib/en/common.json
 create mode 100644 src/lib/lang.json
 create mode 100644 src/lib/pl/common.json
 create mode 100644 src/lib/translations.js
 create mode 100644 src/routes/+layout.js
 create mode 100644 src/routes/+layout.server.js

diff --git a/.env.example.en b/.env.example.en
new file mode 100644
index 0000000..a939838
--- /dev/null
+++ b/.env.example.en
@@ -0,0 +1,18 @@
+# Example .env file for local development
+# For production, environment variables are set on the production server
+
+# SvelteKit settings
+ORIGIN=http://localhost:5173
+
+# PostOwl settings
+DB_PATH="./data/db.sqlite3"
+ADMIN_PASSWORD="your-secret-password"
+ADMIN_NAME="Your Name"
+ADMIN_EMAIL="you@your-domain.com"
+INITIAL_MESSAGE="Welcome to my PostOwl website!"
+
+# SMTP settings for dev if using mailpit - see README for instructions
+SMTP_SERVER="localhost"
+SMTP_PORT="1025"
+SMTP_USERNAME="postmaster@localhost" # can be whatever you want in dev
+SMTP_PASSWORD="password" # can be whatever you want in dev
diff --git a/.env.example.pl b/.env.example.pl
new file mode 100644
index 0000000..3a67e94
--- /dev/null
+++ b/.env.example.pl
@@ -0,0 +1,18 @@
+# Example .env file for local development
+# For production, environment variables are set on the production server
+
+# SvelteKit settings
+ORIGIN=http://localhost:5173
+
+# PostOwl settings
+DB_PATH="./data/db.sqlite3"
+ADMIN_PASSWORD="your-secret-password"
+ADMIN_NAME="Twoja Nazwa"
+ADMIN_EMAIL="you@your-domain.com"
+INITIAL_MESSAGE="Witamy na mojej stronie PostOwl!"
+
+# SMTP settings for dev if using mailpit - see README for instructions
+SMTP_SERVER="localhost"
+SMTP_PORT="1025"
+SMTP_USERNAME="postmaster@localhost" # can be whatever you want in dev
+SMTP_PASSWORD="password" # can be whatever you want in dev
diff --git a/.gitignore b/.gitignore
index 8b714f2..5ef8046 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,6 +8,7 @@
 .DS_Store
 .env*
 !.env.example
+!.env.example.*
 !.env.production.example
 *.sqlite3*
 .tool-versions
diff --git a/package.json b/package.json
index 48f5d7b..ffef987 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,8 @@
     "@sveltejs/adapter-auto": "^3.1.1",
     "@sveltejs/kit": "^2.5.3",
     "@sveltejs/vite-plugin-svelte": "^3.0.2",
+    "@sveltekit-i18n/base": "^1.3.7",
+    "@sveltekit-i18n/parser-icu": "^1.0.8",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-svelte": "^2.35.1",
diff --git a/src/hooks.server.js b/src/hooks.server.js
index e6bccd3..cd07af0 100644
--- a/src/hooks.server.js
+++ b/src/hooks.server.js
@@ -4,6 +4,7 @@ export async function handle({ event, resolve }) {
   // ATTENTION: Never expose anything to event.locals that shouldn't be seen by the client
   // We mix in ...local to data objects on server routes
   event.locals.currentUser = await getCurrentUser(event.cookies.get('sessionid'));
+	console.log(`src/hooks.server.js: ${event.locals.currentUser?.name}`);
   event.locals.bio = await getBio();
   event.locals.counts = await getCounts();
   event.locals.origin = event.url.origin;
diff --git a/src/lib/components/EditorControls.svelte b/src/lib/components/EditorControls.svelte
index c1a35e3..19d61c2 100644
--- a/src/lib/components/EditorControls.svelte
+++ b/src/lib/components/EditorControls.svelte
@@ -1,184 +1,186 @@
 <script>
-  import { activeEditorView } from '$lib/stores';
-  import { onDestroy } from 'svelte';
-  import { classNames } from '$lib/util';
-  import ToggleMark from './tools/ToggleMark.svelte';
-  import ToggleBulletList from './tools/ToggleBulletList.svelte';
-  import ToggleBlockquote from './tools/ToggleBlockquote.svelte';
-  import ToggleOrderedList from './tools/ToggleOrderedList.svelte';
-  import PrimaryButton from './PrimaryButton.svelte';
-  import SecondaryButton from './SecondaryButton.svelte';
-  import { createEventDispatcher } from 'svelte';
-  import ToggleHeading from './tools/ToggleHeading.svelte';
-  import ToggleCodeBlock from './tools/ToggleCodeBlock.svelte';
-  import InsertImage from './tools/InsertImage.svelte';
-  import CreateLink from './tools/CreateLink.svelte';
+	import { activeEditorView } from '$lib/stores';
+	import { onDestroy } from 'svelte';
+	import { classNames } from '$lib/util';
+	import ToggleMark from './tools/ToggleMark.svelte';
+	import ToggleBulletList from './tools/ToggleBulletList.svelte';
+	import ToggleBlockquote from './tools/ToggleBlockquote.svelte';
+	import ToggleOrderedList from './tools/ToggleOrderedList.svelte';
+	import PrimaryButton from './PrimaryButton.svelte';
+	import SecondaryButton from './SecondaryButton.svelte';
+	import { createEventDispatcher } from 'svelte';
+	import ToggleHeading from './tools/ToggleHeading.svelte';
+	import ToggleCodeBlock from './tools/ToggleCodeBlock.svelte';
+	import InsertImage from './tools/InsertImage.svelte';
+	import CreateLink from './tools/CreateLink.svelte';
 
-  export let confirmLabel = 'Save';
-  export let canConfirm = true;
+	import { t } from '$lib/translations';
 
-  let editorView = null;
-  let editorState = null;
+	export let confirmLabel = 'Save';
+	export let canConfirm = true;
 
-  const unsubscribe = activeEditorView.subscribe(value => {
-    editorView = value;
-    editorState = value?.state;
-  });
+	let editorView = null;
+	let editorState = null;
 
-  const dispatch = createEventDispatcher();
+	const unsubscribe = activeEditorView.subscribe(value => {
+		editorView = value;
+		editorState = value?.state;
+	});
 
-  function handleCancel() {
-    dispatch('cancel', {});
-  }
+	const dispatch = createEventDispatcher();
 
-  function handleSave() {
-    dispatch('save', {});
-  }
+	function handleCancel() {
+		dispatch('cancel', {});
+	}
 
-  onDestroy(unsubscribe);
+	function handleSave() {
+		dispatch('save', {});
+	}
 
-  function onKeyDown(e) {
-    // Trigger save/confirm
-    if (canConfirm && (e.key === 's' || e.key === 'Enter') && e.metaKey) {
-      dispatch('save', {});
-      e.preventDefault();
-      e.stopPropagation();
-    }
-  }
+	onDestroy(unsubscribe);
+
+	function onKeyDown(e) {
+		// Trigger save/confirm
+		if (canConfirm && (e.key === 's' || e.key === 'Enter') && e.metaKey) {
+			dispatch('save', {});
+			e.preventDefault();
+			e.stopPropagation();
+		}
+	}
 </script>
 
 <div class={classNames('sticky top-0 z-10 sm:py-2 sm:px-4', 'bg-black')}>
-  <div class="max-w-screen-md mx-auto px-2 backdrop-blur-sm bg-opacity-95 border-gray-100 shadow">
-    <div>
-      <div class="flex items-center overflow-x-auto py-3 px-1">
-        <!-- <SecondaryButton type="button" on:click={handleCancel}>← Back</SecondaryButton> -->
-        {#if editorState}
-          <div class="flex">
-            <ToggleMark {editorState} {editorView} type="strong">
-              <svg
-                class="h-3 w-3 sm:h-4 sm:w-4"
-                xmlns="http://www.w3.org/2000/svg"
-                fill="currentColor"
-                stroke="currentColor"
-                viewBox="0 0 384 512"
-                ><path
-                  d="M0 64C0 46.3 14.3 32 32 32H80 96 224c70.7 0 128 57.3 128 128c0 31.3-11.3 60.1-30 82.3c37.1 22.4 62 63.1 62 109.7c0 70.7-57.3 128-128 128H96 80 32c-17.7 0-32-14.3-32-32s14.3-32 32-32H48V256 96H32C14.3 96 0 81.7 0 64zM224 224c35.3 0 64-28.7 64-64s-28.7-64-64-64H112V224H224zM112 288V416H256c35.3 0 64-28.7 64-64s-28.7-64-64-64H224 112z"
-                /></svg
-              >
-            </ToggleMark>
-            <ToggleMark {editorState} {editorView} type="em">
-              <svg
-                class="h-3 w-3 sm:h-4 sm:w-4"
-                fill="currentColor"
-                stroke="currentColor"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 384 512"
-                ><path
-                  d="M128 64c0-17.7 14.3-32 32-32H352c17.7 0 32 14.3 32 32s-14.3 32-32 32H293.3L160 416h64c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H90.7L224 96H160c-17.7 0-32-14.3-32-32z"
-                /></svg
-              >
-            </ToggleMark>
-            <CreateLink {editorState} {editorView}>
-              <svg
-                class="h-3 w-3 sm:h-4 sm:w-4"
-                fill="currentColor"
-                stroke="currentColor"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 640 512"
-                ><path
-                  d="M562.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L405.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C189.5 251.2 196 330 246 380c56.5 56.5 148 56.5 204.5 0L562.8 267.7zM43.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C57 372 57 321 88.5 289.5L200.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C416.5 260.8 410 182 360 132c-56.5-56.5-148-56.5-204.5 0L43.2 244.3z"
-                /></svg
-              >
-            </CreateLink>
-            <div class="hidden sm:block w-px bg-gray-700 mx-3" />
-            <ToggleHeading {editorState} {editorView}>
-              <svg
-                class="h-3 w-3 sm:h-4 sm:w-4"
-                fill="currentColor"
-                stroke="currentColor"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 448 512"
-                ><path
-                  d="M0 64C0 46.3 14.3 32 32 32H80h48c17.7 0 32 14.3 32 32s-14.3 32-32 32H112V208H336V96H320c-17.7 0-32-14.3-32-32s14.3-32 32-32h48 48c17.7 0 32 14.3 32 32s-14.3 32-32 32H400V240 416h16c17.7 0 32 14.3 32 32s-14.3 32-32 32H368 320c-17.7 0-32-14.3-32-32s14.3-32 32-32h16V272H112V416h16c17.7 0 32 14.3 32 32s-14.3 32-32 32H80 32c-17.7 0-32-14.3-32-32s14.3-32 32-32H48V240 96H32C14.3 96 0 81.7 0 64z"
-                /></svg
-              >
-            </ToggleHeading>
-            <ToggleCodeBlock {editorState} {editorView}>
-              <svg
-                class="h-3 w-3 sm:h-4 sm:w-4"
-                fill="currentColor"
-                stroke="currentColor"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 640 512"
-                height="1em"
-              >
-                <path
-                  d="M392.8 1.2c-17-4.9-34.7 5-39.6 22l-128 448c-4.9 17 5 34.7 22 39.6s34.7-5 39.6-22l128-448c4.9-17-5-34.7-22-39.6zm80.6 120.1c-12.5 12.5-12.5 32.8 0 45.3L562.7 256l-89.4 89.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l112-112c12.5-12.5 12.5-32.8 0-45.3l-112-112c-12.5-12.5-32.8-12.5-45.3 0zm-306.7 0c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3l112 112c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256l89.4-89.4c12.5-12.5 12.5-32.8 0-45.3z"
-                />
-              </svg>
-            </ToggleCodeBlock>
-            <ToggleBlockquote {editorState} {editorView}>
-              <svg
-                class="h-3 w-3 sm:h-4 sm:w-4"
-                fill="currentColor"
-                stroke="currentColor"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 448 512"
-                ><path
-                  d="M0 216C0 149.7 53.7 96 120 96h8c17.7 0 32 14.3 32 32s-14.3 32-32 32h-8c-30.9 0-56 25.1-56 56v8h64c35.3 0 64 28.7 64 64v64c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V320 288 216zm256 0c0-66.3 53.7-120 120-120h8c17.7 0 32 14.3 32 32s-14.3 32-32 32h-8c-30.9 0-56 25.1-56 56v8h64c35.3 0 64 28.7 64 64v64c0 35.3-28.7 64-64 64H320c-35.3 0-64-28.7-64-64V320 288 216z"
-                /></svg
-              >
-            </ToggleBlockquote>
-            <div class="hidden sm:block w-px bg-gray-700 mx-3" />
-            <ToggleBulletList {editorState} {editorView}>
-              <svg
-                class="h-3 w-3 sm:h-4 sm:w-4"
-                fill="currentColor"
-                stroke="currentColor"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 512 512"
-                ><path
-                  d="M64 144a48 48 0 1 0 0-96 48 48 0 1 0 0 96zM192 64c-17.7 0-32 14.3-32 32s14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H192zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H192zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H192zM64 464a48 48 0 1 0 0-96 48 48 0 1 0 0 96zm48-208a48 48 0 1 0 -96 0 48 48 0 1 0 96 0z"
-                /></svg
-              >
-            </ToggleBulletList>
-            <ToggleOrderedList {editorState} {editorView}>
-              <svg
-                class="h-3 w-3 sm:h-4 sm:w-4"
-                fill="currentColor"
-                stroke="currentColor"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 512 512"
-                ><path
-                  d="M24 56c0-13.3 10.7-24 24-24H80c13.3 0 24 10.7 24 24V176h16c13.3 0 24 10.7 24 24s-10.7 24-24 24H40c-13.3 0-24-10.7-24-24s10.7-24 24-24H56V80H48C34.7 80 24 69.3 24 56zM86.7 341.2c-6.5-7.4-18.3-6.9-24 1.2L51.5 357.9c-7.7 10.8-22.7 13.3-33.5 5.6s-13.3-22.7-5.6-33.5l11.1-15.6c23.7-33.2 72.3-35.6 99.2-4.9c21.3 24.4 20.8 60.9-1.1 84.7L86.8 432H120c13.3 0 24 10.7 24 24s-10.7 24-24 24H32c-9.5 0-18.2-5.6-22-14.4s-2.1-18.9 4.3-25.9l72-78c5.3-5.8 5.4-14.6 .3-20.5zM224 64H480c17.7 0 32 14.3 32 32s-14.3 32-32 32H224c-17.7 0-32-14.3-32-32s14.3-32 32-32zm0 160H480c17.7 0 32 14.3 32 32s-14.3 32-32 32H224c-17.7 0-32-14.3-32-32s14.3-32 32-32zm0 160H480c17.7 0 32 14.3 32 32s-14.3 32-32 32H224c-17.7 0-32-14.3-32-32s14.3-32 32-32z"
-                /></svg
-              >
-            </ToggleOrderedList>
-            <div class="hidden sm:block w-px bg-gray-700 mx-3" />
-            <InsertImage {editorState} {editorView}>
-              <svg
-                class="h-3 w-3 sm:h-4 sm:w-4"
-                fill="currentColor"
-                stroke="currentColor"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 512 512"
-                ><path
-                  d="M0 96C0 60.7 28.7 32 64 32H448c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96zM323.8 202.5c-4.5-6.6-11.9-10.5-19.8-10.5s-15.4 3.9-19.8 10.5l-87 127.6L170.7 297c-4.6-5.7-11.5-9-18.7-9s-14.2 3.3-18.7 9l-64 80c-5.8 7.2-6.9 17.1-2.9 25.4s12.4 13.6 21.6 13.6h96 32H424c8.9 0 17.1-4.9 21.2-12.8s3.6-17.4-1.4-24.7l-120-176zM112 192a48 48 0 1 0 0-96 48 48 0 1 0 0 96z"
-                /></svg
-              >
-            </InsertImage>
-          </div>
-        {/if}
+	<div class="max-w-screen-md mx-auto px-2 backdrop-blur-sm bg-opacity-95 border-gray-100 shadow">
+		<div>
+			<div class="flex items-center overflow-x-auto py-3 px-1">
+				<!-- <SecondaryButton type="button" on:click={handleCancel}>← Back</SecondaryButton> -->
+				{#if editorState}
+					<div class="flex">
+						<ToggleMark {editorState} {editorView} type="strong">
+							<svg
+								class="h-3 w-3 sm:h-4 sm:w-4"
+								xmlns="http://www.w3.org/2000/svg"
+								fill="currentColor"
+								stroke="currentColor"
+								viewBox="0 0 384 512"
+								><path
+									d="M0 64C0 46.3 14.3 32 32 32H80 96 224c70.7 0 128 57.3 128 128c0 31.3-11.3 60.1-30 82.3c37.1 22.4 62 63.1 62 109.7c0 70.7-57.3 128-128 128H96 80 32c-17.7 0-32-14.3-32-32s14.3-32 32-32H48V256 96H32C14.3 96 0 81.7 0 64zM224 224c35.3 0 64-28.7 64-64s-28.7-64-64-64H112V224H224zM112 288V416H256c35.3 0 64-28.7 64-64s-28.7-64-64-64H224 112z"
+								/></svg
+							>
+						</ToggleMark>
+						<ToggleMark {editorState} {editorView} type="em">
+							<svg
+								class="h-3 w-3 sm:h-4 sm:w-4"
+								fill="currentColor"
+								stroke="currentColor"
+								xmlns="http://www.w3.org/2000/svg"
+								viewBox="0 0 384 512"
+								><path
+									d="M128 64c0-17.7 14.3-32 32-32H352c17.7 0 32 14.3 32 32s-14.3 32-32 32H293.3L160 416h64c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H90.7L224 96H160c-17.7 0-32-14.3-32-32z"
+								/></svg
+							>
+						</ToggleMark>
+						<CreateLink {editorState} {editorView}>
+							<svg
+								class="h-3 w-3 sm:h-4 sm:w-4"
+								fill="currentColor"
+								stroke="currentColor"
+								xmlns="http://www.w3.org/2000/svg"
+								viewBox="0 0 640 512"
+								><path
+									d="M562.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L405.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C189.5 251.2 196 330 246 380c56.5 56.5 148 56.5 204.5 0L562.8 267.7zM43.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C57 372 57 321 88.5 289.5L200.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C416.5 260.8 410 182 360 132c-56.5-56.5-148-56.5-204.5 0L43.2 244.3z"
+								/></svg
+							>
+						</CreateLink>
+						<div class="hidden sm:block w-px bg-gray-700 mx-3" />
+						<ToggleHeading {editorState} {editorView}>
+							<svg
+								class="h-3 w-3 sm:h-4 sm:w-4"
+								fill="currentColor"
+								stroke="currentColor"
+								xmlns="http://www.w3.org/2000/svg"
+								viewBox="0 0 448 512"
+								><path
+									d="M0 64C0 46.3 14.3 32 32 32H80h48c17.7 0 32 14.3 32 32s-14.3 32-32 32H112V208H336V96H320c-17.7 0-32-14.3-32-32s14.3-32 32-32h48 48c17.7 0 32 14.3 32 32s-14.3 32-32 32H400V240 416h16c17.7 0 32 14.3 32 32s-14.3 32-32 32H368 320c-17.7 0-32-14.3-32-32s14.3-32 32-32h16V272H112V416h16c17.7 0 32 14.3 32 32s-14.3 32-32 32H80 32c-17.7 0-32-14.3-32-32s14.3-32 32-32H48V240 96H32C14.3 96 0 81.7 0 64z"
+								/></svg
+							>
+						</ToggleHeading>
+						<ToggleCodeBlock {editorState} {editorView}>
+							<svg
+								class="h-3 w-3 sm:h-4 sm:w-4"
+								fill="currentColor"
+								stroke="currentColor"
+								xmlns="http://www.w3.org/2000/svg"
+								viewBox="0 0 640 512"
+								height="1em"
+							>
+								<path
+									d="M392.8 1.2c-17-4.9-34.7 5-39.6 22l-128 448c-4.9 17 5 34.7 22 39.6s34.7-5 39.6-22l128-448c4.9-17-5-34.7-22-39.6zm80.6 120.1c-12.5 12.5-12.5 32.8 0 45.3L562.7 256l-89.4 89.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l112-112c12.5-12.5 12.5-32.8 0-45.3l-112-112c-12.5-12.5-32.8-12.5-45.3 0zm-306.7 0c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3l112 112c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256l89.4-89.4c12.5-12.5 12.5-32.8 0-45.3z"
+								/>
+							</svg>
+						</ToggleCodeBlock>
+						<ToggleBlockquote {editorState} {editorView}>
+							<svg
+								class="h-3 w-3 sm:h-4 sm:w-4"
+								fill="currentColor"
+								stroke="currentColor"
+								xmlns="http://www.w3.org/2000/svg"
+								viewBox="0 0 448 512"
+								><path
+									d="M0 216C0 149.7 53.7 96 120 96h8c17.7 0 32 14.3 32 32s-14.3 32-32 32h-8c-30.9 0-56 25.1-56 56v8h64c35.3 0 64 28.7 64 64v64c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V320 288 216zm256 0c0-66.3 53.7-120 120-120h8c17.7 0 32 14.3 32 32s-14.3 32-32 32h-8c-30.9 0-56 25.1-56 56v8h64c35.3 0 64 28.7 64 64v64c0 35.3-28.7 64-64 64H320c-35.3 0-64-28.7-64-64V320 288 216z"
+								/></svg
+							>
+						</ToggleBlockquote>
+						<div class="hidden sm:block w-px bg-gray-700 mx-3" />
+						<ToggleBulletList {editorState} {editorView}>
+							<svg
+								class="h-3 w-3 sm:h-4 sm:w-4"
+								fill="currentColor"
+								stroke="currentColor"
+								xmlns="http://www.w3.org/2000/svg"
+								viewBox="0 0 512 512"
+								><path
+									d="M64 144a48 48 0 1 0 0-96 48 48 0 1 0 0 96zM192 64c-17.7 0-32 14.3-32 32s14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H192zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H192zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H192zM64 464a48 48 0 1 0 0-96 48 48 0 1 0 0 96zm48-208a48 48 0 1 0 -96 0 48 48 0 1 0 96 0z"
+								/></svg
+							>
+						</ToggleBulletList>
+						<ToggleOrderedList {editorState} {editorView}>
+							<svg
+								class="h-3 w-3 sm:h-4 sm:w-4"
+								fill="currentColor"
+								stroke="currentColor"
+								xmlns="http://www.w3.org/2000/svg"
+								viewBox="0 0 512 512"
+								><path
+									d="M24 56c0-13.3 10.7-24 24-24H80c13.3 0 24 10.7 24 24V176h16c13.3 0 24 10.7 24 24s-10.7 24-24 24H40c-13.3 0-24-10.7-24-24s10.7-24 24-24H56V80H48C34.7 80 24 69.3 24 56zM86.7 341.2c-6.5-7.4-18.3-6.9-24 1.2L51.5 357.9c-7.7 10.8-22.7 13.3-33.5 5.6s-13.3-22.7-5.6-33.5l11.1-15.6c23.7-33.2 72.3-35.6 99.2-4.9c21.3 24.4 20.8 60.9-1.1 84.7L86.8 432H120c13.3 0 24 10.7 24 24s-10.7 24-24 24H32c-9.5 0-18.2-5.6-22-14.4s-2.1-18.9 4.3-25.9l72-78c5.3-5.8 5.4-14.6 .3-20.5zM224 64H480c17.7 0 32 14.3 32 32s-14.3 32-32 32H224c-17.7 0-32-14.3-32-32s14.3-32 32-32zm0 160H480c17.7 0 32 14.3 32 32s-14.3 32-32 32H224c-17.7 0-32-14.3-32-32s14.3-32 32-32zm0 160H480c17.7 0 32 14.3 32 32s-14.3 32-32 32H224c-17.7 0-32-14.3-32-32s14.3-32 32-32z"
+								/></svg
+							>
+						</ToggleOrderedList>
+						<div class="hidden sm:block w-px bg-gray-700 mx-3" />
+						<InsertImage {editorState} {editorView}>
+							<svg
+								class="h-3 w-3 sm:h-4 sm:w-4"
+								fill="currentColor"
+								stroke="currentColor"
+								xmlns="http://www.w3.org/2000/svg"
+								viewBox="0 0 512 512"
+								><path
+									d="M0 96C0 60.7 28.7 32 64 32H448c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96zM323.8 202.5c-4.5-6.6-11.9-10.5-19.8-10.5s-15.4 3.9-19.8 10.5l-87 127.6L170.7 297c-4.6-5.7-11.5-9-18.7-9s-14.2 3.3-18.7 9l-64 80c-5.8 7.2-6.9 17.1-2.9 25.4s12.4 13.6 21.6 13.6h96 32H424c8.9 0 17.1-4.9 21.2-12.8s3.6-17.4-1.4-24.7l-120-176zM112 192a48 48 0 1 0 0-96 48 48 0 1 0 0 96z"
+								/></svg
+							>
+						</InsertImage>
+					</div>
+				{/if}
 
-        <div class="flex-1 h-8" />
-        <PrimaryButton type="button" on:click={handleCancel}>Cancel</PrimaryButton>
-        <div class="shrink-0 w-2 sm:w-4" />
-        <SecondaryButton type="button" on:click={handleSave} disabled={!canConfirm}
-          >{confirmLabel}</SecondaryButton
-        >
-      </div>
-    </div>
-  </div>
+				<div class="flex-1 h-8" />
+				<PrimaryButton type="button" on:click={handleCancel}>{$t('common.cancel')}</PrimaryButton>
+				<div class="shrink-0 w-2 sm:w-4" />
+				<SecondaryButton type="button" on:click={handleSave} disabled={!canConfirm}
+					>{confirmLabel}</SecondaryButton
+				>
+			</div>
+		</div>
+	</div>
 </div>
 
 <svelte:window on:keydown={onKeyDown} />
diff --git a/src/lib/components/EditorToolbar.svelte b/src/lib/components/EditorToolbar.svelte
index baf025a..47320cd 100644
--- a/src/lib/components/EditorToolbar.svelte
+++ b/src/lib/components/EditorToolbar.svelte
@@ -1,8 +1,10 @@
 <script>
-  export let confirmLabel = 'Save';
-  export let canConfirm = true;
+	//export let confirmLabel = 'Save';
+	export let canConfirm = true;
+
+	import { t } from '$lib/translations';
 </script>
 
 {#await import('$lib/components/EditorControls.svelte') then EditorToolbar}
-  <EditorToolbar.default on:cancel on:save {confirmLabel} {canConfirm} />
+	<EditorToolbar.default on:cancel on:save confirmLabel={$t('common.save')} {canConfirm} />
 {/await}
diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte
index 03a039e..e0ffb75 100644
--- a/src/lib/components/Footer.svelte
+++ b/src/lib/components/Footer.svelte
@@ -1,27 +1,31 @@
 <script>
-  import { onMount } from 'svelte';
-  import { fetchJSON } from '$lib/util';
-  import NotEditable from '$lib/components/NotEditable.svelte';
+	import { onMount } from 'svelte';
+	import { fetchJSON } from '$lib/util';
+	import NotEditable from '$lib/components/NotEditable.svelte';
 
-  export let counter = undefined;
-  export let editable = false;
-  let count;
+	import { t } from '$lib/translations';
 
-  onMount(async () => {
-    if (counter) {
-      const result = await fetchJSON('GET', `/api/counter?c=${counter}`);
-      count = result.count;
-    }
-  });
+	export let counter = undefined;
+	export let editable = false;
+	let count;
+
+	onMount(async () => {
+		if (counter) {
+			const result = await fetchJSON('GET', `/api/counter?c=${counter}`);
+			count = result.count;
+		}
+	});
 </script>
 
 <NotEditable {editable}>
-  <div class="">
-    <div class="max-w-screen-md mx-auto px-6 py-6 text-sm lg:text-base">
-      <div class="text-center">
-        Powered by <a class="underline font-medium" href="https://www.postowl.com">PostOwl</a>. Page
-        viewed {count || '…'} times.
-      </div>
-    </div>
-  </div>
+	<div class="">
+		<div class="max-w-screen-md mx-auto px-6 py-6 text-sm lg:text-base">
+			<div class="text-center">
+				{@html $t('common.poweredBy', {
+					value: '<a class="underline font-medium" href="https://www.postowl.com">PostOwl</a>'
+				})}
+				{count ? $t('common.pageView', { value: count }) : $t('common.pageNotViewed')}
+			</div>
+		</div>
+	</div>
 </NotEditable>
diff --git a/src/lib/components/ImageEditor.svelte b/src/lib/components/ImageEditor.svelte
index 8a38a27..3182af9 100644
--- a/src/lib/components/ImageEditor.svelte
+++ b/src/lib/components/ImageEditor.svelte
@@ -1,172 +1,173 @@
 <script>
-  import { page } from '$app/stores';
-  import { resizeImage, classNames, getDimensions, is_safari, nanoid } from '$lib/util';
-  import { getCroppedImg } from '$lib/cropperUtil';
-  import uploadAsset from '$lib/uploadAsset';
-  import Cropper from '$lib/components/Cropper.svelte';
-
-  export let src;
-  export let alt;
-  export let uploadPrompt = undefined;
-  export let maxWidth;
-  export let maxHeight;
-  export let quality;
-  let className = '';
-
-  export { className as class };
-
-  let fileInput; // for uploading an image
-  let progress = undefined; // file upload progress
-  let overlayEl;
-
-  $: currentUser = $page.data.currentUser;
-
-  // Cropper stuff
-  let newSrc;
-  let cropDetail;
-  let is_cropping = false;
-  let scale = 1;
-  let crop = { x: 0, y: 0 };
-  let zoom = 1;
-
-  function onKeyDown(e) {
-    // Trigger save
-    if (is_cropping && e.key === 'Escape') {
-      cancelCropping();
-    } else if (is_cropping && e.key === 'Enter') {
-      uploadImage();
-    }
-  }
-
-  function cancelCropping() {
-    is_cropping = false;
-    newSrc = undefined;
-    fileInput.value = null;
-    scale = 1;
-  }
-
-  async function uploadImage() {
-    const file = fileInput.files[0];
-    const content_type = is_safari() ? 'image/jpeg' : 'image/webp';
-
-    // We convert all uploads to the WEBP image format
-    const extension = is_safari() ? 'jpg' : 'webp';
-    const path = [['images', nanoid()].join('/'), extension].join('.');
-    const croppedImage = await getCroppedImg(newSrc, cropDetail.pixels);
-
-    const resizedBlob = await resizeImage(croppedImage, maxWidth, maxHeight, quality, content_type);
-    const resizedFile = new File([resizedBlob], `${file.name.split('.')[0]}.${extension}`, {
-      type: content_type
-    });
-
-    progress = 0;
-    try {
-      if (currentUser) {
-        await uploadAsset(resizedFile, path, p => {
-          progress = p;
-        });
-        src = `/assets/${path}`;
-      } else {
-        src = URL.createObjectURL(resizedFile);
-      }
-      progress = undefined;
-    } catch (err) {
-      console.error(err);
-      alert('An error occured. Please try again');
-      progress = undefined;
-    }
-    cancelCropping();
-    fileInput.value = null;
-  }
-
-  async function startCropping() {
-    const file = fileInput.files[0];
-    const { width, height } = await getDimensions(file);
-    const currentAspectRatio = width / height;
-    const desiredAspectRatio = maxWidth / maxHeight;
-
-    // HACK: We zoom into the cropper so it fills the whole image area.
-    // TODO: We should do this properly by adjusting Cropper.svelte
-    if (desiredAspectRatio > currentAspectRatio) {
-      scale = desiredAspectRatio / currentAspectRatio;
-    } else {
-      scale = currentAspectRatio / desiredAspectRatio;
-    }
-
-    // Preview image for cropping
-    newSrc = URL.createObjectURL(file);
-    is_cropping = true;
-  }
+	import { page } from '$app/stores';
+	import { resizeImage, classNames, getDimensions, is_safari, nanoid } from '$lib/util';
+	import { getCroppedImg } from '$lib/cropperUtil';
+	import uploadAsset from '$lib/uploadAsset';
+	import Cropper from '$lib/components/Cropper.svelte';
+
+	import { t } from '$lib/translations';
+
+	export let src;
+	export let alt;
+	export let uploadPrompt = undefined;
+	export let maxWidth;
+	export let maxHeight;
+	export let quality;
+	let className = '';
+
+	export { className as class };
+
+	let fileInput; // for uploading an image
+	let progress = undefined; // file upload progress
+	let overlayEl;
+
+	$: currentUser = $page.data.currentUser;
+
+	// Cropper stuff
+	let newSrc;
+	let cropDetail;
+	let is_cropping = false;
+	let scale = 1;
+	let crop = { x: 0, y: 0 };
+	let zoom = 1;
+
+	function onKeyDown(e) {
+		// Trigger save
+		if (is_cropping && e.key === 'Escape') {
+			cancelCropping();
+		} else if (is_cropping && e.key === 'Enter') {
+			uploadImage();
+		}
+	}
+
+	function cancelCropping() {
+		is_cropping = false;
+		newSrc = undefined;
+		fileInput.value = null;
+		scale = 1;
+	}
+
+	async function uploadImage() {
+		const file = fileInput.files[0];
+		const content_type = is_safari() ? 'image/jpeg' : 'image/webp';
+
+		// We convert all uploads to the WEBP image format
+		const extension = is_safari() ? 'jpg' : 'webp';
+		const path = [['images', nanoid()].join('/'), extension].join('.');
+		const croppedImage = await getCroppedImg(newSrc, cropDetail.pixels);
+
+		const resizedBlob = await resizeImage(croppedImage, maxWidth, maxHeight, quality, content_type);
+		const resizedFile = new File([resizedBlob], `${file.name.split('.')[0]}.${extension}`, {
+			type: content_type
+		});
+
+		progress = 0;
+		try {
+			if (currentUser) {
+				await uploadAsset(resizedFile, path, p => {
+					progress = p;
+				});
+				src = `/assets/${path}`;
+			} else {
+				src = URL.createObjectURL(resizedFile);
+			}
+			progress = undefined;
+		} catch (err) {
+			console.error(err);
+			alert('An error occured. Please try again');
+			progress = undefined;
+		}
+		cancelCropping();
+		fileInput.value = null;
+	}
+
+	async function startCropping() {
+		const file = fileInput.files[0];
+		const { width, height } = await getDimensions(file);
+		const currentAspectRatio = width / height;
+		const desiredAspectRatio = maxWidth / maxHeight;
+
+		// HACK: We zoom into the cropper so it fills the whole image area.
+		// TODO: We should do this properly by adjusting Cropper.svelte
+		if (desiredAspectRatio > currentAspectRatio) {
+			scale = desiredAspectRatio / currentAspectRatio;
+		} else {
+			scale = currentAspectRatio / desiredAspectRatio;
+		}
+
+		// Preview image for cropping
+		newSrc = URL.createObjectURL(file);
+		is_cropping = true;
+	}
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-  bind:this={overlayEl}
-  class={classNames(
-    is_cropping
-      ? 'z-40 bg-black text-white font-bold fixed inset-0 bg-opacity-80 text-center p-6'
-      : 'hidden'
-  )}
-  on:dblclick={cancelCropping}
+	bind:this={overlayEl}
+	class={classNames(
+		is_cropping
+			? 'z-40 bg-black text-white font-bold fixed inset-0 bg-opacity-80 text-center p-6'
+			: 'hidden'
+	)}
+	on:dblclick={cancelCropping}
 >
-  {#if is_safari()}
-    <span class="text-[#EF174C]">ATTENTION:</span> Use Google Chrome, Firefox, oder Microsoft Edge for
-    optimized image quality and size.
-  {:else}
-    Confirm with ENTER. Cancel with ESC.
-  {/if}
-  {#if progress}
-    {progress} uploading...
-  {/if}
+	{#if is_safari()}
+		<span class="text-[#EF174C]">{$t('common.ATTENTION')}:</span> {$t('common.notUseSafari')}
+	{:else}
+		{$t('common.confirmWithEnter')}.
+	{/if}
+	{#if progress}
+		{progress} uploading...
+	{/if}
 </div>
 
 {#if is_cropping}
-  <div class="flex space-x-4 z-[60] fixed bottom-0 right-0 left-0 p-6">
-    <div class="flex-1" />
-    <button class="bg-[#EF174C] text-white rounded-full px-4 py-2" on:click={uploadImage}
-      >Confirm</button
-    >
-    <button class="bg-white text-black rounded-full px-4 py-2" on:click={cancelCropping}
-      >Cancel</button
-    >
-    <div class="flex-1" />
-  </div>
+	<div class="flex space-x-4 z-[60] fixed bottom-0 right-0 left-0 p-6">
+		<div class="flex-1" />
+		<button class="bg-[#EF174C] text-white rounded-full px-4 py-2" on:click={uploadImage}
+			>{$t('common.confirm')}</button
+		>
+		<button class="bg-white text-black rounded-full px-4 py-2" on:click={cancelCropping}
+			>{$t('common.cancel')}</button
+		>
+		<div class="flex-1" />
+	</div>
 {/if}
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-  style={`aspect-ratio: ${maxWidth}/${maxHeight}; scale: ${scale}`}
-  class={classNames(is_cropping ? `z-50` : '', 'relative')}
-  on:dblclick={uploadImage}
+	style={`aspect-ratio: ${maxWidth}/${maxHeight}; scale: ${scale}`}
+	class={classNames(is_cropping ? `z-50` : '', 'relative')}
+	on:dblclick={uploadImage}
 >
-  {#if is_cropping}
-    <Cropper
-      image={newSrc}
-      bind:crop
-      bind:zoom
-      on:cropcomplete={e => (cropDetail = e.detail)}
-      aspect={maxWidth / maxHeight}
-    />
-  {:else}
-    <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
-    <img
-      on:mousedown={() => fileInput.click()}
-      class={className +
-        ' cursor-pointer outline-[2px] hover:outline-dashed outline-[#EF174C] -outline-offset-[2px]'}
-      {src}
-      {alt}
-      title={uploadPrompt}
-    />
-  {/if}
+	{#if is_cropping}
+		<Cropper
+			image={newSrc}
+			bind:crop
+			bind:zoom
+			on:cropcomplete={e => (cropDetail = e.detail)}
+			aspect={maxWidth / maxHeight}
+		/>
+	{:else}
+		<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+		<img
+			on:mousedown={() => fileInput.click()}
+			class={className +
+				' cursor-pointer outline-[2px] hover:outline-dashed outline-[#EF174C] -outline-offset-[2px]'}
+			{src}
+			{alt}
+			title={uploadPrompt}
+		/>
+	{/if}
 </div>
 
 <input
-  class="w-px h-px opacity-0 fixed -top-40"
-  type="file"
-  accept="image/*"
-  name="imagefile"
-  bind:this={fileInput}
-  on:change={startCropping}
+	class="w-px h-px opacity-0 fixed -top-40"
+	type="file"
+	accept="image/*"
+	name="imagefile"
+	bind:this={fileInput}
+	on:change={startCropping}
 />
 
 <svelte:window on:keydown={onKeyDown} />
diff --git a/src/lib/components/PlainTextEditor.svelte b/src/lib/components/PlainTextEditor.svelte
index 2072a9d..f8f7f3c 100644
--- a/src/lib/components/PlainTextEditor.svelte
+++ b/src/lib/components/PlainTextEditor.svelte
@@ -1,91 +1,92 @@
 <script>
-  import { onMount, onDestroy } from 'svelte';
-  import { toHTML, fromHTML } from '$lib/prosemirrorUtil';
-  import { singleLinePlainTextSchema, multiLinePlainTextSchema } from '$lib/prosemirrorSchemas';
-  import { activeEditorView } from '$lib/stores';
-  import { EditorState, Plugin } from 'prosemirror-state';
-  import { EditorView } from 'prosemirror-view';
-  import { history } from 'prosemirror-history';
-  import { keymap } from 'prosemirror-keymap';
-  import { baseKeymap } from 'prosemirror-commands';
-  import { buildKeymap } from '$lib/prosemirrorKeymap';
-  import { placeholderPlugin } from '$lib/prosemirrorPlugins';
+	import { onMount, onDestroy } from 'svelte';
+	import { toHTML, fromHTML } from '$lib/prosemirrorUtil';
+	import { singleLinePlainTextSchema, multiLinePlainTextSchema } from '$lib/prosemirrorSchemas';
+	import { activeEditorView } from '$lib/stores';
+	import { EditorState, Plugin } from 'prosemirror-state';
+	import { EditorView } from 'prosemirror-view';
+	import { history } from 'prosemirror-history';
+	import { keymap } from 'prosemirror-keymap';
+	import { baseKeymap } from 'prosemirror-commands';
+	import { buildKeymap } from '$lib/prosemirrorKeymap';
+	import { placeholderPlugin } from '$lib/prosemirrorPlugins';
 
-  export let content = '';
-  export let multiLine = false;
-  export let placeholder = 'Enter text';
 
-  let editorChange = false;
-  let prosemirrorNode, editorView, editorState;
+	export let content = '';
+	export let multiLine = false;
+	export let placeholder = "Enter text";
 
-  $: schema = multiLine ? multiLinePlainTextSchema : singleLinePlainTextSchema;
+	let editorChange = false;
+	let prosemirrorNode, editorView, editorState;
 
-  $: {
-    const doc = fromHTML(schema, content);
-    editorState = EditorState.create({
-      doc,
-      schema,
-      plugins: [
-        keymap(buildKeymap(schema)),
-        keymap(baseKeymap),
-        history(),
-        onUpdatePlugin,
-        placeholderPlugin(placeholder)
-      ]
-    });
-    // Only if there is already an editorView and the content change was external
-    // update editorView with the new editorState
-    if (!editorChange) {
-      editorView?.updateState(editorState);
-    } else {
-      editorChange = false;
-    }
-  }
+	$: schema = multiLine ? multiLinePlainTextSchema : singleLinePlainTextSchema;
 
-  function dispatchTransaction(transaction) {
-    const editorState = this.state.apply(transaction);
-    this.updateState(editorState);
-    if (transaction.docChanged) {
-      content = toHTML(editorState);
-      // Leave a hint so we know the last content update came
-      // from the editor (not the parent)
-      editorChange = true;
-    }
-    this.state = editorState;
-  }
+	$: {
+		const doc = fromHTML(schema, content);
+		editorState = EditorState.create({
+			doc,
+			schema,
+			plugins: [
+				keymap(buildKeymap(schema)),
+				keymap(baseKeymap),
+				history(),
+				onUpdatePlugin,
+				placeholderPlugin(placeholder)
+			]
+		});
+		// Only if there is already an editorView and the content change was external
+		// update editorView with the new editorState
+		if (!editorChange) {
+			editorView?.updateState(editorState);
+		} else {
+			editorChange = false;
+		}
+	}
 
-  const onUpdatePlugin = new Plugin({
-    view() {
-      return {
-        update(updatedView) {
-          activeEditorView.set(updatedView);
-        }
-      };
-    }
-  });
+	function dispatchTransaction(transaction) {
+		const editorState = this.state.apply(transaction);
+		this.updateState(editorState);
+		if (transaction.docChanged) {
+			content = toHTML(editorState);
+			// Leave a hint so we know the last content update came
+			// from the editor (not the parent)
+			editorChange = true;
+		}
+		this.state = editorState;
+	}
 
-  onMount(() => {
-    editorView = new EditorView(prosemirrorNode, {
-      state: editorState,
-      dispatchTransaction
-    });
-    activeEditorView.set(editorView);
-  });
+	const onUpdatePlugin = new Plugin({
+		view() {
+			return {
+				update(updatedView) {
+					activeEditorView.set(updatedView);
+				}
+			};
+		}
+	});
 
-  onDestroy(() => {
-    // Guard on server side
-    if (editorView) {
-      editorView.destroy();
-    }
-  });
+	onMount(() => {
+		editorView = new EditorView(prosemirrorNode, {
+			state: editorState,
+			dispatchTransaction
+		});
+		activeEditorView.set(editorView);
+	});
+
+	onDestroy(() => {
+		// Guard on server side
+		if (editorView) {
+			editorView.destroy();
+		}
+	});
 </script>
 
 <div id="prosemirror-editor" bind:this={prosemirrorNode} />
 
 <style>
-  :global(#prosemirror-editor .ProseMirror) {
-    outline: none;
-    white-space: pre-wrap;
-    word-wrap: break-word;
-  }
+	:global(#prosemirror-editor .ProseMirror) {
+		outline: none;
+		white-space: pre-wrap;
+		word-wrap: break-word;
+	}
 </style>
diff --git a/src/lib/components/Post.svelte b/src/lib/components/Post.svelte
index 1fd0753..5490001 100644
--- a/src/lib/components/Post.svelte
+++ b/src/lib/components/Post.svelte
@@ -1,37 +1,45 @@
 <script>
-  import PlainText from '$lib/components/PlainText.svelte';
-  import RichText from '$lib/components/RichText.svelte';
-  import { formatDate } from '$lib/util';
-  import NotEditable from './NotEditable.svelte';
-  import { onMount } from 'svelte';
+	import PlainText from '$lib/components/PlainText.svelte';
+	import RichText from '$lib/components/RichText.svelte';
+	import { formatDate } from '$lib/util';
+	import NotEditable from './NotEditable.svelte';
+	import { onMount } from 'svelte';
 
-  export let title;
-  export let content;
-  export let created_at;
-  export let editable;
+	import { t } from '$lib/translations';
 
-  let titleEl;
-  // HACK: set the focus to the title element, this will only work for new posts, which is intended behavior
-  onMount(() => {
-    setTimeout(() => {
-      titleEl.querySelector('.ProseMirror')?.focus();
-    }, 500);
-  });
+	export let title;
+	export let content;
+	export let created_at;
+	export let editable;
+
+	let titleEl;
+	// HACK: set the focus to the title element, this will only work for new posts, which is intended behavior
+	onMount(() => {
+		setTimeout(() => {
+			titleEl.querySelector('.ProseMirror')?.focus();
+		}, 500);
+	});
 </script>
 
 <div>
-  <div class="max-w-screen-md mx-auto px-6">
-    <NotEditable {editable}>
-      <div class="pb-2 sm:text-lg">{formatDate(created_at)}</div>
-    </NotEditable>
-    <h1 bind:this={titleEl} class="text-3xl md:text-5xl font-bold">
-      <PlainText {editable} bind:content={title} placeholder="Post title…" />
-    </h1>
-  </div>
+	<div class="max-w-screen-md mx-auto px-6">
+		<NotEditable {editable}>
+			<div class="pb-2 sm:text-lg">
+				{$t(
+					'common.date',
+					{ value: new Date(created_at) },
+					{ date: { FULL: { dateStyle: 'medium' } } }
+				)}
+			</div>
+		</NotEditable>
+		<h1 bind:this={titleEl} class="text-3xl md:text-5xl font-bold">
+			<PlainText {editable} bind:content={title} placeholder={$t('common.postTitle')} />
+		</h1>
+	</div>
 </div>
 
 <div class="max-w-screen-md mx-auto px-6">
-  <div id="post_content" class="prose sm:prose-xl text-inherit">
-    <RichText multiLine {editable} bind:content placeholder="Post content…" />
-  </div>
+	<div id="post_content" class="prose sm:prose-xl text-inherit">
+		<RichText multiLine {editable} bind:content placeholder={$t('common.postContent')} />
+	</div>
 </div>
diff --git a/src/lib/components/PostTeaser.svelte b/src/lib/components/PostTeaser.svelte
index 5a234eb..0f7b5d4 100644
--- a/src/lib/components/PostTeaser.svelte
+++ b/src/lib/components/PostTeaser.svelte
@@ -1,80 +1,91 @@
 <script>
-  export let post;
-  export let currentUser;
-  import { classNames, formatDate } from '$lib/util';
-  import SecondaryButton from '$lib/components/SecondaryButton.svelte';
+	export let post;
+	export let currentUser;
+	import { classNames, formatDate } from '$lib/util';
+	import SecondaryButton from '$lib/components/SecondaryButton.svelte';
 
-  $: teaser_image = JSON.parse(post.teaser_image);
-  const lf = new Intl.ListFormat('en');
+	import { t } from '$lib/translations';
+
+	$: teaser_image = JSON.parse(post.teaser_image);
+	const lf = new Intl.ListFormat('en');
 </script>
 
 <div
-  href={`/posts/${post.slug}`}
-  class={classNames('md:text-xl rounded-2xl border bg-white p-4 sm:p-8 border-gray-200')}
+	href={`/posts/${post.slug}`}
+	class={classNames('md:text-xl rounded-2xl border bg-white p-4 sm:p-8 border-gray-200')}
 >
-  <div>
-    {#if currentUser}
-      <div class="text-sm py-2 flex">
-        <div class="flex-1">
-          <!-- Only show this for the site owner -->
-          {#if post.is_public}
-            <strong>Public</strong>
-            {#if post.recipients.length > 0}
-              (and sent to {lf.format(post.recipients.map(r => r.name))}){/if}
-          {:else if post.recipients.length > 0}
-            <strong>Shared</strong> (sent to {lf.format(post.recipients.map(r => r.name))})
-          {:else}
-            Private
-          {/if}
-        </div>
-        {#if post.is_public}
-          <div title="This post is publicly visible.">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke-width="1.5"
-              stroke="currentColor"
-              class="w-4 h-4"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418"
-              />
-            </svg>
-          </div>
-        {/if}
-      </div>
-    {/if}
-    <div>
-      <a
-        href={`/posts/${post.slug}`}
-        class={classNames('text-2xl md:text-3xl lg:text-4xl font-bold')}
-      >
-        {post.title}
-      </a>
-    </div>
-    {#if teaser_image?.src && teaser_image?.width && teaser_image?.height}
-      <a href={`/posts/${post.slug}`}>
-        <img
-          class="block w-full mt-4"
-          src={teaser_image.src}
-          width={teaser_image.width}
-          height={teaser_image.height}
-          alt={post.title}
-        />
-      </a>
-    {/if}
-    <div class="pt-4">
-      <div class={teaser_image?.src ? 'line-clamp-3' : 'line-clamp-5'}>
-        <a href={`/posts/${post.slug}`}>
-          <span class="font-bold">{formatDate(post.created_at)}</span> — {post.teaser}
-        </a>
-      </div>
-    </div>
-  </div>
-  <div class="pt-4 flex">
-    <SecondaryButton size="sm" href={`/posts/${post.slug}`}>Continue reading →</SecondaryButton>
-  </div>
+	<div>
+		{#if currentUser}
+			<div class="text-sm py-2 flex">
+				<div class="flex-1">
+					<!-- Only show this for the site owner -->
+					{#if post.is_public}
+						<strong>{$t('common.public', { gender: 'male' })}</strong>
+						{#if post.recipients.length > 0}
+							(and sent to {lf.format(post.recipients.map(r => r.name))}){/if}
+					{:else if post.recipients.length > 0}
+						<strong>{$t('common.shared')}</strong> (sent to {lf.format(
+							post.recipients.map(r => r.name)
+						)})
+					{:else}
+						{$t('common.private', { gender: 'male' })}
+					{/if}
+				</div>
+				{#if post.is_public}
+					<div title="This post is publicly visible.">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke-width="1.5"
+							stroke="currentColor"
+							class="w-4 h-4"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418"
+							/>
+						</svg>
+					</div>
+				{/if}
+			</div>
+		{/if}
+		<div>
+			<a
+				href={`/posts/${post.slug}`}
+				class={classNames('text-2xl md:text-3xl lg:text-4xl font-bold')}
+			>
+				{post.title}
+			</a>
+		</div>
+		{#if teaser_image?.src && teaser_image?.width && teaser_image?.height}
+			<a href={`/posts/${post.slug}`}>
+				<img
+					class="block w-full mt-4"
+					src={teaser_image.src}
+					width={teaser_image.width}
+					height={teaser_image.height}
+					alt={post.title}
+				/>
+			</a>
+		{/if}
+		<div class="pt-4">
+			<div class={teaser_image?.src ? 'line-clamp-3' : 'line-clamp-5'}>
+				<a href={`/posts/${post.slug}`}>
+					<span class="font-bold"
+						>{$t(
+							'common.date',
+							{ value: new Date(post.created_at) },
+							{ date: { FULL: { dateStyle: 'medium' } } }
+						)}</span
+					>
+					— {post.teaser}
+				</a>
+			</div>
+		</div>
+	</div>
+	<div class="pt-4 flex">
+		<SecondaryButton size="sm" href={`/posts/${post.slug}`}>{$t('common.continueRead')} →</SecondaryButton>
+	</div>
 </div>
diff --git a/src/lib/components/RecipientsSelector.svelte b/src/lib/components/RecipientsSelector.svelte
index 91f2c24..35c2924 100644
--- a/src/lib/components/RecipientsSelector.svelte
+++ b/src/lib/components/RecipientsSelector.svelte
@@ -1,207 +1,216 @@
 <script>
-  // import { onMount } from 'svelte';
-  import { debounce, classNames, isEmailValid } from '$lib/util';
-  import CopyableRecipient from './CopyableRecipient.svelte';
-
-  export let recipients = [];
-  export let is_public;
-  export let editable;
-  export let slug = undefined;
-
-  let value;
-  let result = [];
-  let chooseVisibility = false;
-  let selectedResult = 0;
-  let input;
-  let resultsEl;
-
-  // onMount(() => {
-  //   if (input) {
-  //     input.focus();
-  //   }
-  // });
-
-  async function search() {
-    if (value) {
-      const response = await fetch(`/api/search-friends?q=${value}`);
-      result = await response.json();
-    } else {
-      result = [];
-    }
-
-    // TODO: remove entries that are already in the recipient list
-
-    if (isEmailValid(value)) {
-      // Double check that the email is not already in your contacts
-      const isInResult = Boolean(result.find(f => f.email === value));
-      if (!isInResult) {
-        result = [{ email: value }, ...result];
-      }
-    }
-    selectedResult = 0;
-  }
-
-  function navigate() {
-    const currentResult = result[selectedResult];
-    if (currentResult) {
-      addRecipient(currentResult);
-    }
-  }
-
-  function addRecipient(recipient) {
-    recipients = recipients.concat([recipient]);
-    value = '';
-  }
-
-  function prevResult() {
-    if (selectedResult > 0) {
-      selectedResult -= 1;
-    }
-  }
-
-  function nextResult() {
-    if (selectedResult < result.length - 1) {
-      selectedResult += 1;
-    }
-  }
-
-  function removeRecipient(index) {
-    recipients.splice(index, 1);
-    recipients = recipients;
-  }
-
-  function togglePublic() {
-    is_public = true;
-    chooseVisibility = false;
-  }
-
-  function togglePrivate() {
-    is_public = false;
-    chooseVisibility = false;
-  }
-
-  function toggleVisibilitySelector() {
-    if (!editable) return; // Ignore when not editing
-    chooseVisibility = !chooseVisibility;
-  }
-
-  // HACK: This is not ideal, may cancel clicks on results when pressed too long
-  function onBlur() {
-    setTimeout(() => {
-      value = '';
-    }, 200);
-  }
-
-  function onKeyDown(e) {
-    switch (e.keyCode) {
-      case 38: // up
-        prevResult();
-        e.preventDefault();
-        break;
-      case 40: // down
-        nextResult();
-        e.preventDefault();
-        break;
-      case 13:
-        navigate();
-        break;
-    }
-  }
+	// import { onMount } from 'svelte';
+	import { debounce, classNames, isEmailValid } from '$lib/util';
+	import CopyableRecipient from './CopyableRecipient.svelte';
+
+	import { t } from '$lib/translations';
+
+	export let recipients = [];
+	export let is_public;
+	export let editable;
+	export let slug = undefined;
+
+	let value;
+	let result = [];
+	let chooseVisibility = false;
+	let selectedResult = 0;
+	let input;
+	let resultsEl;
+
+	// onMount(() => {
+	//   if (input) {
+	//     input.focus();
+	//   }
+	// });
+
+	async function search() {
+		if (value) {
+			const response = await fetch(`/api/search-friends?q=${value}`);
+			result = await response.json();
+		} else {
+			result = [];
+		}
+
+		// TODO: remove entries that are already in the recipient list
+
+		if (isEmailValid(value)) {
+			// Double check that the email is not already in your contacts
+			const isInResult = Boolean(result.find(f => f.email === value));
+			if (!isInResult) {
+				result = [{ email: value }, ...result];
+			}
+		}
+		selectedResult = 0;
+	}
+
+	function navigate() {
+		const currentResult = result[selectedResult];
+		if (currentResult) {
+			addRecipient(currentResult);
+		}
+	}
+
+	function addRecipient(recipient) {
+		recipients = recipients.concat([recipient]);
+		value = '';
+	}
+
+	function prevResult() {
+		if (selectedResult > 0) {
+			selectedResult -= 1;
+		}
+	}
+
+	function nextResult() {
+		if (selectedResult < result.length - 1) {
+			selectedResult += 1;
+		}
+	}
+
+	function removeRecipient(index) {
+		recipients.splice(index, 1);
+		recipients = recipients;
+	}
+
+	function togglePublic() {
+		is_public = true;
+		chooseVisibility = false;
+	}
+
+	function togglePrivate() {
+		is_public = false;
+		chooseVisibility = false;
+	}
+
+	function toggleVisibilitySelector() {
+		if (!editable) return; // Ignore when not editing
+		chooseVisibility = !chooseVisibility;
+	}
+
+	// HACK: This is not ideal, may cancel clicks on results when pressed too long
+	function onBlur() {
+		setTimeout(() => {
+			value = '';
+		}, 200);
+	}
+
+	function onKeyDown(e) {
+		switch (e.keyCode) {
+			case 38: // up
+				prevResult();
+				e.preventDefault();
+				break;
+			case 40: // down
+				nextResult();
+				e.preventDefault();
+				break;
+			case 13:
+				navigate();
+				break;
+		}
+	}
 </script>
 
 <div class="max-w-screen-md mx-auto px-6 pb-8 relative">
-  <!-- svelte-ignore a11y-no-static-element-interactions -->
-  {#if editable || is_public || !is_public}
-    <svelte:element
-      this={editable ? 'button' : 'div'}
-      on:click={toggleVisibilitySelector}
-      class={classNames(
-        'relative rounded-full px-3 py-0.5 mr-1 mb-1 text-sm sm:text-base inline-flex items-center space-x-1 bg-black text-white',
-        chooseVisibility ? 'z-50' : '' // pop to the top while editing visibility
-      )}
-    >
-      <span>{is_public ? 'Public' : 'Private'}</span>
-      {#if editable}
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke-width="1.5"
-          stroke="currentColor"
-          class="w-3 h-3 inline-block"
-        >
-          <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
-        </svg>
-      {/if}
-    </svelte:element>
-  {/if}
-
-  {#if chooseVisibility && editable}
-    <!-- svelte-ignore a11y-click-events-have-key-events -->
-    <!-- svelte-ignore a11y-no-static-element-interactions -->
-    <div
-      class="z-40 fixed inset-0 bg-black opacity-80 cursor-default"
-      on:click={toggleVisibilitySelector}
-    />
-    <div class="absolute top-10 left-6 right-6 sm:left-12 sm:right-12 z-50">
-      <div class="max-w-lg space-y-2 text-sm sm:text-base">
-        <button
-          on:click={togglePrivate}
-          class={classNames(
-            'block px-4 py-2 rounded-full mx-0 w-full text-left bg-white border border-black'
-          )}
-        >
-          Private <span class="text-sm">— Journal and drafts</span>
-        </button>
-        <button
-          on:click={togglePublic}
-          class={classNames(
-            'block px-4 py-2 rounded-full mx-0 w-full text-left bg-white border border-black'
-          )}
-        >
-          Public <span class="text-sm">— Everyone can read</span>
-        </button>
-      </div>
-    </div>
-  {/if}
-
-  {#each recipients as recipient, i}
-    <CopyableRecipient {recipient} {editable} {slug} on:delete={() => removeRecipient(i)} />
-  {/each}
-
-  {#if editable}
-    <div class="relative border-gray-100 flex space-x-4 items-center py-2">
-      <input
-        bind:this={input}
-        on:keydown={onKeyDown}
-        bind:value
-        use:debounce={{ value, func: search, duration: 50 }}
-        on:blur={onBlur}
-        autocomplete="off"
-        id="search"
-        name="search"
-        class="block w-full border-none bg-transparent px-0 py-2 placeholder-gray-300 focus:border-black focus:text-gray-900 focus:placeholder-gray-400 focus:outline-none focus:ring-0"
-        placeholder="Enter email or name to send to friends."
-        type="text"
-      />
-    </div>
-
-    <div class="overflow-y-auto" bind:this={resultsEl}>
-      {#each result as friend, i}
-        <button
-          on:click={() => addRecipient(friend)}
-          class={classNames(
-            'w-full text-left block px-4 sm:px-6 py-3 border-b border-gray-100 text-gray-600 hover:text-black',
-            selectedResult === i ? 'bg-gray-100' : ''
-          )}
-        >
-          {#if friend.name}
-            {friend.name} ({friend.email})
-          {:else}
-            {friend.email}
-          {/if}
-        </button>
-      {/each}
-    </div>
-  {/if}
+	<!-- svelte-ignore a11y-no-static-element-interactions -->
+	{#if editable || is_public || !is_public}
+		<svelte:element
+			this={editable ? 'button' : 'div'}
+			on:click={toggleVisibilitySelector}
+			class={classNames(
+				'relative rounded-full px-3 py-0.5 mr-1 mb-1 text-sm sm:text-base inline-flex items-center space-x-1 bg-black text-white',
+				chooseVisibility ? 'z-50' : '' // pop to the top while editing visibility
+			)}
+		>
+			<span
+				>{is_public
+					? $t('common.public', { gender: 'male' })
+					: $t('common.private', { gender: 'male' })}
+			</span>
+			{#if editable}
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke-width="1.5"
+					stroke="currentColor"
+					class="w-3 h-3 inline-block"
+				>
+					<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
+				</svg>
+			{/if}
+		</svelte:element>
+	{/if}
+
+	{#if chooseVisibility && editable}
+		<!-- svelte-ignore a11y-click-events-have-key-events -->
+		<!-- svelte-ignore a11y-no-static-element-interactions -->
+		<div
+			class="z-40 fixed inset-0 bg-black opacity-80 cursor-default"
+			on:click={toggleVisibilitySelector}
+		/>
+		<div class="absolute top-10 left-6 right-6 sm:left-12 sm:right-12 z-50">
+			<div class="max-w-lg space-y-2 text-sm sm:text-base">
+				<button
+					on:click={togglePrivate}
+					class={classNames(
+						'block px-4 py-2 rounded-full mx-0 w-full text-left bg-white border border-black'
+					)}
+				>
+					{$t('common.private', { gender: 'male' })}
+					<span class="text-sm">— {$t('common.journalAndDrafts')}</span>
+				</button>
+				<button
+					on:click={togglePublic}
+					class={classNames(
+						'block px-4 py-2 rounded-full mx-0 w-full text-left bg-white border border-black'
+					)}
+				>
+					{$t('common.public', { gender: 'male' })}<span class="text-sm"
+						>— {$t('common.everyoneCanRead')}</span
+					>
+				</button>
+			</div>
+		</div>
+	{/if}
+
+	{#each recipients as recipient, i}
+		<CopyableRecipient {recipient} {editable} {slug} on:delete={() => removeRecipient(i)} />
+	{/each}
+
+	{#if editable}
+		<div class="relative border-gray-100 flex space-x-4 items-center py-2">
+			<input
+				bind:this={input}
+				on:keydown={onKeyDown}
+				bind:value
+				use:debounce={{ value, func: search, duration: 50 }}
+				on:blur={onBlur}
+				autocomplete="off"
+				id="search"
+				name="search"
+				class="block w-full border-none bg-transparent px-0 py-2 placeholder-gray-300 focus:border-black focus:text-gray-900 focus:placeholder-gray-400 focus:outline-none focus:ring-0"
+				placeholder={$t('common.enterEmail')}
+				type="text"
+			/>
+		</div>
+
+		<div class="overflow-y-auto" bind:this={resultsEl}>
+			{#each result as friend, i}
+				<button
+					on:click={() => addRecipient(friend)}
+					class={classNames(
+						'w-full text-left block px-4 sm:px-6 py-3 border-b border-gray-100 text-gray-600 hover:text-black',
+						selectedResult === i ? 'bg-gray-100' : ''
+					)}
+				>
+					{#if friend.name}
+						{friend.name} ({friend.email})
+					{:else}
+						{friend.email}
+					{/if}
+				</button>
+			{/each}
+		</div>
+	{/if}
 </div>
diff --git a/src/lib/components/Testimonial.svelte b/src/lib/components/Testimonial.svelte
index e5264c7..199251f 100644
--- a/src/lib/components/Testimonial.svelte
+++ b/src/lib/components/Testimonial.svelte
@@ -27,6 +27,7 @@
       <div class="text-lg sm:text-2xl italic">
         <PlainText {editable} bind:content={testimonial.text} />
       </div>
+			{testimonial.text}
       <div class="mt-4 md:text-xl font-medium">
         <PlainText {editable} bind:content={testimonial.name} />
       </div>
diff --git a/src/lib/components/WebsiteNav.svelte b/src/lib/components/WebsiteNav.svelte
index 1eea97e..fbf1825 100644
--- a/src/lib/components/WebsiteNav.svelte
+++ b/src/lib/components/WebsiteNav.svelte
@@ -1,184 +1,188 @@
 <script>
-  import { page } from '$app/stores';
-  import { classNames } from '$lib/util';
-  import { goto } from '$app/navigation';
-  import NotEditable from './NotEditable.svelte';
-  import PrimaryButton from './PrimaryButton.svelte';
-  import Modal from './Modal.svelte';
-  import Input from './Input.svelte';
-  import SecondaryButton from './SecondaryButton.svelte';
-  import { previousPage } from '$lib/stores';
-  export let editable = false;
+	import { page } from '$app/stores';
+	import { classNames } from '$lib/util';
+	import { goto } from '$app/navigation';
+	import NotEditable from './NotEditable.svelte';
+	import PrimaryButton from './PrimaryButton.svelte';
+	import Modal from './Modal.svelte';
+	import Input from './Input.svelte';
+	import SecondaryButton from './SecondaryButton.svelte';
+	import { previousPage } from '$lib/stores';
+	export let editable = false;
 
-  // Explicitly set by home page, so we get live updates
-  export let bio = undefined;
-  export let showMenu = false;
-  export let backButton = false;
-  $: data = $page.data;
-  $: currentUser = data.currentUser;
-  $: latestBio = bio || data.bio;
+	import { t } from '$lib/translations';
 
-  function onKeyDown(e) {
-    // Deactivate menu modal with esc key
-    if (e.key === 'Escape' && showMenu) {
-      return toggleMenu();
-    }
+	// Explicitly set by home page, so we get live updates
+	export let bio = undefined;
+	export let showMenu = false;
+	export let backButton = false;
+	$: data = $page.data;
+	$: currentUser = data.currentUser;
+	$: latestBio = bio || data.bio;
 
-    // If focus is inside an input or Textrea don't handle
-    const activeEl = document.activeElement?.tagName;
-    if (activeEl === 'INPUT' || activeEl === 'TEXTAREA') {
-      return;
-    }
+	function onKeyDown(e) {
+		// Deactivate menu modal with esc key
+		if (e.key === 'Escape' && showMenu) {
+			return toggleMenu();
+		}
 
-    // Activate editing with e key
-    if (e.key === 'e' && editable != true && !e.key.metaKey && !e.key.ctrlKey && currentUser) {
-      editable = true;
-      return;
-    }
-    // Toggle menu modal with m key
-    if (e.key === 'm' && editable != true && !e.key.metaKey && !e.key.ctrlKey) {
-      return toggleMenu();
-    }
-    // Go to home with h key
-    if (e.key === 'h' && editable != true && !e.key.metaKey && !e.key.ctrlKey) {
-      return goto('/');
-    }
-    // Go to new post with n key
-    if (e.key === 'n' && editable != true && !e.key.metaKey && !e.key.ctrlKey && currentUser) {
-      return goto('/posts/new');
-    }
+		// If focus is inside an input or Textrea don't handle
+		const activeEl = document.activeElement?.tagName;
+		if (activeEl === 'INPUT' || activeEl === 'TEXTAREA') {
+			return;
+		}
 
-    // Go to friends list with f key
-    if (e.key === 'f' && editable != true && !e.key.metaKey && !e.key.ctrlKey && currentUser) {
-      return goto('/friends');
-    }
-  }
+		// Activate editing with e key
+		if (e.key === 'e' && editable != true && !e.key.metaKey && !e.key.ctrlKey && currentUser) {
+			editable = true;
+			return;
+		}
+		// Toggle menu modal with m key
+		if (e.key === 'm' && editable != true && !e.key.metaKey && !e.key.ctrlKey) {
+			return toggleMenu();
+		}
+		// Go to home with h key
+		if (e.key === 'h' && editable != true && !e.key.metaKey && !e.key.ctrlKey) {
+			return goto('/');
+		}
+		// Go to new post with n key
+		if (e.key === 'n' && editable != true && !e.key.metaKey && !e.key.ctrlKey && currentUser) {
+			return goto('/posts/new');
+		}
 
-  function toggleMenu() {
-    showMenu = !showMenu;
-  }
+		// Go to friends list with f key
+		if (e.key === 'f' && editable != true && !e.key.metaKey && !e.key.ctrlKey && currentUser) {
+			return goto('/friends');
+		}
+	}
 
-  function goBack(e) {
-    if ($previousPage === '/' && backButton) {
-      window.history.back();
-      e.preventDefault();
-      e.stopPropagation();
-    } else {
-      // Default click behavior
-    }
-  }
+	function toggleMenu() {
+		showMenu = !showMenu;
+	}
+
+	function goBack(e) {
+		if ($previousPage === '/' && backButton) {
+			window.history.back();
+			e.preventDefault();
+			e.stopPropagation();
+		} else {
+			// Default click behavior
+		}
+	}
 </script>
 
 <div
-  class={classNames(
-    'backdrop-blur-sm z-10 text-sm lg:text-lg',
-    !editable ? 'sticky top-0' : '',
-    'bg-white bg-opacity-95'
-  )}
+	class={classNames(
+		'backdrop-blur-sm z-10 text-sm lg:text-lg',
+		!editable ? 'sticky top-0' : '',
+		'bg-white bg-opacity-95'
+	)}
 >
-  <div class="max-w-screen-md mx-auto py-4 px-6">
-    <NotEditable {editable}>
-      <div class="flex items-center relative space-x-4">
-        <a href="/" on:click={goBack} class="text-lg font-bold uppercase">
-          {backButton ? '← ' : ''}
-          {latestBio.name}
-        </a>
-        <div class="flex-1" />
-        {#if currentUser}
-          <PrimaryButton size="sm" href="/posts/new">New post</PrimaryButton>
-        {/if}
-        <button
-          on:click={() => (showMenu = true)}
-          class="w-[26px] h-[26px] border border-black rounded-full"
-          title={'Open Menu'}
-        >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke-width="1.5"
-            stroke="currentColor"
-            class="w-6 h-6"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              d="M12 6.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 12.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 18.75a.75.75 0 110-1.5.75.75 0 010 1.5z"
-            />
-          </svg>
-        </button>
-      </div>
-    </NotEditable>
-  </div>
+	<div class="max-w-screen-md mx-auto py-4 px-6">
+		<NotEditable {editable}>
+			<div class="flex items-center relative space-x-4">
+				<a href="/" on:click={goBack} class="text-lg font-bold uppercase">
+					{backButton ? '← ' : ''}
+					{latestBio.name}
+				</a>
+				<div class="flex-1" />
+				{#if currentUser}
+					<PrimaryButton size="sm" href="/posts/new">{$t('common.newPost')}</PrimaryButton>
+				{/if}
+				<button
+					on:click={() => (showMenu = true)}
+					class="w-[26px] h-[26px] border border-black rounded-full"
+					title={'Open Menu'}
+				>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke-width="1.5"
+						stroke="currentColor"
+						class="w-6 h-6"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							d="M12 6.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 12.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 18.75a.75.75 0 110-1.5.75.75 0 010 1.5z"
+						/>
+					</svg>
+				</button>
+			</div>
+		</NotEditable>
+	</div>
 </div>
 
 {#if showMenu && !editable}
-  <Modal on:close={() => (showMenu = false)}>
-    <div class="p-8 flex flex-col space-y-4 relative">
-      <button
-        class="absolute right-6 sm:-right-4 -top-4 bg-black text-white rounded-full"
-        on:click={() => (showMenu = false)}
-      >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke-width="1.5"
-          stroke="currentColor"
-          class="w-8 h-8"
-        >
-          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
-        </svg>
-      </button>
+	<Modal on:close={() => (showMenu = false)}>
+		<div class="p-8 flex flex-col space-y-4 relative">
+			<button
+				class="absolute right-6 sm:-right-4 -top-4 bg-black text-white rounded-full"
+				on:click={() => (showMenu = false)}
+			>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke-width="1.5"
+					stroke="currentColor"
+					class="w-8 h-8"
+				>
+					<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+				</svg>
+			</button>
 
-      {#if currentUser}
-        <slot />
+			{#if currentUser}
+				<slot />
 
-        <div class="space-y-4 flex flex-col pt-8">
-          <PrimaryButton size="sm" href="/posts/new">New post</PrimaryButton>
-        </div>
+				<div class="space-y-4 flex flex-col pt-8">
+					<PrimaryButton size="sm" href="/posts/new">{$t('common.newPost')}</PrimaryButton>
+				</div>
 
-        <div class="space-y-4 flex flex-col">
-          {#if $page.url?.pathname !== '/friends'}
-            <SecondaryButton size="sm" href="/friends">Manage friends</SecondaryButton>
-          {/if}
-        </div>
-      {/if}
+				<div class="space-y-4 flex flex-col">
+					{#if $page.url?.pathname !== '/friends'}
+						<SecondaryButton size="sm" href="/friends">{$t('common.manageFriends')}</SecondaryButton>
+					{/if}
+				</div>
+			{/if}
 
-      {#if currentUser}
-        <div class="pt-8 flex">
-          <div>Signed in as {currentUser.name}</div>
-          <div class="flex-1" />
-          <div>
-            <a
-              data-sveltekit-preload-data="off"
-              class="underline"
-              href="/logout"
-              on:click={toggleMenu}>Sign out</a
-            >
-          </div>
-        </div>
-      {:else}
-        <div class="">
-          <form method="POST" action="/login" class="flex flex-col space-y-8">
-            <div class="flex flex-col">
-              <label for="password" class="font-semibold mb-6 text-3xl">Sign in</label>
-              <Input
-                type="password"
-                name="password"
-                id="password"
-                placeholder="Enter your password"
-              />
-            </div>
-            <PrimaryButton type="submit">Sign in</PrimaryButton>
-            <div class="pt-8 text-sm sm:text-base">
-              Only the owner can sign in. But you can run <a class="underline" href="https://www.postowl.com">PostOwl</a> yourself.
-            </div>
-          </form>
-        </div>
-      {/if}
-    </div>
-  </Modal>
+			{#if currentUser}
+				<div class="pt-8 flex">
+					<div>{$t('common.signedAs')} {currentUser.name}</div>
+					<div class="flex-1" />
+					<div>
+						<a
+							data-sveltekit-preload-data="off"
+							class="underline"
+							href="/logout"
+							on:click={toggleMenu}>{$t('common.signOut')}</a
+						>
+					</div>
+				</div>
+			{:else}
+				<div class="">
+					<form method="POST" action="/login" class="flex flex-col space-y-8">
+						<div class="flex flex-col">
+							<label for="password" class="font-semibold mb-6 text-3xl">{$t('common.signin')}</label>
+							<Input
+								type="password"
+								name="password"
+								id="password"
+								placeholder={$t('common.enterPass')}
+							/>
+						</div>
+						<PrimaryButton type="submit">{$t('common.signin')}</PrimaryButton>
+						<div class="pt-8 text-sm sm:text-base">
+							{@html $t('common.signInMesg', {
+								value: `<a href="http://www.postowl.com" class="underline">PostOwl</a>`
+							})}
+						</div>
+					</form>
+				</div>
+			{/if}
+		</div>
+	</Modal>
 {/if}
 
 <svelte:window on:keydown={onKeyDown} />
diff --git a/src/lib/constants.js b/src/lib/constants.js
index fbbaaae..7f49e91 100644
--- a/src/lib/constants.js
+++ b/src/lib/constants.js
@@ -1,8 +1,9 @@
-import { env } from '$env/dynamic/private'; 
+import { env } from '$env/dynamic/private';
+
 const ADMIN_NAME = env.ADMIN_NAME;
 
 export const DEFAULT_BIO = {
-  avatar: '/images/person-placeholder.jpg',
-  name: ADMIN_NAME,
-  bio: '<p>Welcome to my PostOwl website!</p>'
+	avatar: '/images/person-placeholder.jpg',
+	name: ADMIN_NAME,
+	bio: `<p>${env.INITIAL_MESSAGE}</p>`
 };
diff --git a/src/lib/en/common.json b/src/lib/en/common.json
new file mode 100644
index 0000000..cdc9b75
--- /dev/null
+++ b/src/lib/en/common.json
@@ -0,0 +1,65 @@
+{
+	"title": "The App",
+	"date": "{value, date, FULL}",
+	"dateName": "Date",
+	"plural": "You have {value, plural, =0 {no photos.} =1 {one photo.} other {# photos.}}",
+	"searchInfo": "Search {value, plural, one { # post } other { # posts }}",
+	"continueRead": "Continue reading",
+	"pageView": "Page viewed { value, plural, one { # time } other { # times }}.",
+	"pageNotViewed": "Page viewed … times",
+	"signin": "Sign in",
+	"signedAs": "Signed in as",
+	"signOut": "Sign out",
+	"enterPass": "Enter your password",
+	"newPost": "New post",
+	"editPost": "Edit post",
+	"deletePost": "Delete post",
+	"manageFriends": "Manage friends",
+	"showAll": "Show all",
+	"public": "{gender, select, male {Public} female {Public} other {Public}}",
+	"shared": "Shared",
+	"private": "{gender, select, male {Private} female {Private} other {Private}}",
+	"poweredBy": "Powered by {value}.",
+	"signInMesg": "Only the owner can sign in. But you can run {value} yourself.",
+	"showMore": "Show more",
+	"passwordIncorrect": "Password incorrect. Please try again.",
+	"enterEmail": "Enter email or name to send to friends.",
+	"postTitle": "Post title…",
+	"postContent": "Post content…",
+	"journalAndDrafts": "Journal and drafts",
+	"everyoneCanRead": "Everyone can read",
+	"cancel": "Cancel",
+	"save": "Save",
+	"confirm": "Confirm",
+	"ATTENTION": "ATTENTION",
+	"notUseSafari": "Use Google Chrome, Firefox, or Microsoft Edge for optimized image quality and size.",
+	"confirmWithEnter": "Confirm with ENTER. Cancel with ESC.",
+	"notFound": "Not found.",
+	"startOver": "Start over",
+	"editProfile": "Edit profile",
+	"personaliseThen_1": "Personalise",
+	"personaliseThen_2": "your profile, then",
+	"create_1": "create",
+	"create_2": "your first post",
+	"startWriting": "to start writing.",
+	"noPostsFound": "No posts found.",
+	"errorWhile": "Error while signing out.",
+	"loggedOut": "Logged out",
+	"loggedOutSuccess": "Pomyślnie wylogowano.",
+	"continue": "Continue",
+	"returnHome": "Return to the homepage",
+	"friends": "{value, plural, one { Friend } other { Friends }}",
+	"addFriend": "Add Friend",
+	"contactNames": "Contact names auto-complete when you share posts.",
+	"enterText": "Enter text",
+	"notAuthorized": "Sorry, you are not authorized.",
+	"name": "Name",
+	"enterName": "Enter name",
+	"email": "Email",
+	"enterEmail": "Enter email",
+	"deleteFriend": "Delete friend",
+	"couldNotSaveAlert": "Could not save. Make sure that the name or email you provided haoven't been used already.",
+	"confirmAreYouSure": "Are you sure you want to delete this friend? It cannot be undone.",
+	"alertErrorDel": "Error deleting friend. Try again.",
+	"alertErrorOccured": "There was an error. You can try again, but before that, please just copy and paste your article into a safe place."
+}
diff --git a/src/lib/lang.json b/src/lib/lang.json
new file mode 100644
index 0000000..ca23d37
--- /dev/null
+++ b/src/lib/lang.json
@@ -0,0 +1,4 @@
+{
+	"en": "English",
+	"pl": "Polski"
+}
diff --git a/src/lib/pl/common.json b/src/lib/pl/common.json
new file mode 100644
index 0000000..e631993
--- /dev/null
+++ b/src/lib/pl/common.json
@@ -0,0 +1,65 @@
+{
+	"title": "Aplikacja",
+	"date": "{value, date, FULL}",
+	"dateName": "Data",
+	"plural": "Posiadasz {value, plural, many { # zdjęć. } one { # zdjęcie.} few { # zdjęcia. } other { # zdjęcia. }}",
+	"searchInfo": "Przeszukaj {value, plural, many { # wpisów } one { # wpis } few { # wpisy } other { # wpisu }}",
+	"continueRead": "Kontunuuj czytanie",
+	"pageView": "Strona przeglądana { value, plural, many {# razy} one {# raz} few {# razy} other {# raza}}.",
+	"pageNotViewed": "Strona przeglądana … razy",
+	"signin": "Zaloguj się",
+	"signedAs": "Zalogowany jako",
+	"signOut": "Wyloguj",
+	"enterPass": "Wprowadź swoje hasło",
+	"newPost": "Nowy wpis",
+	"editPost": "Edytuj wpis",
+	"deletePost": "Usuń wpis",
+	"manageFriends": "Zarządzaj znajomymi",
+	"showAll": "Pokaż wszystkie",
+	"public": "{gender, select, male {Publiczny} female {Publiczna} other {Publiczne}}",
+	"shared": "Współdzielone",
+	"private": "{gender, select, male {Prywatny} female {Prytwatna} other {Prywatne}}",
+	"poweredBy": "Obsługiwane przez {value}.",
+	"signInMesg": "Jedynie właściciel może się zalogować. Ale możesz uruchomić swój własny serwis {value}.",
+	"showMore": "Pokaż więcej",
+	"passwordIncorrect": "Błędne hasło. Proszę spróbować ponownie.",
+	"enterEmail": "By wysłać do znajomych wprowadź e-mail lub nazwę.",
+	"postTitle": "Tytuł wpisu…",
+	"postContent": "Treść wpisu…",
+	"journalAndDrafts": "Dziennik i wersje robocze",
+	"everyoneCanRead": "Dostępny dla wszystkich",
+	"cancel": "Anuluj",
+	"save": "Zapisz",
+	"confirm": "Potwierdź",
+	"ATTENTION": "UWAGA",
+	"notUseSafari": "Aby uzyskać optymalną jakość i rozmiar obrazu użyj przeglądarki Google Chrome, Firefox, lub Microsoft Edge.",
+	"confirmWithEnter": "Potwierdź klawiszem ENTER. Anuluj za pomocą klawisza ESC.",
+	"notFound": "Nie znaleziono.",
+	"startOver": "Zacznij od nowa",
+	"editProfile": "Edytuj profil",
+	"personaliseThen_1": "Spersonalizuj",
+	"personaliseThen_2": "swój profil, a następnie",
+	"create_1": "stwórz",
+	"create_2": "twój pierwszy wpis",
+	"startWriting": "by rozpocząć pisanie.",
+	"noPostsFound": "Brak wpisów.",
+	"errorWhile": "Błąd podczas wylogowywania się.",
+	"loggedOut": "Wylogowanie",
+	"loggedOutSuccess": "Successfully logged out.",
+	"continue": "Kontynuuj",
+	"returnHome": "Powrót do strony głównej",
+	"friends": "{value, plural, many { Znajomych } one { Znajomy } other { Znajomi }}",
+	"addFriend": "Dodaj znajomego",
+	"contactNames": "Nazwy kontaktów są automatycznie uzupełniane podczas udostępniania postów.",
+	"enterText": "Wprowadź tekst",
+	"notAuthorized": "Przepraszamy, nie masz uprawnień.",
+	"name": "Nazwa",
+	"enterName": "Wprowadź nazwę",
+	"email": "Email",
+	"enterEmail": "Wprowadź email",
+	"deleteFriend": "Usuń znajomego",
+	"couldNotSaveAlert": "Nie można zapisać. Upewnij się, że podana nazwa lub adres e-mail nie zostały już użyte.",
+	"confirmAreYouSure": "Czy na pewno chcesz usunąć tego znajomego? Nie można tego cofnąć.",
+	"alertErrorDel": "Błąd podczas usuwania znajomego. Spróbuj ponownie.",
+	"alertErrorOccured": "Wystąpił błąd. Możesz spróbować ponownie, ale wcześniej po prostu skopiuj i wklej swój artykuł w bezpiecznym miejscu."
+}
diff --git a/src/lib/translations.js b/src/lib/translations.js
new file mode 100644
index 0000000..6d75770
--- /dev/null
+++ b/src/lib/translations.js
@@ -0,0 +1,38 @@
+import i18n from '@sveltekit-i18n/base';
+import parser from '@sveltekit-i18n/parser-icu';
+
+import lang from './lang.json';
+
+export const defaultLocale = 'en';
+/** @type {import('sveltekit-i18n').Config} */
+const config = {
+	parser: parser({}),
+	translations: {
+		en: { lang },
+		pl: { lang }
+	},
+	loaders: [
+		{
+			locale: 'en',
+			key: 'common',
+			loader: async () => (await import('./en/common.json')).default
+		},
+		{
+			locale: 'pl',
+			key: 'common',
+			loader: async () => (await import('./pl/common.json')).default
+		}
+	]
+};
+
+export const {
+	t,
+	loading,
+	locales,
+	locale,
+	translations,
+	loadTranslations,
+	addTranslations,
+	setLocale,
+	setRoute
+} = new i18n(config);
diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
index 1a26e8c..8cf3537 100644
--- a/src/routes/+error.svelte
+++ b/src/routes/+error.svelte
@@ -1,14 +1,16 @@
 <script>
-  import { page } from '$app/stores';
+	import { page } from '$app/stores';
+
+	import { t } from '$lib/translations';
 </script>
 
 <div class="max-w-screen-md mx-auto px-6">
-  <div class="flex items-center space-x-4 pt-48">
-    <div class="flex-1" />
-    <h1 class="text-center text-4xl md:text-7xl font-bold">{$page.status}</h1>
-    <div class="w-px bg-black h-[50px]" />
-    <div>Not found. <a class="underline" href="/">Start over</a>.</div>
-    <div class="flex-1" />
-  </div>
-  <div class="pt-32" />
+	<div class="flex items-center space-x-4 pt-48">
+		<div class="flex-1" />
+		<h1 class="text-center text-4xl md:text-7xl font-bold">{$page.status}</h1>
+		<div class="w-px bg-black h-[50px]" />
+		<div>{$t('common.notFound')} <a class="underline" href="/">{$t('common.startOver')}</a>.</div>
+		<div class="flex-1" />
+	</div>
+	<div class="pt-32" />
 </div>
diff --git a/src/routes/+layout.js b/src/routes/+layout.js
new file mode 100644
index 0000000..03c7ec4
--- /dev/null
+++ b/src/routes/+layout.js
@@ -0,0 +1,14 @@
+import { addTranslations, setLocale, setRoute } from '$lib/translations';
+
+/** @type {import('@sveltejs/kit').Load} */
+export const load = async ({ data }) => {
+  const { i18n, translations } = data;
+  const { locale, route } = i18n;
+
+  addTranslations(translations);
+
+  await setRoute(route);
+  await setLocale(locale);
+
+  return i18n;
+};
diff --git a/src/routes/+layout.server.js b/src/routes/+layout.server.js
new file mode 100644
index 0000000..a4ec4f0
--- /dev/null
+++ b/src/routes/+layout.server.js
@@ -0,0 +1,31 @@
+import { locales, loadTranslations, translations, defaultLocale } from '$lib/translations';
+
+/** @type {import('@sveltejs/kit').ServerLoad} */
+export const load = async ({ url, cookies, request }) => {
+	const { pathname } = url;
+
+	// Try to get the locale from cookie
+	let locale = (cookies.get('lang') || '').toLowerCase();
+	//locale = "en";
+
+	// Get user preferred locale
+	if (!locale) {
+		locale =
+			`${`${request.headers.get('accept-language')}`.match(/[a-zA-Z]+?(?=-|_|,|;)/)}`.toLowerCase();
+	}
+
+	// Get defined locales
+	const supportedLocales = locales.get().map((l) => l.toLowerCase());
+
+	// Use default locale if current locale is not supported
+	if (!supportedLocales.includes(locale)) {
+		locale = defaultLocale;
+	}
+
+	await loadTranslations(locale, pathname); // keep this just before the `return`
+
+	return {
+		i18n: { locale, route: pathname },
+		translations: translations.get() // `translations` on server contain all translations loaded by different clients
+	};
+};
diff --git a/src/routes/+page.server.js b/src/routes/+page.server.js
index 4d66473..8631efe 100644
--- a/src/routes/+page.server.js
+++ b/src/routes/+page.server.js
@@ -4,6 +4,7 @@ export async function load({ locals, url }) {
   const q = url.searchParams.get('q') || '';
   const f = url.searchParams.get('f') || '';
   const posts = await getPosts(locals.currentUser, q, f);
+	console.log(`src/routes/+page.server.js: ${locals.currentUser?.name}`);
 
   return {
     posts,
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index e3ac20e..287d6d6 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,249 +1,258 @@
 <script>
-  import EditorToolbar from '$lib/components/EditorToolbar.svelte';
-  import PlainText from '$lib/components/PlainText.svelte';
-  import RichText from '$lib/components/RichText.svelte';
-  import SecondaryButton from '$lib/components/SecondaryButton.svelte';
-  import WebsiteNav from '$lib/components/WebsiteNav.svelte';
-  import Footer from '$lib/components/Footer.svelte';
-  import Image from '$lib/components/Image.svelte';
-  import NotEditable from '$lib/components/NotEditable.svelte';
-  import PostTeaser from '$lib/components/PostTeaser.svelte';
-
-  import { fetchJSON, extendQueryParams, classNames } from '$lib/util';
-  import { page } from '$app/stores';
-  import { goto } from '$app/navigation';
-
-  export let data;
-  let editable, name, avatar, bio;
-  let searchInput;
-  let searchFilter = data.searchFilter;
-  let showMenu;
-  $: currentUser = data.currentUser;
-  $: postLimit = $page.url.searchParams.get('postLimit') || 30;
-
-  function initOrReset() {
-    avatar = data.bio.avatar;
-    name = data.bio.name;
-    bio = data.bio.bio;
-    editable = false;
-  }
-
-  // --------------------------------------------------------------------------
-  // Page logic
-  // --------------------------------------------------------------------------
-
-  function showMoreposts() {
-    goto(extendQueryParams({ postLimit: postLimit + 50 }), { noScroll: true });
-  }
-
-  // NOTE: We utilize the page API to store bio information
-  async function saveBio() {
-    try {
-      if (currentUser) {
-        await fetchJSON('POST', '/api/save-page', {
-          page_id: 'bio',
-          page: {
-            avatar,
-            name,
-            bio
-          }
-        });
-      }
-      editable = false;
-    } catch (err) {
-      console.error(err);
-      alert('There was an error. Please try again.');
-    }
-  }
-
-  function onInput() {
-    goto('/?q=' + searchInput.value + (currentUser ? '&f=' + searchFilter : ''), {
-      keepFocus: true
-    });
-  }
-
-  function reset() {
-    searchFilter = '';
-    goto('/');
-  }
-
-  initOrReset();
+	import EditorToolbar from '$lib/components/EditorToolbar.svelte';
+	import PlainText from '$lib/components/PlainText.svelte';
+	import RichText from '$lib/components/RichText.svelte';
+	import SecondaryButton from '$lib/components/SecondaryButton.svelte';
+	import WebsiteNav from '$lib/components/WebsiteNav.svelte';
+	import Footer from '$lib/components/Footer.svelte';
+	import Image from '$lib/components/Image.svelte';
+	import NotEditable from '$lib/components/NotEditable.svelte';
+	import PostTeaser from '$lib/components/PostTeaser.svelte';
+
+	import { fetchJSON, extendQueryParams, classNames } from '$lib/util';
+	import { page } from '$app/stores';
+	import { goto } from '$app/navigation';
+
+	import { t } from '$lib/translations';
+
+	export let data;
+	let editable, name, avatar, bio;
+	let searchInput;
+	let searchFilter = data.searchFilter;
+	let showMenu;
+	$: currentUser = data.currentUser;
+	$: postLimit = $page.url.searchParams.get('postLimit') || 30;
+
+	function initOrReset() {
+		avatar = data.bio.avatar;
+		name = data.bio.name;
+		bio = data.bio.bio;
+		editable = false;
+	}
+
+	// --------------------------------------------------------------------------
+	// Page logic
+	// --------------------------------------------------------------------------
+
+	function showMoreposts() {
+		goto(extendQueryParams({ postLimit: postLimit + 50 }), { noScroll: true });
+	}
+
+	// NOTE: We utilize the page API to store bio information
+	async function saveBio() {
+		try {
+			if (currentUser) {
+				await fetchJSON('POST', '/api/save-page', {
+					page_id: 'bio',
+					page: {
+						avatar,
+						name,
+						bio
+					}
+				});
+			}
+			editable = false;
+		} catch (err) {
+			console.error(err);
+			alert('There was an error. Please try again.');
+		}
+	}
+
+	function onInput() {
+		goto('/?q=' + searchInput.value + (currentUser ? '&f=' + searchFilter : ''), {
+			keepFocus: true
+		});
+	}
+
+	function reset() {
+		searchFilter = '';
+		goto('/');
+	}
+
+	initOrReset();
 </script>
 
 <svelte:head>
-  <title>{name}</title>
-  <meta name="description" content={bio} />
-  <meta name="og:title" property="og:title" content={name} />
-  <meta name="og:description" property="og:description" content={bio} />
-  <meta
-    name="og:image"
-    property="og:image"
-    content="%sveltekit.assets%/favicon/favicon-512x512.png"
-  />
-  <meta name="twitter:card" content="summary" />
-  <meta name="twitter:title" content={name} />
-  <meta name="twitter:description" content={bio} />
-  <meta name="twitter:image" content="%sveltekit.assets%/favicon/favicon-512x512.png" />
-  <meta name="robots" content="index, follow" />
-
-  <link href="/feed.xml" rel="alternate" type="application/rss+xml" title={name} />
-  <link rel="icon" type="image/png" sizes="300x300" href={avatar} />
-  <link rel="apple-touch-icon" sizes="300x300" href={avatar} />
+	<title>{name}</title>
+	<meta name="description" content={bio} />
+	<meta name="og:title" property="og:title" content={name} />
+	<meta name="og:description" property="og:description" content={bio} />
+	<meta
+		name="og:image"
+		property="og:image"
+		content="%sveltekit.assets%/favicon/favicon-512x512.png"
+	/>
+	<meta name="twitter:card" content="summary" />
+	<meta name="twitter:title" content={name} />
+	<meta name="twitter:description" content={bio} />
+	<meta name="twitter:image" content="%sveltekit.assets%/favicon/favicon-512x512.png" />
+	<meta name="robots" content="index, follow" />
+
+	<link href="/feed.xml" rel="alternate" type="application/rss+xml" title={name} />
+	<link rel="icon" type="image/png" sizes="300x300" href={avatar} />
+	<link rel="apple-touch-icon" sizes="300x300" href={avatar} />
 </svelte:head>
 
 {#if editable}
-  <EditorToolbar on:cancel={initOrReset} on:save={saveBio} />
+	<EditorToolbar on:cancel={initOrReset} on:save={saveBio} />
 {/if}
 
 <WebsiteNav bio={{ avatar, name, bio }} bind:editable bind:showMenu>
-  {#if currentUser}
-    <div class="space-y-4 flex flex-col">
-      <SecondaryButton
-        size="sm"
-        on:click={() => {
-          editable = true;
-          showMenu = false;
-        }}>Edit Profile</SecondaryButton
-      >
-    </div>
-  {/if}
+	{#if currentUser}
+		<div class="space-y-4 flex flex-col">
+			<SecondaryButton
+				size="sm"
+				on:click={() => {
+					editable = true;
+					showMenu = false;
+				}}>{$t('common.editProfile')}</SecondaryButton
+			>
+		</div>
+	{/if}
 </WebsiteNav>
 
 <!-- __bio is there to make placeholder work with centered text -->
 <div class="__bio">
-  <div class="max-w-screen-md mx-auto px-6">
-    <div class="pt-6 sm:pt-12 pb-2 sm:pb-6 text-center">
-      <div class="w-20 h-20 md:w-28 md:h-28 mx-auto overflow-hidden relative rounded-full">
-        <Image
-          class="block w-20 h-20 md:w-28 md:h-28 rounded-full"
-          maxWidth="384"
-          maxHeight="384"
-          quality="0.8"
-          {editable}
-          bind:src={avatar}
-          alt={name}
-        />
-      </div>
-    </div>
-    <div class="">
-      <h1 class="text-center text-3xl md:text-6xl font-bold">
-        <PlainText {editable} bind:content={name} />
-      </h1>
-    </div>
-    <div class="prosa text-center py-4 sm:text-xl">
-      <RichText {editable} bind:content={bio} />
-    </div>
-  </div>
+	<div class="max-w-screen-md mx-auto px-6">
+		<div class="pt-6 sm:pt-12 pb-2 sm:pb-6 text-center">
+			<div class="w-20 h-20 md:w-28 md:h-28 mx-auto overflow-hidden relative rounded-full">
+				<Image
+					class="block w-20 h-20 md:w-28 md:h-28 rounded-full"
+					maxWidth="384"
+					maxHeight="384"
+					quality="0.8"
+					{editable}
+					bind:src={avatar}
+					alt={name}
+				/>
+			</div>
+		</div>
+		<div class="">
+			<h1 class="text-center text-3xl md:text-6xl font-bold">
+				<PlainText {editable} bind:content={name} placeholder={$t('common.enterText')}/>
+			</h1>
+		</div>
+		<div class="prosa text-center py-4 sm:text-xl">
+			<RichText {editable} bind:content={bio} placeholder={$t('common.enterText')} />
+		</div>
+	</div>
 </div>
 
 <NotEditable {editable}>
-  <!-- Search bar -->
-  <div class="max-w-screen-md mx-auto px-6 pt-4 lg:pt-8">
-    <div class={classNames(data.searchQuery ? '' : '', 'relative')}>
-      {#if !data.searchQuery && !data.searchFilter}
-        <div class="pointer-events-none absolute inset-y-0 left-3 flex items-center">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke-width="1.5"
-            stroke="currentColor"
-            class="w-6 h-6"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
-            />
-          </svg>
-        </div>
-      {:else}
-        <a href="/" on:click={reset} class="absolute inset-y-0 left-3 flex items-center">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke-width="1.5"
-            stroke="currentColor"
-            class="w-6 h-6"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"
-            />
-          </svg>
-        </a>
-      {/if}
-      <input
-        bind:this={searchInput}
-        on:input={onInput}
-        value={data.searchQuery}
-        autocomplete="off"
-        id="search"
-        name="search"
-        class="block w-full rounded-full border-1 border-gray-200 bg-transparent py-2 pl-10 pr-24 placeholder-gray-400 focus:border-black focus:text-black focus:outline-none focus:ring-0"
-        placeholder={`Search ${data.posts.length} posts`}
-        type="text"
-      />
-      {#if currentUser}
-        <div class="absolute inset-y-0 right-3 pt-[5px]">
-          <select
-            bind:value={searchFilter}
-            id="country"
-            name="country"
-            autocomplete="country-name"
-            class="block w-full rounded-md border-0 py-1.5 text-gray-900 ring-0 ring-inset focus:ring-1 focus:ring-inset focus:ring-gray-200 sm:max-w-xs sm:text-sm leading-4"
-            on:change={onInput}
-          >
-            <option value="">Show all</option>
-            <option value="private">Private</option>
-            <option value="public">Public</option>
-          </select>
-        </div>
-      {/if}
-    </div>
-  </div>
-
-  <div id="posts">
-    {#if data.posts.length === 0}
-      <div class="max-w-screen-md mx-auto px-6 pt-4 lg:pt-8">
-        <div class="md:text-xl py-4 text-center">
-          {#if !data.searchQuery && !searchFilter}
-            {#if currentUser}
-              <!-- svelte-ignore a11y-invalid-attribute -->
-              <a class="underline" href="#" on:click={() => (editable = true)}>Personalise</a> your
-              profile, then <a class="underline" href={'/posts/new'}>create</a> your first post 💌
-            {:else}
-              <!-- svelte-ignore a11y-invalid-attribute -->
-              <a href="#" class="underline" on:click={() => (showMenu = true)}>Sign in</a> to start writing.
-            {/if}
-          {:else}
-            No posts found.
-          {/if}
-        </div>
-      </div>
-    {/if}
-
-    <div class="max-w-screen-md mx-auto px-6">
-      <div class="my-6 space-y-8">
-        {#each data.posts.slice(0, postLimit) as post}
-          <PostTeaser {post} {currentUser} />
-        {/each}
-      </div>
-    </div>
-
-    {#if postLimit < data.posts.length}
-      <div class="max-w-screen-md mx-auto px-6 pb-6">
-        <button
-          class="w-full mx-auto block px-4 py-2 rounded-lg border shadow-md bg-white text-center uppercase font-medium"
-          on:click={showMoreposts}
-        >
-          Show more
-        </button>
-      </div>
-    {/if}
-  </div>
+	<!-- Search bar -->
+	<div class="max-w-screen-md mx-auto px-6 pt-4 lg:pt-8">
+		<div class={classNames(data.searchQuery ? '' : '', 'relative')}>
+			{#if !data.searchQuery && !data.searchFilter}
+				<div class="pointer-events-none absolute inset-y-0 left-3 flex items-center">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke-width="1.5"
+						stroke="currentColor"
+						class="w-6 h-6"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
+						/>
+					</svg>
+				</div>
+			{:else}
+				<a href="/" on:click={reset} class="absolute inset-y-0 left-3 flex items-center">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke-width="1.5"
+						stroke="currentColor"
+						class="w-6 h-6"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"
+						/>
+					</svg>
+				</a>
+			{/if}
+			<input
+				bind:this={searchInput}
+				on:input={onInput}
+				value={data.searchQuery}
+				autocomplete="off"
+				id="search"
+				name="search"
+				class="block w-full rounded-full border-1 border-gray-200 bg-transparent py-2 pl-10 pr-24 placeholder-gray-400 focus:border-black focus:text-black focus:outline-none focus:ring-0"
+				placeholder={`${$t('common.searchInfo', { value: data.posts.length })}`}
+				type="text"
+			/>
+			{#if currentUser}
+				<div class="absolute inset-y-0 right-3 pt-[5px]">
+					<select
+						bind:value={searchFilter}
+						id="country"
+						name="country"
+						autocomplete="country-name"
+						class="block w-full rounded-md border-0 py-1.5 text-gray-900 ring-0 ring-inset focus:ring-1 focus:ring-inset focus:ring-gray-200 sm:max-w-xs sm:text-sm leading-4"
+						on:change={onInput}
+					>
+						<option value="">{$t('common.showAll', { gender: 'other' })}</option>
+						<option value="private">{$t('common.private', { gender: 'other' })}</option>
+						<option value="public">{$t('common.public', { gender: 'other' })}</option>
+					</select>
+				</div>
+			{/if}
+		</div>
+	</div>
+
+	<div id="posts">
+		{#if data.posts.length === 0}
+			<div class="max-w-screen-md mx-auto px-6 pt-4 lg:pt-8">
+				<div class="md:text-xl py-4 text-center">
+					{#if !data.searchQuery && !searchFilter}
+						{#if currentUser}
+							<!-- svelte-ignore a11y-invalid-attribute -->
+							<a class="underline" href="#" on:click={() => (editable = true)}
+								>{$t('common.personaliseThen_1')}</a
+							>
+							{$t('common.personaliseThen_2')}
+							<a class="underline" href={'/posts/new'}>{$t('common.create_1')}</a>
+							{$t('common.create_2')} 💌
+						{:else}
+							<!-- svelte-ignore a11y-invalid-attribute -->
+							<a href="#" class="underline" on:click={() => (showMenu = true)}
+								>{$t('common.signin')}</a
+							>
+							{$t('common.startWriting')}
+						{/if}
+					{:else}
+						{$t('common.noLettersFound')}
+					{/if}
+				</div>
+			</div>
+		{/if}
+
+		<div class="max-w-screen-md mx-auto px-6">
+			<div class="my-6 space-y-8">
+				{#each data.posts.slice(0, postLimit) as post}
+					<PostTeaser {post} {currentUser} />
+				{/each}
+			</div>
+		</div>
+
+		{#if postLimit < data.posts.length}
+			<div class="max-w-screen-md mx-auto px-6 pb-6">
+				<button
+					class="w-full mx-auto block px-4 py-2 rounded-lg border shadow-md bg-white text-center uppercase font-medium"
+					on:click={showMoreposts}
+				>
+					{$t('common.showMore')}
+				</button>
+			</div>
+		{/if}
+	</div>
 </NotEditable>
 
 <Footer counter="/" {editable} />
diff --git a/src/routes/friends/+page.svelte b/src/routes/friends/+page.svelte
index 5c2bb0c..6986e76 100644
--- a/src/routes/friends/+page.svelte
+++ b/src/routes/friends/+page.svelte
@@ -1,29 +1,34 @@
 <script>
-  import WebsiteNav from '$lib/components/WebsiteNav.svelte';
-  import FriendTeaser from '$lib/components/FriendTeaser.svelte';
-  import PrimaryButton from '$lib/components/PrimaryButton.svelte';
+	import WebsiteNav from '$lib/components/WebsiteNav.svelte';
+	import FriendTeaser from '$lib/components/FriendTeaser.svelte';
+	import PrimaryButton from '$lib/components/PrimaryButton.svelte';
 
-  export let data;
-  $: bio = data.bio;
+	import { t } from '$lib/translations';
+
+	export let data;
+	$: bio = data.bio;
 </script>
 
 <svelte:head>
-  <title>Friends</title>
-  <link rel="icon" type="image/png" sizes="300x300" href={bio.avatar} />
-  <link rel="apple-touch-icon" sizes="300x300" href={bio.avatar} />
+	<title>{$t('common.friends', { value: 'other' })}</title>
+	<link rel="icon" type="image/png" sizes="300x300" href={bio.avatar} />
+	<link rel="apple-touch-icon" sizes="300x300" href={bio.avatar} />
 </svelte:head>
 
 <WebsiteNav backButton={true} />
 
 <div class="max-w-screen-md mx-auto px-6 pb-8">
-  <h1 class="text-center font-bold text-2xl sm:text-4xl pt-14">{data.friends.length} Friends</h1>
-  <p class="text-center sm:text-xl pb-4">Contact names auto-complete when you share posts.</p>
-  <div class="flex justify-center pb-14">
-    <PrimaryButton size="sm" href="/friends/new">Add friend</PrimaryButton>
-  </div>
-  <div class="space-y-4">
-    {#each data.friends as friend}
-      <FriendTeaser {friend} />
-    {/each}
-  </div>
+	<h1 class="text-center font-bold text-2xl sm:text-4xl pt-14">
+		{data.friends.length}
+		{$t('common.friends', { value: data.friends.length })}
+	</h1>
+	<p class="text-center sm:text-xl pb-4">{$t('common.contactNames')}</p>
+	<div class="flex justify-center pb-14">
+		<PrimaryButton size="sm" href="/friends/new">{$t('common.addFriend')}</PrimaryButton>
+	</div>
+	<div class="space-y-4">
+		{#each data.friends as friend}
+			<FriendTeaser {friend} />
+		{/each}
+	</div>
 </div>
diff --git a/src/routes/friends/[id]/+page.svelte b/src/routes/friends/[id]/+page.svelte
index 1e71a1c..3958e88 100644
--- a/src/routes/friends/[id]/+page.svelte
+++ b/src/routes/friends/[id]/+page.svelte
@@ -1,88 +1,88 @@
 <script>
-  import EditorToolbar from '$lib/components/EditorToolbar.svelte';
-  import { fetchJSON, isEmailValid } from '$lib/util';
-  import { goto } from '$app/navigation';
-  import PlainText from '$lib/components/PlainText.svelte';
+	import EditorToolbar from '$lib/components/EditorToolbar.svelte';
+	import { fetchJSON, isEmailValid } from '$lib/util';
+	import { goto } from '$app/navigation';
+	import PlainText from '$lib/components/PlainText.svelte';
 
-  export let data;
-  let editable, name, email;
+	import { t } from '$lib/translations';
 
-  $: currentUser = data.currentUser;
-  $: bio = data.bio;
-  $: {
-    // HACK: To make sure this is only run when the parent passes in new data
-    data = data;
-    initOrReset();
-  }
+	export let data;
+	let editable, name, email;
 
-  function initOrReset() {
-    name = data.name;
-    email = data.email;
-    editable = true;
-  }
+	$: currentUser = data.currentUser;
+	$: bio = data.bio;
+	$: {
+		// HACK: To make sure this is only run when the parent passes in new data
+		data = data;
+		initOrReset();
+	}
 
-  async function deleteFriend() {
-    if (!currentUser) return alert('Sorry, you are not authorized.');
-    if (confirm('Are you sure you want to delete this friend? It cannot be undone.')) {
-      try {
-        await fetchJSON('POST', '/api/delete-friend', {
-          friend_id: data.friend_id
-        });
-        goto('/friends');
-      } catch (err) {
-        console.error(err);
-        alert('Error deleting friend. Try again.');
-      }
-    }
-  }
+	function initOrReset() {
+		name = data.name;
+		email = data.email;
+		editable = true;
+	}
 
-  async function saveFriend() {
-    if (!currentUser) return alert('Sorry, you are not authorized.');
-    try {
-      await fetchJSON('POST', '/api/update-friend', {
-        friend_id: data.friend_id,
-        name,
-        email
-      });
-      goto('/friends');
-    } catch (err) {
-      console.error(err);
-      alert(
-        "Could not save. Make sure that the name or email you provided haven't been used already."
-      );
-    }
-  }
+	async function deleteFriend() {
+		if (!currentUser) return alert(t('common.notAuthorized'));
+		if (confirm(t('common.confirmAreYouSure'))) {
+			try {
+				await fetchJSON('POST', '/api/delete-friend', {
+					friend_id: data.friend_id
+				});
+				goto('/friends');
+			} catch (err) {
+				console.error(err);
+				alert(t('common.alertErrorDel'));
+			}
+		}
+	}
+
+	async function saveFriend() {
+		if (!currentUser) return alert(t('common.notAuthorized'));
+		try {
+			await fetchJSON('POST', '/api/update-friend', {
+				friend_id: data.friend_id,
+				name,
+				email
+			});
+			goto('/friends');
+		} catch (err) {
+			console.error(err);
+			alert(t('common.couldNotSaveAlert'));
+		}
+	}
 </script>
 
 <svelte:head>
-  <title>{name || email}</title>
-  <link rel="icon" type="image/png" sizes="300x300" href={bio.avatar} />
-  <link rel="apple-touch-icon" sizes="300x300" href={bio.avatar} />
+	<title>{name || email}</title>
+	<link rel="icon" type="image/png" sizes="300x300" href={bio.avatar} />
+	<link rel="apple-touch-icon" sizes="300x300" href={bio.avatar} />
 </svelte:head>
 
 {#if editable}
-  <EditorToolbar
-    on:cancel={() => goto('/friends')}
-    on:save={saveFriend}
-    canConfirm={isEmailValid(email)}
-  />
+	<EditorToolbar
+		on:cancel={() => goto('/friends')}
+		on:save={saveFriend}
+		canConfirm={isEmailValid(email)}
+	/>
 {/if}
 
 <div class="max-w-screen-md mx-auto px-6 pb-8 sm:text-xl">
-  <div class="pt-24 text-sm font-bold">Name</div>
-  <div class="border-b py-2">
-    <PlainText {editable} bind:content={name} placeholder="Enter name" />
-  </div>
+	<div class="pt-24 text-sm font-bold">{$t('common.name')}</div>
+	<div class="border-b py-2">
+		<PlainText {editable} bind:content={name} placeholder={$t('common.enterName')} />
+	</div>
 
-  <div class="pt-8 text-sm font-bold">Email</div>
-  <div class="border-b py-2">
-    <PlainText {editable} bind:content={email} placeholder="Enter email" />
-  </div>
+	<div class="pt-8 text-sm font-bold">{$t('common.email')}</div>
+	<div class="border-b py-2">
+		<PlainText {editable} bind:content={email} placeholder={$t('common.enterEmail')} />
+	</div>
 
-  <div class="text-center pt-12">
-    <button
-      class="font-medium text-sm sm:text-base rounded-full w-full py-3 border border-rose-600 text-rose-600"
-      on:click={deleteFriend}>Delete friend</button
-    >
-  </div>
+	<div class="text-center pt-12">
+		<button
+			class="font-medium text-sm sm:text-base rounded-full w-full py-3 border border-rose-600 text-rose-600"
+			on:click={deleteFriend}>{$t('deleteFriend')}</button
+		>
+	</div>
 </div>
diff --git a/src/routes/friends/new/+page.svelte b/src/routes/friends/new/+page.svelte
index 2157eb7..4923678 100644
--- a/src/routes/friends/new/+page.svelte
+++ b/src/routes/friends/new/+page.svelte
@@ -1,57 +1,57 @@
 <script>
-  import EditorToolbar from '$lib/components/EditorToolbar.svelte';
-  import { fetchJSON, isEmailValid } from '$lib/util';
-  import { goto } from '$app/navigation';
-  import PlainText from '$lib/components/PlainText.svelte';
-
-  export let data;
-  let editable = true,
-    name = '',
-    email = '';
-  $: currentUser = data.currentUser;
-  $: bio = data.bio;
-
-  async function createFriend() {
-    if (!currentUser) return alert('Sorry, you are not authorized.');
-    try {
-      await fetchJSON('POST', '/api/create-friend', {
-        name,
-        email
-      });
-      goto('/friends');
-    } catch (err) {
-      console.error(err);
-      alert(
-        'There was an error. You can try again, but before that, please just copy and paste your article into a safe place.'
-      );
-    }
-  }
+	import EditorToolbar from '$lib/components/EditorToolbar.svelte';
+	import { fetchJSON, isEmailValid } from '$lib/util';
+	import { goto } from '$app/navigation';
+	import PlainText from '$lib/components/PlainText.svelte';
+
+	import { t } from '$lib/translations';
+
+	export let data;
+	let editable = true,
+		name = '',
+		email = '';
+	$: currentUser = data.currentUser;
+	$: bio = data.bio;
+
+	async function createFriend() {
+		if (!currentUser) return alert(t('common.notAuthorized'));
+		try {
+			await fetchJSON('POST', '/api/create-friend', {
+				name,
+				email
+			});
+			goto('/friends');
+		} catch (err) {
+			console.error(err);
+			alert(t('common.alertErrorOccurred'));
+		}
+	}
 </script>
 
 <svelte:head>
-  <title>{name}</title>
-  <link rel="icon" type="image/png" sizes="300x300" href={bio.avatar} />
-  <link rel="apple-touch-icon" sizes="300x300" href={bio.avatar} />
+	<title>{name}</title>
+	<link rel="icon" type="image/png" sizes="300x300" href={bio.avatar} />
+	<link rel="apple-touch-icon" sizes="300x300" href={bio.avatar} />
 </svelte:head>
 
 {#if editable}
-  <EditorToolbar
-    on:cancel={() => goto('/friends')}
-    on:save={createFriend}
-    confirmLabel="Create"
-    canConfirm={isEmailValid(email)}
-  />
+	<EditorToolbar
+		on:cancel={() => goto('/friends')}
+		on:save={createFriend}
+		confirmLabel="Create"
+		canConfirm={isEmailValid(email)}
+	/>
 {/if}
 
 <div class="max-w-screen-md mx-auto px-6 pb-8 sm:text-xl">
-  <div class="pt-24 text-sm font-bold">Name</div>
+	<div class="pt-24 text-sm font-bold">{$t('common.name')}</div>
 
-  <div class="border-b py-2">
-    <PlainText {editable} bind:content={name} placeholder="Enter name" />
-  </div>
+	<div class="border-b py-2">
+		<PlainText {editable} bind:content={name} placeholder={$t('common.enterName')} />
+	</div>
 
-  <div class="pt-8 text-sm font-bold">Email</div>
-  <div class="border-b py-2">
-    <PlainText {editable} bind:content={email} placeholder="Enter email" />
-  </div>
+	<div class="pt-8 text-sm font-bold">{$t('common.email')}</div>
+	<div class="border-b py-2">
+		<PlainText {editable} bind:content={email} placeholder={$t('common.enterEmail')} />
+	</div>
 </div>
diff --git a/src/routes/login/+page.svelte b/src/routes/login/+page.svelte
index 3d03551..3f0d2b1 100644
--- a/src/routes/login/+page.svelte
+++ b/src/routes/login/+page.svelte
@@ -1,30 +1,33 @@
 <script>
-  import Limiter from '$lib/components/Limiter.svelte';
-  import PrimaryButton from '$lib/components/PrimaryButton.svelte';
-  import Input from '$lib/components/Input.svelte';
-  export let form;
-  export let data;
-  $: bio = data.bio;
+	import Limiter from '$lib/components/Limiter.svelte';
+	import PrimaryButton from '$lib/components/PrimaryButton.svelte';
+	import Input from '$lib/components/Input.svelte';
+
+	import { t } from '$lib/translations';
+
+	export let form;
+	export let data;
+	$: bio = data.bio;
 </script>
 
 <svelte:head>
-  <title>Sign in</title>
-  <link rel="icon" type="image/png" sizes="300x300" href={bio.avatar} />
-  <link rel="apple-touch-icon" sizes="300x300" href={bio.avatar} />
+	<title>{$t('common.signin')}</title>
+	<link rel="icon" type="image/png" sizes="300x300" href={bio.avatar} />
+	<link rel="apple-touch-icon" sizes="300x300" href={bio.avatar} />
 </svelte:head>
 
 <Limiter>
-  {#if form?.incorrect}
-    <p class="p-4 bg-red-100 text-red-600 my-4 rounded-md">Password incorrect. Please try again.</p>
-  {/if}
-  <div class="w-full flex flex-col space-y-4 mt-12 mb-4">
-    <form method="POST" class="flex flex-col space-y-8">
-      <div class="flex flex-col">
-        <label for="password" class="font-semibold mb-2 text-1xl">Enter your password</label>
-        <Input type="password" name="password" id="password" />
-      </div>
-      <PrimaryButton type="submit">Sign in</PrimaryButton>
-      <div><a class="underline" href="/">Return to the homepage</a></div>
-    </form>
-  </div>
+	{#if form?.incorrect}
+		<p class="p-4 bg-red-100 text-red-600 my-4 rounded-md">{$t('common.passwordIncorrect')}</p>
+	{/if}
+	<div class="w-full flex flex-col space-y-4 mt-12 mb-4">
+		<form method="POST" class="flex flex-col space-y-8">
+			<div class="flex flex-col">
+				<label for="password" class="font-semibold mb-2 text-1xl">{$t('common.enterPass')}</label>
+				<Input type="password" name="password" id="password" />
+			</div>
+			<PrimaryButton type="submit">{$t('common.signin')}</PrimaryButton>
+			<div><a class="underline" href="/">{$t('common.returnHome')}</a></div>
+		</form>
+	</div>
 </Limiter>
diff --git a/src/routes/logout/+page.svelte b/src/routes/logout/+page.svelte
index 712ea91..9637975 100644
--- a/src/routes/logout/+page.svelte
+++ b/src/routes/logout/+page.svelte
@@ -1,23 +1,25 @@
 <script>
-  import Limiter from '$lib/components/Limiter.svelte';
+	import Limiter from '$lib/components/Limiter.svelte';
 
-  export let form;
-  export let data;
-  $: bio = data.bio;
+	import { t } from '$lib/translations';
+
+	export let form;
+	export let data;
+	$: bio = data.bio;
 </script>
 
 <svelte:head>
-  <title>Logged out</title>
-  <link rel="icon" type="image/png" sizes="300x300" href={bio.avatar} />
-  <link rel="apple-touch-icon" sizes="300x300" href={bio.avatar} />
+	<title>{$t('common.loggedOut')}</title>
+	<link rel="icon" type="image/png" sizes="300x300" href={bio.avatar} />
+	<link rel="apple-touch-icon" sizes="300x300" href={bio.avatar} />
 </svelte:head>
 
 <Limiter>
-  <div class="pt-20">
-    {#if form?.incorrect}
-      <p class="p-4 bg-red-100 text-red-600 my-4 rounded-md">Error while signing out.</p>
-    {:else}
-      Successfully logged out. <a class="underline" href="/">Continue</a>.
-    {/if}
-  </div>
+	<div class="pt-20">
+		{#if form?.incorrect}
+			<p class="p-4 bg-red-100 text-red-600 my-4 rounded-md">{$t('common.errorWhile')}</p>
+		{:else}
+			{$t('common.loggedOutSuccess')}<a class="underline" href="/">{$t('common.continue')}</a>.
+		{/if}
+	</div>
 </Limiter>
diff --git a/src/routes/posts/[slug]/+page.svelte b/src/routes/posts/[slug]/+page.svelte
index 677a47a..f1d1a79 100644
--- a/src/routes/posts/[slug]/+page.svelte
+++ b/src/routes/posts/[slug]/+page.svelte
@@ -9,6 +9,8 @@
   import NotEditable from '$lib/components/NotEditable.svelte';
   import RecipientsSelector from '$lib/components/RecipientsSelector.svelte';
 
+	import { t } from '$lib/translations';
+
   export let data;
   let editable, title, content, created_at, teaser_image, teaser, is_public, recipients;
   let showMenu;
@@ -108,9 +110,9 @@
         on:click={() => {
           editable = true;
           showMenu = false;
-        }}>Edit post</SecondaryButton
+        }}>{$t('common.editPost')}</SecondaryButton
       >
-      <SecondaryButton size="sm" on:click={deletePost}>Delete post</SecondaryButton>
+      <SecondaryButton size="sm" on:click={deletePost}>{$t('common.deleteLetter')}</SecondaryButton>
     </div>
   {/if}
 </WebsiteNav>
diff --git a/src/routes/posts/new/+page.svelte b/src/routes/posts/new/+page.svelte
index b55b0bc..1b6471b 100644
--- a/src/routes/posts/new/+page.svelte
+++ b/src/routes/posts/new/+page.svelte
@@ -1,63 +1,65 @@
 <script>
-  import EditorToolbar from '$lib/components/EditorToolbar.svelte';
-  import { extractTeaser, extractTeaserImage, fetchJSON, toDateString } from '$lib/util';
-  import RecipientsSelector from '$lib/components/RecipientsSelector.svelte';
-  import { goto } from '$app/navigation';
-  import Post from '$lib/components/Post.svelte';
+	import EditorToolbar from '$lib/components/EditorToolbar.svelte';
+	import { extractTeaser, extractTeaserImage, fetchJSON, toDateString } from '$lib/util';
+	import RecipientsSelector from '$lib/components/RecipientsSelector.svelte';
+	import { goto } from '$app/navigation';
+	import Post from '$lib/components/Post.svelte';
 
-  export let data;
+	import { t } from '$lib/translations';
 
-  let is_public = false,
-    recipients = [],
-    editable = true,
-    title = '',
-    content = '',
-    created_at = toDateString();
+	export let data;
 
-  $: currentUser = data.currentUser;
-  $: bio = data.bio;
+	let is_public = false,
+		recipients = [],
+		editable = true,
+		title = '',
+		content = '',
+		created_at = toDateString();
 
-  async function createPost() {
-    if (!currentUser) {
-      return alert('Sorry, you are not authorized to create new posts.');
-    }
-    const teaser = extractTeaser(document.getElementById('post_content'));
-    const teaser_image = extractTeaserImage(document.getElementById('post_content'));
-    try {
-      const { slug } = await fetchJSON('POST', '/api/create-post', {
-        title,
-        content,
-        teaser,
-        teaser_image,
-        recipients,
-        is_public
-      });
-      goto(`/posts/${slug}`);
-    } catch (err) {
-      console.error(err);
-      // HACK: This is guesswork
-      alert('Oops there was an error. Did you specify a title for your post?');
-    }
-  }
+	$: currentUser = data.currentUser;
+	$: bio = data.bio;
 
-  async function discardDraft() {
-    goto('/');
-  }
+	async function createPost() {
+		if (!currentUser) {
+			return alert('Sorry, you are not authorized to create new posts.');
+		}
+		const teaser = extractTeaser(document.getElementById('post_content'));
+		const teaser_image = extractTeaserImage(document.getElementById('post_content'));
+		try {
+			const { slug } = await fetchJSON('POST', '/api/create-post', {
+				title,
+				content,
+				teaser,
+				teaser_image,
+				recipients,
+				is_public
+			});
+			goto(`/posts/${slug}`);
+		} catch (err) {
+			console.error(err);
+			// HACK: This is guesswork
+			alert('Oops there was an error. Did you specify a title for your post?');
+		}
+	}
+
+	async function discardDraft() {
+		goto('/');
+	}
 </script>
 
 <svelte:head>
-  <title>New post</title>
-  <link rel="icon" type="image/png" sizes="300x300" href={bio.avatar} />
-  <link rel="apple-touch-icon" sizes="300x300" href={bio.avatar} />
+	<title>{$t('common.newPost')}</title>
+	<link rel="icon" type="image/png" sizes="300x300" href={bio.avatar} />
+	<link rel="apple-touch-icon" sizes="300x300" href={bio.avatar} />
 </svelte:head>
 
 {#if editable}
-  <EditorToolbar
-    on:cancel={discardDraft}
-    on:save={createPost}
-    confirmLabel={is_public ? 'Publish' : recipients.length > 0 ? 'Send' : 'Save'}
-    canConfirm={!!title}
-  />
+	<EditorToolbar
+		on:cancel={discardDraft}
+		on:save={createPost}
+		confirmLabel={is_public ? 'Publish' : recipients.length > 0 ? 'Send' : 'Save'}
+		canConfirm={!!title}
+	/>
 {/if}
 
 <!-- <WebsiteNav bind:editable /> -->

From 37cbcf7b8e4706bf41d277a002c8482ac9972047 Mon Sep 17 00:00:00 2001
From: Darek Adamkiewicz <d_adamkiewicz@yahoo.co.uk>
Date: Sun, 21 Jul 2024 23:49:52 +0200
Subject: [PATCH 2/5] for corresponding 'package.json' file 'package-lock.json'
 file is updated

---
 package-lock.json | 96 +++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 96 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index 9e4ea20..5b1dcfb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -35,6 +35,8 @@
         "@sveltejs/adapter-auto": "^3.1.1",
         "@sveltejs/kit": "^2.5.3",
         "@sveltejs/vite-plugin-svelte": "^3.0.2",
+        "@sveltekit-i18n/base": "^1.3.7",
+        "@sveltekit-i18n/parser-icu": "^1.0.8",
         "eslint": "^8.57.0",
         "eslint-config-prettier": "^9.1.0",
         "eslint-plugin-svelte": "^2.35.1",
@@ -497,6 +499,60 @@
         "node": ">=16.0.0"
       }
     },
+    "node_modules/@formatjs/ecma402-abstract": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-2.0.0.tgz",
+      "integrity": "sha512-rRqXOqdFmk7RYvj4khklyqzcfQl9vEL/usogncBHRZfZBDOwMGuSRNFl02fu5KGHXdbinju+YXyuR+Nk8xlr/g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@formatjs/intl-localematcher": "0.5.4",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@formatjs/fast-memoize": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@formatjs/fast-memoize/-/fast-memoize-2.2.0.tgz",
+      "integrity": "sha512-hnk/nY8FyrL5YxwP9e4r9dqeM6cAbo8PeU9UjyXojZMNvVad2Z06FAVHyR3Ecw6fza+0GH7vdJgiKIVXTMbSBA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@formatjs/icu-messageformat-parser": {
+      "version": "2.7.8",
+      "resolved": "https://registry.npmjs.org/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.7.8.tgz",
+      "integrity": "sha512-nBZJYmhpcSX0WeJ5SDYUkZ42AgR3xiyhNCsQweFx3cz/ULJjym8bHAzWKvG5e2+1XO98dBYC0fWeeAECAVSwLA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@formatjs/ecma402-abstract": "2.0.0",
+        "@formatjs/icu-skeleton-parser": "1.8.2",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@formatjs/icu-skeleton-parser": {
+      "version": "1.8.2",
+      "resolved": "https://registry.npmjs.org/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.8.2.tgz",
+      "integrity": "sha512-k4ERKgw7aKGWJZgTarIcNEmvyTVD9FYh0mTrrBMHZ1b8hUu6iOJ4SzsZlo3UNAvHYa+PnvntIwRPt1/vy4nA9Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@formatjs/ecma402-abstract": "2.0.0",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@formatjs/intl-localematcher": {
+      "version": "0.5.4",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.5.4.tgz",
+      "integrity": "sha512-zTwEpWOzZ2CiKcB93BLngUX59hQkuZjT2+SAQEscSm52peDW/getsawMcWF1rGRpMCX6D7nSJA3CzJ8gn13N/g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.14",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
@@ -1046,6 +1102,26 @@
         "vite": "^5.0.0"
       }
     },
+    "node_modules/@sveltekit-i18n/base": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/@sveltekit-i18n/base/-/base-1.3.7.tgz",
+      "integrity": "sha512-kg1kql1/ro/lIudwFiWrv949Q07gmweln87tflUZR51MNdXXzK4fiJQv5Mw50K/CdQ5BOk/dJ0WOH2vOtBI6yw==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "svelte": ">=3.49.0"
+      }
+    },
+    "node_modules/@sveltekit-i18n/parser-icu": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@sveltekit-i18n/parser-icu/-/parser-icu-1.0.8.tgz",
+      "integrity": "sha512-/LnvE1EJv+higIxB5cWIV+9neiOe+CfC7VKhpv9mnU35NcZO3yOhEZ8y6F8nHHkMYIABLcqr15yk4hSvmRGWDw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "intl-messageformat": "^10.1.1"
+      }
+    },
     "node_modules/@tailwindcss/forms": {
       "version": "0.5.7",
       "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.7.tgz",
@@ -2435,6 +2511,19 @@
       "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
       "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew=="
     },
+    "node_modules/intl-messageformat": {
+      "version": "10.5.14",
+      "resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-10.5.14.tgz",
+      "integrity": "sha512-IjC6sI0X7YRjjyVH9aUgdftcmZK7WXdHeil4KwbjDnRWjnVitKpAx3rr6t6di1joFp5188VqKcobOPA6mCLG/w==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@formatjs/ecma402-abstract": "2.0.0",
+        "@formatjs/fast-memoize": "2.2.0",
+        "@formatjs/icu-messageformat-parser": "2.7.8",
+        "tslib": "^2.4.0"
+      }
+    },
     "node_modules/is-binary-path": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
@@ -4304,6 +4393,13 @@
       "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
       "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA=="
     },
+    "node_modules/tslib": {
+      "version": "2.6.3",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.3.tgz",
+      "integrity": "sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==",
+      "dev": true,
+      "license": "0BSD"
+    },
     "node_modules/tunnel-agent": {
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",

From 17f876cea98ec28b72febdaf15d99194d6f30b9f Mon Sep 17 00:00:00 2001
From: Darek Adamkiewicz <d_adamkiewicz@yahoo.co.uk>
Date: Tue, 23 Jul 2024 07:05:44 +0200
Subject: [PATCH 3/5] wip

---
 Dockerfile.dev           | 54 ++++++++++++++++++++++++++++++++++++++++
 scripts/create_sqlite.sh |  5 ++++
 2 files changed, 59 insertions(+)
 create mode 100644 Dockerfile.dev
 create mode 100755 scripts/create_sqlite.sh

diff --git a/Dockerfile.dev b/Dockerfile.dev
new file mode 100644
index 0000000..fa55923
--- /dev/null
+++ b/Dockerfile.dev
@@ -0,0 +1,54 @@
+# syntax = docker/dockerfile:1
+
+ARG NODE_VERSION=20.11.1
+FROM node:${NODE_VERSION}-slim as base
+
+LABEL fly_launch_runtime="Node.js"
+
+# Node.js app lives here
+WORKDIR /app
+
+# Set production environment
+ENV NODE_ENV="production"
+
+# Throw-away build stage to reduce size of final image
+FROM base as build
+
+# Install packages needed to build node modules
+RUN apt-get update -qq && \
+    apt-get install -y build-essential pkg-config python-is-python3
+
+# Install node modules
+COPY --link .npmrc package-lock.json package.json ./
+RUN npm ci --include=dev
+
+# Copy application code
+COPY --link . .
+
+# Build application
+RUN mkdir /data && npm run build
+
+# Remove development dependencies
+RUN npm prune --omit=dev
+
+# Final stage for app image
+FROM base
+
+# Install packages needed for deployment
+RUN apt-get update -qq && \
+    apt-get install --no-install-recommends -y sqlite3 && \
+    rm -rf /var/lib/apt/lists /var/cache/apt/archives
+
+# Copy built application
+COPY --from=build /app /app
+
+# Setup sqlite3 on a separate volume
+RUN mkdir -p /data
+VOLUME /data
+RUN chmod +x /app/scripts/create_sqlite.sh
+RUN /app/scripts/create_sqlite.sh
+
+# Start the server by default, this can be overwritten at runtime
+EXPOSE 3000
+ENV DATABASE_URL="file:///data/sqlite.db"
+CMD [ "npm", "run", "start" ]
diff --git a/scripts/create_sqlite.sh b/scripts/create_sqlite.sh
new file mode 100755
index 0000000..3f979be
--- /dev/null
+++ b/scripts/create_sqlite.sh
@@ -0,0 +1,5 @@
+FILE="./data/db.sqlite3"
+if ! [ -f "$FILE" ]
+then
+	sqlite3 $FILE < ./scripts/schema.sql
+fi

From a1c75174b93fe08c53fd04749e3a9850820d2621 Mon Sep 17 00:00:00 2001
From: Darek Adamkiewicz <d_adamkiewicz@yahoo.co.uk>
Date: Wed, 31 Jul 2024 22:39:55 +0000
Subject: [PATCH 4/5] 'Delete Post' properly translated, "'as' and 'FROM'
 keyword casing do not match" warning produced by 'docker build ...' removed

---
 Dockerfile.dev                       | 4 ++--
 src/routes/posts/[slug]/+page.svelte | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/Dockerfile.dev b/Dockerfile.dev
index fa55923..7cda711 100644
--- a/Dockerfile.dev
+++ b/Dockerfile.dev
@@ -1,7 +1,7 @@
 # syntax = docker/dockerfile:1
 
 ARG NODE_VERSION=20.11.1
-FROM node:${NODE_VERSION}-slim as base
+FROM node:${NODE_VERSION}-slim AS base
 
 LABEL fly_launch_runtime="Node.js"
 
@@ -12,7 +12,7 @@ WORKDIR /app
 ENV NODE_ENV="production"
 
 # Throw-away build stage to reduce size of final image
-FROM base as build
+FROM base AS build
 
 # Install packages needed to build node modules
 RUN apt-get update -qq && \
diff --git a/src/routes/posts/[slug]/+page.svelte b/src/routes/posts/[slug]/+page.svelte
index f1d1a79..584f8ae 100644
--- a/src/routes/posts/[slug]/+page.svelte
+++ b/src/routes/posts/[slug]/+page.svelte
@@ -112,7 +112,7 @@
           showMenu = false;
         }}>{$t('common.editPost')}</SecondaryButton
       >
-      <SecondaryButton size="sm" on:click={deletePost}>{$t('common.deleteLetter')}</SecondaryButton>
+      <SecondaryButton size="sm" on:click={deletePost}>{$t('common.deletePost')}</SecondaryButton>
     </div>
   {/if}
 </WebsiteNav>

From c977a0ae3b168f1b3356060667c2e11f2867836a Mon Sep 17 00:00:00 2001
From: Darek Adamkiewicz <d_adamkiewicz@yahoo.co.uk>
Date: Tue, 27 Aug 2024 09:58:50 +0200
Subject: [PATCH 5/5] some translation names changed, some new one
 added/implemented

---
 src/lib/components/RecipientsSelector.svelte | 422 +++++++++----------
 src/lib/en/common.json                       |  11 +-
 src/lib/pl/common.json                       |  11 +-
 src/routes/friends/[id]/+page.svelte         | 138 +++---
 src/routes/posts/[slug]/+page.svelte         |  15 +-
 5 files changed, 300 insertions(+), 297 deletions(-)

diff --git a/src/lib/components/RecipientsSelector.svelte b/src/lib/components/RecipientsSelector.svelte
index 35c2924..f8fe027 100644
--- a/src/lib/components/RecipientsSelector.svelte
+++ b/src/lib/components/RecipientsSelector.svelte
@@ -1,216 +1,216 @@
 <script>
-	// import { onMount } from 'svelte';
-	import { debounce, classNames, isEmailValid } from '$lib/util';
-	import CopyableRecipient from './CopyableRecipient.svelte';
-
-	import { t } from '$lib/translations';
-
-	export let recipients = [];
-	export let is_public;
-	export let editable;
-	export let slug = undefined;
-
-	let value;
-	let result = [];
-	let chooseVisibility = false;
-	let selectedResult = 0;
-	let input;
-	let resultsEl;
-
-	// onMount(() => {
-	//   if (input) {
-	//     input.focus();
-	//   }
-	// });
-
-	async function search() {
-		if (value) {
-			const response = await fetch(`/api/search-friends?q=${value}`);
-			result = await response.json();
-		} else {
-			result = [];
-		}
-
-		// TODO: remove entries that are already in the recipient list
-
-		if (isEmailValid(value)) {
-			// Double check that the email is not already in your contacts
-			const isInResult = Boolean(result.find(f => f.email === value));
-			if (!isInResult) {
-				result = [{ email: value }, ...result];
-			}
-		}
-		selectedResult = 0;
-	}
-
-	function navigate() {
-		const currentResult = result[selectedResult];
-		if (currentResult) {
-			addRecipient(currentResult);
-		}
-	}
-
-	function addRecipient(recipient) {
-		recipients = recipients.concat([recipient]);
-		value = '';
-	}
-
-	function prevResult() {
-		if (selectedResult > 0) {
-			selectedResult -= 1;
-		}
-	}
-
-	function nextResult() {
-		if (selectedResult < result.length - 1) {
-			selectedResult += 1;
-		}
-	}
-
-	function removeRecipient(index) {
-		recipients.splice(index, 1);
-		recipients = recipients;
-	}
-
-	function togglePublic() {
-		is_public = true;
-		chooseVisibility = false;
-	}
-
-	function togglePrivate() {
-		is_public = false;
-		chooseVisibility = false;
-	}
-
-	function toggleVisibilitySelector() {
-		if (!editable) return; // Ignore when not editing
-		chooseVisibility = !chooseVisibility;
-	}
-
-	// HACK: This is not ideal, may cancel clicks on results when pressed too long
-	function onBlur() {
-		setTimeout(() => {
-			value = '';
-		}, 200);
-	}
-
-	function onKeyDown(e) {
-		switch (e.keyCode) {
-			case 38: // up
-				prevResult();
-				e.preventDefault();
-				break;
-			case 40: // down
-				nextResult();
-				e.preventDefault();
-				break;
-			case 13:
-				navigate();
-				break;
-		}
-	}
+  // import { onMount } from 'svelte';
+  import { debounce, classNames, isEmailValid } from '$lib/util';
+  import CopyableRecipient from './CopyableRecipient.svelte';
+
+  import { t } from '$lib/translations';
+
+  export let recipients = [];
+  export let is_public;
+  export let editable;
+  export let slug = undefined;
+
+  let value;
+  let result = [];
+  let chooseVisibility = false;
+  let selectedResult = 0;
+  let input;
+  let resultsEl;
+
+  // onMount(() => {
+  //   if (input) {
+  //     input.focus();
+  //   }
+  // });
+
+  async function search() {
+    if (value) {
+      const response = await fetch(`/api/search-friends?q=${value}`);
+      result = await response.json();
+    } else {
+      result = [];
+    }
+
+    // TODO: remove entries that are already in the recipient list
+
+    if (isEmailValid(value)) {
+      // Double check that the email is not already in your contacts
+      const isInResult = Boolean(result.find(f => f.email === value));
+      if (!isInResult) {
+        result = [{ email: value }, ...result];
+      }
+    }
+    selectedResult = 0;
+  }
+
+  function navigate() {
+    const currentResult = result[selectedResult];
+    if (currentResult) {
+      addRecipient(currentResult);
+    }
+  }
+
+  function addRecipient(recipient) {
+    recipients = recipients.concat([recipient]);
+    value = '';
+  }
+
+  function prevResult() {
+    if (selectedResult > 0) {
+      selectedResult -= 1;
+    }
+  }
+
+  function nextResult() {
+    if (selectedResult < result.length - 1) {
+      selectedResult += 1;
+    }
+  }
+
+  function removeRecipient(index) {
+    recipients.splice(index, 1);
+    recipients = recipients;
+  }
+
+  function togglePublic() {
+    is_public = true;
+    chooseVisibility = false;
+  }
+
+  function togglePrivate() {
+    is_public = false;
+    chooseVisibility = false;
+  }
+
+  function toggleVisibilitySelector() {
+    if (!editable) return; // Ignore when not editing
+    chooseVisibility = !chooseVisibility;
+  }
+
+  // HACK: This is not ideal, may cancel clicks on results when pressed too long
+  function onBlur() {
+    setTimeout(() => {
+      value = '';
+    }, 200);
+  }
+
+  function onKeyDown(e) {
+    switch (e.keyCode) {
+      case 38: // up
+        prevResult();
+        e.preventDefault();
+        break;
+      case 40: // down
+        nextResult();
+        e.preventDefault();
+        break;
+      case 13:
+        navigate();
+        break;
+    }
+  }
 </script>
 
 <div class="max-w-screen-md mx-auto px-6 pb-8 relative">
-	<!-- svelte-ignore a11y-no-static-element-interactions -->
-	{#if editable || is_public || !is_public}
-		<svelte:element
-			this={editable ? 'button' : 'div'}
-			on:click={toggleVisibilitySelector}
-			class={classNames(
-				'relative rounded-full px-3 py-0.5 mr-1 mb-1 text-sm sm:text-base inline-flex items-center space-x-1 bg-black text-white',
-				chooseVisibility ? 'z-50' : '' // pop to the top while editing visibility
-			)}
-		>
-			<span
-				>{is_public
-					? $t('common.public', { gender: 'male' })
-					: $t('common.private', { gender: 'male' })}
-			</span>
-			{#if editable}
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					fill="none"
-					viewBox="0 0 24 24"
-					stroke-width="1.5"
-					stroke="currentColor"
-					class="w-3 h-3 inline-block"
-				>
-					<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
-				</svg>
-			{/if}
-		</svelte:element>
-	{/if}
-
-	{#if chooseVisibility && editable}
-		<!-- svelte-ignore a11y-click-events-have-key-events -->
-		<!-- svelte-ignore a11y-no-static-element-interactions -->
-		<div
-			class="z-40 fixed inset-0 bg-black opacity-80 cursor-default"
-			on:click={toggleVisibilitySelector}
-		/>
-		<div class="absolute top-10 left-6 right-6 sm:left-12 sm:right-12 z-50">
-			<div class="max-w-lg space-y-2 text-sm sm:text-base">
-				<button
-					on:click={togglePrivate}
-					class={classNames(
-						'block px-4 py-2 rounded-full mx-0 w-full text-left bg-white border border-black'
-					)}
-				>
-					{$t('common.private', { gender: 'male' })}
-					<span class="text-sm">— {$t('common.journalAndDrafts')}</span>
-				</button>
-				<button
-					on:click={togglePublic}
-					class={classNames(
-						'block px-4 py-2 rounded-full mx-0 w-full text-left bg-white border border-black'
-					)}
-				>
-					{$t('common.public', { gender: 'male' })}<span class="text-sm"
-						>— {$t('common.everyoneCanRead')}</span
-					>
-				</button>
-			</div>
-		</div>
-	{/if}
-
-	{#each recipients as recipient, i}
-		<CopyableRecipient {recipient} {editable} {slug} on:delete={() => removeRecipient(i)} />
-	{/each}
-
-	{#if editable}
-		<div class="relative border-gray-100 flex space-x-4 items-center py-2">
-			<input
-				bind:this={input}
-				on:keydown={onKeyDown}
-				bind:value
-				use:debounce={{ value, func: search, duration: 50 }}
-				on:blur={onBlur}
-				autocomplete="off"
-				id="search"
-				name="search"
-				class="block w-full border-none bg-transparent px-0 py-2 placeholder-gray-300 focus:border-black focus:text-gray-900 focus:placeholder-gray-400 focus:outline-none focus:ring-0"
-				placeholder={$t('common.enterEmail')}
-				type="text"
-			/>
-		</div>
-
-		<div class="overflow-y-auto" bind:this={resultsEl}>
-			{#each result as friend, i}
-				<button
-					on:click={() => addRecipient(friend)}
-					class={classNames(
-						'w-full text-left block px-4 sm:px-6 py-3 border-b border-gray-100 text-gray-600 hover:text-black',
-						selectedResult === i ? 'bg-gray-100' : ''
-					)}
-				>
-					{#if friend.name}
-						{friend.name} ({friend.email})
-					{:else}
-						{friend.email}
-					{/if}
-				</button>
-			{/each}
-		</div>
-	{/if}
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
+  {#if editable || is_public || !is_public}
+    <svelte:element
+      this={editable ? 'button' : 'div'}
+      on:click={toggleVisibilitySelector}
+      class={classNames(
+        'relative rounded-full px-3 py-0.5 mr-1 mb-1 text-sm sm:text-base inline-flex items-center space-x-1 bg-black text-white',
+        chooseVisibility ? 'z-50' : '' // pop to the top while editing visibility
+      )}
+    >
+      <span
+        >{is_public
+          ? $t('common.public', { gender: 'male' })
+          : $t('common.private', { gender: 'male' })}
+      </span>
+      {#if editable}
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="1.5"
+          stroke="currentColor"
+          class="w-3 h-3 inline-block"
+        >
+          <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
+        </svg>
+      {/if}
+    </svelte:element>
+  {/if}
+
+  {#if chooseVisibility && editable}
+    <!-- svelte-ignore a11y-click-events-have-key-events -->
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
+    <div
+      class="z-40 fixed inset-0 bg-black opacity-80 cursor-default"
+      on:click={toggleVisibilitySelector}
+    />
+    <div class="absolute top-10 left-6 right-6 sm:left-12 sm:right-12 z-50">
+      <div class="max-w-lg space-y-2 text-sm sm:text-base">
+        <button
+          on:click={togglePrivate}
+          class={classNames(
+            'block px-4 py-2 rounded-full mx-0 w-full text-left bg-white border border-black'
+          )}
+        >
+          {$t('common.private', { gender: 'male' })}
+          <span class="text-sm">— {$t('common.journalAndDrafts')}</span>
+        </button>
+        <button
+          on:click={togglePublic}
+          class={classNames(
+            'block px-4 py-2 rounded-full mx-0 w-full text-left bg-white border border-black'
+          )}
+        >
+          {$t('common.public', { gender: 'male' })}<span class="text-sm"
+            >— {$t('common.everyoneCanRead')}</span
+          >
+        </button>
+      </div>
+    </div>
+  {/if}
+
+  {#each recipients as recipient, i}
+    <CopyableRecipient {recipient} {editable} {slug} on:delete={() => removeRecipient(i)} />
+  {/each}
+
+  {#if editable}
+    <div class="relative border-gray-100 flex space-x-4 items-center py-2">
+      <input
+        bind:this={input}
+        on:keydown={onKeyDown}
+        bind:value
+        use:debounce={{ value, func: search, duration: 50 }}
+        on:blur={onBlur}
+        autocomplete="off"
+        id="search"
+        name="search"
+        class="block w-full border-none bg-transparent px-0 py-2 placeholder-gray-300 focus:border-black focus:text-gray-900 focus:placeholder-gray-400 focus:outline-none focus:ring-0"
+        placeholder={$t('common.enterEmailOrName')}
+        type="text"
+      />
+    </div>
+
+    <div class="overflow-y-auto" bind:this={resultsEl}>
+      {#each result as friend, i}
+        <button
+          on:click={() => addRecipient(friend)}
+          class={classNames(
+            'w-full text-left block px-4 sm:px-6 py-3 border-b border-gray-100 text-gray-600 hover:text-black',
+            selectedResult === i ? 'bg-gray-100' : ''
+          )}
+        >
+          {#if friend.name}
+            {friend.name} ({friend.email})
+          {:else}
+            {friend.email}
+          {/if}
+        </button>
+      {/each}
+    </div>
+  {/if}
 </div>
diff --git a/src/lib/en/common.json b/src/lib/en/common.json
index cdc9b75..31151a8 100644
--- a/src/lib/en/common.json
+++ b/src/lib/en/common.json
@@ -23,7 +23,7 @@
 	"signInMesg": "Only the owner can sign in. But you can run {value} yourself.",
 	"showMore": "Show more",
 	"passwordIncorrect": "Password incorrect. Please try again.",
-	"enterEmail": "Enter email or name to send to friends.",
+	"enterEmailOrName": "Enter email or name to send to friends.",
 	"postTitle": "Post title…",
 	"postContent": "Post content…",
 	"journalAndDrafts": "Journal and drafts",
@@ -59,7 +59,10 @@
 	"enterEmail": "Enter email",
 	"deleteFriend": "Delete friend",
 	"couldNotSaveAlert": "Could not save. Make sure that the name or email you provided haoven't been used already.",
-	"confirmAreYouSure": "Are you sure you want to delete this friend? It cannot be undone.",
-	"alertErrorDel": "Error deleting friend. Try again.",
-	"alertErrorOccured": "There was an error. You can try again, but before that, please just copy and paste your article into a safe place."
+	"confirmDeleteFriend": "Are you sure you want to delete this friend? It cannot be undone.",
+	"alertErrorOnDeleteFriend": "Error deleting friend. Try again.",
+	"alertErrorOccured": "There was an error. You can try again, but before that, please just copy and paste your article into a safe place.",
+	"confirmDeletePost":"Are you sure you want to delete this post? It cannot be undone.",
+	"alertErrorOnDeleteArticle":"Error deleting the article. Try again.",
+    "thereWasError":"There was an error. You can try again, but before that, please just copy and paste your article into a safe place."
 }
diff --git a/src/lib/pl/common.json b/src/lib/pl/common.json
index e631993..1a2614a 100644
--- a/src/lib/pl/common.json
+++ b/src/lib/pl/common.json
@@ -23,7 +23,7 @@
 	"signInMesg": "Jedynie właściciel może się zalogować. Ale możesz uruchomić swój własny serwis {value}.",
 	"showMore": "Pokaż więcej",
 	"passwordIncorrect": "Błędne hasło. Proszę spróbować ponownie.",
-	"enterEmail": "By wysłać do znajomych wprowadź e-mail lub nazwę.",
+	"enterEmailOrName": "By wysłać do znajomych wprowadź e-mail lub nazwę.",
 	"postTitle": "Tytuł wpisu…",
 	"postContent": "Treść wpisu…",
 	"journalAndDrafts": "Dziennik i wersje robocze",
@@ -59,7 +59,10 @@
 	"enterEmail": "Wprowadź email",
 	"deleteFriend": "Usuń znajomego",
 	"couldNotSaveAlert": "Nie można zapisać. Upewnij się, że podana nazwa lub adres e-mail nie zostały już użyte.",
-	"confirmAreYouSure": "Czy na pewno chcesz usunąć tego znajomego? Nie można tego cofnąć.",
-	"alertErrorDel": "Błąd podczas usuwania znajomego. Spróbuj ponownie.",
-	"alertErrorOccured": "Wystąpił błąd. Możesz spróbować ponownie, ale wcześniej po prostu skopiuj i wklej swój artykuł w bezpiecznym miejscu."
+	"confirmDeleteFriend": "Czy na pewno chcesz usunąć tego znajomego? Nie można tego cofnąć.",
+	"alertErrorOnDeleteFriend": "Błąd podczas usuwania znajomego. Spróbuj ponownie.",
+	"alertErrorOccured": "Wystąpił błąd. Możesz spróbować ponownie, ale wcześniej po prostu skopiuj i wklej swój artykuł w bezpiecznym miejscu.",
+	"confirmDeletePost":"Czy na pewno chcesz usunąć ten post? Nie można tego cofnąć.",
+	"alertErrorOnDeleteArticle":"Błąd usuwania artykułu. Spróbuj ponownie.",
+    "thereWasError":"Wystąpił błąd. Możesz spróbować ponownie, ale przedtem po prostu skopiuj i wklej swój artykuł w bezpieczne miejsce."
 }
diff --git a/src/routes/friends/[id]/+page.svelte b/src/routes/friends/[id]/+page.svelte
index 3958e88..9153c65 100644
--- a/src/routes/friends/[id]/+page.svelte
+++ b/src/routes/friends/[id]/+page.svelte
@@ -1,88 +1,88 @@
 <script>
-	import EditorToolbar from '$lib/components/EditorToolbar.svelte';
-	import { fetchJSON, isEmailValid } from '$lib/util';
-	import { goto } from '$app/navigation';
-	import PlainText from '$lib/components/PlainText.svelte';
+  import EditorToolbar from '$lib/components/EditorToolbar.svelte';
+  import { fetchJSON, isEmailValid } from '$lib/util';
+  import { goto } from '$app/navigation';
+  import PlainText from '$lib/components/PlainText.svelte';
 
-	import { t } from '$lib/translations';
+  import { t } from '$lib/translations';
 
-	export let data;
-	let editable, name, email;
+  export let data;
+  let editable, name, email;
 
-	$: currentUser = data.currentUser;
-	$: bio = data.bio;
-	$: {
-		// HACK: To make sure this is only run when the parent passes in new data
-		data = data;
-		initOrReset();
-	}
+  $: currentUser = data.currentUser;
+  $: bio = data.bio;
+  $: {
+    // HACK: To make sure this is only run when the parent passes in new data
+    data = data;
+    initOrReset();
+  }
 
-	function initOrReset() {
-		name = data.name;
-		email = data.email;
-		editable = true;
-	}
+  function initOrReset() {
+    name = data.name;
+    email = data.email;
+    editable = true;
+  }
 
-	async function deleteFriend() {
-		if (!currentUser) return alert(t('common.notAuthorized'));
-		if (confirm(t('common.confirmAreYouSure'))) {
-			try {
-				await fetchJSON('POST', '/api/delete-friend', {
-					friend_id: data.friend_id
-				});
-				goto('/friends');
-			} catch (err) {
-				console.error(err);
-				alert(t('common.alertErrorDel'));
-			}
-		}
-	}
+  async function deleteFriend() {
+    if (!currentUser) return alert($t('common.notAuthorized'));
+    if (confirm($t('common.confirmDeleteFriend'))) {
+      try {
+        await fetchJSON('POST', '/api/delete-friend', {
+          friend_id: data.friend_id
+        });
+        goto('/friends');
+      } catch (err) {
+        console.error(err);
+        alert($t('common.alertErrorOnDeleteFriend'));
+      }
+    }
+  }
 
-	async function saveFriend() {
-		if (!currentUser) return alert(t('common.notAuthorized'));
-		try {
-			await fetchJSON('POST', '/api/update-friend', {
-				friend_id: data.friend_id,
-				name,
-				email
-			});
-			goto('/friends');
-		} catch (err) {
-			console.error(err);
-			alert(t('common.couldNotSaveAlert'));
-		}
-	}
+  async function saveFriend() {
+    if (!currentUser) return alert($t('common.notAuthorized'));
+    try {
+      await fetchJSON('POST', '/api/update-friend', {
+        friend_id: data.friend_id,
+        name,
+        email
+      });
+      goto('/friends');
+    } catch (err) {
+      console.error(err);
+      alert($t('common.couldNotSaveAlert'));
+    }
+  }
 </script>
 
 <svelte:head>
-	<title>{name || email}</title>
-	<link rel="icon" type="image/png" sizes="300x300" href={bio.avatar} />
-	<link rel="apple-touch-icon" sizes="300x300" href={bio.avatar} />
+  <title>{name || email}</title>
+  <link rel="icon" type="image/png" sizes="300x300" href={bio.avatar} />
+  <link rel="apple-touch-icon" sizes="300x300" href={bio.avatar} />
 </svelte:head>
 
 {#if editable}
-	<EditorToolbar
-		on:cancel={() => goto('/friends')}
-		on:save={saveFriend}
-		canConfirm={isEmailValid(email)}
-	/>
+  <EditorToolbar
+    on:cancel={() => goto('/friends')}
+    on:save={saveFriend}
+    canConfirm={isEmailValid(email)}
+  />
 {/if}
 
 <div class="max-w-screen-md mx-auto px-6 pb-8 sm:text-xl">
-	<div class="pt-24 text-sm font-bold">{$t('common.name')}</div>
-	<div class="border-b py-2">
-		<PlainText {editable} bind:content={name} placeholder={$t('common.enterName')} />
-	</div>
+  <div class="pt-24 text-sm font-bold">{$t('common.name')}</div>
+  <div class="border-b py-2">
+    <PlainText {editable} bind:content={name} placeholder={$t('common.enterName')} />
+  </div>
 
-	<div class="pt-8 text-sm font-bold">{$t('common.email')}</div>
-	<div class="border-b py-2">
-		<PlainText {editable} bind:content={email} placeholder={$t('common.enterEmail')} />
-	</div>
+  <div class="pt-8 text-sm font-bold">{$t('common.email')}</div>
+  <div class="border-b py-2">
+    <PlainText {editable} bind:content={email} placeholder={$t('common.enterEmail')} />
+  </div>
 
-	<div class="text-center pt-12">
-		<button
-			class="font-medium text-sm sm:text-base rounded-full w-full py-3 border border-rose-600 text-rose-600"
-			on:click={deleteFriend}>{$t('deleteFriend')}</button
-		>
-	</div>
+  <div class="text-center pt-12">
+    <button
+      class="font-medium text-sm sm:text-base rounded-full w-full py-3 border border-rose-600 text-rose-600"
+      on:click={deleteFriend}>{$t('deleteFriend')}</button
+    >
+  </div>
 </div>
diff --git a/src/routes/posts/[slug]/+page.svelte b/src/routes/posts/[slug]/+page.svelte
index 584f8ae..c620e77 100644
--- a/src/routes/posts/[slug]/+page.svelte
+++ b/src/routes/posts/[slug]/+page.svelte
@@ -9,7 +9,7 @@
   import NotEditable from '$lib/components/NotEditable.svelte';
   import RecipientsSelector from '$lib/components/RecipientsSelector.svelte';
 
-	import { t } from '$lib/translations';
+  import { t } from '$lib/translations';
 
   export let data;
   let editable, title, content, created_at, teaser_image, teaser, is_public, recipients;
@@ -22,7 +22,6 @@
     initOrReset();
   }
 
-
   function initOrReset() {
     title = data.title;
     content = data.content;
@@ -35,9 +34,9 @@
   }
 
   async function deletePost() {
-    if (!currentUser) return alert('Sorry, you are not authorized.');
+    if (!currentUser) return alert($t('common.notAuthorized'));
 
-    if (confirm('Are you sure you want to delete this post? It cannot be undone.')) {
+    if (confirm($t('common.confirmDeletePost'))) {
       try {
         await fetchJSON('POST', '/api/delete-post', {
           slug: data.slug
@@ -45,14 +44,14 @@
         goto('/');
       } catch (err) {
         console.error(err);
-        alert('Error deleting the article. Try again.');
+        alert($t('common.alertErrorOnDeleteArticle'));
         window.location.reload();
       }
     }
   }
 
   async function savePost() {
-    if (!currentUser) return alert('Sorry, you are not authorized.');
+    if (!currentUser) return alert($t('common.notAuthorized'));
     teaser = extractTeaser(document.getElementById('post_content'));
     teaser_image = extractTeaserImage(document.getElementById('post_content'));
     try {
@@ -73,9 +72,7 @@
       }
     } catch (err) {
       console.error(err);
-      alert(
-        'There was an error. You can try again, but before that, please just copy and paste your article into a safe place.'
-      );
+      alert($t('common.thereWasError'));
     }
   }
 </script>