Add logic to populate placeholders in markdown

Author: tristanlee85

components/Header.js

@@ -22,7 +22,7 @@ import Logo from './Logo'
 import Router from 'next/router'
 import clsx from 'clsx'
 import HeaderCollapseMenu from './HeaderCollapseMenu'
-import { APP_URL, FORUM_URL, STATUS_URL } from '../consts'
+import { APP_URL, FORUM_URL, STATUS_URL } from '../constants'
 
 const useStyles = makeStyles(theme => ({
   appBar: {

components/HeaderCollapseMenu.js

@@ -6,7 +6,7 @@ import Link from 'next/link'
 import { MoreVert } from '@material-ui/icons'
 import { makeStyles } from '@material-ui/core/styles'
 import { Hidden } from '@material-ui/core'
-import { APP_URL, FORUM_URL, STATUS_URL, HELP_URL } from '../consts'
+import { APP_URL, FORUM_URL, STATUS_URL, HELP_URL } from '../constants'
 
 const useStyles = makeStyles(theme => ({
   root: {

components/utils/markdownUtils.js

@@ -0,0 +1,33 @@
+import * as constants from '../../constants'
+
+function replaceMatch(content, match) {
+  const [template, variable] = match
+
+  return (
+    content.substr(0, match.index) +
+    constants[variable] +
+    content.substr(match.index + template.length)
+  )
+}
+
+/**
+ * Populates the markdown template with replacement values for all
+ * constant placeholders with pattern: {{ VARIABLE_NAME }}
+ *
+ * @param {String} content
+ * @returns {String}
+ */
+export function populatePlaceholders(content) {
+  const matcher = /{{\s*(\w+)\s*}}/g
+  let result
+
+  while ((result = matcher.exec(content)) !== null) {
+    const [, variable] = result
+
+    if (constants[variable]) {
+      content = replaceMatch(content, result)
+    }
+  }
+
+  return content
+}

consts.js renamed to constants.js

@@ -1,6 +1,6 @@
 # Angular
 
-This guide shows you how to deploy an Angular application on the Moovweb XDN:
+This guide shows you how to deploy an Angular application on {{ PRODUCT_NAME }}:
 
 ## Example SSR Site
 
@@ -11,11 +11,11 @@ This Angular example app uses server-side rendering and prefetching to provide l
 
 ## Install Node.js and npm
 
-**XDN only supports Node.js version 12.x**
+**{{ PRODUCT_NAME }} only supports Node.js version 12.x**
 
 If you do not have Node.js installed on your system, download and install it from the official [Node.js v12.x downloads](https://nodejs.org/dist/latest-v12.x/) page. Select the download that matches your operating system and run the installer. Note that the installer for Node.js will also install npm.
 
-_Note that while you can use any version of Node.js >= 12 locally, your app will run in Node 12 when deployed to the XDN cloud. Therefore we highly suggest using Node 12 for all development._
+_Note that while you can use any version of Node.js >= 12 locally, your app will run in Node 12 when deployed to the {{ PRODUCT_NAME }} cloud. Therefore we highly suggest using Node 12 for all development._
 
 ## Getting Started
 
@@ -32,7 +32,7 @@ You should now have a working starter app. Run `ng serve` to see the application
 
 #### 2. Add SSR
 
-To deploy your Angular application on the Moovweb XDN it needs to support server-side rendering (SSR). To add SSR support, run:
+To deploy your Angular application on {{ PRODUCT_NAME }} it needs to support server-side rendering (SSR). To add SSR support, run:
 
 ```bash
 ng add @nguniversal/express-engine
@@ -49,15 +49,15 @@ The previous command created:
 
 You can now run `npm run build:ssr && npm run serve:ssr` to access your server-side rendered app at `localhost:4000`.
 
-To prepare your Angular application for deployment on the Moovweb XDN:
+To prepare your Angular application for deployment on {{ PRODUCT_NAME }}:
 
-#### 1. Install the XDN CLI globally:
+#### 1. Install {{ PRODUCT_NAME }} CLI globally:
 
 ```bash
 npm install -g @xdn/cli
 ```
 
-#### 2. Run the following in the root folder of your project. This will configure your project for the XDN.
+#### 2. Run the following in the root folder of your project. This will configure your project for {{ PRODUCT_NAME }}.
 
 ```bash
 xdn init
@@ -68,7 +68,7 @@ This will automatically add all of the required dependencies and files to your p
 - The `@xdn/core` package
 - The `@xdn/angular` package
 - The `@xdn/cli` package
-- `xdn.config.js`- Contains various configuration options for the XDN.
+- `xdn.config.js`- Contains various configuration options for {{ PRODUCT_NAME }}.
 - `routes.js` - A default routes file that sends all requests to the Angular Universal server. Update this file to add caching or proxy some URLs to a different origin.
 
 #### 3. Use the right angular project
@@ -137,7 +137,7 @@ ANGULAR_PROJECT=my-project xdn run
 
 ## Deploying
 
-Deploying requires an account on the Moovweb XDN. [Sign up here for free.](https://moovweb.app/signup) Once you have an account, you can deploy to the Moovweb XDN by running the following in the root folder of your project:
+Deploying requires an account on {{ PRODUCT_NAME }}. [Sign up here for free.](https://moovweb.app/signup) Once you have an account, you can deploy to {{ PRODUCT_NAME }} by running the following in the root folder of your project:
 
 ```bash
 xdn deploy

guides/angular.md

@@ -2,7 +2,7 @@ import React from 'react'
 import Document, { Html, Head, Main, NextScript } from 'next/document'
 import { ServerStyleSheets } from '@material-ui/core/styles'
 import theme from '../components/theme'
-import { DOCS_DOMAIN } from '../consts'
+import { DOCS_DOMAIN } from '../constants'
 
 class MyDocument extends Document {
   render() {

pages/_document.js

@@ -1,5 +1,5 @@
 import fetch from 'isomorphic-fetch'
-import { DOCS_PAGES_REPO_URL } from '../../consts'
+import { DOCS_PAGES_REPO_URL } from '../../constants'
 
 export default async function guides(req, res) {
   const { version } = req.query

pages/api/guides.js

@@ -1,5 +1,5 @@
 import fetch from 'isomorphic-fetch'
-import { DOCS_PAGES_REPO_URL } from '../../../consts'
+import { DOCS_PAGES_REPO_URL } from '../../../constants'
 
 export default async function guide(req, res) {
   let { version, guide } = req.query

pages/api/guides/[guide].js

@@ -1,5 +1,5 @@
 import fetch from 'isomorphic-fetch'
-import { DOCS_PAGES_REPO_URL } from '../../../consts'
+import { DOCS_PAGES_REPO_URL } from '../../../constants'
 
 export default async function version(req, res) {
   const { version } = req.query

pages/api/modules/[version].js

@@ -9,7 +9,8 @@ import getBaseUrl from '../../components/utils/getBaseUrl'
 import ApiLink from '../../components/ApiLink'
 import { Typography } from '@material-ui/core'
 import { useTheme } from '@material-ui/styles'
-import { PRODUCT_NAME } from '../../consts'
+import { PRODUCT_NAME } from '../../constants'
+import { populatePlaceholders } from '../../components/utils/markdownUtils'
 
 export default function Guide({ notFound, markdown, navData, guide }) {
   if (notFound) {
@@ -74,7 +75,7 @@ Guide.getInitialProps = async function({ req, query, version }) {
     ])
 
     return {
-      markdown: content,
+      markdown: populatePlaceholders(content),
       navData,
       guide,
     }