Help us understand the problem. What is going on with this article?

Githubのissueテンプレートをプレビューしながら作る

More than 3 years have passed since last update.

ツールを作った
サーバサイドを必要としないのでGithub Pagesで公開しててJavaScriptのみ構成されている。
Github Pages
Github
Chromeでしか動作みてません

bonegollira.github.io issue template preview .png

Githubのissueテンプレートというのは
http://qiita.com/yoshimikeisui/items/3e1873e3bf1bbafe8733
で紹介してくださっていて、とても便利だなと。
それでツールを作ってみようというモチベーションです。

使い方

リポジトリの指定は@repository(リポジトリ名)@user(ユーザ名)でします。(@organization(オーガないぜーション)でもおk)
また、タイトルも@title(タイトル)です。
これらを書いた行はissueテンプレートには消します。

@repository(issue-template-preview)
@user(bonegolllira)
@title(うほうほ)
// 上3行はテンプレートでは消される
## 不具合報告
バグです

つかってるやつ

だけ。ほぼReactだけで作れる。

Reactでtextareaのmarkdown入力をキャッチして(リポジトリの指定とかをちょろっと解析し)markedでHTMLへ変換しgithub-markdown.cssでスタイルをつけている。

app.react.js
  onKeyUp (e) {
    this.setState({markdown: this.parseMarkdown(e.target.value)});
  },

  render () {
    return (
      <div className="app">
        <Bar
          ...
           />
        <Textarea
           ...
          onKeyUp={this.onKeyUp} />
        <Preview
          markdown={this.state.markdown} />

github-markdown.cssはmarkdown-bodyをつけた要素をGithubのmarkdown風のスタイルにしてくれる。この要素にdangerouslySetInnerHTMLでmarkedで作ったHTMLを突っ込んでいる。
(安全な方法ではないと思うのでより良い方法があれば教えて下さい)

preview.react.js
  innerHTML () {
    return {
      // markedで変換
      __html: marked(this.props.markdown)
    };
  },

  render () { 
    return (
      <section className="Preview">
        <h1 className="Preview--title">Preview</h1>
        <article
          className="Preview--body markdown-body"
          dangerouslySetInnerHTML={this.innerHTML()}>
        </article>
      </section>
    );
  }

Github Pagesへのプッシュはgulp-gh-pagesで

// buildはjsの圧縮とかして.appへ吐き出す
gulp.task('deploy', ['build'], () => {
  let pkg = require('./package.json');
  let ghPagesConfig = {
    remoteUrl: pkg.repository.url
  };

  return gulp.src('.app/**/*')
    .pipe($.ghPages(ghPagesConfig));
});

みたいにしておけば、.app(ビルドしたあとは.appに吐き出している)毎gh-pagesブランチへプッシュしてくれるのでコマンドでgulp deployでおk。

以上

メンバーではGithub Pagesのことはギッペって呼んでますが皆さんなんてよでますか?
おわり。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした