Ramp 4 Config Editor

This is an interactive config creator and editor for RAMP4 config files.

🚧 Currently does not have 100% coverage of all configuration options 🚧

Basic Live Demo

Usage

When you start up the app, you will notice a fancy loading screen that says waiting for config. You need to use the app's API in order to "start" the app.

The API is available on the window object via the ramp4EditorAPI property. You can read the src/main.ts file for further details on what goodies the API provides.

To start the app, you'll want to open the console in your browser and do:

window.ramp4EditorAPI.initialize(ramp4Config, ramp4Options);

The app will be started with the initial config and options if you provide them. Otherwise, respectful defaults will be used.

Anytime you go into any of the sections and edit any property, the change is reflected immediately, without the need to press any save button. You can view your current config via:

window.ramp4EditorAPI.getConfig();

Storylines Integration

The easiest and best way to integrate this is by creating a build of the app via npm run build:lib-legacy, republishing the plugin via npm publish, and then updating the plugin in the Storylines Editor repo to the newest version. Note that the legacy option can be removed once the Storylines Editor migrates to Vite or a newer version of Vue CLI.

Recommended IDE Setup

VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).

Type Support for .vue Imports in TS

TypeScript cannot handle type information for .vue imports by default, so we replace the tsc CLI with vue-tsc for type checking. In editors, we need TypeScript Vue Plugin (Volar) to make the TypeScript language service aware of .vue types.

If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a Take Over Mode that is more performant. You can enable it by the following steps:

1. Disable the built-in TypeScript Extension
   1. Run Extensions: Show Built-in Extensions from VSCode's command palette
   2. Find TypeScript and JavaScript Language Features, right click and select Disable (Workspace)
2. Reload the VSCode window by running Developer: Reload Window from the command palette.

Customize configuration

See Vite Configuration Reference.

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Type-Check, Compile and Minify for Production

npm run build

Build Plugin

npm run build:lib
npm run build:lib-legacy (for apps with older builds)

Lint with ESLint

npm run lint

Demo Builds

When you push changes to your forked repo, a demo preview is automatically generated. The demo preview updates each time you push changes. Demo folders are deleted daily when the source branch or tag is deleted from your forked repo.

Accessing Your Demo Previews

• Branch or tag preview: Visit https://YOUR-GITHUB-USERNAME.github.io/config-editor/BRANCH-OR-TAG-NAME/index-ca-en.html to see a live preview of the branch or tag you pushed.
• List of all demos: View all your demo previews by navigating to https://github.com/YOUR-GITHUB-USERNAME/config-editor/tree/demo-page.

Enabling Demos for Your Forked Repo

To enable demo previews on your forked repository, update the following settings:

1. GitHub Pages: Go to Settings -> Pages -> Build and deployment source and select GitHub Actions.
2. Deployment branches and tags: Go to Settings -> Environments -> github-pages -> Deployment branches and tags and choose No restriction.
3. Actions permissions: Go to Settings -> Actions -> General -> Actions permissions and select Allow all actions and reusable workflows.
4. Workflow permissions: Go to Settings -> Actions -> General -> Workflow permissions and select Read and write permissions.
5. Enable workflows: Go to the Actions tab and click I understand my workflows, go ahead and enable them. If workflows are already enabled for your fork, this prompt will not appear.