やること
表題の通り
職務経歴書とありますがmarkdownで記載したファイルをそのまま公開するwebサイトを作る試みです
なぜ？
- 職務経歴書をgit管理したい！
- でも個人名とか会社名は隠したい！
- マスクされた職務経歴書を公開していろいろ楽したい！
目標
- mdファイルを公開する
- 一部をマスクして公開できるとよい
- mdファイルは外部に公開されないようしたい
使うもの
- React Router(フレームワーク)
- react-markdown(ライブラリ)
- Markdown PDF(VSCodeの拡張機能)
実物
ソースコード
サイト（サンプル）
説明
こういうことです
React RouterのInstallationに沿って環境構築、あとは要らないのを消してmarkdownファイルを置いて読み込めるようにしただけ。
cssはGitHub Copilotに全任せです、というか基本的にはAIに任せてコードは何も書いてないです。
AIって便利ですね、自分でやったのはRRのインストールとVercelへのデプロイくらいです。
（まぁそんなに実装することもないですしね）
mdファイル（原本）もPrivateリポジトリにしたら見られない、はず。。。？
あとマスクは以下です。
https://github.com/stopod/md-viewer/blob/main/app/routes/home.tsx
export const loader = () => {
const randomString = `株式会社 ${Math.random().toString(36).substring(2, 8)}`;
const masked = md
.replace(
/<!-- START: MASK -->[\s\S]*?<!-- END: MASK -->/g,
"<!-- Masked -->"
)
.replace(
/<!-- START: MASK-C -->[\s\S]*?<!-- END: MASK-C -->/g,
randomString
);
return {
props: {
markdown: masked,
},
};
};
正規表現で/<!-- START: MASK -->[\s\S]*?<!-- END: MASK -->/gをコメントアウトに置換してます。
また、/<!-- START: MASK-C -->[\s\S]*?<!-- END: MASK-C -->/gで適当な会社名に置換しています。
もしかしたらもうちょっといい方法があるかもしれません。
とはいえこれでmdファイルを一元管理できて、pdfで要求されたらvscodeの拡張でpdf出力して提出、普段はマスクしてwebで公開するみたいなことができそうです。
使用方法
filesにmarkdownファイルを置いて適宜マスクのコメントを書いてvercelにデプロイするだけ！
注意
以下は出来てない
- 数式の表示
- テキストのハイライト
- 絵文字
※Markdownの拡張系はやれてないと思う。
あとがき
AIさいこー でもベストな実装、ベターな実装というのは自分で考えないとだめですね。
精進します。
もし原本が見えたらだれか教えてください、勉強します
あとがきのあとがき
mdをpdfに変換すればいいやと思っているが、見栄えがちょっとあれかもしれない
やはりあくまで趣味の範囲かもしれません