Add documentation website landing page

.eslintrc.js

@@ -56,6 +56,7 @@ module.exports = {
 	},
 	extends: [
 		'eslint:recommended',
+		'plugin:react/recommended',
 	],
 	parserOptions: {
 		ecmaVersion: 2019,
@@ -64,7 +65,7 @@ module.exports = {
 	overrides: [
 		{
 			// rules specific for js files only
-			files: ['**/*.js', '**/*.md/*.javascript'],
+			files: ['**/*.js', '**/*.md/*.javascript', '**/*.jsx'],
 			rules: {
 				// enforces no braces where they can be omitted
 				// http://eslint.org/docs/rules/arrow-body-style
@@ -105,6 +106,12 @@ module.exports = {
 				semi: ['error', 'always'],
 			},
 		},
+		{
+			files: ['**/*.jsx'],
+			env: {
+				browser: true,
+			},
+		},
 		{
 			files: ['**/*.md'],
 			processor: 'markdown/markdown',
@@ -387,6 +394,12 @@ module.exports = {
 				],
 			},
 		},
+		{
+			files: ['website/src/pages/**/*.tsx'],
+			rules: {
+				'import/no-default-export': 'off',
+			},
+		},
 		{
 			files: ['dist/typings.d.ts'],
 			parser: '@typescript-eslint/parser',

package.json

@@ -59,6 +59,7 @@
     "eslint-plugin-prefer-arrow": "~1.2.1",
     "eslint-plugin-tsdoc": "~0.2.14",
     "eslint-plugin-unicorn": "~39.0.0",
+    "eslint-plugin-react": "~7.28.0",
     "express": "~4.17.1",
     "glob": "~7.2.0",
     "markdown-it": "~12.3.0",

website/docusaurus.config.js

@@ -140,14 +140,8 @@ const config = {
 				title: 'Lightweight Charts',
 				logo: {
 					alt: 'Lightweight Charts Logo',
-					// please note that there is no such file in static/img folder in git
-					// but this file will be copied by this config (see above fs.copyFileSync call)
-					// this is just to avoid duplicating the same files in the repo
-					// and at the same time to avoid loading files from other domains (like github)
-					// (loading from other domains might take some time and the page might blink especially while loading images)
-					src: 'img/lightweight-charts-logo.svg',
-					width: 48,
-					height: 32,
+					src: 'img/logo-light.svg',
+					srcDark: 'img/logo-dark.svg',
 				},
 				items: [
 					{
@@ -181,7 +175,6 @@ const config = {
 				],
 			},
 			footer: {
-				style: 'dark',
 				links: [
 					{
 						title: 'Docs',

website/package.json

@@ -13,11 +13,13 @@
   },
   "dependencies": {
     "@docusaurus/core": "2.0.0-beta.13",
+    "@docusaurus/module-type-aliases": "2.0.0-beta.13",
     "@docusaurus/preset-classic": "2.0.0-beta.13",
     "@docusaurus/theme-search-algolia": "2.0.0-beta.13",
     "@tsconfig/docusaurus": "~1.0.4",
     "cross-env": "~7.0.3",
     "docusaurus-plugin-typedoc": "0.16.6",
+    "lightweight-charts": "~3.7.0",
     "prism-react-renderer": "~1.2.1",
     "react": "~17.0.1",
     "react-dom": "~17.0.1",

website/src/css/custom.css

@@ -6,14 +6,40 @@
 
 /* You can override the default Infima variables here. */
 :root {
-  --ifm-color-primary: #2962FF;
-  --ifm-color-primary-dark: #1E53E5;
-  --ifm-color-primary-darker: #1848CC;
-  --ifm-color-primary-darkest: #143EB3;
-  --ifm-color-primary-light: #3179F5;
-  --ifm-color-primary-lighter: #5B9CF6;
-  --ifm-color-primary-lightest: #90BFF9;
+  --ifm-color-primary: rgb(41, 98, 255);
+  --ifm-color-primary-dark: rgb(30, 83, 229);
+  --ifm-color-primary-darker: rgb(24, 72, 204);
+  --ifm-color-primary-darkest: rgb(20, 62, 179);
+  --ifm-color-primary-light: rgb(49, 121, 245);
+  --ifm-color-primary-lighter: rgb(91, 156, 246);
+  --ifm-color-primary-lightest: rgb(144, 191, 249);
   --ifm-code-font-size: 95%;
+  --ifm-footer-background-color: rgb(255, 255, 255);
+	--PrimaryButtonColor: rgba(41, 98, 255, 1);
+	--SmallCardBorderColor: rgb(224, 227, 235);
+	--CardBackgroundColor:  rgb(240, 243, 250);
+	--CardBackgroundColor: rgba(240, 243, 250, 1);
+	--CardParagraphColor: rgba(120, 123, 134, 1);
+	--IconColor: rgb(0, 0, 0);
+	--HeroButtonTextColor: rgba(0, 0, 0, 1);
+	--HeroButtonBackgroundColorHover: rgba(240, 243, 250, 1);
+	--HeroButtonBackgroundColorActive: rgba(224, 227, 235, 1);
+	--HeroTextBackgroundColor: rgb(255, 255, 255);
+  --LogoColor: rgb(0, 0, 0);
+  --LargeCardParagraphTextColor: rgba(120, 123, 134, 1);
+}
+
+html[data-theme=dark] {
+	--SmallCardBorderColor: rgb(30, 34, 45);
+	--CardBackgroundColor: rgba(12, 14, 21, 1);
+	--CardParagraphColor: rgba(178, 181, 190, 1);
+	--IconColor: rgba(209, 212, 220, 1);
+	--HeroButtonTextColor: rgba(209, 212, 220, 1);
+	--HeroButtonBackgroundColorHover: rgba(42, 46, 57, 1);
+	--HeroButtonBackgroundColorActive: rgba(54, 58, 69, 1);
+	--HeroTextBackgroundColor: rgba(12, 14, 21, 1);
+  --LogoColor: rgb(255, 255, 255);
+  --LargeCardParagraphTextColor: rgba(178, 181, 190, 1);
 }
 
 .docusaurus-highlight-code-line {
@@ -26,3 +52,32 @@
 html[data-theme='dark'] .docusaurus-highlight-code-line {
   background-color: rgba(0, 0, 0, 0.3);
 }
+
+
+html[data-theme='dark'] {
+  --ifm-navbar-background-color: #000000;
+  --ifm-footer-background-color: #000000;
+  --ifm-background-color: #000000;
+}
+
+.navbar__title {
+  font-size: 1.5rem;
+}
+
+.navbar__logo img {
+  fill-rule: evenodd;
+}
+
+.main-wrapper {
+  display: flex;
+  justify-content: center;
+  gap: 2rem;
+}
+
+.logo-svg path {
+	stroke: var(--LogoColor);
+}
+
+.logo-svg-stem-path {
+	fill: var(--LogoColor);
+}

website/src/pages/data.json

@@ -0,0 +1,198 @@
+{
+	"orangeData": [
+		{
+			"value": 33,
+			"time": 1628005368
+		},
+		{
+			"value": 33.49774076716826,
+			"time": 1628610168
+		},
+		{
+			"value": 33.00544183567645,
+			"time": 1629214968
+		},
+		{
+			"value": 33.7026637942526,
+			"time": 1629819768
+		},
+		{
+			"value": 33.21936886405405,
+			"time": 1630424568
+		},
+		{
+			"value": 33.900609590144896,
+			"time": 1631029368
+		},
+		{
+			"value": 33.17765657755362,
+			"time": 1631634168
+		},
+		{
+			"value": 33.42924174402081,
+			"time": 1632238968
+		},
+		{
+			"value": 33.11836183231501,
+			"time": 1632843768
+		},
+		{
+			"value": 33.370546260351574,
+			"time": 1633448568
+		},
+		{
+			"value": 32.37624709371832,
+			"time": 1634053368
+		},
+		{
+			"value": 32.51457619610796,
+			"time": 1634658168
+		},
+		{
+			"value": 32.289844763651196,
+			"time": 1635262968
+		},
+		{
+			"value": 32.30345180071158,
+			"time": 1635867768
+		},
+		{
+			"value": 31.338699866068282,
+			"time": 1636472568
+		},
+		{
+			"value": 31.599431171640674,
+			"time": 1637077368
+		},
+		{
+			"value": 31.19599059792039,
+			"time": 1637682168
+		},
+		{
+			"value": 31.425624659001333,
+			"time": 1638286968
+		},
+		{
+			"value": 30.687366192207392,
+			"time": 1638891768
+		},
+		{
+			"value": 31.37955209658077,
+			"time": 1639496568
+		},
+		{
+			"value": 30.44272814637675,
+			"time": 1640101368
+		},
+		{
+			"value": 30.443425326447485,
+			"time": 1640706168
+		},
+		{
+			"value": 30.402280371726427,
+			"time": 1641310968
+		},
+		{
+			"value": 31.323860910479432,
+			"time": 1641915768
+		}
+	],
+	"blueData": [
+		{
+			"value": 31,
+			"time": 1628005368
+		},
+		{
+			"value": 31.78679751621187,
+			"time": 1628610168
+		},
+		{
+			"value": 31.73307428969506,
+			"time": 1629214968
+		},
+		{
+			"value": 32.645659569228435,
+			"time": 1629819768
+		},
+		{
+			"value": 32.18589215966293,
+			"time": 1630424568
+		},
+		{
+			"value": 32.36649658122607,
+			"time": 1631029368
+		},
+		{
+			"value": 32.13494929971301,
+			"time": 1631634168
+		},
+		{
+			"value": 32.24176261787218,
+			"time": 1632238968
+		},
+		{
+			"value": 32.23416002963385,
+			"time": 1632843768
+		},
+		{
+			"value": 33.155464487194166,
+			"time": 1633448568
+		},
+		{
+			"value": 32.30858974959849,
+			"time": 1634053368
+		},
+		{
+			"value": 33.240351713622175,
+			"time": 1634658168
+		},
+		{
+			"value": 32.476820033756304,
+			"time": 1635262968
+		},
+		{
+			"value": 33.38322664774607,
+			"time": 1635867768
+		},
+		{
+			"value": 33.112040840762795,
+			"time": 1636472568
+		},
+		{
+			"value": 33.21270434841732,
+			"time": 1637077368
+		},
+		{
+			"value": 32.34952853888793,
+			"time": 1637682168
+		},
+		{
+			"value": 33.309373031504336,
+			"time": 1638286968
+		},
+		{
+			"value": 32.68788509068168,
+			"time": 1638891768
+		},
+		{
+			"value": 32.991148534675084,
+			"time": 1639496568
+		},
+		{
+			"value": 32.019560141931144,
+			"time": 1640101368
+		},
+		{
+			"value": 32.6775781486036,
+			"time": 1640706168
+		},
+		{
+			"value": 31.739487272423506,
+			"time": 1641310968
+		},
+		{
+			"value": 31.957098637385883,
+			"time": 1641915768
+		}
+	]
+}