justinfagnani/gist-server.json

## gist-server.json
{
  "font-roboto": "https://raw.githubusercontent.com/PolymerElements/font-roboto/v1.0.1/",
  "iron-flex-layout": "https://raw.githubusercontent.com/PolymerElements/iron-flex-layout/v1.0.2/",
  "paper-material": "https://raw.githubusercontent.com/PolymerElements/paper-material/v1.0.1/",
  "paper-styles": "https://raw.githubusercontent.com/PolymerElements/paper-styles/v1.0.10/",
  "polymer": "https://raw.githubusercontent.com/Polymer/polymer/v1.0.7/",
  "webcomponentsjs": "https://raw.githubusercontent.com/webcomponents/webcomponentsjs/v0.7.7/"
}

## index.html
<!doctype html>

<html>
  <head>
    <link rel="import" href="../paper-material/paper-material.html">
    <link rel="import" href="../paper-styles/paper-styles.html">
    <link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
    <style is="custom-style">
      html, body {
        margin: 0;
        padding: 0;
        height: 100%;
      }
      body {
        @apply(--paper-font-body1);
        background: var(--paper-cyan-500);
        display: flex;
        @apply(--layout-center-center);
        padding: 64px 0;
      }
      h1 {
        @apply(--paper-font-headline);
      }
      h2 {
        @apply(--paper-font-title);
      }
      code {
        @apply(--paper-font-code1);
        background: var(--paper-grey-100);
        white-space: pre;
      }
      code.block {
        display: block;
        padding: 8px;
        margin: 8px;
        overflow-y: auto;
      }
      #content {
        width: 80%;
        max-width: 960px;
        background: white;
        padding: 16px;
      }
    </style>
  </head>
  <body>
    <paper-material id="content" elevation="2">
      <h1>gist-server.appspot.com</h1>
      <p>
        gist-server.appspot.com is a proxy server that can run GitHub Gists is a way that's compatible with package
        managers and HTML imports.
      </p>
      <h2>What it Does</h2>
      <p>
        gist-server does two main things:
        <ol>
          <li>
            Proxies files from a Gist with the correct mime-type. This lets you run a Gist in a browser
          </li>
          <li>
            Proxies files outside of a Gist according to a mapping stored in the Gist. This lets Gists refer to
            external components like those that would be installed via a package manager like Bower.
          </li>
        </ol>
      </p>
      <h2>How it Works</h2>
      <p>
        gist-server uses the GitHub Gist API to load files from a Gist and serve them with the correct mime-type, all
        based on the URL given to gist-server.
      </p>
      <p>
        A URL like this:
        <code class="block">http://gist-server.appspot.com/gist/{ gist_id }/_files_/{ filename }</code>
        will serve the file { filename } from the Gist { gist_id }, with a ContentType header determined by the file's
        extension.
      </p>
      <p>
        gist-sever will serve files from other locations based on a mapping store in <code>gist-server.json</code>.
        Given this mapping:
        <code class="block">{
  "polymer": "https://raw.githubusercontent.com/Polymer/polymer/v1.0.7/",
  "webcomponentsjs": "https://raw.githubusercontent.com/webcomponents/webcomponentsjs/v0.7.7/"
}</code>
        <code>http://gist-server.appspot.com/gist/my-gist/polymer/polymer.html</code> will serve the file located at
        <code>https://raw.githubusercontent.com/Polymer/polymer/v1.0.7/polymer.html</code>.
      </p>
      <p>
        The remapping of URLs allows components to refer to each other via relative URLs, which is the convention for
        Bower packages. For instance, the relative URL <code>../polymer/polymer.html</code> will work from files in the
        Gist and in other components loaded via gist-server.
      </p>
      <h2>Generating the Mapping</h2>
      <p>
        A tool to generate the mapping file from a Bower installation will be available soon.
      </p>
      <h2>Example</h2>
      <p>
        You're looking at one! The Gist that defines this page is available here:
        <a href="https://gist.github.com/justinfagnani/1879f8ccc91b3d956153">https://gist.github.com/justinfagnani/1879f8ccc91b3d956153</a>
      </p>
    </paper-material>
  </body>
