Skip to content

Commit c24cc38

Browse files
ryanaidilpryanaidilp
committed
feat: implement complete i18n translations for documentation sections
- Add internationalization support to all documentation components - Update OverviewSection, NationalLatestSection, NationalHistoricalSection, AuthenticationSection, and ErrorHandlingSection with Vue i18n - Fix rate limiting documentation: correct 1000 req/hour to 100 req/minute per IP with 20 burst size - Update COVID-19 terminology with official Kemenkes classifications - Add current terms (Suspect, Probable, Close Contact, Confirmed) and legacy terms (ODP, PDP, OTG) - Implement proper array translations using $tm() method for dynamic lists - Ensure all components follow consistent i18n patterns with useI18n() composable - Maintain accuracy with pico-api-go v2.1.0 API specifications
1 parent cc77722 commit c24cc38

File tree

8 files changed

+617
-163
lines changed

8 files changed

+617
-163
lines changed

‎src/components/documentation/AuthenticationSection.vue‎

Lines changed: 15 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
<template>
22
<section v-show="isActive" id="authentication" class="mb-16">
33
<div class="mb-8">
4-
<h1 class="text-3xl font-bold text-gray-900 mb-4">Authentication</h1>
5-
<p class="text-lg text-gray-600">API access and security information</p>
4+
<h1 class="text-3xl font-bold text-gray-900 mb-4">{{ t('documentation.authentication.title') }}</h1>
5+
<p class="text-lg text-gray-600">{{ t('documentation.authentication.subtitle') }}</p>
66
</div>
77

88
<div class="bg-white rounded-2xl shadow-lg border border-gray-200 overflow-hidden">
99
<div class="bg-gradient-to-r from-yellow-600 to-orange-600 px-8 py-6">
10-
<h2 class="text-2xl font-bold text-white mb-2">Authentication</h2>
11-
<p class="text-yellow-100">API access and security</p>
10+
<h2 class="text-2xl font-bold text-white mb-2">{{ t('documentation.authentication.title') }}</h2>
11+
<p class="text-yellow-100">{{ t('documentation.authentication.subtitle') }}</p>
1212
</div>
1313

1414
<div class="p-8">
@@ -18,57 +18,33 @@
1818
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
1919
</svg>
2020
<div>
21-
<h3 class="text-lg font-semibold text-green-800 mb-1">No Authentication Required</h3>
22-
<p class="text-green-700">All PICO SulTeng API endpoints are publicly accessible and do not require authentication keys or tokens.</p>
21+
<h3 class="text-lg font-semibold text-green-800 mb-1">{{ t('documentation.authentication.noAuthRequired') }}</h3>
22+
<p class="text-green-700">{{ t('documentation.authentication.noAuthDescription') }}</p>
2323
</div>
2424
</div>
2525
</div>
2626

2727
<div class="grid md:grid-cols-2 gap-8">
2828
<div class="bg-blue-50 rounded-xl p-6">
29-
<h3 class="text-xl font-semibold text-gray-900 mb-4">Rate Limiting</h3>
29+
<h3 class="text-xl font-semibold text-gray-900 mb-4">{{ t('documentation.authentication.rateLimiting') }}</h3>
3030
<ul class="space-y-2 text-gray-600">
31-
<li class="flex items-center">
31+
<li v-for="(detail, index) in $tm('documentation.authentication.rateLimitDetails')" :key="index" class="flex items-center">
3232
<svg class="w-4 h-4 text-blue-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
3333
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
3434
</svg>
35-
1000 requests per hour per IP
36-
</li>
37-
<li class="flex items-center">
38-
<svg class="w-4 h-4 text-blue-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
39-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
40-
</svg>
41-
No API key required
42-
</li>
43-
<li class="flex items-center">
44-
<svg class="w-4 h-4 text-blue-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
45-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
46-
</svg>
47-
CORS enabled for all origins
35+
{{ detail }}
4836
</li>
4937
</ul>
5038
</div>
5139

