Initial commit

.dockerignore

@@ -0,0 +1,9 @@
+README.md
+node_modules/
+.eslintrc.json
+.next/
+.vercel/
+start.sh
+.husky/
+.github/
+.vscode/

.env

@@ -0,0 +1,2 @@
+NEXT_PUBLIC_SITE_NAME=Next-Bootstrap.ts
+NEXT_PUBLIC_SITE_SUMMARY=React project scaffold based on TypeScript, Next.js, Bootstrap & Workbox.

.eslintrc.json

@@ -0,0 +1,10 @@
+{
+  "extends": ["next/core-web-vitals", "prettier"],
+  "plugins": ["simple-import-sort"],
+  "rules": {
+    "react/jsx-no-target-blank": "warn",
+    "@next/next/no-sync-scripts": "warn",
+    "simple-import-sort/exports": "error",
+    "simple-import-sort/imports": "error"
+  }
+}

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,11 @@
+Checklist（清单）:
+
+<!-- Please follow this checklist and put an x in each of the boxes, like this: [x].（请遵循此清单，并在每个 [ ] 中输入 x，如下所示：[x]。） -->
+
+- [ ] Labels
+- [ ] Assignees
+- [ ] Reviewers
+
+<!--If your pull request closes a GitHub issue, replace the XXXXX below with the issue number.（如果 pull request 关闭一个 GitHub issue，请用 GitHub issue 编号替换下面的 XXXXX）-->
+
+Closes #XXXXX

.github/workflows/deploy-production.yml

@@ -0,0 +1,64 @@
+# reference:
+#   1. https://github.com/docker/build-push-action/blob/master/docs/advanced/push-multi-registries.md
+#   2. https://github.com/docker/build-push-action/blob/master/docs/advanced/share-image-jobs.md
+
+name: Deploy to Production environment
+on:
+  push:
+    tags:
+      - v*
+env:
+  ARTIFACT_PATH: /tmp/artifact.tar
+  BOX_NAME: next-bootstrap-ts
+  BOX_URL: idea2app/next-bootstrap-ts
+
+jobs:
+  deploy_docker_image:
+    name: Deploy Docker image
+    runs-on: ubuntu-latest
+    permissions:
+      packages: write
+      contents: read
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Inject Environment variables
+        run: |
+          cat > .env.local <<EOF
+          ${{ secrets.ENV_FILE }}
+          EOF
+      - uses: docker/setup-qemu-action@v2
+      - uses: docker/setup-buildx-action@v2
+
+      - name: Build Image
+        uses: docker/build-push-action@v3
+        with:
+          context: .
+          platforms: linux/amd64
+          tags: ${{ env.BOX_URL }}:latest
+          outputs: type=docker,dest=${{ env.ARTIFACT_PATH }}
+
+      - name: Pick Docker Compose
+        run: |
+          mkdir ./build
+          mv ${{ env.ARTIFACT_PATH }} ./docker-compose.yml ./start.sh ./build
+
+      - name: Transport Image
+        uses: garygrossgarten/github-action-scp@release
+        with:
+          local: ./build
+          remote: /tmp
+          host: ${{ secrets.HOST }}
+          username: ${{ secrets.USER }}
+          password: ${{ secrets.SSH_KEY }}
+
+      - name: Run Image
+        uses: garygrossgarten/github-action-ssh@release
+        with:
+          host: ${{ secrets.HOST }}
+          username: ${{ secrets.USER }}
+          password: ${{ secrets.SSH_KEY }}
+          command: |
+            mv /tmp/docker-compose.yml /tmp/start.sh ~/
+            chmod +x ~/start.sh
+            echo '${{ secrets.SSH_KEY }}' | sudo -S ~/start.sh ${{ env.ARTIFACT_PATH }}

.github/workflows/main.yml

@@ -0,0 +1,53 @@
+name: CI & CD
+on:
+  push:
+    branches:
+      - main
+jobs:
+  Build-and-Deploy:
+    env:
+      VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
+      VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
+      VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+    steps:
+      - uses: actions/checkout@v3
+
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
+
+      - uses: actions/setup-node@v3
+        if: ${{ !env.VERCEL_TOKEN || !env.VERCEL_ORG_ID || !env.VERCEL_PROJECT_ID }}
+        with:
+          node-version: 18
+          cache: pnpm
+
+      - name: Install Dependencies
+        if: ${{ !env.VERCEL_TOKEN || !env.VERCEL_ORG_ID || !env.VERCEL_PROJECT_ID }}
+        run: pnpm i --frozen-lockfile
+
+      - name: Export Static pages
+        if: ${{ !env.VERCEL_TOKEN || !env.VERCEL_ORG_ID || !env.VERCEL_PROJECT_ID }}
+        run: pnpm export
+
+      - name: Deploy to GitHub pages
+        uses: peaceiris/actions-gh-pages@v3
+        if: ${{ !env.VERCEL_TOKEN || !env.VERCEL_ORG_ID || !env.VERCEL_PROJECT_ID }}
+        with:
+          publish_dir: ./out
+          personal_token: ${{ secrets.GITHUB_TOKEN }}
+          force_orphan: true
+
+      - name: Deploy to Vercel
+        uses: amondnet/vercel-action@v25
+        if: ${{ env.VERCEL_TOKEN && env.VERCEL_ORG_ID && env.VERCEL_PROJECT_ID }}
+        with:
+          vercel-token: ${{ secrets.VERCEL_TOKEN }}
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
+          vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
+          working-directory: ./
+          vercel-args: --prod

.github/workflows/pull-request.yml

