Add examples to the website, or make examples more discoverable

[jasonwilliams]

It would be good to share the examples we have in https://github.com/boa-dev/boa/tree/main/examples onto the website. This would be so people new to Boa could instantly see how it works and how to use it. The discovery of examples at the moment isn't the best although you can eventually find it via the Boa API link.

We could start off with having a top link to "examples" in the nav bar which links to https://docs.rs/boa_engine/latest/boa_engine/

Then maybe some way to show the source code on the website with some output in the console which you can run.

[mdimado]

I'd like to contribute to this issue! I'm new to the project, so I have a few questions to help me get started:

1. Where can I find the code for the website's navigation bar to add a link to "examples"?
2. Do you have a preferred framework or library for embedding runnable examples and displaying console output?
3. Are there specific examples from the Boa repository that you'd like to prioritize for this feature?

I'd appreciate any guidance or tips to ensure I align with the project's conventions. Thanks!

[jasonwilliams]

Hey @mdimado sorry I didn't see your message, I don't know if you're still interested in this issue but ill try and answer your Qs.

• boa-dev.github.io/docusaurus.config.ts

  Lines 69 to 103 in efa9762

  	items: [
  	{
  	type: "docSidebar",
  	sidebarId: "infoSidebar",
  	position: "left",
  	label: "Learn More",
  	},
  	{ to: "/blog", label: "Blog", position: "left" },
  	{ to: "/about", label: "About", position: "left" },
  	{
  	href: "/playground",
  	label: "Playground",
  	position: "right",
  	},
  	{
  	href: "/conformance",
  	label: "Conformance",
  	position: "right",
  	},
  	{
  	href: "/benchmarks",
  	label: "Benchmarks",
  	position: "right",
  	},
  	{
  	href: "https://docs.rs/boa_engine/latest",
  	label: "API Docs",
  	position: "right",
  	},
  	{
  	href: "https://github.com/boa-dev/boa",
  	label: "GitHub",
  	position: "right",
  	},
  	],

• no preffered framework, i guess something that will integrate with docusauras
• no priotitization for now, you could pick any example from that folder to get going

[Timkarx]

Hi! I would like to work on this (unless this is still relevant for @mdimado ).

[jasonwilliams]

Thanks @Timkarx I’ve assigned you

[Timkarx]

Hey @jasonwilliams. I've added the examples link in the nav-bar, and have started on embedding monaco editor with preset examples that are runnable, but that might take me a few more days to finish. I want to commit the examples link now, whilst also being able to add the runnable examples later. What is the proper way to do this? 2 separate PR's or 1 PR that I will update later? Maybe open a separate issue for the runnable examples?

Also, I see that the issue is on here (/boa) but the PR should be on the boa-dev.github repo. Maybe duplicate this issue over there too?

[jedel1043]

Transferring the issue to the webpage repo.

[jedel1043]

@Timkarx Preferrably separate the two into two PRs: one for just adding the pages to show the examples, and one for the runnable examples.