# Virstellung A library for server side generated slide show, if JS in enabled, then the "next" and "previous" links have the default behaviour removed and switch to the next/previous slide without a full page refresh. The improved select requires `` support (progressive enhancement) ## Installation [`npm i virstellung`](https://www.npmjs.com/package/virstellung) ## Usage ## virstellung.html.js virstellung is a function that generates html code. This code should be inserted into the ``. returns a promise ### Example ```js import { virstellung } from "virstellung"; import mime from "mime"; // not included const items = [ "image1.jpg", "video.mp4", ]; const mediaFolder = "media"; // must be completely safe to inserted into html // make sure to validate or escape // in this example the items are hardcoded so there is no problem // fileAlone will be passed to getText (if any text is present) const preparedSlideItems = items.map(item => { return { label: item, url: `./${mediaFolder}/${item}`, file: item, mime: mime.getType(item), } }); const currentSlideParam = "currentslide"; const generateHref = function (index, item) { return `./slide-${index}.html`; }; const htmlCodeForAllSlides = preparedSlideItems.map((slideItem, i) => { return ` ${await virstellung({ slideItems: preparedSlideItems, // array with {label, url, mime} currentSlide: i, // current slide generateHref, // href used in the links for next, previous previousLabel: undefined, // optional label string nextLabel: undefined, // optional label string id: undefined, // id that will be used in the html, // for the event handlers to know which slide should go next // (there can be multiples slides on the same page) // only required if multiple slides are used getText: undefined, // function used to get the text content (server side) // may be async // needed because there is no native html include yet // the text should be html escaped })} `; }); ``` In the HTTP server, use currentSlideParam queryParameter or the generated Href (see above) to know which html page to serve. (server side rendering) ## virstellungAutoLaunch.js Optional Code that should run after the html code generated by the above function. Bundle it with rollup or similar. Import the result as text and serve it inside a `