{"id":20438420,"url":"https://github.com/tinymce/antora-extension-livedemos","last_synced_at":"2026-04-16T23:02:33.291Z","repository":{"id":57698604,"uuid":"505654665","full_name":"tinymce/antora-extension-livedemos","owner":"tinymce","description":"Antora Live demos extension for TinyMCE docs","archived":false,"fork":false,"pushed_at":"2023-10-16T23:39:51.000Z","size":75,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":11,"default_branch":"main","last_synced_at":"2025-02-15T15:50:16.159Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tinymce.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.TXT","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null}},"created_at":"2022-06-21T01:49:11.000Z","updated_at":"2023-01-20T05:28:54.000Z","dependencies_parsed_at":"2023-10-17T05:39:35.148Z","dependency_job_id":null,"html_url":"https://github.com/tinymce/antora-extension-livedemos","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tinymce%2Fantora-extension-livedemos","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tinymce%2Fantora-extension-livedemos/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tinymce%2Fantora-extension-livedemos/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tinymce%2Fantora-extension-livedemos/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tinymce","download_url":"https://codeload.github.com/tinymce/antora-extension-livedemos/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241983600,"owners_count":20052711,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-15T09:10:58.501Z","updated_at":"2025-12-04T02:03:51.132Z","avatar_url":"https://github.com/tinymce.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Antora extension live demos\n\nThis repo maintains an Antora extension which enables live demos for [TinyMCE docs](https://www.tiny.cloud/docs).\n\n# How to\n\n1. Install dependency\n  ```bash\n    yarn add -D @tinymce/antora-extension-livedemos\n  ```\n\n2. Configure the `tinymce_live_demo_url` attribute in the Antora playbook config\n```yml\n  asciidoc\n    attributes:\n      tinymce_live_demo_url: URL_to_script_file\n```\n\n3. Add the dependency name to the config file to enable\n```yml\nasciidoc:\n  extensions:\n    - '@tinymce/antora-extension-livedemos'\n```\n\n# Usage\n\nUse macro `liveDemo::\u003cid\u003e[]` to enable a live demo in your article. For example:\n\n```\nliveDemo::hello-world[]\n```\n\nFiles are required to be under the `examples/live-demos/\u003cid\u003e/` directory in your Antora module. The following files are available for use:\n  - index.html\n  - index.js\n  - index.css (optional)\n  - example.js (optional)\n  - example.html (optional)\n\n**Note:** If `index.css` is omitted, the CSS tab will not display. [Here](./live-demos/hello-world/) is a simple demo for the above example\n\n## The purpose of `example.js`\n\nWhen the file is present the live-demo js tab will display the contents of `example.js`, while the real demo code executes with `index.js`. Useful for when we want to hide actual `api-keys` or `tokens`: 'example-token'. When the `example.js` file is present, the link to the external codepen site is disabled.\n\n## Parameters\n\n  - id (required): Folder for files, and used in CSS classes\n  - type (optional): Specifies if the example is `tinymce` or `tinydrive` specific. Default is `tinymce`\n  - tab (optional): The first tab to open. Valid options are \"run\", \"html\", \"css\" or \"js\". Default to \"run\"\n  - height (optional - no default): `min-height` in pixels\n  - script_url_override (optional - no default):\n    - Override the full tinymce.min.js URL, including api key\n    - Useful for testing things that aren't in the main channel, yet\n    - Remove this setting once the feature is in the main channel\n\n**Note**: Provide optional parameters in comma separated name-value pairs into the square bracket following `id`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftinymce%2Fantora-extension-livedemos","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftinymce%2Fantora-extension-livedemos","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftinymce%2Fantora-extension-livedemos/lists"}