Use locale strings for Sidebar content

messages/en.json

@@ -33,5 +33,9 @@
 	"newPasswordRetype": "Re-type new password",
 	"savePassword": "Save Password",
 	"passwordResetSuccesful": "Password reset succesfully",
-	"displayName": "Display name"
+	"displayName": "Display name",
+	"lastAddedSidebar": "Last Added",
+	"getLucky": "Get Lucky",
+	"randomPull": "Random Pull",
+	"highlightAlbum": "Highlight Soundtrack"
 }

src/components/Sidebar.astro

@@ -1,5 +1,6 @@
 ---
 import { Image } from 'astro:assets'
+import * as m from '../paraglide/messages.js'
 
 import discord from 'img/socials/discord.png'
 import kofi from 'img/socials/ko-fi-donate-button.png'
@@ -14,9 +15,9 @@ const listClass =
 ---
 
 <div class='w-3/12 max-w-[300px] bg-dark flex flex-col'>
-  <a href='#' class={listClass}>Last Added</a>
-  <a href='#' class={listClass}>Get Lucky</a>
-  <a href='#' class={listClass}>Random Pull</a>
+  <a href='#' class={listClass}>{m.lastAddedSidebar()}</a>
+  <a href='#' class={listClass}>{m.getLucky()}</a>
+  <a href='#' class={listClass}>{m.randomPull()}</a>
   <div class='px-6 flex flex-col gap-y-3'>
     <SidebarSection class='flex flex-col gap-y-3'>
       <div class='flex gap-x-2 justify-center'>

src/components/sidebar/highlight/content.astro

@@ -1,5 +1,6 @@
 ---
 import prismaClient from 'utils/prisma-client'
+import * as m from 'paraglide/messages.js'
 
 import AlbumBox from 'components/AlbumBox.astro'
 import SidebarSection from '../SidebarSection.astro'
@@ -20,7 +21,7 @@ const album = highlightConfig?.value
 {
   album ? (
     <SidebarSection>
-      <div class='uppercase text-center text-2xl/6 font-semibold'>Highlight Soundtrack</div>
+      <div class='uppercase text-center text-2xl/6 font-semibold'>{m.highlightAlbum()}</div>
       <AlbumBox href={`/album/${album.id}`} title={album.title ?? 'Unknown Title'} image={`/album/${album.id}.png`} />
     </SidebarSection>
   ) : null

src/components/sidebar/highlight/loading.astro

@@ -1,9 +1,11 @@
 ---
+import * as m from 'paraglide/messages.js'
+
 import AlbumBox from 'components/AlbumBox.astro'
 import SidebarSection from '../SidebarSection.astro'
 ---
 
 <SidebarSection>
-  <div class='uppercase text-center text-2xl/6 font-semibold'>Highlight Soundtrack</div>
+  <div class='uppercase text-center text-2xl/6 font-semibold'>{m.highlightAlbum()}</div>
   <AlbumBox loading />
 </SidebarSection>