Feature/documentation

documentation/docs/advanced/_category_.json

@@ -0,0 +1,8 @@
+{
+  "label": "Advanced",
+  "position": 3,
+  "link": {
+    "type": "generated-index",
+    "description": "This section explains advanced things"
+  }
+}

documentation/docs/advanced/specific-module-installation.mdx

@@ -0,0 +1,37 @@
+---
+sidebar_position: 1
+title: Specific module installation
+---
+
+# Installation of the specific module type
+
+By default, PyScript-React uses [UMD](https://www.typescriptlang.org/docs/handbook/declaration-files/templates/global-plugin-d-ts.html#umd) version of code. In this package we can access diffrent module types. For example, if we would like to use [ESM](https://tc39.es/ecma262/#sec-modules), we can add to import a post-fix after the library name.
+
+Example:
+
+```ts
+import PyScript from "pyscript-react/esm"; // main entrypoint
+import PyScriptProvider from "pyscript-react/esm/components/py-script-provider"; // specific component
+```
+
+Also, we can just download package with only specific module type. List of possible to download packages is relative to that which are embedded into main package.
+
+Packages: [[UMD](https://www.npmjs.com/package/pyscript-react-umd), [ESM](https://www.npmjs.com/package/pyscript-react-esm), [AMD](https://www.npmjs.com/package/pyscript-react-amd), [CJS](https://www.npmjs.com/package/pyscript-react-cjs), [SYSTEM](https://www.npmjs.com/package/pyscript-react-system), [CJS2](https://www.npmjs.com/package/pyscript-react-cjs2), [CJS-ESM](https://www.npmjs.com/package/pyscript-react-cjs-esm)]
+
+Via npm:
+
+```sh
+npm i pyscript-react-(umd|esm|amd|cjs|system|cjs2|cjs-esm)
+```
+
+Via yarn:
+
+```sh
+yarn add pyscript-react-(umd|esm|amd|cjs|system|cjs2|cjs-esm)
+```
+
+Via pnpm:
+
+```sh
+pnpm i pyscript-react-(umd|esm|amd|cjs|system|cjs2|cjs-esm)
+```

documentation/docs/get-started/_category_.json

@@ -0,0 +1,8 @@
+{
+  "label": "Get started",
+  "position": 2,
+  "link": {
+    "type": "generated-index",
+    "description": "This section explains core concept behind the library, and how to quick start"
+  }
+}

documentation/docs/get-started/concept.mdx

@@ -0,0 +1,35 @@
+---
+sidebar_position: 2
+title: Concept
+---
+
+# Concept
+
+PyScript-React builds to diffrent module types. By default it uses [UMD](https://www.npmjs.com/package/pyscript-react-umd).
+
+Folder structure
+
+```
+/root
+  - /components
+    - /example-component
+        - index.ts
+        - example-component.story.tsx
+        - example-component.test.tsx
+        - example-component.tsx
+        - example-component.types.ts
+  - /hooks
+    - /example-hook
+      - index.ts
+      - example-hook.ts
+      - example-hook.types.ts
+  - /stores
+    - /example-store
+      - index.ts
+      - example-store.ts
+      - example-store.types.ts
+  - /types
+    - /example-type
+      - example-type.ts
+  - index.ts # library entrypoint
+```

documentation/docs/get-started/quick-start.mdx

@@ -0,0 +1,90 @@
+---
+sidebar_position: 1
+title: Quick start
+---
+
+# Quick start
+
+## PyScript-React installation
+
+Via npm:
+
+```sh
+npm i pyscript-react
+```
+
+Via yarn:
+
+```sh
+yarn add pyscript-react
+```
+
+Via pnpm:
+
+```sh
+pnpm i pyscript-react
+```
+
+## Installation of peer dependencies
+
+Via npm:
+
+```sh
+npm i react prop-types
+```
+
+Via yarn:
+
+```sh
+yarn add react prop-types
+```
+
+Via pnpm:
+
+```sh
+pnpm i react prop-types
+```
+
+## Installation of providers peer dependency
+
+In the case when we would like to use `PyScriptProvider` which provides pyscript script to the application, or `PyScriptProviderZustandWrapper` which does the same thing, but additionally setting up pyScript state which stores pyScript global object we have to install `react-helmet-async`.
+
+Via npm:
+
+```sh
+npm i react-helmet-async
+```
+
+Via yarn:
+
+```sh
+yarn add react-helmet-async
+```
+
+Via pnpm:
+
+```sh
+pnpm i react-helmet-async
+```
+
+## Installation of PyScriptProviderZustandWrapper peer dependency
+
+`PyScriptProviderZustandWrapper` uses `zustand` under the hood. To works properly it needs `zustand` package installed.
+
+Via npm:
+
+```sh
+npm i zustand
+```
+
+Via yarn:
+
+```sh
+yarn add zustand
+```
+
+Via pnpm:
+
+```sh
+pnpm i zustand
+```

documentation/docs/intro.mdx

@@ -1,5 +1,10 @@
 ---
 sidebar_position: 1
+title: Introduction
 ---
 
-123
+# Introduction
+
+PyScript-React is a wrapper around [PyScript](https://github.com/pyscript/pyscript) for [React](https://github.com/facebook/react). Idea behind that library is to simplify process to embed PyScript in our React application.
+
+## Why PyScript-React?

documentation/docusaurus.config.ts

@@ -10,11 +10,10 @@ const githubLink = "https://github.com/Py4Js/pyscript-react";
 const config: Config = {
   title: `${organizationName} Documentation`,
   tagline: `${organizationName} Documentation`,
-  url: "https://pyscript-react.github.io",
-  baseUrl: "/",
-  onBrokenLinks: "throw",
+  url: "https://py4js.github.io/",
+  baseUrl: "/pyscript-react/",
+  onBrokenLinks: "warn",
   onBrokenMarkdownLinks: "warn",
-  favicon: "img/favicon.ico",
   organizationName,
   projectName: organizationName,
   i18n: {
@@ -39,10 +38,6 @@ const config: Config = {
   themeConfig: {
     navbar: {
       title: organizationName,
-      logo: {
-        alt: organizationName,
-        src: "img/logo.svg",
-      },
       items: [
         {
           type: "doc",

package.json

@@ -10,6 +10,8 @@
     "prepare": "husky install",
     "storybook": "cross-env TS_NODE_PROJECT=tsconfig.node.json storybook dev",
     "documentation": "cd documentation && docusaurus start",
+    "build-documentation": "cd documentation && docusaurus build",
+    "publish-documentation": "gh-pages -b documentation -d documentation/build",
     "build": "cross-env TS_NODE_PROJECT=tsconfig.node.json ts-node ./source/scripts/runner/commands/build/build.ts",
     "test": "cross-env jest --coverage",
     "lint": "cross-env TS_NODE_PROJECT=tsconfig.node.json ts-node ./source/scripts/runner/commands/lint/lint.ts",
@@ -66,6 +68,7 @@
     "eslint-webpack-plugin": "^4.0.1",
     "generate-file-webpack-plugin": "^1.0.1",
     "generate-package-json-webpack-plugin": "^2.6.0",
+    "gh-pages": "^5.0.0",
     "glob": "^10.2.2",
     "husky": "^8.0.3",
     "jest": "^29.5.0",