# 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}/>
{% 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}>

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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.jsfiddle.net/github-integration/untitled-1.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.