docs: add back showcase

site/docusaurus.config.ts

@@ -211,6 +211,7 @@ const config: Config = {
         { to: '/api', label: 'API', position: 'left' },
         { to: '/blog', label: 'Blog', position: 'left' },
         { to: '/samples', label: 'Samples', position: 'left' },
+        { to: '/showcase', label: 'Showcase', position: 'left' },
         { to: '/donate', label: 'Donate', position: 'left' },
         {
           href: 'https://github.com/excaliburjs/Excalibur/discussions',

site/src/pages/showcase/_data.ts

@@ -0,0 +1,111 @@
+import beachBreachImage from './images/beachbreach.png'
+import meerkatticaImage from './images/meerkattica.png'
+import showMustGoOnImage from './images/show.png'
+import officeDaydreamImage from './images/office.png'
+import groceriesImage from './images/groceries.png'
+import hexshaperImage from './images/hexshaper.png'
+import minotaurImage from './images/minotaur.png'
+import sweepstacksImage from './images/sweepstacks.png'
+import krakenImage from './images/kraken.png'
+import swordAdventureImage from './images/sword-adventure.png'
+import superMetronomeImage from './images/super-metronome-hero.png'
+import nightBikeImage from './images/nightbike.png'
+
+export default [
+  {
+    title: 'Night Bike',
+    image: nightBikeImage,
+    description:
+      'Ride your motorcycle through the city at night! Jump over as many vehicles as you can!',
+    url: 'https://nightbike.mattjennin.gs/',
+    source: 'https://github.com/mattjennings/nightbike',
+  },
+  {
+    title: 'Super Metronome Hero',
+    image: superMetronomeImage,
+    description:
+      'Super Metronome Hero is a rhythm game. Rather than trying to make a game I wanted to play out of this rather popular genre I decided to send it up with this nonsense joke game.',
+    url: 'https://super-metronome-hero.vidja.games/',
+    source: 'https://github.com/dcgw/super-metronome-hero',
+  },
+  {
+    title: 'Sword Adventure',
+    image: swordAdventureImage,
+    description:
+      'This game is an easily customizable template for developing an Excalibur game with Ionic React, the XState library, i18next, Twine integration for dynamic dialogs, and CapacitorJS. It comes with scene transitions, data persistence and tutorials included!',
+    url: 'https://nicastro.in/excalibur-games/sword-adventure',
+    source: 'https://github.com/facondiaGames/sword-adventure',
+  },
+  {
+    title: 'Beach Breach',
+    image: beachBreachImage,
+    description:
+      'This game was created for Ludum Dare 50. Defend your sandcastle from crabs, turtles, and seagulls in this beach-themed tower defense game!',
+    url: 'http://excaliburjs.com/ludum-50/',
+    source: 'https://github.com/excaliburjs/ludum-50',
+  },
+  {
+    title: 'Meerkattica',
+    image: meerkatticaImage,
+    description:
+      'This game was created for Ludum Dare 48. Dig deeply and quickly to get to your next metal gig, but watch out for the mechanical snake that pursues you!',
+    url: 'http://excaliburjs.com/ludum-48/',
+    source: 'https://github.com/excaliburjs/ludum-48',
+  },
+  {
+    title: 'The Show Must Go On',
+    image: showMustGoOnImage,
+    description:
+      'This game was created for Ludum Dare 46. Keep the theater production going as the only actor!',
+    url: 'http://excaliburjs.com/ludum-46/',
+    source: 'https://github.com/excaliburjs/ludum-46',
+  },
+  {
+    title: 'Office Daydream',
+    image: officeDaydreamImage,
+    description:
+      'This game was created for Ludum Dare 41. Balance the needs of your job with the needs of your dream!',
+    url: 'http://excaliburjs.com/ludum-41/',
+    source: 'https://github.com/excaliburjs/ludum-41',
+  },
+  {
+    title: 'I Just Wanted Groceries',
+    image: groceriesImage,
+    description:
+      'This game was created for Ludum Dare 38. Avoid talking to people and finish your shopping!',
+    url: 'http://excaliburjs.com/ludum-38/',
+    source: 'https://github.com/excaliburjs/ludum-38',
+  },
+  {
+    title: 'Hexshaper',
+    image: hexshaperImage,
+    description:
+      'This game was created for Ludum Dare 35. Absorb enemy projectiles and close the portals!',
+    url: 'http://excaliburjs.com/ludum-35/',
+    source: 'https://github.com/excaliburjs/ludum-35',
+  },
+  {
+    title: 'Crypt of the Minotaur',
+    image: minotaurImage,
+    description:
+      'This game was created for Ludum Dare 33. Play as the Minotaur to defend your treasure!',
+    url: 'http://excaliburjs.com/ludum-33/',
+    source: 'https://github.com/excaliburjs/ludum-33',
+  },
+  {
+    title: 'Sweep Stacks',
+    image: sweepstacksImage,
+    description:
+      'This game was created for Ludum Dare 31. Sweep across the screen to clear blocks!',
+    url: 'http://excaliburjs.com/sweep/',
+    source: 'https://github.com/excaliburjs/sweep',
+  },
+  {
+    title: 'Kraken Unchained',
+    image: krakenImage,
+    description:
+      'This game was created for Ludum Dare 29. Play as the Kraken and destroy ships!',
+    url: 'http://krakenunchained.azurewebsites.net',
+    source: 'https://github.com/excaliburjs/Ludum-29',
+  },
+]

site/src/pages/showcase/index.js

@@ -0,0 +1,68 @@
+import React from 'react'
+import Layout from '@theme/Layout';
+import clsx from 'clsx';
+
+import data from './_data';
+import styles from './styles.module.css';
+
+const CardList = ({ items }) => (
+  <div className={styles.cards}>
+    {items.map(({ image, title, description, url, source }) => (
+      <div className={styles.card} key={title}>
+        <div className={styles.image}>
+          <img src={image} alt={title} title={title} />
+        </div>
+        <div className={styles.content}>
+          <h3 className="header">{title}</h3>
+
+          <p className="description">{description}</p>
+        </div>
+        <div className={clsx(styles.extra, styles.content)}>
+          <a href={url}>Demo</a>
+          {!!source && (
+            <span className={clsx("right floated")}>
+              <a href={source}>Code</a>
+            </span>
+          )}
+        </div>
+      </div>
+    ))}
+  </div>
+);
+
+
+export default function () {
+  return (
+    <Layout
+      title='Showcase'
+    >
+      <main className={styles.main}>
+
+
+        <div className="ui container">
+          <h2 className="ui header">Showcase</h2>
+
+          <p className={styles.small}>
+            These games were made using Excalibur by the community and maintainers, how cool is that? 🎉
+          </p>
+
+          <p>
+            <a
+              href="https://github.com/excaliburjs/Excalibur/blob/main/site/src/pages/showcase/_data.ts"
+              className={styles.green}
+            >
+              <i className="fork icon" /> Submit a pull request to add your game
+              here!
+            </a>
+          </p>
+
+          <div className="ui section divider" />
+
+          <CardList items={data} />
+
+          <div className="ui hidden divider" />
+        </div>
+      </main>
+    </Layout>
+  );
+}

site/src/pages/showcase/styles.module.css

@@ -0,0 +1,86 @@
+.main {
+  margin: 2rem;
+}
+
+.cards {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.card {
+  font-size: 1em;
+  display: flex;
+  word-wrap: break-word;
+  margin: 10px;
+  /* background: #fff; */
+  border: none;
+  border-radius: 0.25rem;
+  box-shadow: 0 1px 3px 0 #4c4c51, 0 0 0 1px #4c4c51;
+  display: flex;
+  flex-direction: column;
+  max-width: 100%;
+  min-height: 0;
+  padding: 0;
+  position: relative;
+  transition: box-shadow .1s ease, transform .1s ease;
+  width: 290px;
+}
+
+.card>.image {
+  background: rgba(0, 0, 0, .05);
+  display: block;
+  flex: 0 0 auto;
+  padding: 0;
+  position: relative;
+}
+
+.card>.content {
+  background: none;
+  border: none;
+  border-radius: 0;
+  border-top: 1px solid rgba(34, 36, 38, .1);
+  box-shadow: none;
+  flex-grow: 1;
+  font-size: 1em;
+  margin: 0;
+  padding: 1em;
+}
+
+.card>.extra {
+  background: none;
+  border-top: 1px solid rgba(0,0,0,.05)!important;
+  box-shadow: none;
+  color: rgba(0,0,0,.4);
+  flex-grow: 0;
+  left: 0;
+  margin: 0;
+  max-width: 100%;
+  min-height: 0!important;
+  padding: 0.75em 1em;
+  position: static;
+  top: 0;
+  transition: color .1s ease;
+  width: auto;
+}
+
+.cards>.card [class*="right floated"] {
+  float: right;
+}
+
+.green {
+  background-color: rgb(31, 150, 50);
+  color: #ececec;
+  font-size: 1.5em;
+  font-weight: bold;
+  padding: 10px;
+  border: none;
+  border-radius: 0.25rem;
+}
+.green:hover {
+  color: #ececec;
+  text-decoration: none;
+}
+
+.small {
+  font-size: 1.2em;
+}