Docsify

Following index.html transforms a GitHub repository into a single page application.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="description" content="Description">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@4/lib/themes/vue.css">
</head>
<body>
  <div id="app"></div>
  <script>
    window.$docsify = {
      name: '',
      repo: ''
    }
  </script>
  <!-- Docsify v4 -->
  <script src="//cdn.jsdelivr.net/npm/docsify@4"></script>
</body>
</html>

How to automatically generate sidebar with a file tree structure?

github.com/docsifyjs/docsify/issues/610

Generate Auto-sidebar

# Install globally docsify-tools
npm i docsify-tools -g

# Generate sidebar with tree structure
docsify-auto-sidebar -d docs

package.json

{
  "name": "docs",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "docsify-auto-sidebar -d ../*name-of-repo*"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "docsify-tools": "^1.0.20"
  }
}

GitHub Action

name: CI

on:
  push:
    branches: [ main ]

jobs:
  build-sidebar:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2
      - run: npm ci
      - run: npm i docsify-tools

      - name: Make Sidebar
        run: npm test

      - name: Commit
        uses: stefanzweifel/git-auto-commit-action@v4
        with:
          commit_message: Auto-updated Sidebar