Removed dynamic links + added tags page. (#10)

Because of dynamic links our website was being hammered with bots as there were so many pages to crawl. Removed the dynamic ones and just replaced with static links.
geektao1024 · Nov 6, 2024 · aa5da25 · aa5da25
1 parent cbf72d0
commit aa5da25
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 12 deletions.
diff --git a/i18n.config.ts b/i18n.config.ts
@@ -31,6 +31,7 @@ export default defineI18nConfig(() => ({
         suggestIdea: 'Suggest an Idea',
         free: 'ColorMagic is now 100% free',
         explore: 'Explore',
+        exploreTags: 'Explore Tags',
         imageColorPicker: 'Image Color Picker',
         tools: 'Tools',
         website: 'Website',
@@ -72,6 +73,11 @@ export default defineI18nConfig(() => ({
         season: 'Season',
         byTag: 'Explore palettes by tag'
       },
+      exploreTags: {
+        title: 'Explore Tags',
+        seoTitle: 'Explore Tags - ColorMagic',
+        seoDescription: 'Explore color palettes by tag.',
+      },
       imageColorPicker: {
         title: 'Image Color Picker',
         seoTitle: 'Image Color Picker - ColorMagic',
@@ -140,6 +146,7 @@ export default defineI18nConfig(() => ({
         suggestIdea: 'アイデアを提案',
         free: 'ColorMagicが今なら完全無料です！詳しくはこちら',
         explore: '探検する',
+        exploreTags: 'タグを調べる',
         imageColorPicker: '画像カラーピッカー',
         tools: 'ツール',
         website: 'Webサイト',
@@ -181,6 +188,11 @@ export default defineI18nConfig(() => ({
         season: '季節',
         byTag: 'タグ別にパレットを探索する'
       },
+      exploreTags: {
+        title: 'タグを探索',
+        seoTitle: 'タグを探索 - ColorMagic',
+        seoDescription: 'タグ別にカラーパレットを探索します。'
+      },
       imageColorPicker: {
         title: '画像カラーピッカー',
         seoTitle: '画像カラーピッカー - ColorMagic',
@@ -249,6 +261,7 @@ export default defineI18nConfig(() => ({
         suggestIdea: 'Suggerisci un\'idea',
         free: 'ColorMagic è ora completamente gratuito! Leggi di più qui',
         explore: 'Esplorare',
+        exploreTags: 'Esplora i tag',
         imageColorPicker: 'Selettore colore immagine',
         tools: 'Utensili',
         website: 'Sito web',
@@ -290,6 +303,11 @@ export default defineI18nConfig(() => ({
         season: 'Stagione',
         byTag: 'Esplora le tavolozze per tag'
       },
+      exploreTags: {
+        title: 'Esplora Tag',
+        seoTitle: 'Esplora Tag - ColorMagic',
+        seoDescription: 'Esplora palette di colori per tag.'
+      },
       imageColorPicker: {
         title: 'Selettore colore immagine',
         seoTitle: 'Selettore colore immagine - ColorMagic',

diff --git a/layers/common/components/CommonFooter.vue b/layers/common/components/CommonFooter.vue
@@ -142,6 +142,10 @@ const websiteLinks = computed(() => [
     label: t('nav.explore'),
     to: localePath('/palette/explore')
   },
+  {
+    label: t('nav.exploreTags'),
+    to: localePath('/palette/explore/tags')
+  },
   {
     label: t('nav.liked'),
     to: localePath('/palette/liked')

diff --git a/layers/palette/pages/palette/explore/[tag].vue b/layers/palette/pages/palette/explore/[tag].vue
@@ -86,17 +86,6 @@
         />
       </div>
     </div>
-
-    <!-- tag links -->
-    <p class="font-semibold mt-8 mb-4">
-      {{ $t('explore.byTag') }}
-    </p>
-    <div class="space-y-4">
-      <PaletteTagLinks :links="paletteFilterOptions.color.value" />
-      <PaletteTagLinks :links="paletteFilterOptions.style.value" />
-      <PaletteTagLinks :links="paletteFilterOptions.tone.value" />
-      <PaletteTagLinks :links="paletteFilterOptions.season.value" />
-    </div>
   </div>
 </template>
 
@@ -144,7 +133,6 @@ if (filters.length === 0) {
   throw createError({ statusCode: 404, statusMessage: 'Tag not found.' });
 }
 
-
 const title = computed(() => `${filters.map(v => v.label[getLocale(locale.value)]).join(' ')} ${t('explore.colorPalettes')}`);
 const seoTitle = computed(() => `${title.value} - ColorMagic`);
 const seoDescription = computed(() => `${title.value} ${t('explore.seoDescription')}`);

diff --git a/layers/palette/pages/palette/explore/tags.vue b/layers/palette/pages/palette/explore/tags.vue
@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <!-- header-->
+    <div class="mb-8">
+      <!-- title -->
+      <h1>
+        {{ $t('exploreTags.title') }}
+      </h1>
+
+      <!-- description-->
+      <p class="text-xl font-medium mb-4 max-w-xl">
+        {{ $t('exploreTags.seoDescription') }}
+      </p>
+    </div>
+
+    <!-- tag links -->
+    <div class="space-y-4">
+      <PaletteTagLinks :links="paletteFilterOptions.color.value" />
+      <PaletteTagLinks :links="paletteFilterOptions.style.value" />
+      <PaletteTagLinks :links="paletteFilterOptions.tone.value" />
+      <PaletteTagLinks :links="paletteFilterOptions.season.value" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const { t } = useI18n();
+
+const paletteFilterOptions = usePaletteFilterOptions([]);
+
+useSeoMeta({
+  title: t('exploreTags.seoTitle'),
+  description: t('exploreTags.seoDescription'),
+  ogTitle: t('exploreTags.seoTitle'),
+  ogDescription: t('exploreTags.seoDescription'),
+  ogImageUrl: `${useRuntimeConfig().public.siteUrl}/img/og.png`
+});
+</script>