docs: fix & deploy the docs to gh page

Squashed commits:
[412069f] docs: fix stroke-width => strokeWidth
[33f60c0] docs: update template/website documentation (jaredpalmer#73)
[544bbce] Delete documentation.yml
[b28416f] Revert "Documentation Fix (jaredpalmer#69)" (jaredpalmer#72)

This reverts commit d82864d.
[d82864d] Documentation Fix (jaredpalmer#69)

* 📖 Fixed documentation website

* working on Deployment errors

* switching to github pages

* test deploy
[8a4d3b3] Update documentation.yml (+1 squashed commit)
Squashed commits:
[99cc817] Create documentation.yml

.eslintignore

@@ -1,2 +1,3 @@
 /node_modules/
 dist/
+/docs

.eslintrc.js

@@ -1,3 +1,3 @@
 module.exports = {
-  extends: ['react-app', 'prettier', 'plugin:prettier/recommended'],
+  extends: ['prettier', 'plugin:prettier/recommended'],
 };

.github/workflows/documentation.yml

@@ -0,0 +1,43 @@
+
+name: GitHub Pages
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+
+jobs:
+  deploy:
+    runs-on: ubuntu-20.04
+    defaults:
+      run:
+        working-directory: docs
+    concurrency:
+      group: ${{ github.workflow }}-${{ github.ref }}
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Setup Node
+        uses: actions/setup-node@v2
+        with:
+          node-version: '14'
+
+      - name: Cache dependencies
+        uses: actions/cache@v2
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-node-
+
+      - run: npm install 
+      - run: npm run build
+      - run: npm run export
+
+      - name: Deploy
+        uses: peaceiris/actions-gh-pages@v3
+        if: ${{ github.ref == 'refs/heads/main' }}
+        with:
+          github_token: ${{ secrets.ACCESS_TOKEN }}
+          publish_dir: ./docs/out

docs/.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["next/babel"],
+  "plugins": [ "./utils/custom-mdx-patch"]
+}

docs/.eslintrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+  extends: [
+    'plugin:@next/next/recommended',
+  ],
+};

docs/.gitignore

@@ -0,0 +1,30 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+sidebar.json
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+.env*
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+.vercel
+.yarn

website/.nextra/search.js → docs/.nextra/search.js

@@ -100,12 +100,12 @@ const Search = ({ directories }) => {
       {renderList && (
         <div className="search-overlay z-1" onClick={() => setShow(false)} />
       )}
-      <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+      <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
         <svg
           fill="none"
           strokeLinecap="round"
           strokeLinejoin="round"
-          stroke-width="2"
+          strokeWidth="2"
           viewBox="0 0 24 24"
           stroke="currentColor"
           className="h-4 w-4 text-gray-400"

website/components/features.js → docs/components/features.js

@@ -1,5 +1,5 @@
-import React from 'react';
-import styles from './features.module.css';
+import React from "react";
+import styles from "./features.module.css";
 
 const Feature = ({ text, icon }) => (
   <div className={styles.feature}>
@@ -8,7 +8,7 @@ const Feature = ({ text, icon }) => (
   </div>
 );
 
-export default () => (
+const Logo = () => (
   <div>
     <p className="text-lg mb-2 text-gray-600 md:text-xl">
       Zero-config CLI for TypeScript package development
@@ -723,7 +723,7 @@ export default () => (
                   fill="#1F9CF0"
                 />
               </g>
-              <g style={{ mixBlendMode: 'overlay' }} opacity="0.25">
+              <g style={{ mixBlendMode: "overlay" }} opacity="0.25">
                 <path
                   fillRule="evenodd"
                   clipRule="evenodd"
@@ -817,3 +817,5 @@ export default () => (
     </div>
   </div>
 );
+
+export default Logo;

website/components/features.module.css → docs/components/features.module.css

@@ -18,9 +18,7 @@
   white-space: nowrap;
 }
 @media (max-width: 860px) {
-  .feature {
-    padding-left: 0;
-  }
+
   .feature h4 {
     font-size: 0.75rem;
   }

docs/components/logo.js

@@ -0,0 +1,26 @@
+const Logo = ({ height }) => {
+  return (
+    <svg
+      height={height}
+      viewBox="0 0 380 254"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M126 127V254H253H380V127V0H253H126V127Z" fill="#007ACC" />
+      <path
+        d="M182.08 127.508L182 137.925H198.437H214.874V184.962V232H226.5H238.126V184.962V137.925H254.563H271V127.71C271 122.057 270.88 117.333 270.719 117.212C270.599 117.051 250.594 116.97 226.34 117.01L182.2 117.131L182.08 127.508Z"
+        fill="white"
+      />
+      <path
+        d="M330.89 117.051C337.339 118.673 342.256 121.551 346.77 126.254C349.107 128.768 352.573 133.349 352.855 134.444C352.936 134.768 341.893 142.228 335.203 146.403C334.961 146.566 333.994 145.512 332.905 143.89C329.641 139.106 326.215 137.038 320.976 136.673C313.278 136.146 308.32 140.201 308.361 146.971C308.361 148.958 308.643 150.133 309.449 151.755C311.142 155.282 314.285 157.39 324.16 161.688C342.336 169.553 350.115 174.742 354.951 182.121C360.352 190.351 361.561 203.486 357.893 213.257C353.863 223.879 343.868 231.095 329.802 233.487C325.449 234.257 315.132 234.136 310.457 233.284C300.26 231.46 290.587 226.392 284.622 219.744C282.285 217.149 277.73 210.378 278.013 209.892C278.133 209.73 279.181 209.081 280.35 208.392C281.479 207.743 285.751 205.27 289.781 202.919L297.076 198.662L298.607 200.932C300.744 204.216 305.419 208.716 308.24 210.216C316.341 214.514 327.464 213.905 332.946 208.959C335.283 206.811 336.251 204.581 336.251 201.297C336.251 198.337 335.888 197.04 334.356 194.81C332.381 191.972 328.351 189.58 316.905 184.594C303.807 178.918 298.164 175.391 293.005 169.796C290.023 166.553 287.202 161.363 286.033 157.025C285.066 153.417 284.824 144.376 285.59 140.728C288.29 127.998 297.842 119.119 311.625 116.484C316.099 115.632 326.497 115.957 330.89 117.051Z"
+        fill="white"
+      />
+      <path
+        d="M33.2708 215.722C28.5873 215.722 24.873 211.68 24.873 201.496C24.873 185.169 34.8868 163.831 45.3852 163.831C48.2921 163.831 53.2983 164.639 58.7905 166.417L51.1989 205.86C44.9006 211.519 37.9556 215.722 33.2708 215.722ZM88.8306 228.169L87.055 216.207C73.6486 219.117 73.0031 218.955 74.2952 212.004L94 110L69.4497 111.778L63.3121 143.624C61.0507 143.3 58.9512 143.3 57.0137 143.3C21.4815 143.3 0 176.764 0 208.932C0 229.139 8.88367 239 19.5428 239C28.91 239 40.055 231.402 49.7449 221.865C48.9375 239.97 57.8211 245.628 88.8306 228.169Z"
+        fill="black"
+      />
+    </svg>
+  );
+};
+
+export default Logo;

docs/components/release.js

@@ -0,0 +1,37 @@
+import { Box, Text } from "@chakra-ui/react";
+import Markdown from "markdown-to-jsx";
+
+const Release = (props) => {
+  const { url, name, date, body } = props;
+
+  return (
+    <Box>
+      <Text fontWeight="bold" fontSize="3xl">
+        #{" "}
+        <a href={url} target="_blank" rel="noopener">
+          {name}
+        </a>
+      </Text>
+      <Text>
+        Published on{" "}
+        <Text as="span" color="blue.500">{`${new Date(
+          date
+        ).toDateString()}.`}</Text>
+      </Text>
+      <Markdown>{body}</Markdown>
+    </Box>
+  );
+};
+
+const ReleasesRenderer = ({ releases }) => {
+  return releases.map((release) => (
+    <Release
+      date={release.published_at}
+      name={release.tag_name}
+      body={release.body}
+      url={release.html_url}
+    />
+  ));
+};
+
+export default ReleasesRenderer;

docs/next.config.js

@@ -0,0 +1,11 @@
+const compose = require('compose-function');
+const { withDokz } = require('dokz/dist/plugin');
+const composed = compose(withDokz);
+
+const debug = process.env.NODE_ENV !== 'production';
+
+module.exports = composed({
+  pageExtensions: ['js', 'jsx', 'md', 'mdx', 'ts', 'tsx'],
+  assetPrefix: !debug ? 'https://weiran-zsd.github.io/dts-cli/' : '',
+  basePath: '/dts-cli',
+});

docs/package.json

@@ -0,0 +1,26 @@
+{
+    "name": "docs",
+    "version": "0.1.0",
+    "private": true,
+    "scripts": {
+        "dev": "next dev",
+        "build": "next build",
+        "start": "next start",
+        "export": "next export && touch out/.nojekyll"
+    },
+    "dependencies": {
+        "@chakra-ui/react": "latest",
+        "@emotion/react": "latest",
+        "@emotion/styled": "latest",
+        "dokz": "latest",
+        "framer-motion": "latest",
+        "markdown-to-jsx": "^7.1.3",
+        "next": "^11.1.2",
+        "react": "^17.0.2",
+        "react-dom": "^17.0.2"
+    },
+    "devDependencies": {
+        "@next/eslint-plugin-next": "^11.1.2",
+        "compose-function": "^3.0.3"
+    }
+}

docs/pages/_app.jsx

@@ -0,0 +1,36 @@
+import { DokzProvider, GithubLink, ColorModeSwitch } from "dokz";
+import React, { Fragment } from "react";
+import Head from "next/head";
+import { ChakraProvider } from "@chakra-ui/react";
+import Logo from "../components/logo";
+
+export default function App(props) {
+  const { Component, pageProps } = props;
+  return (
+    <ChakraProvider resetCSS>
+      <Head>
+        <link
+          href="https://fonts.googleapis.com/css?family=Fira+Code"
+          rel="stylesheet"
+          key="google-font-Fira"
+        />
+      </Head>
+      <DokzProvider
+        headerLogo={<Logo height={35} />}
+        headerItems={[
+          <GithubLink key="0" url="https://github.com/weiran-zsd/dts-cli" />,
+          <ColorModeSwitch key="1" />,
+        ]}
+        sidebarOrdering={{
+          "index.mdx": true,
+          "api-reference.mdx": true,
+          "customization.mdx": true,
+          "change-log.mdx": true,
+        }}
+      >
+
+        <Component {...pageProps} />
+      </DokzProvider>
+    </ChakraProvider>
+  );
+}