Edited at

riot.jsで作る雑ブログシステム

More than 1 year has passed since last update.


はじめに


概要

雑なブログシステムを作ろうと思ったので作りました。

なにせ雑なので、下記のような制限付き。

* DBは利用しない。

* Server側の処理はなるべくなし

完成品は下記

hasito.com


仕様


機能


  • Markdownをサポート

  • タイトルと編集時期を設定可能


システム概要


  • Markdown処理のパッケージを利用

  • 表示はめんどくさいのでbootstrap

  • ファイルは下記の2つを記事として参照



    • {index}.md 記事の内容


    • {index}.json 更新日とタイトル



  • 参照は記事ファイルのindexを信じて0からループ…404なったら終わり


ファイル構成

-/

+blog.tag
+index.html
-component/markdown-it/dist/markdown-it.min.js
-article
+0.json
+0.md
+1.json
+1.md
+...


コード


blog.tab


blog.tag

<blog>

<div class="list-group">
<button each={v,i in articles} onclick={viewart.bind(this,i)} type="button" class="list-group-item">{v.cnf.name}</button>
</div>
<script>
var self=this;
self.articles=[];
var md = window.markdownit({html:true,breaks:true});
viewart(i){
$(".view").html(md.render(self.articles[i].md));
}
self.on("mount",(e)=>{
console.log("mount");
self.articles=[];
var idx=0
var cb=(v)=>{
if(v){
var art={md:v};
get_article_cnf(idx,(vv)=>{
art.cnf=vv;
self.articles.push(art);
get_article(++idx,cb)
})
}else{
self.update();
}
}
get_article(idx,cb);
});

var get_article=(i,cb)=>{
fetch(`article/${i}.md`)
.then(res => {
if (!res.ok) {throw Error(false);}
return res.text();
}).then(body => {
cb(body);
}).catch(err=>{
cb(false);
});
}
var get_article_cnf=(i,cb)=>{
fetch(`article/${i}.json`)
.then(res => {
if (!res.ok) {throw Error(false);}
return res.json();
}).then(body => {
cb(body);
}).catch(err=>{
cb(false);
});
}
</script>
</blog>



index.html


index.html

<html>

<head>
<title>Hello Riot.</title>
<meta charset="UTF-8"/>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12"><h2>hasito.com</h2></div>
</div>
<div class="row">
<div class="col-xs-2">
<blog></blog>
</div>
<div class="col-xs-10 view">
</div>
</div>
<script type="riot/tag" src="blog.tag"></script>
<script src="https://cdn.jsdelivr.net/npm/riot@3.9/riot+compiler.min.js"></script>
<script src="component/markdown-it/dist/markdown-it.js"></script>
<!-- <script src="riot/riot+compiler.min.js"></script> -->
<script>riot.mount('blog')</script>
</body>
</html>



1.json


1.json



{
"name":"テスト2",
"date time":"2018/04/02 02:46"
}



1.md


1.md


# テスト記事2
## sub
### sub sub
こんにちわ、これはテスト記事です。

aa**aaaa**aa
xx__xxxx__xx