add search function, refactor

Author: mkofdwu

package-lock.json

@@ -21,6 +21,7 @@
     "markdown-it": "^13.0.2",
     "markdown-it-anchor": "^9.0.1",
     "markdown-it-named-code-blocks": "^0.2.0",
+    "minisearch": "^7.1.0",
     "pinia": "^2.1.6",
     "vue": "^3.3.4",
     "vue-router": "^4.2.5"

package.json

@@ -5,5 +5,3 @@ import { RouterView } from 'vue-router'
 <template>
   <router-view />
 </template>
-
-<style scoped></style>

src/App.vue

@@ -48,6 +48,11 @@ body {
   background: #1e1e1e;
 }
 
+input {
+  background: none;
+  outline: none;
+}
+
 .dotted-line-vert {
   width: 1.5px;
   background-image: linear-gradient(to bottom, #525252 33%, rgba(82, 82, 82, 0) 0%);
@@ -62,6 +67,7 @@ body {
 
 .fade-enter-active,
 .fade-leave-active {
+  transition: opacity 300ms;
   opacity: 1;
 }
 

src/assets/main.css

@@ -1,24 +1,11 @@
 <script setup lang="ts">
-import type { ChalInfo } from '@/types/ChalInfo'
+import type { ChalInfo, ChalCat } from '@/types/ChalInfo'
 import MaterialIcon from './MaterialIcon.vue'
 import MarkdownIt from 'markdown-it'
+import { catIcons } from '@/data/catIcons'
 
 const { info } = defineProps<{ info: ChalInfo }>()
 
-const catIcons: { [cat: string]: string } = {
-  web: 'language',
-  pwn: 'bug_report',
-  rev: 'keyboard_double_arrow_left',
-  misc: 'help',
-  forensics: 'quick_reference_all',
-  crypto: 'key',
-  mobile: 'phone_android',
-  cloud: 'cloud',
-  osint: 'visibility',
-  blockchain: 'currency_bitcoin',
-  hardware: 'memory'
-}
-
 const mdIt = new MarkdownIt()
 const descriptionRendered = mdIt.render(info.description)
 
@@ -31,7 +18,7 @@ function downloadAll() {
 
 <template>
   <div class="w-full flex flex-col items-start">
-    <span class="text-2xl opacity-40 mb-1">{{ info.datePosted }}</span>
+    <span class="text-xl opacity-40 mb-1">{{ info.datePosted }}</span>
     <h1 class="mb-7">{{ info.title }}</h1>
     <div class="markdown mb-7 flex flex-col gap-y-3" v-html="descriptionRendered"></div>
     <div class="flex flex-wrap gap-3">
@@ -40,7 +27,7 @@ function downloadAll() {
         :key="i"
         class="h-9 bg-white rounded-full flex items-center"
       >
-        <material-icon sm :name="catIcons[cat]!" class="ml-3 mr-2 text-black" />
+        <material-icon sm :name="catIcons[cat as ChalCat]!" class="ml-3 mr-2 text-black" />
         <span class="mr-4 text-black font-semibold">{{ cat }}</span>
       </div>
       <div class="h-9 bg-almost-black rounded-full px-5 flex items-center">

src/components/ChalInfoCard.vue

@@ -5,11 +5,13 @@ import MenuButton from './MenuButton.vue'
 import WriteupsList from './WriteupsList.vue'
 import MaterialIcon from './MaterialIcon.vue'
 import GithubIcon from './icons/GithubIcon.vue'
+import { useSearchModalStore } from '@/stores/searchModal'
 
 let prevScrollOffset: number
 
 const opened = ref(false)
 const showTopBar = ref(true)
+const searchModal = useSearchModalStore()
 
 watch(useRoute(), () => {
   opened.value = false
@@ -44,9 +46,12 @@ nextTick(() => {
       />
       <span class="text-xl font-semibold">Jia Jie's writeups</span>
       <div class="flex-1"></div>
-      <!-- <button class="w-10 h-10 rounded-full grid place-items-center">
-        <material-icon name="search" />
-      </button> -->
+      <button
+        class="group w-10 h-10 rounded-full grid place-items-center"
+        @click="searchModal.open()"
+      >
+        <material-icon name="search" class="transition-colors group-hover:text-primary" />
+      </button>
       <a
         href="https://github.com/mkofdwu/ctf-writeups"
         target="_blank"

src/components/WriteupsTopBar.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import MaterialIcon from '../MaterialIcon.vue'
+import { catIcons } from '@/data/catIcons'
+import type { ChalCat } from '@/types/ChalInfo'
+
+defineProps<{ selectedCats: ChalCat[] }>()
+defineEmits(['toggleSelectCat'])
+</script>
+
+<template>
+  <div class="px-6 pt-5">
+    <span class="block opacity-60 mb-4">Filter by category</span>
+    <div class="flex flex-wrap gap-3">
+      <button
+        v-for="[cat, icon] in Object.entries(catIcons)"
+        :key="cat"
+        class="h-9 border transition-colors rounded-full flex items-center pl-3 pr-4"
+        :class="
+          selectedCats.includes(cat as ChalCat)
+            ? 'bg-primary border-primary text-black'
+            : 'border-[#525252]'
+        "
+        @click="$emit('toggleSelectCat', cat as ChalCat)"
+      >
+        <material-icon
+          sm
+          :name="icon"
+          class="transition-colors mr-3"
+          :class="selectedCats.includes(cat as ChalCat) ? 'text-black' : ''"
+        />
+        {{ cat }}
+      </button>
+    </div>
+  </div>
+</template>

src/components/modals/FilterByCat.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { sidebarList } from '@/data/sidebarList'
+
+defineProps<{ selectedCtfs: string[] }>()
+defineEmits(['toggleSelectCtf'])
+</script>
+
+<template>
+  <div class="px-6 pt-5 pb-6">
+    <span class="block opacity-60 mb-4">Filter by CTF</span>
+    <div class="flex flex-wrap gap-3">
+      <button
+        v-for="{ name } in sidebarList"
+        :key="name"
+        class="h-9 border transition-colors rounded-full flex items-center px-4"
+        :class="
+          selectedCtfs.includes(name) ? 'bg-primary border-primary text-black' : 'border-[#525252]'
+        "
+        @click="$emit('toggleSelectCtf', name)"
+      >
+        {{ name }}
+      </button>
+    </div>
+  </div>
+</template>