From d6caa794f2b005fda99d7316e1352c86d1c40649 Mon Sep 17 00:00:00 2001
From: peter_rabbit <pierrejarriges@gmail.com>
Date: Tue, 2 Feb 2021 14:56:53 +0100
Subject: [PATCH] feat:og meta data
---
build.js | 96 +++++++++++++++----
config.js | 4 +
public/education/education.js | 4 +
public/education/index.html | 17 +++-
public/games/games.js | 4 +
public/games/index.html | 17 +++-
public/index.html | 28 +++++-
public/main.js | 4 +
public/software-development/index.html | 17 +++-
.../software-development.js | 4 +
src/pages/education/meta.json | 9 +-
src/pages/games/meta.json | 7 +-
src/pages/software-development/meta.json | 9 +-
13 files changed, 185 insertions(+), 35 deletions(-)
diff --git a/build.js b/build.js
index cda3ae5..15d298c 100644
--- 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;
}
diff --git a/config.js b/config.js
index 5b5dc12..30b3683 100644
--- 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"],
+ },
};
diff --git a/public/education/education.js b/public/education/education.js
index 49c26e6..49c9160 100644
--- 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){
diff --git a/public/education/index.html b/public/education/index.html
index 51e755d..660916d 100644
--- a/public/education/index.html
+++ b/public/education/index.html
@@ -1,11 +1,24 @@
<!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>
diff --git a/public/games/games.js b/public/games/games.js
index d566c7a..e516a66 100644
--- 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){
diff --git a/public/games/index.html b/public/games/index.html
index 5fbf110..eb16d90 100644
--- a/public/games/index.html
+++ b/public/games/index.html
@@ -1,11 +1,24 @@
<!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>
diff --git a/public/index.html b/public/index.html
index 2edf934..76d6135 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,11 +1,33 @@
<!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>
diff --git a/public/main.js b/public/main.js
index 0c2570c..4438268 100644
--- 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){
diff --git a/public/software-development/index.html b/public/software-development/index.html
index 593f1fb..e2c3f8d 100644
--- a/public/software-development/index.html
+++ b/public/software-development/index.html
@@ -1,11 +1,24 @@
<!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>
diff --git a/public/software-development/software-development.js b/public/software-development/software-development.js
index 21782ff..3e2d647 100644
--- 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){
diff --git a/src/pages/education/meta.json b/src/pages/education/meta.json
index 3f229c5..3e1fe1f 100644
--- a/src/pages/education/meta.json
+++ b/src/pages/education/meta.json
@@ -1,4 +1,9 @@
{
"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"
+ }
+}
diff --git a/src/pages/games/meta.json b/src/pages/games/meta.json
index 7476b5c..ae505b3 100644
--- a/src/pages/games/meta.json
+++ b/src/pages/games/meta.json
@@ -1,4 +1,9 @@
{
"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
diff --git a/src/pages/software-development/meta.json b/src/pages/software-development/meta.json
index b6f4d51..12ff687 100644
--- a/src/pages/software-development/meta.json
+++ b/src/pages/software-development/meta.json
@@ -1,4 +1,9 @@
{
"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"
+ }
+}
--
GitLab