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

feat: run Slidev in browser #1800

Draft
wants to merge 17 commits into
base: main
Choose a base branch
from
Draft

Conversation

KermanX
Copy link
Member

@KermanX KermanX commented Aug 5, 2024

[WIP] This PR tries to run Slidev in the browser, with a better editor. I think the most commonly used functions work in the browser, but some don't. In this PR, changes to existing code will be very minimal, so the Node.js version will always be workable.

Although Slidev can run in StackBlitz, it is slow regarding startup time and operational efficiency.

Preview: https://deploy-preview-1800--slidev.netlify.app/web/

Copy link

netlify bot commented Aug 5, 2024

Deploy Preview for slidev ready!

Name Link
🔨 Latest commit 17469cd
🔍 Latest deploy log https://app.netlify.com/sites/slidev/deploys/66b24820cf91ad0008eb37a4
😎 Deploy Preview https://deploy-preview-1800--slidev.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@cnguyen-de
Copy link

cnguyen-de commented Dec 16, 2024

If the user can download an exported pdf version from the live version, this feature would be a killer feature for slidev.

Together with #1972 would be huge.

@cnguyen-de
Copy link

cnguyen-de commented Dec 18, 2024

I tried out the PR and added some code on my local branch to test if you can add new slide with custom template other than default one, it looks something like this in packages/web/src/virtual/nav-controls.vue

...
const selectedTemplate = ref('default')

function add() {
  slidesSource.push({
    frontmatter: { layout: selectedTemplate.value },
    content: `# ${slidesSource.length + 1}`,
    note: '',
  })

...

// should be dynamically generated based on the current theme
const templates = [{
  value: 'default',
}, {
  value: 'fact',
}, {
  value: 'section',
}, {
  value: 'quote',
}]
</script>

<template>
  <MenuButton>
    <template #button>
      <IconButton class="slidev-icon" title="Add Slide">
        <carbon:add-large />
      </IconButton>
    </template>

    <template #menu>
      <SelectList v-model="selectedTemplate" title="Template" :items="templates" @click="add()" />
    </template>
  </MenuButton>
...

However whenever a new slide is added, the layout being shown is still the layout of the last slide. When inspecting the value in devtools, the value of frontmatter is correct. Upon creating new slide, the layout is applied. But same issue happens again, so basically the frontmatter config is delayed by one slide. I don't know all the internals yet to find a fix so I'm writing here to report the bug.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants