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

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
client/src/app.html
View File

@ -21,6 +21,7 @@
<meta name="twitter:creator" content="Reinaldy Rafli" />
<link rel="icon" type="image/png" href="/favicon.png">
<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%
</head>
<body>

2
client/src/languages/en.json
View File

@ -84,7 +84,7 @@
},
"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": {
"title": "Get total number of jokes",

2
client/src/languages/id.json
View File

@ -84,7 +84,7 @@
},
"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": {
"title": "Dapatkan total jumlah jokes",

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

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

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

@ -1,9 +1,26 @@
<script lang="ts">
// This page is meant to explain available API endpoints.
import {onMount} from 'svelte';
import { _ } from 'svelte-i18n';
import env from '$lib/env';
import {$fetch as omf} from 'ohmyfetch';
import Codeblock from '../components/codeblock.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>
<svelte:head>
@ -36,7 +53,7 @@
GET {env.API_ENDPOINT}/today
</Codeblock>
<h2>{$_('api.get.id.title')}</h2>
<p>{$_('api.get.id.body')}</p>
<p>{$_('api.get.id.body', { values: { total }})}</p>
<Codeblock>
GET {env.API_ENDPOINT}/id/&lcub;id&rcub;
</Codeblock>

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

@ -36,7 +36,7 @@
<section>
<div class="flex flex-col lg:flex-row items-center py-8">
<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>
</div>
<div class="flex-1 md:px-6 w-full">