POC: NJS Playground

Author: nginx-jack

assets/css/v2/style.css

@@ -1429,3 +1429,30 @@ hr {
     visibility: hidden;
   }
 }
+
+/* NJS Hackathon stuff */
+.request-builder {
+  height: 20rem;
+  width: var(--grid-content);
+  border: 1px solid #cccccc;
+}
+
+.njs-function {
+  height: 20rem;
+  width: var(--grid-content);
+  border: 1px solid #cccccc;
+}
+
+#run-btn {
+  padding: 8px 16px;
+  font-size: 16px;
+}
+
+.njs-output {
+  padding: var(--flow-gap);
+  background-color: #fff;
+  white-space: pre-wrap;
+  min-height: 40px;
+  border: 1px solid #ccc;
+  font-family: monospace;
+}

exampleSite/content/njs/_index.md

@@ -0,0 +1,14 @@
+---
+description: NJS Playground
+title: NJS Playground
+weight: 100
+---
+
+Welcome to the NJS playground!
+
+Below you will find NJS examples, which you can tweak and run in your browser.
+
+
+- [Basic Example](basic-example) - Return "Hello!" for all requests
+- [Echo Server](echo-server) - Returns a `JSON` version of the request you just sent
+- [Magic AI](magic-ai-thing) - WIP - Something to do with AI

exampleSite/content/njs/basic-example.md

@@ -0,0 +1,31 @@
+---
+description: Basic Example
+title: Basic Example
+weight: 100
+---
+
+
+To use njs in nginx:
+- [install](https://nginx.org/en/docs/njs/install.html) njs scripting language
+- create an njs script file, for example, http.js. See [reference](Reference) for the list of njs properties and methods.
+
+```nginx
+load_module modules/ngx_http_js_module.so;
+
+events {}
+
+http {
+    js_import http.js;
+
+    server {
+        listen 8000;
+
+        location / {
+            js_content http.hello;
+        }
+    }
+}
+```
+
+
+{{< njs-playground exampleRequest=exampleRequest.js exampleNJS=greet.js fnName=hello >}}

exampleSite/content/njs/echo-server.md

@@ -0,0 +1,31 @@
+---
+description: Echo Server
+title: Echo Server
+weight: 100
+---
+
+## Basic Example
+To use njs in nginx:
+- [install](https://nginx.org/en/docs/njs/install.html) njs scripting language
+- create an njs script file, for example, http.js. See [reference](Reference) for the list of njs properties and methods.
+
+```nginx
+load_module modules/ngx_http_js_module.so;
+
+events {}
+
+http {
+    js_import http.js;
+
+    server {
+        listen 8000;
+
+        location /echo {
+            js_content http.echo;
+        }
+    }
+}
+```
+
+
+{{< njs-playground exampleRequest=exampleRequestEcho.js exampleNJS=echo.js fnName=echo >}}

exampleSite/content/njs/magic-ai-thing.md

@@ -0,0 +1,31 @@
+---
+description: Magic AI Thing
+title: Magic AI Thing
+weight: 100
+---
+
+## Basic Example
+To use njs in nginx:
+- [install](https://nginx.org/en/docs/njs/install.html) njs scripting language
+- create an njs script file, for example, http.js. See [reference](Reference) for the list of njs properties and methods.
+
+```nginx
+load_module modules/ngx_http_js_module.so;
+
+events {}
+
+http {
+    js_import http.js;
+
+    server {
+        listen 8000;
+
+        location / {
+            js_content http.hello;
+        }
+    }
+}
+```
+
+
+{{< njs-playground "example_request.js" >}}

exampleSite/content/test-product/call-out/call-out-detail.md

@@ -0,0 +1,26 @@
+
+---
+description: Callout - Detail
+title: Callout - Detail
+weight: 100
+---
+
+
+<details open>
+    <summary>example nginx-agent.conf</summary>
+
+{{<note>}}
+There was a bug which broke padding for blockquotes in details view.
+{{</note>}}
+
+And another note
+
+{{<note>}}
+In the following example `nginx-agent.conf` file, you can change the `server.host` and `server.grpcPort` to connect to the control plane.
+{{</note>}}
+
+And a warning
+
+{{<warning>}}
+This is a Warning callout. There was previously a bug with **bold text** that we should be aware of and continue to check for. This callout was invoked with the `<warning>` shortcode. It has no custom title.
+{{</warning>}}

exampleSite/content/test-product/table/_index.md

@@ -0,0 +1,5 @@
+---
+description: Table
+title: Table
+weight: 100
+---

exampleSite/content/test-product/table/bootstrap-table.md

@@ -0,0 +1,16 @@
+---
+description: Table - Bootstrap
+title: Table - Bootstrap
+weight: 100
+---
+
+
+{{< bootstrap-table "table table-striped table-bordered" >}}
+
+| Field        | Datatype | Possible Values     | Description                                        | Required | Default               |
+|--------------|----------|---------------------|----------------------------------------------------|----------|-----------------------|
+| `users.id`   | integer  | A unique int >= 1   | {{ <note> }}Description for value. {{ </note> }}                             | Yes      | System assigned       |
+| `users.name` | string   | Example: `Jane Doe` | A short description of what the field is used for. | Yes      | Add the default value |
+| `user.age`   | integer  | 1–110               | Description for the value                          | Yes      |                       |
+
+{{< /bootstrap-table >}}

exampleSite/layouts/index.html

@@ -9,6 +9,9 @@ <h1>Homepage Example</h1>
         <li>
             <a href="{{ relref . "test-product" }}">Test Product</a>
         </li>
+        <li>
+            <a href="{{ relref . "njs" }}">njs-playground</a>
+        </li>
     </ul>
 </p>
 

exampleSite/static/njs/echo.js

@@ -0,0 +1,33 @@
+function echo(r) {
+	const {
+		method,
+		uri,
+		args,
+		headersIn,
+		remoteAddress,
+		httpVersion,
+		requestText,
+	} = r;
+
+	// Get request body (if applicable)
+	let body = "";
+	if (requestBuffer !== "" || !Array.isArray(requestBuffer)) {
+		body = Buffer.from(requestBuffer).toString();
+	}
+
+	// Construct the echo response (JSON format)
+	const response = {
+		method,
+		uri,
+		args,
+		headers: headersIn,
+		body: requestText,
+		client: remoteAddress,
+		version: httpVersion,
+	};
+
+	r.return(200, JSON.stringify(response));
+}
+
+// uncomment for us in NJS
+// export default { echo }