Skip to content

Commit

Permalink
Merge pull request #1237 from ReactTooltip/feat/digital-ocean-page
Browse files Browse the repository at this point in the history
docs: add digital ocean page
  • Loading branch information
danielbarion authored Dec 4, 2024
2 parents 08bfc6f + 6428906 commit 9cc0685
Show file tree
Hide file tree
Showing 12 changed files with 236 additions and 2 deletions.
4 changes: 4 additions & 0 deletions docs/docusaurus.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -157,6 +157,10 @@ const config = {
label: 'Getting Started',
to: '/docs/getting-started',
},
{
label: 'Deploying to DigitalOcean',
to: '/blog/digital-ocean-app-platform',
},
],
},
// {
Expand Down
5 changes: 5 additions & 0 deletions docs/react-app-env.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
declare module '*.png'
declare module '*.svg'
declare module '*.jpeg'
declare module '*.jpg'
declare module '*.webp'
17 changes: 15 additions & 2 deletions docs/src/components/HomepageSponsored/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ type FeatureItem = {
eventTitle?: string
link: string
allowsDarkMode?: boolean
extraLink?: string
}

type SponsorItem = FeatureItem & {
Expand All @@ -26,6 +27,7 @@ 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',
extraLink: '/blog/digital-ocean-app-platform',
},
{
title: 'Algolia',
Expand All @@ -52,10 +54,10 @@ const SponsorList: SponsorItem[] = [
// },
]

function Feature({ title, Svg, link, allowsDarkMode }: FeatureItem) {
function Feature({ title, Svg, link, allowsDarkMode, extraLink }: FeatureItem) {
return (
<div className={clsx('col col--6')}>
<div className="text--center">
<div className={clsx('text--center', styles['feature-item'])}>
<a href={link} title={title} target="_blank" rel="noreferrer" aria-label={title}>
<Svg
className={clsx(styles.featureSvg, {
Expand All @@ -64,6 +66,17 @@ function Feature({ title, Svg, link, allowsDarkMode }: FeatureItem) {
role="img"
/>
</a>
{extraLink && (
<a
href={extraLink}
title={`Learn more about ${title}`}
target="_blank"
rel="noreferrer"
className={styles.featureLink}
>
Learn more about {title}
</a>
)}
</div>
</div>
)
Expand Down
5 changes: 5 additions & 0 deletions docs/src/components/HomepageSponsored/styles.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,11 @@
gap: 21px;
}

.feature-item {
display: flex;
flex-direction: column;
}

@media screen and (min-width: 1024px) {
.features {
display: flex;
Expand Down
207 changes: 207 additions & 0 deletions docs/src/pages/blog/digital-ocean-app-platform.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,207 @@
/* eslint-disable jsx-a11y/anchor-is-valid */
/* eslint-disable import/no-unresolved */
import React from 'react'
import Layout from '@theme/Layout'
import DigitalOceanBanner from '@site/static/img/digital-ocean-banner.webp'
import DigitalOceanLogin from '@site/static/img/digital-ocean-login.webp'
import DigitalOceanCreateApp from '@site/static/img/digital-ocean-create-app.webp'
import DigitalOceanAppConfig1 from '@site/static/img/digital-ocean-app-config-1.png'
import DigitalOceanAppConfig2 from '@site/static/img/digital-ocean-app-config-2.png'
import DigitalOceanStaticSite from '@site/static/img/digital-ocean-static-site.png'
import DigitalOceanCreateResource from '@site/static/img/digital-ocean-create-resource.png'
import { Tooltip } from 'react-tooltip'

export default function Home(): JSX.Element {
return (
<Layout title="Deploy on DigitalOcean" description="Guide to hosting a site with React-Tooltip">
<main
style={{
padding: '2rem',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
minHeight: '100vh',
width: '100%',
overflowX: 'hidden',
}}
>
<div style={{ maxWidth: '800px', width: '100%' }}>
<img
src={DigitalOceanBanner}
alt="DigitalOcean banner"
style={{
width: '100%',
maxWidth: '100%',
height: 'auto',
marginBottom: '1rem',
}}
/>

<h1>How to Deploy a Static Site on DigitalOcean</h1>
<p>
This guide walks you through deploying a static React site + React-Tooltip library,
using DigitalOcean&apos;s App Platform. Follow these steps to get your site live quickly
and easy!
</p>

<div style={{ marginTop: '2rem', marginBottom: '2rem' }}>
<h2>Examples of Using React-Tooltip</h2>
<h3>1. Basic Tooltip</h3>
<p>This example demonstrates a simple tooltip:</p>
<div style={{ marginBottom: '1rem' }}>
<a data-tooltip-id="my-tooltip" data-tooltip-content="Hello world!" href="#">
◕‿‿◕
</a>
<Tooltip id="my-tooltip" />
</div>
<pre style={{ background: '#f4f4f4', padding: '1rem', borderRadius: '4px' }}>
{`import {Tooltip} from 'react-tooltip';\n\n<a id="my-anchor-element">◕‿‿◕</a>\n\n<Tooltip anchorSelect="#my-anchor-element" content="Hello world!" />`}
</pre>
For more examples, check out the{' '}
<b>
<a href="docs/category/examples">React-Tooltip documentation</a>.
</b>
</div>

<h2>1. Uploading the project to GitHub</h2>
<p>
Your project needs to be hosted on GitHub for easy integration with DigitalOcean.
Here&apos;s how to do it:
</p>
<ol>
<li>Create a new repository on GitHub and copy the repository URL.</li>
<li>
In your terminal, add the GitHub repository as a remote in your project folder:
<pre style={{ background: '#f4f4f4', padding: '1rem', borderRadius: '4px' }}>
git remote add origin https://github.com/your-username/your-repo.git
</pre>
</li>
<li>
Commit any pending changes and push your code to the <code>main</code> branch:
<pre style={{ background: '#f4f4f4', padding: '1rem', borderRadius: '4px' }}>
git add .{'\n'}
git commit -m &quot;Initial commit&quot;{'\n'}
git push -u origin main
</pre>
</li>
</ol>

<h2>2. Setting up DigitalOcean App Platform</h2>
<p>DigitalOcean App Platform makes it easy to deploy static sites. Follow these steps:</p>
<ol>
<li>
Log in to your{' '}
<a href="https://www.digitalocean.com/?refcode=0813b3be1161&utm_campaign=Referral_Invite&utm_medium=Referral_Program&utm_source=badge/">
DigitalOcean
</a>{' '}
account or sign up for a new account.
<img
src={DigitalOceanLogin}
alt="DigitalOcean Login"
style={{
width: '100%',
maxWidth: '100%',
height: 'auto',
marginTop: '1rem',
marginBottom: '1rem',
}}
/>
</li>
<li>
On the dashboard, click <strong>Create</strong> and select <strong>Apps</strong>.
<img
src={DigitalOceanCreateApp}
alt="DigitalOcean Create App"
style={{
width: '100%',
maxWidth: '100%',
height: 'auto',
marginTop: '1rem',
marginBottom: '1rem',
}}
/>
</li>
<li>
Connect your GitHub account to DigitalOcean by following the on-screen instructions.
</li>
<li>
Select your repository and branch. Usually, the <code>main</code> branch is used for
production.
<img
src={DigitalOceanAppConfig1}
alt="DigitalOcean App config pt.1"
style={{
width: '100%',
maxWidth: '100%',
height: 'auto',
marginTop: '1rem',
marginBottom: '1rem',
}}
/>
</li>
<li>
Specify the build output directory as <code>build/</code>, which is the default output
folder for React projects.
<img
src={DigitalOceanAppConfig2}
alt="DigitalOcean App config pt.2"
style={{
width: '100%',
maxWidth: '100%',
height: 'auto',
marginTop: '1rem',
marginBottom: '1rem',
}}
/>
</li>
<li>
Choose your deployment plan. You can have up to 3 static sites on free tier.
<img
src={DigitalOceanStaticSite}
alt="DigitalOcean Static Site"
style={{
width: '100%',
maxWidth: '100%',
height: 'auto',
marginTop: '1rem',
marginBottom: '1rem',
}}
/>
</li>
<li>
Click <strong>Create Resources</strong> and wait for the process to complete.
<img
src={DigitalOceanCreateResource}
alt="DigitalOcean Create Resource"
style={{
width: '100%',
maxWidth: '100%',
height: 'auto',
marginTop: '1rem',
marginBottom: '1rem',
}}
/>
</li>
</ol>

<p>
After the deployment finishes, DigitalOcean will provide a URL for your live site. Visit
this URL and enjoy your live site!
</p>

<h2>Support</h2>
<p>If you run into any issues, refer to:</p>
<ul>
<li>
The <a href="https://www.digitalocean.com/docs/">DigitalOcean Documentation</a>
</li>
<li>
The <a href="docs/category/examples">React-Tooltip Documentation</a>
</li>
</ul>
</div>
</main>
</Layout>
)
}
Binary file added docs/static/img/digital-ocean-app-config-1.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/static/img/digital-ocean-app-config-2.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/static/img/digital-ocean-banner.webp
Binary file not shown.
Binary file added docs/static/img/digital-ocean-create-app.webp
Binary file not shown.
Binary file added docs/static/img/digital-ocean-create-resource.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/static/img/digital-ocean-login.webp
Binary file not shown.
Binary file added docs/static/img/digital-ocean-static-site.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 9cc0685

Please sign in to comment.