Fix the IntroTilePanel to use Docusaurus for link path resolution

Author: ben-harris-5

.gitignore

@@ -12,6 +12,7 @@ build
 .env.development.local
 .env.test.local
 .env.production.local
+.idea
 
 npm-debug.log*
 yarn-debug.log*

docs/introduction/intro-games.mdx

@@ -5,7 +5,7 @@ import Rocket from '@site/docs/assets/introduction/SpotIllustration_Rocket.webp'
 
 # Games on Reddit
 
-Unleash your creativity and build engaging games inside Reddit communities with Devvit’s powerful platform. [Earn money](../earn-money/reddit_developer_funds) as players engage with your games.
+Unleash your creativity and build engaging games inside Reddit communities with Devvit’s powerful platform. [Earn money](../earn-money/reddit_developer_funds.md) as players engage with your games.
 
 Devvit is Reddit’s developer platform for building interactive, cross-platform games and apps that run natively on Reddit.
 
@@ -26,7 +26,6 @@ Reddit is home to millions of communities, each with its own culture and interes
     {
       title: 'Quickstart',
       image: Rocket,
-      href: '../quickstart',
       background: 'linear-gradient(135deg, #b2f7ef 0%, #4be18a 100%)',
       textColor: '#003820',
       imageSide: 'left',
@@ -36,15 +35,17 @@ Reddit is home to millions of communities, each with its own culture and interes
     {
       title: 'Showcase',
       image: Celebration,
-      href: '../examples/app-showcase',
       background: 'linear-gradient(135deg, #ffe066 0%, #ff7c53 100%)',
       textColor: '#5a2a00',
       imageSide: 'right',
       textAlign: 'left',
       alt: 'Showcase',
     },
   ]}
-/>
+>
+  [Quickstart](../quickstart/quickstart.md)
+  [Showcase](../examples/app-showcase.mdx)
+</IntroTilePanel>
 
 <hr style={{ margin: '2.5rem 0', border: 'none', borderTop: '2px solid #eee' }} />
 

docs/introduction/intro-mod-tools.mdx

@@ -24,7 +24,6 @@ Devvit is Reddit’s developer platform for building interactive, cross-platform
     {
       title: 'Quickstart',
       image: Rocket,
-      href: '../quickstart/quickstart-mod-tool',
       background: 'linear-gradient(135deg, #b2f7ef 0%, #4be18a 100%)',
       textColor: '#003820',
       imageSide: 'left',
@@ -34,15 +33,17 @@ Devvit is Reddit’s developer platform for building interactive, cross-platform
     {
       title: 'Mod Resources',
       image: SnooToolboxClipboard,
-      href: '../guides/best-practices/mod_resources',
       background: 'linear-gradient(135deg, #ffe066 0%, #ff7c53 100%)',
       textColor: '#5a2a00',
       imageSide: 'right',
       textAlign: 'left',
       alt: 'Three Strikes Tutorial',
     },
   ]}
-/>
+>
+  [Quickstart](../quickstart/quickstart.md)
+  [Mod Resources](../guides/best-practices/mod_resources.md)
+</IntroTilePanel>
 
 <hr style={{ margin: '2.5rem 0', border: 'none', borderTop: '2px solid #eee' }} />
 

docs/introduction/introduction.mdx

