refactor: meta tags

client/src/components/navbar.svelte

@@ -52,46 +52,46 @@
   <menu
     class="top-of-the-world dark:bg-gray-900 dark:text-white bg-lavender-200 bg-gradient-to-br to-lavender-400 dark:to-lavender-900 text-black w-full h-full overscroll-none"
   >
-  <div class="container -pr-10">
-    <div class="flex flex-col items-center content-center text-center pt-20">
-      <div
-        on:click={() => {
-          open = false;
-          return goto('/');
-        }}
-        class="hover:cursor-pointer flex-1 font-bold text-3xl pt-6 pb-10"
-      >
-        Jokesbapak2
-      </div>
-      <div
-        on:click={() => {
-          open = false;
-          return goto('/why');
-        }}
-        class="flex-1 py-3 text-4xl"
-      >
-        {$_('navigation.why')}
-      </div>
-      <div
-        on:click={() => {
-          open = false;
-          return goto('/guide');
-        }}
-        class="flex-1 py-3 text-4xl"
-      >
-        {$_('navigation.guide')}
-      </div>
-      <div
-        on:click={() => {
-          open = false;
-          return goto('/api');
-        }}
-        class="flex-1 py-3 text-4xl"
-      >
-        {$_('navigation.api')}
+    <div class="container -pr-10">
+      <div class="flex flex-col items-center content-center text-center pt-20">
+        <div
+          on:click={() => {
+            open = false;
+            return goto('/');
+          }}
+          class="hover:cursor-pointer flex-1 font-bold text-3xl pt-6 pb-10"
+        >
+          Jokesbapak2
+        </div>
+        <div
+          on:click={() => {
+            open = false;
+            return goto('/why');
+          }}
+          class="flex-1 py-3 text-4xl"
+        >
+          {$_('navigation.why')}
+        </div>
+        <div
+          on:click={() => {
+            open = false;
+            return goto('/guide');
+          }}
+          class="flex-1 py-3 text-4xl"
+        >
+          {$_('navigation.guide')}
+        </div>
+        <div
+          on:click={() => {
+            open = false;
+            return goto('/api');
+          }}
+          class="flex-1 py-3 text-4xl"
+        >
+          {$_('navigation.api')}
+        </div>
       </div>
     </div>
-  </div>
   </menu>
 {/if}
 

client/src/components/notice.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
-  export let emoji: string = '';
+  export let emoji = '';
 </script>
+
 <div
   class="bg-chetwode-200 dark:bg-chetwode-800 font-body px-4 md:px-8 py-6 md:my-8 rounded-lg text-black dark:text-white shadow-xl bg-gradient-to-br from-transparent to-chetwode-300 dark:to-chetwode-900"
 >

client/src/routes/__layout.svelte

@@ -5,7 +5,6 @@
 <script lang="ts">
   import '@fontsource/fira-mono';
   import '@fontsource/rubik';
-  import { goto } from '$app/navigation'
   import { _ } from 'svelte-i18n';
   import Navbar from '../components/navbar.svelte';
 </script>
@@ -17,9 +16,13 @@
   <meta property="og:image" content="https://jokesbapak2.pages.dev/social.jpg" />
   <meta property="og:image:alt" content="Jokesbapak2 - Largest collection of Indonesian dad jokes" />
   <meta property="og:image:secure_url" content="https://jokesbapak2.pages.dev/social.jpg" />
+  <meta property="og:image:width" content="1280" />
+  <meta property="og:image:height" content="640" />
   <meta property="og:locale" content="en_US" />
+  <meta property="og:type" content="object" />
   <meta property="og:site_name" content={$_('meta.title')} />
   <meta name="twitter:card" content="summary_large_image" />
+  <meta name="twitter:image:src" content="https://jokesbapak2.pages.dev/social.jpg" />
   <meta name="twitter:creator" content="Reinaldy Rafli" />
 </svelte:head>
 
@@ -41,9 +44,7 @@
         {$_('footer.available')}
         <a href="https://www.github.com/aldy505/jokes-bapak2-api" class="hover:underline">{$_('footer.github')}</a>.
       </p>
-      <p class="text-sm opacity-50 inline-block">
-        &nbsp;|&nbsp;
-      </p>
+      <p class="text-sm opacity-50 inline-block">&nbsp;|&nbsp;</p>
       <p class="text-sm opacity-50 hover:opacity-90 transition duration-300 ease-in-out inline-block">
         {$_('footer.language')}
         <a href="?lang=en" target="_top" class="hover:underline">{$_('footer.english')}</a>

client/src/routes/api.svelte

@@ -11,6 +11,7 @@
   <meta name="twitter:title" content={$_('navigation.api') + '-' + $_('meta.title')} />
   <meta property="og:title" content={$_('navigation.api') + '-' + $_('meta.title')} />
   <link rel="canonical" href="https://jokesbapak2.pages.dev/api" />
