[migrate] replace Travis CI with GitHub actions

[optimize] add Yarn lock for CI cache
[optimize] several details
[optimize] upgrade Upstream packages

Author: TechQuery

.github/workflows/main.yml

@@ -0,0 +1,25 @@
+name: CI & CD
+on:
+    push:
+        branches:
+            - master
+jobs:
+    Build-and-Deploy:
+        runs-on: ubuntu-latest
+        steps:
+            - name: Checkout
+              uses: actions/checkout@v2
+            - name: Use Node.js
+              uses: actions/setup-node@v2
+              with:
+                  node-version: 14
+                  cache: yarn
+            - name: Install & build
+              run: yarn  &&  yarn build
+            - name: Deploy
+              uses: peaceiris/actions-gh-pages@v3
+              with:
+                  publish_dir: ./dist
+                  cname: bootstrap.web-cell.dev
+                  personal_token: ${{ secrets.GITHUB_TOKEN }}
+                  force_orphan: true

.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

.travis.yml

@@ -4,12 +4,12 @@ Re-implemented Official **Document site** of [BootStrap][1] & [FontAwesome][2]
 based on [WebCell][3], [BootCell][4] & [MarkCell][5]
 
 [![NPM Dependency](https://david-dm.org/EasyWebApp/BootCell-document.svg)][6]
-[![Build Status](https://travis-ci.com/EasyWebApp/BootCell-document.svg?branch=master)][7]
+[![CI & CD](https://github.com/EasyWebApp/BootCell-document/workflows/CI%20&%20CD/badge.svg)][7]
 
 [1]: https://getbootstrap.com/
 [2]: https://fontawesome.com/
 [3]: https://web-cell.dev/
 [4]: https://web-cell.dev/BootCell/
 [5]: https://github.com/EasyWebApp/MarkCell
 [6]: https://david-dm.org/EasyWebApp/BootCell-document
-[7]: https://travis-ci.com/EasyWebApp/BootCell-document
+[7]: https://github.com/EasyWebApp/BootCell-document/actions

ReadMe.md

@@ -50,7 +50,7 @@ You can render Custom contents with `renderCell(start: Date)` function.
 
 <Example>
     <WeekCalendar
-        renderCell={start => 'Class starts at ' + formatDate(start, 'HH:mm')}
+        renderCell={start => `Class starts at ${formatDate(start, 'HH:mm')}`}
     />
 </Example>
 
@@ -61,7 +61,7 @@ import { WeekCalendar } from 'boot-cell/source/Calendar/WeekCalendar';
 
 render(
     <WeekCalendar
-        renderCell={start => 'Class starts at ' + formatDate(start, 'HH:mm')}
+        renderCell={start => `Class starts at ${formatDate(start, 'HH:mm')}`}
     />
 );
 ```

document/source/components/Calendar/WeekCalender.mdx

@@ -30,7 +30,7 @@ Place one add-on or button on either side of an input. You may also place one on
         />
         @example.com
     </InputGroup>
-    <label for="basic-url">Your vanity URL</label>
+    <label htmlFor="basic-url">Your vanity URL</label>
     <InputGroup>
         https://example.com/users/
         <Field id="basic-url" placeholder="Username" aria-label="Username" />
@@ -64,7 +64,7 @@ render(
             />
             @example.com
         </InputGroup>
-        <label for="basic-url">Your vanity URL</label>
+        <label htmlFor="basic-url">Your vanity URL</label>
         <InputGroup>
             https://example.com/users/
             <Field id="basic-url" placeholder="Username" aria-label="Username" />

document/source/components/Form/InputGroup.mdx

@@ -25,9 +25,9 @@ import { Example } from '../../../../source/component/Example';
 ```HTML
 <link
     rel="stylesheet"
-    href="https://cdn.jsdelivr.net/npm/[email protected].4/dist/dialog-polyfill.css"
+    href="https://cdn.jsdelivr.net/npm/[email protected].6/dist/dialog-polyfill.css"
 />
-<script src="https://cdn.jsdelivr.net/npm/[email protected].4/dist/dialog-polyfill.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected].6/dist/dialog-polyfill.js"></script>
 ```
 
 Keep reading for demos and usage guidelines.
@@ -432,7 +432,7 @@ Our default modal without `size` parameter constitutes the "medium" size modal.
             color="primary"
             onClick={() =>
                 openDialog(
-                    <Modal title={level + ' modal'} size={size}>
+                    <Modal title={`${level} modal`} size={size}>
                         Hello, BootCell!
                     </Modal>
                 )
@@ -457,7 +457,7 @@ render([
         color="primary"
         onClick={() =>
             openDialog(
-                <Modal title={level + ' modal'} size={size}>
+                <Modal title={`${level} modal`} size={size}>
                     Hello, BootCell!
                 </Modal>
             )

document/source/components/Prompt/Dialog.mdx

@@ -16,7 +16,7 @@ Badges scale to match the size of the immediate parent element by using relative
 
 <Example>
     {[1, 2, 3, 4, 5, 6].map(level => {
-        const Tag = 'h' + level;
+        const Tag = `h${level}`;
         return (
             <Tag>
                 Example heading <Badge color="secondary">New</Badge>
@@ -30,7 +30,7 @@ import { render, createCell } from 'web-cell';
 import { Badge } from 'boot-cell/source/Reminder/Badge';
 
 render([1, 2, 3, 4, 5, 6].map(level => {
-    const Tag = 'h' + level;
+    const Tag = `h${level}`;
 
     return (
         <Tag>

document/source/components/Reminder/Badge.mdx

@@ -134,7 +134,7 @@ For clarity in the following example, we’ve added a background color on the ic
                 <FAIcon
                     name={name}
                     fixedWidth
-                    className={'bg-' + (index % 2 ? 'info' : 'primary')}
+                    className={`bg-${index % 2 ? 'info' : 'primary'}`}
                 />{' '}
                 {title}
             </li>
@@ -159,7 +159,7 @@ render(
                 <FAIcon
                     name={name}
                     fixedWidth
-                    className={'bg-' + (index % 2 ? 'info' : 'primary')}
+                    className={`bg-${index % 2 ? 'info' : 'primary'}`}
                 />{' '}
                 {title}
             </li>