aldy505
/
jokes-bapak2
mirror of https://github.com/aldy505/jokes-bapak2.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactor: meta tags

This commit is contained in:
Reinaldy Rafli 2021-07-16 15:32:47 +07:00
parent 7829bb2fdf
commit ecc4fd5db8
7 changed files with 60 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
client/src/components/navbar.svelte
View File

@ -52,46 +52,46 @@
<menu <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" 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="container -pr-10">
<div class="flex flex-col items-center content-center text-center pt-20"> <div class="flex flex-col items-center content-center text-center pt-20">
<div <div
on:click={() => { on:click={() => {
open = false; open = false;
return goto('/'); return goto('/');
}} }}
class="hover:cursor-pointer flex-1 font-bold text-3xl pt-6 pb-10" class="hover:cursor-pointer flex-1 font-bold text-3xl pt-6 pb-10"
> >
Jokesbapak2 Jokesbapak2
</div> </div>
<div <div
on:click={() => { on:click={() => {
open = false; open = false;
return goto('/why'); return goto('/why');
}} }}
class="flex-1 py-3 text-4xl" class="flex-1 py-3 text-4xl"
> >
{$_('navigation.why')} {$_('navigation.why')}
</div> </div>
<div <div
on:click={() => { on:click={() => {
open = false; open = false;
return goto('/guide'); return goto('/guide');
}} }}
class="flex-1 py-3 text-4xl" class="flex-1 py-3 text-4xl"
> >
{$_('navigation.guide')} {$_('navigation.guide')}
</div> </div>
<div <div
on:click={() => { on:click={() => {
open = false; open = false;
return goto('/api'); return goto('/api');
}} }}
class="flex-1 py-3 text-4xl" class="flex-1 py-3 text-4xl"
> >
{$_('navigation.api')} {$_('navigation.api')}
</div>
</div> </div>
</div> </div>
</div>
</menu> </menu>
{/if} {/if}

3
client/src/components/notice.svelte
View File

@ -1,6 +1,7 @@
<script lang="ts"> <script lang="ts">
export let emoji: string = ''; export let emoji = '';
</script> </script>
<div <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" 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"
> >

9
client/src/routes/__layout.svelte
View File

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

4
client/src/routes/api.svelte
View File

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

1
client/src/routes/guide.svelte
View File

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

3
client/src/routes/index.svelte
View File

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

12
client/src/routes/why.svelte
View File

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