Merge pull request #983 from tradingview/docs-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/**/*.tsx'],
+			rules: {
+				'import/no-default-export': 'off',
+			},
+		},
 		{
 			files: ['dist/typings.d.ts'],
 			parser: '@typescript-eslint/parser',

.gitignore

@@ -27,7 +27,6 @@ debug.html
 /website/.docusaurus
 /website/.cache-loader
 /website/.previous-typings-cache/*.d.ts
-/website/static/img/lightweight-charts-logo.svg
 
 !/src/typings/**/*.d.ts
 

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;
@@ -139,15 +133,7 @@ const config = {
 			navbar: {
 				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: 'this value is not used because we swizzled the Logo component - see src/theme/Logo',
 				},
 				items: [
 					{
@@ -181,7 +167,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,83 @@
 
 /* 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%;
+	--color-white: #ffffff;
+	--color-black: #000000;
+	--color-cold-gray-100: #F0F3FA;
+	--color-cold-gray-150: #E0E3EB;
+	--color-cold-gray-200: #D1D4DC;
+	--color-cold-gray-300: #B2B5BE;
+	--color-cold-gray-500: #787B86;
+	--color-cold-gray-750: #363A45;
+	--color-cold-gray-800: #2A2E39;
+	--color-cold-gray-850: #1E222D;
+	--color-cold-gray-950: #0C0E15;
+	--color-tv-blue-200: #90BFF9;
+	--color-tv-blue-300: #5B9CF6;
+	--color-tv-blue-400: #3179F5;
+	--color-tv-blue-500: #2962FF;
+	--color-tv-blue-600: #1E53E5;
+	--color-tv-blue-700: #1848CC;
+	--color-tv-blue-800: #143EB3;
+	--color-tv-blue-900: #0C3299;
+
+	--ifm-color-primary: var(--color-tv-blue-500);
+	--ifm-color-primary-dark: var(--color-tv-blue-600);
+	--ifm-color-primary-darker: var(--color-tv-blue-700);
+	--ifm-color-primary-darkest: var(--color-tv-blue-800);
+	--ifm-color-primary-light: var(--color-tv-blue-400);
+	--ifm-color-primary-lighter: var(--color-tv-blue-300);
+	--ifm-color-primary-lightest: var(--color-tv-blue-200);
+	--ifm-code-font-size: 95%;
+	--ifm-footer-background-color: var(--color-white);
+
+	--small-card-border-color: var(--color-cold-gray-150);
+	--card-background-color: var(--color-cold-gray-100);
+	--card-paragraph-color: var(--color-cold-gray-500);
+	--icon-color: var(--color-black);
+	--hero-button-text-color: var(--color-black);
+	--hero-button-hackground-color-hover: var(--color-cold-gray-100);
+	--hero-text-background-color: #ffffff;
+	--icon-color: var(--color-black);
+	--large-card-paragraph-text-color: var(--color-cold-gray-500);
+}
+
+html[data-theme=dark] {
+	--small-card-border-color: var(--color-cold-gray-850);
+	--card-background-color: var(--color-cold-gray-950);
+	--card-paragraph-color: var(--color-cold-gray-300);
+	--icon-color: var(--color-cold-gray-200);
+	--hero-button-text-color: var(--color-cold-gray-200);
+	--hero-button-hackground-color-hover: var(--color-cold-gray-800);
+	--hero-text-background-color: var(--color-cold-gray-950);
+	--icon-color: var(--color-white);
+	--large-card-paragraph-text-color: var(--color-cold-gray-300);
+	--ifm-navbar-background-color: var(--color-black);
+	--ifm-footer-background-color: var(--color-black);
+	--ifm-background-color: var(--color-black);
 }
 
 .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: var(--color-black);
+	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;
+}
+
+.navbar__brand svg {
+	--color: var(--icon-color);
+}
+
+.main-wrapper {
+	display: flex;
+	justify-content: center;
+	gap: 2rem;
 }