Add documentation website landing page

.circleci/config.yml

@@ -15,6 +15,17 @@ aliases:
         - node_modules
       key: *cache-key
 
+  - &restore-node-modules-cache-website
+      name: Restore node_modules cache for /website
+      keys:
+        - &cache-key-website v1-dependencies-website-{{ checksum "website/package.json" }}
+
+  - &save-node-modules-cache-website
+      name: Save node_modules cache for /website
+      paths:
+        - website/node_modules
+      key: *cache-key-website
+
   - &default-filters
       tags:
         ignore:
@@ -47,6 +58,7 @@ commands:
     steps:
       - checkout
       - restore_cache: *restore-node-modules-cache
+      - restore_cache: *restore-node-modules-cache-website
 
   run-graphics-tests:
     description: "Run graphics tests with specific devicePixelRatio"
@@ -82,6 +94,13 @@ jobs:
       - run: npm install
       - save_cache: *save-node-modules-cache
 
+  install-deps-website:
+    executor: node12-executor
+    steps:
+      - checkout-with-deps
+      - run: cd website && npm install
+      - save_cache: *save-node-modules-cache-website
+
   build:
     executor: node12-executor
     steps:
@@ -222,9 +241,6 @@ jobs:
     executor: node14-executor
     steps:
       - checkout-with-deps
-      # since deploying website and building/tests are running in parallel it is possible that there is no cached deps yet
-      # so let's install them to be sure that everything is fine
-      - run: npm install
       - run: npm run tsc
       - run: npm run bundle-dts
       - run:
@@ -274,6 +290,8 @@ workflows:
     jobs:
       - install-deps:
           filters: *default-filters
+      - install-deps-website:
+          filters: *default-filters
       - no-crlf:
           filters: *default-filters
       - trailing-lf:
@@ -291,6 +309,7 @@ workflows:
           filters: *default-filters
           requires:
             - install-deps
+            - install-deps-website
       - markdown:
           filters: *default-filters
           requires:
@@ -339,8 +358,15 @@ workflows:
 
   website:
     jobs:
+      - install-deps:
+          filters: *default-filters
+      - install-deps-website:
+          filters: *default-filters
       - build-docusaurus-website:
           filters: *default-filters
+          requires:
+            - install-deps
+            - install-deps-website
       - deploy-docusaurus-website:
           filters:
             branches:

.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
@@ -387,6 +388,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

@@ -21,12 +21,6 @@ const cacheDir = path.resolve(__dirname, './.previous-typings-cache/');
 
 const typedocWatch = process.env.TYPEDOC_WATCH === 'true';
 
-// copy logo file to static folder so we can refer to it in the config
-fs.copyFileSync(
-	path.resolve(__dirname, '../.github/logo.svg'),
-	path.resolve(__dirname, 'static/img/lightweight-charts-logo.svg')
-);
-
 function downloadTypingsToFile(typingsFilePath, version) {
 	return new Promise((resolve, reject) => {
 		let file;
@@ -140,14 +134,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 +169,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.7",
+    "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,23 +6,62 @@
 
 /* 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-code-font-size: 95%;
+	--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);
+	--ifm-navbar-background-color: #000000;
+	--ifm-footer-background-color: #000000;
+	--ifm-background-color: #000000;
 }
 
 .docusaurus-highlight-code-line {
-  background-color: rgba(0, 0, 0, 0.1);
-  display: block;
-  margin: 0 calc(-1 * var(--ifm-pre-padding));
-  padding: 0 var(--ifm-pre-padding);
+	background-color: rgba(0, 0, 0, 0.1);
+	display: block;
+	margin: 0 calc(-1 * var(--ifm-pre-padding));
+	padding: 0 var(--ifm-pre-padding);
 }
 
 html[data-theme='dark'] .docusaurus-highlight-code-line {
-  background-color: rgba(0, 0, 0, 0.3);
+	background-color: rgba(0, 0, 0, 0.3);
+}
+
+.navbar__title {
+	font-size: 1.5rem;
+}
+
+.main-wrapper {
+	display: flex;
+	justify-content: center;
+	gap: 2rem;
 }