Skip to content
Thoth Tech

Adding to the Games Showcase

Games Showcase Template

The Games Showcase Template is to be used when adding a game to the Games Showcase on the SplashKit.io website. This will be included in the /src/content/docs/games folder of the SplashKit.io folder.

Frontmatter

---
title:
description:
download-link: ""
featured: true
sidebar:
  hidden: false
---
  • title: Game Title
  • description: Short description of game here. Keep this short as it will generate the thumbnail in the index page.
  • download-link: The link to the download-directory.github.io tool to download the github repository that holds the game. Simply copy the link to the game parent game folder and add it to the end of https://download-directory.github.io?url=. The download-link needs to be encapsulated in double quotes"".
  • featured: This flag is to determine if the game is shown on the Games Index page. The Games Index page will automatically populate based on the frontmatter.
  • sidebar: Set the hidden flag to determine if the game will show up on the sidebar.

Game Gif

This will be automatically generated when the gif file is placed into the /public/gifs/games-showcase folder with the naming convention game-title-showcase.gif. Do not adjust this.

Description

Add a description of the game.

Installation

Include installation instructions that are language specific.

1. Download the game files.
2. Navigate to the folder.
3. Execute `dotnet run` through the MSYS2 terminal.

The Download button is automatically derived from the frontmatter - do not alter this

<div class="centered-button-container">
  <button
    class="custom-button"
    onclick={`window.open('${frontmatter['download-link']}', '_blank')`}>
    Download
  </button>
</div>

Gameplay

Briefly describe the gameplay of the game. Include any controls.

| Action     | Player 1 |
| ---------- | -------- |
| Move Up    | W        |
| Move Down  | S        |
| Move Left  | A        |
| Move Right | D        |
| Shoot      | Space    |

Developers

Include the link to the github(s) of the developer(s).

[thoth-tech](https://github.com/thoth-tech)

Include the date that the game was last updated.

Last updated:

A Back to Games Index button will be automatically generated - do not alter this code.

<div class="centered-button-container">
  <button class="custom-button" onclick="location.href='/games'">Back to Games Index</button>
</div>

Adding Games to the Home Page Swiper

To add a game to the front page swiper, you will need to make sure that frontmatter in the .mdx file of your game is correct.

title: The name of your game
description: The description of your game
featured: This boolean will determine if is featured on the game swiper or not

A games-config.json file is generated by a script (feature-games.cjs), which scans the src/content/docs/games directory, reads the frontmatter from each .mdx file, and writes the relevant data to the JSON file.

This JSON is saved to src/components/react/GameCardSwiper/games-config.json.

The Astro project runs this script automatically during development (npm run dev) and build (npm run build). This ensures that the games-config.json file is always up to date without manual intervention.

In the React Swiper component, the project dynamically fetches the games-config.json file at runtime.

The data from games-config.json is then used to display featured games within the Swiper carousel on the main page. It filters the games based on whether they are marked as featured, sorts them by name, and renders them dynamically.