add META* .env, add META* .env.dist, add META .env.template, refactor config/index.js and vue.config

2025-12-13 07:45:54 +00:00 · 2022-02-16 16:59:04 +01:00 · 2022-02-16 16:59:04 +01:00 · 6134d5010c
commit 6134d5010c
parent 073a42d968
5 changed files with 65 additions and 34 deletions
--- a/frontend/.env.dist
+++ b/frontend/.env.dist
@ -1,3 +1,11 @@
+META_URL=http://localhost
+META_TITLE_DE="Gradido – Dein Dankbarkeitskonto"
+META_TITLE_EN="Gradido - Your gratitude account"
+META_DESCRIPTION_DE="Dankbarkeit ist die Währung der neuen Zeit. Immer mehr Menschen entfalten ihr Potenzial und gestalten eine gute Zukunft für alle."
+META_DESCRIPTION_EN="Gratitude is the currency of the new age. More and more people are unleashing their potential and shaping a good future for all."
+META_KEYWORDS_DE="Grundeinkommen, Währung, Dankbarkeit, Schenk-Ökonomie, Natürliche Ökonomie des Lebens, Ökonomie, Ökologie, Potenzialentfaltung, Schenken und Danken, Kreislauf des Lebens, Geldsystem"
+META_KEYWORDS_EN="Basic Income, Currency, Gratitude, Gift Economy, Natural Economy of Life, Economy, Ecology, Potential Development, Giving and Thanking, Cycle of Life, Monetary System"
+META_AUTHOR="Bernd Hückstädt - Gradido-Akademie"
 GRAPHQL_URI=http://localhost/graphql
 DEFAULT_PUBLISHER_ID=2896
 ADMIN_AUTH_URL=http://localhost/admin/authenticate?token={token}
--- a/frontend/.env.template
+++ b/frontend/.env.template
@ -1,3 +1,11 @@
+META_URL=$META_URL
+META_TITLE_DE=$META_TITLE_DE
+META_TITLE_EN=$META_TITLE_EN
+META_DESCRIPTION_DE=$META_DESCRIPTION_DE
+META_DESCRIPTION_EN=$META_DESCRIPTION_EN
+META_KEYWORDS_DE=$META_KEYWORDS_DE
+META_KEYWORDS_EN=$META_KEYWORDS_EN
+META_AUTHOR=$META_AUTHOR
 GRAPHQL_URI=$GRAPHQL_URI
 DEFAULT_PUBLISHER_ID=2896
 ADMIN_AUTH_URL=$ADMIN_AUTH_URL
--- a/frontend/public/index.html
+++ b/frontend/public/index.html
@ -17,20 +17,18 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <title><%= htmlWebpackPlugin.options.title %></title>
-  <!-- <title lang="de">Gradido – Dein Dankbarkeitskonto</title>
-  <title lang="en">Gradido - Your gratitude account</title>
-  -->
-  <meta name="description" lang="de" content="<%= htmlWebpackPlugin.options.description_de %>">
-  <meta name="description" lang="en" content="<%= htmlWebpackPlugin.options.description_en %>">
-  <meta name="keywords" lang="de" content="<%= htmlWebpackPlugin.options.keywords_de %>">
-  <meta name="keywords" lang="en" content="<%= htmlWebpackPlugin.options.keywords_en %>">
-  <meta name="author" content="<%= htmlWebpackPlugin.options.author %>">
-  <meta name="url" content="<%= htmlWebpackPlugin.options.url %>">
-  <meta name="identifier-URL" content="<%= htmlWebpackPlugin.options.identifier_URL %>">
+  <meta name="title" lang="de" content="<%= htmlWebpackPlugin.options.meta.title_de %>">
+  <meta name="title" lang="en" content="<%= htmlWebpackPlugin.options.meta.title_en %>">
+  <meta name="description" lang="de" content="<%= htmlWebpackPlugin.options.meta.description_de %>">
+  <meta name="description" lang="en" content="<%= htmlWebpackPlugin.options.meta.description_en %>">
+  <meta name="keywords" lang="de" content="<%= htmlWebpackPlugin.options.meta.keywords_de %>">
+  <meta name="keywords" lang="en" content="<%= htmlWebpackPlugin.options.meta.keywords_en %>">
+  <meta name="author" content="<%= htmlWebpackPlugin.options.meta.author %>">
+  <meta name="url" content="<%= htmlWebpackPlugin.options.meta.url %>">
+  <meta name="identifier-URL" content="<%= htmlWebpackPlugin.options.meta.url %>">
  <meta charset="utf-8">
  <meta name="robots" content="index,follow">
-
+  <link rel='canonical' href='<%= htmlWebpackPlugin.options.meta.url %>'>
  <link rel="icon" type="image/png" sizes="96x96" href="./favicon.png">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
@ -39,16 +37,17 @@
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">

-  <meta property="og:title" content="Gradido Akademie" />
-  <meta property="og:type" content="Wallet" /> 
-  <meta property="og:url" content="https://gdd.gradido.net" />
-  <meta property="og:image" content="https://gdd.gradido.net/img/gradido-wallet-650-400.jpg" />
+  <meta property="og:title" content="<%= htmlWebpackPlugin.options.meta.title_de %>" />
+  <meta property="og:description" content="<%= htmlWebpackPlugin.options.meta.description_de %>" />
+  <meta property="og:type" content="Website" /> 
+  <meta property="og:url" content="<%= htmlWebpackPlugin.options.meta.url %>" />
+  <meta property="og:image" content="<%= htmlWebpackPlugin.options.meta.url %>/img/gradido-wallet-650-400.jpg" />

