Adswag banner development tool

This Node.js script serves an HTML file and dynamically injects a sidebar that allows for the live editing of content defined within a JSON configuration file. It enhances the web development experience by providing an interactive way to adjust and preview content in real-time without restarting the server or altering the original HTML file.

Features

• Interactive Sidebar: Adds a dynamic sidebar to your HTML content, featuring editable fields for each value specified in the JSON configuration.
• Open and Close Mechanism: The sidebar can be easily toggled open and closed using a sleek arrow button, providing a non-intrusive development tool.
• Live Reloading: Incorporates chokidar for watching changes in the HTML and JSON files, coupled with live-server for refreshing the served content automatically upon file modification.
• Command-Line Interface: Offers a straightforward CLI for specifying the banner name, which determines the paths to the JSON and HTML files to be used.

Installation

Install the CLI globally using npm to have it available across your system:

npm install -g @adswag/swagcli

Alternatively, you can use Yarn:

yarn global add @adswag/swagcli

Usage

After installation, run the tool by specifying the banner name. The script expects the JSON and HTML files to follow a naming convention based on the banner name provided:

swagcli --banner <banner_name>

Options

• -b, --banner: Specifies the name of the banner. The script looks for <banner_name>.html.descr for the JSON configuration and <banner_name>.html for the HTML file to serve.

JSON Configuration Format

The JSON file should contain two main sections: fields for editable values and files for file paths or URLs, each section containing objects with key, default, and label entries. Here's an example:

{
  "files": [
    {
      "key": "<IMAGE_SRC>",
      "default": "path/to/image.png",
      "label": "Main Image"
    }
  ],
  "fields": [
    {
      "key": "<CONTENT_1>",
      "default": "Initial content 1",
      "label": "Content Block 1"
    }
  ]
}

Dynamic Sidebar Behavior

The sidebar injected into the HTML document allows for the modification of values specified in the JSON file. Changes are reflected live in the HTML content through the sidebar interface but are not saved to disk, ensuring the original files remain unchanged. The sidebar features an intuitive toggle mechanism for opening and closing, facilitated by a visually pleasing arrow icon.

Local Development

For local development:

1. Ensure you have Node.js (version 16.x or higher) installed.
2. Clone the project repository and navigate to the project directory.
3. Install dependencies:

pnpm install

4. To run a demo, execute:

pnpm demo

This command runs the script with pre-configured options for a quick start.

License

This project is open-sourced under the MIT License. See the LICENSE file for more details.