A minimal presentation boilerplate made with:
- React
- React router
- Node Sass
- Webpack
npm install
npm run server
open http://localhost:3000
- Duplicate one of the folders inside
- Number the new folder accordingly
- Restart the sever and the new slide will appear in the correct place
- Edit the HTML in the slide
index.jsx
file. On save, changes will appear automatically on the browser.
Put the image in the slide's folder, then put this block of code in the slide jsx
template where you want the image to appear,
set the appropriate % padding
and you are ready to go:
<figure className="SlideItem-inlineFigure" style={{ paddingTop: '30%' }}>
<img src={require("./my-image-name.jpg")} />
</figure>
If you need more complex styles, and inline styles are not enough, you can load an external style sheet by creating an index.scss
file in the slide folder. Then uncomment line 6 in slide's index.jsx
:
require("./index.scss");
You should prevent styles propagation, so I'd suggest you to wrap all your custom rules in
.SlideItem[data-id="SLIDE_ID"] {
// all your rules
}
where SLIDE_ID
is the name of the slide foder (eg: 02). Moreover, if you need global vars/utils just add at the beginning of index.scss
:
@import '../../scss/_default';
npm run build
This will generate a build folder will all the files needed to run the presentation.
Just copy those files anywhere and index.html
will work.
The simplest way to get a PDF of the entire slideshow is:
- press the keyboad key
P
, this will trigger the slideshow's list view - print it from your browser menu. Each slide should be on a single page.
Install the library as usual (bower install xyz
). Then open webpack.config.js
and add an additional line after the config
variable:
config.addVendor('libname', '/libpath/libfile.js');
Where libname
is the name that you will use with require (es: 'jquery') and libpath
is the library path relative to the Bower folder (so without bower_components
). If you want to use different files between dev/production environments, then use isProduction
flag. Webpack will minify it anyway on build.