Merge pull request #239 from Xyphyn/i18n

Add support for localization
Xyphyn · Jun 6, 2024 · 8756670 · 8756670
2 parents dbd2ed6 + afc727a
commit 8756670
Show file tree

Hide file tree

Showing 84 changed files with 2,067 additions and 1,082 deletions.
diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml
diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "photon-lemmy",
-  "version": "1.29.6",
+  "version": "1.30.0",
   "private": true,
   "scripts": {
     "dev": "vite dev",
@@ -35,6 +35,7 @@
     "svelte-check": "^3.0.1",
     "svelte-hero-icons": "^5.0.0",
     "svelte-tiny-virtual-list": "^2.0.5",
+    "sveltekit-i18n": "^2.4.2",
     "tailwindcss": "^3.3.3",
     "tslib": "^2.4.1",
     "typescript": "^5.0.0",

diff --git a/src/lib/components/lemmy/SiteCard.svelte b/src/lib/components/lemmy/SiteCard.svelte
@@ -2,28 +2,22 @@
   import Markdown from '$lib/components/markdown/Markdown.svelte'
   import Avatar from '$lib/components/ui/Avatar.svelte'
   import StickyCard from '$lib/components/ui/StickyCard.svelte'
-  import FormattedNumber from '$lib/components/util/FormattedNumber.svelte'
-  import RelativeDate from '$lib/components/util/RelativeDate.svelte'
-  import { publishedToDate } from '$lib/components/util/date.js'
-  import { getClient } from '$lib/lemmy.js'
   import type { PersonView, SiteView, Tagline } from 'lemmy-js-client'
-  import { Button, Disclosure, Popover } from 'mono-svelte'
+  import { Button } from 'mono-svelte'
   import {
     BuildingOffice,
-    Calendar,
     ChartBar,
-    ChatBubbleOvalLeftEllipsis,
     Icon,
     InformationCircle,
     Newspaper,
-    PencilSquare,
     ServerStack,
     UserGroup,
   } from 'svelte-hero-icons'
   import Expandable from '../ui/Expandable.svelte'
   import LabelStat from '../ui/LabelStat.svelte'
   import ItemList from './generic/ItemList.svelte'
   import { userLink } from '$lib/lemmy/generic'
+  import { t } from '$lib/translations'
 
   export let site: SiteView
   export let taglines: Tagline[] | undefined = undefined
@@ -49,15 +43,25 @@
     </div>
   </div>
   <div class="flex flex-row gap-1 !border-0">
-    <Button href="/modlog" title="Modlog" color="ghost" size="square-md">
+    <Button
+      href="/modlog"
+      title={$t('routes.modlog')}
+      color="ghost"
+      size="square-md"
+    >
       <Icon src={Newspaper} size="16" mini />
     </Button>
-    <Button href="/legal" title="Legal" color="ghost" size="square-md">
+    <Button
+      href="/legal"
+      title={$t('routes.legal.title')}
+      color="ghost"
+      size="square-md"
+    >
       <Icon src={BuildingOffice} size="16" mini />
     </Button>
     <Button
       href="/instances"
-      title="Instances"
+      title={$t('routes.instances')}
       class="3xl:rounded-l-none"
       color="ghost"
       size="square-md"
@@ -78,7 +82,8 @@
 
     <Expandable>
       <svelte:fragment slot="title">
-        <Icon src={InformationCircle} size="15" mini /> About
+        <Icon src={InformationCircle} size="15" mini />
+        {$t('cards.site.about')}
       </svelte:fragment>
       <Markdown source={site.site.description} />
       <div class="my-4" />
@@ -87,21 +92,22 @@
 
     <Expandable>
       <svelte:fragment slot="title">
-        <Icon src={ChartBar} size="15" mini /> Stats
+        <Icon src={ChartBar} size="15" mini />
+        {$t('cards.site.stats')}
       </svelte:fragment>
       <div class="flex flex-row gap-4 flex-wrap">
         <LabelStat
-          label="Users"
+          label={$t('content.users')}
           content={site.counts.users.toString()}
           formatted
         />
         <LabelStat
-          label="Posts"
+          label={$t('content.posts')}
           content={site.counts.posts.toString()}
           formatted
         />
         <LabelStat
-          label="Communities"
+          label={$t('content.communities')}
           content={site.counts.communities.toString()}
           formatted
         />
@@ -111,7 +117,8 @@
     {#if admins}
       <Expandable>
         <svelte:fragment slot="title">
-          <Icon src={UserGroup} size="15" mini /> Admins
+          <Icon src={UserGroup} size="15" mini />
+          {$t('cards.site.admins')}
         </svelte:fragment>
         <ItemList
           items={admins.map((a) => ({

diff --git a/src/lib/components/lemmy/comment/Comment.svelte b/src/lib/components/lemmy/comment/Comment.svelte
@@ -22,6 +22,7 @@
   import ShieldIcon from '../moderation/ShieldIcon.svelte'
   import { page } from '$app/stores'
   import { onMount } from 'svelte'
+  import { t } from '$lib/translations'
 
   export let node: CommentNodeI
   export let postId: number
@@ -50,11 +51,6 @@
       node.comment_view.comment.content = newComment
 
       editing = false
-
-      toast({
-        content: 'Successfully edited comment.',
-        type: 'success',
-      })
     } catch (err) {
       toast({
         // @ts-ignore i hate this
@@ -145,7 +141,7 @@
             src={Trash}
             solid
             size="12"
-            title="Deleted"
+            title={$t('post.badges.deleted')}
             class="text-red-600 dark:text-red-500"
           />
         {/if}
@@ -154,7 +150,7 @@
             src={Bookmark}
             solid
             size="12"
-            title="Saved"
+            title={$t('post.badges.saved')}
             class="text-yellow-600 dark:text-yellow-500"
           />
         {/if}
@@ -181,7 +177,7 @@
       <div
         class="max-w-full my-2 border-l border-slate-200 dark:border-zinc-800 pl-4"
       >
-        <h1 class="font-bold text-sm mb-2">Reply</h1>
+        <h1 class="font-bold text-sm mb-2">{$t('comment.reply')}</h1>
         <CommentForm
           {postId}
           parentId={node.comment_view.comment.id}

diff --git a/src/lib/components/lemmy/comment/CommentActions.svelte b/src/lib/components/lemmy/comment/CommentActions.svelte
@@ -8,6 +8,7 @@
     EllipsisHorizontal,
     Flag,
     Icon,
+    Language,
     PencilSquare,
     Square2Stack,
     Trash,
@@ -23,15 +24,24 @@
   import { profile } from '$lib/auth.js'
   import { deleteItem, save } from '$lib/lemmy/contentview.js'
   import { Button, Menu, MenuButton, MenuDivider } from 'mono-svelte'
+  import { t } from '$lib/translations'
+  import Translation from '$lib/components/translate/Translation.svelte'
+  import { text } from '$lib/components/translate/translation'
+  import { userSettings } from '$lib/settings'
 
   export let comment: CommentView
   export let replying: boolean = false
 
   const dispatcher = createEventDispatcher<{ edit: CommentView }>()
 
   let reply = ''
+  let translating = false
 </script>
 
+{#if translating}
+  <Translation bind:open={translating} />
+{/if}
+
 <div class="flex flex-row items-center gap-0.5 h-7 relative">
   <CommentVote
     bind:upvotes={comment.counts.upvotes}
@@ -47,7 +57,7 @@
     disabled={comment.post.locked}
   >
     <Icon src={ArrowUturnLeft} width={14} height={14} mini />
-    <span class="text-xs">Reply</span>
+    <span class="text-xs">{$t('comment.reply')}</span>
   </Button>
   {#if $profile?.user && (amMod($profile?.user, comment.community) || isAdmin($profile.user))}
     <CommentModerationMenu bind:item={comment} />
@@ -56,7 +66,7 @@
     <Button
       slot="target"
       class="!p-1 text-slate-600 dark:text-zinc-400"
-      aria-label="Comment actions"
+      title={$t('comment.actions.label')}
       color="tertiary"
     >
       <Icon
@@ -67,7 +77,7 @@
         slot="prefix"
       />
     </Button>
-    <MenuDivider>Actions</MenuDivider>
+    <MenuDivider>{$t('comment.actions.label')}</MenuDivider>
     <MenuButton
       on:click={() => {
         navigator.share?.({
@@ -76,13 +86,25 @@
       }}
     >
       <Icon src={Square2Stack} mini size="16" />
-      <divv>Copy Link</divv>
+      <div>{$t('comment.actions.link')}</div>
     </MenuButton>
+    {#if $userSettings.translator}
+      <MenuButton
+        on:click={() => {
+          // @ts-ignore
+          text.set(comment.comment.content)
+          translating = !translating
+        }}
+      >
+        <Icon src={Language} size="16" mini slot="prefix" />
+        {$t('post.actions.more.translate')}
+      </MenuButton>
+    {/if}
     {#if $profile?.jwt}
       {#if comment.creator.id == $profile.user?.local_user_view.person.id}
         <MenuButton on:click={() => dispatcher('edit', comment)}>
           <Icon src={PencilSquare} mini size="16" />
-          <span>Edit</span>
+          <span>{$t('post.actions.more.edit')}</span>
         </MenuButton>
       {/if}
       <MenuButton
@@ -92,7 +114,9 @@
         }}
       >
         <Icon src={comment.saved ? BookmarkSlash : Bookmark} mini size="16" />
-        <span>{comment.saved ? 'Unsave' : 'Save'}</span>
+        <span>
+          {comment.saved ? $t('post.actions.unsave') : $t('post.actions.save')}
+        </span>
       </MenuButton>
       {#if $profile?.user && $profile.jwt && $profile.user.local_user_view.person.id == comment.creator.id}
         <MenuButton
@@ -107,13 +131,17 @@
           }}
         >
           <Icon src={Trash} mini size="16" />
-          <span>{comment.comment.deleted ? 'Restore' : 'Delete'}</span>
+          <span>
+            {comment.comment.deleted
+              ? $t('post.actions.more.restore')
+              : $t('post.actions.more.delete')}
+          </span>
         </MenuButton>
       {/if}
       {#if $profile.jwt && $profile.user?.local_user_view.person.id != comment.creator.id}
         <MenuButton on:click={() => report(comment)} color="danger-subtle">
           <Icon src={Flag} mini size="16" />
-          <span>Report</span>
+          <span>{$t('moderation.report')}</span>
         </MenuButton>
       {/if}
     {/if}

diff --git a/src/lib/components/lemmy/comment/CommentForm.svelte b/src/lib/components/lemmy/comment/CommentForm.svelte
@@ -8,6 +8,7 @@
   import MarkdownEditor from '$lib/components/markdown/MarkdownEditor.svelte'
   import { placeholders } from '$lib/util.js'
   import { Button } from 'mono-svelte'
+  import { t } from '$lib/translations'
 
   export let postId: number
   export let parentId: number | undefined = undefined
@@ -40,10 +41,6 @@
       dispatch('comment', response)
 
       value = ''
-      toast({
-        content: 'Your comment was submitted.',
-        type: 'success',
-      })
     } catch (err) {
       console.error(err)
       toast({
@@ -69,7 +66,7 @@
       {...$$restProps}
       {rows}
       placeholder={locked
-        ? 'This post is locked.'
+        ? $t('comment.locked')
         : placeholder ?? placeholders.get('comment')}
       bind:value
       disabled={locked || loading}
@@ -92,7 +89,7 @@
             {loading}
             disabled={locked || loading}
           >
-            Submit
+            {$t('form.submit')}
           </Button>
         </div>
       {/if}

diff --git a/src/lib/components/lemmy/comment/CommentVote.svelte b/src/lib/components/lemmy/comment/CommentVote.svelte
@@ -17,6 +17,7 @@
   import { shouldShowVoteColor } from '../post/PostVote.svelte'
   import { fly } from 'svelte/transition'
   import { backOut } from 'svelte/easing'
+  import { t } from '$lib/translations'
 
   export let vote: number = 0
   export let upvotes: number
@@ -25,7 +26,7 @@
 
   const castVote = async (newVote: number) => {
     if (!$profile?.jwt) {
-      toast({ content: 'You must be logged in to vote.', type: 'warning' })
+      toast({ content: $t('toast.loginVoteGate'), type: 'warning' })
       return
     }