Feat/improve meta tag

2024-02-07 13:31:51 +00:00
parent 707420c69e
commit 6ad1d85604
10 changed files with 495 additions and 242 deletions
--- a/index.html
+++ b/index.html
@@ -4,6 +4,31 @@
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" href="/static/favicon.ico" />
+    <title>
+      Panoramax <%- instanceName %> : photo-cartographier les territoires
+    </title>
+    <meta
+      name="description"
+      content="L'instance Panoramax <%- instanceName %> permet la publication de photo de terrain pour cartographier le territoire. Panoramax favorise la réutilisation des photos pour de nombreux cas d'usages."
+    />
+    <meta
+      name="twitter:title"
+      content="Panoramax <%- instanceName %> : photo-cartographier les territoires"
+    />
+    <meta
+      name="og:title"
+      content="Panoramax <%- instanceName %> : photo-cartographier les territoires"
+    />
+    <meta
+      name="twitter:description"
+      content="L'instance Panoramax <%- instanceName %> permet la publication de photo de terrain pour cartographier le territoire. Panoramax favorise la réutilisation des photos pour de nombreux cas d'usages."
+    />
+    <meta
+      name="og:description"
+      content="L'instance Panoramax <%- instanceName %> permet la publication de photo de terrain pour cartographier le territoire. Panoramax favorise la réutilisation des photos pour de nombreux cas d'usages."
+    />
+    <meta name="og:image" content="<%- frontUrl %>/static/meta-img.jpg" />
+    <meta name="twitter:image" content="<%- frontUrl %>/static/meta-img.jpg" />
  </head>
  <body>
    <div id="app"></div>
--- a/package.json
+++ b/package.json
@@ -36,7 +36,6 @@
    "vue-eslint-parser": "^9.1.0",
    "vue-i18n": "9.2.2",
    "vue-matomo": "^4.2.0",
-    "vue-meta": "^3.0.0-alpha.10",
    "vue-router": "^4.1.6",
    "vue3-cookies": "^1.0.6",
    "vue3-smooth-scroll": "^0.8.1"
@@ -71,6 +70,7 @@
    "typescript": "~4.7.4",
    "vite": "^3.2.4",
    "vite-plugin-eslint": "^1.8.1",
+    "vite-plugin-html": "^3.2.2",
    "vitest": "^0.25.3",
    "vue-tsc": "^1.0.9"
  },
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,28 +3,14 @@ import { ref, computed } from 'vue'
 import Header from '@/components/Header.vue'
 import Footer from '@/components/Footer.vue'
 import { RouterView } from 'vue-router'
-import { useMeta } from 'vue-meta'
 import { useI18n } from 'vue-i18n'
 import { hasASessionCookieDecoded } from '@/utils/auth'
-import { title } from '@/utils/index'
 import authConfig from './composables/auth'
 const { authConf } = authConfig()
 const { t } = useI18n()

 let focusMap = ref<string>('focus-map')

