Addition of hunt info (#518)

components/Home/LearnAboutArchway.vue

@@ -1,7 +1,7 @@
 <script lang="tsx" setup>
   import { Link, ArchwayLogo } from '@/components/Ui';
   import { useAboutArchwayArticles } from '@/data/useAboutArchwayArticles';
-  import { CardIcon, CogIcon, DictionaryIcon, GlobeIcon, HeartIcon, ListIcon, PeopleIcon, QuestionIcon } from '@/components/Ui';
+  import { CardIcon, CogIcon, DictionaryIcon, GlobeIcon, HeartIcon, ListIcon, PeopleIcon, QuestionIcon, ScavengerHuntIcon } from '@/components/Ui';
 
   const { articles } = await useAboutArchwayArticles();
 
@@ -25,6 +25,8 @@
         return PeopleIcon;
       case 'QuestionIcon':
         return QuestionIcon;
+      case 'ScavengerHuntIcon':
+        return ScavengerHuntIcon;
       default:
         return ArchwayLogo;
     }

components/Ui/Icons/ScavengerHuntIcon.vue

@@ -0,0 +1,25 @@
+<template>
+  <svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="48.000000pt" height="48.000000pt" viewBox="0 0 48.000000 48.000000"
+ preserveAspectRatio="xMidYMid meet" fill="none">
+
+<g transform="translate(0.000000,48.000000) scale(0.100000,-0.100000)"
+fill="currentColor" stroke="none">
+<path d="M87 423 l-77 -45 0 -174 c0 -145 3 -176 15 -180 8 -3 43 10 77 29
+l62 35 76 -38 76 -38 77 44 77 45 0 175 c0 143 -3 176 -14 180 -8 3 -43 -10
+-77 -29 l-63 -35 -75 38 -76 38 -78 -45z m153 -28 l69 -35 3 -155 c2 -85 2
+-155 0 -155 -1 0 -34 16 -72 35 l-69 35 -3 155 c-2 85 -2 155 0 155 1 0 34
+-16 72 -35z m190 -129 l0 -154 -36 -21 c-20 -12 -38 -20 -40 -19 -2 2 -4 70
+-5 152 l-1 148 38 24 c22 13 40 24 42 24 1 0 2 -69 2 -154z m-301 -9 l0 -154
+-40 -22 c-31 -18 -39 -19 -39 -8 0 8 7 17 15 21 19 7 19 26 0 26 -13 0 -15 21
+-15 125 l0 125 38 19 c20 11 38 20 39 21 1 0 2 -69 2 -153z"/>
+<path d="M235 281 c3 -11 1 -22 -5 -26 -5 -3 -10 -13 -10 -22 0 -14 2 -14 19
+1 17 15 19 15 25 1 3 -9 11 -13 16 -10 8 5 7 12 -2 22 -10 12 -9 17 5 25 10 5
+15 14 11 19 -4 6 -10 6 -19 -1 -9 -8 -15 -8 -20 0 -11 18 -27 11 -20 -9z"/>
+<path d="M185 270 c-4 -6 -3 -16 3 -22 6 -6 12 -6 17 2 4 6 3 16 -3 22 -6 6
+-12 6 -17 -2z"/>
+<path d="M90 215 c-6 -8 -9 -18 -6 -24 3 -5 -1 -11 -9 -15 -18 -7 -21 -50 -2
+-44 6 3 13 14 15 26 2 11 10 26 18 32 15 14 19 40 5 40 -5 0 -14 -7 -21 -15z"/>
+</g>
+</svg>
+</template>

components/Ui/index.ts

@@ -42,6 +42,7 @@ export { default as MenuCollapseIcon } from './Icons/MenuCollapseIcon.vue';
 export { default as MenuIcon } from './Icons/MenuIcon.vue';
 export { default as PeopleIcon } from './Icons/PeopleIcon.vue';
 export { default as QuestionIcon } from './Icons/QuestionIcon.vue';
+export { default as ScavengerHuntIcon } from './Icons/ScavengerHuntIcon.vue';
 export { default as SearchIcon } from './Icons/SearchIcon.vue';
 export { default as StarIcon } from './Icons/StarIcon.vue';
 export { default as WarningIcon } from './Icons/WarningIcon.vue';

data/useAboutArchwayArticles.ts

@@ -12,7 +12,18 @@ export const useAboutArchwayArticles = async (): Promise<{
   );
 
   const articles = computed(() => {
-    return (data.value || []).map(item => Article.make(item));
+    const fetchedArticles = (data.value || []).map(item => Article.make(item));
+
+    // Scavenger hunt article information
+    const newArticle = Article.make({
+      id: 'scavenger-hunt',
+      title: 'Scavenger Hunt',
+      description: 'Congratulations on finding the third clue! Keyword #3 is “DEVELOPER REWARDS”. Click on this module to go to the fourth clue’s location!',
+      path: '/path-to-manual-article',
+      logo: 'ScavengerHuntIcon',
+    });
+
+    return [...fetchedArticles, newArticle];
   });
 
   return { articles, isLoading: computed(() => pending.value) };