Markdown Preview sample

.kokoro/run/markdown-preview-editor.cfg

@@ -0,0 +1,7 @@
+# Format: //devtools/kokoro/config/proto/build.proto
+
+# Set the folder in which the tests are run
+env_vars: {
+    key: "PROJECT"
+    value: "run/markdown-preview/editor"
+}

.kokoro/run/markdown-preview-renderer.cfg

@@ -0,0 +1,7 @@
+# Format: //devtools/kokoro/config/proto/build.proto
+
+# Set the folder in which the tests are run
+env_vars: {
+    key: "PROJECT"
+    value: "run/markdown-preview/renderer"
+}

run/markdown-preview/README.md

@@ -0,0 +1,24 @@
+# Cloud Run Markdown Preview Sample
+
+[Securing Cloud Run services tutorial](https://cloud.google.com/run/docs/tutorials/secure-services) walks through how to create a secure two-service application running on Cloud Run. This application is a Markdown editor which includes a public "frontend" service which anyone can use to compose Markdown text and a private "backend" service which renders Markdown text to HTML.
+
+For more details on how to work with this sample read the [Google Cloud Run Node.js Samples README](https://github.com/GoogleCloudPlatform/nodejs-docs-samples/tree/master/run).
+
+## Environment Variables
+
+Cloud Run services can be [configured with Environment Variables](https://cloud.google.com/run/docs/configuring/environment-variables).
+Required variables for this sample include:
+
+* `EDITOR_UPSTREAM_RENDER_URL`: The URL of the restricted Cloud Run service that
+  renders Markdown to HTML.
+
+* `EDITOR_UPSTREAM_UNAUTHENTICATED`: (Optional) A boolean that indicates whether the render service requires an authenticated request.
+
+## Dependencies
+
+* **express**: Web server framework.
+* **gcp-metadata**: Access Google Cloud Platform metadata server.
+* **got**: Node.js library for HTTP requests.
+* **handlebars** JavaScript template engine.
+* **markdown-it**: JavaScript library for parsing and rendering Markdown text.
+* **xss**: Node.js HTML sanitizer.

run/markdown-preview/editor/Dockerfile

@@ -0,0 +1,34 @@
+# Copyright 2020 Google LLC
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#    https://www.apache.org/licenses/LICENSE-2.0
+# 
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+# Use the official lightweight Node.js 10 image.
+# https://hub.docker.com/_/node
+FROM node:10-slim
+
+# Create and change to the app directory.
+WORKDIR /usr/src/app
+
+# Copy application dependency manifests to the container image.
+# A wildcard is used to ensure both package.json AND package-lock.json are copied.
+# Copying this separately prevents re-running npm install on every code change.
+COPY package*.json ./
+
+# Install production dependencies.
+RUN npm install --only=production
+
+# Copy local code to the container image.
+COPY . ./
+
+# Run the web service on container startup.
+CMD [ "npm", "start" ]

run/markdown-preview/editor/main.js

@@ -0,0 +1,81 @@
+// Copyright 2020 Google LLC
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     https://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+const express = require('express');
+const handlebars = require('handlebars');
+const { readFileSync } = require('fs');
+const renderRequest = require('./render.js');
+
+const app = express();
+app.use(express.json());
+
+let url, isAuthenticated, markdownDefault, compiledTemplate, template;
+
+const init = () => {
+  url = process.env.EDITOR_UPSTREAM_RENDER_URL;
+  if (!url) throw Error ("No configuration for upstream render service: add EDITOR_UPSTREAM_RENDER_URL environment variable");
+  isAuthenticated = !process.env.EDITOR_UPSTREAM_UNAUTHENTICATED;
+  if (!isAuthenticated) console.log("Editor: starting in unauthenticated upstream mode");
+  return {url, isAuthenticated};
+};
+
+const service = init();
+
+// Load the template files and serve them with the Editor service.
+const buildTemplate = () => {
+  try {
+    markdownDefault = readFileSync(__dirname + '/templates/markdown.md');
+    const indexTemplate = handlebars.compile(readFileSync(__dirname + '/templates/index.html', 'utf8'));
+    compiledTemplate = indexTemplate({default: markdownDefault});
+    return compiledTemplate;
+  } catch(err) {
+    throw Error ('Error loading template: ', err);
+  }
+};
+
+app.get('/', (req, res) => { 
+  try {
+    template = buildTemplate();
+    res.status(200).send(template);
+  } catch (err) {
+    console.log('Error loading the Editor service: ', err);
+    res.status(500).send(err);
+  }
+});
+
+// The renderRequest makes a request to the Renderer service. 
+// The request returns the Markdown text converted to HTML.
+app.post('/render', async (req, res) => {
+  try {
+    const markdown = req.body.data;
+    const response = await renderRequest(service, markdown);
+    res.status(200).send(response);
+  } catch (err) {
+    console.log('Error querying the Renderer service: ', err);
+    res.status(500).send(err);
+  }
+});
+
+const PORT = process.env.PORT || 8080;
+
+app.listen(PORT, err => {
+  console.log(`Editor service is listening on port ${PORT}`);
+});
+
+// Exports for testing purposes.
+module.exports = {
+  app,
+  init,
+  buildTemplate
+};

run/markdown-preview/editor/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "markdown-preview",
+  "description": "Cloud Run service to demonstrate service-to-service authentication, paired with Renderer service.",
+  "version": "0.0.1",
+  "private": true,
+  "license": "Apache-2.0",
+  "author": "Google LLC",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/GoogleCloudPlatform/nodejs-docs-samples.git"
+  },
+  "engines": {
+    "node": ">= 10.0.0"
+  },
+  "main": "main.js",
+  "scripts": {
+    "start": "node main.js",
+    "test": "mocha test/*.test.js --exit"
+  },
+  "dependencies": {
+    "express": "^4.17.1",
+    "gcp-metadata": "^4.0.0",
+    "got": "^10.7.0",
+    "handlebars": "^4.7.6"
+  },
+  "devDependencies": {
+    "mocha": "^7.1.1",
+    "sinon": "^9.0.2",
+    "supertest": "^4.0.2"
+  }
+}

run/markdown-preview/editor/render.js

@@ -0,0 +1,58 @@
+// Copyright 2020 Google LLC
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     https://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+const gcpMetadata = require('gcp-metadata')
+const got = require('got');
+
+// renderRequest creates a new HTTP request with IAM ID Token credential.
+// This token is automatically handled by private Cloud Run (fully managed) and Cloud Functions.
+const renderRequest = async (service, markdown) => { 
+  // [START run_secure_request]
+  let token;
+
+  // Build the request to the Renderer receiving service.
+  const serviceRequestOptions = { 
+    method: 'POST',
+    headers: {
+      'Content-Type': 'text/plain'
+    },
+    body: markdown,
+    timeout: 3000
+  };
+
+  if (service.isAuthenticated) {
+    try {
+    // Query the token with ?audience as the service URL.
+    const metadataServerTokenPath = `service-accounts/default/identity?audience=${service.url}`;
+    // Fetch the token and then add it to the request header.
+    token = await gcpMetadata.instance(metadataServerTokenPath);
+    serviceRequestOptions.headers['Authorization'] = 'bearer ' + token;
+    } catch(err) {
+      throw Error('Metadata server could not respond to request: ', err);
+    }
+  };
+  // [END run_secure_request]
+
+  // [START run_secure_request_do]
+  try {
+    // serviceRequest converts the Markdown plaintext to HTML.
+    const serviceResponse = await got(service.url, serviceRequestOptions);
+    return serviceResponse.body;
+  } catch (err) { 
+    throw Error('Renderer service could not respond to request: ', err);
+  };
+  // [END run_secure_request_do]
+};
+
+module.exports = renderRequest;

run/markdown-preview/editor/templates/index.html

@@ -0,0 +1,110 @@
+<!--
+Copyright 2020 Google LLC
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <title>Markdown Editor</title>
+    <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
+    <link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
+    <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+</head>
+<body class="mdc-typography">
+
+    <header class="mdc-top-app-bar mdc-top-app-bar--fixed">
+        <div class="mdc-top-app-bar__row">
+          <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
+            <span class="mdc-top-app-bar__title">Markdown Editor</span>
+          </section>
+          <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
+            <a href="#code" title="View the code"><i class="material-icons mdc-top-app-bar__action-item mdc-icon-button" aria-hidden="true">code</i></a>
+            <a href="#tutorial" title="Read the tutorial"><i class="material-icons mdc-top-app-bar__action-item mdc-icon-button" aria-hidden="true">assignment</i></a>
+          </section>
+        </div>
+    </header>
+
+    <div role="progressbar" class="mdc-linear-progress mdc-linear-progress--indeterminate mdc-top-app-bar--fixed-adjust" aria-label="Markdown Rendering Progress Bar" aria-valuemin="0" aria-valuemax="1" aria-valuenow="0">
+        <div class="mdc-linear-progress__bar mdc-linear-progress__primary-bar">
+          <span class="mdc-linear-progress__bar-inner"></span>
+        </div>
+    </div>
+
+    <main class="mdc-layout-grid">
+        <div class="mdc-layout-grid__inner">
+            <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-6">
+            <h2>Markdown Text</h2>
+            <section class="mdc-card mdc-card--outlined">
+                <div class="text-field-container">
+                <div class="mdc-text-field mdc-text-field--fullwidth md-text-field--no-label mdc-text-field--textarea mdc-ripple-upgraded">
+                    <textarea id="editor" class="mdc-text-field__input" style="height: 36rem;">{{ default }}</textarea>
+                    </div></div>
+
+                    <div class="mdc-card__actions mdc-card__actions--full-bleed">
+                        <button class="editor-button mdc-button mdc-card__action mdc-card__action--button mdc-ripple-surface">
+                            <span class="mdc-button__label">Preview Rendered Markdown</span>
+                            <i class="material-icons" aria-hidden="true">arrow_forward</i>
+                        </button>
+                    </div>
+                </section></div>
+
+                <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-6">
+                <h2>Rendered HTML</h2>
+                <section class="mdc-card mdc-card--outlined">
+                    <div id="preview" style="height: 40rem; padding-left: 10px; padding-right: 10px">Tap "<strong>Preview Rendered Markdown</strong>" below the text entry to see rendered content.</div>
+                </section></div>
+            </div>
+        </div>
+    </main>
+
+    <script>
+        const preview = document.getElementById('preview');
+        const lp = new mdc.linearProgress.MDCLinearProgress(document.querySelector('.mdc-linear-progress'));
+        async function render(data = {}) {
+            const response = await fetch('/render', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify(data)
+            });
+
+            const text = await response.text();
+            if (!response.ok) {
+                console.log('error: Render Text: Received status code: ' + response.status);
+            }
+
+            return text;
+        }
+
+        function listener() {
+            lp.open();
+            render({data: document.getElementById('editor').value})
+                .then((result) => preview.innerHTML = result)
+                .catch((err) => {
+                    console.log('Render Text: ' + err.message);
+                    preview.innerHTML = '<h3><i aria-hidden="true" class="material-icons">error</i>Render Error</h3>\n<p>' + err.message + '</p>';
+                })
+                .finally(() => lp.close())
+        }
+
+        document.querySelector('.editor-button').addEventListener('click', listener);
+        window.addEventListener('load', listener);
+    </script>
+</body>
+</html>
+

run/markdown-preview/editor/templates/markdown.md

@@ -0,0 +1,19 @@
+# Playing with Markdown
+
+This UI allows a user to write Markdown text and preview the rendered HTML.
+
+You may be familiar with this workflow from sites such as Github or Wikipedia.
+
+In practice, this web page does the following:
+
+* On click of the *"Preview Rendered Markdown"* button, browser JavaScript
+  lifts the markdown text and sends it to the editor UI's public backend.
+* The editor backend sends the text to a private Renderer service which
+  converts it to HTML.
+* The HTML is injected into the web page in the right-side **Rendered HTML** area.
+
+## Markdown Background
+
+Markdown is a text-to-HTML conversion tool that allows you to convert plain text to valid HTML.
+
+Read more about the [syntax on Wikipedia](https://en.wikipedia.org/wiki/Markdown).