docs: add extraLink param into featured items

ReactTooltip · Dec 3, 2024 · 6428906 · 6428906
1 parent 06952bc
commit 6428906
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 2 deletions.
diff --git a/docs/src/components/HomepageSponsored/index.tsx b/docs/src/components/HomepageSponsored/index.tsx
@@ -15,6 +15,7 @@ type FeatureItem = {
   eventTitle?: string
   link: string
   allowsDarkMode?: boolean
+  extraLink?: string
 }
 
 type SponsorItem = FeatureItem & {
@@ -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',
@@ -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, {
@@ -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>
   )

diff --git a/docs/src/components/HomepageSponsored/styles.module.css b/docs/src/components/HomepageSponsored/styles.module.css
@@ -20,6 +20,11 @@
   gap: 21px;
 }
 
+.feature-item {
+  display: flex;
+  flex-direction: column;
+}
+
 @media screen and (min-width: 1024px) {
   .features {
     display: flex;