Merge pull request #2 from phshy0607/dev-socials

Socials. other features and bug fixes.

CHANGELOG.md

@@ -12,10 +12,19 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - `Fixed` for any bug fixes.
 - `Security` in case of vulnerabilities.
 
+## [UNRELEASED]
+
+### Added
+- add `defineConfig`, to help write config file.
+- add `ESM` info in `ReadMe` and `docs`
+- now support `socials` in `docit.config.js` file.
+- export more types
+- more docs
+
 
 ## [0.6.4] - 2022-03-29
 
-### added
+### Added
 - use `yarn release` to publish packages
 
 ## [0.6.2] - 2022-03-29

README.md

@@ -7,10 +7,12 @@
 - :stuck_out_tongue: MDX & MD Syntax oriented.
 - :tornado: Fast HMR
 - :chart: Out of the Box Api & Component Props Table Generation
-- :heart: Emoji Support
+- :heart: Emoji Support and Responsive Designs
 
 ## Get Started
 
+> This package is ESM only: Node 12+ is needed to use it and it must be imported instead of required.
+
 ```sh
 yarn add @blizzbolts/docit -D
 ```
@@ -44,5 +46,11 @@ This project is inspired by [Vitepress](https://vitepress.vuejs.org/) and [Story
 
 ## Changelog
 
-checkout [CHANGELOG.md](https://github.com/phshy0607/docit/blob/master/CHANGELOG.md)
+[CHANGELOG.md](https://github.com/phshy0607/docit/blob/master/CHANGELOG.md)
+
+
+## Examples
+
+[Docit](https://phshy0607.github.io/docit/)
+
 

docs/.docit/docit.config.js

@@ -1,27 +1,81 @@
-const config = {
+import { defineConfig } from "../../src/node/index";
+
+const config = defineConfig({
   title: "Docit",
   publicPath: "https://phshy0607.github.io/docit/",
+  socials: {
+    Github: "https://github.com/phshy0607/docit",
+  },
   sidebars: [
-    { title: "Get Started", path: "/index" },
     {
-      title: "Usage",
+      title: "Get Started",
       children: [
         {
-          title: "Syntax",
-          path: "/usage/Syntax",
+          title: "Introduction",
+          path: "/get-started/introduction",
+        },
+      ],
+    },
+    {
+      title: "Document",
+      children: [
+        {
+          title: "MDX",
+          path: "/document/MDX",
+        },
+        {
+          title: "Live Block",
+          path: "/document/live-block",
+        },
+        {
+          title: "API Generation",
+          path: "/document/api-generation",
+        },
+        {
+          title: "Front Matter",
+          path: "/document/front-matter",
+        },
+      ],
+    },
+    {
+      title: "Explaination",
+      children: [
+        {
+          title: "Routes",
+          path: "/explaination/routes",
         },
         {
-          title: "Sidebars",
-          path: "/usage/sidebar",
+          title: "Title",
+          path: "/explaination/title",
         },
-        { title: "Static Resources", path: "/usage/static-resources" },
       ],
     },
     {
-      title: "Config File",
-      path: "/Configs",
+      title: "Configure",
+      children: [
+        {
+          title: "Config File",
+          path: "/configure/config-file",
+        },
+        {
+          title: "Sidebar",
+          path: "/configure/sidebar",
+        },
+        {
+          title: "Provider",
+          path: "/configure/provider",
+        },
+        {
+          title: "Static Resources",
+          path: "/configure/static-resources",
+        },
+        {
+          title: "Socials",
+          path: "/configure/socials",
+        },
+      ],
     },
     { title: "Troubleshooting", path: "/troubleshooting" },
   ],
-};
+});
 export default config;

docs/Configs.mdx → docs/configure/config-file.md

@@ -67,24 +67,16 @@ const config = {
     { title: "FAQ", path: "/FAQ" },
     { title: "Feature Request List", path: "/feature-request" },
   ],
-};
-export default config;
-```
-
-## Provider
-
-If you need a `Provider` to wrap the document up. You can provider a `providePath` via config file.
-
-For Example.
 
-```jsx
-import React from "react";
-import { ThemeProvider } from "../src/theme/Provider";
-
-const Provider = (props) => {
-  const { children } = props;
-  return <ThemeProvider>{children}</ThemeProvider>;
+  /**
+   * Custom Social Info
+   * 
+   * @Default undefined
+   */
+  socials: {
+    Twitter: 'xxx',
+    Github: 'xxx'
+  }
 };
-
-export default Provider;
+export default config;
 ```

docs/configure/provider.md

@@ -0,0 +1,31 @@
+
+# Provider
+
+If you need a `Provider` to wrap the document up. You can provider a `providePath` via config file.
+
+
+## Example
+
+```js
+// docit.config.js
+import { resolve } from 'path'
+
+export default {
+  providerPath: resolve(__dirname, '../../Provder/index.jsx')
+}
+```
+
+
+```jsx
+// Provider/index.jsx
+
+import React from "react";
+import { ThemeProvider } from "../src/theme/Provider";
+
+const Provider = (props) => {
+  const { children } = props;
+  return <ThemeProvider>{children}</ThemeProvider>;
+};
+
+export default Provider;
+```

docs/configure/socials.md

@@ -0,0 +1,22 @@
+# Socials
+
+add a `socials` object in your `docit.config.js` file
+
+> Checkout [Config File](#/configure/config-file) for Config file setup
+
+Currently only support `Twitter` and `Github`
+
+Your social info will displayed at the right side of header
+
+
+## Example
+
+```js
+// docit.config.js
+
+export default {
+  socials: {
+    Github: 'https://github.com/phshy0607/docit'
+  }
+}
+```

docs/document/MDX.md

@@ -0,0 +1,42 @@
+# MDX
+
+MDX is a syntax that enable writing JSX and JavaScript expressions in your Markdown files.
+
+
+## Syntax
+
+```md
+# Title 1
+
+## Title 2
+
+{ console.log({str: 'hello world!'})}
+
+export const MyComponent = () => <strong>Coffee Time</strong>
+
+<MyComponent />
+```
+
+Check out [MDX](https://mdxjs.com/docs/what-is-mdx/) for more.
+
+
+## Usage
+
+Docit support normal `.md` files by default.
+
+To render components in Markdown file, please use `.mdx` as file extension.
+
+You can mix and layout your files as you want.
+
+For Example
+
+```md
+|- docs
+  |- get-started
+    |- introduction.md
+    |- features.md
+  |- components
+    |- Button.mdx
+    |- Sidebar.mdx
+|- package.json
+```

docs/document/api-generation.md

@@ -0,0 +1,73 @@
+# API Generation
+
+Docit provides a simple syntax to handle auto API parsing.
+
+> Currently only support React Typescript API Tables. Functions and Interface support might not work as you expected.
+
+### Syntax
+
+```md
+[Props](../components/Button.tsx)
+```
+
+Inside Docit, it will check the text name to be `Props` and resolve your component path using [resolve](https://www.npmjs.com/package/resolve)
+
+For Example
+
+```jsx
+import React from "react";
+import styled from "styled-components";
+
+enum Length {
+  /**
+   * Large
+   */
+  Large = 5,
+  /**
+   * 中
+   */
+  Medium = 3,
+  /**
+   * 小
+   */
+  Small = 1,
+}
+
+interface ButtonProps extends HTMLButtonElement {
+  /**
+   * 一种颜色
+   * @default red
+   */
+  color?: string;
+  length: Length;
+}
+
+export const StyledButton = styled.button`
+  z-index: 9999;
+`;
+
+const Button: React.FC<ButtonProps> = () => {
+  return <StyledButton>1</StyledButton>;
+};
+
+Button.defaultProps = {
+  color: "green",
+  length: Length.Large,
+};
+
+export { Button };
+```
+
+The API table will look like:
+
+[Props](../components/ApiTest.tsx)
+
+You will notice `StyledButton` get exported, but the api table does not appear, thats because the type parser got nothing from parsing it.
+
+---
+
+since Docit using `resolve`, you can actually parsing some third party types like
+
+```md
+[Props](antd-mobile/es/index.d.ts)
+```

docs/document/front-matter.md

@@ -0,0 +1,3 @@
+# Front Matter
+
+WIP