[O] Convert blog to setup script

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
     {

src/scripts/global.ts

@@ -0,0 +1,5 @@
+import {BlogMeta} from "@/scripts/models";
+
+export let globals = {
+  staticMeta: {tags: [], categories: [], posts: []} as BlogMeta,
+}

src/views/Blog.vue

@@ -15,51 +15,45 @@
     <Loading v-else></Loading>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-import {Options, Vue} from 'vue-class-component';
 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}})
+let meta: Ref<BlogMeta> = ref({tags: [], categories: [], posts: []})
-export default class Blog extends Vue
-{
-    @Prop() post?: string
-    @Prop() category?: string
-    @Prop() tag?: string
 
-    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
+const filteredPosts = computed(() => {
-    {
+    const posts = meta.value.posts.filter(it => it.pinned || (p.tag ? it.tags.includes(p.tag) :
-        fetch(`${hosts.content}/content/generated/metas.json`).then(it => it.json()).then(it => {
+        p.category ? it.category == p.category : true))
-            this.meta = it
-            staticMeta = it
-        })
-    }
 
-    get activePost(): BlogPost | null
+    // Put pinned posts on top
-    {
+    posts.sort((a, b) => (b.pinned ?? 0) - (a.pinned ?? 0))
-        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
-    }
 
-    get filteredPosts(): BlogPost[]
+    return posts
-    {
+})
-        const posts = this.meta.posts.filter(it => it.pinned || (this.tag ? it.tags.includes(this.tag) :
-            this.category ? it.category == this.category : true))
 
-        // Put pinned posts on top
+const activePost = computed(() => {
-        posts.sort((a, b) => (b.pinned ?? 0) - (a.pinned ?? 0))
+    const posts = filteredPosts.value
-
+    if (posts.length == 0) return null
-        return posts
+    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>

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"