Vue.jsを試す（６）妄想チャレンジ・・・タイトルとかパラメータを追加してみる

<!DOCTYPE html>
<html>

  <head>
    <link data-require="highlight.js@*" data-semver="0.7.3" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/7.3/styles/solarized_dark.min.css" />
    <link data-require="highlight.js@*" data-semver="0.7.3" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/7.3/styles/github.min.css" />
    <link data-require="highlight.js@*" data-semver="0.7.3" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/7.3/styles/default.min.css" />
    <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
    <link href="https://fonts.googleapis.com/earlyaccess/mplus1p.css" rel="stylesheet" />
    <link rel="stylesheet" href="guide.css" />
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <div id="app">
      <header class="guide-header">
        <h1 class="guide-heading-1">Vue.js de スタイルガイド</h1>
      </header>
      <div v-for="style in styles">
        <h2 class="guide-heading-2">{{ style.title }}</h2>
        <div v-html="style.html" class="guide-body"></div>
        <hr class="guide-divide">
      </div>
    </div>
    <script data-require="jquery@2.2.4" data-semver="2.2.4" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script data-require="vue.js@*" data-semver="10.0.26" src="https://cdn.jsdelivr.net/vue/1.0.26/vue.min.js"></script>
    <script data-require="axios@*" data-semver="0.018.0" src="https://unpkg.com/axios@0.18.0/dist/axios.min.js"></script>
    <script data-require="marked@*" data-semver="0.3.5" src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.min.js"></script>
    <script data-require="highlight.js@*" data-semver="0.7.3" src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/7.3/highlight.min.js"></script>
    <script src="guide.js"></script>
  </body>

</html>

(function(global, $) {
  marked.setOptions({
    langPrefix: '',
    highlight: function(code, lang) {
      return hljs.highlightAuto(code, [lang]).value;
    }
  });
  
  var app = new Vue({
    el: '#app',
    data: {
      message: 'You loaded this page on ' + new Date().toLocaleString(),
      seen: false
    },
    methods: {
      set: function(data) {
        Vue.set(app, 'styles', data.sort(function(a, b) {
          return (a["name"] > b["name"]) ? 1 : -1;
        }));
      }
    }
  });

  axios.get('./style.css')
  .then(function (response) {
    var res = response.data.match(/\/\*docs[\s\S]*?\*\//gm);
    var data = [];

    res.forEach(function(v,i,a) {
      var info, html, sample;
      var title = '';
      var name = '';
      var category = '';

      html = a[i];

      // 情報取得
      info = html.match(/\-\-\-[\s\S]*?\-\-\-/gm);

      if (info !== null) {
        if (info[0].match(/title: ?(.*)[\s\S]/) !== null) {
          title = info[0].match(/title: ?(.*)[\s\S]/)[1];
        }
        if (info[0].match(/name: ?(.*)[\s\S]/) !== null) {
          name = info[0].match(/name: ?(.*)[\s\S]/)[1];
        }
        if (info[0].match(/category: ?(.*)[\s\S]/) !== null) {
          category = info[0].match(/category: ?(.*)[\s\S]/)[1];
        }
      }

      // sample表示用HTML取得
      sample = html.match(/\`\`\`html[\s\S]*?\`\`\`/gm);

      // 不要情報削除
      html = html.replace(/\/\*docs[\s\S]/, '')
      .replace(/[\s\S]\*\//, '')
      .replace(/\-\-\-[\s\S]*?\-\-\-/gm, '');

      // Markdown形式に変換
      html = marked(html);

      // sample表示用HTMLが存在する場合、サンプル枠を追加
      if (sample !== null) {
      sample = sample[0].replace(/\`\`\`html[\s\S]/, '').replace(/[\s\S]\`\`\`/, '');
        html = html + '<div class="sample">' + sample + '</div>';
      }

      // dataにsample表示用HTML追加
      data[i] = {
        title: title,
        name: name,
        category: category,
        html: html
      };
    });
    app.set(data);
  })
  .catch(function (error) {
    console.log(error);
  });

})(window, jQuery);

* {
  box-sizing: border-box;
}

/* text */

/*docs
---
title: .text-red
name: text-red
category: text
---
テキストカラー：<span class="text-red">赤■</span>

```html
<span class="text-red">.text-red</span>
```
*/
.text-red {
  color: #f66;
}

/*docs
---
title: .text-blue
name: text-blue
category: text
---
テキストカラー：<span class="text-blue">青■</span>

```html
<span class="text-blue">.text-blue</span>
```
*/
.text-blue {
  color: #66f;
}

/*docs
---
title: .text-green
name: text-green
category: text
---
テキストカラー：<span class="text-green">緑■</span>

```html
<span class="text-green">.text-green</span>
```
*/
.text-green {
  color: #6A6;
}


/* button */

/*docs
---
title: .btn-1
name: btn-1
category: btn
---
ボタン１

```html
<p><a href="DUMMY" class="btn-1">ボタン１</a></p>
<button class="btn-1">ボタン１</button>
```
*/
button.btn-1 {
  -webkit-appearance: none;
  -moz-appearance: none;
}
.btn-1 {
  display: inline-block;
  min-width: 140px;
  padding: 5px 10px;
  border: 1px solid #aaa;
  border-radius: 3px;
  background: #fff;
  outline: none;
  color: #333;
  font-size: 14px;
  text-align: center;
  text-decoration: none;
  transition: background .2s ease-in-out;
  cursor: pointer;
}
.btn-1:hover {
  background: #eaeaea;
}

* {
  font-family: "lato", "Mplus 1p", sans-serif;
}

pre {
  margin-bottom: 0;
}

.guide-header {
  margin: 0 0 30px;
  border-bottom: 1px solid #eaeaea;
}

.guide-heading-1 {
  margin: 10px 0;
  color: #333;
  font-size: 28px;
  font-weight: normal;
}

.guide-heading-2 {
  padding: 0 0 0 7px;
  border-left: 3px solid #666;
  color: #333;
  font-size: 20px;
}

.guide-body {
  color: #333;
}

.guide-divide {
  margin: 20px 0;
  border: 1px solid #eaeaea;
  box-shadow: 0 2px 2px rgba(0,0,0,.05);
}

.sample {
  padding: 1px 0 0;
  border: 1px dashed #eaeaea;
  border-top: 0;
}