</html>
	{
	"font-roboto": "https://raw.githubusercontent.com/PolymerElements/font-roboto/v1.0.1/",
	"iron-flex-layout": "https://raw.githubusercontent.com/PolymerElements/iron-flex-layout/v1.0.2/",
	"paper-material": "https://raw.githubusercontent.com/PolymerElements/paper-material/v1.0.1/",
	"paper-styles": "https://raw.githubusercontent.com/PolymerElements/paper-styles/v1.0.10/",
	"polymer": "https://raw.githubusercontent.com/Polymer/polymer/v1.0.7/",
	"webcomponentsjs": "https://raw.githubusercontent.com/webcomponents/webcomponentsjs/v0.7.7/"
	}
	<!doctype html>

	<html>
	<head>
	<link rel="import" href="../paper-material/paper-material.html">
	<link rel="import" href="../paper-styles/paper-styles.html">
	<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
	<style is="custom-style">
	html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	}
	body {
	@apply(--paper-font-body1);
	background: var(--paper-cyan-500);
	display: flex;
	@apply(--layout-center-center);
	padding: 64px 0;
	}
	h1 {
	@apply(--paper-font-headline);
	}
	h2 {
	@apply(--paper-font-title);
	}
	code {
	@apply(--paper-font-code1);
	background: var(--paper-grey-100);
	white-space: pre;
	}
	code.block {
	display: block;
	padding: 8px;
	margin: 8px;
	overflow-y: auto;
	}
	#content {
	width: 80%;
	max-width: 960px;
	background: white;
	padding: 16px;
	}
	</style>
	</head>
	<body>
	<paper-material id="content" elevation="2">
	<h1>gist-server.appspot.com</h1>
	<p>
	gist-server.appspot.com is a proxy server that can run GitHub Gists is a way that's compatible with package
	managers and HTML imports.
	</p>
	<h2>What it Does</h2>
	<p>
	gist-server does two main things:
	<ol>
	<li>
	Proxies files from a Gist with the correct mime-type. This lets you run a Gist in a browser
	</li>
	<li>
	Proxies files outside of a Gist according to a mapping stored in the Gist. This lets Gists refer to
	external components like those that would be installed via a package manager like Bower.
	</li>
	</ol>
	</p>
	<h2>How it Works</h2>
	<p>
	gist-server uses the GitHub Gist API to load files from a Gist and serve them with the correct mime-type, all
	based on the URL given to gist-server.
	</p>
	<p>
	A URL like this:
	<code class="block">http://gist-server.appspot.com/gist/{ gist_id }/_files_/{ filename }</code>
	will serve the file { filename } from the Gist { gist_id }, with a ContentType header determined by the file's
	extension.
	</p>
	<p>
	gist-sever will serve files from other locations based on a mapping store in <code>gist-server.json</code>.
	Given this mapping:
	<code class="block">{
	"polymer": "https://raw.githubusercontent.com/Polymer/polymer/v1.0.7/",
	"webcomponentsjs": "https://raw.githubusercontent.com/webcomponents/webcomponentsjs/v0.7.7/"
	}</code>
	<code>http://gist-server.appspot.com/gist/my-gist/polymer/polymer.html</code> will serve the file located at
	<code>https://raw.githubusercontent.com/Polymer/polymer/v1.0.7/polymer.html</code>.
	</p>
	<p>
	The remapping of URLs allows components to refer to each other via relative URLs, which is the convention for
	Bower packages. For instance, the relative URL <code>../polymer/polymer.html</code> will work from files in the
	Gist and in other components loaded via gist-server.
	</p>
	<h2>Generating the Mapping</h2>
	<p>
	A tool to generate the mapping file from a Bower installation will be available soon.
	</p>
	<h2>Example</h2>
	<p>
	You're looking at one! The Gist that defines this page is available here:
	<a href="https://gist.github.com/justinfagnani/1879f8ccc91b3d956153">https://gist.github.com/justinfagnani/1879f8ccc91b3d956153</a>
	</p>
	</paper-material>
	</body>
	</html>