プログラミング教育のコンテンツリポジトリ

事前にPCにインストールしてください。

• nodejs v12.9.0以降
• yarn v1.17.3以降

yarn install #初回のみ実行
yarn dev #ローカルでの動作確認
# open http://localhost:8080/

http://localhost:8080/でローカルで動作確認できます。

yarn build

docs/.vuepress/distにHTMLコンテンツが作成されます。 ホスティングサイトにはdocs/.vuepress/dist配下を公開してください

docs # ルートフォルダ
 ┗.vuepress # vuepressフォルダ
  ┗public             # サイト全体の静的コンテンツ
   ┗routes.json       # Azure WebStatic Appsルーティング定義ファイル
  ┗styles             # サイト全体のスタイル指定
  ┗config.js          # vuepress定義ファイル
  ┗enhanceApp.js      # vuepress拡張ファイル
 ┗contents  # コンテンツフォルダ
  ┗your-contents.md   # 記事
  ┗img                # 画像フォルダ
  ┗files              # ダウンロードファイルフォルダ
  ┗[subfolder]        # サブフォルダ
    ┗your-contents.md
    ┗img
    ┗README.md        # サブフォルダのタイトルを指定

• 記事はコンテンツフォルダに格納します。
• 記事に乗せる画像ファイルは記事と同じ階層にあるimgフォルダに格納してください。
• 記事内から静的ファイルをダウンロードする場合はfilesフォルダに格納してください。下記のファイル拡張子の場合、自動的にダウンロードリンクとなります。
  • txt
  • json
  • db
  • zip
  • xml
  • yaml
  • toml
  • config
• コンテンツフォルダ内にサブフォルダを作成することもできます。この場合、画像ファイルはサブフォルダ内にimgフォルダを作成し、格納してください。 し、格納してください。
• サブフォルダの表示のタイトルはREADME.mdファイルにタイトルを指定してください。サイドバーのタイトルになります。

---
groupTitle: タイトル
---

• 記事内のCodeのハイライトの言語リストはこちらを参照ください。prism
• サイトの権限はdocs/.vuepress/public/routes.jsonで制御してます。
  参考:Azure Static Web Apps プレビューの認証と承認

{
    "routes": [
        {
            "route": "/",
            "allowedRoles": ["viewer"]
        },
        {
            "route": "/login",
            "serve": "/.auth/login/aad"
        }
    ],
}

allowedRoles
AzureWebStaticAppsのdefault roleはanonymous, authenticatedです。
viewerは追加したロールです

/.auth/login/aad
認証はAzure Active Directoryにしています。

1. Fork it (https://github.com/learnning-dev/programming.git)
2. Create your feature branch (git checkout -b [your-name-yyyymmdd])
3. Commit your changes (git commit -am 'Add some feature')
4. Push to the branch (git push origin [your-name-yyyymmdd])
5. Create new Pull Request

Issueの起票方針を参照ください

MDファイルにPincodeProtectionコンポーネントを指定すると、 PINコードで保護されたページを作成できます。

# Your Title
<PincodeProtection />  <!-- こちらを記載 -->

<!-- Your Contents -->

商用環境はGitHubの環境変数（secret）で定義しています。 ローカルでの動作確認時は プロジェクトフォルダに.envファイルを作成し、下記を定義してください。

PIN_CODE=0000 # 4桁の数字

docs # ルートフォルダ
 ┗.vuepress
   # ・・・
.env # ローカル動作確認用　環境変数定義

MIT

learnning-dev