GiHubリポジトリのページとGitHub Pagesを行き来するブックマークレットを書いた

ソースを見たくなった時に、URL手打ちが面倒だったので書いた。

独自ドメインは対応してない。(できる気がしない)

この「GitHub←→gh-pages」の部分をブックマークバーにDnDすると使える。

@javascript_urlを指定していてJSが直接ブックマークレットに埋め込まれているので github.comでも使える。 (github.comは外部ドメインのJSを読み込めなかったはず)

使い方

gh-pagesを見ている時にブックマークバーのGitHub←→gh-pagesを実行すると対応するGitHubのページに遷移するはず。

今の所gh-pagesブランチのルートに置いてある前提で、masterブランチのdocディレクトリとかが設定されているのは対応できていない。

一応、#と?から後ろを消したものをパスとしてGitHubの対応するファイルかディレクトリへ飛んでいけるようにしているつもり。

イメージ

https://nakajmg.github.io/s/161119-vue/#4
↑
↓
https://github.com/nakajmg/s/tree/gh-pages/161119-vue

https://nakajmg.github.io/s/161119-vue/index.html#54
↑
↓
https://github.com/nakajmg/s/blob/gh-pages/161119-vue/index.html

ちなみにこれnakajmgさん自作のahomuさんのWebスライドフレームワークみたいなんだけど、
MarkdownからHTMLを出力しててコンソールに発表者用ノートを出力しているなど
なかなかデザインと仕組みが好みだった。
(nakajmgさんはジェネレータの作者だった)
💓 Vue.js

(追記 フレームワークの作者を間違ってたので修正 sky_y++

本題と関係ないけど、例で出てくるMarkdownスライドのライブラリ ahomu/Talkie があることを知れて良かった。remark.jsとの違いが気になる。https://t.co/m8e8bpOu5uhttps://t.co/YRTIB7ZI82

— すかいゆき / 藤原惟 (@sky_y) June 10, 2017

)

中身

var branch = 'gh-pages';

var gh = location.href.match(/^https:\/\/github\.com\/([^\/]+)\/([^\/]+)(\/[^\/]+\/[^\/]+(.*))?/);
if(gh !== null){
  var user =  gh[1];
  var repo =  gh[2];
  var path = (gh[4] ? gh[4] : '');
  location.href = 'https://' +user + '.github.io/' +repo + path;
}
var ghPages = location.href.match(/^https:\/\/([^.]+)\.github\.io\/(([^\/+])(.*?)?)?(\/?)?([#?].*)?$/);
if(ghPages !== null){
  var user = ghPages[1];
  var repo = (ghPages[3] ? '/' + ghPages[3] : '');
  var dirPath = (ghPages[5] ? '/tree/' + branch : '/blob/' + branch);
  var path = (ghPages[4] ? dirPath + ghPages[4] : '');
  location.href = 'https://github.com/' + user + repo + path;
}