https://github.com/pandawhisperer/socal-codecamp-polymer
Polymer Presentation given at SoCal Code Camp 2014
https://github.com/pandawhisperer/socal-codecamp-polymer
polymer presentation web-components
Last synced: 2 months ago
JSON representation
Polymer Presentation given at SoCal Code Camp 2014
- Host: GitHub
- URL: https://github.com/pandawhisperer/socal-codecamp-polymer
- Owner: PandaWhisperer
- Created: 2014-11-17T18:57:19.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2015-02-21T19:25:13.000Z (over 11 years ago)
- Last Synced: 2025-03-11T11:52:54.922Z (over 1 year ago)
- Topics: polymer, presentation, web-components
- Language: JavaScript
- Homepage: http://pandawhisperer.github.io/SoCal-CodeCamp-Polymer
- Size: 3.55 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Panda Slides
This is a template for authoring HTML5 slide decks. Based on
[IO 2012 Slides](https://code.google.com/p/io-2012-slides/), but Panda-flavored.
## Getting Started
1. Install [Harp][harp], if you don't already have it:
npm install -g harp
2. Create a new slide deck:
harp init [name] -b pandastrike/panda-slides
**NOTE**: If `name` is omitted, slides will be created in the current directory.
3. Start a server for live preview:
harp server
Open your browser and go to [http://localhost:9000/](http://localhost:9000/)
That's it! Now you can open `index.jade` in your `$EDITOR` and start hacking away.
[harp]: http://harpjs.com
## Configuring the slides
You can customize basic settings in [`slide_config.js`](slide_config.js).
This includes the presentation title, Analytics tracking ID, speaker
information (name, social urls, blog), web fonts to load, themes, and other general behavior.
## Editing CSS
The stylesheet is currently written in [SASS][sass], althought there are plans to port it to [Stylus][styl]. Stylesheets are compiled on-the-fly when using the editing preview, thanks to [Harp][harp]. All you have to is make some changes and reload the page in your browser. Easy peasy.
[sass]: http://sass-lang.com/
[styl]: http://learnboost.github.io/stylus/
## Running the slides
You can run the slides either by using a local server (recommended for development) or by producing a static HTML version (for uploading to your website).
### Running from a web server
Make sure you have Harp installed (see "Getting Started"), then just navigate to your slides directory and run `harp server`. Open your browser and go to [http://localhost:9000/slides.html](http://localhost:9000/slides.html). Done!
### Compiling to static HTML
Again, make sure you have Harp installed. Navigate to your slide directory and run `harp compile [outputDir]`. Your compiled slide deck will be found in `outputDir` (or `./www` if you did not specify one).
## Presenter mode
The slides contain a presenter mode feature (beta) to view + control the slides
from a popup window.
To enable presenter mode, add `presentme=true` to the URL: [http://localhost:9000/?presentme=true](http://localhost:9000/?presentme=true)
To disable presenter mode, hit [http://localhost:9000/?presentme=false](http://localhost:9000/?presentme=false)
Presenter mode is sticky, so refreshing the page will persist your settings.
## Credits
Credits go to the original authors of the Google slide template, [Eric Bidelman](mailto:ebidel@gmail.com)
and [Luke Mahé](mailto:lukem@google.com). Without their work this would not be possible.