Perbaikan Halaman Galeri

components/gallery/GalleryCardAlbum.vue

@@ -1,22 +1,22 @@
 <script lang="ts" setup>
-const props = defineProps({ title: { type: String }, created: { type: String }, albumImage: { type: String }, total: { type: Number }, redirect: { type: String } })
+defineProps({ title: { type: String }, created: { type: String }, albumImage: { type: String }, total: { type: Number }, redirect: { type: String } })
 
 
 </script>
 
 <template>
   <div class="card album-card">
-    <NuxtLink :to="redirect" aria-label="Lihat Selengkapnya" title="Lihat Selengkapnya">
+    <NuxtLink :to="`/gallery/${redirect}`" aria-label="Lihat Selengkapnya" :title="`Album ${title}`">
       <NuxtImg class="card-img-top img-fluid album-cover__images" :src="albumImage" alt="Album 1" loading="lazy"
         format="webp" />
     </NuxtLink>
 
 
     <div class="card-body">
       <div class="d-flex flex-column justify-content-start align-self-stretch">
-        <NuxtLink class="album-cover__title" :to="'/gallery/album-isna-2016'" aria-label="Lihat Selengkapnya"
+        <NuxtLink class="album-cover__title" :to="`/gallery/${redirect}`" aria-label="Lihat Selengkapnya"
           title="Lihat Selengkapnya">
-          {{ title }}
+          {{ `Album ${title}` }}
         </NuxtLink>
 
         <h5 class="card-subtitle album-cover__subtitle ">

components/navbar/NavbarFixed.vue

@@ -204,8 +204,8 @@ const routePathMenu: globalThis.ComputedRef<string | string[]> = computed(() =>
 
 
           <li class="nav-item">
-            <NuxtLink @click="toggleMenu()" :class="`nav-link mx-md-1  ${route.path === '/gallery-smartnation' ? 'active' : ''
-              }`" to="/gallery-smartnation">Galeri
+            <NuxtLink @click="toggleMenu()" :class="`nav-link mx-md-1  ${route.path === '/gallery' || route.path === `/gallery/${route.params.id}` ? 'active' : ''
+              }`" to="/gallery">Galeri
             </NuxtLink>
           </li>
           <li class="nav-item">

components/navbar/NavbarSticky.vue

@@ -229,8 +229,8 @@ const routePathMenu: globalThis.ComputedRef<string | string[]> = computed(() =>
           </li>
 
           <li class="nav-item">
-            <NuxtLink @click="toggleMenu" :class="`nav-link mx-md-1  ${route.path === '/gallery-smartnation' ? 'active' : ''
-              }`" to="/gallery-smartnation">Galeri
+            <NuxtLink @click="toggleMenu" :class="`nav-link mx-md-1  ${route.path === '/gallery' ? 'active' : ''
+              }`" to="/gallery">Galeri
             </NuxtLink>
           </li>
           <li class="nav-item">

pages/[id].vue

@@ -1,14 +1,12 @@
-<script setup>
-
-definePageMeta({ layout: "content-layout" })
+<script setup lang="ts">
 
+import { ColorModeInstance } from "@nuxtjs/color-mode/dist/runtime/types";
 import { posts } from "~/utils/data/getInitialPostsData"
 
+definePageMeta({ layout: "content-layout" })
 
 const route = useRoute();
-
 const postId = String(route.params.id)
-
 const post = posts.find(post => post.slug === postId)
 
 if (!post) {
@@ -23,11 +21,11 @@ useSeoMeta({
   title: post.title.rendered,
   description: post.excerpt.rendered,
   author: 'Smart Nation',
-  articleAuthor: 'Smart Nation',
-  articlePublishedTime: useFormatter(post.date_gmt),
-  articleModifiedTime: useFormatter(post.date_gmt),
-  articleSection: 'Smart City',
-  articleTag: post.categories,
+  // articleAuthor: 'Smart Nation',
+  // articlePublishedTime: useFormatter(post.date_gmt),
+  // articleModifiedTime: useFormatter(post.date_gmt),
+  // articleSection: 'Smart City',
+  // articleTag: post.categories,
   ogType: 'article',
   ogTitle: post.title.rendered,
   ogDescription: post.excerpt.rendered,
@@ -38,6 +36,9 @@ useSeoMeta({
   ogImageUrl: `https://smartnation.vercel.app/${post.featured_media}`,
 })
 
+
+const colorMode: ColorModeInstance = useColorMode()
+
 </script>
 
 <template>
