ENDOC-666 blog seo

vuepress/README.md

@@ -91,12 +91,24 @@ We have a simple versioning system in place currently. Creating a new version in
 1. Edit `docs/.vuepress/components/LandingPage.vue` to set the `activeVersionPath` and `activeVersionTag`
 1. Edit `docs/.vuepress/components/EntandoRedirect.vue` to set the active version in the path
 
+### Blog Posts
+* Blog posts can be added under `docs/_posts` and will be displayed in date-descending order under the Blog page
+* Any images referenced in the blog post should be added under `docs/_posts/images`
+* The cover image used for the blog post:
+  * Needs to be referenced via `page.frontmatter.cover`
+    ``` markdown
+    cover: images/covers/2023-08-09-docker.png
+    ```
+  * Needs to be a relative URL starting with `images/covers` 
+  * The image itself must be placed under `.vuepress/public/images/covers`
+  * It will be visible on LinkedIn or Facebook when previewing a link, thanks to the Open Graph tags generated by the `entando-dynamic-metadata` plugin
+
 ### Publishing
 We have two utility scripts used to publish the docs to staging and publishing, `vuepress/deploy-staging.sh` and `vuepress/deploy-prod.sh`, respectively. 
    - `deploy-staging.sh` sends files to a Github Pages site available at <https://entando.github.io/entando-docs/> and the script runs with no commands. You should notify the team via slack when updating staging.
    - `deploy-prod.sh` sends files to a Github Pages site available at <https://developer.entando.com> and the script runs with two commands - the target branch and a comment which should include the list of ticket numbers included in the publish.
    - Both scripts use a Vuepress-typical force-push. You'll need privileges on the corresponding repository and/or branch to complete the publish.
-   - After running `deploy-prod.sh` you should tag the current commit with the current date. This will make it easier to rollback to a previous publish if there are issues. 
+   - After running `deploy-prod.sh` you should create a release using GitHub. This will make it easier to rollback to a previous publish if there are issues. 
 
 You can test the production version of your current branch with the following steps:
    - `npm run docs:build`

vuepress/deploy-staging.sh

@@ -15,6 +15,8 @@ sed -i'.bak' "s/'\/theme/'\/entando-docs\/theme/g" docs/.vuepress/components/Lan
 sed -i'.bak' "s/'\//'\/entando-docs\//g" docs/.vuepress/styles/index.styl
 # Switch to the staging GA code as well
 sed -i'.bak' "s/G-1SVVHY8B1N/G-HQRL49XVCW/g" docs/.vuepress/config.js
+# Set the domain so the open graph tags can use absolute URLs
+sed -i'.bak' "s/developer\.entando\.com/entando.github.io/g" docs/.vuepress/config.js
 
 # build
 npm run docs:build

vuepress/docs/.vuepress/config.js

@@ -40,8 +40,10 @@ module.exports = {
     'check-md',
     // Enable redirects configured via frontmatter
    'redirect-frontmatter',
-    // Simple plugin to manage version in top nav
+    // Custom plugin to manage version in top nav
     require('./plugins/entando-nav-version'),
+    // Custom plugin to add metadata using frontmatter
+    require('./plugins/entando-dynamic-metadata'),
     // Add zoom option to images
     'vuepress-plugin-medium-zoom',
     // Add plugin to automatically enable copying code blocks
@@ -172,6 +174,7 @@ module.exports = {
     },
     // Custom theme config
     entando: {
+      domain: "https://developer.entando.com",
       fixpack: {
         "v72": "v7.2.2",
         "v71": "v7.1.6",

vuepress/docs/.vuepress/plugins/entando-dynamic-metadata/index.js

@@ -0,0 +1,58 @@
+// This plugin was derived from https://www.adamdehaven.com/blog/how-to-add-metadata-canonical-urls-and-structured-data-to-your-vuepress-site
+const { path } = require('@vuepress/shared-utils')
+
+module.exports = (options, ctx) => ({
+    name: 'entando-dynamic-metadata',
+    extendPageData($page) {
+        const frontmatter = $page.frontmatter;
+
+        const siteConfig = ctx.siteConfig;        
+        const coverUrl = frontmatter.cover ? siteConfig.themeConfig.entando.domain + siteConfig.base + frontmatter.cover : undefined;
+
+        const title = frontmatter.title
+            ? frontmatter.title.toString().replace(/["|'|\\]/g, '')
+            : $page.title
+            ? $page.title.toString().replace(/["|'|\\]/g, '')
+            : null;
+        const description =  frontmatter.summary
+            ? frontmatter.summary
+                .toString()
+                .replace(/'/g, "'")
+                .replace(/["|\\]/g, '')
+            : null;
+        let meta_dynamicMeta = [
+            // Open Graph
+            {property: 'og:title', content: title},
+            {property: 'og:description', content: description},
+            {property: 'og:image', content: coverUrl},
+            {property: 'og:type', content: 'article'},
+            // Twitter
+            {property: 'twitter:site', content: '@entando'}
+        ]
+
+        // Remove tags with empty content values
+        meta_dynamicMeta = meta_dynamicMeta.filter((meta) => meta.content && meta.content !== '')
+        // Combine frontmatter
+        meta_dynamicMeta = [...(frontmatter.meta || []), ...meta_dynamicMeta]
+
+        // Set frontmatter after removing duplicate entries
+        meta_dynamicMeta = getUniqueArray(meta_dynamicMeta, ['name', 'content', 'itemprop', 'property'])
+
+        frontmatter.meta = meta_dynamicMeta
+    },
+})
+
+/**
+ * Removes duplicate objects from an Array of JavaScript objects
+ * @param {Array} arr Array of Objects
+ * @param {Array} keyProps Array of keys to determine uniqueness
+ */
+function getUniqueArray(arr, keyProps) {
+    return Object.values(
+      arr.reduce((uniqueMap, entry) => {
+        const key = keyProps.map((k) => entry[k]).join('|')
+        if (!(key in uniqueMap)) uniqueMap[key] = entry
+        return uniqueMap
+      }, {}),
+    )
+  }

vuepress/docs/_posts/2023-03-17-building-business-based-autonomous-components.md

@@ -8,7 +8,7 @@ tags:
 - Business-Driven Development
 - Architecture
 - Composable Applications
-cover: /images/covers/2023-03-17-cover.png
+cover: images/covers/2023-03-17-cover.png
 ---
 In today's digital age, organizations seek innovative solutions to keep up with the ever-evolving needs of their customers. One of the most promising approaches is to create highly modular, scalable, and adaptable applications. 
 

vuepress/docs/_posts/2023-08-09-install-entando-with-docker-desktop.md

@@ -8,7 +8,7 @@ tags:
 - Docker Desktop
 - Install
 - Entando 7.2
-cover: /images/covers/2023-08-09-docker.png
+cover: images/covers/2023-08-09-docker.png
 ---
 Setting up a local development environment and optimizing it for daily use is a critical task. Although most development tasks for Entando-compatible components do not require a local Entando instance, there are times when you want to test a new bundle and do not have a full remote cluster available. This blog post explores setting up a small cluster in [Docker Desktop](https://www.docker.com/products/docker-desktop/) for this purpose.