Skip to content

Commit 9cc0685

Browse files
danielbariondanielbarion
authored
Merge pull request #1237 from ReactTooltip/feat/digital-ocean-page
docs: add digital ocean page
2 parents 08bfc6f + 6428906 commit 9cc0685

12 files changed

+236
-2
lines changed

Diff for: ‎docs/docusaurus.config.js

+4
Original file line numberDiff line numberDiff line change
@@ -157,6 +157,10 @@ const config = {
157157
label: 'Getting Started',
158158
to: '/docs/getting-started',
159159
},
160+
{
161+
label: 'Deploying to DigitalOcean',
162+
to: '/blog/digital-ocean-app-platform',
163+
},
160164
],
161165
},
162166
// {

Diff for: ‎docs/react-app-env.d.ts

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
declare module '*.png'
2+
declare module '*.svg'
3+
declare module '*.jpeg'
4+
declare module '*.jpg'
5+
declare module '*.webp'

Diff for: ‎docs/src/components/HomepageSponsored/index.tsx

+15-2
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ type FeatureItem = {
1515
eventTitle?: string
1616
link: string
1717
allowsDarkMode?: boolean
18+
extraLink?: string
1819
}
1920

2021
type SponsorItem = FeatureItem & {
@@ -26,6 +27,7 @@ const FeatureList: FeatureItem[] = [
2627
title: 'Digital Ocean',
2728
Svg: require('@site/static/img/digital-ocean-powered-by.svg').default,
2829
link: 'https://www.digitalocean.com/?refcode=0813b3be1161&utm_campaign=Referral_Invite&utm_medium=Referral_Program&utm_source=badge',
30+
extraLink: '/blog/digital-ocean-app-platform',
2931
},
3032
{
3133
title: 'Algolia',
@@ -52,10 +54,10 @@ const SponsorList: SponsorItem[] = [
5254
// },
5355
]
5456

55-
function Feature({ title, Svg, link, allowsDarkMode }: FeatureItem) {
57+
function Feature({ title, Svg, link, allowsDarkMode, extraLink }: FeatureItem) {
5658
return (
5759
<div className={clsx('col col--6')}>
58-
<div className="text--center">
60+
<div className={clsx('text--center', styles['feature-item'])}>
5961
<a href={link} title={title} target="_blank" rel="noreferrer" aria-label={title}>
6062
<Svg
6163
className={clsx(styles.featureSvg, {
@@ -64,6 +66,17 @@ function Feature({ title, Svg, link, allowsDarkMode }: FeatureItem) {
6466
role="img"
6567
/>
6668
</a>
69+
{extraLink && (
70+
<a
71+
href={extraLink}
72+
title={`Learn more about ${title}`}
73+
target="_blank"
74+
rel="noreferrer"
75+
className={styles.featureLink}
76+
>
77+
Learn more about {title}
78+
</a>
79+
)}
6780
</div>
6881
</div>
6982
)

Diff for: ‎docs/src/components/HomepageSponsored/styles.module.css

+5
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,11 @@
2020
gap: 21px;
2121
}
2222

23+
.feature-item {
24+
display: flex;
25+
flex-direction: column;
26+
}
27+
2328
@media screen and (min-width: 1024px) {
2429
.features {
2530
display: flex;

Diff for: ‎docs/src/pages/blog/digital-ocean-app-platform.tsx

+207
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,207 @@
1+
/* eslint-disable jsx-a11y/anchor-is-valid */
2+
/* eslint-disable import/no-unresolved */
3+
import React from 'react'
4+
import Layout from '@theme/Layout'
5+
import DigitalOceanBanner from '@site/static/img/digital-ocean-banner.webp'
6+
import DigitalOceanLogin from '@site/static/img/digital-ocean-login.webp'
7+
import DigitalOceanCreateApp from '@site/static/img/digital-ocean-create-app.webp'
8+
import DigitalOceanAppConfig1 from '@site/static/img/digital-ocean-app-config-1.png'
9+
import DigitalOceanAppConfig2 from '@site/static/img/digital-ocean-app-config-2.png'
10+
import DigitalOceanStaticSite from '@site/static/img/digital-ocean-static-site.png'
11+
import DigitalOceanCreateResource from '@site/static/img/digital-ocean-create-resource.png'
12+
import { Tooltip } from 'react-tooltip'
13+
14+
export default function Home(): JSX.Element {
15+
return (
16+
<Layout title="Deploy on DigitalOcean" description="Guide to hosting a site with React-Tooltip">
17+
<main
18+
style={{
19+
padding: '2rem',
20+
display: 'flex',
21+
flexDirection: 'column',
22+
alignItems: 'center',
23+
justifyContent: 'center',
24+
minHeight: '100vh',
25+
width: '100%',
26+
overflowX: 'hidden',
27+
}}
28+
>
29+
<div style={{ maxWidth: '800px', width: '100%' }}>
30+
<img
31+
src={DigitalOceanBanner}
32+
alt="DigitalOcean banner"
33+
style={{
34+
width: '100%',
35+
maxWidth: '100%',
36+
height: 'auto',
37+
marginBottom: '1rem',
38+
}}
39+
/>
40+
41+
<h1>How to Deploy a Static Site on DigitalOcean</h1>
42+
<p>
43+
This guide walks you through deploying a static React site + React-Tooltip library,
44+
using DigitalOcean&apos;s App Platform. Follow these steps to get your site live quickly
45+
and easy!
46+
</p>
47+
48+
<div style={{ marginTop: '2rem', marginBottom: '2rem' }}>
49+
<h2>Examples of Using React-Tooltip</h2>
50+
<h3>1. Basic Tooltip</h3>
51+
<p>This example demonstrates a simple tooltip:</p>
52+
<div style={{ marginBottom: '1rem' }}>
53+
<a data-tooltip-id="my-tooltip" data-tooltip-content="Hello world!" href="#">
54+
◕‿‿◕
55+
</a>
56+
<Tooltip id="my-tooltip" />
57+
</div>
58+
<pre style={{ background: '#f4f4f4', padding: '1rem', borderRadius: '4px' }}>
59+
{`import {Tooltip} from 'react-tooltip';\n\n<a id="my-anchor-element">◕‿‿◕</a>\n\n<Tooltip anchorSelect="#my-anchor-element" content="Hello world!" />`}
60+
</pre>
61+
For more examples, check out the{' '}
62+
<b>
63+
<a href="docs/category/examples">React-Tooltip documentation</a>.
64+
</b>
65+
</div>
66+
67+
<h2>1. Uploading the project to GitHub</h2>
68+
<p>
69+
Your project needs to be hosted on GitHub for easy integration with DigitalOcean.
70+
Here&apos;s how to do it:
71+
</p>
72+
<ol>
73+
<li>Create a new repository on GitHub and copy the repository URL.</li>
74+
<li>
75+
In your terminal, add the GitHub repository as a remote in your project folder:
76+
<pre style={{ background: '#f4f4f4', padding: '1rem', borderRadius: '4px' }}>
77+
git remote add origin https://github.com/your-username/your-repo.git
78+
</pre>
79+
</li>
80+
<li>
81+
Commit any pending changes and push your code to the <code>main</code> branch:
82+
<pre style={{ background: '#f4f4f4', padding: '1rem', borderRadius: '4px' }}>
83+
git add .{'\n'}
84+
git commit -m &quot;Initial commit&quot;{'\n'}
85+
git push -u origin main
86+
</pre>
87+
</li>
88+
</ol>
89+
90+
<h2>2. Setting up DigitalOcean App Platform</h2>
91+
<p>DigitalOcean App Platform makes it easy to deploy static sites. Follow these steps:</p>
92+
<ol>
93+
<li>
94+
Log in to your{' '}
95+
<a href="https://www.digitalocean.com/?refcode=0813b3be1161&utm_campaign=Referral_Invite&utm_medium=Referral_Program&utm_source=badge/">
96+
DigitalOcean
97+
</a>{' '}
98+
account or sign up for a new account.
99+
<img
100+
src={DigitalOceanLogin}
101+
alt="DigitalOcean Login"
102+
style={{
103+
width: '100%',
104+
maxWidth: '100%',
105+
height: 'auto',
106+
marginTop: '1rem',
107+
marginBottom: '1rem',
108+
}}
109+
/>
110+
</li>
111+
<li>
112+
On the dashboard, click <strong>Create</strong> and select <strong>Apps</strong>.
113+
<img
114+
src={DigitalOceanCreateApp}
115+
alt="DigitalOcean Create App"
116+
style={{
117+
width: '100%',
118+
maxWidth: '100%',
119+
height: 'auto',
120+
marginTop: '1rem',
121+
marginBottom: '1rem',
122+
}}
123+
/>
124+
</li>
125+
<li>
126+
Connect your GitHub account to DigitalOcean by following the on-screen instructions.
127+
</li>
128+
<li>
129+
Select your repository and branch. Usually, the <code>main</code> branch is used for
130+
production.
131+
<img
132+
src={DigitalOceanAppConfig1}
133+
alt="DigitalOcean App config pt.1"
134+
style={{
135+
width: '100%',
136+
maxWidth: '100%',
137+
height: 'auto',
138+
marginTop: '1rem',
139+
marginBottom: '1rem',
140+
}}
141+
/>
142+
</li>
143+
<li>
144+
Specify the build output directory as <code>build/</code>, which is the default output
145+
folder for React projects.
146+
<img
147+
src={DigitalOceanAppConfig2}
148+
alt="DigitalOcean App config pt.2"
149+
style={{
150+
width: '100%',
151+
maxWidth: '100%',
152+
height: 'auto',
153+
marginTop: '1rem',
154+
marginBottom: '1rem',
155+
}}
156+
/>
157+
</li>
158+
<li>
159+
Choose your deployment plan. You can have up to 3 static sites on free tier.
160+
<img
161+
src={DigitalOceanStaticSite}
162+
alt="DigitalOcean Static Site"
163+
style={{
164+
width: '100%',
165+
maxWidth: '100%',
166+
height: 'auto',
167+
marginTop: '1rem',
168+
marginBottom: '1rem',
169+
}}
170+
/>
171+
</li>
172+
<li>
173+
Click <strong>Create Resources</strong> and wait for the process to complete.
174+
<img
175+
src={DigitalOceanCreateResource}
176+
alt="DigitalOcean Create Resource"
177+
style={{
178+
width: '100%',
179+
maxWidth: '100%',
180+
height: 'auto',
181+
marginTop: '1rem',
182+
marginBottom: '1rem',
183+
}}
184+
/>
185+
</li>
186+
</ol>
187+
188+
<p>
189+
After the deployment finishes, DigitalOcean will provide a URL for your live site. Visit
190+
this URL and enjoy your live site!
191+
</p>
192+
193+
<h2>Support</h2>
194+
<p>If you run into any issues, refer to:</p>
195+
<ul>
196+
<li>
197+
The <a href="https://www.digitalocean.com/docs/">DigitalOcean Documentation</a>
198+
</li>
199+
<li>
200+
The <a href="docs/category/examples">React-Tooltip Documentation</a>
201+
</li>
202+
</ul>
203+
</div>
204+
</main>
205+
</Layout>
206+
)
207+
}

Diff for: ‎docs/static/img/digital-ocean-app-config-1.png

37.2 KB
Loading

Diff for: ‎docs/static/img/digital-ocean-app-config-2.png

33.4 KB
Loading

Diff for: ‎docs/static/img/digital-ocean-banner.webp

28.5 KB
Binary file not shown.

Diff for: ‎docs/static/img/digital-ocean-create-app.webp

35.8 KB
Binary file not shown.

Diff for: ‎docs/static/img/digital-ocean-create-resource.png

32.7 KB
Loading

Diff for: ‎docs/static/img/digital-ocean-login.webp

35 KB
Binary file not shown.

Diff for: ‎docs/static/img/digital-ocean-static-site.png

38.7 KB
Loading

0 commit comments

Comments
 (0)