Make layout split vertical. Add xterm.js for output. Add examples selection.

[pavelverigo]

Title.

Initially, I considered using libghostty. Well, it does not do rendering. There is an option to use ghostty-web. It has zero dependencies, but it is quite new. After I found that xterm.js is one of the most popular options, It also has zero dependencies and a smaller bundle size.

I wanted to add an example that uses Kitty graphics to render an image in the playground. Unfortunately, the xterm addon is only available in the beta version. It is part of the xterm.js repo, which splits some addons into separate packages, has zero dependencies, and lives in the same monorepo. Since Kitty support is only available in beta, I needed to use that version. Given the playground’s current alpha state, I think using the beta branch is fine for now.

[pavelverigo]

xterm-examples-layout.webm

[Techatrix]

Awesome work! Overall I'm very happy with these changes. But I do have some requests mostly regarding styling and layout choices.

I believe the footer should stay like before. We don't want to end up with two headers stacked on top of each other when file tabs are added in the future. The information on the footer is less critical to using the website so moving it there keep it away from seeking to much attention.

Here is what I suggest to do with the remaining features on the header:
The "Run" button should float at the bottom right of the page. Staying over the terminal if opened. It might also be viable to integrate it into the terminal side panel when it's opened. The dropdown to select an example should float at the top right of the editor panel. The opacity of the dropdown can be reduced when the users starts editing the code as it's less likely that they will need it anymore. In the future, this could be integrated into the tab bar.

Also, the resize bar for the terminal panel should remain visible when it's completely closed. Similar to how it used to be when split horizontally.

Feel free to let me know your thoughts on these suggestions are. Happy to reconsider or clarify. I can also take care of implementing them if you wish.

[Techatrix]

Suggested change

	<select id="example-select">
	<option value="hello-world">Hello World</option>
	<select id="example-select" autocomplete="off">
	<option value="" disabled selected hidden>Select Example</option>

This will show a "Select Example" placeholder instead of "Hello World". This is better at explaining the purpose of that dropdown. When persistence between browser sessions is implemented, showing "Hello World" is going to be especially confusing.

The autocomplete property prevents the selection from being remembered between sessions.

[Techatrix]

Suggested change

	<div id="split-pane" style="--editor-width-percent: 60%;">
	<div id="split-pane" style="--editor-width-percent: 100%;">

The terminal panel should remain closed because it serves little purpose until the run button has been pressed. Until the terminal has any content to display, the user might not even understand what the right side of the page is supposed to be.

In the future, this would also allow the terminal to be initialized lazily after the initial page load.

[Techatrix]

The license on this appears to be CC BY-NC-SA 3.0 (Attribution-NonCommercial-ShareAlike). I believe this is incompatible with this MIT licensed project.

Given that it's only presenting an image, I believe there could be a more interesting or fun example used instead here. This example is doing a good job at showcasing the features of the terminal but that doesn't necessarily do much for people who want to focus on Zig. The code examples should be welcoming to Zig beginners, showcase the features of the language and invite them to play around with the code. The kitty graphics protocol can be part of that but shouldn't be the main focal point.

I'm welcome to any suggestions. Let me know if I should try and come up with something on my own. We can always tweak the examples in the future so this isn't to critical besides the licensing issue.

[Techatrix]

I believe it's best when the terminal respects the browsers light/dark mode setting. If the user wants a light mode themed website, then we shouldn't fill half the screen with a black box.

I tried to look into how xterm.js handles this stuff I ended up with this when initializing the terminal:

const terminal = new Terminal({
    // ...
    allowTransparency: true,
    theme: {
        background: "transparent",
    },
});

The background color can the be set using css media queries. The foreground color still needs to dynamically adjusted which I haven't figured out yet.