Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Vue Docs REPL implementation via SFC Playground #30

Open
kiaking opened this issue Jul 27, 2021 · 5 comments
Open

Vue Docs REPL implementation via SFC Playground #30

kiaking opened this issue Jul 27, 2021 · 5 comments
Labels
enhancement New feature or request help wanted Extra attention is needed

Comments

@kiaking
Copy link
Member

kiaking commented Jul 27, 2021

The plan is to enable REPL on the docs via SFC Playground instead of codepen (initial idea from Evan).

Now, how can we embed SFC Playground...? 👀

@kiaking kiaking added enhancement New feature or request help wanted Extra attention is needed labels Jul 27, 2021
@kiaking
Copy link
Member Author

kiaking commented Jul 27, 2021

@LinusBorg I heard you were able to embed SFC Playground into Slidev 👀 Is it true? If so, can same technique applied to VitePress as well?

@antfu
Copy link
Member

antfu commented Jul 27, 2021

I think this will do:

<iframe src="https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHRlbXBsYXRlPlxuXHRIaSBLaWEgOilcbjwvdGVtcGxhdGU+In0=" />

Ideally we could have some custom syntax to extend the markdown and transform to the iframe with corresponding hash via a simple Vite plugin. Like

```vue {repl}
<template>
  <h1>{{ msg }}</h1>
</template>

<script setup>
const msg = 'Hello World!'
</script>
```

@LinusBorg
Copy link
Member

Yes I did, in a crude kind of way:

  • iframe
  • encode code in base64 and append to url
  • use some CSS for positioning

https://github.com/LinusBorg/slidev-theme-vuetiful/blob/main/layouts/sfc.vue

The most hackish part is using negative margins to move the playground's header out of the way. We could instead add a URL parameter to the playground to have it render without the header and other cruft we don't want while embedding.

Also, a simple iframe might not be what we cant in the docs as it won't be able to adjust hight-wise to the different examples

@kiaking
Copy link
Member Author

kiaking commented Jul 27, 2021

Oh cool, seems like embedding is quite straight forward.

We could instead add a URL parameter to the playground to have it render without the header and other cruft we don't want while embedding.

This is definitely great idea 👍

Also, a simple iframe might not be what we cant in the docs as it won't be able to adjust hight-wise to the different examples.

Hm. We can adjust the iframe height by css right...? So maybe import component and set height via props might work? 🤔

<SFCPlayground height="320px" />

@LinusBorg
Copy link
Member

Oh, btw, here's how I imported the src snippets in slidev - might be able to do this differently in vitepress:

  • import examples .vue files as raw strings
  • collect them in a map object
  • provide them to the app, inject them in the SFC slide layout (the one linked above)

https://github.com/LinusBorg/slidev-theme-vuetiful/blob/main/setup/main.ts

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request help wanted Extra attention is needed
Projects
None yet
Development

No branches or pull requests

3 participants