feat: analytics with umami

This commit is contained in:
Reinaldy Rafli 2021-07-18 18:56:48 +07:00
parent c71c8cd3d7
commit 0954767a12
6 changed files with 49 additions and 17 deletions

View File

@ -21,6 +21,7 @@
<meta name="twitter:creator" content="Reinaldy Rafli" /> <meta name="twitter:creator" content="Reinaldy Rafli" />
<link rel="icon" type="image/png" href="/favicon.png"> <link rel="icon" type="image/png" href="/favicon.png">
<link rel="icon" type="image/svg" href="/favicon.svg"> <link rel="icon" type="image/svg" href="/favicon.svg">
<script async defer data-website-id="82725fd7-2542-4828-b313-349f68d84894" src="https://jokesbapak2-analytics.herokuapp.com/umami.js"></script>
%svelte.head% %svelte.head%
</head> </head>
<body> <body>

View File

@ -84,7 +84,7 @@
}, },
"id": { "id": {
"title": "Get joke by ID", "title": "Get joke by ID",
"body": "You'll get consistent joke for every call with the same ID." "body": "You'll get consistent joke for every call with the same ID. Where ID is a number ranging from 1 to {total}."
}, },
"total": { "total": {
"title": "Get total number of jokes", "title": "Get total number of jokes",

View File

@ -84,7 +84,7 @@
}, },
"id": { "id": {
"title": "Dapatkan joke berdasarkan ID", "title": "Dapatkan joke berdasarkan ID",
"body": "Bapak akan dapat hasil yang konsisten pada setiap request dengan ID yang sama." "body": "Bapak akan dapat hasil yang konsisten pada setiap request dengan ID yang sama. Dimana ID adalah angka diantara 1 hingga {total}."
}, },
"total": { "total": {
"title": "Dapatkan total jumlah jokes", "title": "Dapatkan total jumlah jokes",

View File

@ -24,19 +24,33 @@
<slot /> <slot />
</main> </main>
<footer class="font-body py-8"> <footer class="font-body py-8 w-full md:w-1/2 lg:w-2/5">
<p class="text-sm opacity-50 hover:opacity-90 transition duration-300 ease-in-out inline-block"> <div class="flex flex-col md:flex-row flex-wrap">
{$_('footer.made')} <span class="text-red-500">&#10084;</span> <div class="flex-initial pr-3">
{$_('footer.indonesia')}. <p class="text-sm opacity-50 hover:opacity-90 transition duration-300 ease-in-out inline-block">
{$_('footer.available')} {$_('footer.made')} <span class="text-red-500">&#10084;</span>
<a href="https://www.github.com/aldy505/jokes-bapak2-api" class="hover:underline">{$_('footer.github')}</a>. {$_('footer.indonesia')}.
</p> </p>
<p class="text-sm opacity-50 inline-block">&nbsp;|&nbsp;</p> </div>
<p class="text-sm opacity-50 hover:opacity-90 transition duration-300 ease-in-out inline-block"> <div class="flex-initial pr-3">
{$_('footer.language')} <p class="text-sm opacity-50 hover:opacity-90 transition duration-300 ease-in-out inline-block">
<a href="?lang=en" target="_top" class="hover:underline">{$_('footer.english')}</a> {$_('footer.available')}
<a href="?lang=id" target="_top" class="hover:underline">{$_('footer.indonesian')}</a> <a href="https://www.github.com/aldy505/jokes-bapak2-api" class="hover:underline">{$_('footer.github')}</a>.
</p> </p>
</div>
<div class="flex-initial pr-3">
<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>
<a href="?lang=id" target="_top" class="hover:underline">{$_('footer.indonesian')}</a>.
</p>
</div>
<div class="flex-initial pr-3">
<p class="text-sm opacity-50 hover:opacity-90 transition duration-300 ease-in-out inline-block">
<a href="https://jokesbapak2-analytics.herokuapp.com/share/1xYuVSyl/Jokes%20Bapak2" class="hover:underline">Analytics</a>.
</p>
</div>
</div>
</footer> </footer>
</div> </div>
</div> </div>

View File

@ -1,9 +1,26 @@
<script lang="ts"> <script lang="ts">
// This page is meant to explain available API endpoints. // This page is meant to explain available API endpoints.
import {onMount} from 'svelte';
import { _ } from 'svelte-i18n'; import { _ } from 'svelte-i18n';
import env from '$lib/env'; import env from '$lib/env';
import {$fetch as omf} from 'ohmyfetch';
import Codeblock from '../components/codeblock.svelte'; import Codeblock from '../components/codeblock.svelte';
import Notice from '../components/notice.svelte'; import Notice from '../components/notice.svelte';
interface TotalResponse {
message: string;
}
let total;
onMount(async () => {
const totalJokes = async (): Promise<string> => {
const response = await omf<TotalResponse>(`${env.API_ENDPOINT}/total`);
return response.message;
};
total = await totalJokes();
});
</script> </script>
<svelte:head> <svelte:head>
@ -36,7 +53,7 @@
GET {env.API_ENDPOINT}/today GET {env.API_ENDPOINT}/today
</Codeblock> </Codeblock>
<h2>{$_('api.get.id.title')}</h2> <h2>{$_('api.get.id.title')}</h2>
<p>{$_('api.get.id.body')}</p> <p>{$_('api.get.id.body', { values: { total }})}</p>
<Codeblock> <Codeblock>
GET {env.API_ENDPOINT}/id/&lcub;id&rcub; GET {env.API_ENDPOINT}/id/&lcub;id&rcub;
</Codeblock> </Codeblock>

View File

@ -36,7 +36,7 @@
<section> <section>
<div class="flex flex-col lg:flex-row items-center py-8"> <div class="flex flex-col lg:flex-row items-center py-8">
<div class="flex-1"> <div class="flex-1">
<h1 class="text-5xl md:text-6xl font-bold py-2">{$_('meta.tagline-total', { values: { total } })}</h1> <h1 class="text-4xl sm:text-5xl md:text-6xl font-bold py-2">{$_('meta.tagline-total', { values: { total } })}</h1>
<p class="text-base py-4 md:w-2/3">{$_('meta.explanation')}</p> <p class="text-base py-4 md:w-2/3">{$_('meta.explanation')}</p>
</div> </div>
<div class="flex-1 md:px-6 w-full"> <div class="flex-1 md:px-6 w-full">