From 747d725c433d71fb409e55f31d42c058e1ee9fa2 Mon Sep 17 00:00:00 2001
From: Azalea Gui <me@hydev.org>
Date: Thu, 9 Mar 2023 15:37:09 -0500
Subject: [PATCH] [O] Convert blog to setup script

---
 src/components/BlogIndex.vue |  4 +--
 src/scripts/global.ts        |  5 +++
 src/views/Blog.vue           | 66 ++++++++++++++++--------------------
 src/views/Others.vue         | 10 ------
 4 files changed, 37 insertions(+), 48 deletions(-)
 create mode 100644 src/scripts/global.ts

diff --git a/src/components/BlogIndex.vue b/src/components/BlogIndex.vue
index 3637cc8..7cc7efa 100644
--- a/src/components/BlogIndex.vue
+++ b/src/components/BlogIndex.vue
@@ -11,18 +11,18 @@
 
 <script lang="ts">
 import {Options, Vue} from 'vue-class-component';
-import {staticMeta} from '@/views/Blog.vue'
 import Tag from "@/components/Tag.vue";
 import {Prop} from "vue-property-decorator";
 import {pushQuery} from "@/scripts/router";
 import {BlogMeta} from "@/scripts/models";
+import {globals} from "@/scripts/global";
 
 @Options({components: {Tag}})
 export default class BlogIndexLinks extends Vue
 {
     @Prop({default: 'tags'}) mode: 'tags' | 'categories' = 'tags'
 
-    meta: BlogMeta = staticMeta
+    meta: BlogMeta = globals.staticMeta
 
     clickCat(e: MouseEvent, cat: [string, number]): void
     {
diff --git a/src/scripts/global.ts b/src/scripts/global.ts
new file mode 100644
index 0000000..72058b2
--- /dev/null
+++ b/src/scripts/global.ts
@@ -0,0 +1,5 @@
+import {BlogMeta} from "@/scripts/models";
+
+export let globals = {
+  staticMeta: {tags: [], categories: [], posts: []} as BlogMeta,
+}
diff --git a/src/views/Blog.vue b/src/views/Blog.vue
index f2ba01c..d7c4e07 100644
--- a/src/views/Blog.vue
+++ b/src/views/Blog.vue
@@ -15,51 +15,45 @@
     <Loading v-else></Loading>
 </template>
 
-<script lang="ts">
-import {Options, Vue} from 'vue-class-component';
+<script setup lang="ts">
 import BlogPostPreview from "@/components/BlogPost.vue";
-import {hosts} from "@/scripts/constants";
-import {Prop} from "vue-property-decorator";
 import Loading from "@/components/Loading.vue";
-import {BlogMeta, BlogPost} from "@/scripts/models";
+import {BlogMeta} from "@/scripts/models";
+import {Ref, ref, computed, onMounted} from "vue";
+import {hosts} from "@/scripts/constants";
+import {globals} from "@/scripts/global";
 
-export let staticMeta: BlogMeta = {tags: [], categories: [], posts: []}
+const p = defineProps<{
+    post?: string,
+    category?: string,
+    tag?: string
+}>()
 
-@Options({components: {Loading, BlogPostPreview}})
-export default class Blog extends Vue
-{
-    @Prop() post?: string
-    @Prop() category?: string
-    @Prop() tag?: string
+let meta: Ref<BlogMeta> = ref({tags: [], categories: [], posts: []})
 
-    meta: BlogMeta = {tags: [], categories: [], posts: []}
+onMounted(() => {
+    fetch(`${hosts.content}/content/generated/metas.json`).then(it => it.json()).then(it => {
+        meta.value = it
+        globals.staticMeta = it
+    })
+})
 
-    mounted(): void
-    {
-        fetch(`${hosts.content}/content/generated/metas.json`).then(it => it.json()).then(it => {
-            this.meta = it
-            staticMeta = it
-        })
-    }
+const filteredPosts = computed(() => {
+    const posts = meta.value.posts.filter(it => it.pinned || (p.tag ? it.tags.includes(p.tag) :
+        p.category ? it.category == p.category : true))
 
-    get activePost(): BlogPost | null
-    {
-        const p = this.filteredPosts
-        if (p.length == 0) return null
-        return this.post ? p.filter(it => it.url_name == this.post)[0] : p[0].pinned ? p[0] : null
-    }
+    // Put pinned posts on top
+    posts.sort((a, b) => (b.pinned ?? 0) - (a.pinned ?? 0))
 
-    get filteredPosts(): BlogPost[]
-    {
-        const posts = this.meta.posts.filter(it => it.pinned || (this.tag ? it.tags.includes(this.tag) :
-            this.category ? it.category == this.category : true))
+    return posts
+})
 
-        // Put pinned posts on top
-        posts.sort((a, b) => (b.pinned ?? 0) - (a.pinned ?? 0))
-
-        return posts
-    }
-}
+const activePost = computed(() => {
+    const posts = filteredPosts.value
+    if (posts.length == 0) return null
+    if (!p.post) return null
+    return p.post ? posts.filter(it => it.url_name == p.post)[0] : posts[0].pinned ? posts[0] : null
+})
 </script>
 
 <style lang="sass" scoped>
diff --git a/src/views/Others.vue b/src/views/Others.vue
index 27f96cd..81c45e4 100644
--- a/src/views/Others.vue
+++ b/src/views/Others.vue
@@ -13,16 +13,6 @@
     </div>
 </template>
 
-<script lang="ts">
-import {Options, Vue} from 'vue-class-component';
-
-@Options({})
-export default class Others extends Vue
-{
-
-}
-</script>
-
 <style lang="sass" scoped>
 @import "src/css/global"
 @import "src/css/colors"