Don't create PRs for this project, demos are not in demo-framework
In order to create a new demo you need to create a new folder in either the encoding, analytics, or player folder with the following contents:
info.yaml(required) - Demo configurationindex.html(optional) - Entry point of the demoicon.svg(optional) - The demo iconcss/(optional) - Add custom.cssfiles withing this folderjs/(optional) - Add custom.jsfiles within this folder
This section will explain what information in your YAML file will be processed and how
The title is used to display the demo in the overview and is rendered in the detail view as a header
An optional short description which will be displayed in the overview. In the detail view this description will only be rendered if there is no <div class="description"> in the demo's index.html file
A mandatory section defining the contents of the demo detail page
executable:trueorfalse
Specifies if the files should be rendered in native html and contain codeindexfile: e.g.index.html
Sets the root file which is used to be rendered as the content of the demo
An optional section giving information about the code snippets which will be displayed on the demo detail page.
show_code:trueorfalse
Should code snippets be includedlanguage: e.g.,js,java,c
The default language of the code snippets which will be used for the markup, supported languages can be found here: https://github.com/jneen/rouge/wiki/List-of-supported-languages-and-lexersfiles
a list of files which should be included as code snippets (not actually executed, but displayed in raw text. JavaScript code to be executed must go intojs/). These snippets will be displayed automatically at the end of the demo page, unless not specified elsewhere (see Template Patterns).
An optional list of tags which are used to filter the overview. Categories will be automatically added as tag.
If your demo should show up in more than one category in the overview you can add the additional categories here.
The original category (the folder the demo lies in) is always included automatically.
Possible values are analytics, encoding, and player
Optional configuration that affects sorting. Defaults to 0.
Remove the link to the GitHub repository by setting this to true. Defaults to false.
Add a list of buttons, where each entry should have the following data:
name
A unique identifiertext
Display texturl
Go there on button clickname
An icon name
title: Hello World
executable:
executable: false
indexfile: index.htmlThe following patterns will be replaced in the demo's index page:
To specify the location of code snippets (defined in code.files of info.yaml) to be displayed, use the following:
${code:myFile.css:css}
While the
:csspart may be omitted, it can be used to overwrite the default, set incode.languageofinfo.yaml.
If the demo template contains this element for the title, it will overwrite title from info.yaml
Also description of info.yaml may be overwritten with a custom element.