Skip to content

Commit 3e497ee

Browse files
danielbariondanielbarion
authored
Merge pull request #848 from ReactTooltip/docs/digital-ocean
docs: add digital ocean to home page and project readme and update colors of docs
2 parents c18049c + 54e4d51 commit 3e497ee

File tree

7 files changed

+201
-9
lines changed

7 files changed

+201
-9
lines changed

‎README.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,16 @@
1111

1212
## Demo
1313

14+
<div style="display: flex; justify-content: space-between; width: 100%;>
15+
1416
[![Edit ReactTooltip](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/still-monad-yfi4fn?fontsize=14&hidenavigation=1&theme=dark)
17+
<p>
18+
<a href="https://www.digitalocean.com/?refcode=0813b3be1161&utm_campaign=Referral_Invite&utm_medium=Referral_Program&utm_source=badge">
19+
<img src="https://opensource.nyc3.cdn.digitaloceanspaces.com/attribution/assets/PoweredByDO/DO_Powered_by_Badge_blue.svg" width="201px">
20+
</a>
21+
</p>
22+
</div>
23+
1524

1625
Documentation for V4 - [Github Page](https://reacttooltip.github.io/react-tooltip/).
1726

‎docs/src/components/HomepageSponsored/index.tsx

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
/* eslint-disable import/no-unresolved */
2+
/* eslint-disable @typescript-eslint/no-var-requires */
3+
/* eslint-disable global-require */
4+
import React from 'react'
5+
import clsx from 'clsx'
6+
import styles from './styles.module.css'
7+
8+
type FeatureItem = {
9+
title: string
10+
Svg: React.ComponentType<React.ComponentProps<'svg'>>
11+
link: string
12+
}
13+
14+
const FeatureList: FeatureItem[] = [
15+
{
16+
title: 'Digital Ocean',
17+
Svg: require('@site/static/img/digital-ocean-powered-by.svg').default,
18+
link: 'https://www.digitalocean.com/?refcode=0813b3be1161&utm_campaign=Referral_Invite&utm_medium=Referral_Program&utm_source=badge',
19+
},
20+
]
21+
22+
function Feature({ title, Svg, link }: FeatureItem) {
23+
return (
24+
<div className={clsx('col col--12')}>
25+
<div className="text--center">
26+
<a href={link} title={title} target="_blank" rel="noreferrer">
27+
<Svg className={styles.featureSvg} role="img" />
28+
</a>
29+
</div>
30+
</div>
31+
)
32+
}
33+
34+
export default function HomepageSponsored(): JSX.Element {
35+
return (
36+
<section className={styles.features}>
37+
<div className="container">
38+
<h3 className={styles.sponsoredTitle}>Sponsors</h3>
39+
<div className="row">
40+
{FeatureList.map((props, idx) => (
41+
// eslint-disable-next-line react/no-array-index-key
42+
<Feature key={idx} {...props} />
43+
))}
44+
</div>
45+
</div>
46+
</section>
47+
)
48+
}

‎docs/src/components/HomepageSponsored/styles.module.css

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
.features {
2+
display: flex;
3+
align-items: center;
4+
padding: 2rem 0;
5+
width: 100%;
6+
}
7+
8+
.featureSvg {
9+
height: 200px;
10+
width: 200px;
11+
}
12+
13+
.sponsoredTitle {
14+
font-size: xx-large;
15+
display: flex;
16+
justify-content: center;
17+
}

‎docs/src/css/custom.css

Lines changed: 24 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,17 @@
66

77
/* You can override the default Infima variables here. */
88
:root {
9+
--ifm-color-primary: #004285;
10+
--ifm-color-primary-dark: #003b78;
11+
--ifm-color-primary-darker: #003871;
12+
--ifm-color-primary-darkest: #002e5d;
13+
--ifm-color-primary-light: #004992;
14+
--ifm-color-primary-lighter: #004c99;
15+
--ifm-color-primary-lightest: #0056ad;
16+
--ifm-code-font-size: 95%;
17+
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
18+
}
19+
/* :root {
920
--ifm-color-primary: #2e8555;
1021
--ifm-color-primary-dark: #29784c;
1122
--ifm-color-primary-darker: #277148;
@@ -15,10 +26,21 @@
1526
--ifm-color-primary-lightest: #3cad6e;
1627
--ifm-code-font-size: 95%;
1728
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
18-
}
29+
} */
1930

2031
/* For readability concerns, you should choose a lighter palette in dark mode. */
2132
[data-theme='dark'] {
33+
--ifm-color-primary: #70b8ff;
34+
--ifm-color-primary-dark: #4ba6ff;
35+
--ifm-color-primary-darker: #399dff;
36+
--ifm-color-primary-darkest: #0281ff;
37+
--ifm-color-primary-light: #95caff;
38+
--ifm-color-primary-lighter: #a7d3ff;
39+
--ifm-color-primary-lightest: #deefff;
40+
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
41+
}
42+
43+
/* [data-theme='dark'] {
2244
--ifm-color-primary: #25c2a0;
2345
--ifm-color-primary-dark: #21af90;
2446
--ifm-color-primary-darker: #1fa588;
@@ -27,7 +49,7 @@
2749
--ifm-color-primary-lighter: #32d8b4;
2850
--ifm-color-primary-lightest: #4fddbf;
2951
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
30-
}
52+
} */
3153

3254
/** styling examples **/
3355
.example-container .example {

‎docs/src/pages/index.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import Link from '@docusaurus/Link'
55
import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
66
import Layout from '@theme/Layout'
77
import HomepageFeatures from '@site/src/components/HomepageFeatures'
8+
import HomepageSponsored from '@site/src/components/HomepageSponsored'
89

910
import styles from './index.module.css'
1011

@@ -39,6 +40,7 @@ export default function Home(): JSX.Element {
3940
<HomepageHeader />
4041
<main>
4142
<HomepageFeatures />
43+
<HomepageSponsored />
4244
</main>
4345
</Layout>
4446
)

‎docs/src/pages/markdown-page.md

Lines changed: 0 additions & 7 deletions
This file was deleted.

‎docs/static/img/digital-ocean-powered-by.svg

Lines changed: 101 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)