Skip to content

Fix the IntroTilePanel to use Docusaurus for link path resolution #10

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ben-harris-5 merged 1 commit into from
Dec 30, 2025
Merged

Fix the IntroTilePanel to use Docusaurus for link path resolution #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ build
.env.development.local
.env.test.local
.env.production.local
.idea
Copy link
Member Author

@ben-harris-5 ben-harris-5 Dec 29, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

IntelliJ added some local files, we shouldn't commit them lol


npm-debug.log*
yarn-debug.log*
Expand Down
9 changes: 5 additions & 4 deletions docs/introduction/intro-games.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Copy link
Member Author

@ben-harris-5 ben-harris-5 Dec 29, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There will be a biiiiig PR coming separately to fix links like this across the entire repo.


Devvit is Reddit’s developer platform for building interactive, cross-platform games and apps that run natively on Reddit.

Expand All @@ -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',
Expand All @@ -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>
Comment on lines 36 to +48
Copy link
Member Author

@ben-harris-5 ben-harris-5 Dec 29, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is the highlight of how this works now. Rather than an href property, it finds the link in the body with a matching title, and uses the href of that link. This allows Docusaurus to translate this from a relative path to a markdown file, to the correct, absolute path instead.


<hr style={{ margin: '2.5rem 0', border: 'none', borderTop: '2px solid #eee' }} />

Expand Down
7 changes: 4 additions & 3 deletions docs/introduction/intro-mod-tools.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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' }} />

Expand Down
7 changes: 4 additions & 3 deletions docs/introduction/introduction.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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>
22 changes: 19 additions & 3 deletions src/components/IntroPagesFeatures/IntroTilePanel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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',
Expand Down
7 changes: 4 additions & 3 deletions versioned_docs/version-0.12/introduction/intro-games.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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' }} />

Expand Down
7 changes: 4 additions & 3 deletions versioned_docs/version-0.12/introduction/intro-mod-tools.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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' }} />

Expand Down
7 changes: 4 additions & 3 deletions versioned_docs/version-0.12/introduction/introduction.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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>