Merge pull request #3 from banua-coder/feature/update-documentation-national-endpoint

feat: implement complete i18n translations and documentation updates

Author: ryanaidilp

.gitignore

@@ -104,4 +104,4 @@ temp/
 
 # Claude Code specific
 .claude
-CLAUDE.md
+CLAUDE.mdimage.png

README.md

@@ -162,4 +162,4 @@ This project is licensed under the MIT License. See the [LICENSE](LICENSE) file
 **Created for PICO SulTeng API**  
 [Banua Coder](https://banuacoder.com) • Central Sulawesi COVID-19 Data API
 
-**Developer**: [Fajrian Aidil Pratama](https://github.com/ryanaidilp)
+**Developer**: [Fajrian Aidil Pratama](https://github.com/ryanaidilp)

image.png

@@ -27,8 +27,9 @@
   },
   "dependencies": {
     "aos": "^2.3.4",
+    "katex": "^0.16.22",
     "vue": "^3.5.21",
-    "vue-i18n": "^9.14.5",
+    "vue-i18n": "9",
     "vue-router": "^4.5.1"
   }
 }

package.json

@@ -3,4 +3,4 @@ export default {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+}

postcss.config.js

@@ -12,4 +12,4 @@
 #app {
   min-height: 100vh;
 }
-</style>
+</style>

src/App.vue

@@ -56,4 +56,4 @@ const dataSources: DataSource[] = [
     url: 'https://hack.co.id'
   }
 ]
-</script>
+</script>

src/components/DataSources.vue

@@ -0,0 +1,37 @@
+<template>
+  <span v-html="renderedMath" class="katex-formula"></span>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import katex from 'katex'
+import 'katex/dist/katex.min.css'
+
+interface Props {
+  formula: string
+  displayMode?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  displayMode: true
+})
+
+const renderedMath = computed(() => {
+  try {
+    return katex.renderToString(props.formula, {
+      displayMode: props.displayMode,
+      throwOnError: false
+    })
+  } catch (error) {
+    console.error('KaTeX rendering error:', error)
+    return props.formula
+  }
+})
+</script>
+
+<style scoped>
+.katex-formula {
+  display: block;
+  text-align: center;
+}
+</style>

src/components/MathFormula.vue

@@ -215,4 +215,4 @@ onUnmounted(() => {
   // Restore body scroll on component unmount
   document.body.style.overflow = 'auto'
 })
-</script>
+</script>

src/components/Navigation.vue

@@ -0,0 +1,66 @@
+<template>
+  <section v-show="isActive" id="authentication" class="mb-16">
+    <div class="mb-8">
+      <h1 class="text-3xl font-bold text-gray-900 mb-4">{{ t('documentation.authentication.title') }}</h1>
+      <p class="text-lg text-gray-600">{{ t('documentation.authentication.subtitle') }}</p>
+    </div>
+
+    <div class="bg-white rounded-2xl shadow-lg border border-gray-200 overflow-hidden">
+      <div class="bg-gradient-to-r from-yellow-600 to-orange-600 px-8 py-6">
+        <h2 class="text-2xl font-bold text-white mb-2">{{ t('documentation.authentication.title') }}</h2>
+        <p class="text-yellow-100">{{ t('documentation.authentication.subtitle') }}</p>
+      </div>
+      
+      <div class="p-8">
+        <div class="bg-green-50 border-l-4 border-green-400 p-6 mb-8">
+          <div class="flex items-center">
+            <svg class="w-6 h-6 text-green-400 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <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>
+            </svg>
+            <div>
+              <h3 class="text-lg font-semibold text-green-800 mb-1">{{ t('documentation.authentication.noAuthRequired') }}</h3>
+              <p class="text-green-700">{{ t('documentation.authentication.noAuthDescription') }}</p>
+            </div>
+          </div>
+        </div>
+        
+        <div class="grid md:grid-cols-2 gap-8">
+          <div class="bg-blue-50 rounded-xl p-6">
+            <h3 class="text-xl font-semibold text-gray-900 mb-4">{{ t('documentation.authentication.rateLimiting') }}</h3>
+            <ul class="space-y-2 text-gray-600">
+              <li v-for="(detail, index) in $tm('documentation.authentication.rateLimitDetails')" :key="index" class="flex items-center">
+                <svg class="w-4 h-4 text-blue-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
+                </svg>
+                {{ detail }}
+              </li>
+            </ul>
+          </div>
+          
+          <div class="bg-purple-50 rounded-xl p-6">
+            <h3 class="text-xl font-semibold text-gray-900 mb-4">{{ t('documentation.authentication.bestPractices') }}</h3>
+            <ul class="space-y-2 text-gray-600">
+              <li v-for="(practice, index) in $tm('documentation.authentication.practiceDetails')" :key="index" class="flex items-center">
+                <svg class="w-4 h-4 text-purple-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4"></path>
+                </svg>
+                {{ practice }}
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+
+interface Props {
+  isActive: boolean
+}
+
+defineProps<Props>()
+const { t, tm: $tm } = useI18n()
+</script>