Embedded SplashKit Online

[WhyPenguins]

Preview Deployment 😃

Quick links:

• Read Name
• Drawing
• Guess That Number/Perform Guess
• Full IDE Page (hidden)
  Note when testing: Cached old versions of the SplashKit Online page can break things - if things are behaving strangely I recommend visiting with Disable Cache ticked on. Also I find turning it back off continues using the old cache sometimes...

Overview

This is a PR for embedding SplashKit Online in the Field Guide as in-page activities. It adds a new component, CodeActivity, that can be used similar to normal code blocks, but instead creates an accordion that loads a SplashKit Online iFrame when opened.

• "Block Edit" mode can be used to restrict the user to only editing specific regions, by marking them as one would when highlighting (e.g {10-20}). These can also be given names ({"inputBlock":5-27}), though this is unused currently.
• Extra resources/code files can be attached via a zip file (for instance for utilities.h/cpp)
• The full IDE can be launched as an internal Field Guide page from any activity

I believe the code quality can likely be improved - some parts of this are likely more hacky than needed due to my inexperience with Astro. Interested to know any changes needed to get this merged in, thanks!

---

Questionable points:

• Currently the component creates a hidden div with the markdown output of the code, and extracts the code and block information by scanning through the elements. This feels hacky - maybe someone with more Starlight experience might have some ideas for improvements?
• The method of getting data to the inline script is very weird (uses data attributes...)
• The accordion is currently a required part of the component (since it's used to delay loading until interacted with). Lots of other options there though.
• CodeActivity might not be the best name for the component?

Linked to https://github.com/WhyPenguins/SplashkitOnline/tree/field-guide-embedding-work branch.

Done-ish/To Do (for this repo + SplashKit Online repo):

• Embedded view
• Fixed C++ terminal handling
• Inline terminal input
• Block editing mode (rest of code locked)
• CodeActivity component
• Loading resources/utilities
• Improve load times (now basically instant after first load)
• Avoid full reloads somehow
• Investigate Firefox input not working Works in newer versions, not worth investigating...
• Make startup look smoother (no flashing between normal and embedded layout)
• Ensure code/resources load (definitely a race condition...fun)
• Handle projects properly (and allow re-opening the full IDE in another tab)
• Allow re-opening the full IDE in another tab
• Clean-up the code properly (kinda done...)
• Match Field Guide's themes

Example Usage and Output

<CodeActivity 
    header="Try it out!"
    title="Sequence and Data/Simple Calculator/Read name"
    resources="/resources/code-activities/utilities.zip"
>
    ```c++ {"userCode":7-8}
    #include "splashkit.h"
    // access to read_integer, read_string, etc...
    #include "utilities.h"
    
    using std::to_string;
    
    // code the start of perform guess here
    
    
    int main()
    {
      while ( ! perform_guess(1, 37) )
      {
        write_line("Try again...");
      }
    
      return 0;
    }
    ```
</CodeActivity>