feat:og meta data

d6caa794 · peter_rabbit · 3bbdb5bd · d6caa794 · d6caa794 · d6caa794
Commit d6caa794 authored 4 years ago by peter_rabbit
--- a/build.js
+++ b/build.js
@@ -2,13 +2,12 @@

 "use strict";

-const build_conf = {
-    protected_dirs: ["assets", "style", "articles"],
-};

 const fs = require("fs");
 const browserify = require("browserify");
+const config = require("./config");
 const curDir = process.cwd();
+const build_conf = config.build;

 // Handle home page
 const b = browserify();
@@ -20,31 +19,31 @@ b.add(`${curDir}/src/main.js`)
 function getPageHtml(pageName, pageMeta) {
    let html = fs.readFileSync(`${curDir}/public/index.html`, "utf-8");
    const setMeta = function (metaName, value) {
-        return html.replace(
-            html.match(new RegExp(`<meta.+name="${metaName}".+>`, "g")),
+        html = html.replace(
+            html.match(new RegExp(`<meta\\s*name="${metaName}"[^>]+>`, "g")),
            `<meta name="${metaName}" content="${value}"/>`
        );
    };
-    const setTitle = function (value) {
-        return html.replace(
-            html.match(new RegExp(`<title.+</title>`, "g")),
-            `<title>${value}</title>`
+    const setTitle = function () {
+        html = html.replace(
+            html.match(new RegExp(`<title.+</title>`, "g"))[0],
+            `<title>${pageMeta.title}</title>`
        );
    };
    const setStyleSheet = function () {
-        return html.replace(
-            html.match(new RegExp(`<link.+/style.css>`, "g")),
+        html = html.replace(
+            html.match(new RegExp(`<link.+/style.css[^>]+>`, "g"))[0],
            `<link href="/style/style.css" rel="stylesheet" />`
        );
    };
    const setJs = function () {
-        return html.replace(
-            html.match(new RegExp(`<script.+main.js.+</script>`, "g")),
+        html = html.replace(
+            html.match(new RegExp(`<script.+main.js.+</script>`, "g"))[0],
            `<script type="text/javascript" src="./${pageName}.js"></script>`
        );
    };
    const setAdditionalMeta = function (metas) {
-        return html.replace(
+        html = html.replace(
            "</head>",
            `${metas
                .map(kv => {
@@ -54,14 +53,69 @@ function getPageHtml(pageName, pageMeta) {
                .join("\n")}</head>`
        );
    };
-    html = setMeta("description", pageMeta.description);
-    html = setTitle(pageMeta.title);
-    html = setStyleSheet();
-    html = setJs();
-    html = setAdditionalMeta(
-        Object.entries(pageMeta).filter(kv => kv[0] !== "description" && kv[0] !== "title")
-    );
+    const setOgMeta = function () {
+        const pageOgMeta = pageMeta.open_graph || {};
+
+        const getOgMetaSearchRegex = function (name) {
+            return new RegExp(`<meta\\s*property="og:${name}"[^>]+>`, "g");
+        };
+        const getDefaultOgMetaContent = function (name) {
+            const getRegexMatch = function (source, searchRe) {
+                const m = source.match(searchRe);
+                return m ? m[0] : "";
+            };
+            return getRegexMatch(
+                getRegexMatch(
+                    getRegexMatch(html, getOgMetaSearchRegex(name)),
+                    new RegExp(`content=".+"`, "g")
+                ),
+                new RegExp(`".+"`, "g")
+            ).replace(/"/g, "");
+        };
+        const requiredOgMeta = [
+            { key: "title", defaultValue: pageMeta.title },
+            { key: "description", defaultValue: pageMeta.description },
+            {
+                key: "image",
+                defaultValue: getDefaultOgMetaContent("image"),
+            },
+            {
+                key: "url",
+                defaultValue: (function () {
+                    const urlContent = getDefaultOgMetaContent("url");
+
+                    return `${urlContent}${
+                        urlContent.charAt(urlContent.length - 1) !== "/" ? "/" : ""
+                    }${pageName}`;
+                })(),
+            },
+            {
+                key: "locale",
+                defaultValue: getDefaultOgMetaContent("locale"),
+            },
+            // TODO : handle locale:alternate meta tags array
+        ];

+        requiredOgMeta.forEach(entry => {
+            const { key, defaultValue } = entry;
+            html = html.replace(
+                html.match(getOgMetaSearchRegex(key)),
+                `<meta property="og:${key}" content="${pageOgMeta[key] || defaultValue}" />`
+            );
+        });
+
+        // TODO handle addition og meta
+    };
+    setMeta("description", pageMeta.description);
+    setTitle();
+    setStyleSheet();
+    setJs();
+    setAdditionalMeta(
+        Object.entries(pageMeta).filter(
+            kv => !build_conf.default_meta_keys.includes(kv[0])
+        )
+    );
+    setOgMeta();
    return html;
 }


--- a/config.js
+++ b/config.js
@@ -7,4 +7,8 @@ function getServerUrl() {
 module.exports = {
    getServerUrl,
    website_title: "Kuadrado website template",
+    build: {
+        protected_dirs: ["assets", "style", "articles"],
+        default_meta_keys: ["title", "description", "open_graph"],
+    },
 };
--- a/public/education/education.js
+++ b/public/education/education.js
@@ -8,6 +8,10 @@ function getServerUrl() {
 module.exports = {
    getServerUrl,
    website_title: "Kuadrado website template",
+    build: {
+        protected_dirs: ["assets", "style", "articles"],
+        default_meta_keys: ["title", "description", "open_graph"],
+    },
 };

 },{}],2:[function(require,module,exports){

--- a/public/education/index.html
+++ b/public/education/index.html
 <!DOCTYPE html>
-<html lang="fr">
+<html lang="fr" prefix="og: https://ogp.me/ns#">
    <head>
        <meta charset="utf-8" />
        <title>Kuadrado Software | Pédagogie</title>
        <meta name="description" content="Animations autour de la création de jeux vidéos, vulgarisation numérique. Découvrez nos initiatives pédagogiques."/>
+
+        <!-- Open Graph Protocol meta data -->
+        <meta property="og:title" content="Kuadrado Software | Pédagogie" />
+        <meta property="og:description" content="Animations autour de la création de jeux vidéos, vulgarisation numérique. Découvrez nos initiatives pédagogiques." />
+        <meta property="og:type" content="website" />
+        <meta property="og:url" content="https://kuadrado-software.fr/education" />
+        <meta property="og:image" content="https://kuadrado-software.fr/assets/images/brain.svg" />
+        <meta property="og:locale" content="fr_FR" />
+
+        <!-- English translation not ready yet -->
+        <!-- <meta property="og:locale:alternate" content="en_GB" /> -->
+        <!-- END OGP -->
+
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
-        <link rel="icon" type="image/svg+xml" href="/favicon.svg">
+        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
        <link href="/style/style.css" rel="stylesheet" />
    </head>
    <body>

--- a/public/games/games.js
+++ b/public/games/games.js
@@ -8,6 +8,10 @@ function getServerUrl() {
 module.exports = {
    getServerUrl,
    website_title: "Kuadrado website template",
+    build: {
+        protected_dirs: ["assets", "style", "articles"],
+        default_meta_keys: ["title", "description", "open_graph"],
+    },
 };

 },{}],2:[function(require,module,exports){

--- a/public/games/index.html
+++ b/public/games/index.html
 <!DOCTYPE html>
-<html lang="fr">
+<html lang="fr" prefix="og: https://ogp.me/ns#">
    <head>
        <meta charset="utf-8" />
        <title>Kuadrado Software | Jeux</title>
        <meta name="description" content="Création de jeux vidéos indépendants. Jeux web, PC et projets en cours de développement"/>
+
+        <!-- Open Graph Protocol meta data -->
+        <meta property="og:title" content="Kuadrado Software | Jeux" />
+        <meta property="og:description" content="Création de jeux vidéos indépendants. Jeux web, PC et projets en cours de développement" />
+        <meta property="og:type" content="website" />
+        <meta property="og:url" content="https://kuadrado-software.fr/games" />
+        <meta property="og:image" content="https://kuadrado-software.fr/assets/images/game_controller.svg" />
+        <meta property="og:locale" content="fr_FR" />
+
+        <!-- English translation not ready yet -->
+        <!-- <meta property="og:locale:alternate" content="en_GB" /> -->
+        <!-- END OGP -->
+
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
-        <link rel="icon" type="image/svg+xml" href="/favicon.svg">
+        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
        <link href="/style/style.css" rel="stylesheet" />
    </head>
    <body>

--- a/public/index.html
+++ b/public/index.html
 <!DOCTYPE html>
-<html lang="fr">
+<html lang="fr" prefix="og: https://ogp.me/ns#">
    <head>
        <meta charset="utf-8" />
        <title>Kuadrado Software</title>
-        <meta name="description" content="Créations numériques, jeux vidéos, web, software et pédagogie.">
+        <meta
+            name="description"
+            content="Créations numériques, jeux vidéos, web, software et pédagogie. Made in Ardèche, Vernoux en Vivarais."
+        />
+
+        <!-- Open Graph Protocol meta data -->
+        <meta property="og:title" content="Kuadrado Software" />
+        <meta
+            property="og:description"
+            content="Créations numériques, jeu vidéo, web, software et pédagogie. Made in Ardèche, Vernoux en Vivarais."
+        />
+        <meta property="og:type" content="website" />
+        <meta property="og:url" content="https://kuadrado-software.fr" />
+        <meta
+            property="og:image"
+            content="https://kuadrado-software.fr/assets/images/logo_kuadrado.svg"
+        />
+        <meta property="og:locale" content="fr_FR" />
+
+        <!-- English translation not ready yet -->
+        <!-- <meta property="og:locale:alternate" content="en_GB" /> -->
+        <!-- END OGP -->
+
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
-        <link rel="icon" type="image/svg+xml" href="/favicon.svg">
+        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
        <link href="/style/style.css" rel="stylesheet" />
    </head>
    <body>

--- a/public/main.js
+++ b/public/main.js
@@ -8,6 +8,10 @@ function getServerUrl() {
 module.exports = {
    getServerUrl,
    website_title: "Kuadrado website template",
+    build: {
+        protected_dirs: ["assets", "style", "articles"],
+        default_meta_keys: ["title", "description", "open_graph"],
+    },
 };

 },{}],2:[function(require,module,exports){

--- a/public/software-development/index.html
+++ b/public/software-development/index.html
 <!DOCTYPE html>
-<html lang="fr">
+<html lang="fr" prefix="og: https://ogp.me/ns#">
    <head>
        <meta charset="utf-8" />
        <title>Kuadrado Software | Software</title>
        <meta name="description" content="Développement web, moteur de jeux, outillage logiciel, retrouvez nos projets en détail."/>
+
+        <!-- Open Graph Protocol meta data -->
+        <meta property="og:title" content="Kuadrado Software | Software" />
+        <meta property="og:description" content="Développement web, moteur de jeux, outillage logiciel, retrouvez nos projets en détail." />
+        <meta property="og:type" content="website" />
+        <meta property="og:url" content="https://kuadrado-software.fr/software-development" />
+        <meta property="og:image" content="https://kuadrado-software.fr/assets/images/meca_proc.svg" />
+        <meta property="og:locale" content="fr_FR" />
+
+        <!-- English translation not ready yet -->
+        <!-- <meta property="og:locale:alternate" content="en_GB" /> -->
+        <!-- END OGP -->
+
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
-        <link rel="icon" type="image/svg+xml" href="/favicon.svg">
+        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
        <link href="/style/style.css" rel="stylesheet" />
    </head>
    <body>

--- a/public/software-development/software-development.js
+++ b/public/software-development/software-development.js
@@ -8,6 +8,10 @@ function getServerUrl() {
 module.exports = {
    getServerUrl,
    website_title: "Kuadrado website template",
+    build: {
+        protected_dirs: ["assets", "style", "articles"],
+        default_meta_keys: ["title", "description", "open_graph"],
+    },
 };

 },{}],2:[function(require,module,exports){

--- a/src/pages/education/meta.json
+++ b/src/pages/education/meta.json
 {
    "title": "Kuadrado Software | Pédagogie",
-    "description": "Animations autour de la création de jeux vidéos, vulgarisation numérique. Découvrez nos initiatives pédagogiques."
-}
\ No newline at end of file
+    "description": "Animations autour de la création de jeux vidéos, vulgarisation numérique. Découvrez nos initiatives pédagogiques.",
+    "open_graph": {
+        "title": "Kuadrado Software | Pédagogie",
+        "description": "Animations autour de la création de jeux vidéos, vulgarisation numérique. Découvrez nos initiatives pédagogiques.",
+        "image": "https://kuadrado-software.fr/assets/images/brain.svg"
+    }
+}
--- a/src/pages/games/meta.json
+++ b/src/pages/games/meta.json
 {
    "title": "Kuadrado Software | Jeux",
-    "description": "Création de jeux vidéos indépendants. Jeux web, PC et projets en cours de développement"
+    "description": "Création de jeux vidéos indépendants. Jeux web, PC et projets en cours de développement",
+    "open_graph": {
+        "title": "Kuadrado Software | Jeux",
+        "description": "Création de jeux vidéos indépendants. Jeux web, PC et projets en cours de développement",
+        "image": "https://kuadrado-software.fr/assets/images/game_controller.svg"
+    }
 }
\ No newline at end of file
--- a/src/pages/software-development/meta.json
+++ b/src/pages/software-development/meta.json
 {
    "title": "Kuadrado Software | Software",
-    "description": "Développement web, moteur de jeux, outillage logiciel, retrouvez nos projets en détail."
-}
\ No newline at end of file
+    "description": "Développement web, moteur de jeux, outillage logiciel, retrouvez nos projets en détail.",
+    "open_graph": {
+        "title": "Kuadrado Software | Software",
+        "description": "Développement web, moteur de jeux, outillage logiciel, retrouvez nos projets en détail.",
+        "image": "https://kuadrado-software.fr/assets/images/meca_proc.svg"
+    }
+}