Remove vue-head and use static metadata and dynamic title

e3420ea2 · Georg Krause · c350c8e4 · e3420ea2 · e3420ea2 · e3420ea2
Verified Commit e3420ea2 authored 3 years ago by Georg Krause
--- a/public/index.html
+++ b/public/index.html
@@ -5,13 +5,15 @@
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.png">
-    <title>Funkwhale - Your free and decentralized audio platform</title>
+    <title>Your free and decentralized audio platform - Funkwhale</title>
    <meta name="twitter:card" content="summary" />
+    <meta name="description" content="A social platform to enjoy and share music">
    <meta property="og:type" content="website" />
    <meta property="og:site_name" content="Funkwhale.audio" />
    <meta property="og:title" content="Funkwhale - Your free and decentralized audio platform" />
    <meta property="og:description" content="A social platform to enjoy and share music" />
    <meta property="og:image" content="<%= BASE_URL %>favicon.png" />
+    <link rel="alternate" type="application/atom+xml" title="Blog - Atom Feed" href="https://blog.funkwhale.audio/~/Announcements/atom.xml">
  </head>
  <body>
    <noscript>

--- a/src/PageMixin.vue
+++ b/src/PageMixin.vue
@@ -5,55 +5,9 @@ export default {
  props: ["locale"],
  created() {
    this.autodetectLanguage();
+    document.title = this.getInnerTitle() + " - Funkwhale";
  },

-  head: {
-    title() {
-      return {
-        inner: this.getInnerTitle()
-      };
-    },
-    meta: function() {
-      return [
-        {
-          name: "description",
-          content: this.$pgettext(
-            "Content/Home/Header",
-            "A social platform to enjoy and share music"
-          )
-        },
-        {
-          "http-equiv": "content-language",
-          content: this.$language.current.replace("_", "-")
-        }
-      ];
-    },
-    link: function() {
-      let self = this;
-      let links = locales.locales.map(l => {
-        let params = {
-          ...self.$route.params,
-          locale: l.code
-        };
-        let resolved = self.$router.resolve({
-          name: self.$route.name,
-          params
-        });
-        return {
-          rel: "alternate",
-          hreflang: l.code.replace("_", "-"),
-          href: `${resolved.href}`
-        };
-      });
-      links.push({
-        rel: "alternate",
-        type: "application/atom+xml",
-        title: "Blog - Atom Feed",
-        href: "https://blog.funkwhale.audio/~/Announcements/atom.xml"
-      });
-      return links;
-    }
-  },
  methods: {
    getInnerTitle() {
      return this.$pgettext(

--- a/src/main.js
+++ b/src/main.js
 import { createApp } from "vue";
 import App from "./App.vue";
-import VueHead from "vue-head";
 import router from "./router";
 import locales from "@/locales";
 import { createGettext } from "@jshmrtn/vue3-gettext";
@@ -27,10 +26,6 @@ const gettext = createGettext({

 const mainApp = createApp(App)
  .use(router)
-  .use(gettext)
-  .use(VueHead, {
-    separator: "-",
-    complement: "Funkwhale"
-  });
+  .use(gettext);

 mainApp.mount("#app");