@@ -69,6 +70,8 @@ useSeoMeta({
       </div>
     </section>
     <!-- section berita detail end -->
+
+    <hr v-if="colorMode.preference === 'dark'" class="text-secondary" />
   </main>
 </template>
 

pages/about-us.vue

@@ -208,7 +208,7 @@ const { data: clients } = await useFetch('/api/client')
       </div>
     </section>
     <!-- section portofolio end -->
-    <hr v-show="colorMode.preference === 'dark'" />
+    <hr v-if="colorMode.preference === 'dark'" class="text-secondary" />
   </main>
 </template>
 

pages/category/[id].vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { ColorModeInstance } from "@nuxtjs/color-mode/dist/runtime/types";
 import { categories } from "~/utils/data/getInitialCategoryPostData";
 import { posts } from "~/utils/data/getInitialPostsData"
 
@@ -27,6 +28,8 @@ useSeoMeta({
 });
 
 
+const colorMode: ColorModeInstance = useColorMode()
+
 </script>
 
 <template>
@@ -91,6 +94,8 @@ useSeoMeta({
       </div>
     </section>
     <!-- Section berita end -->
+
+    <hr v-if="colorMode.preference === 'dark'" class="text-secondary" />
   </main>
 </template>
 
@@ -106,9 +111,11 @@ useSeoMeta({
   /* 28.8px */
   /* 24px */
 }
+
 .text-decoration-underline {
   margin-bottom: 25px !important;
 }
+
 .line-break {
   position: relative;
   top: -5px;

pages/contact-us.vue

@@ -32,7 +32,7 @@ const colorMode = useColorMode();
     </section>
     <!-- section kontak end -->
 
-    <hr v-show="colorMode.preference === 'dark'" />
+    <hr v-if="colorMode.preference === 'dark'" class="text-secondary" />
   </main>
 </template>
 

pages/events/[id].vue

@@ -1,6 +1,7 @@
-<script setup>
+<script setup lang="ts">
 
 definePageMeta({ layout: "content-layout" })
+import { ColorModeInstance } from "@nuxtjs/color-mode/dist/runtime/types";
 import { posts } from "~/utils/data/getInitialPostsData"
 
 const route = useRoute();
@@ -20,11 +21,11 @@ useSeoMeta({
   title: post.title.rendered,
   description: post.excerpt.rendered,
   author: 'Smart Nation',
-  articleAuthor: 'Smart Nation',
-  articlePublishedTime: useFormatter(post.date_gmt),
-  articleModifiedTime: useFormatter(post.date_gmt),
-  articleSection: 'Smart City',
-  articleTag: post.categories,
+  // articleAuthor: 'Smart Nation',
+  // articlePublishedTime: useFormatter(post.date_gmt),
+  // articleModifiedTime: useFormatter(post.date_gmt),
+  // articleSection: 'Smart City',
+  // articleTag: post.categories,
   ogType: 'article',
   ogTitle: post.title.rendered,
   ogDescription: post.excerpt.rendered,
@@ -40,6 +41,8 @@ const postsCategories = posts.filter(post => post.categories.find(category => ca
   .sort((a, b) => b.date_gmt.toString().localeCompare(a.date_gmt.toString()))
   ?.slice(0, 5)
 
+const colorMode: ColorModeInstance = useColorMode()
+
 </script>
 
 <template>
@@ -70,6 +73,9 @@ const postsCategories = posts.filter(post => post.categories.find(category => ca
       </div>
     </section>
     <!-- section berita detail end -->
+
+
+    <hr v-if="colorMode.preference === 'dark'" class="text-secondary" />
   </main>
 </template>
 

pages/events/category/[id].vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { ColorModeInstance } from "@nuxtjs/color-mode/dist/runtime/types";
 import { categories } from "~/utils/data/getInitialCategoryPostData";
 import { posts } from "~/utils/data/getInitialPostsData";
 
@@ -56,6 +57,7 @@ const isnaYearsData = ref([
 
 const isnaValues: globalThis.Ref<string | undefined> = ref('')
 
+const colorMode: ColorModeInstance = useColorMode()
 useSeoMeta({
   title: `Berita Kategori ${categoryTitle?.value}`,
   description: `Kumpulan Acara ISNA dari beberapa Kategori`,
@@ -198,6 +200,8 @@ useSeoMeta({
       </div>
     </section>
     <!-- Section berita end -->
+
+    <hr v-if="colorMode.preference === 'dark'" class="text-secondary" />
   </main>
 </template>