Coned it. Now how to instal and run it.

Hi there,

I found this pretty neat and cool 👍 , but when i try to run behind a proxy server with a context like "xxx.com/codepan/", the asset path is not going under the context, I am not familiar with vuejs with poi, is there anyway to achieve that?

Thanks!

(index):68 GET http://xxx.com/vendor.js net::ERR_ABORTED
(index):68 GET http://xxx.com/client.js net::ERR_ABORTED
(index):68 GET http://xxx.com/manifest.js net::ERR_ABORTED
(index):68 GET http://xxx.com/vendor.js net::ERR_ABORTED
(index):68 GET http://xxx.com/client.js net::ERR_ABORTED

Hello there.
Tried finding your contact email ID , but unfortunately I couldn't find it anywhere and which is why I am sorry , I am writing here .

Kindly send a mail at [email protected]

I could explain you further about the project so you could see if you could help us.

Alternativel you can also text at +91 8660626844 .

Hi,

I am working on some prototypes which are spacing intensive to test the usability on small screen or screen with lack of height. It would be great if we have a way to toggle the top navigation and the output heading, please consider, thanks! 😄

And using marked or markdown-it?

Great tool, thank you! Any chance to add Less support?

eg, in the js pan:

// @codepan.babel { preset: ['stage-2'] }
const a = {foo: 0}
const b = {...a}

https://github.com/egoist/vue-monaco

When using spread vue's JSX transform adds an import which can not be handled at the moment. You can replicate that by trying:

const App = {
  data: () => ({
  	sel: 2
  }),
  render() {
    return (
      <input type="checkbox" {...{}} />
    );
  }
}

new Vue({
  el: '#app',
  render: h => h(App)
})

like vscode command + /

On March 19, GitHub will disable anonymous gist creation. You should probably disable this functionality in Codepan before then to avoid errors.

It would be better to show username in the dropdown menu after logged in:

(already logged in)

If we can only maintain one theme, should we keep the current light theme or replace it with a dark theme?

👍 for dark theme and 👎 for light theme

Code:

console.log('duration', turn.duration)
console.log('originalIncrement', turn.originalIncrement)
console.log('map', rebuildTimeMap(turn, text))

Output:

See the \n after duration

I suppose it is somewhere in ProxyConsole this is handled.

Currently, CodePan stores Gists in a way that is not very readable. CodePan-generated Gists would be much better to share if they were readable by humans without viewing through CodePan.

I suggest the following:

• Store all CodePan config like opened pans in a file like codepan.json

• Store pan contents in separate files like index.html, index.js, index.css

• Infer pan and transformer from file extension like this:

  Filename	Pan	Transformer
  *.html	HTML	HTML
  *.scss	CSS	SCSS
  *.ts	JS	TypeScript

  This can be overwritten in the CodePan config like so:

  codepan.json

  {
    "files": {
      "index.js": {
        "transformer": "babel"
      },
      "test.txt": {
        "pan": "html",
        "transformer": "markdown"
      }
  }

  Alternatively, a pragma comment could be added at the top of files:

  index.js

  // @codepan { transformer: 'babel' }

  test.txt

  <!-- @codepan { pan: 'html', transformer: 'markdown' } -->

• If, by these rules, multiple files should be displayed in the same tab, only use the alphabetically first one for the sake of simplicity

• Preserve line breaks and spacing

Following these rules, this Gist would be formatted like this instead.

By using sensible defaults for codepan.json, this would potentially also have the side effect of being able to open any Gist even if it wasn't created in CodePan!

Instead of generator + regenerator runtime (which is not available in compiled code)

https://codepan.net/gist/c8a385be9bd8aba503deebd186ac2541

note entirely sure why this happens 😅 (only when you console.log(this))

Make it can back from boilerplate to original empty boilerplate

because of:

It costs 2 minutes to build production bundle now 😂

Steps to reproduce:

1. Click Github Login
2. Click OAuth

The message below appears after a few seconds:

I am using Chrome 65 on Macos High Sierra 10.13.3

Thanks.

You can use an abstraction layer (e.g. https://github.com/1602/jugglingdb) to provide the feature of persisting anonymous pans to a custom datastore, just by providing datastoretype/schema/port/credentials.

currently it does not work

When trying to build the project, I am getting this error -

> [email protected] build /Users/brijesh/projects/codepan
> poi build

> Running in production mode
> Using external Poi config file
> location: "~/projects/codepan/poi.config.js"
> Using external babel configuration
> location: "~/projects/codepan/.babelrc"
> Using external HTML template file
> location: "~/projects/codepan/index.ejs"
> Using main field in package.json as entry point

TypeError: config.module.noParse.add is not a function
    at extendWebpack (/Users/brijesh/projects/codepan/poi.config.js:13:8)
    at webpackFlows.forEach.flow (/Users/brijesh/projects/codepan/node_modules/poi/lib/index.js:64:43)
    at Array.forEach (native)
    at handleOptions.then.options (/Users/brijesh/projects/codepan/node_modules/poi/lib/index.js:64:27)

 FAIL  Failed to start!

npm ERR! code ELIFECYCLE
...

Something to do with -

config.module.noParse
      .add(/babel-preset-vue/)

in poi.config.js

It would be cool, if user could evaluate expressions in console tab, like in JSbin.

• New UI 🤔
• Prettier support
• Monaco editor?
• Save as readable gist
• New project name / domain name

Can one embed CodePan snippets into an HTML presentation and show the presentation offline?

My specific usecase is teaching JS, and sometimes classrooms have internet connection issues.

Currently it imports from bundle.run, but we can use a special syntax import React from '@unpkg/react to allow the use of unpkg.com 😅

Maybe not, a comment // @unpkg would be better.

such as emmet ?

Any Thought?

Hey

It seems that with your "last" commit 663c58b you have changed the way imports are parsed and I assume you forgot to add get-imports.js file or am I missing smth?

A save button for the rendered iframe would be wonderful.

What is poi

• RxJS

The 'Update Gist' button currently is a bit hidden in the overflow menu, and I think it is important enough to place in the top bar instead. It could be just the save icon like this:

Would you accept a PR for this change?

This works fine for me in dev mode, but production builds fail if I load
./index.html
./dist/index.html

from the browser. My url looks like: localhost/codepan and it's in /var/www/html/codepan

As a user, I would like width of resized tabs/columns to be saved, so that when I open or close any other tabs they do not automatically resize the other open ones.

For example sometimes it is enough to have Output as a very thin column, but when I toggle HTML or CSS the Output column gets wide again. Expected behaviour - the Output tab should remain thin.

For example:

https://codepan.js.org/#/?npm=react&format=html,css

Initialize with the react package from npm and display just the html & css panels.

BTW nice work on this 👍

Currently writing a course and embedding codepan iframes for experimenting with JS, yet having large console is a design problem for integration. I was thinking about something like what Glitch does: https://glitch-embed.glitch.me/#preview

run code as editor value changes.

How do you set tabSize?

Use this panel to:

• set editor options
• toggle auto-save
• switch editor theme
• ...