From 544c61e48fa2e16f898dc3207a87a35282efc156 Mon Sep 17 00:00:00 2001
From: I Made Setia Baruna <setia.baruna@sprintasia.co.id>
Date: Tue, 2 Feb 2021 19:17:44 +0800
Subject: [PATCH] Add meta tag for each page

---
 src/routes/calculator/index.svelte |  20 ++++--
 src/routes/items.svelte            | 112 ++++++++++++++++++-----------
 src/routes/todo.svelte             |   8 +++
 src/routes/wish/index.svelte       |   8 +++
 src/template.html                  |   6 +-
 5 files changed, 104 insertions(+), 50 deletions(-)

diff --git a/src/routes/calculator/index.svelte b/src/routes/calculator/index.svelte
index c7d69bea..b56b0f2b 100644
--- a/src/routes/calculator/index.svelte
+++ b/src/routes/calculator/index.svelte
@@ -39,6 +39,14 @@
 
 <svelte:head>
   <title>Calculator - Paimon.moe</title>
+  <meta
+    name="description"
+    content="Genshin Impact Calculator to calculate how many mora and items needed for your character or weapon ascension and the character talent material, also quickly add the items to todo list! Hero's Wit calculator."
+  />
+  <meta
+    property="og:description"
+    content="Genshin Impact Calculator to calculate how many mora and items needed for your character or weapon ascension and the character talent material, also quickly add the items to todo list! Hero's Wit calculator."
+  />
 </svelte:head>
 <div class="pt-20 lg:ml-64 lg:pt-8 px-4 md:px-8">
   <div class="flex justify-center md:justify-start mb-4">
@@ -49,26 +57,30 @@
   </div>
   <div
     class="flex flex-col items-center md:flex-row-reverse md:justify-end md:items-start lg:items-center mb-2"
-    bind:this={weaponCalc}>
+    bind:this={weaponCalc}
+  >
     <Button on:click={() => scroll('character')}>
       <Icon size={0.8} path={mdiArrowDown} />
       Go To Character Calculator
     </Button>
     <h1
-      class="font-display font-black text-center mt-2 md:mt-0 md:mr-2 xl:mr-8 text-3xl lg:text-left lg:text-5xl text-white">
+      class="font-display font-black text-center mt-2 md:mt-0 md:mr-2 xl:mr-8 text-3xl lg:text-left lg:text-5xl text-white"
+    >
       Weapon Calculator
     </h1>
   </div>
   <WeaponCalculator />
   <div
     class="flex flex-col items-center md:flex-row-reverse md:justify-end md:items-start lg:items-center mt-8 mb-2"
-    bind:this={characterCalc}>
+    bind:this={characterCalc}
+  >
     <Button on:click={() => scroll('weapon')}>
       <Icon size={0.8} path={mdiArrowUp} />
       Go To Weapon Calculator
     </Button>
     <h1
-      class="font-display font-black text-center mt-2 md:mt-0 md:mr-2 xl:mr-8 text-3xl lg:text-left lg:text-5xl text-white">
+      class="font-display font-black text-center mt-2 md:mt-0 md:mr-2 xl:mr-8 text-3xl lg:text-left lg:text-5xl text-white"
+    >
       Character Calculator
     </h1>
   </div>
diff --git a/src/routes/items.svelte b/src/routes/items.svelte
index 4b2cdae1..c8c889df 100644
--- a/src/routes/items.svelte
+++ b/src/routes/items.svelte
@@ -147,36 +147,16 @@
   $: selectedWeapon, parseData();
 </script>
 
-<style>
-  td {
-    @apply text-white;
-    @apply px-4;
-    @apply align-top;
-
-    scrollbar-width: none;
-
-    &::-webkit-scrollbar {
-      width: 0;
-      height: 0;
-    }
-
-    &.weapon-cell {
-      min-width: 29.5rem;
-      @apply whitespace-normal;
-      @apply overflow-x-scroll;
-      @apply overflow-y-hidden;
-    }
-  }
-
-  tr:last-child {
-    td {
-      @apply border-b-0;
-    }
-  }
-</style>
-
 <svelte:head>
   <title>Item List - Paimon.moe</title>
+  <meta
+    name="description"
+    content="Genshin Impact Item List Table to see what to farm each day and for each character or weapon"
+  />
+  <meta
+    property="og:description"
+    content="Genshin Impact Item List Table to see what to farm each day and for each character or weapon"
+  />
 </svelte:head>
 <div class="lg:ml-64 pt-20 lg:pt-8">
   <h1 class="font-display px-4 md:px-8 font-black text-5xl text-white">Item List</h1>
