Added the Documentation for all HTML, js files and README

.github/workflows/cicd.yml

@@ -20,7 +20,7 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: '16'
+          node-version: '22'
 
       # Step 3: Deploy to GitHub Pages
       - name: Deploy to GitHub Pages

README.md

@@ -33,6 +33,65 @@ This project allows users to create, interact with, and manage IIIF-compliant JS
 - **`.github/`**: GitHub-specific configuration files for CI workflows.
 - **`README.md`**: Setup and project overview.
 
+## Sandbox Implementation
+
+The Sandbox provides an interactive environment for experimenting with CRUD operations against the RERUM API and for testing JSON payloads and UI interactions before integrating with other tools.
+
+Purpose:
+- Allows users to create, read, update, overwrite, delete, and view JSON objects via a simple UI.
+- Serves as a playground for developers to test app-level behaviors and example workflows without affecting production data.
+
+Main files:
+- `/web/js/sandbox.js` — Contains the sandbox UI logic, including `showSection(id)` to switch visible sandbox panels and placeholder action handlers bound to `.action-btn` elements.
+- `/web/sandbox.html` — The sandbox HTML page that loads the sandbox UI and includes buttons and sections for Create, Read, Update, Overwrite, Delete, and View workflows.
+
+Documentation:
+- A full reference for the sandbox implementation is available in the project's Docusaurus docs: `docs/docs/sandbox.md` (renders at the docs site as the Sandbox reference page).
+
+### Usage & setup
+
+You can access and test the Sandbox in two quick ways depending on your needs:
+
+- Open the standalone page (fast, no install):
+
+   1. Use the live-server extension to open sandbox by right-clicking `web/sandbox.html` and choose "Open with Live Server" (recommended).
+   2. The page will open in your browser and the client-side sandbox UI will be available immediately. The sandbox uses client-side placeholders for actions; no server/backend is required to try the UI.
+
+- Run the docs site locally (if you want the Docusaurus docs and integrated site):
+
+   1. Ensure Node.js is >= 18: `node -v` (Docusaurus preset in `docs/package.json` requires Node 18+).
+   2. From the `docs/` folder, install dependencies:
+
+       ```powershell
+       cd docs
+       npm install
+       ```
+
+   3. Start the Docusaurus dev server:
+
+       ```powershell
+       npm run start
+       ```
+
+   4. Open the local site URL printed by the dev server (usually http://localhost:3000) and navigate to the "Sandbox" docs page.
+
+   Note: If `docusaurus` is not recognized, use `npx docusaurus start` as a fallback or ensure dependencies installed correctly. See `docs/package.json` for required packages.
+
+### Dependencies & configuration
+
+- Node.js >= 18 (only required to run the Docusaurus docs site).
+- VS Code Live Server extension (recommended) for quickly opening `web/sandbox.html`.
+- No backend is required to use the placeholder sandbox UI; real CRUD operations would require a reachable RERUM API endpoint and appropriate credentials.
+
+### For contributors
+
+- The Sandbox is intended as an experimentation and testing area for the RERUM Playground. Contributions are welcome — please open issues or pull requests to improve the UI, add real API integrations, or expand the documentation.
+- Documentation changes should be made under the `docs/docs/` folder (for example, `docs/docs/sandbox.md`) so the Docusaurus site can render updates.
+
+### Docs link
+
+View the project's documentation (local Docusaurus site) in `docs/` or the rendered docs when hosted. To quickly find the Sandbox reference in the repo, see: `docs/docs/sandbox.md`.
+
 ## Contributing
 
 Contributions are welcome! Check out the `CONTRIBUTING.md` for guidelines.

docs/docs/about.md

@@ -0,0 +1,68 @@
+# about.html Documentation
+## About the "about.html" File 
+This html file presents the about page in the RERUM Playground website explaining what RERUM is about and details of RERUM playground's elements.
+
+
+## Structure Overview 
+
+**head Container**
+
+- Consists of links to specific JavaScript files for functionality 
+and css files for the page aesthetics.
+
+**body Container**
+
+- Consists of elements being displayed on the website.
+
+### Classes
+
+**div class = "header"**
+- Represents the top portion of the RERUM about page shown below.
+![image](./Images/about/header.png)
+
+**div class = "content"** 
+- Represents the middle portion of the RERUM about page showing what
+RERUM Playground is and some of their elements in detail shown below.
+
+![image](./Images/about/content.png)
+
+**div class = "json"** 
+- Represents an example
+a description of an object in JSON looks like shown below.
+
+![image](./Images/about/jsonexample.png)
+
+**div class = "spacer"**
+- A dedicated empty div element intended to provide necessary vertical spacing at the bottom of the page, ensuring content does not overlap the fixed-position page footer.
+
+### IDs
+
+**div id = "menu-placeholder"**
+- Container where only the
+menu elements would go.
+
+**div id = "footer-placeholder"** 
+- Container where only the
+footer elements would go.
+
+### Linked Files
+
+**JavaScript**
+- playground.js
+- about.js (Not in Repository)
+
+**CSS**
+- playground.css
+- about.css
+
+## Integration with JavaScript
+
+**function openCloseMenu() function** 
+- Triggered when the user clicks
+on the three horizontal lines symbol at the header, which opens or closes the menu.
+
+**fetch('footer.html')** 
+- Fetches elements belonging to the footer-placeholder ID.
+
+**fetch('menu.html')** 
+- Fetches elements belonging to the menu-placeholder ID.

docs/docs/config.md

@@ -0,0 +1,92 @@
+
+# Configuration Reference: config.js
+
+This document describes the configuration options available in `config.js` for the RERUM Playground web application.
+
+## Overview and Purpose
+`config.js` exports a global configuration object for the app, centralizing URLs, event names, logging levels, version info, and catalogs for tools, interfaces, and technologies. This module enables consistent configuration and integration across the playground.
+
+---
+
+## Property Descriptions
+
+### URLS
+- **Type:** `object`
+- **Purpose:** Endpoints for interacting with RERUM services.
+- **Properties:**
+	- `CREATE`, `UPDATE`, `PATCH`, `OVERWRITE`, `QUERY`, `SINCE`, `HISTORY` (all `string` URLs)
+
+### EVENTS
+- **Type:** `object`
+- **Purpose:** Event names used throughout the app for broadcasting and handling UI/application state changes.
+- **Properties:**
+	- `CREATED`, `UPDATED`, `LOADED`, `NEW_VIEW`, `VIEW_RENDERED`, `CLICKED` (all `string` event names)
+
+### APPAGENT
+- **Type:** `string`
+- **Purpose:** Identifier for the registered app agent. Should be set after registering a new app with RERUM.
+
+### LOGLEVEL
+- **Type:** `number`
+- **Purpose:** Controls the verbosity of logging throughout the app.
+- **Values:**
+	- `0`: OFF
+	- `6`: TRACE
+	- `5`: DEBUG
+	- `4`: INFO
+	- `3`: WARNING (default)
+	- `2`: ERROR
+	- `1`: FATAL
+
+### VERSION
+- **Type:** `string`
+- **Purpose:** Current version of the playground app.
+
+### TOOLS
+- **Type:** `object`
+- **Purpose:** Catalog of available tools for the playground.
+- **Properties:**
+	- `id` (`string`): DOM id for the tool set container.
+	- `catalog` (`array`): Imported from `toolsCatalog.js`.
+
+### INTERFACES
+- **Type:** `object`
+- **Purpose:** Catalog of available interfaces (currently empty).
+- **Properties:**
+	- `id` (`string`): DOM id for the interface set container.
+	- `catalog` (`array`): Intended for interface definitions.
+
+### TECHNOLOGIES
+- **Type:** `object`
+- **Purpose:** Catalog of available technologies (currently empty).
+- **Properties:**
+	- `id` (`string`): DOM id for the technology set container.
+	- `catalog` (`array`): Intended for technology definitions.
+
+---
+
+## Example Usage/Workflow Snippet
+
+```javascript
+import config from './config.js';
+
+// Access the CREATE endpoint
+fetch(config.URLS.CREATE, { method: 'POST', body: JSON.stringify({}) });
+
+// Use an event name
+document.dispatchEvent(new CustomEvent(config.EVENTS.CREATED));
+
+// List all tool labels
+config.TOOLS.catalog.forEach(tool => console.log(tool.label));
+```
+
+---
+
+## Dependencies/Relationships
+- Imports `ToolsCatalog` from `toolsCatalog.js` for the tools catalog.
+- Used by most modules for configuration, event names, and endpoint URLs.
+- Can be extended to import interface/technology catalogs from other repositories.
+
+---
+
+For further details, see the source file: `web/js/config.js`.

docs/docs/footer.md

@@ -0,0 +1,30 @@
+# footer.html Documentation
+## About the "footer.html" File 
+The footer.html file represents the bottom of the page with various links to specific pages.
+
+
+## Structure Overview 
+
+**footer Container**
+- Consists of elements being displayed on the website shown below.
+
+![image](./Images/footer/footer.png)
+
+### Classes
+
+**div class = "footerButtons"**
+- Represents all buttons within the footer container.
+
+
+**div class = "button"**
+- Represents a clickable button to a specified link.
+
+**i class = "fa fa-symbolname"**
+- Represents a symbols on the footer to represent
+specific site locations.
+
+### Linked Files
+
+**CSS**
+- font-awesome.min.css (external link)
+- footer.css

docs/docs/index.md

@@ -0,0 +1,64 @@
+# index.html Documentation
+## About the "index.html" File 
+This html file is presented as the welcome page of RERUM Playground.
+This displays the welcome messages.
+
+## Structure Overview 
+
+**head Container**
+
+- Consists of links to specific JavaScript files for functionality 
+and css files for the page aesthetics.
+
+**body Container**
+
+- Consists of elements being displayed on the website.
+
+### Classes
+
+**div class = "header"**
+- Represents the top portion of the RERUM about page shown below.
+![image](./Images/about/header.png)
+
+**div class = "container"** 
+- Represents the page space between the header and the footer.
+
+**div class = "placeholder"** 
+- Represents the spacing between the footer and the welcome
+message content.
+
+**div class = "content"** 
+- Represents the middle portion of the RERUM about page showing a welcome message shown below.
+![image](./Images/index/content.png)
+
+### IDs
+
+**div id = "menu-placeholder"** 
+- container where only the
+menu elements would go.
+
+**div id = "footer-placeholder"** 
+- container where only the
+footer elements would go.
+
+### Linked Files
+
+**JavaScript**
+- playground.js
+- about.js (Not in Repository)
+
+**CSS**
+- playground.css
+- about.css
+
+## Integration with JavaScript
+
+**function openCloseMenu() function** 
+- Triggered when the user clicks
+on the three horizontal lines symbol at the header, which opens or closes the menu.
+
+**fetch('footer.html')** 
+- Fetches elements belonging to the footer-placeholder ID.
+
+**fetch('menu.html')** 
+- Fetches elements belonging to the menu-placeholder ID.

docs/docs/json-utils.md

@@ -0,0 +1,62 @@
+# JSON Utilities Reference: json-utils.js
+
+This document describes the small JSON helper utilities provided by `json-utils.js` for the RERUM Playground project.
+
+## Overview and Purpose
+`json-utils.js` provides two focused helpers for working with JSON strings and objects:
+- `prettifyJSON` — formats JSON with indentation for human-readable display, and returns a helpful error message when input is not valid JSON.
+- `validateJSON` — returns a boolean indicating whether a string is valid JSON.
+
+These helpers are useful when accepting JSON input from users, preparing JSON for display, or performing quick client-side validation before sending data to APIs.
+
+---
+
+## Function Descriptions
+
+### prettifyJSON(input)
+- **Parameters:**
+  - `input` (`string | object`) — A JSON string or a plain JavaScript object.
+- **Returns:** `string`
+- **Behavior:**
+  - If `input` is a string, attempts to `JSON.parse` it to an object. If parsing succeeds, returns `JSON.stringify(obj, null, 2)` (pretty-printed JSON with 2-space indentation).
+  - If `input` is already an object, returns its pretty-printed JSON representation.
+  - If parsing fails, returns a short error string that begins with `Invalid JSON:` and includes the parser's error message.
+
+### validateJSON(input)
+- **Parameters:**
+  - `input` (`string`) — A string that should contain JSON.
+- **Returns:** `boolean`
+- **Behavior:**
+  - Attempts to `JSON.parse(input)` and returns `true` when parsing succeeds, otherwise returns `false` when parsing throws an error.
+
+---
+
+## Example Usage / Workflow Snippet
+
+```javascript
+// CommonJS usage (as in this project)
+const { prettifyJSON, validateJSON } = require('../web/js/json-utils.js');
+
+const raw = '{"name":"Alice","age":30}';
+if (validateJSON(raw)) {
+  const pretty = prettifyJSON(raw);
+  console.log(pretty);
+} else {
+  console.warn('Provided input is not valid JSON');
+}
+
+// Passing an object directly
+const obj = { a: 1, b: [2,3] };
+console.log(prettifyJSON(obj));
+```
+
+---
+
+## Dependencies / Relationships
+- No external dependencies — uses the built-in `JSON` global.
+- The test file `web/js/json-utils.test.js` exercises these functions (see `json-utils.test.md`).
+- Use these helpers in UI code that reads user-supplied JSON or displays API responses.
+
+---
+
+For further details, see the source file: `web/js/json-utils.js`.