@@ -43,7 +43,6 @@ Build community games like [Hot and Cold](https://www.reddit.com/r/hotandcold/),
     {
       title: 'Build Games',
       image: Rocket,
-      href: './introduction/intro-games',
       background: 'linear-gradient(135deg, #b2f7ef 0%, #4be18a 100%)',
       textColor: '#003820',
       imageSide: 'left',
@@ -53,12 +52,14 @@ Build community games like [Hot and Cold](https://www.reddit.com/r/hotandcold/),
     {
       title: 'Create Mod Tools',
       image: SnooToolboxClipboard,
-      href: './introduction/intro-mod-tools',
       background: 'linear-gradient(135deg, #ffe066 0%, #ff7c53 100%)',
       textColor: '#5a2a00',
       imageSide: 'right',
       textAlign: 'left',
       alt: 'Create Mod Tools',
     },
   ]}
-/>
+>
+  [Build Games](./intro-games.mdx)
+  [Create Mod Tools](./intro-mod-tools.mdx)
+</IntroTilePanel>

src/components/IntroPagesFeatures/IntroTilePanel.js

@@ -4,8 +4,23 @@ import React from 'react';
  * IntroTilePanel - a reusable two-tile panel for intro pages.
  * @param {Array} tiles - Array of tile configs: { image, alt, title, href, background, textColor, imageSide ('left'|'right'), ariaLabel }
  * @param {string|number} gap - CSS gap between tiles (default: '2.5rem')
+ * @param {ReactNode} children - Optional children to override tile hrefs via <a> elements
  */
-export default function IntroTilePanel({ tiles, gap = '2.5rem' }) {
+export default function IntroTilePanel({ tiles, gap = '2.5rem', children }) {
+  // So, for the links we're given, we want to allow the user to override the hrefs via children <a> elements.
+  // This allows MDX users to use relative links like [Learn More](./more) instead of hardcoding absolute URLs in the
+  // tile config, which makes versioned docs work way better & prevents trailing slash issues from mattering.
+  const titleToHRef = {};
+  if(children) {
+    for(const child of React.Children.toArray(children.props.children)) {
+      // This works for both MDX <a> and regular <a> elements, as the browser will render both as <a>
+      if(child?.type?.name === 'a' || child?.type?.name === 'MDXA') {
+        const href = child.props.href;
+        const title = child.props.children;
+        titleToHRef[title] = href;
+      }
+    }
+  }
   return (
     <div style={{ padding: '0 2.5vw' }}>
       <div
@@ -18,12 +33,13 @@ export default function IntroTilePanel({ tiles, gap = '2.5rem' }) {
           alignItems: 'flex-start',
         }}
       >
-        {tiles.map((tile, i) => {
+        {tiles.map((tile) => {
           const isImageLeft = tile.imageSide === 'left';
+          const href = titleToHRef[tile.title] ?? tile.href;
           return (
             <a
               key={tile.title}
-              href={tile.href}
+              href={href}
               style={{
                 textDecoration: 'none',
                 color: 'inherit',

versioned_docs/version-0.12/introduction/intro-games.mdx

@@ -26,7 +26,6 @@ Reddit is home to millions of communities, each with its own culture and interes
     {
       title: 'Quickstart',
       image: Rocket,
-      href: '../quickstart',
       background: 'linear-gradient(135deg, #b2f7ef 0%, #4be18a 100%)',
       textColor: '#003820',
       imageSide: 'left',
@@ -36,15 +35,17 @@ Reddit is home to millions of communities, each with its own culture and interes
     {
       title: 'Showcase',
       image: Celebration,
-      href: '../examples/app-showcase',
       background: 'linear-gradient(135deg, #ffe066 0%, #ff7c53 100%)',
       textColor: '#5a2a00',
       imageSide: 'right',
       textAlign: 'left',
       alt: 'Showcase',
     },
   ]}
-/>
+>
+  [Quickstart](../quickstart/quickstart.md)
+  [Showcase](../examples/app-showcase.mdx)
+</IntroTilePanel>
 
 <hr style={{ margin: '2.5rem 0', border: 'none', borderTop: '2px solid #eee' }} />
 

versioned_docs/version-0.12/introduction/intro-mod-tools.mdx

@@ -24,7 +24,6 @@ Devvit is Reddit’s developer platform for building interactive, cross-platform
     {
       title: 'Quickstart',
       image: Rocket,
-      href: '../quickstart/quickstart-mod-tool',
       background: 'linear-gradient(135deg, #b2f7ef 0%, #4be18a 100%)',
       textColor: '#003820',
       imageSide: 'left',
@@ -34,15 +33,17 @@ Devvit is Reddit’s developer platform for building interactive, cross-platform
     {
       title: 'Mod Resources',
       image: SnooToolboxClipboard,
-      href: '../guides/best-practices/mod_resources',
       background: 'linear-gradient(135deg, #ffe066 0%, #ff7c53 100%)',
       textColor: '#5a2a00',
       imageSide: 'right',
       textAlign: 'left',
       alt: 'Three Strikes Tutorial',
     },
   ]}
-/>
+>
+  [Quickstart](../quickstart/quickstart.md)
+  [Mod Resources](../guides/best-practices/mod_resources.md)
+</IntroTilePanel>
 
 <hr style={{ margin: '2.5rem 0', border: 'none', borderTop: '2px solid #eee' }} />
 

versioned_docs/version-0.12/introduction/introduction.mdx

@@ -43,7 +43,6 @@ Build community games like [Hot and Cold](https://www.reddit.com/r/hotandcold/),
     {
       title: 'Build Games',
       image: Rocket,
-      href: './introduction/intro-games',
       background: 'linear-gradient(135deg, #b2f7ef 0%, #4be18a 100%)',
       textColor: '#003820',
       imageSide: 'left',
@@ -53,12 +52,14 @@ Build community games like [Hot and Cold](https://www.reddit.com/r/hotandcold/),
     {
       title: 'Create Mod Tools',
       image: SnooToolboxClipboard,
-      href: './introduction/intro-mod-tools',
       background: 'linear-gradient(135deg, #ffe066 0%, #ff7c53 100%)',
       textColor: '#5a2a00',
       imageSide: 'right',
       textAlign: 'left',
       alt: 'Create Mod Tools',
     },
   ]}
-/>
+>
+  [Build Games](./intro-games.mdx)
+  [Create Mod Tools](./intro-mod-tools.mdx)
+</IntroTilePanel>