* {
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;
}
/* link */
/*docs
---
title: .link-1
name: link-1
category: link
---
リンク
```html
<p><a href="DUMMY" class="link-1">リンク１</a></p>
```
*/
.link-1 {
color: #006;
}
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<a href="./styleguide/index.html">スタイルガイド</a>
</body>
</html>
* {
font-family: "lato", "Mplus 1p", sans-serif;
}
pre {
margin-bottom: 0;
}
.guide-header {
margin: 0 0 15px;
border-bottom: 1px solid #eaeaea;
}
.guide-categories {
margin: 0 0 30px -5px;
padding: 0;
list-style: none;
letter-spacing: -.4em;
}
.guide-categories li {
display: inline-block;
margin: 0 0 0 5px;
letter-spacing: normal;
}
.guide-categories button {
display: inline-flex;
justify-content: center;
align-items: center;
-moz-appearance: none;
-webkit-appearance: none;
min-width: 80px;
height: 30px;
vertical-align: top;
outline: none;
}
.guide-body {
color: #333;
}
.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-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;
}
(function(global, $) {
var styles = {};
var settingJson = 'setting.json'; // ←追加
marked.setOptions({
langPrefix: '',
highlight: function(code, lang) {
return hljs.highlightAuto(code, [lang]).value;
}
});
var app = new Vue({
el: '#app',
data: {
siteTitle: '', // ←追加
description: '',
categories: [],
curCategory: '',
curStyles: {
title: '',
name: '',
category: '',
html: ''
}
},
created: function() {
this.getReadme();
this.getSetting(); // ←変更
},
methods: {
getReadme: function() {
axios.get('README.md')
.then(function (response) {
app.description = marked(response.data);
})
.catch(function (error) {
console.log(error);
});
},
getSetting: function() { // ←追加
axios.get(settingJson)
.then(function (response) {
var setdata = response.data;
document.title = app.siteTitle = setdata.title;
if (setdata.css !== undefined) {
app.getStyles(setdata.css);
}
})
.catch(function (error) {
console.log(error);
});
},
getStyles: function(resdata) { // ←変更
$('head').append('<link rel="stylesheet" href="' + resdata + '">'); // ←追加
axios.get(resdata) // ←変更
.then(function (response) {
var res = response.data.match(/\/\*docs[\s\S]*?\*\//gm);
var tmpStyles = [];
res.forEach(function(v,i,a) {
var info, html, sample;
var title = '';
var name = '';
var category = '';
// html = a[i];
html = v;
// 情報取得
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];
if (app.categories.indexOf(category) == -1) {
app.categories.push(category);
}
}
}
// 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>';
}
// tmpStyles
tmpStyles[i] = {
title: title,
name: name,
category: category,
html: html
};
});
styles = tmpStyles;
app.setCategory('');
})
.catch(function (error) {
console.log(error);
});
},
sortData: function(ary) {
// 並び替えしながらセット
app.curStyles = ary.sort(function(a, b) {
return (a["name"] > b["name"]) ? 1 : -1;
});
},
setCategory: function(str) {
app.curCategory = str;
// 選択したカテゴリからデータ抽出
var tmpStyles = styles;
var filtered = $.grep(tmpStyles,
function(elm, index) {
return (elm.category === app.curCategory);
}
);
app.sortData(filtered);
}
}
});
})(window, jQuery);
<!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" />
</head>
<body>
<div id="app">
<header class="guide-header">
<h1 class="guide-heading-1">{{ siteTitle }}</h1><!-- ←変更 -->
</header>
<ul class="guide-categories">
<li><button @click="setCategory('')">ホーム</button></li>
<li v-for="catItem in categories"><button @click="setCategory(catItem)">{{ catItem }}</button></li>
</ul>
<div v-if="curCategory === ''" class="guide-home">
<div v-html="description"></div>
</div>
<div v-for="style in curStyles" class="guide-wrapper">
<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>
## Vue.jsでCSSのスタイルガイドを作ってみる
README.md を読み込ませて、ホーム用の文章を表示しています。
このスタイルガイドを利用するには、以下のファイルが必要です。
- index.html（ファイル名変更可）
- guide.css（スタイルガイド用CSS）
- guide.js（スタイルガイド用JS）
- README.md（ホーム表示用Markdown）
- setting.json（タイトル、読み込むCSSを記載）
とかとか、説明文を書いたりします。
{
"title": "Vue.js でスタイルガイド作成に挑戦！！",
"css": "../style.css"
}