diff --git a/README.md b/README.md index 8f1647b0d..831183aea 100755 --- a/README.md +++ b/README.md @@ -11,7 +11,16 @@ ## Demo +
+ + +

+
+ Documentation for V4 - [Github Page](https://reacttooltip.github.io/react-tooltip/). diff --git a/docs/src/components/HomepageSponsored/index.tsx b/docs/src/components/HomepageSponsored/index.tsx new file mode 100644 index 000000000..2fc51330f --- /dev/null +++ b/docs/src/components/HomepageSponsored/index.tsx @@ -0,0 +1,48 @@ +/* eslint-disable import/no-unresolved */ +/* eslint-disable @typescript-eslint/no-var-requires */ +/* eslint-disable global-require */ +import React from 'react' +import clsx from 'clsx' +import styles from './styles.module.css' + +type FeatureItem = { + title: string + Svg: React.ComponentType> + link: string +} + +const FeatureList: FeatureItem[] = [ + { + title: 'Digital Ocean', + Svg: require('@site/static/img/digital-ocean-powered-by.svg').default, + link: 'https://www.digitalocean.com/?refcode=0813b3be1161&utm_campaign=Referral_Invite&utm_medium=Referral_Program&utm_source=badge', + }, +] + +function Feature({ title, Svg, link }: FeatureItem) { + return ( +
+
+ + + +
+
+ ) +} + +export default function HomepageSponsored(): JSX.Element { + return ( +
+
+

Sponsors

+
+ {FeatureList.map((props, idx) => ( + // eslint-disable-next-line react/no-array-index-key + + ))} +
+
+
+ ) +} diff --git a/docs/src/components/HomepageSponsored/styles.module.css b/docs/src/components/HomepageSponsored/styles.module.css new file mode 100644 index 000000000..7de7d3c8a --- /dev/null +++ b/docs/src/components/HomepageSponsored/styles.module.css @@ -0,0 +1,17 @@ +.features { + display: flex; + align-items: center; + padding: 2rem 0; + width: 100%; +} + +.featureSvg { + height: 200px; + width: 200px; +} + +.sponsoredTitle { + font-size: xx-large; + display: flex; + justify-content: center; +} diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css index 75c8aae3a..68dc76fff 100644 --- a/docs/src/css/custom.css +++ b/docs/src/css/custom.css @@ -6,6 +6,17 @@ /* You can override the default Infima variables here. */ :root { + --ifm-color-primary: #004285; + --ifm-color-primary-dark: #003b78; + --ifm-color-primary-darker: #003871; + --ifm-color-primary-darkest: #002e5d; + --ifm-color-primary-light: #004992; + --ifm-color-primary-lighter: #004c99; + --ifm-color-primary-lightest: #0056ad; + --ifm-code-font-size: 95%; + --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1); +} +/* :root { --ifm-color-primary: #2e8555; --ifm-color-primary-dark: #29784c; --ifm-color-primary-darker: #277148; @@ -15,10 +26,21 @@ --ifm-color-primary-lightest: #3cad6e; --ifm-code-font-size: 95%; --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1); -} +} */ /* For readability concerns, you should choose a lighter palette in dark mode. */ [data-theme='dark'] { + --ifm-color-primary: #70b8ff; + --ifm-color-primary-dark: #4ba6ff; + --ifm-color-primary-darker: #399dff; + --ifm-color-primary-darkest: #0281ff; + --ifm-color-primary-light: #95caff; + --ifm-color-primary-lighter: #a7d3ff; + --ifm-color-primary-lightest: #deefff; + --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3); +} + +/* [data-theme='dark'] { --ifm-color-primary: #25c2a0; --ifm-color-primary-dark: #21af90; --ifm-color-primary-darker: #1fa588; @@ -27,7 +49,7 @@ --ifm-color-primary-lighter: #32d8b4; --ifm-color-primary-lightest: #4fddbf; --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3); -} +} */ /** styling examples **/ .example-container .example { diff --git a/docs/src/pages/index.tsx b/docs/src/pages/index.tsx index 4add8211e..124748118 100644 --- a/docs/src/pages/index.tsx +++ b/docs/src/pages/index.tsx @@ -5,6 +5,7 @@ import Link from '@docusaurus/Link' import useDocusaurusContext from '@docusaurus/useDocusaurusContext' import Layout from '@theme/Layout' import HomepageFeatures from '@site/src/components/HomepageFeatures' +import HomepageSponsored from '@site/src/components/HomepageSponsored' import styles from './index.module.css' @@ -39,6 +40,7 @@ export default function Home(): JSX.Element {
+
) diff --git a/docs/src/pages/markdown-page.md b/docs/src/pages/markdown-page.md deleted file mode 100644 index 9756c5b66..000000000 --- a/docs/src/pages/markdown-page.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -title: Markdown page example ---- - -# Markdown page example - -You don't need React to write simple standalone pages. diff --git a/docs/static/img/digital-ocean-powered-by.svg b/docs/static/img/digital-ocean-powered-by.svg new file mode 100644 index 000000000..3e9441e7e --- /dev/null +++ b/docs/static/img/digital-ocean-powered-by.svg @@ -0,0 +1,101 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +