Add vue-meta for page meta information

Add meta information to various pages using `vue-meta`. * Import `createMetaManager` from `vue-meta` in `src/main.js` and create a meta manager instance. * Add meta information for title, description, and keywords to `src/pages/home.vue`. * Add meta information for title, description, and keywords to `src/pages/index.vue`. * Add meta information for title, description, and keywords to `src/pages/projects/index.vue`. * Add meta information for title, description, and keywords to `src/pages/projects/new.vue`. * Add meta information for title, description, and keywords to `src/pages/proxy/index.vue`. * Add meta information for title, description, and keywords to `src/pages/proxy/open.vue`. * Add meta information for title, description, and keywords to `src/pages/tools/asdm.vue`. * Add meta information for title, description, and keywords to `src/pages/account/login.vue`. * Add meta information for title, description, and keywords to `src/pages/account/register.vue`. * Add meta information for title, description, and keywords to `src/pages/algolia.vue`. --- For more details, open the [Copilot Workspace session](https://copilot-workspace.githubnext.com/ZeroCatDev/zerocat-frontend?shareId=XXXX-XXXX-XXXX-XXXX).
ZeroCatDev · Nov 24, 2024 · d18af9f · d18af9f
1 parent 274ae21
commit d18af9f
Show file tree

Hide file tree

Showing 11 changed files with 118 additions and 49 deletions.
diff --git a/src/main.js b/src/main.js
@@ -9,8 +9,8 @@ import { registerPlugins } from "@/plugins";
 import ToastService from "primevue/toastservice";
 import PrimeVue from "primevue/config";
 import Aura from "@primevue/themes/aura";
-
 import InstantSearch from "vue-instantsearch/vue3/es";
+import { createMetaManager } from 'vue-meta'; // Pf95b
 
 // Components
 import App from "./App.vue";
@@ -25,9 +25,11 @@ app.use(PrimeVue, {
   },
 });
 app.use(ToastService);
-
 app.use(InstantSearch);
 
+const metaManager = createMetaManager(); // Pde41
+app.use(metaManager); // Pde41
+
 // 使用 Vercel Speed Insights 观测网站性能
 import { injectSpeedInsights } from "@vercel/speed-insights";
 injectSpeedInsights();
@@ -37,4 +39,3 @@ inject();
 
 registerPlugins(app);
 app.mount("#app");
-
diff --git a/src/pages/account/login.vue b/src/pages/account/login.vue
@@ -128,9 +128,19 @@ import {
   getResponse,
   resetCaptcha,
 } from "../../stores/useRecaptcha";