5240
<div class="bg-purple-50 rounded-xl p-6">
53-
<h3 class="text-xl font-semibold text-gray-900 mb-4">Best Practices</h3>
41+
<h3 class="text-xl font-semibold text-gray-900 mb-4">{{ t('documentation.authentication.bestPractices') }}</h3>
5442
<ul class="space-y-2 text-gray-600">
55-
<li class="flex items-center">
43+
<li v-for="(practice, index) in $tm('documentation.authentication.practiceDetails')" :key="index" class="flex items-center">
5644
<svg class="w-4 h-4 text-purple-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
5745
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4"></path>
5846
</svg>
59-
Cache responses appropriately
60-
</li>
61-
<li class="flex items-center">
62-
<svg class="w-4 h-4 text-purple-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
63-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4"></path>
64-
</svg>
65-
Use HTTPS for secure connections
66-
</li>
67-
<li class="flex items-center">
68-
<svg class="w-4 h-4 text-purple-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
69-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4"></path>
70-
</svg>
71-
Handle rate limit responses
47+
{{ practice }}
7248
</li>
7349
</ul>
7450
</div>
@@ -79,9 +55,12 @@
7955
</template>
8056

8157
<script setup lang="ts">
58+
import { useI18n } from 'vue-i18n'
59+
8260
interface Props {
8361
isActive: boolean
8462
}
8563
8664
defineProps<Props>()
65+
const { t, tm: $tm } = useI18n()
8766
</script>

‎src/components/documentation/ErrorHandlingSection.vue‎

Lines changed: 25 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,70 @@
11
<template>
22
<section v-show="isActive" id="error-handling" class="mb-16">
33
<div class="mb-8">
4-
<h1 class="text-3xl font-bold text-gray-900 mb-4">Error Handling</h1>
5-
<p class="text-lg text-gray-600">HTTP status codes and error responses</p>
4+
<h1 class="text-3xl font-bold text-gray-900 mb-4">{{ t('documentation.errorHandling.title') }}</h1>
5+
<p class="text-lg text-gray-600">{{ t('documentation.errorHandling.subtitle') }}</p>
66
</div>
77

88
<div class="bg-white rounded-2xl shadow-lg border border-gray-200 overflow-hidden">
99
<div class="bg-gradient-to-r from-red-600 to-rose-600 px-8 py-6">
10-
<h2 class="text-2xl font-bold text-white mb-2">Error Handling</h2>
11-
<p class="text-red-100">HTTP status codes and error responses</p>
10+
<h2 class="text-2xl font-bold text-white mb-2">{{ t('documentation.errorHandling.title') }}</h2>
11+
<p class="text-red-100">{{ t('documentation.errorHandling.subtitle') }}</p>
1212
</div>
1313

1414
<div class="p-8">
1515
<!-- Status Codes -->
1616
<div class="mb-8">
17-
<h3 class="text-xl font-semibold text-gray-900 mb-4">HTTP Status Codes</h3>
17+
<h3 class="text-xl font-semibold text-gray-900 mb-4">{{ t('documentation.errorHandling.httpStatusCodes') }}</h3>
1818
<div class="grid gap-4">
1919
<div class="flex items-center p-4 bg-green-50 border border-green-200 rounded-lg">
2020
<div class="w-16 h-8 bg-green-500 text-white text-sm font-bold rounded flex items-center justify-center mr-4">200</div>
2121
<div>
22-
<div class="font-semibold text-gray-900">OK</div>
23-
<div class="text-sm text-gray-600">Request successful</div>
22+
<div class="font-semibold text-gray-900">{{ t('documentation.errorHandling.statusCodes.200.title') }}</div>
23+
<div class="text-sm text-gray-600">{{ t('documentation.errorHandling.statusCodes.200.description') }}</div>
2424
</div>
2525
</div>
2626

2727
<div class="flex items-center p-4 bg-red-50 border border-red-200 rounded-lg">
2828
<div class="w-16 h-8 bg-red-500 text-white text-sm font-bold rounded flex items-center justify-center mr-4">400</div>
2929
<div>
30-
<div class="font-semibold text-gray-900">Bad Request</div>
31-
<div class="text-sm text-gray-600">Invalid parameters or malformed request</div>
30+
<div class="font-semibold text-gray-900">{{ t('documentation.errorHandling.statusCodes.400.title') }}</div>
31+
<div class="text-sm text-gray-600">{{ t('documentation.errorHandling.statusCodes.400.description') }}</div>
3232
</div>
3333
</div>
3434

3535
<div class="flex items-center p-4 bg-red-50 border border-red-200 rounded-lg">
3636
<div class="w-16 h-8 bg-red-500 text-white text-sm font-bold rounded flex items-center justify-center mr-4">404</div>
3737
<div>
38-
<div class="font-semibold text-gray-900">Not Found</div>
39-
<div class="text-sm text-gray-600">Endpoint or resource not found</div>
38+
<div class="font-semibold text-gray-900">{{ t('documentation.errorHandling.statusCodes.404.title') }}</div>
39+
<div class="text-sm text-gray-600">{{ t('documentation.errorHandling.statusCodes.404.description') }}</div>
4040
</div>
4141
</div>
4242

