Skip to content

Instantly share code, notes, and snippets.

@Jae-kwang
Created March 21, 2018 11:31

Revisions

  1. Jei created this gist Mar 21, 2018.
    21 changes: 21 additions & 0 deletions Github.js
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,21 @@
    const Github = class {
    constructor(id, repo) {
    this._base = `http://api.github.com/repos/${id}/${repo}/contents/`;
    }
    load(path) {
    const id = 'callback' + Github._id++;
    const f = Github[id] = ({data:{content}}) => {
    delete Github[id];
    document.head.removeChild(s);
    this._parser.loaded(content);
    };
    const s = document.createElement('script');
    return new Promise((resolve) => {
    s.src = `${this._base + path}?callback=Github.${id}`;
    document.head.appendChild(s);
    s.onload = () => resolve();
    })
    }
    setParser(v) { this._parser = v; }
    };
    Github._id = 0;
    8 changes: 8 additions & 0 deletions ImageLoader.js
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,8 @@
    const ImageLoader = class extends Loader {
    constructor(target) {
    super(target);
    }
    _loaded(v) {
    document.querySelector(this._target).src = 'data:text/plain;base64,' + v;
    }
    }
    11 changes: 11 additions & 0 deletions Loader.js
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,11 @@
    const Loader = class {
    constructor(target) {
    this._target = target;
    }
    loaded(v) {
    this._loaded(v)
    }
    _loaded(v) {
    throw "_loaded must override";
    }
    }
    21 changes: 21 additions & 0 deletions MdLoader.js
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,21 @@
    const MdLoader = class extends Loader {
    constructor(target) {
    super(target);
    }
    _loaded(v) {
    document.querySelector(this._target).innerHTML = this._parseMD(v);
    }
    _parseMD(v) {
    return d64(v).split('\n').map(v => {
    let i = 3;
    while(i--){
    if(v.startsWith('#'.repeat(i + 1))) return `<h${i + 1}>${v.substr(i + 1)}</h${i + 1}>`;
    }
    return v;
    }).join('<br>');
    }
    };

    const d64 = v => decodeURIComponent(
    atob(v).split('').map(c => '%' + ('00' +c.charCodeAt(0).toString(16)).slice(-2)).join('')
    );
    31 changes: 31 additions & 0 deletions index.html
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,31 @@
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    </head>
    <body>
    <img id="a"></div>
    <div id="b"></div>
    <script src="Github.js"></script>
    <script src="Loader.js"></script>
    <script src="ImageLoader.js"></script>
    <script src="MdLoader.js"></script>
    <script>
    const loader = new Github('hikaMaeng', 'codespitz75');

    (async function() {
    const img = new ImageLoader('#a');
    loader.setParser(img);
    await loader.load('einBig.png');

    const md = new MdLoader('#b')
    loader.setParser(md);
    await loader.load('README.md');
    })();

    </script>
    </body>
    </html>