VEDAのサイトを作った

VEDA.glのスクリーンショット

veda.gl

VEDAはVJやGLSLのライブコーディングを行うソフトウェアだ。
Atomのパッケージとして実装されており、ユーザーは編集したGLSLコードをリアルタイムに実行して表示できる。

このブログでもこれまでに何度か紹介している。

blog.gmork.in

VEDAは去年の夏から開発を始めて、ドキュメントは全てREADME.mdに書いてきたんだけど、機能が増えてくるにつれてREADMEが読みにくくなってきた。
また、GLSLのフレームワークということで、実際に動作するコードをユーザーに見せたいという気持ちがでてきた。

というわけで作ったのが今回のWebサイト。

veda.gl

veda.glは、VEDAプロジェクト全体のドキュメントになっている。
VEDAのインストール方法や使い方、機能紹介に加え、FAQやコントリビュート方法をまとめている。

PCでは画面右上の 日本語 ボタンを押すと日本語版ドキュメントが表示される。

f:id:amagitakayosi:20180214232125g:plain

機能紹介のページでは、ブラウザの音声入力とかキーボード入力を使った実例が見れます。

f:id:amagitakayosi:20180214234108g:plainf:id:amagitakayosi:20180214234118g:plain

ドキュメントに貢献するには

ドキュメントは現在、英語と日本語で書いてます。
足りないドキュメントを追加したり、他の言語に翻訳していただける方がいたら、是非ご協力をおねがいしたいです🙇

veda.glはNext.js + VEDA.jsで開発して、GitHub Pagesにホストしてる。
レポジトリはこちら。

GitHub - fand/veda.gl: VEDA Website

ドキュメントはMarkdownで書かれています。
Next.jsでMarkdownを読み込んだり多言語対応してたりするため、ちょっと複雑なしくみになってしまった。

例えば、トップページの中国語版を追加する場合、まず pages/index.cn.md を追加し、次にpages/index.js を編集してロードしてあげるようにします。

// https://github.com/fand/veda.gl/blob/master/pages/index.js
import cn from './index.cn.md';

const article = {  
  en: parse(en),  
  ja: parse(ja),
  cn: parse(cn),
};

この辺のコード変な感じになってるのはわかってる……😅

まあ変なところは直してくつもりなので、とりあえずドキュメントみてわかんない所あったら気軽にissue立てていただけると助かります！！

https://github.com/fand/veda.gl/issues

もしVEDAプロジェクトに興味をもってくれたら、 CONTRIBUTING をみてissue立てるなりPRくれたらメッチャ嬉しいです！！
他にも、わからないことはTwitterとかで聞いてくれたらすぐ答えます🤘

twitter.com

よろしく〜〜