RustのYewというフレームワークを使ってブログ作る

まよねーづ 2021/12/29

現状

md to text （SSG）
- そもそもstd::fs::read_to_string()でファイル読み込んで文字列にできない。パスの指定変えてもResultの結果がErrになる。
md to html
- pulldown-cmarkというライブラリを使えばできそう

原因（？）

Webフレームワークだからstdが使えない？？
componentのview関数内でmdファイルの取得をしているが、ランタイムでよばれているためおかしい？？

Rustの日本コミュニティで質問投げたから、回答してくれる方がいたらありがたい。
少しまってみる

まよねーづ 2021/12/29

その他にできていること

ルーティング
Tailwind CSSの導入
レイアウトコンポーネントの追加

まよねーづ 2021/12/29

Slackでコミュニティの方が回答してくださった。ありがたい。ありがとうございます！
やはりstd::fs::read_to_stringがwasmとして実行されているためエラーになっていたらしい。
ビルド時にファイルの内容を文字列として扱いたい場合はinclude_str!という標準のマクロをつかえば、無事ファイルの内容を文字列で取得できた。

まよねーづ 2021/12/29

pulldown-cmarkをつかってmdをhtmlに変換するのはできたけど、--- ---で囲われた部分をmeta情報として読み込めない。
CommonMarkという仕様？に準拠しているらしいので、シンプルなことしかできなそう。
meta情報をmdで自分で扱いたかったら、別のライブラリを探すか、シンプルに自分で実装 or なにか別のアイデアを考えるしかなさそう

まよねーづ 2022/02/03

結局これは正規表現用のクレート導入したりして無理やり文字列置換とかで解決

それとMeta用のstruct用意してそこに情報もたせてーみたいなこととかした

記事一覧はブログコンテンツ用のリポジトリでjson吐き出すようshell script書いて、GitHub APIから返すようした
それをシリアライズして〜ってかんじ

まよねーづ 2021/12/29に更新

それとmdをhtmlに変換したところで文字列でしかないため、そのままhtmlとしてレンダリングしなければならない。
Yewではhtml!マクロをつかっているから、どうすればよいか要調査。
ちなみにissueもあがってるぽい。

まよねーづ 2021/12/29

↑のコードを参考に、html文字列をそのままレンダリングするコンポーネントを作った。↓

やってることとしては、

propsでinner_htmlという名前で文字列を受け取る
view関数内でDOMを生成し、そこにset_inner_htmlでpropsでうけとった値をセット
生成したDOMを仮想DOMにセット（？）
大体こんな感じ。あとはmeta情報どうするかと、スタイリング。

まよねーづ 2021/12/29

あとやること

mdファイル一括取得
ファイル名をslugにルーティング & ナビゲーション作成
それぞれのURL（slug）での内容を表示

まよねーづ 2021/12/29

std::fs::read_dir相当のことをしたいのだけれど、WASMでやるのはなかなか難しそう

jsファイルで取得した結果をRust側で受け取る
別のAPIサーバーからmdの内容を返す
このどっちかになるかも

まよねーづ 2021/12/29

一旦方向性を変えてみる。
ブログのコンテンツは同じプロジェクト内で管理せずに、別途リポジトリを作成して管理し、GitHub APIを使って取得することにする。
GraphQLを使えるとこは使いたいけど、上手くできるかわからない＆ファイルの内容自体はまだRESTじゃないと取得できなそうだから、色々試してみる。

まよねーづ 2021/12/29

↑のgraphql_clientというライブラリ試そうと思ったけど、いい感じに上手くうごかせなかった。。
挫折したのでGraphQLは諦める。そもそもwasmでどこまでできるのかとか、どのライブラリで何をすればいいかごっちゃになり始めたから一度整理する。

GraphQLは使わない
web_sysでfetchする（？）
とりあえずこれでREST APIたたけるか試す。できれば非同期にしたいけど、また挫折したくないから一度なんでもいいから動かす

まよねーづ 2021/12/29

ここ参考にしたらできるかもしれない。まずはコピペしつつ動かない部分を修正して、まずは動くのを目標にする。そのあと少しずつ理解してく

まよねーづ 2021/12/30

examplesみていい感じにとりあえず動いた。一覧の取得とかはまだだけど、まぁいい感じにできそうな気配ではある。
ということで一回デプロイについて考えることにした

GitHub Actionsでビルドしたものを、GitHub Pagesでホスティングしてみようと思う。ビルドで生成されるのは静的なHTMLとWASMとJSとCSSだけだから、静的なホスティングで大丈夫なはず？

↓これから試すやつ。GitHub Actionsでソースをクローン＆ビルドして、Gitの設定後にforce pushする感じぽい？もう少し調べたり試してみる

まよねーづ 2021/12/30

GitHub Actions上でRustのセットアップができなそう問題がでてきた
できないなんてことはないんだろうけど、公式のsetupがなさそうで自分にできるかあやしい・
最悪普通にビルド成果物もpushするでもいいかな、、

まよねーづ 2021/12/30

ていうかGitHub Actions使ったら色々選択肢広がりそう。
実行したタイミングでAPI叩いてファイル自動生成→それを読んでなにかするとか、
別のリポジトリ（ブログのコンテンツ）でGitHub Actions設定して、内容を更新した際になにかする〜とか

まよねーづ 2021/12/31

GitHub ActionsでビルドしてそれをGitHub Pagesへデプロイできた、、
と思ったけどそんなに甘くない。↓のブランチにはちゃんとひつようなファイルがあるんだけど、いざ公開されたURLへアクセスしてもHTML以外のファイルが上手く読み込めてない🥺

なんでだ？ちゃんとGitHub Pagesの設定でgh-pagesブランチ指定にもなってるし、なによりHTMLはちゃんとビルド後のがよみこまれてる。謎だ
https://mayone-du.github.io/yew-blog/

まよねーづ 2021/12/31

原因はシンプルにビルド結果のhtmlからのパスが間違っていた。
GitHub PagesのURLがhttps://mayone-du.github.io/yew-blog だから、絶対パスでの指定がだめだったぽい
ビルド結果のhtmlのscriptやらなんやらの指定を相対パスに書き換えたら上手く行った（？）
あとの課題は、