Improve the rendering of the docs (#5160)

* 🎨 Improve the docs layout and performance

* 🎨 Update the tsconfig to avoid docs generating issue

* 🎨 Update github reference

Author: nazarhussain

docs/.env

@@ -0,0 +1 @@
+DISABLE_NEW_JSX_TRANSFORM=true

docs/docusaurus.config.js

@@ -17,6 +17,27 @@ along with web3.js.  If not, see <http://www.gnu.org/licenses/>.
 
 const lightCodeTheme = require('prism-react-renderer/themes/github');
 const darkCodeTheme = require('prism-react-renderer/themes/dracula');
+const { join } = require('path');
+
+const packages = [
+	'web3',
+	'web3-eth',
+	'web3-eth-contract',
+	'web3-utils',
+	'web3-validator',
+	'web3-common',
+	'web3-core',
+	'web3-errors',
+	'web3-net',
+	'web3-eth-abi',
+	'web3-eth-accounts',
+	'web3-eth-ens',
+	'web3-eth-iban',
+	'web3-eth-personal',
+	'web3-providers-http',
+	'web3-providers-ws',
+	'web3-providers-ipc',
+];
 
 /** @type {import('@docusaurus/types').Config} */
 const config = {
@@ -44,46 +65,23 @@ const config = {
 	plugins: [
 		'@docusaurus/theme-live-codeblock',
 		[
-			'docusaurus-plugin-typedoc',
-
-			// Plugin / TypeDoc options
+			'docusaurus-plugin-typedoc-api',
 			{
-				entryPoints: [
-					'../packages/web3',
-					'../packages/web3-common',
-					'../packages/web3-core',
-					'../packages/web3-errors',
-					'../packages/web3-eth',
-					'../packages/web3-eth-abi',
-					'../packages/web3-eth-accounts',
-					'../packages/web3-eth-contract',
-					'../packages/web3-eth-ens',
-					'../packages/web3-eth-iban',
-					'../packages/web3-eth-personal',
-					'../packages/web3-net',
-					'../packages/web3-providers-http',
-					'../packages/web3-providers-ws',
-					'../packages/web3-providers-ipc',
-					'../packages/web3-utils',
-					'../packages/web3-validator',
-				],
-				entryPointStrategy: 'packages',
-				cleanOutputDir: true,
-				sidebar: {
-					fullNames: true,
+				projectRoot: join(__dirname, '..'),
+				// Monorepo
+				packages: packages.map(p => `packages/${p}`),
+				minimal: false,
+				debug: true,
+				changelogs: true,
+				readmes: false,
+				tsconfigName: 'docs/tsconfig.docs.json',
+				typedocOptions: {
+					plugin: [
+						'typedoc-monorepo-link-types',
+						'typedoc-plugin-extras',
+						'typedoc-plugin-mdn-links',
+					],
 				},
-				plugin: [
-					// Link the cross package types
-					'typedoc-monorepo-link-types',
-					// Provide some extra formatting features for the generated docs
-					'typedoc-plugin-extras',
-					// Provide support to allow relative includes in the JSDoc comments.
-					'@droppedcode/typedoc-plugin-relative-includes',
-					// Adds support for linking references to global types like `HTMLElement`, `Date`
-					'typedoc-plugin-mdn-links',
-				],
-				// Don't cross reference the non-exported members
-				noMissingExports: true,
 			},
 		],
 	],
@@ -97,7 +95,7 @@ const config = {
 					sidebarPath: require.resolve('./sidebars.js'),
 					// Please change this to your repo.
 					// Remove this to remove the "edit this page" links.
-					editUrl: 'https://github.com/ChainSafe/web3.js/tree/main/website/',
+					editUrl: 'https://github.com/ChainSafe/web3.js/tree/4.x/docs',
 				},
 				theme: {
 					customCss: require.resolve('./src/css/custom.css'),
@@ -123,13 +121,12 @@ const config = {
 						position: 'left',
 					},
 					{
-						to: 'docs/api/', // 'api' is the 'out' directory
-						activeBasePath: 'docs',
+						to: 'api', // 'api' is the 'out' directory
 						label: 'API',
 						position: 'left',
 					},
 					{
-						href: 'https://github.com/ChainSafe/web3.js',
+						href: 'https://github.com/ChainSafe/web3.js/tree/4.x/',
 						label: 'GitHub',
 						position: 'right',
 					},

docs/package.json

@@ -15,20 +15,20 @@
 		"typecheck": "tsc"
 	},
 	"dependencies": {
-		"@docusaurus/core": "2.0.0-beta.20",
-		"@docusaurus/preset-classic": "2.0.0-beta.20",
-		"@docusaurus/theme-live-codeblock": "^2.0.0-beta.20",
+		"@docusaurus/core": "^2.0.0-beta.21",
+		"@docusaurus/preset-classic": "^2.0.0-beta.21",
+		"@docusaurus/theme-live-codeblock": "^2.0.0-beta.21",
 		"@mdx-js/react": "^1.6.22",
 		"clsx": "^1.1.1",
 		"prism-react-renderer": "^1.3.1",
 		"react": "^17.0.2",
 		"react-dom": "^17.0.2"
 	},
 	"devDependencies": {
-		"@docusaurus/module-type-aliases": "2.0.0-beta.20",
+		"@docusaurus/module-type-aliases": "^2.0.0-beta.21",
 		"@tsconfig/docusaurus": "^1.0.5",
-		"typescript": "^4.6.4",
-		"docusaurus-plugin-typedoc": "^0.17.5"
+		"docusaurus-plugin-typedoc-api": "^2.0.1",
+		"typescript": "^4.6.4"
 	},
 	"browserslist": {
 		"production": [

docs/src/components/HomepageFeatures/index.tsx

@@ -1,3 +1,20 @@
+/*
+This file is part of web3.js.
+
+web3.js is free software: you can redistribute it and/or modify
+it under the terms of the GNU Lesser General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+web3.js is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Lesser General Public License for more details.
+
+You should have received a copy of the GNU Lesser General Public License
+along with web3.js.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
 import React from 'react';
 import clsx from 'clsx';
 import styles from './styles.module.css';

docs/src/pages/index.tsx

@@ -33,7 +33,7 @@ function HomepageHeader() {
         <div className={styles.buttons}>
           <Link
             className="button button--secondary button--lg"
-            to="/docs/intro">
+            to="/docs/guides/intro">
             Docusaurus Tutorial - 5min ⏱️
           </Link>
         </div>

docs/tsconfig.docs.json

@@ -0,0 +1,8 @@
+{
+	"extends": "../tsconfig.json",
+	"compilerOptions": {
+		"declarationDir": "dts",
+		"outDir": "dts"
+	},
+	"include": ["../packages/*/src/**/*", "../packages/*/types/**/*"]
+}