SplashKitOnline Integration

[ShaunR1991]

Description

This pull request integrates SplashKitOnline into the Usage Examples pages. It presents a button that allows users to:

• Open a movable window for SplashKitOnline directly from the webpage.
• Pass the relevant code and associated resource files (e.g., ZIP files) into SplashKitOnline for testing and interaction.
• Restrict functionality to screens above a certain width to ensure proper usability (i.e., no mobiles/tablets, desktop windows of certain sizes). This is to ensure that the user can make use of all SKO features.

This feature enhances user experience by providing real-time access to code examples.

A SplashKit Online feature page has also been added for users to directly interact with.

Type of Change

• New feature (non-breaking change which adds functionality)

How Has This Been Tested?

The following tests were conducted to verify the changes:

1. Verified that the button opens a new movable window correctly.
2. Tested passing code files and associated resource files to SplashKitOnline.
3. Ensured proper functionality is restricted to screens with a width of 768px or larger.
4. Checked for console errors and ensured smooth drag-and-drop behavior for the window.

Test Configuration:

• OS: Windows 11
• Browser: Latest versions of Chrome, Firefox, and Edge
• Commands: npm run build and npm run preview

Testing Checklist

• Tested in latest Chrome
• Tested in latest Firefox - SplashKit Online C++ execution is bugged on Firefox when running inside an iFrame. Looks like user/filesystem events get blocked from passing, so demos that use keyboard/mouse, and demos with resources, don't work properly. Double-clicking on a resource (like a readme.txt) inside the iFrame and allowing popups makes it work, however the SKO team are investigating this further. At this time, any Chromium browsers will work fine.
• Tested in latest Edge
• 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:
  • astro.config.mjs - added the SplashKit Online feature page.
  • custom.css - added the Try it in SKO button

Additional Notes

This feature is designed to enhance the usability of the SplashKitOnline integration. Future improvements may include:

• Preloading the iframe to reduce initial load times.
• Expanding the feature to support smaller screens while maintaining usability.

[netlify]

✅ Deploy Preview for splashkit-io ready!

Name	Link
🔨 Latest commit	f0ce616
🔍 Latest deploy log	https://app.netlify.com/sites/splashkit-io/deploys/6753efd749c8570008b84158
😎 Deploy Preview	https://deploy-preview-320--splashkit-io.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

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