Make Gists human-readable

[jgierer12]

Currently, CodePan stores Gists in a way that is not very readable. CodePan-generated Gists would be much better to share if they were readable by humans without viewing through CodePan.

I suggest the following:

• Store all CodePan config like opened pans in a file like codepan.json

• Store pan contents in separate files like index.html, index.js, index.css

• Infer pan and transformer from file extension like this:

  Filename	Pan	Transformer
  *.html	HTML	HTML
  *.scss	CSS	SCSS
  *.ts	JS	TypeScript

  This can be overwritten in the CodePan config like so:

  codepan.json

  {
    "files": {
      "index.js": {
        "transformer": "babel"
      },
      "test.txt": {
        "pan": "html",
        "transformer": "markdown"
      }
  }

  Alternatively, a pragma comment could be added at the top of files:

  index.js

  // @codepan { transformer: 'babel' }

  test.txt

  <!-- @codepan { pan: 'html', transformer: 'markdown' } -->

• If, by these rules, multiple files should be displayed in the same tab, only use the alphabetically first one for the sake of simplicity

• Preserve line breaks and spacing

Following these rules, this Gist would be formatted like this instead.

By using sensible defaults for codepan.json, this would potentially also have the side effect of being able to open any Gist even if it wasn't created in CodePan!

[egoist]

maybe we can also get rid of the concept of pan and introduce file:

the index.html will become our entry file, you can create a script.js and add it to index.html by just writing <script src=script.js></script> and boom it just works 😅 also you can import the css or js files you created as if you are using webpack / parcel, this seems like completely a new thing, so I will create a new project for it instead of adding to codepan.

for the feature you're talking about, yes, let's do that.