Need to create link that opens website template in Plunker or another site?

Question

I want to create a button link on my site that opens a folder of code in something like Visual Studio Code online, with a sidebar. I found Plunker, and it looks great.

I have a simple website template that is a folder of typical files, like index.html and css and javascript. I want people to be able to create a site from the template with the click of a button, and login and save their changes, and collaborate with others. Would also be great to have tracking changes.

Ultimately I want to internalize it in my own site, but I figured I'd start with an established online tool.

In case there's anything special out there involving web maps, I'm using MapBox GL.

Does anyone know of anything?

Answer 1

Figured out something at least:

Create a new page, or "Plunk" in plunker, and then save it, and use the link it it. If people want to use the template, they can hit the "fork" button, and save it to their account. Not quite finding how to see version history though.

Answer 2

The embedded version of Plunker can accept a POST-ed form so that you can dynamically set up the editor with custom files. An example of this can be found here.

Alternatively, I created a mini 'SDK' for Plunker to help creating such dynamic embeds that is published on npm and whose source is on GitHub.

<script src="https://cdn.jsdelivr.net/npm/@plnkr/[email protected]/dist/index.js"></script>
<div id="embed"></div>
<script>
  const { showDynamicEmbed } = window['@plnkr/sdk'];
  
  // Generate the files for the dynamic plunk. This could easily
  // be generated on the fly by your application.
  const files = [
      {
          pathname: 'index.html',
          content: '<h1>Hello world</h1>',
      },
  ];

  showDynamicEmbed(
    {
        files,
        title: 'Hello world example',
        tags: ['hello', 'world'],
    },
    {
        deferRun: true, // Don't immediately run the preview
        show: ['index.html', 'preview'], // Open the index file and preview panes
        parentEl: document.getElementById('embed'), // Mount the embed in the #embed element
    }
  );
</script>