app showcase updates

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
 
-<PlaygroundTileMasonryGrid>
-    <PlaygroundTile
-        name="Pixelary"
-        author="u/Oppdager"
-        image={PixelaryImage}
-        link="https://reddit.com/r/Pixelary"
+## Reddit-y experiences
+
+Simple, Reddity experiences that invite people to jump in from the post.
+
+<ShowcaseAppList>
+    <ShowcaseAppListItem
+        name="Alignment Charts"
+        author="u/Xenuoziem"
+        image={AlignmentChartsImage}
+        link="https://www.reddit.com/r/AlignmentCharts/"
     />
-    <PlaygroundTile
-        name="What The?!"
-        author="Lil Snack Studios"
-        image={WhatTheImage}
-        link="https://reddit.com/r/WhatTheGame"
+    <ShowcaseAppListItem
+        name="Bunny Trials"
+        author="u/Mean-Lavishness-1648"
+        image={BunnyTrialsImage}
+        link="https://www.reddit.com/r/BunnyTrials/"
     />
-    <PlaygroundTile
-        name="Community Home"
-        author="u/xenc"
-        image={CommunityHomeImage}
-        link="https://developers.reddit.com/apps/community-home"
+</ShowcaseAppList>
+
+## Games
+
+Games that show how much can happen inside a Reddit-native experience.
+
+<ShowcaseAppList>
+    <ShowcaseAppListItem
+        name="LETTERSET"
+        author="u/JeffBritches"
+        image={LettersetImage}
+        link="https://www.reddit.com/r/LETTERSET/"
+    />
+    <ShowcaseAppListItem
+        name="BubbleShooterPro"
+        author="Softgames"
+        image={BubbleShooterProImage}
+        link="https://www.reddit.com/r/BubbleShooterPro/"
+    />
+    <ShowcaseAppListItem
+        name="Slingblade"
+        author="Fermenter Games"
+        image={SlingbladeImage}
+        link="https://www.reddit.com/r/SlingbladeGame/"
+    />
+    <ShowcaseAppListItem
+        name="PieceOfCake"
+        author="u/HG_Rusty"
+        image={PieceOfCakeImage}
+        link="https://www.reddit.com/r/PieceOfCakeGame/"
     />
-    <PlaygroundTile
-        name="Honk"
-        author="u/thejohnnyr"
-        image={HonkImage}
-        link="https://reddit.com/r/honk"
-    />    
-    <PlaygroundTile
+    <ShowcaseAppListItem
         name="Riddonkulous"
         author="u/hammertimestudios"
         image={RiddonkulousImage}
         link="https://reddit.com/r/Riddonkulous"
     />
-    <PlaygroundTile
-        name="Bot Bouncer"
-        author="u/fsv"
-        image={BotBouncerImage}
-        link="https://developers.reddit.com/apps/bot-bouncer"
-    />     
-    <PlaygroundTile
+    <ShowcaseAppListItem
         name="Sword and Supper"
         author="Cabbage Studios"
         image={SwordAndSupperImage}
         link="https://reddit.com/r/SwordAndSupperGame"
-    />  
-    <PlaygroundTile
-        name="Hightier"
-        author="u/mutualdisagreement"
-        image={HightierImage}
-        link="https://reddit.com/r/Hightier"
     />
-
-</PlaygroundTileMasonryGrid>
+    <ShowcaseAppListItem
+        name="PathOfBaa"
+        author="u/hammertimestudios"
+        image={PathOfBaaImage}
+        link="https://www.reddit.com/r/PathOfBaa/"
+    />
+    <ShowcaseAppListItem
+        name="LeftForLoot"
+        author="u/OneGuyMakingGames"
+        image={LeftForLootImage}
+        link="https://www.reddit.com/r/LeftForLoot/"
+    />
+</ShowcaseAppList>
+
+## Community tools
+
+Useful apps that help moderators and communities run better spaces.
+
+<ShowcaseAppList>
+    <ShowcaseAppListItem
+        name="Community Home"
+        author="u/xenc"
+        image={CommunityHomeImage}
+        link="https://developers.reddit.com/apps/community-home"
+    />
+    <ShowcaseAppListItem
+        name="Bot Bouncer"
+        author="u/fsv"
+        image={BotBouncerImage}
+        link="https://developers.reddit.com/apps/bot-bouncer"
+    />
+</ShowcaseAppList>

src/components/PlaygroundTile/styles.module.css

@@ -80,4 +80,4 @@
 
 .wrapper:hover .icon {
     color: var(--ifm-color-primary);
-}
+}

src/components/PlaygroundTileMasonryGrid/styles.module.css

@@ -26,4 +26,4 @@
     .grid {
         columns: 1;
     }
-}
+}

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 <div className={styles.list}>{children}</div>;
+}
+
+export function ShowcaseAppListItem({
+  name,
+  author,
+  image,
+  link,
+}: {
+  name: string;
+  author: string;
+  image: string;
+  link: string;
+}) {
+  return (
+    <a href={link} target="_blank" className={styles.item}>
+      <img src={image} alt={name} className={styles.thumbnail} />
+      <span className={styles.content}>
+        <span className={styles.title}>{name}</span>
+        <span className={styles.byline}>{`By ${author}`}</span>
+      </span>
+      <span className={styles.action}>Try on Reddit</span>
+    </a>
+  );
+}

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;
+    }
+}

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