Home Original page

docs: add digital ocean page by danielbarion · Pull Request #1237 · ReactTooltip/react-tooltip

5-20: Consider improving type safety for image imports.

Instead of using @ts-ignore, consider:

  1. Adding proper type declarations for static assets
  2. Using a more type-safe approach for image imports

Create a new file types/images.d.ts:

declare module '*.webp' {
  const content: string;
  export default content;
}

declare module '*.png' {
  const content: string;
  export default content;
}

103-106: Consider removing referral code from the URL.

The DigitalOcean URL contains a referral code which might not be appropriate for official documentation.

-<a href="https://www.digitalocean.com/?refcode=0813b3be1161&utm_campaign=Referral_Invite&utm_medium=Referral_Program&utm_source=badge/">
+<a href="https://www.digitalocean.com/">

37-47: Optimize image loading and improve user experience.

Consider enhancing the image loading experience:

  1. Add loading="lazy" for images below the fold
  2. Add width and height attributes to prevent layout shifts
  3. Consider using responsive images with srcset

Example implementation for one image:

<img
  src={DigitalOceanBanner}
  alt="DigitalOcean banner"
+ loading="lazy"
+ width="800"
+ height="400"
  style={{
    width: '100%',
    maxWidth: '100%',
    height: 'auto',
    marginBottom: '1rem',
  }}
/>

Also applies to: 107-117, 121-131, 139-149, 154-164, 168-178, 182-192

25-36: Consider extracting styles to CSS modules.

Inline styles could be moved to a CSS module for better maintainability and reusability.

Create a new file digital-ocean-page.module.css:

.mainContainer {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  width: 100%;
  overflow-x: hidden;
}

Then import and use it:

-<main
-  style={{
-    padding: '2rem',
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    justifyContent: 'center',
-    minHeight: '100vh',
-    width: '100%',
-    overflowX: 'hidden',
-  }}
->
+<main className={styles.mainContainer}>