From 270bab1b93a9ab526b53045ba2c1c3121294532c Mon Sep 17 00:00:00 2001
From: Farhan <101630148+KucingOyenBarbar@users.noreply.github.com>
Date: Wed, 8 Nov 2023 22:18:56 +0700
Subject: [PATCH] perbaikan SEO & Loading Indikator

---
 app.vue                        |   2 +-
 nuxt.config.ts                 | 166 ++++++++++++++++-----------------
 pages/about-us.vue             |   6 +-
 pages/articles/index.vue       |   8 +-
 pages/events/category/[id].vue |   4 +-
 5 files changed, 94 insertions(+), 92 deletions(-)

diff --git a/app.vue b/app.vue
index e4022c2..781c855 100644
--- a/app.vue
+++ b/app.vue
@@ -1,6 +1,6 @@
 <template>
   <NuxtLayout>
-    <NuxtLoadingIndicator />
+    <NuxtLoadingIndicator :duration="5000" color="#a60b40" />
     <!-- <VitePwaManifest /> -->
     <NuxtPage />
   </NuxtLayout>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 694a84b..8276566 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -11,7 +11,7 @@ export default defineNuxtConfig({
     viewTransition: true,
     writeEarlyHints: true,
     payloadExtraction: true,
-    emitRouteChunkError: "automatic", // or 'manual' or false.
+    emitRouteChunkError: 'automatic', // or 'manual' or false.
     inlineRouteRules: true,
     renderJsonPayloads: true,
   },
@@ -24,9 +24,9 @@ export default defineNuxtConfig({
         commons: true,
         cacheGroups: {
           styles: {
-            name: "styles",
+            name: 'styles',
             test: /\.(css|vue)$/,
-            chunks: "all",
+            chunks: 'all',
             enforce: true,
           },
         },
@@ -36,39 +36,39 @@ export default defineNuxtConfig({
 
   // Nuxt.js modules
   modules: [
-    "@nuxt/image",
-    "@nuxtjs/robots",
-    "nuxt-bootstrap-icons",
-    "nuxt-swiper",
-    "@nuxtjs/color-mode",
+    '@nuxt/image',
+    '@nuxtjs/robots',
+    'nuxt-bootstrap-icons',
+    'nuxt-swiper',
+    '@nuxtjs/color-mode',
     // "@vite-pwa/nuxt",
   ],
 
   plugins: [
-    { src: "~/plugins/useBootstrap.client.ts", mode: "client", ssr: false },
+    { src: '~/plugins/useBootstrap.client.ts', mode: 'client', ssr: false },
     {
-      src: "~/plugins/useAnimateOnScroll.client.ts",
-      mode: "client",
+      src: '~/plugins/useAnimateOnScroll.client.ts',
+      mode: 'client',
       ssr: false,
     },
   ],
 
   css: [
-    "~/assets/css/index.css",
-    "~/assets/css/custom-scrollbar.css",
-    "~/node_modules/bootstrap/dist/css/bootstrap.min.css",
-    "~/node_modules/aos/dist/aos.css",
+    '~/assets/css/index.css',
+    '~/assets/css/custom-scrollbar.css',
+    '~/node_modules/bootstrap/dist/css/bootstrap.min.css',
+    '~/node_modules/aos/dist/aos.css',
   ],
 
   hooks: {
-    "build:manifest": (manifest) => {
+    'build:manifest': (manifest) => {
       // find the app entry, css list
-      const css = manifest["node_modules/nuxt/dist/app/entry.js"]?.css;
+      const css = manifest['node_modules/nuxt/dist/app/entry.js']?.css;
       if (css) {
         // start from the end of the array and go to the beginning
         for (let i = css.length - 1; i >= 0; i--) {
           // if it starts with 'entry', remove it from the list
-          if (css[i].startsWith("entry")) css.splice(i, 1);
+          if (css[i].startsWith('entry')) css.splice(i, 1);
         }
       }
     },
@@ -77,53 +77,53 @@ export default defineNuxtConfig({
   app: {
     head: {
       meta: [
-        { name: "charset", content: "utf-8" },
-        { name: "viewport", content: "width=device-width, initial-scale=1" },
-        { name: "theme-color", content: "#fff" },
+        { name: 'charset', content: 'utf-8' },
+        { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+        { name: 'theme-color', content: '#fff' },
         {
-          name: "description",
+          name: 'description',
           content:
-            "Citiasia Center for Smart Nation (CCSN) merupakan salah satu sayap strategis dari Citiasia Inc. dalam menyebarkan semangat membangun bangsa menuju Indonesia Smart Nation",
+            'Citiasia Center for Smart Nation (CCSN) merupakan salah satu sayap strategis dari Citiasia Inc. dalam menyebarkan semangat membangun bangsa menuju Indonesia Smart Nation',
         },
-        { name: "keywords", content: "Sarana Berita Smart City Terkini" },
-        { name: "author", content: "Smart Nation" },
+        { name: 'keywords', content: 'Sarana Berita Smart City Terkini' },
+        { name: 'author', content: 'Smart Nation' },
       ],
       // titleTemplate: "%s - Smart Nation",
       titleTemplate: (titleChunk) => {
-        return titleChunk ? `${titleChunk} - Site Title` : "Site Title";
+        return titleChunk ? `${titleChunk} - Site Title` : 'Site Title';
       },
       link: [
         {
-          rel: "icon",
-          type: "image/x-icon",
-          href: "/logo-smartnation-id-03.png",
+          rel: 'icon',
+          type: 'image/x-icon',
+          href: '/logo-smartnation-id-03.png',
         },
 
         // CDN https://fonts.google.com
-        { rel: "preconnect", href: "https://fonts.googleapis.com" },
+        { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
         {
-          rel: "preconnect",
-          href: "https://fonts.gstatic.com",
-          crossorigin: "anonymous",
+          rel: 'preconnect',
+          href: 'https://fonts.gstatic.com',
+          crossorigin: 'anonymous',
         },
         {
-          rel: "stylesheet",
-          href: "https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap",
+          rel: 'stylesheet',
+          href: 'https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap',
         },
 
         {
-          rel: "stylesheet",
-          href: "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css",
+          rel: 'stylesheet',
+          href: 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css',
         },
       ],
 
       script: [
         {
-          src: "https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js",
+          src: 'https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js',
           integrity:
-            "sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r",
-          crossorigin: "anonymous",
-          async: "true",
+            'sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r',
+          crossorigin: 'anonymous',
+          async: 'true',
         },
       ],
     },
@@ -132,67 +132,67 @@ export default defineNuxtConfig({
   image: {
     inject: true,
     quality: 75,
-    format: ["webp", "png"],
-    domains: ["https://smartnation.id"],
+    format: ['webp', 'png'],
+    domains: ['https://smartnation.id'],
   },
 
   // Nuxt.js Color Mode configuration
   colorMode: {
-    preference: "light", // default value of $colorMode.preference
-    fallback: "light", // fallback value if not system preference found
-    hid: "nuxt-color-mode-script",
-    globalName: "__NUXT_CCSN_COLOR_MODE__",
-    componentName: "ColorScheme",
-    classPrefix: "",
-    classSuffix: "-mode",
-    storageKey: "nuxt-ccsn-color-mode",
+    preference: 'light', // default value of $colorMode.preference
+    fallback: 'light', // fallback value if not system preference found
+    hid: 'nuxt-color-mode-script',
+    globalName: '__NUXT_CCSN_COLOR_MODE__',
+    componentName: 'ColorScheme',
+    classPrefix: '',
+    classSuffix: '-mode',
+    storageKey: 'nuxt-ccsn-color-mode',
   },
 
   pwa: {
-    registerType: "autoUpdate",
+    registerType: 'autoUpdate',
     manifest: {
-      name: "Smart Nation",
-      short_name: "Smart Nation",
+      name: 'Smart Nation',
+      short_name: 'Smart Nation',
       description:
-        "Citiasia Center for Smart Nation (CCSN) merupakan salah satu sayap strategis dari Citiasia Inc. dalam menyebarkan semangat membangun bangsa menuju Indonesia Smart Nation",
-      display: "standalone",
-      start_url: "/",
-      background_color: "#fff",
-      theme_color: "#fff",
+        'Citiasia Center for Smart Nation (CCSN) merupakan salah satu sayap strategis dari Citiasia Inc. dalam menyebarkan semangat membangun bangsa menuju Indonesia Smart Nation',
+      display: 'standalone',
+      start_url: '/',
+      background_color: '#fff',
+      theme_color: '#fff',
       icons: [
         {
-          src: "/logo-smartnation-id_64x64.png",
-          sizes: "64x64",
-          type: "image/png",
+          src: '/logo-smartnation-id_64x64.png',
+          sizes: '64x64',
+          type: 'image/png',
         },
         {
-          src: "/logo-smartnation-id_192x192.png",
-          sizes: "192x192",
-          type: "image/png",
+          src: '/logo-smartnation-id_192x192.png',
+          sizes: '192x192',
+          type: 'image/png',
         },
         {
-          src: "/logo-smartnation-id_512x512.png",
-          sizes: "512x512",
-          type: "image/png",
-          purpose: "any",
+          src: '/logo-smartnation-id_512x512.png',
+          sizes: '512x512',
+          type: 'image/png',
+          purpose: 'any',
         },
         {
-          src: "/logo-smartnation-id_512x512.png",
-          sizes: "512x512",
-          type: "image/png",
-          purpose: "maskable",
+          src: '/logo-smartnation-id_512x512.png',
+          sizes: '512x512',
+          type: 'image/png',
+          purpose: 'maskable',
         },
       ],
     },
     workbox: {
-      navigateFallback: "/",
-      globPatterns: ["**/*.{js,css,html,png,svg,ico}"],
+      navigateFallback: '/',
+      globPatterns: ['**/*.{js,css,html,png,svg,ico}'],
       runtimeCaching: [
         {
           urlPattern: /^https:\/\/fonts\.googleapis\.com\/.*/i,
-          handler: "CacheFirst",
+          handler: 'CacheFirst',
           options: {
-            cacheName: "google-fonts-cache",
+            cacheName: 'google-fonts-cache',
             expiration: {
               maxEntries: 10,
               maxAgeSeconds: 60 * 60 * 24 * 365, // <== 365 days
@@ -204,9 +204,9 @@ export default defineNuxtConfig({
         },
         {
           urlPattern: /^https:\/\/fonts\.gstatic\.com\/.*/i,
-          handler: "CacheFirst",
+          handler: 'CacheFirst',
           options: {
-            cacheName: "gstatic-fonts-cache",
+            cacheName: 'gstatic-fonts-cache',
             expiration: {
               maxEntries: 10,
               maxAgeSeconds: 60 * 60 * 24 * 365, // <== 365 days
@@ -228,17 +228,17 @@ export default defineNuxtConfig({
       enabled: true,
       suppressWarnings: true,
       navigateFallbackAllowlist: [/^\/$/],
-      type: "module",
+      type: 'module',
     },
   },
 
   robots: {
     /* module options */
     rules: [
-      { UserAgent: "*" },
-      { Disallow: "/" },
+      { UserAgent: '*' },
+      { Disallow: '/' },
       { BlankLine: true },
-      { Comment: "Comment here" },
+      { Comment: 'Comment here' },
       // Be aware that this will NOT work on target: 'static' mode
       { Sitemap: (req: any) => `https://${req.headers.host}/sitemap.xml` },
     ],
diff --git a/pages/about-us.vue b/pages/about-us.vue
index 6ed87bc..63e70d1 100644
--- a/pages/about-us.vue
+++ b/pages/about-us.vue
@@ -2,9 +2,9 @@
 import Swal from 'sweetalert2';
 // Set Meta SEO
 useSeoMeta({
-  title: "Tentang Kami",
-  ogTitle: "Tentang Kami",
-  description: "Citiasia Center for Smart Nation (CCSN)",
+  title: "Citiasia Center for Smart Nation (CCSN)",
+  ogTitle: "Citiasia Center for Smart Nation (CCSN)",
+  description: "Citiasia Center for Smart Nation (CCSN) merupakan salah satu sayap strategis dari Citiasia Inc. dalam menyebarkan semangat membangun bangsa menuju Indonesia Smart Nation",
 });
 
 const colorMode = useColorMode();
diff --git a/pages/articles/index.vue b/pages/articles/index.vue
index 41c907f..2ac33ca 100644
--- a/pages/articles/index.vue
+++ b/pages/articles/index.vue
@@ -4,9 +4,9 @@ import { posts } from '~/utils/data/getInitialPostsData';
 
 // Set Meta SEO
 useSeoMeta({
-  title: "Berita",
+  title: "Daftar Berita",
   description: "Citiasia Center for Smart Nation (CCSN) merupakan salah satu sayap strategis dari Citiasia Inc. dalam menyebarkan semangat membangun bangsa menuju Indonesia Smart Nation",
-  ogTitle: "Daftar berita dari semua kategori",
+  ogTitle: "Daftar Berita",
   ogDescription: "Citiasia Center for Smart Nation (CCSN) merupakan salah satu sayap strategis dari Citiasia Inc. dalam menyebarkan semangat membangun bangsa menuju Indonesia Smart Nation",
 });
 
@@ -58,7 +58,7 @@ useSeoMeta({
                 </div>
               </div>
             </article>
-            <article v-if="categories" v-for="category in categories" :key="category.id"
+            <article v-for="category in categories" :key="category.id"
               class="article-section position-relative mb-3 py-5">
               <div class="d-flex flex-wrap justify-content-between g-0">
                 <div>
@@ -116,9 +116,11 @@ useSeoMeta({
   /* 24px */
   text-align: start;
 }
+
 .text-decoration-underline {
   margin-bottom: 25px !important;
 }
+
 .line-break {
   position: relative;
   top: -5px;
diff --git a/pages/events/category/[id].vue b/pages/events/category/[id].vue
index a1014f5..5a60bb9 100644
--- a/pages/events/category/[id].vue
+++ b/pages/events/category/[id].vue
@@ -61,7 +61,7 @@ const handleClickButton = (values: any) => {
     categoryDescription.value = category.description
 
     useSeoMeta({
-      title: `Berita Kategori ${categoryTitle.value}`,
+      title: `Kumpulan Acara ${categoryTitle.value}`,
       description: categoryDescription.value,
     });
 
@@ -84,7 +84,7 @@ const popularEventsData = posts.filter(post => post.categories.find(category =>
   .slice(0, 10)
 
 useSeoMeta({
-  title: `Berita Kategori ${categoryTitle.value}`,
+  title: `Kumpulan Acara ${categoryTitle.value}`,
   description: categoryDescription.value,
 });