roza / interactive-examples

Home of the MDN live code editor interactive examples

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

interactive-examples

Build Status

code style: prettier

Home of the MDN interactive code examples.

Folder structure

  • [css] - This contains the CSS used by the base templates.
  • [js] - This contains the JS used by the base templates.
  • [live-examples] - This contains the live example CSS and JS fragments.
  • [media] - The contains images used by the live examples and templates.
  • [tmpl] - The base templates.

The dynamically generated pages, their dependencies, and assets are generated to the gh-pages branch.

site.json

This describes the pages and bundles that make up the live examples.

Bundles

Bundles are mainly used by the base templates, and look like so:

"cssExamplesBase": {
    "javascript": ["js/lib/prism.js", "js/editable-css.js"],
    "css": ["css/editable-css.css", "css/libs/prism.css"],
    "destFileName": "css-examples-base"
},
  • javascript - This is an array of JS files that will be concatenated and Uglified.
  • css - This is an array of CSS files that will be concatenated.
  • destFileName - The file name to use for the generated bundle; .css or .js will be appended as appropriate.

Pages

This section is used to describe live example pages that will be generated. The schema is as follows:

"arrayFind": {
    "baseTmpl": "tmpl/live-js-tmpl.html",
    ["cssExampleSrc": "../../live-examples/css-examples/css/animation.css",]
    ["jsExampleSrc": "../../live-examples/js-examples/array-find.js",]
    ["exampleCode": "live-examples/css-examples/border-top-color.html",]
    "fileName": "array-find.html",
    "type": "js"
},
  • baseTmpl - The base template to use for this example.
  • cssExampleSrc - The file location that will be used as the value for the href attribute of a link tag.
  • jsExampleSrc - The file location that will be used as the value for the src attribute of a script tag.
  • exampleCode - This is currently only used by the CSS examples, and points to the location of the relevant live example HTML file.
  • fileName - This is the file name that will be used for the generated live example page.
  • type - The type of example; currently the only available types are js (JavaScript) or css.

Browser support baseline

The following is a list of browser/version combinations that are supported by the interactive editor. In browsers that do not meet the criteria, the editor degrades gracefully to displaying static examples.

  • Firefox - Latest three release versions.
  • Chrome - Latest three release versions.
  • Opera - Latest two release versions.
  • Safari - Latest two release versions.
  • Internet Explorer - version 11.
  • Edge - Latest release version.

Contributing

If you're interested in contributing to this project, great! Please see the CONTRIBUTING document.

Contributors

Thanks goes to these wonderful people (emoji key):


Schalk Neethling

πŸ’» πŸ“– ⚠️

Mark Boas

πŸ’» πŸ“–

William Bamberg

πŸ’» πŸ“–

Stephanie Hobson

πŸ’»

Josh Mize

πŸ’»

Chris Mills

πŸ“–

Dave Parfitt

πŸ’»

Normal Human

πŸ“–

Gal Pasternak

πŸ“–

SphinxKnight

πŸ’»

Ayush Gupta

πŸ’»

John Whitlock

πŸ’» πŸš‡

mfluehr

πŸ’» πŸ“–

Paul Irish

πŸ’»

Dhruv Jain

πŸ’»

Ivan Ng

πŸ’»

CShepartd

πŸ’»

Kenrick

πŸ’» ⚠️

Anton Boyko

πŸ’»

Daniel Hickman

πŸ’»

Rachel Andrew

πŸ’»

Helmut Granda

πŸ’»

Dominic Duffin

πŸ’»

Darek Antkowicz

πŸ’»

Ben

πŸ’»

Ben Stokes

πŸ’»

Veekas Shrivastava

πŸ’»

Brian Macdonald

πŸ’»

Mathias Arens

πŸ’»

ClΓ©ment P

πŸ’»

Patrick Lienau

πŸ’»

yisibl

πŸ’»

Ian Sanders

πŸ’»

Nikolay Puzyrev

πŸ’»

Marek Pepke

πŸ’»

Rudz Boy

πŸ’»

This project follows the all-contributors specification. Contributions of any kind welcome!

About

Home of the MDN live code editor interactive examples

License:Creative Commons Zero v1.0 Universal


Languages

Language:HTML 47.8%Language:JavaScript 45.5%Language:CSS 6.4%Language:Shell 0.3%