diff --git a/docs/assets/showcase/app-gallery/alignmentcharts.webp b/docs/assets/showcase/app-gallery/alignmentcharts.webp new file mode 100644 index 00000000..b7402366 Binary files /dev/null and b/docs/assets/showcase/app-gallery/alignmentcharts.webp differ diff --git a/docs/assets/showcase/app-gallery/bubbleshooterpro.webp b/docs/assets/showcase/app-gallery/bubbleshooterpro.webp new file mode 100644 index 00000000..ae48c964 Binary files /dev/null and b/docs/assets/showcase/app-gallery/bubbleshooterpro.webp differ diff --git a/docs/assets/showcase/app-gallery/bunnytrials.webp b/docs/assets/showcase/app-gallery/bunnytrials.webp new file mode 100644 index 00000000..120482e6 Binary files /dev/null and b/docs/assets/showcase/app-gallery/bunnytrials.webp differ diff --git a/docs/assets/showcase/app-gallery/hightier.png b/docs/assets/showcase/app-gallery/hightier.png deleted file mode 100644 index d0f0bf54..00000000 Binary files a/docs/assets/showcase/app-gallery/hightier.png and /dev/null differ diff --git a/docs/assets/showcase/app-gallery/honk.png b/docs/assets/showcase/app-gallery/honk.png deleted file mode 100644 index d35cf56f..00000000 Binary files a/docs/assets/showcase/app-gallery/honk.png and /dev/null differ diff --git a/docs/assets/showcase/app-gallery/leftforloot.webp b/docs/assets/showcase/app-gallery/leftforloot.webp new file mode 100644 index 00000000..4c2f24c7 Binary files /dev/null and b/docs/assets/showcase/app-gallery/leftforloot.webp differ diff --git a/docs/assets/showcase/app-gallery/letterset.webp b/docs/assets/showcase/app-gallery/letterset.webp new file mode 100644 index 00000000..6e954579 Binary files /dev/null and b/docs/assets/showcase/app-gallery/letterset.webp differ diff --git a/docs/assets/showcase/app-gallery/pathofbaa.webp b/docs/assets/showcase/app-gallery/pathofbaa.webp new file mode 100644 index 00000000..43f8e7f0 Binary files /dev/null and b/docs/assets/showcase/app-gallery/pathofbaa.webp differ diff --git a/docs/assets/showcase/app-gallery/pieceofcake.webp b/docs/assets/showcase/app-gallery/pieceofcake.webp new file mode 100644 index 00000000..2ae3113e Binary files /dev/null and b/docs/assets/showcase/app-gallery/pieceofcake.webp differ diff --git a/docs/assets/showcase/app-gallery/pixelary.png b/docs/assets/showcase/app-gallery/pixelary.png deleted file mode 100644 index 1d87594f..00000000 Binary files a/docs/assets/showcase/app-gallery/pixelary.png and /dev/null differ diff --git a/docs/assets/showcase/app-gallery/riddonkulous.png b/docs/assets/showcase/app-gallery/riddonkulous.png deleted file mode 100644 index 4f88ca88..00000000 Binary files a/docs/assets/showcase/app-gallery/riddonkulous.png and /dev/null differ diff --git a/docs/assets/showcase/app-gallery/riddonkulous.webp b/docs/assets/showcase/app-gallery/riddonkulous.webp new file mode 100644 index 00000000..0fe7098d Binary files /dev/null and b/docs/assets/showcase/app-gallery/riddonkulous.webp differ diff --git a/docs/assets/showcase/app-gallery/slingblade.webp b/docs/assets/showcase/app-gallery/slingblade.webp new file mode 100644 index 00000000..3836ecf0 Binary files /dev/null and b/docs/assets/showcase/app-gallery/slingblade.webp differ diff --git a/docs/assets/showcase/app-gallery/sword-and-supper.png b/docs/assets/showcase/app-gallery/sword-and-supper.png deleted file mode 100644 index f9917942..00000000 Binary files a/docs/assets/showcase/app-gallery/sword-and-supper.png and /dev/null differ diff --git a/docs/assets/showcase/app-gallery/swordandsupper.webp b/docs/assets/showcase/app-gallery/swordandsupper.webp new file mode 100644 index 00000000..3e71899e Binary files /dev/null and b/docs/assets/showcase/app-gallery/swordandsupper.webp differ diff --git a/docs/assets/showcase/app-gallery/what-the.png b/docs/assets/showcase/app-gallery/what-the.png deleted file mode 100644 index 9ac52bb1..00000000 Binary files a/docs/assets/showcase/app-gallery/what-the.png and /dev/null differ diff --git a/docs/examples/app-showcase.mdx b/docs/examples/app-showcase.mdx index ad13056a..dbdf326a 100644 --- a/docs/examples/app-showcase.mdx +++ b/docs/examples/app-showcase.mdx @@ -1,65 +1,109 @@ -import PlaygroundTile from '@site/src/components/PlaygroundTile'; -import PlaygroundTileMasonryGrid from '@site/src/components/PlaygroundTileMasonryGrid'; +import { ShowcaseAppList, ShowcaseAppListItem } from '@site/src/components/ShowcaseAppList'; +import AlignmentChartsImage from '@site/docs/assets/showcase/app-gallery/alignmentcharts.webp'; +import BunnyTrialsImage from '@site/docs/assets/showcase/app-gallery/bunnytrials.webp'; import BotBouncerImage from '@site/docs/assets/showcase/app-gallery/bot-bouncer.png'; +import BubbleShooterProImage from '@site/docs/assets/showcase/app-gallery/bubbleshooterpro.webp'; import CommunityHomeImage from '@site/docs/assets/showcase/app-gallery/community-home.png'; -import HonkImage from '@site/docs/assets/showcase/app-gallery/honk.png'; -import HightierImage from '@site/docs/assets/showcase/app-gallery/hightier.png'; -import PixelaryImage from '@site/docs/assets/showcase/app-gallery/pixelary.png'; -import RiddonkulousImage from '@site/docs/assets/showcase/app-gallery/riddonkulous.png'; -import SwordAndSupperImage from '@site/docs/assets/showcase/app-gallery/sword-and-supper.png'; -import WhatTheImage from '@site/docs/assets/showcase/app-gallery/what-the.png'; +import LeftForLootImage from '@site/docs/assets/showcase/app-gallery/leftforloot.webp'; +import LettersetImage from '@site/docs/assets/showcase/app-gallery/letterset.webp'; +import PathOfBaaImage from '@site/docs/assets/showcase/app-gallery/pathofbaa.webp'; +import PieceOfCakeImage from '@site/docs/assets/showcase/app-gallery/pieceofcake.webp'; +import RiddonkulousImage from '@site/docs/assets/showcase/app-gallery/riddonkulous.webp'; +import SlingbladeImage from '@site/docs/assets/showcase/app-gallery/slingblade.webp'; +import SwordAndSupperImage from '@site/docs/assets/showcase/app-gallery/swordandsupper.webp'; # App Showcase - - + - - + +## Games + +Games that show how much can happen inside a Reddit-native experience. + + + + + + - - - - - - - + + + + +## Community tools + +Useful apps that help moderators and communities run better spaces. + + + + + diff --git a/src/components/PlaygroundTile/styles.module.css b/src/components/PlaygroundTile/styles.module.css index 947b4621..ab6cf60a 100644 --- a/src/components/PlaygroundTile/styles.module.css +++ b/src/components/PlaygroundTile/styles.module.css @@ -80,4 +80,4 @@ .wrapper:hover .icon { color: var(--ifm-color-primary); -} \ No newline at end of file +} diff --git a/src/components/PlaygroundTileMasonryGrid/styles.module.css b/src/components/PlaygroundTileMasonryGrid/styles.module.css index 0f759252..ab2c2fca 100644 --- a/src/components/PlaygroundTileMasonryGrid/styles.module.css +++ b/src/components/PlaygroundTileMasonryGrid/styles.module.css @@ -26,4 +26,4 @@ .grid { columns: 1; } -} \ No newline at end of file +} diff --git a/src/components/ShowcaseAppList/index.tsx b/src/components/ShowcaseAppList/index.tsx new file mode 100644 index 00000000..614a89f0 --- /dev/null +++ b/src/components/ShowcaseAppList/index.tsx @@ -0,0 +1,30 @@ +import React, { type ReactNode } from 'react'; + +import styles from './styles.module.css'; + +export function ShowcaseAppList({ children }: { children: ReactNode }) { + return
{children}
; +} + +export function ShowcaseAppListItem({ + name, + author, + image, + link, +}: { + name: string; + author: string; + image: string; + link: string; +}) { + return ( + + {name} + + {name} + {`By ${author}`} + + Try on Reddit + + ); +} diff --git a/src/components/ShowcaseAppList/styles.module.css b/src/components/ShowcaseAppList/styles.module.css new file mode 100644 index 00000000..079475fe --- /dev/null +++ b/src/components/ShowcaseAppList/styles.module.css @@ -0,0 +1,85 @@ +.list { + border-top: 1px solid var(--ifm-color-emphasis-200); + margin: 12px 0 32px; +} + +.item { + display: grid; + grid-template-columns: 52px minmax(0, 1fr) max-content; + gap: 12px; + align-items: center; + padding: 10px 0; + border-bottom: 1px solid var(--ifm-color-emphasis-200); + color: var(--ifm-font-color-base); + transition: color 0.2s ease-out; +} + +.item:hover { + color: var(--ifm-color-primary); + text-decoration: none; +} + +.thumbnail { + width: 52px; + height: 52px; + border-radius: 4px; + object-fit: cover; + background: var(--ifm-color-emphasis-100); +} + +.content { + display: flex; + min-width: 0; + flex-direction: column; + gap: 2px; +} + +.title { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-weight: 600; + line-height: 1.2; +} + +.byline { + overflow: hidden; + color: var(--ifm-footer-link-color); + font-size: 0.82rem; + line-height: 1.25; + text-overflow: ellipsis; + white-space: nowrap; +} + +.action { + border-radius: 999px; + background: #ff4500; + color: #ffffff; + font-size: 0.78rem; + font-weight: 600; + line-height: 1; + padding: 7px 10px; + white-space: nowrap; + transition: background 0.2s ease-out; +} + +.item:hover .action { + background: #d93a00; +} + +@media (max-width: 480px) { + .item { + grid-template-columns: 44px minmax(0, 1fr) max-content; + gap: 10px; + } + + .thumbnail { + width: 44px; + height: 44px; + } + + .action { + font-size: 0.72rem; + padding: 6px 8px; + } +} diff --git a/versioned_docs/version-0.12/examples/app-showcase.mdx b/versioned_docs/version-0.12/examples/app-showcase.mdx index ad13056a..70d70daa 100644 --- a/versioned_docs/version-0.12/examples/app-showcase.mdx +++ b/versioned_docs/version-0.12/examples/app-showcase.mdx @@ -1,14 +1,14 @@ import PlaygroundTile from '@site/src/components/PlaygroundTile'; import PlaygroundTileMasonryGrid from '@site/src/components/PlaygroundTileMasonryGrid'; -import BotBouncerImage from '@site/docs/assets/showcase/app-gallery/bot-bouncer.png'; -import CommunityHomeImage from '@site/docs/assets/showcase/app-gallery/community-home.png'; -import HonkImage from '@site/docs/assets/showcase/app-gallery/honk.png'; -import HightierImage from '@site/docs/assets/showcase/app-gallery/hightier.png'; -import PixelaryImage from '@site/docs/assets/showcase/app-gallery/pixelary.png'; -import RiddonkulousImage from '@site/docs/assets/showcase/app-gallery/riddonkulous.png'; -import SwordAndSupperImage from '@site/docs/assets/showcase/app-gallery/sword-and-supper.png'; -import WhatTheImage from '@site/docs/assets/showcase/app-gallery/what-the.png'; +import BotBouncerImage from '@site/versioned_docs/version-0.12/assets/showcase/app-gallery/bot-bouncer.png'; +import CommunityHomeImage from '@site/versioned_docs/version-0.12/assets/showcase/app-gallery/community-home.png'; +import HonkImage from '@site/versioned_docs/version-0.12/assets/showcase/app-gallery/honk.png'; +import HightierImage from '@site/versioned_docs/version-0.12/assets/showcase/app-gallery/hightier.png'; +import PixelaryImage from '@site/versioned_docs/version-0.12/assets/showcase/app-gallery/pixelary.png'; +import RiddonkulousImage from '@site/versioned_docs/version-0.12/assets/showcase/app-gallery/riddonkulous.png'; +import SwordAndSupperImage from '@site/versioned_docs/version-0.12/assets/showcase/app-gallery/sword-and-supper.png'; +import WhatTheImage from '@site/versioned_docs/version-0.12/assets/showcase/app-gallery/what-the.png'; # App Showcase diff --git a/versioned_docs/version-0.13/assets/showcase/app-gallery/alignmentcharts.webp b/versioned_docs/version-0.13/assets/showcase/app-gallery/alignmentcharts.webp new file mode 100644 index 00000000..b7402366 Binary files /dev/null and b/versioned_docs/version-0.13/assets/showcase/app-gallery/alignmentcharts.webp differ diff --git a/versioned_docs/version-0.13/assets/showcase/app-gallery/bubbleshooterpro.webp b/versioned_docs/version-0.13/assets/showcase/app-gallery/bubbleshooterpro.webp new file mode 100644 index 00000000..ae48c964 Binary files /dev/null and b/versioned_docs/version-0.13/assets/showcase/app-gallery/bubbleshooterpro.webp differ diff --git a/versioned_docs/version-0.13/assets/showcase/app-gallery/bunnytrials.webp b/versioned_docs/version-0.13/assets/showcase/app-gallery/bunnytrials.webp new file mode 100644 index 00000000..120482e6 Binary files /dev/null and b/versioned_docs/version-0.13/assets/showcase/app-gallery/bunnytrials.webp differ diff --git a/versioned_docs/version-0.13/assets/showcase/app-gallery/leftforloot.webp b/versioned_docs/version-0.13/assets/showcase/app-gallery/leftforloot.webp new file mode 100644 index 00000000..4c2f24c7 Binary files /dev/null and b/versioned_docs/version-0.13/assets/showcase/app-gallery/leftforloot.webp differ diff --git a/versioned_docs/version-0.13/assets/showcase/app-gallery/letterset.webp b/versioned_docs/version-0.13/assets/showcase/app-gallery/letterset.webp new file mode 100644 index 00000000..6e954579 Binary files /dev/null and b/versioned_docs/version-0.13/assets/showcase/app-gallery/letterset.webp differ diff --git a/versioned_docs/version-0.13/assets/showcase/app-gallery/pathofbaa.webp b/versioned_docs/version-0.13/assets/showcase/app-gallery/pathofbaa.webp new file mode 100644 index 00000000..43f8e7f0 Binary files /dev/null and b/versioned_docs/version-0.13/assets/showcase/app-gallery/pathofbaa.webp differ diff --git a/versioned_docs/version-0.13/assets/showcase/app-gallery/pieceofcake.webp b/versioned_docs/version-0.13/assets/showcase/app-gallery/pieceofcake.webp new file mode 100644 index 00000000..2ae3113e Binary files /dev/null and b/versioned_docs/version-0.13/assets/showcase/app-gallery/pieceofcake.webp differ diff --git a/versioned_docs/version-0.13/assets/showcase/app-gallery/riddonkulous.webp b/versioned_docs/version-0.13/assets/showcase/app-gallery/riddonkulous.webp new file mode 100644 index 00000000..0fe7098d Binary files /dev/null and b/versioned_docs/version-0.13/assets/showcase/app-gallery/riddonkulous.webp differ diff --git a/versioned_docs/version-0.13/assets/showcase/app-gallery/slingblade.webp b/versioned_docs/version-0.13/assets/showcase/app-gallery/slingblade.webp new file mode 100644 index 00000000..3836ecf0 Binary files /dev/null and b/versioned_docs/version-0.13/assets/showcase/app-gallery/slingblade.webp differ diff --git a/versioned_docs/version-0.13/assets/showcase/app-gallery/swordandsupper.webp b/versioned_docs/version-0.13/assets/showcase/app-gallery/swordandsupper.webp new file mode 100644 index 00000000..3e71899e Binary files /dev/null and b/versioned_docs/version-0.13/assets/showcase/app-gallery/swordandsupper.webp differ diff --git a/versioned_docs/version-0.13/examples/app-showcase.mdx b/versioned_docs/version-0.13/examples/app-showcase.mdx index ad13056a..83b48c9a 100644 --- a/versioned_docs/version-0.13/examples/app-showcase.mdx +++ b/versioned_docs/version-0.13/examples/app-showcase.mdx @@ -1,65 +1,109 @@ -import PlaygroundTile from '@site/src/components/PlaygroundTile'; -import PlaygroundTileMasonryGrid from '@site/src/components/PlaygroundTileMasonryGrid'; +import { ShowcaseAppList, ShowcaseAppListItem } from '@site/src/components/ShowcaseAppList'; -import BotBouncerImage from '@site/docs/assets/showcase/app-gallery/bot-bouncer.png'; -import CommunityHomeImage from '@site/docs/assets/showcase/app-gallery/community-home.png'; -import HonkImage from '@site/docs/assets/showcase/app-gallery/honk.png'; -import HightierImage from '@site/docs/assets/showcase/app-gallery/hightier.png'; -import PixelaryImage from '@site/docs/assets/showcase/app-gallery/pixelary.png'; -import RiddonkulousImage from '@site/docs/assets/showcase/app-gallery/riddonkulous.png'; -import SwordAndSupperImage from '@site/docs/assets/showcase/app-gallery/sword-and-supper.png'; -import WhatTheImage from '@site/docs/assets/showcase/app-gallery/what-the.png'; +import AlignmentChartsImage from '@site/versioned_docs/version-0.13/assets/showcase/app-gallery/alignmentcharts.webp'; +import BunnyTrialsImage from '@site/versioned_docs/version-0.13/assets/showcase/app-gallery/bunnytrials.webp'; +import BotBouncerImage from '@site/versioned_docs/version-0.13/assets/showcase/app-gallery/bot-bouncer.png'; +import BubbleShooterProImage from '@site/versioned_docs/version-0.13/assets/showcase/app-gallery/bubbleshooterpro.webp'; +import CommunityHomeImage from '@site/versioned_docs/version-0.13/assets/showcase/app-gallery/community-home.png'; +import LeftForLootImage from '@site/versioned_docs/version-0.13/assets/showcase/app-gallery/leftforloot.webp'; +import LettersetImage from '@site/versioned_docs/version-0.13/assets/showcase/app-gallery/letterset.webp'; +import PathOfBaaImage from '@site/versioned_docs/version-0.13/assets/showcase/app-gallery/pathofbaa.webp'; +import PieceOfCakeImage from '@site/versioned_docs/version-0.13/assets/showcase/app-gallery/pieceofcake.webp'; +import RiddonkulousImage from '@site/versioned_docs/version-0.13/assets/showcase/app-gallery/riddonkulous.webp'; +import SlingbladeImage from '@site/versioned_docs/version-0.13/assets/showcase/app-gallery/slingblade.webp'; +import SwordAndSupperImage from '@site/versioned_docs/version-0.13/assets/showcase/app-gallery/swordandsupper.webp'; # App Showcase - - + - - + +## Games + +Games that show how much can happen inside a Reddit-native experience. + + + + + + - - - - - - - + + + + +## Community tools + +Useful apps that help moderators and communities run better spaces. + + + + +