@iebh/tera-fy 1.0.1

package/docs/terafy.client.md

@@ -0,0 +1,154 @@
+<a name="TeraFy"></a>
+
+## TeraFy
+**Kind**: global class  
+
+* [TeraFy](#TeraFy)
+    * [new TeraFy()](#new_TeraFy_new)
+    * [.settings](#TeraFy+settings) : <code>Object</code>
+    * [.dom](#TeraFy+dom) : <code>Object</code>
+    * [.methods](#TeraFy+methods) : <code>Array.&lt;String&gt;</code>
+    * [.acceptPostboxes](#TeraFy+acceptPostboxes)
+    * [.send(message)](#TeraFy+send) ⇒ <code>Promise.&lt;\*&gt;</code>
+    * [.sendRaw(message)](#TeraFy+sendRaw)
+    * [.rpc(method)](#TeraFy+rpc) ⇒ <code>Promise.&lt;\*&gt;</code>
+    * [.acceptMessage(Raw)](#TeraFy+acceptMessage)
+    * [.init()](#TeraFy+init)
+    * [.injectMain()](#TeraFy+injectMain)
+    * [.injectStylesheet()](#TeraFy+injectStylesheet)
+    * [.injectMethods()](#TeraFy+injectMethods)
+    * [.bindProjectState([options], Paths)](#TeraFy+bindProjectState) ⇒ <code>Promies.&lt;Reactive.&lt;Object&gt;&gt;</code>
+
+<a name="new_TeraFy_new"></a>
+
+### new TeraFy()
+Main Tera-Fy Client (class singleton) to be used in a frontend browser
+
+<a name="TeraFy+settings"></a>
+
+### teraFy.settings : <code>Object</code>
+Various settings to configure behaviour
+
+**Kind**: instance property of [<code>TeraFy</code>](#TeraFy)  
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| devMode | <code>Boolean</code> | Operate in devMode - i.e. force outer refresh when encountering an existing TeraFy instance |
+| siteUrl | <code>String</code> | The TERA URL to connect to |
+| restrictOrigin | <code>String</code> | URL to restrict communications to |
+
+<a name="TeraFy+dom"></a>
+
+### teraFy.dom : <code>Object</code>
+DOMElements for this TeraFy instance
+
+**Kind**: instance property of [<code>TeraFy</code>](#TeraFy)  
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| el | <code>DOMElement</code> | The main tera-fy div wrapper |
+| iframe | <code>DOMElement</code> | The internal iFrame element |
+| stylesheet | <code>DOMElement</code> | The corresponding stylesheet |
+
+<a name="TeraFy+methods"></a>
+
+### teraFy.methods : <code>Array.&lt;String&gt;</code>
+List of function stubs mapped here from the server
+This array is forms the reference of `TeraFy.METHOD()` objects to provide locally which will be mapped via `TeraFy.rpc(METHOD, ...args)`
+
+**Kind**: instance property of [<code>TeraFy</code>](#TeraFy)  
+<a name="TeraFy+acceptPostboxes"></a>
+
+### teraFy.acceptPostboxes
+Listening postboxes, these correspond to outgoing message IDs that expect a response
+
+**Kind**: instance property of [<code>TeraFy</code>](#TeraFy)  
+<a name="TeraFy+send"></a>
+
+### teraFy.send(message) ⇒ <code>Promise.&lt;\*&gt;</code>
+Send a message + wait for a response object
+
+**Kind**: instance method of [<code>TeraFy</code>](#TeraFy)  
+**Returns**: <code>Promise.&lt;\*&gt;</code> - A promise which resolves when the operation has completed with the remote reply  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| message | <code>Object</code> | Message object to send |
+
+<a name="TeraFy+sendRaw"></a>
+
+### teraFy.sendRaw(message)
+Send raw message content to the server
+This function does not return or wait for a reply - use `send()` for that
+
+**Kind**: instance method of [<code>TeraFy</code>](#TeraFy)  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| message | <code>Object</code> | Message object to send |
+
+<a name="TeraFy+rpc"></a>
+
+### teraFy.rpc(method) ⇒ <code>Promise.&lt;\*&gt;</code>
+Call an RPC function in the server instance
+
+**Kind**: instance method of [<code>TeraFy</code>](#TeraFy)  
+**Returns**: <code>Promise.&lt;\*&gt;</code> - The resolved output of the server function  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| method | <code>String</code> | The method name to call |
+| [...] | <code>\*</code> | Optional arguments to pass to the function |
+
+<a name="TeraFy+acceptMessage"></a>
+
+### teraFy.acceptMessage(Raw)
+Accept an incoming message
+
+**Kind**: instance method of [<code>TeraFy</code>](#TeraFy)  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| Raw | <code>MessageEvent</code> | message event to process |
+
+<a name="TeraFy+init"></a>
+
+### teraFy.init()
+Initalize the TERA client singleton
+
+**Kind**: instance method of [<code>TeraFy</code>](#TeraFy)  
+<a name="TeraFy+injectMain"></a>
+
+### teraFy.injectMain()
+Find an existing active TERA server OR initalize one
+
+**Kind**: instance method of [<code>TeraFy</code>](#TeraFy)  
+<a name="TeraFy+injectStylesheet"></a>
+
+### teraFy.injectStylesheet()
+Inject a local stylesheet to handle TERA server functionality
+
+**Kind**: instance method of [<code>TeraFy</code>](#TeraFy)  
+<a name="TeraFy+injectMethods"></a>
+
+### teraFy.injectMethods()
+Inject all server methods defined in `methods` as local functions wrapped in the `rpc` function
+
+**Kind**: instance method of [<code>TeraFy</code>](#TeraFy)  
+<a name="TeraFy+bindProjectState"></a>
+
+### teraFy.bindProjectState([options], Paths) ⇒ <code>Promies.&lt;Reactive.&lt;Object&gt;&gt;</code>
+Return a Vue reactive object that can be read/written which whose changes will transparently be written back to the TERA server instance
+
+**Kind**: instance method of [<code>TeraFy</code>](#TeraFy)  
+**Returns**: <code>Promies.&lt;Reactive.&lt;Object&gt;&gt;</code> - A reactive object representing the project state  
+
+| Param | Type | Default | Description |
+| --- | --- | --- | --- |
+| [options] | <code>Object</code> |  | Additional options to mutate behaviour |
+| [options.autoRequire] | <code>Boolean</code> | <code>true</code> | Run `requireProject()` automatically before continuing |
+| [options.write] | <code>Boolean</code> | <code>true</code> | Allow local reactivity to writes - send these to the server |
+| Paths | <code>Array.&lt;String&gt;</code> |  | to subscribe to e.g. ['/users/'], |
+

package/docs/terafy.server.md

@@ -0,0 +1,221 @@
+## Classes
+
+<dl>
+<dt><a href="#TeraFyServer">TeraFyServer</a></dt>
+<dd></dd>
+<dt><a href="#User">User</a></dt>
+<dd></dd>
+<dt><a href="#Project">Project</a></dt>
+<dd></dd>
+</dl>
+
+<a name="TeraFyServer"></a>
+
+## TeraFyServer
+**Kind**: global class  
+
+* [TeraFyServer](#TeraFyServer)
+    * [new TeraFyServer()](#new_TeraFyServer_new)
+    * [.settings](#TeraFyServer+settings) : <code>Object</code>
+    * [.sendRaw(message)](#TeraFyServer+sendRaw)
+    * [.acceptMessage(Raw)](#TeraFyServer+acceptMessage)
+    * [.handshake()](#TeraFyServer+handshake) ⇒ <code>Promise.&lt;Object&gt;</code>
+    * [.getUser()](#TeraFyServer+getUser) ⇒ [<code>Promise.&lt;User&gt;</code>](#User)
+    * [.getProject()](#TeraFyServer+getProject) ⇒ <code>Promise.&lt;(Project\|null)&gt;</code>
+    * [.getProjects()](#TeraFyServer+getProjects) ⇒ <code>Promise.&lt;Array.&lt;Project&gt;&gt;</code>
+    * [.requireProject()](#TeraFyServer+requireProject) ⇒ [<code>Promise.&lt;Project&gt;</code>](#Project)
+    * [.selectProject([options])](#TeraFyServer+selectProject) ⇒ [<code>Promise.&lt;Project&gt;</code>](#Project)
+    * [.getProjectStateSnapshot([options], Paths)](#TeraFyServer+getProjectStateSnapshot) ⇒ <code>Promise.&lt;Object&gt;</code>
+    * [.applyProjectStatePatch()](#TeraFyServer+applyProjectStatePatch)
+    * [.getProjectLibrary([options])](#TeraFyServer+getProjectLibrary) ⇒ <code>Promise.&lt;Array.&lt;RefLibRef&gt;&gt;</code>
+    * [.setProjectLibrary(Collection, [options])](#TeraFyServer+setProjectLibrary) ⇒ <code>Promise</code>
+    * [.init()](#TeraFyServer+init)
+
+<a name="new_TeraFyServer_new"></a>
+
+### new TeraFyServer()
+Server-side functions available to the Tera-Fy client library
+
+<a name="TeraFyServer+settings"></a>
+
+### teraFyServer.settings : <code>Object</code>
+Various settings to configure behaviour
+
+**Kind**: instance property of [<code>TeraFyServer</code>](#TeraFyServer)  
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| devMode | <code>Boolean</code> | Operate in devMode - i.e. force outer refresh when encountering an existing TeraFy instance |
+| restrictOrigin | <code>String</code> | URL to restrict communications to |
+
+<a name="TeraFyServer+sendRaw"></a>
+
+### teraFyServer.sendRaw(message)
+Send raw message content to the client
+
+**Kind**: instance method of [<code>TeraFyServer</code>](#TeraFyServer)  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| message | <code>Object</code> | Message object to send |
+
+<a name="TeraFyServer+acceptMessage"></a>
+
+### teraFyServer.acceptMessage(Raw)
+Accept a message from the parent event listener
+
+**Kind**: instance method of [<code>TeraFyServer</code>](#TeraFyServer)  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| Raw | <code>MessageEvent</code> | message event to process |
+
+<a name="TeraFyServer+handshake"></a>
+
+### teraFyServer.handshake() ⇒ <code>Promise.&lt;Object&gt;</code>
+Return basic server information as a form of validation
+
+**Kind**: instance method of [<code>TeraFyServer</code>](#TeraFyServer)  
+**Returns**: <code>Promise.&lt;Object&gt;</code> - Basic promise result  
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| date | <code>Date</code> | Server date |
+
+<a name="TeraFyServer+getUser"></a>
+
+### teraFyServer.getUser() ⇒ [<code>Promise.&lt;User&gt;</code>](#User)
+Fetch the current session user
+
+**Kind**: instance method of [<code>TeraFyServer</code>](#TeraFyServer)  
+**Returns**: [<code>Promise.&lt;User&gt;</code>](#User) - The current logged in user or null if none  
+<a name="TeraFyServer+getProject"></a>
+
+### teraFyServer.getProject() ⇒ <code>Promise.&lt;(Project\|null)&gt;</code>
+Get the currently active project, if any
+
+**Kind**: instance method of [<code>TeraFyServer</code>](#TeraFyServer)  
+**Returns**: <code>Promise.&lt;(Project\|null)&gt;</code> - The currently active project, if any  
+<a name="TeraFyServer+getProjects"></a>
+
+### teraFyServer.getProjects() ⇒ <code>Promise.&lt;Array.&lt;Project&gt;&gt;</code>
+Get a list of projects the current session user has access to
+
+**Kind**: instance method of [<code>TeraFyServer</code>](#TeraFyServer)  
+**Returns**: <code>Promise.&lt;Array.&lt;Project&gt;&gt;</code> - Collection of projects the user has access to  
+<a name="TeraFyServer+requireProject"></a>
+
+### teraFyServer.requireProject() ⇒ [<code>Promise.&lt;Project&gt;</code>](#Project)
+Ask the user to select a project from those available - if one isn't already active
+Note that this function will percist in asking the uesr even if they try to cancel
+
+**Kind**: instance method of [<code>TeraFyServer</code>](#TeraFyServer)  
+**Returns**: [<code>Promise.&lt;Project&gt;</code>](#Project) - The active project  
+<a name="TeraFyServer+selectProject"></a>
+
+### teraFyServer.selectProject([options]) ⇒ [<code>Promise.&lt;Project&gt;</code>](#Project)
+Prompt the user to select a project from those available
+
+**Kind**: instance method of [<code>TeraFyServer</code>](#TeraFyServer)  
+**Returns**: [<code>Promise.&lt;Project&gt;</code>](#Project) - The active project  
+
+| Param | Type | Default | Description |
+| --- | --- | --- | --- |
+| [options] | <code>Object</code> |  | Additional options to mutate behaviour |
+| [options.title] | <code>String</code> | <code>&quot;Select a project to work with&quot;</code> | The title of the dialog to display |
+| [options.allowCancel] | <code>Boolean</code> | <code>true</code> | Advertise cancelling the operation, the dialog can still be cancelled by closing it |
+
+<a name="TeraFyServer+getProjectStateSnapshot"></a>
+
+### teraFyServer.getProjectStateSnapshot([options], Paths) ⇒ <code>Promise.&lt;Object&gt;</code>
+Return the current, full snapshot state of the active project
+
+**Kind**: instance method of [<code>TeraFyServer</code>](#TeraFyServer)  
+**Returns**: <code>Promise.&lt;Object&gt;</code> - The current project state snapshot  
+
+| Param | Type | Default | Description |
+| --- | --- | --- | --- |
+| [options] | <code>Object</code> |  | Additional options to mutate behaviour |
+| [options.autoRequire] | <code>Boolean</code> | <code>true</code> | Run `requireProject()` automatically before continuing |
+| Paths | <code>Array.&lt;String&gt;</code> |  | to subscribe to e.g. ['/users/'], |
+
+<a name="TeraFyServer+applyProjectStatePatch"></a>
+
+### teraFyServer.applyProjectStatePatch()
+Apply a computed `just-diff` patch to the current project state
+
+**Kind**: instance method of [<code>TeraFyServer</code>](#TeraFyServer)  
+<a name="TeraFyServer+getProjectLibrary"></a>
+
+### teraFyServer.getProjectLibrary([options]) ⇒ <code>Promise.&lt;Array.&lt;RefLibRef&gt;&gt;</code>
+Fetch the active projects citation library
+
+**Kind**: instance method of [<code>TeraFyServer</code>](#TeraFyServer)  
+**Returns**: <code>Promise.&lt;Array.&lt;RefLibRef&gt;&gt;</code> - Collection of references for the selected library  
+
+| Param | Type | Default | Description |
+| --- | --- | --- | --- |
+| [options] | <code>Object</code> |  | Additional options to mutate behaviour |
+| [options.autoRequire] | <code>Boolean</code> | <code>true</code> | Run `requireProject()` automatically before continuing |
+| [options.multiple] | <code>Boolean</code> | <code>false</code> | Allow selection of multiple libraries |
+| [options.hint] | <code>String</code> \| <code>Array.&lt;String&gt;</code> |  | Hints to identify the library to select in array order of preference. Generally corresponds to the previous stage - e.g. 'deduped', 'review1', 'review2', 'dedisputed' |
+
+<a name="TeraFyServer+setProjectLibrary"></a>
+
+### teraFyServer.setProjectLibrary(Collection, [options]) ⇒ <code>Promise</code>
+Save back a projects citation library
+
+**Kind**: instance method of [<code>TeraFyServer</code>](#TeraFyServer)  
+**Returns**: <code>Promise</code> - A promise which resolves when the save operation has completed  
+
+| Param | Type | Default | Description |
+| --- | --- | --- | --- |
+| Collection | <code>Array.&lt;RefLibRef&gt;</code> |  | of references for the selected library |
+| [options] | <code>Object</code> |  | Additional options to mutate behaviour |
+| [options.autoRequire] | <code>Boolean</code> | <code>true</code> | Run `requireProject()` automatically before continuing |
+| [options.hint] | <code>String</code> |  | Hint to store against the library. Generally corresponds to the current operation being performed - e.g. 'deduped' |
+
+<a name="TeraFyServer+init"></a>
+
+### teraFyServer.init()
+Initialize the browser listener
+
+**Kind**: instance method of [<code>TeraFyServer</code>](#TeraFyServer)  
+<a name="User"></a>
+
+## User
+**Kind**: global class  
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| id | <code>String</code> | Unique identifier of the user |
+| email | <code>String</code> | The email address of the current user |
+| name | <code>String</code> | The provided full name of the user |
+| isSubscribed | <code>Boolean</code> | Whether the active user has a TERA subscription |
+
+<a name="new_User_new"></a>
+
+### new User()
+User / active session within TERA
+
+<a name="Project"></a>
+
+## Project
+**Kind**: global class  
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| id | <code>String</code> | The Unique ID of the project |
+| name | <code>String</code> | The name of the project |
+| created | <code>String</code> | The creation date of the project as an ISO string |
+| isOwner | <code>Boolean</code> | Whether the current session user is the owner of the project |
+
+<a name="new_Project_new"></a>
+
+### new Project()
+Project entry within TERA
+

package/index.html

@@ -0,0 +1,258 @@
+<html>
+<head>
+	<title>Tera-Fy documentation</title>
+
+	<!-- 3rd party libraries -->
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.3.6/vue.global.min.js" integrity="sha512-y5PnNJyq3UHlylzZhPzDDyrYC2pmfjBjlcaJL5fhzjj5EcUAYKeELoeCUT0Jc+r5IWzRgNGDE1XVxDAtkpdRlw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css" integrity="sha512-b2QcS5SsA8tZodcDtGRELiGv5SaKSk1vDHDaQRda0htPYWZ6046lr3kJ5bAAQdpV2mmA/4v0wQF9MyU6/pDIAg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+
+	<style>
+	.list-group-item-action {
+		user-select: none;
+		cursor: pointer;
+
+	}
+
+	.list-group-item-action select.form-control {
+		display: inline-flex;
+		max-width: 150px;
+	}
+	</style>
+
+	<script type="module">
+		import TeraFy from './dist/terafy.js';
+
+		Vue.createApp({
+			data() { return {
+				/**
+				* Actual TeraFy instance to use in testing
+				* @type {TeraFy}
+				*/
+				terafy: new TeraFy({
+					devMode: true,
+				}),
+
+				/**
+				* Last response from a method
+				* @type {String}
+				*/
+				response: '(Nothing)',
+
+				/**
+				* Whether the last response was classed as an error
+				* @type {Boolean}
+				*/
+				isError: null,
+			}},
+			methods: {
+				/**
+				* Run a named TERA-fy method within a safe context and display the result
+				* @param {String} method The method to run
+				* @param {*} [args...] Additional method arguments
+				*/
+				run(method, ...args) {
+					Promise.resolve()
+						.then(()=> this.terafy[method](...args))
+						.then(res => {
+							this.response = res;
+							this.isError = false;
+						})
+						.catch(e => {
+							this.response = 'Error: ' + e.toString();
+							console.warn('TERA threw error', e);
+							this.isError = true;
+						})
+				},
+			},
+			mounted() {
+				return this.terafy.init();
+			},
+		}).mount('#app');
+	</script>
+</head>
+<body>
+	<div id="app">
+		<div class="container pt-4">
+			<div class="row">
+				<div class="col-sm-12 col-md-6">
+
+					<!-- Client specifics {{{ -->
+					<div class="card mb-2">
+						<div class="card-header">Client Specifics</div>
+						<div class="card-body">
+							<div class="list-group">
+								<a
+									@click="run('toggleFullscreen')"
+									class="list-group-item list-group-item-action"
+								>
+									terafy.toggleFullscreen()
+								</a>
+
+								<a
+									@click="run('toggleDevMode')"
+									class="list-group-item list-group-item-action"
+								>
+									terafy.toggleDevMode()
+								</a>
+							</div>
+						</div>
+					</div>
+					<!-- }}} -->
+
+					<!-- Basics {{{ -->
+					<div class="card mb-2">
+						<div class="card-header">Basic</div>
+						<div class="card-body">
+							<div class="list-group">
+								<a
+									@click="run('handshake')"
+									class="list-group-item list-group-item-action"
+								>
+									terafy.handshake()
+								</a>
+							</div>
+						</div>
+					</div>
+					<!-- }}} -->
+
+					<!-- Session {{{ -->
+					<div class="card mb-2">
+						<div class="card-header">Session / User</div>
+						<div class="card-body">
+							<div class="list-group">
+								<a
+									@click="run('getUser')"
+									class="list-group-item list-group-item-action"
+								>
+									terafy.getUser()
+								</a>
+							</div>
+						</div>
+					</div>
+					<!-- }}} -->
+
+					<!-- Projects {{{ -->
+					<div class="card mb-2">
+						<div class="card-header">Projects</div>
+						<div class="card-body">
+							<div class="list-group">
+								<a
+									@click="run('bindProject')"
+									class="list-group-item list-group-item-action disabled"
+								>
+									terafy.bindProject()
+								</a>
+								<a
+									@click="run('getProject')"
+									class="list-group-item list-group-item-action"
+								>
+									terafy.getProject()
+								</a>
+								<a
+									@click="run('getProjects')"
+									class="list-group-item list-group-item-action"
+								>
+									terafy.getProjects()
+								</a>
+								<a
+									@click="run('requireProject')"
+									class="list-group-item list-group-item-action"
+								>
+									terafy.requireProject()
+								</a>
+								<a
+									@click="run('selectProject')"
+									class="list-group-item list-group-item-action"
+								>
+									terafy.selectProject()
+								</a>
+							</div>
+						</div>
+					</div>
+					<!-- }}} -->
+
+					<!-- Project State {{{ -->
+					<div class="card mb-2">
+						<div class="card-header">Project State</div>
+						<div class="card-body">
+							<div class="list-group">
+								<a
+									@click="run('getProjectStateSnapshot')"
+									class="list-group-item list-group-item-action"
+								>
+									terafy.getProjectStateSnapshot()
+								</a>
+								<a
+									@click="run('bindProjectState')"
+									class="list-group-item list-group-item-action disabled"
+								>
+									terafy.bindProjectState()
+								</a>
+								<a
+									@click="run('applyProjectStatePatch')"
+									class="list-group-item list-group-item-action disabled"
+								>
+									terafy.applyProjectStatePatch()
+								</a>
+							</div>
+						</div>
+					</div>
+					<!-- }}} -->
+
+					<!-- Project Libraries {{{ -->
+					<div class="card mb-2">
+						<div class="card-header">Project Libraries</div>
+						<div class="card-body">
+							<div class="list-group">
+								<a
+									@click="run('getProjectLibrary')"
+									class="list-group-item list-group-item-action"
+								>
+									terafy.getProjectLibrary({multiple: false})
+								</a>
+								<a
+									@click="run('getProjectLibrary', {multiple: true})"
+									class="list-group-item list-group-item-action"
+								>
+									terafy.getProjectLibrary({multiple: true})
+								</a>
+								<a
+									@click="run('setProjectLibrary')"
+									class="list-group-item list-group-item-action disabled"
+								>
+									terafy.setProjectLibrary()
+								</a>
+							</div>
+						</div>
+					</div>
+					<!-- }}} -->
+
+				</div>
+				<!-- Result area {{{ -->
+				<div class="col-sm-12 col-md-6">
+					<div class="card">
+						<div class="card-header d-flex justify-content-between align-items-center">
+							<div>Response</div>
+							<div>
+								<div v-if="isError" class="badge bg-danger">Error!</div>
+								<div v-else-if="isError !== null" class="badge bg-success">Success</div>
+							</div>
+						</div>
+						<div class="card-body" :class="isError && 'bg-danger'">
+							<pre
+								class="bg-light border p-2 rounded m-0"
+								:class="
+									isError === true ? 'bg-danger'
+									: isError === false ? 'bg-success'
+									: 'bg-light'
+								"
+							>{{response}}</pre>
+						</div>
+					</div>
+				</div>
+				<!-- }}} -->
+			</div>
+		</div>
+	</div>
+</body>
+</html>