slidevjs / slidev Goto Github PK
View Code? Open in Web Editor NEWPresentation Slides for Developers
Home Page: https://sli.dev
License: MIT License
Presentation Slides for Developers
Home Page: https://sli.dev
License: MIT License
Hi! Thanks a lot for this awesome lib!
Do you think it will be possible to add a icon path in the slides header that can be use as the favicon?
---
title: 'My slides'
favicon: ./icon.png | ./icon.svg
---
Thank you!
First of all, sorry for my poor english.
As title, I made a tool to provide this feature!
I've test to packed the demo slides spa into executable outputs for macos-x64 and win-x64
# Assume the current path is in the slidev repo's root
# With dependency 'serve-something' installed (assume that we installed as a global dependency)
# Execute the command (Checkout the serve-something repo for the options' detail)
$ serve-something ./demo/dist --spa --build --targets node14-macos-x64,node14-win-x64
# There would be a folder named as 'executable-outputs' by default, and the executable outputs would finally be inside the folder!
It works just fine, but the disadvantage is that the output size may be over 4X MB because of the packed node runtime.
I think this could be an option for build into spa, it might be a convenient way for using anywhere!
I would like to have a discussion with everyone who loves this awesome project!
this url should use assets link like ../assets/logo.png
it may crash at dev mode in my country
love slidev so mush and thank you for your hard work ❤️
Hi. Thanks for develop awesome tools.
With the editor panel open, I noticed that when I opened the slides overview, the code overlapped.
The cause of this bug seems to be that "codemirror-line" is set to "z-index: 2".
codemirror/codemirror5#3770
Hello, I was so curious about slidev that I jumped in immediately! (✧ω✧)
I have a problem with "npm run dev"
When I execute it I got:
(node:9240) UnhandledPromiseRejectionWarning: Error: Path contains invalid characters: D:\Ramen\Projects\slidev-test/D:/Ramen/Projects/slidev-test/node_modules/.remote-assets
at checkPath (D:\Ramen\Projects\slidev-test\node_modules\fs-extra\lib\mkdirs\make-dir.js:20:21)
at module.exports.makeDir (D:\Ramen\Projects\slidev-test\node_modules\fs-extra\lib\mkdirs\make-dir.js:45:3)
at Object.defineProperty.value (D:\Ramen\Projects\slidev-test\node_modules\universalify\index.js:21:45)
at Object.configResolved (D:\Ramen\Projects\slidev-test\node_modules\vite-plugin-remote-assets\dist\index.js:351:32)
at D:\Ramen\Projects\slidev-test\node_modules\vite\dist\node\chunks\dep-2c03f3f9.js:46156:127
at Array.map (<anonymous>)
at resolveConfig (D:\Ramen\Projects\slidev-test\node_modules\vite\dist\node\chunks\dep-2c03f3f9.js:46156:35)
at processTicksAndRejections (internal/process/task_queues.js:93:5)
at async createServer (D:\Ramen\Projects\slidev-test\node_modules\vite\dist\node\chunks\dep-2c03f3f9.js:69168:20)
at async createServer (D:\Ramen\Projects\slidev-test\node_modules\@slidev\cli\dist\chunk-2DUYQIA7.js:13:18)
(Use `node --trace-warnings ...` to show where the warning was created)
(node:9240) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 2)
(node:9240) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
System: Windows10
Node: v14.16.1
Npm: v7.0.5
What I did:
added 225 packages, and audited 225 packages in 22s
30 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
It is something that could be on my side to check?
Thanks in advance, kind regards
[Feature request] obsidian.md plugin.
That would be so cool.
Thank you for your consideration.
Hello! Great project. I've been using markdown to write beamer slides for years (with pandoc
) and this is a really nice addition to that space.
One small issue I've been having is that when I open the web app, my slides seem to be all shifted to the right.
These are the steps I used:
npm init slidev
and follow all standard options. Wait for all packages to be installed.http://localhost:3030
.Hi!
First of all: thank you for the great project! I want to make a short presentation on my work about a big refactor, and I always hated making presentations. But now I really enjoy, especially the line highlight feature.
Steps to reproduce:
npm run build
npx serve -s dist/
Go to http://localhost:5000/, make sure routing is working after page reload
Go to http://localhost:5000/presenter - it redirects to the first slide.
I know that I can start a dev server for presenter mode, but it's over 5 megabytes without images. Looks like there is no compression?
My initial idea was to start a presenter mode on localhost, forward the local web server with ngrok
, and give my team member links, so they could open on their screens without me sharing my screen.
Maybe this is intentional as https://sli.dev/guide/syntax.html has no mention of numbered lists.
So I made a list like in this screenshot.
When running npm run dev
I see this in Chrome:
Is there's some other way I can use numbered lists? I am willing to try it.
When I run "npm init slidev" I failed to find the module "Error: Cannot find module '@slidev/parser/fs'
Hey there, thanks a lot for creating this program.
Is there has any plan to support mermaid.js?
Is great to write code to gernate diagram with mermaid rather than paste a image to slide.
Currently, Slidev only supports a single Markdown entry for all your slides. I believe this way is simply and easier to focus on the slides content for getting started. But when the slides goes bigger can more complex, sometime you might found it hard to find the right slides to edit. We do have editor supports could solve this problem to some extent.
But eventually, we might still need to have multi-entries support for better organizations and reusability in some scenarios. So, this issue brings two proposals for the interface of this feature.
Using frontmatter option src
to specify the sub-entry:
---
src: ./welcome.md
---
<!-- when `src` is used, the inline content will be ignored -->
---
src: ./intro.md
---
---
# Inline Slide
---
src: ./intro.md
layout: custom
---
<!-- resuse same slide content, but with different layout -->
The if the subentry contains frontmatter as well, it will be merged with the inline ones (inline frontmatter has high priority).
We could also make our editor support read / write to the correct sub-entries with this approach.
"Magic Component" - use sub-entires as components, so you can also extend the content (will be replaced compile time)
<SlideFragment src="./welcome.md" />
---
<SlideFragment src="./intro.md" />
---
# Inline Title
Inline Content
<!-- blend with inline content -->
<SlideFragment src="./page-3.md" />
---
This is more flexible but it's also saying we are not likely to have good editor support for sub-entries.
Provide by @bramceulemans
Having each slide as a file, under './slides' folder and follow some naming conversion. For example
├── slides
| ├── 01.md
| ├── 02.md
└── ...
Ideally, we could also provide a CLI component to split into "multiple files style" and re-compose them back to a single entry when need.
The downside of this approach is losing the ability to "reuse" sections and make the re-ordering harder without additional tools.
代码块生成 html
后还会保留 {{}}
,此时将 html
插入 <template>
作为内容,{{}}
就作为语法被处理所以不展示了。
示例
https://codesandbox.io/s/fancy-dawn-j344h?file=/src/README.md
Clicking any buttons in the navigation bar, then press the spacebar. It will trigger the "next animation" event and the event associated with the button together.
For example, I change to the dark mode at first:
I believe it is because the button gets focused after clicked, then pressing the spacebar can trigger the button. If I click somewhere to make it lose focus, the problem will not happen.
I am not sure if it is a problem that needs to be solved, but I think it may ruin the user experience since they have to click somewhere else after clicking the navigator buttons.
I have solved it by blur()
. If you think it is worthwhile to do so, I can submit a PR later.
Finally, thanks for this awesome project again! 👍
Hello I found these things which are little annoying but there is still some workarounds.
If I change first heading content in demo slides.md
. Nothing changes in the browser.
For example:
# Welcome to Slidev
# Welcome to Slidevs
Browser refreshes but the heading is not changed. I still see Welcome to Slidev as heading
If I duplicate the line:
# Welcome to Slidevs
# Welcome to Slidevs
Then the browser responds and updates the content and I see two headings.
Changing heading do nothing, but if I add some text as paragraph it updates correctly.
If I change the heading size (#
to ##
) it updates correctly as well. ¯\_(ツ)_/¯
If I change presentation notes for slide with presentation mode active in the browser, it does nothing.
Again if I change something that responds to change, that again changes the notes for presenter as well.
This two phenomenons happens only on first slide for some reason
I was able to change heading or notes on other pages, even in presentation mode. Everything works. Looks like first slide of the demo page is the problem.
Hope this helps as a bug report
Is there any way to remove the gradient above the background image?
Is it possible to export a template in a dark theme?
Hey @antfu,
First of all the project is awesome.
Unfortunately, I tested locally today,
GIF: https://drive.google.com/file/d/1FLMF4moUHs8SWGgEijEf9zXgDkDXO3tQ/view
On chrome stable and canary wasn't able to see the screen or the camera recording :
On FF, it was better and but the audio wasn't recorded.
P.S: Browser dev console has not errors.
After following the steps on start guide in official website: yarn create slidev
and then yarn dev
, the url - http:localhost:3030/1 open in browser and the above message immediately appear. BTW, this is just an annoying bug, since it can be hidden.
On Vite documentation, they say to add a folder "public" to add static files, after testing it, the message doesn't show up, apparently fixing the bug. If this is a right approach, I'll be glad to open a pull request. ;)
❤️ Great project, I really loved this.
---
title: Hello
layout: grid
gap: 4
---
# One
# Two
# Three
I found layouts/*.vue
couldn't support multiple slots, so how to implement it?
Demo: https://github.com/lhjt/slidev-animations-demo
Using the v-clicks component as per here does not work in production builds.
pnpm build
serve -s dist
v-clicks
works on the title slidev-clicks
Tested on Edge Chromium, Google Chrome, and Firefox
Great job, I want to translate this repo into Chinese, how can I help with it?
The SPA points to the assets-folder in the root dir.
href="/assets/..."
I think a relative path would be much better
[Integration] Plugin for Visual Studio Code with live preview.
There is a similar plugin for Marp with a preview right inside Visual Studio Code and command integration.
Marp for VS Code
I'd be interested to hear your take on how Slidev compares to Marp
First of all, great project. For further, I hope it can be used like this:
npm i -g @slidev/cli
vim index.md
slidev index.md
# Then, start to performance.
Didn't know if this was already done, but currently, if I use @slidev/cli like this, it will report lack of dependencies.
In this way, it can make user more focus on the content (only a single markdown file) than now (vscode, node_modules, package.json, etc).
Thanks.
I added this index.html
to my project root like guide page (tested in public/index.html
either)
<!-- ./index.html -->
<head>
<link rel="icon" type="image/png" href="/favicon.png" />
</head>
But favicon still not changing
I think this is overwrited by slidev favicon. Is there correct way to change favicon by changing index.html
or vite.config.js
?
Don't see it anywhere in the docs, but maybe we could have support for theming mermaid via https://mermaid-js.github.io/mermaid/#/theming in slidev custom themes.
I haven't looked to much into how difficult it would be to add support, but I think visually the diagrams would benefit a lot from being able to theme them
When attempting to use the apple-basic
theme I receive the following message in the terminal.
The theme "slidev-theme-apple-basic" was not found in your project, do you want to install it now?
I choose y
to install and receive the following error.
npm ERR! code ENOVERSIONS
npm ERR! No valid versions available for slidev-theme-apple-basic
(node:25672) UnhandledPromiseRejectionWarning: Error: Command failed with exit code 1: npm i slidev-theme-apple-basic
at makeError (/Users/username/Code/github/test-slidev/node_modules/@slidev/cli/dist/chunk-JO7C4JO4.js:5935:17)
at handlePromise (/Users/username/Code/github/test-slidev/node_modules/@slidev/cli/dist/chunk-JO7C4JO4.js:6577:33)
at processTicksAndRejections (internal/process/task_queues.js:93:5)
at async run2 (/Users/username/Code/github/test-slidev/node_modules/@slidev/cli/dist/chunk-JO7C4JO4.js:7501:5)
at async promptForThemeInstallation (/Users/username/Code/github/test-slidev/node_modules/@slidev/cli/dist/chunk-JO7C4JO4.js:7648:3)
at async resolveOptions (/Users/username/Code/github/test-slidev/node_modules/@slidev/cli/dist/chunk-JO7C4JO4.js:7584:9)
at async initServer (/Users/username/Code/github/test-slidev/node_modules/@slidev/cli/dist/cli.js:68:21)
(Use `node --trace-warnings ...` to show where the warning was created)
(node:25672) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:25672) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
I have tried the following command as well, npm install @slidev/theme-apple-basic
.
I can confirm that the package does exist in my npm_modules
.
I continue to receive the following message each time I try to run dev
.
The theme "slidev-theme-apple-basic" was not found in your project, do you want to install it now?
In the base element, there is a class that should be toggled: class="light"
| class="dark"
.
However, what currently happens is: class
| class="dark"
. Essentially, the "light" class is not assigned.
I looked through the source code and it may be possible that this is a Vue issue, not a Slidev one, but I wanted to put this out there just in case.
Hello @antfu !
Thank you for making slidev. Can you add a shortcut for the move back like left and up arrow?
slidev already uses space bar to move next slide. So please add shift + space
to move previous slide.
It could be nice to save the state of the previous slides. For instance, on Composable Vuew example, when going back on https://talks.antfu.me/2021/composable-vue/9 takes you to https://talks.antfu.me/2021/composable-vue/8 , even then the last view plus state was https://talks.antfu.me/2021/composable-vue/8?clicks=3 .
LaTeX support will make writing math equations easier.
I can't tell if this is a router misconfiguration or server misconfiguration, but when sharing the link on a specific slide / clicks, the page remains black.
Willing to contribute if this is code related
First of all congrats for the amazing work that you did. It is inspiring. I just got to know about it, I would interested actually in using it for my own presentations, I was just wondering how to publish to the web? I only find exporting to pdf. I understand slidev build
produces a SPA? So I would only need a web server post build to run it right? Well I guess it is just about trying it out but I thought you could quickly dispell the doubts in my mind.
Hi @antfu
Just want to share Tamasha. It is based on Tiddlywiki
and supports both Markdown and wikitext! Only 34kB.
Demo: https://kookma.github.io/TW-Tamasha
Code: https://github.com/kookma/TW-Tamasha
What do you think?
In the create-slidev
source code, the version is "version": "0.5.0"
and that value seems to be referenced in the setup script:
const { version } = require('./package.json')
...
console.log(`${bold(' Slidev') + dim(' Creator')} ${blue(`v${version}`)}`)
However, the version number when running npm init slidev
is v0.1.6
:
npm init slidev That's the performance、。
Error: Cannot find module '@slidev/parser/fs'
Require stack:
node: v12.16.3
Hi! Thanks for this amazing project!
I was wondering if there was an easy way to display slides number? Or does it have to be implemented via a custom theme? (maybe I missed it in the online guide)
Thanks,
CN
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.