GraphQLのスキーマドキュメントをspectaql+github actionsでgithub.ioに公開したメモ

## 概要
GraphQLのドキュメントをHTMLで読みやすい形にしてgithub.ioで公開をしたかった。
今回は、graphqlのスキーマについて試した。ついでにdraw.ioもActionsで画像を生成できるようにした。
公開はGitHub Actionsを使い、~~docsブランチをpushしたタイミング~~**documentsフォルダのファイルを更新したタイミング**で公開されるようにする。

[ソースコード](https://github.com/hibohiboo/kartagraph/tree/3f08f46fe5d3aaf8195a2f197e002829658762ee/documents)

[公開したgithub.io](https://hibohiboo.github.io/kartagraph/)

**2022.12.03 更新** [更新](https://github.com/hibohiboo/kartagraph/tree/590566f592f08523e5e75a39890efa49887b1f57)

## draw.io
[drawio-export-action](https://github.com/rlespinasse/drawio-export-action)を利用する。

## graphql
[spectaql](https://github.com/anvilco/spectaql)を利用する。


## パイプライン


```diff:.github/workflows/gh-pages.hml
name: github pages

on:
  push:
    branches:
      - main  # Set a branch name to trigger deployment
    paths:
      - .github/workflows/**
      - docs/** # documentsフォルダ内が更新されたときに実施

jobs:
  deploy:
    runs-on: ubuntu-20.04
    steps:
      - uses: actions/checkout@v3
        with:
          fetch-depth: 0 # rlespinasse/drawio-export-action@v2 を使うときに指定が必要

      - name: Create gh-pages-dir
        run: |
          mkdir -p ./docs/publish


+ # draw.io
+      - name: Export draw.io
+        uses: rlespinasse/drawio-export-action@v2
+        with:
+          path: documents/draw.io
+          format: png
+          output: ../../docs/publish/drawio
+          transparent: true
+          action-mode: all

# npm 準備
      - name: Setup Node
        uses: actions/setup-node@v2
        with:
          node-version: '16'


# # REST スキーマ

      - name: OpenAPI Setup
        run: npm ci
        working-directory: ./documents/api-schema

      - name: OpenAPI Make
        run: npm run redoc
        working-directory: ./documents/api-schema


      - name: OpenAPI Move files
        run: |
          mkdir -p ./docs/publish/api-schema
          mv ./documents/api-schema/dist/index.html ./docs/publish/api-schema/


+ # GraphQL スキーマ
+      - name: GraphQL Setup
+        run: npm ci
+        working-directory: ./documents/graphql-schema
+      - name: GraphQL Make
+        run: npm run build
+        working-directory: ./documents/graphql-schema
+      - name: GraphQL Move files
+        run: |
+          mkdir -p ./docs/publish/graphql-schema
+          mv ./documents/graphql-schema/public/* ./docs/publish/graphql-schema/

# markdown to HTML
# Gatsby
      - name: Gatsby Setup
        run: npm ci
        working-directory: ./documents/design

      - name: Gatsby Make
        run: npm run build
        working-directory: ./documents/design

      - name: Gatsby Move files
        run: |
          mkdir -p ./docs/publish
          mv ./documents/design/public ./docs/publish/design
# pandoc

      - uses: docker://pandoc/core:2.9
        with:
          args: >- # allows you to break string into multiple lines
            --standalone
            --output=docs/index.html
            documents/index.md

# デプロイ
      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./docs
```

## 2022.12.03 追記

下記エラーが発生。 `actions/checkout@v2`を`actions/checkout@v3`に更新した。

```
Node.js 12 actions are deprecated. For more information see: https://github.blog/changelog/2022-09-22-github-actions-all-actions-will-begin-running-on-node16-instead-of-node12/. Please update the following actions to use Node.js 16: actions/checkout@v2
```


## 参考
[spectaqlブログ](https://www.wenyanet.com/opensource/ja/6117e80f9ef4d72c8c2c3a2b.html)
[drawio-export-action](https://github.com/rlespinasse/drawio-export-action)
[GitHub Actionsを使ってGithub PagesにOpen APIのドキュメントを公開したメモ](https://qiita.com/hibohiboo/items/a1568d9ecaf9ebb25e11)
[GitHub Actionsを使ってGithub PagesにStorybookのドキュメントをWebpack5を使って公開したメモ](https://qiita.com/hibohiboo/items/d5e5ceb73adafbfd961c)