4343
<div class="flex items-center p-4 bg-yellow-50 border border-yellow-200 rounded-lg">
4444
<div class="w-16 h-8 bg-yellow-500 text-white text-sm font-bold rounded flex items-center justify-center mr-4">429</div>
4545
<div>
46-
<div class="font-semibold text-gray-900">Too Many Requests</div>
47-
<div class="text-sm text-gray-600">Rate limit exceeded</div>
46+
<div class="font-semibold text-gray-900">{{ t('documentation.errorHandling.statusCodes.429.title') }}</div>
47+
<div class="text-sm text-gray-600">{{ t('documentation.errorHandling.statusCodes.429.description') }}</div>
4848
</div>
4949
</div>
5050

5151
<div class="flex items-center p-4 bg-red-50 border border-red-200 rounded-lg">
5252
<div class="w-16 h-8 bg-red-600 text-white text-sm font-bold rounded flex items-center justify-center mr-4">500</div>
5353
<div>
54-
<div class="font-semibold text-gray-900">Internal Server Error</div>
55-
<div class="text-sm text-gray-600">Server encountered an unexpected error</div>
54+
<div class="font-semibold text-gray-900">{{ t('documentation.errorHandling.statusCodes.500.title') }}</div>
55+
<div class="text-sm text-gray-600">{{ t('documentation.errorHandling.statusCodes.500.description') }}</div>
5656
</div>
5757
</div>
5858
</div>
5959
</div>
6060

6161
<!-- Error Response Format -->
6262
<div>
63-
<h3 class="text-xl font-semibold text-gray-900 mb-4">Error Response Format</h3>
63+
<h3 class="text-xl font-semibold text-gray-900 mb-4">{{ t('documentation.errorHandling.errorResponseFormat') }}</h3>
6464
<div class="bg-gray-50 rounded-xl p-6">
6565
<div class="grid lg:grid-cols-2 gap-6">
6666
<div>
67-
<h4 class="font-semibold text-gray-900 mb-3">Error Response</h4>
67+
<h4 class="font-semibold text-gray-900 mb-3">{{ t('documentation.errorHandling.errorResponse') }}</h4>
6868
<div class="bg-gray-900 rounded-lg p-4 font-mono text-sm">
6969
<div class="text-blue-400">{</div>
7070
<div class="ml-2">
@@ -82,23 +82,23 @@
8282
</div>
8383

8484
<div>
85-
<h4 class="font-semibold text-gray-900 mb-3">Error Fields</h4>
85+
<h4 class="font-semibold text-gray-900 mb-3">{{ t('documentation.errorHandling.errorFields') }}</h4>
8686
<div class="space-y-3 text-sm">
8787
<div class="flex">
8888
<code class="bg-white px-2 py-1 rounded text-blue-600 mr-3 font-mono">status</code>
89-
<span class="text-gray-600">Always "error" for error responses</span>
89+
<span class="text-gray-600">{{ t('documentation.errorHandling.fieldDescriptions.status') }}</span>
9090
</div>
9191
<div class="flex">
9292
<code class="bg-white px-2 py-1 rounded text-blue-600 mr-3 font-mono">code</code>
93-
<span class="text-gray-600">HTTP status code</span>
93+
<span class="text-gray-600">{{ t('documentation.errorHandling.fieldDescriptions.code') }}</span>
9494
</div>
9595
<div class="flex">
9696
<code class="bg-white px-2 py-1 rounded text-blue-600 mr-3 font-mono">message</code>
97-
<span class="text-gray-600">Human-readable error message</span>
97+
<span class="text-gray-600">{{ t('documentation.errorHandling.fieldDescriptions.message') }}</span>
9898
</div>
9999
<div class="flex">
100100
<code class="bg-white px-2 py-1 rounded text-blue-600 mr-3 font-mono">details</code>
101-
<span class="text-gray-600">Additional error information</span>
101+
<span class="text-gray-600">{{ t('documentation.errorHandling.fieldDescriptions.details') }}</span>
102102
</div>
103103
</div>
104104
</div>
@@ -111,9 +111,12 @@
111111
</template>
112112

113113
<script setup lang="ts">
114+
import { useI18n } from 'vue-i18n'
115+
114116
interface Props {
115117
isActive: boolean
116118
}
117119
118120
defineProps<Props>()
121+
const { t } = useI18n()
119122
</script>

0 commit comments

Comments
 (0)