+  <meta name="description" content="Largest collection of Indonesian dad jokes as a consumable API" />
   <meta name="twitter:description" content="Largest collection of Indonesian dad jokes as a consumable API" />
   <meta property="og:description" content="Largest collection of Indonesian dad jokes as a consumable API" />
 </svelte:head>
@@ -42,9 +43,6 @@
 
 <section>
   <p class="pt-8">{$_('api.more')}</p>
-  <meta name="twitter:title" content={$_('navigation.api') + '-' + $_('meta.title')} />
-  <meta property="og:title" content={$_('navigation.api') + '-' + $_('meta.title')} />
-  <link rel="canonical" href="https://jokesbapak2.pages.dev/why" />
 </section>
 
 <style>

client/src/routes/guide.svelte

@@ -8,6 +8,7 @@
   <meta name="twitter:title" content={$_('navigation.guide') + '-' + $_('meta.title')} />
   <meta property="og:title" content={$_('navigation.guide') + '-' + $_('meta.title')} />
   <link rel="canonical" href="https://jokesbapak2.pages.dev/guide" />
+  <meta name="description" content="Largest collection of Indonesian dad jokes as a consumable API" />
   <meta name="twitter:description" content="Largest collection of Indonesian dad jokes as a consumable API" />
   <meta property="og:description" content="Largest collection of Indonesian dad jokes as a consumable API" />
 </svelte:head>

client/src/routes/index.svelte

@@ -14,6 +14,7 @@
   <meta name="twitter:title" content={$_('meta.title') + '-' + $_('meta.tagline')} />
   <meta property="og:title" content={$_('meta.title') + '-' + $_('meta.tagline')} />
   <link rel="canonical" href="https://jokesbapak2.pages.dev/" />
+  <meta name="description" content="Largest collection of Indonesian dad jokes as a consumable API" />
   <meta name="twitter:description" content="Largest collection of Indonesian dad jokes as a consumable API" />
   <meta property="og:description" content="Largest collection of Indonesian dad jokes as a consumable API" />
 </svelte:head>
@@ -26,7 +27,7 @@
     </div>
     <div class="flex-1 md:px-6 w-full">
       <div class="max-w-xs mx-auto">
-        <img src={env.API_ENDPOINT + `/today`} alt="Sample joke" class="py-6 shadow-2xl" />
+        <img src={env.API_ENDPOINT + `/today`} alt="Sample joke" class="py-6 shadow-2xl bg-gray-200 dark:bg-gray-800" />
       </div>
       <Codeblock>$ curl -XGET 'https://jokesbapak2.herokuapp.com/v1/'</Codeblock>
       <p class="text-sm text-center py-4 opacity-70 hover:opacity-100 transition duration-300 ease-in-out">

client/src/routes/why.svelte

@@ -7,6 +7,7 @@
   <meta name="twitter:title" content={$_('navigation.why') + '-' + $_('meta.title')} />
   <meta property="og:title" content={$_('navigation.why') + '-' + $_('meta.title')} />
   <link rel="canonical" href="https://jokesbapak2.pages.dev/why" />
+  <meta name="description" content="Largest collection of Indonesian dad jokes as a consumable API" />
   <meta name="twitter:description" content="Largest collection of Indonesian dad jokes as a consumable API" />
   <meta property="og:description" content="Largest collection of Indonesian dad jokes as a consumable API" />
 </svelte:head>
@@ -15,6 +16,8 @@
   <h1 id="why-does-this-project-exists">{$_('why.exists.title')}</h1>
   <p>{$_('why.exists.body.1')} {$_('why.exists.body.2')} {$_('why.exists.body.3')} {$_('why.exists.body.4')}</p>
   <p>{$_('why.exists.body.5')} {$_('why.exists.body.6')}</p>
+</section>
+<section>
   <h1 id="can-i-submit-my-dad-joke">{$_('why.submit.title')}</h1>
   <p>
     {$_('why.submit.body.1')}
@@ -24,6 +27,8 @@
     {$_('why.submit.body.5')}
     {$_('why.submit.body.6')}
   </p>
+</section>
+<section>
   <h1 id="can-i-contribute">{$_('why.contribute.title')}</h1>
   <p>
     {$_('why.contribute.body.1')}
@@ -31,6 +36,8 @@
     <a href="https://www.github.com/aldy505/jokes-bapak2-api">{$_('why.contribute.body.3')}</a>
     {$_('why.contribute.body.4')}
   </p>
+</section>
+<section>
   <h1 id="other-inquiries">{$_('why.inquiries.title')}</h1>
   <p>
     {$_('why.inquiries.body.1')}
@@ -43,10 +50,13 @@
     @apply text-base py-2 'lg:w-2/3';
   }
   h1 {
-    @apply text-3xl 'md:text-4xl' font-bold py-4;
+    @apply text-3xl 'md:text-3xl' font-bold py-2;
   }
   a {
     /* This would probably be an error if you installed WindiCSS extension on VSCode */
     @apply 'hover:underline' 'dark:text-dodger-200' text-dodger-700;
   }
+  section {
+    @apply pt-6;
+  }
 </style>