# Display fiddle from a Github repository

## Demo directory structure

```
Demo Directory/
  demo.js
  demo.html
  demo.css
  demo.details
```

* **demo.\[ js | html | css ]** contains fiddle code for the specific panel
* **demo.details** is a description of the demo written in YAML

```
---
 name: Name of the Demo
 description: Some description, please keep it in one line
 authors:
   - John Doe
   - Jan Wisniewski
 resources:
   - http://some.url.com/some/file.js
   - http://other.url.com/other_filename.css
 normalize_css: no
 load_type: d
 ...
 
```

{% hint style="info" %}
All fields are optional
{% endhint %}

## Running demo in JSFiddle

URL segments in examples:

* `framework` – the desired framework to load along the code from repo
* `version` – substring of the framework version - the last passing will be used. If 1.3 will be given, JSFiddle will use the latest search result. it will favorize 1.3.2 over 1.3.1 and 1.3
* `dependency_list` – comma separated list of dependency substrings. It would mark any dependency containing the substring
* `github_tree` – the path to the directory used to display it on github page (without `http://github.com/`)

### Demo + no JS framework

For no framework and version use `library/pure`:

```
https://jsfiddle.net/gh/get/library/pure/{github_tree}/
```

{% hint style="info" %}
**Example:** [https://jsfiddle.net/gh/get/library/pure/{github\_tree}/](https://jsfiddle.net/gh/get/library/pure/%7Bgithub_tree%7D/)
{% endhint %}

### Demo + JS framework with a version

Demo with a preset framework (for example jQuery 3.0):

```
https://jsfiddle.net/gh/get/{framework}/{version}/{github_tree}/
```

{% hint style="info" %}
**Example:** [https://jsfiddle.net/gh/get/jquery/3.0/{github\_tree}](https://jsfiddle.net/gh/get/jquery/3.0/%7Bgithub_tree%7D)

This demo is fetched from the following repo:

<http://github.com/zalun/jsFiddleGithubDemo/tree/master/Demo/>
{% endhint %}

### Demo + JS framework with version + dependencies

Demo with a framework and external resources/dependencies

```
https://jsfiddle.net/gh/get/{framework}/{version}/dependencies/{dependency_list}/{github_tree}/
```

{% hint style="info" %}
**Example: #TODO**
{% endhint %}