-  <meta lang="de" name="twitter:title" content="Gradido – Dein Dankbarkeitskonto">
-  <meta lang="en" name="twitter:title" content="Gradido - Your gratitude account">
-  <meta lang="de" name="twitter:description" content="Dankbarkeit ist die Währung der neuen Zeit. Immer mehr Menschen entfalten ihr Potenzial und gestalten eine gute Zukunft für alle.">
-  <meta lang="en" name="twitter:description" content="Gratitude is the currency of the new age. More and more people are unleashing their potential and shaping a good future for all.">
-  <meta name="twitter:image" content="https://gdd.gradido.net/img/gradido-wallet-650-400.jpg">
+  <meta lang="de" name="twitter:title" content="<%= htmlWebpackPlugin.options.meta.title_de %>">
+  <meta lang="en" name="twitter:title" content="<%= htmlWebpackPlugin.options.meta.title_en %>">
+  <meta lang="de" name="twitter:description" content="<%= htmlWebpackPlugin.options.meta.description_de %>">
+  <meta lang="en" name="twitter:description" content="<%= htmlWebpackPlugin.options.meta.description_en %>">
+  <meta name="twitter:image" content="<%= htmlWebpackPlugin.options.meta.url %>/img/gradido-wallet-650-400.jpg">
  <meta name="twitter:card" content="summary_large_image">

 </head>
--- a/frontend/src/config/index.js
+++ b/frontend/src/config/index.js
@ -18,6 +18,25 @@ const environment = {
  DEFAULT_PUBLISHER_ID: process.env.DEFAULT_PUBLISHER_ID || 2896,
 }

+// const meta = {
+//   META_URL: process.env.META_URL || 'http://localhost',
+//   META_TITLE_DE: process.env.META_TITLE_DE || 'Gradido – Dein Dankbarkeitskonto',
+//   META_TITLE_EN: process.env.META_TITLE_EN || 'Gradido - Your gratitude account',
+//   META_DESCRIPTION_DE:
+//     process.env.META_DESCRIPTION_DE ||
+//     'Dankbarkeit ist die Währung der neuen Zeit. Immer mehr Menschen entfalten ihr Potenzial und gestalten eine gute Zukunft für alle.',
+//   META_DESCRIPTION_EN:
+//     process.env.META_DESCRIPTION_EN ||
+//     'Gratitude is the currency of the new age. More and more people are unleashing their potential and shaping a good future for all.',
+//   META_KEYWORDS_DE:
+//     process.env.META_KEYWORDS_DE ||
+//     'Grundeinkommen, Währung, Dankbarkeit, Schenk-Ökonomie, Natürliche Ökonomie des Lebens, Ökonomie, Ökologie, Potenzialentfaltung, Schenken und Danken, Kreislauf des Lebens, Geldsystem',
+//   META_KEYWORDS_EN:
+//     process.env.META_KEYWORDS_EN ||
+//     'Basic Income, Currency, Gratitude, Gift Economy, Natural Economy of Life, Economy, Ecology, Potential Development, Giving and Thanking, Cycle of Life, Monetary System',
+//   META_AUTHOR: process.env.META_AUTHOR || 'Bernd Hückstädt - Gradido-Akademie',
+// }
+
 const endpoints = {
  GRAPHQL_URI: process.env.GRAPHQL_URI || 'http://localhost/graphql',
  ADMIN_AUTH_URL: process.env.ADMIN_AUTH_URL || 'http://localhost/admin/authenticate?token={token}',
--- a/frontend/vue.config.js
+++ b/frontend/vue.config.js
@ -41,20 +41,17 @@ module.exports = {
      new StatsPlugin('webpack.stats.json'),
      new HtmlWebpackPlugin({
        vue: true,
-        title: 'XGRADIDO',
        template: 'public/index.html',
-        description_de:
-          'Dankbarkeit ist die Währung der neuen Zeit. Immer mehr Menschen entfalten ihr Potenzial und gestalten eine gute Zukunft für alle.',
-        description_en:
-          'Gratitude is the currency of the new age. More and more people are unleashing their potential and shaping a good future for all.',
-        keywords_de:
-          'Grundeinkommen, Währung, Dankbarkeit, Schenk-Ökonomie, Natürliche Ökonomie des Lebens, Ökonomie, Ökologie, Potenzialentfaltung, Schenken und Danken, Kreislauf des Lebens, Geldsystem',
-        keywords_en:
-          'Basic Income, Currency, Gratitude, Gift Economy, Natural Economy of Life, Economy, Ecology, Potential Development, Giving and Thanking, Cycle of Life, Monetary System',
-        author: 'Bernd Hückstädt - Gradido-Akademie',
-        url: 'http://localhost',
-        identifier_URL: 'http://localhost',
-        icon: './favicon.png',
+        meta: {
+          title_de: process.env.META_TITLE_DE,
+          title_en: process.env.META_TITLE_EN,
+          description_de: process.env.META_DESCRIPTION_DE,
+          description_en: process.env.META_DESCRIPTION_EN,
+          keywords_de: process.env.META_KEYWORDS_DE,
+          keywords_en: process.env.META_KEYWORDS_EN,
+          author: process.env.META_AUTHOR,
+          url: process.env.META_URL,
+        },
      }),
    ],
    infrastructureLogging: {