feat: add interpolation

PhraseApp-Blog · May 22, 2023 · bab8d57 · bab8d57
1 parent 4f0c760
commit bab8d57
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 6 deletions.
diff --git a/components/Notification.vue b/components/Notification.vue
@@ -0,0 +1,9 @@
+<template>
+  <div
+    class="mb-4 rounded-md border border-amber-300 bg-amber-100 px-3 py-2 text-slate-950 shadow-sm shadow-slate-950"
+  >
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts"></script>
diff --git a/lang/ar-EG.ts b/lang/ar-EG.ts
@@ -13,4 +13,7 @@ export default {
     title: "نبذة عنا",
     body: "أندورَبل هو موقع عن كل شيء متعلق بعروض بث حرب النجوم. بدأ الموقع كمشروع شغف ونما إلى ما هو عليه اليوم.",
   },
+  notifications: {
+    new_episode: "أهلاً {username}، حلقة جديدة من {show} نزلت!",
+  },
 }
diff --git a/lang/en-CA.ts b/lang/en-CA.ts
@@ -13,4 +13,7 @@ export default {
     title: "About",
     body: "Andorable is all about streaming Star Wars shows. The site started as a passion project and grew into what it is today.",
   },
+  notifications: {
+    new_episode: "Hello, {username}. A new esposide of {show} just landed!",
+  },
 }
diff --git a/layouts/default.vue b/layouts/default.vue
@@ -13,19 +13,19 @@
     </Head>
     <Body>
       <header class="bg-slate-900 text-purple-100 shadow-sm shadow-slate-900">
-        <nav class="flex gap-8 items-baseline py-1 px-2 max-w-[1200px] mx-auto">
-          <LocLink to="/" class="shrink-0 flex items-baseline text-xl font-bold"
+        <nav class="mx-auto flex max-w-[1200px] items-baseline gap-8 px-2 py-1">
+          <LocLink to="/" class="flex shrink-0 items-baseline text-xl font-bold"
             ><span class="logo-container"
               ><img src="/img/brand-logo.svg" alt="Andorable logo"
             /></span>
-            <span class="block relative -top-5">{{
+            <span class="relative -top-5 block">{{
               $t("app_title")
             }}</span></LocLink
           >
           <div
-            class="w-full flex relative -top-5 items-baseline justify-between"
+            class="relative -top-5 flex w-full items-baseline justify-between"
           >
-            <ul class="flex grow-1 gap-6 text-lg">
+            <ul class="grow-1 flex gap-6 text-lg">
               <li>
                 <LocLink to="/">{{ $t("nav.shows") }}</LocLink>
               </li>
@@ -42,7 +42,10 @@
         </nav>
       </header>
 
-      <main class="px-4 py-6 max-w-[1200px] mx-auto">
+      <main class="mx-auto max-w-[1200px] px-4 py-6">
+        <Notification>{{
+          $t("notifications.new_episode", { username: "Mary", show: "Andor" })
+        }}</Notification>
         <slot />
       </main>
     </Body>