@@ -0,0 +1,27 @@
+name: Pull Request
+on:
+  push:
+    branches-ignore:
+      - main
+jobs:
+  Build-and-Deploy:
+    env:
+      VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
+      VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
+      VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+    steps:
+      - uses: actions/checkout@v3
+        if: ${{ env.VERCEL_TOKEN && env.VERCEL_ORG_ID && env.VERCEL_PROJECT_ID }}
+
+      - name: Deploy to Vercel
+        uses: amondnet/vercel-action@v25
+        if: ${{ env.VERCEL_TOKEN && env.VERCEL_ORG_ID && env.VERCEL_PROJECT_ID }}
+        with:
+          vercel-token: ${{ secrets.VERCEL_TOKEN }}
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
+          vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
+          working-directory: ./

.gitignore

@@ -0,0 +1,48 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# PWA
+public/sw.js
+public/sw.js.map
+public/workbox-*.js
+public/workbox-*.js.map
+public/worker-*.js
+public/worker-*.js.map
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+
+# IDE
+.vscode/settings.json

.husky/pre-commit

@@ -0,0 +1,5 @@
+#!/bin/sh
+
+. "$(dirname "$0")/_/husky.sh"
+
+npm test

.husky/pre-push

@@ -0,0 +1,5 @@
+#!/bin/sh
+
+. "$(dirname "$0")/_/husky.sh"
+
+npm run build

.vscode/launch.json

@@ -0,0 +1,18 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Debug Jest",
+      "type": "node",
+      "request": "launch",
+      "port": 9229,
+      "runtimeArgs": [
+        "--inspect-brk",
+        "${workspaceRoot}/node_modules/jest/bin/jest.js",
+        "--runInBand"
+      ],
+      "console": "integratedTerminal",
+      "internalConsoleOptions": "neverOpen"
+    }
+  ]
+}

Dockerfile

@@ -0,0 +1,21 @@
+FROM node:18-slim
+
+USER root
+
+RUN npm rm yarn -g
+RUN npm i pnpm -g
+
+RUN mkdir /home/node/app
+WORKDIR /home/node/app
+
+COPY package.json pnpm-lock.yaml /home/node/app/
+RUN pnpm i --frozen-lockfile
+
+COPY . /home/node/app
+RUN pnpm build
+
+RUN pnpm prune --prod || true \
+    pnpm store prune
+
+EXPOSE 3000
+CMD ["npm", "start"]

README.md

@@ -0,0 +1,81 @@
+# Next-Bootstrap.ts
+
+[React][1] project scaffold based on [TypeScript][2], [Next.js][3], [Bootstrap][4] & [Workbox][5]. And this project bootstrapped with [`create-next-app`][6].
+
+[![NPM Dependency](https://david-dm.org/idea2app/next-bootstrap-ts.svg)][7]
+[![CI & CD](https://github.com/idea2app/Next-Bootstrap-ts/actions/workflows/main.yml/badge.svg)][8]
+
+## Technology stack
+
+- Language: [TypeScript v5][2] + [MDX v2][10]
+- Component engine: [Nextjs v13][3]
+- Component suite: [Bootstrap v5][4]
+- PWA framework: [Workbox v6][5]
+- State management: [MobX v6][9]
+- CI / CD: GitHub [Actions][11] + [Vercel][12]
+
+## Major examples
+
+1. [Markdown articles](pages/article/)
+2. [Editor components](pages/component.tsx)
+3. [Pagination table](pages/pagination.tsx)
+4. [Scroll list](pages/scroll-list.tsx)
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm i pnpm -g
+pnpm dev
+```
+
+Open http://localhost:3000 with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
+
+[API routes][13] can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in `pages/api/hello.ts`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes][13] instead of React pages.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation][14] - learn about Next.js features and API.
+- [Learn Next.js][15] - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository][16] - your feedback and contributions are welcome!
+
+## Deployment
+
+### Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform][12] from the creators of Next.js.
+
+Check out our [Next.js deployment documentation][17] for more details.
+
+### Docker
+
+```shell
+pnpm pack-image
+pnpm container
+```
+
+[1]: https://react.dev/
+[2]: https://www.typescriptlang.org/
+[3]: https://nextjs.org/
+[4]: https://getbootstrap.com/
+[5]: https://developers.google.com/web/tools/workbox
+[6]: https://github.com/vercel/next.js/tree/canary/packages/create-next-app
+[7]: https://david-dm.org/idea2app/next-bootstrap-ts
+[8]: https://github.com/idea2app/Next-Bootstrap-ts/actions/workflows/main.yml
+[9]: https://github.com/mobxjs/mobx/tree/mobx4and5/docs
+[10]: https://mdxjs.com/
+[11]: https://github.com/features/actions
+[12]: https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme
+[13]: https://nextjs.org/docs/api-routes/introduction
+[14]: https://nextjs.org/docs
+[15]: https://nextjs.org/learn
+[16]: https://github.com/vercel/next.js/
+[17]: https://nextjs.org/docs/deployment

components/BlockEditor.tsx

@@ -0,0 +1,20 @@
+import Code from '@editorjs/code';
+import Header from '@editorjs/header';
+import Image from '@editorjs/image';
+import LinkTool from '@editorjs/link';
+import List from '@editorjs/list';
+import Quote from '@editorjs/quote';
+import { Editor as Core, EditorProps } from 'idea-react';
+
+const Tools = {
+  list: List,
+  code: Code,
+  linkTool: LinkTool,
+  image: Image,
+  header: Header,
+  quote: Quote,
+};
+
+export default function Editor(props: Omit<EditorProps, 'tools'>) {
+  return <Core tools={Tools} {...props} />;
+}