@@ -206,7 +186,11 @@
             {#each Object.entries(charactersDays[day]) as [itemName, chars], index}
               <tr>
                 <td
-                  class={index === Object.entries(charactersDays[day]).length - 1 && Object.entries(weaponsDays[day]).length === 0 ? 'border-gray-700 border-b py-2' : 'py-2'}>
+                  class={index === Object.entries(charactersDays[day]).length - 1 &&
+                  Object.entries(weaponsDays[day]).length === 0
+                    ? 'border-gray-700 border-b py-2'
+                    : 'py-2'}
+                >
                   {#if index === 0}{dayArr[0]}<br />{dayArr[1]}{/if}
                 </td>
                 <td class="border-gray-700 border-b text-center align-middle py-2">
@@ -214,11 +198,13 @@
                     <div
                       on:click={() => openAddTodo(itemName)}
                       class="h-12 w-12 md:h-14 md:w-14 mr-2 cursor-pointer hover:bg-background rounded-xl
-                       inline-flex items-center justify-center align-top">
+                       inline-flex items-center justify-center align-top"
+                    >
                       <img
                         class="w-full max-h-full object-contain"
                         src={`/images/items/${itemName}.png`}
-                        alt={itemName} />
+                        alt={itemName}
+                      />
                     </div>
                     <span>{itemGroup[itemName].name}</span>
                   </div>
@@ -227,12 +213,14 @@
                   {#each chars as char}
                     <div
                       class="h-12 w-12 md:h-14 md:w-14 cursor-pointer mr-2 hover:bg-background rounded-xl 
-                       inline-flex items-center justify-center align-top">
+                       inline-flex items-center justify-center align-top"
+                    >
                       <img
                         class="w-full max-h-full object-contain"
                         src={`/images/characters/${char}.png`}
                         alt={char}
-                        title={characters[char].name} />
+                        title={characters[char].name}
+                      />
                     </div>
                   {/each}
                 </td>
@@ -241,7 +229,11 @@
             {#each Object.entries(weaponsDays[day]) as [itemName, weapons], index}
               <tr>
                 <td
-                  class={index === Object.entries(weaponsDays[day]).length - 1 || Object.entries(charactersDays[day]).length === 0 ? 'border-gray-700 border-b py-2' : 'py-2'}>
+                  class={index === Object.entries(weaponsDays[day]).length - 1 ||
+                  Object.entries(charactersDays[day]).length === 0
+                    ? 'border-gray-700 border-b py-2'
+                    : 'py-2'}
+                >
                   {#if index === 0 && Object.entries(charactersDays[day]).length === 0}{dayArr[0]}<br />{dayArr[1]}{/if}
                 </td>
                 <td class="border-gray-700 border-b text-center py-2">
@@ -249,11 +241,13 @@
                     <div
                       on:click={() => openAddTodo(itemName)}
                       class="h-12 w-12 md:h-14 md:w-14 mr-2 cursor-pointer hover:bg-background rounded-xl 
-                       inline-flex items-center justify-center align-top">
+                       inline-flex items-center justify-center align-top"
+                    >
                       <img
                         class="w-full max-h-full object-contain"
                         src={`/images/items/${itemName}.png`}
-                        alt={itemName} />
+                        alt={itemName}
+                      />
                     </div>
                     <span class="whitespace-normal text-left w-20">{itemGroup[itemName].name}</span>
                   </div>
@@ -262,12 +256,14 @@
                   {#each weapons as weapon}
                     <div
                       class="h-12 w-12 md:h-14 md:w-14 cursor-pointer mr-2 mb-2 hover:bg-background rounded-xl 
-                       inline-flex items-center justify-center align-top">
+                       inline-flex items-center justify-center align-top"
+                    >
                       <img
                         class="w-full max-h-full object-contain"
                         src={`/images/weapons/${weapon}.png`}
                         alt={weapon}
-                        title={weaponList[weapon].name} />
+                        title={weaponList[weapon].name}
+                      />
                     </div>
                   {/each}
                 </td>
@@ -296,11 +292,13 @@
                 <div class="flex items-center">
                   <div
                     on:click={() => openAddTodo(itemName)}
-                    class="h-12 w-12 md:h-14 md:w-14 mr-2 cursor-pointer hover:bg-background rounded-xl inline-flex items-center justify-center">
+                    class="h-12 w-12 md:h-14 md:w-14 mr-2 cursor-pointer hover:bg-background rounded-xl inline-flex items-center justify-center"
+                  >
                     <img
                       class="w-full max-h-full object-contain"
                       src={`/images/items/${itemName}.png`}
-                      alt={itemName} />
+                      alt={itemName}
+                    />
                   </div>
                   <span>{itemList[itemName].name}</span>
                 </div>
@@ -309,12 +307,14 @@
                 {#each Object.entries(char) as [charName, type]}
                   <div
                     class="h-12 w-12 md:h-14 md:w-14 mb-2 cursor-pointer mr-2 hover:bg-background rounded-xl 
-             inline-flex items-center justify-center align-top">
+             inline-flex items-center justify-center align-top"
+                  >
                     <img
                       class="w-full max-h-full object-contain"
                       src={`/images/${type}/${charName}.png`}
                       alt={charName}
-                      title={type === 'characters' ? characters[charName].name : weaponList[charName].name} />
+                      title={type === 'characters' ? characters[charName].name : weaponList[charName].name}
+                    />
                   </div>
                 {/each}
               </td>
@@ -325,3 +325,31 @@
     </div>
   </div>
 </div>
+
+<style>
+  td {
+    @apply text-white;
+    @apply px-4;
+    @apply align-top;
+
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+      width: 0;
+      height: 0;
+    }
+
+    &.weapon-cell {
+      min-width: 29.5rem;
+      @apply whitespace-normal;
+      @apply overflow-x-scroll;
+      @apply overflow-y-hidden;
+    }
+  }
+
+  tr:last-child {
+    td {
+      @apply border-b-0;
+    }
+  }
+</style>
diff --git a/src/routes/todo.svelte b/src/routes/todo.svelte
index b6d5f351..bf541070 100644
--- a/src/routes/todo.svelte
+++ b/src/routes/todo.svelte
@@ -272,6 +272,14 @@
 
 <svelte:head>
   <title>Todo List - Paimon.moe</title>
+  <meta
+    name="description"
+    content="Genshin Impact Todo List to plan and track items and mora you need, you can also see resin approximation needed to farm the items!"
+  />
+  <meta
+    property="og:description"
+    content="Genshin Impact Todo List to plan and track items and mora you need, you can also see resin approximation needed to farm the items!"
+  />
 </svelte:head>
 <div class="lg:ml-64 pt-20 px-2 md:px-8 lg:pt-8">
   <Masonry stretchFirst={true} bind:refreshLayout bind:columnCount items={id}>
diff --git a/src/routes/wish/index.svelte b/src/routes/wish/index.svelte
index 2d409319..4bc77154 100644
--- a/src/routes/wish/index.svelte
+++ b/src/routes/wish/index.svelte
@@ -24,6 +24,14 @@
 
 <svelte:head>
   <title>Wish Counter - Paimon.moe</title>
+  <meta
+    name="description"
+    content="Genshin Impact Wish Counter to track your pity counter and track when you get the character or weapon"
+  />
+  <meta
+    property="og:description"
+    content="Genshin Impact Wish Counter to track your pity counter and track when you get the character or weapon"
+  />
 </svelte:head>
 <div class="pt-20 lg:ml-64 lg:pt-8 px-4 md:px-8">
   <div class="flex flex-col md:flex-row mb-4 items-center">
diff --git a/src/template.html b/src/template.html
index a339889e..a2621742 100644
--- a/src/template.html
+++ b/src/template.html
@@ -6,8 +6,7 @@
     <meta name="theme-color" content="#333333" />
     <meta
       name="description"
-      content="Your best Genshin Impact companion! Help you plan what to farm with ascension calculator and database. 
-      Also track your progress with todo and wish counter."
+      content="Your best Genshin Impact companion! Help you plan what to farm with ascension calculator and database. Also track your progress with todo and wish counter."
     />
 
     <meta property="og:title" content="Paimon.moe" />
@@ -16,8 +15,7 @@
     <meta property="og:image" content="https://paimon.moe/paimon-og.png" />
     <meta
       property="og:description"
-      content="Your best Genshin Impact companion! Help you plan what to farm with ascension calculator and database. 
-      Also track your progress with todo and wish counter."
+      content="Your best Genshin Impact companion! Help you plan what to farm with ascension calculator and database. Also track your progress with todo and wish counter."
     />
 
     %sapper.base%