-useMeta({
-  title: title(t('general.title')),
-  og: {
-    title: title(t('general.meta.title')),
-    description: title(t('general.meta.description'))
-  },
-  twitter: {
-    title: title(t('general.meta.title')),
-    description: title(t('general.meta.description'))
-  }
-})
-
 function setFocusMap(value: string) {
  focusMap.value = value
 }
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -1,6 +1,7 @@
 {
  "general": {
-    "title": "Instance Panoramax",
+    "title": "DESC Panoramax {instanceName}: photo-cartographier les territoires",
+    "description": "DESC L'instance Panoramax {instanceName} permet la publication de photo de terrain pour cartographier le territoire. Panoramax favorise la réutilisation des photos pour de nombreux cas d'usages.",
    "meta": {
      "title": "Instance Panoramax",
      "description": "Panoramax, l’alternative libre pour photo-cartographier les territoires"
--- a/src/main.ts
+++ b/src/main.ts
@@ -5,7 +5,6 @@ import App from './App.vue'
 import router from './router'
 import axios from 'axios'
 import VueAxios from 'vue-axios'
-import { createMetaManager } from 'vue-meta'
 import { VueDraggableResizable } from 'vue-draggable-resizable-vue3'
 import VCalendar from 'v-calendar'
 import 'v-calendar/style.css'
@@ -49,7 +48,6 @@ app.use(i18n)
 app.use(router)
 app.use(VueAxios, axios)
 app.provide('axios', app.config.globalProperties.axios)
-app.use(createMetaManager())
 app.use(VueDraggableResizable)
 app.use(VCalendar)
 if (matomoExist) {
--- a/src/tests/unit/utils.spec.js
+++ b/src/tests/unit/utils.spec.js
@@ -12,7 +12,6 @@ import {
  hasASessionCookieDecoded
 } from '../../utils/auth'
 import { img } from '../../utils/image'
-import { title } from '../../utils/index'
 import { useCookies } from 'vue3-cookies'
 vi.mock('vue3-cookies', () => {
  const mockCookies = {
@@ -185,19 +184,6 @@ describe('img', () => {
  })
 })

-describe('title', () => {
-  it('should return the formated title with instance name', () => {
-    import.meta.env.VITE_INSTANCE_NAME = 'my instance'
-    const myTitle = 'my title'
-    expect(title(myTitle)).toEqual('my title my instance')
-  })
-  it('should return the formated title without instance name', () => {
-    import.meta.env.VITE_INSTANCE_NAME = ''
-    const myTitle = 'my title'
-    expect(title(myTitle)).toEqual('my title')
-  })
-})
-
 describe('sortByName', () => {
  it('should return the the list sorted by name', () => {
    const list1 = [
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -1,9 +1,3 @@
-export function title(title: string): string {
-  const instanceName = import.meta.env.VITE_INSTANCE_NAME
-  if (instanceName) return `${title} ${instanceName}`
-  return title
-}
-
 export function createUrlLink(picId: string): string {
  return encodeURIComponent(`${window.location.origin}/#focus=pic&pic=${picId}`)
 }
--- a/static/meta-img.jpg
+++ b/static/meta-img.jpg
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,10 +1,12 @@
 import { fileURLToPath, URL } from 'node:url'
-import { defineConfig } from 'vite'
+import { defineConfig, loadEnv } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import eslintPlugin from 'vite-plugin-eslint'
-
+import { createHtmlPlugin } from 'vite-plugin-html'
 // https://vitejs.dev/config/
-export default defineConfig({
+export default ({ mode }) => {
+  process.env = { ...process.env, ...loadEnv(mode, process.cwd()) }
+  return defineConfig({
    server: {
      host: true,
      port: 5173,
@@ -15,7 +17,33 @@ export default defineConfig({
      }
    },
    base: '/',
-  plugins: [vue(), eslintPlugin()],
+    plugins: [
+      vue(),
+      eslintPlugin(),
+      createHtmlPlugin({
+        minify: true,
+        /**
+         * After writing entry here, you will not need to add script tags in `index.html`, the original tags need to be deleted
+         * @default src/main.ts
+         */
+        entry: 'src/main.ts',
+        /**
+         * If you want to store `index.html` in the specified folder, you can modify it, otherwise no configuration is required
+         * @default index.html
+         */
+        template: '/index.html',
+
+        /**
+         * Data that needs to be injected into the index.html ejs template
+         */
+        inject: {
+          data: {
+            instanceName: process.env.VITE_INSTANCE_NAME,
+            frontUrl: process.env.VITE_FRONT_URL
+          }
+        }
+      })
+    ],
    css: {
      preprocessorOptions: {
        scss: {
@@ -30,4 +58,5 @@ export default defineConfig({
        'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js'
      }
    }
-})
+  })
+}
--- a/yarn.lock
+++ b/yarn.lock