P5.js boilerplate addition

src/boilerplates/p5/codepan.html

@@ -0,0 +1 @@
+<script type="text/javascript" src="https://p5js.org/assets/js/p5.min.js"></script>

src/boilerplates/p5/codepan.js

@@ -0,0 +1,11 @@
+const cl = console.log;
+const W = H = 400;
+function setup() {
+  createCanvas(W, H);
+  background(0);
+}
+function draw() {
+  const middle = W/2;
+  const diameter = 10;
+  circle(middle,middle,diameter);
+}

src/boilerplates/p5/index.js

@@ -0,0 +1,18 @@
+export default async () => {
+  const [htmlCode, jsCode] = await Promise.all([
+    import('!raw-loader!./codepan.html'),
+    import('!raw-loader!./codepan.js')
+  ])
+
+  return {
+    html: {
+      code: htmlCode,
+      transformer: 'html'
+    },
+    js: {
+      code: jsCode,
+      transformer: 'babel'
+    },
+    showPans: ['js', 'output']
+  }
+}

src/components/HomeHeader.vue

@@ -22,6 +22,7 @@
           <el-dropdown-item command="es-import">ES import</el-dropdown-item>
           <el-dropdown-item command="rust">Rust</el-dropdown-item>
           <el-dropdown-item command="pixi">Pixi</el-dropdown-item>
+          <el-dropdown-item command="p5">P5.js</el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>
       <el-button