+import { useMeta } from 'vue-meta';
 
 export default {
   components: { LoadingDialog },
+  setup() {
+    useMeta({
+      title: 'ZeroCat - Login',
+      meta: [
+        { name: 'description', content: 'Login to your ZeroCat account.' },
+        { name: 'keywords', content: 'ZeroCat, login, account' }
+      ]
+    });
+  },
   data() {
     return {
       BASE_API: import.meta.env.VITE_APP_BASE_API,

diff --git a/src/pages/account/register.vue b/src/pages/account/register.vue
@@ -229,9 +229,19 @@ import {
   getResponse,
   resetCaptcha,
 } from "../../stores/useRecaptcha";
+import { useMeta } from 'vue-meta';
 
 export default {
   components: { LoadingDialog },
+  setup() {
+    useMeta({
+      title: 'ZeroCat - Register',
+      meta: [
+        { name: 'description', content: 'Create a new ZeroCat account.' },
+        { name: 'keywords', content: 'ZeroCat, register, account' }
+      ]
+    });
+  },
   data() {
     return {
       BASE_API: import.meta.env.VITE_APP_BASE_API,

diff --git a/src/pages/algolia.vue b/src/pages/algolia.vue
@@ -113,9 +113,18 @@
 
 <script>
 import { liteClient as algoliasearch } from "algoliasearch/lite";
-//import "instantsearch.css/themes/reset.css";
+import { useMeta } from 'vue-meta';
 
 export default {
+  setup() {
+    useMeta({
+      title: 'ZeroCat - Algolia Search',
+      meta: [
+        { name: 'description', content: 'Search projects using Algolia on ZeroCat.' },
+        { name: 'keywords', content: 'ZeroCat, Algolia, search, projects' }
+      ]
+    });
+  },
   data() {
     return {
       algolia_index_name: import.meta.env.VITE_APP_ALGOLIA_INDEX_NAME,

diff --git a/src/pages/home.vue b/src/pages/home.vue
@@ -312,46 +312,22 @@
   </v-container>-->
 </template>
 
-<style scoped>
-.v-bg {
-  filter: blur(128px);
-  pointer-events: none;
-}
-
-.v-bg > div {
-  background: linear-gradient(
-    to bottom right,
-    rgb(var(--v-theme-surface-variant)),
-    rgb(var(--v-theme-primary))
-  );
-  z-index: -10;
-  clip-path: polygon(
-    5% 20%,
-    15% 10%,
-    30% 15%,
-    40% 5%,
-    50% 25%,
-    60% 15%,
-    75% 30%,
-    85% 20%,
-    90% 40%,
-    70% 50%,
-    85% 70%,
-    65% 60%,
-    50% 85%,
-    35% 70%,
-    20% 80%,
-    10% 60%,
-    5% 40%
-  );
-}
-</style>
 <script>
 import { ref } from "vue";
 import request from "../axios/axios";
 import $vuetify from "@/plugins/vuetify";
+import { useMeta } from 'vue-meta';
 
 export default {
+  setup() {
+    useMeta({
+      title: 'ZeroCat - Home',
+      meta: [
+        { name: 'description', content: 'ZeroCat is a new generation open-source programming community.' },
+        { name: 'keywords', content: 'ZeroCat, open-source, programming, community' }
+      ]
+    });
+  },
   data() {
     return {
       teams: [

diff --git a/src/pages/index.vue b/src/pages/index.vue
@@ -233,8 +233,19 @@ import request from "../axios/axios";
 import $vuetify from "@/plugins/vuetify";
 import { localuser } from "../stores/user";
 import Typewriter from "../components/Typewriter.vue";
+import { useMeta } from 'vue-meta';
+
 export default {
   components: { Typewriter },
+  setup() {
+    useMeta({
+      title: 'ZeroCat - Home',
+      meta: [
+        { name: 'description', content: 'ZeroCat is a new generation open-source programming community.' },
+        { name: 'keywords', content: 'ZeroCat, open-source, programming, community' }
+      ]
+    });
+  },
   data() {
     return {
       localuser,

diff --git a/src/pages/projects/index.vue b/src/pages/projects/index.vue
@@ -102,10 +102,19 @@
 
 <script>
 import Projects from "../../components/Projects.vue";
+import { useMeta } from 'vue-meta';
 
 export default {
   components: { Projects },
-
+  setup() {
+    useMeta({
+      title: 'ZeroCat - Projects',
+      meta: [
+        { name: 'description', content: 'Browse and explore various projects on ZeroCat.' },
+        { name: 'keywords', content: 'ZeroCat, projects, browse, explore' }
+      ]
+    });
+  },
   data() {
     return {
       searchstates: [{ state: "所有", abbr: "public" }],

diff --git a/src/pages/projects/new.vue b/src/pages/projects/new.vue
@@ -1,9 +1,11 @@
-<template>  <v-container><v-card hover border title="新建作品">
-  <v-card-text>
-作品是你存储代码的地方，你可以选择你喜欢的类型以从模板创建，作品信息可以随时修改。
-  </v-card-text>
-
-</v-card><br/>
+<template>  
+  <v-container>
+    <v-card hover border title="新建作品">
+      <v-card-text>
+        作品是你存储代码的地方，你可以选择你喜欢的类型以从模板创建，作品信息可以随时修改。
+      </v-card-text>
+    </v-card>
+    <br/>
     <v-card hover border>
       <v-card-text>
         <v-row dense>
@@ -38,23 +40,34 @@
 
         <v-spacer></v-spacer>
 
-
         <v-btn
-        border
+          border
           color="primary"
           text="创建"
           variant="tonal"
           @click="newProject()"
           :disabled="created"
         ></v-btn>
       </v-card-actions>
-    </v-card></v-container>
+    </v-card>
+  </v-container>
 </template>
 
 <script>
 import openEdit from "../../stores/openEdit";
 import request from "@/axios/axios";
+import { useMeta } from 'vue-meta';
+
 export default {
+  setup() {
+    useMeta({
+      title: 'ZeroCat - New Project',
+      meta: [
+        { name: 'description', content: 'Create a new project on ZeroCat.' },
+        { name: 'keywords', content: 'ZeroCat, new project, create' }
+      ]
+    });
+  },
   data() {
     return {
       projectinfo: {
@@ -67,7 +80,6 @@ export default {
     };
   },
   methods: {
-
     async newProject() {
       await request.post("/project/", this.projectinfo).then((res) => {
         console.log(res);

diff --git a/src/pages/proxy/index.vue b/src/pages/proxy/index.vue
@@ -61,8 +61,18 @@
 
 <script>
 import request from "../../axios/axios";
+import { useMeta } from 'vue-meta';
 
 export default {
+  setup() {
+    useMeta({
+      title: 'ZeroCat - Proxy',
+      meta: [
+        { name: 'description', content: 'Explore and access Scratch content through ZeroCat Proxy.' },
+        { name: 'keywords', content: 'ZeroCat, Scratch, proxy, explore, access' }
+      ]
+    });
+  },
   data() {
     return {
       orderitems: [

diff --git a/src/pages/proxy/open.vue b/src/pages/proxy/open.vue
@@ -52,7 +52,18 @@
 </template>
 
 <script>
+import { useMeta } from 'vue-meta';
+
 export default {
+  setup() {
+    useMeta({
+      title: 'ZeroCat - Open Scratch Content',
+      meta: [
+        { name: 'description', content: 'Open and explore Scratch content through ZeroCat Proxy.' },
+        { name: 'keywords', content: 'ZeroCat, Scratch, proxy, open, explore' }
+      ]
+    });
+  },
   data() {
     return {
       scratchprojectid: "",

diff --git a/src/pages/tools/asdm.vue b/src/pages/tools/asdm.vue
@@ -204,8 +204,18 @@
 <!-- ZeroCatNext中request会直接返回body的内容，所以代码不通用 -->
 <script>
 import request from "../../axios/axios";
+import { useMeta } from 'vue-meta';
 
 export default {
+  setup() {
+    useMeta({
+      title: 'ZeroCat - ASDM',
+      meta: [
+        { name: 'description', content: 'Download and explore Auto Scratch-Desktop Mirror (ASDM) on ZeroCat.' },
+        { name: 'keywords', content: 'ZeroCat, ASDM, Auto Scratch-Desktop Mirror, download, explore' }
+      ]
+    });
+  },
   data() {
     return {
       release: {