Skip to content

Add games showcase with swiper and styles#687

Open
222448082Ashen wants to merge 2 commits intothoth-tech:mainfrom
222448082Ashen:games-showcase
Open

Add games showcase with swiper and styles#687
222448082Ashen wants to merge 2 commits intothoth-tech:mainfrom
222448082Ashen:games-showcase

Conversation

@222448082Ashen
Copy link

Description

The Games Showcase is an engaging feature to have on the homepage. It makes the site feel more dynamic and interactive, and it showcases the scope of what’s possible with SplashKit from visuals to gameplay mechanics. It also serves as a great source of inspiration for current and future students.

More than just a display, this feature encourages community involvement by giving students the chance to have their games featured publicly. It’s a fun and rewarding way for them to share their work, get recognition, and contribute to the broader SplashKit ecosystem. These updates help make that experience feel more polished and consistent with the rest of the site.

Summary of changes:

  • Implemented a "Games Showcase" section on the homepage using a React Swiper component.
  • Created documentation pages for individual games (Space Shooter, Platformer, Puzzle Master).
  • Redesigned buttons (.sko-button) to be consistent with the SplashKit website theme.
  • Moved the "Try Games" menu to the top of the sidebar for better accessibility.
  • Ensured "Try Game" buttons are only displayed for playable games.

Type of change

  • New feature (non-breaking change which adds functionality)
  • Documentation (update or new)

How Has This Been Tested?

Verified the new Games Showcase component renders correctly on the homepage. Checked that the "Try Games" sidebar link works and navigates to the correct pages. Confirmed that the "Play Game" button appears only on playable games and launches the iframe correctly. Verified the new button styling across the affected pages.

Testing Checklist

  • Tested in latest Chrome
  • Tested in latest Firefox
  • npm run build
  • npm run preview

Checklist

If involving code

  • My code follows the style guidelines of this project
  • I have performed a self-review of my own code
  • I have commented my code in hard-to-understand areas
  • I have made corresponding changes to the documentation
  • My changes generate no new warnings

If modified config files

  • I have checked the following files for changes:
    • package.json
    • astro.config.mjs
    • netlify.toml
    • docker-compose.yml
    • custom.css

Folders and Files Added/Modified

  • Added:
    • src/content/docs/games/
    • src/components/react/GameCardSwiper/
    • button-styles.css
    • games.css
  • Modified:
    • astro.config.mjs
    • index.mdx

Additional Notes

The GameCardSwiper component requires the swiper package which is already listed in dependencies. The button styles have been centralized in button-styles.css for easier maintenance.

Introduces a new GameCardSwiper React component to display a games showcase carousel on the homepage. Adds three example game pages (Space Shooter, Platformer Adventure, Puzzle Master) under docs/games, and updates the Astro config to include new stylesheets and a sidebar section for games. Also adds related CSS for buttons and game cards, and updates the docs index to display the showcase.
@netlify
Copy link

netlify bot commented Jan 5, 2026

Deploy Preview for splashkit ready!

Name Link
🔨 Latest commit 203a8aa
🔍 Latest deploy log https://app.netlify.com/projects/splashkit/deploys/695c10d9eccf100008249f5e
😎 Deploy Preview https://deploy-preview-687--splashkit.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Updated scripts to append '-functions' to example URLs for overloaded functions, using api.json for detection. Enhanced fallback naming in api-pages-script.cjs for missing group names by formatting example names. Updated usage-example-references.json URLs to match new convention.
Copy link

@stelaukin stelaukin left a comment

Choose a reason for hiding this comment

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

I can't see any issues with this though I'm not very familiar with this area of the project. I'm not sure if astro.config.mjs should be committed. Will move to second review.

@Sparsh300
Copy link

I have reviewed this PR and the changes meet the contribution guidelines.
File structure, naming, and formatting are consistent with the project standards.
The examples are clear and correctly implemented.
Approved.

@rabail-aamir
Copy link

Reviewed the code changes and checked the deploy preview.
Everything looks good from my side. LGTM 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants