GithubHelp home page GithubHelp logo

slidev-bug-minimal-example's Introduction

Steps to reproduce

Render slide(s)

Run this script from the root directory of this repository:

cd slidev
npm i
# define slides array in slides.js
echo "const data = [" >> ../public/slides.js
# render each slide separately
for SLIDE in $(echo *.md); do
    echo "ℹ️ Rendering slide ${SLIDE}"
    SLIDE_NAME=${SLIDE/.md/}
    # create temporary output dir for slide
    mkdir -p ../public/${SLIDE_NAME}
    # build slide
    npx slidev build --base /${SLIDE_NAME}/ --output ../public/${SLIDE_NAME} ${SLIDE}
    # add img assets to output dir
    mkdir ../public/${SLIDE_NAME}/img
    cp img/* ../public/${SLIDE_NAME}/img
    # add slide to array in slides.js
    echo \"${SLIDE_NAME}\", >> ../public/slides.js
    echo "✅ Done rendering slide ${SLIDE}"
done
# close slides array in slides.js
echo "];" >> ../public/slides.js
# add index page to outdir
mv ../index.html ../public

Host in nginx Docker container

docker run -u 0 -it -p 8080:8080 -v $(pwd)/public:/usr/share/nginx/html -v $(pwd)/nginx.conf:/etc/nginx/nginx.conf nginx

Open hosted site

Open the site in your browser:

http://localhost:8080

And then click on the first slide Example-Slide.

Check the errors on the console log.

slidev-bug-minimal-example's People

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.