i18n: localize frontpage's layout

Xyphyn · Jun 3, 2024 · 64107e5 · 64107e5
1 parent d1a041f
commit 64107e5
Show file tree

Hide file tree

Showing 13 changed files with 248 additions and 90 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -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')}
+      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/dropdowns/Location.svelte b/src/lib/components/lemmy/dropdowns/Location.svelte
@@ -6,6 +6,7 @@
   import { Select } from 'mono-svelte'
   import { GlobeAmericas, Icon } from 'svelte-hero-icons'
   import { amModOfAny } from '../moderation/moderation'
+  import { t } from '$lib/translations'
 
   export let selected: string
   export let navigate: boolean = true
@@ -33,19 +34,19 @@
     {#if showLabel}
       <span class="flex items-center gap-1">
         <Icon src={GlobeAmericas} size="16" mini />
-        Location
+        {$t('filter.location.label')}
       </span>
     {/if}
   </svelte:fragment>
-  <option value="All">All</option>
-  <option value="Local">Local</option>
+  <option value="All">{$t('filter.location.all')}</option>
+  <option value="Local">{$t('filter.location.local')}</option>
   <option value="Subscribed" disabled={$profile?.jwt == undefined}>
-    Subscribed
+    {$t('filter.location.subscribed')}
   </option>
   <option
     value="ModeratorView"
     disabled={!$profile?.jwt || !amModOfAny($profile?.user)}
   >
-    Moderator
+    {$t('filter.location.moderator')}
   </option>
 </Select>
diff --git a/src/lib/components/lemmy/dropdowns/Sort.svelte b/src/lib/components/lemmy/dropdowns/Sort.svelte
@@ -2,6 +2,7 @@
   import { page } from '$app/stores'
   import { site } from '$lib/lemmy.js'
   import { userSettings } from '$lib/settings'
+  import { t } from '$lib/translations'
   import { searchParam } from '$lib/util.js'
   import { feature } from '$lib/version.js'
   import type { SortType } from 'lemmy-js-client'
@@ -33,21 +34,19 @@
   >
     <span slot="label" class="flex items-center gap-1">
       <Icon src={ChartBar} size="13" mini />
-      Sort
+      {$t('filter.sort.label')}
     </span>
-    <option value="Active">Active</option>
-    <option value="Hot">Hot</option>
+    <option value="Active">{$t('filter.sort.active')}</option>
+    <option value="Hot">{$t('filter.sort.hot')}</option>
     {#if feature('scaledSort', $site?.version)}
-      <option value="Scaled">Scaled</option>
+      <option value="Scaled">{$t('filter.sort.scaled')}</option>
     {/if}
-    <option value="TopAll">Top</option>
-    <option value="New">New</option>
-    {#if feature('controversialSort', $site?.version)}
-      <option value="Controversial">Controversial</option>
-    {/if}
-    <option value="Old">Old</option>
-    <option value="MostComments">Comments</option>
-    <option value="NewComments">New Replies</option>
+    <option value="TopAll">{$t('filter.sort.top.label')}</option>
+    <option value="New">{$t('filter.sort.new')}</option>
+    <option value="Old">{$t('filter.sort.old')}</option>
+    <option value="Controversial">{$t('filter.sort.controversial')}</option>
+    <option value="MostComments">{$t('filter.sort.mostcomments')}</option>
+    <option value="NewComments">{$t('filter.sort.newcomments')}</option>
   </Select>
   {#if selected?.startsWith('Top')}
     <div transition:fly={{ easing: backOut, x: 2 }}>
@@ -62,18 +61,26 @@
       >
         <span slot="label" class="flex items-center gap-1">
           <Icon src={Clock} size="15" mini />
-          Time
+          {$t('filter.sort.top.time.label')}
         </span>
-        <option value="TopAll">All</option>
-        <option value="TopNineMonths">9 Months</option>
-        <option value="TopSixMonths">6 Months</option>
-        <option value="TopThreeMonths">3 Months</option>
-        <option value="TopMonth">Month</option>
-        <option value="TopWeek">Week</option>
-        <option value="TopDay">Day</option>
-        <option value="TopTwelveHour">12 Hours</option>
-        <option value="TopSixHour">6 Hours</option>
-        <option value="TopHour">Hour</option>
+        <option value="TopAll">{$t('filter.sort.top.time.all')}</option>
+        <option value="TopNineMonths">
+          {$t('filter.sort.top.time.9months')}
+        </option>
+        <option value="TopSixMonths">
+          {$t('filter.sort.top.time.6months')}
+        </option>
+        <option value="TopThreeMonths">
+          {$t('filter.sort.top.time.3months')}
+        </option>
+        <option value="TopMonth">{$t('filter.sort.top.time.month')}</option>
+        <option value="TopWeek">{$t('filter.sort.top.time.week')}</option>
+        <option value="TopDay">{$t('filter.sort.top.time.day')}</option>
+        <option value="TopTwelveHour">
+          {$t('filter.sort.top.time.12hours')}
+        </option>
+        <option value="TopSixHour">{$t('filter.sort.top.time.6hours')}</option>
+        <option value="TopHour">{$t('filter.sort.top.time.hour')}</option>
       </Select>
     </div>
   {/if}

diff --git a/src/lib/components/lemmy/dropdowns/ViewSelect.svelte b/src/lib/components/lemmy/dropdowns/ViewSelect.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import { userSettings } from '$lib/settings.js'
+  import { t } from '$lib/translations'
   import { Select } from 'mono-svelte'
   import { Icon, ViewColumns } from 'svelte-hero-icons'
 
@@ -11,12 +12,12 @@
     {#if showLabel}
       <span class="flex items-center gap-1">
         <Icon src={ViewColumns} size="14" mini />
-        View
+        {$t('filter.view.label')}
       </span>
     {/if}
   </svelte:fragment>
-  <option value="cozy">Cozy</option>
-  <option value="list">List</option>
-  <option value="compact">Compact</option>
-  <option value="card">Legacy</option>
+  <option value="cozy">{$t('filter.view.cozy')}</option>
+  <option value="list">{$t('filter.view.list')}</option>
+  <option value="compact">{$t('filter.view.compact')}</option>
+  <option value="card">{$t('filter.view.legacy')}</option>
 </Select>
diff --git a/src/lib/components/lemmy/util/SearchBar.svelte b/src/lib/components/lemmy/util/SearchBar.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import { goto } from '$app/navigation'
+  import { t } from '$lib/translations'
   import { TextInput } from 'mono-svelte'
 
   let query: string = ''
@@ -15,7 +16,7 @@
   <TextInput
     bind:value={query}
     class="w-full h-full {$$props.class}"
-    placeholder="Search"
+    placeholder={$t('nav.search')}
     autofocus
   />
 </form>

diff --git a/src/lib/components/ui/navbar/Navbar.svelte b/src/lib/components/ui/navbar/Navbar.svelte
@@ -37,6 +37,7 @@
   import Logo from '../Logo.svelte'
   import { LINKED_INSTANCE_URL } from '$lib/instance'
   import SiteCard from '$lib/components/lemmy/SiteCard.svelte'
+  import { t } from '$lib/translations'
 
   let searching = false
 </script>
@@ -48,7 +49,7 @@
   "
   style={$$props.style}
 >
-  <NavButton href="/" label="Home" class="ml-2 logo">
+  <NavButton href="/" label={$t('nav.home')} class="ml-2 logo">
     <svelte:fragment slot="icon">
       {#if LINKED_INSTANCE_URL}
         {#if $site}
@@ -171,7 +172,7 @@
     {#if $profile?.user && isAdmin($profile.user)}
       <NavButton
         href="/admin"
-        label="Admin"
+        label={$t('nav.admin')}
         icon={ServerStack}
         class="relative"
         isSelectedFilter={(path) => path.startsWith('/admin')}
@@ -184,7 +185,11 @@
       </NavButton>
     {/if}
     {#if amModOfAny($profile?.user)}
-      <NavButton href="/moderation" label="Moderation" class="relative">
+      <NavButton
+        href="/moderation"
+        label={$t('nav.moderation')}
+        class="relative"
+      >
         {#if ($profile?.user?.notifications.reports ?? 0) > 0}
           <div
             class="rounded-full w-2 h-2 bg-red-500 absolute -top-1 -left-1"
@@ -193,24 +198,28 @@
         <ShieldIcon let:isSelected slot="icon" filled={isSelected} width={18} />
       </NavButton>
     {/if}
-    <NavButton href="/communities" label="Explore" icon={GlobeAlt} />
+    <NavButton
+      href="/communities"
+      label={$t('nav.communities')}
+      icon={GlobeAlt}
+    />
     <NavButton
       on:click={() => (searching = true)}
-      label="Search"
+      label={$t('nav.search')}
       icon={MagnifyingGlass}
     />
     <Menu placement="top">
       <NavButton
         class="relative"
         color="primary"
         slot="target"
-        label="Create"
+        label={$t('nav.create.label')}
         icon={Plus}
       />
-      <MenuDivider>Create</MenuDivider>
+      <MenuDivider>{$t('nav.create.label')}</MenuDivider>
       <MenuButton link href="/create/post" disabled={!$profile?.jwt}>
         <Icon src={PencilSquare} mini width={16} slot="prefix" />
-        Post
+        {$t('nav.create.post')}
       </MenuButton>
       <MenuButton
         link
@@ -221,11 +230,11 @@
             !isAdmin($profile.user))}
       >
         <Icon src={Newspaper} mini width={16} slot="prefix" />
-        Community
+        {$t('nav.create.community')}
       </MenuButton>
       {#if !$profile?.jwt}
         <span class="text-sm mx-4 my-1 py-1">
-          <Link highlight href="/login">Log in</Link> to create content.
+          {$t('nav.create.logingate')}
         </span>
       {/if}
     </Menu>