Repository: trikita/slide-html
Branch: master
Commit: 9fd245355097
Files: 8
Total size: 17.5 KB
Directory structure:
gitextract_w2no93u0/
├── .gitignore
├── README.md
├── build.js
├── package.json
├── slide.html
└── src/
├── slide.css
├── slide.html
└── slide.js
================================================
FILE CONTENTS
================================================
================================================
FILE: .gitignore
================================================
node_modules/
================================================
FILE: README.md
================================================
# Slide
The most simple plain text presentation maker.
This version is a standalone HTML page of 4K in size that you can edit in place
and get a working presentation. No other tools needed except for a text editor.
No programming knowledge is required, too.
Android implementation can be found [here](https://github.com/trikita/slide).
## Tutorial
1. Download `slide.html`.
[Open this link](https://raw.githubusercontent.com/trikita/slide-html/master/slide.html)
and press Ctrl+S.
2. Open the downloaded `slide.html` with a text editor.
3. Find the line `
` (should be somewhere around line 36).
4. Edit the text. This is the contents of your presentation.
5. After you save the file - open it in your browser and see the results. You
can edit, save and refresh the browser to see how your presentation looks
like.
## Demo
Either open `slide.html` in your browser or [view it online](http://htmlpreview.github.io/?https://github.com/trikita/slide-html/blob/master/slide.html).
## Syntax
Slides are separated with a blank line.
The font size of each slide is scaled automatically to fit the screen. This is
suitable for [Takahashi method](https://en.wikipedia.org/wiki/Takahashi_method).
Headlines use a larger font size and start with `#` sign.
Emphasized text is written as bold and must be surrounded with asterisks, `*like this*`.
To print an actual asterist just write it twice, `** like this`.
Code blocks are written with monospace font and must start with at least two spaces.
To disable the special meaning of newlines, spaces or `#` put a dot at the
beginning of the line.
## Styling
Above the slide contents there is a small style block. You can specify the
default font, foreground and background colors for your slides. You can also
customize header, monospace and emphasized font styles.
## Printing
You can print your presentation, in this case the slides will be printed as small thumbnails
so that you could make notes on paper or use it as a story plan for your speech.
## Development
We really want to keep it minimal, but if you want to customize it or offer a
pull request you can edit files inside the `src` folder. Then you may open
`src/slide.html` to view your changes, or run `npm run build` to generate the
standalone `slide.html` version.
## License
Code is distributed under MIT license, feel free to use it.
Made by [Trikita](http://trikita.co) - feel free to checkout our other works!
================================================
FILE: build.js
================================================
var fs = require('fs');
var uglify = require("uglify-js").minify;
var cssmin = require('cssmin');
var css = fs.readFileSync("src/slide.css", encoding='utf8');
var js = fs.readFileSync("src/slide.js", encoding='utf8');
var html = fs.readFileSync("src/slide.html", encoding='utf8');
var inline = html
.replace(/')
.replace(//, '');
console.log(inline);
================================================
FILE: package.json
================================================
{
"name": "slide",
"version": "1.0.0",
"description": "Plain text presentation maker",
"scripts": {
"lint": "jshint src/slide.js",
"build": "node build.js > slide.html"
},
"repository": {
"type": "git",
"url": "git+https://github.com/trikita/slide-html.git"
},
"author": "Serge Zaitsev ",
"license": "MIT",
"bugs": {
"url": "https://github.com/trikita/slide-html/issues"
},
"homepage": "https://github.com/trikita/slide-html#readme",
"devDependencies": {
"cssmin": "^0.4.3",
"jshint": "^2.9.2",
"uglify-js": "^2.6.2"
}
}
================================================
FILE: slide.html
================================================
Slide
#SLIDE
Good speech deserves time it takes
Save time for speech
Leave presentation to *Slide*
#Focus on content
Learn 5 markup rules
to make content look great
# #1
Each paragraph is a slide
# #2
Headers start with #
# #3
Emphasize *words*
surrounding them with **asterisks**
# #4
Indent code with 2 spaces
/* Day of week: Sakamoto's algorithm */
int dow(int y, int m, int d)
{
static int t[] = {0, 3, 2, 5, 0, 3, 5, 1, 4, 6, 2, 4};
y -= m < 3;
return (y + y/4 - y/100 + y/400 + t[m-1] + d) % 7;
}
# #5
Lines starting with a dot
disable markup such as
headlines, code or blank lines
↵ = new slide
.# = headline
** = emphasize
␣␣ = monospace
.. = escape
# Styling with CSS
# Selectors
..slide
..slide h1
..slide strong
..slide pre
.
..slide-N, where N is slide number
# Example
.
.slide-10 h1 {
color: #fff;
text-shadow: 1px 1px 3px #453029;
}
.
# CSS backgrounds
.slide-12 {
background: url("icon.png"),
url("bg.png");
background-repeat: no-repeat, repeat;
background-size: 40%, auto;
background-position: bottom right;
}
# Print mode
You can print slide thumbnails
to practice your speech
Slide for Android
.
.
.
# Links
http://trikita.co/slide
https://github.com/trikita/slide
https://github.com/trikita/slide-html
https://play.google.com/store/apps/details?id=trikita.slide
#SLIDE
Good speech deserves time it takes
Save time for speech
Leave presentation to *Slide*
#Focus on content
Learn 5 markup rules
to make content look great
# #1
Each paragraph is a slide
# #2
Headers start with #
# #3
Emphasize *words*
surrounding them with **asterisks**
# #4
Indent code with 2 spaces
/* Day of week: Sakamoto's algorithm */
int dow(int y, int m, int d)
{
static int t[] = {0, 3, 2, 5, 0, 3, 5, 1, 4, 6, 2, 4};
y -= m < 3;
return (y + y/4 - y/100 + y/400 + t[m-1] + d) % 7;
}
# #5
Lines starting with a dot
disable markup such as
headlines, code or blank lines
↵ = new slide
.# = headline
** = emphasize
␣␣ = monospace
.. = escape
# Styling with CSS
# Selectors
..slide
..slide h1
..slide strong
..slide pre
.
..slide-N, where N is slide number
# Example
.
.slide-10 h1 {
color: #fff;
text-shadow: 1px 1px 3px #453029;
}
.
# CSS backgrounds
.slide-12 {
background: url("icon.png"),
url("bg.png");
background-repeat: no-repeat, repeat;
background-size: 40%, auto;
background-position: bottom right;
}
# Print mode
You can print slide thumbnails
to practice your speech
Slide for Android
.
.
.
# Links
http://trikita.co/slide
https://github.com/trikita/slide
https://github.com/trikita/slide-html
https://play.google.com/store/apps/details?id=trikita.slide
================================================
FILE: src/slide.js
================================================
var INDENT_RE = /^(?:( )+|\t+)/;
function trimIndent(s) {
var indent = (s.match(INDENT_RE)||[''])[0].length;
if (indent > 0) {
var trim = s.substring(0, indent);
return s.replace(new RegExp(trim, 'g'), '');
}
}
function renderSlide(root, slide, index) {
var lines = slide.split('\n');
var emSpanStart = -1;
var slideWrapper = document.createElement('div');
var slideContent = document.createElement('div');
var html = '';
slideWrapper.className = 'slide slide-'+index;
slideContent.className = 'slide-content';
for (var i = 0 ; i < lines.length; i++) {
var line = lines[i];
if (line.startsWith('#')) {
// Add header
html = html + '
' + line.substring(1) + '
';
} else if (line.startsWith(' ') || line.startsWith('\t')) {
// Add code
html = html + '
' + line.replace(/^( )|\t/,'') + '
';
} else {
// Unquote dot-quoted lines
if (line.startsWith('.')) {
line = line.substring(1);
}
// Handle emphasis
for (var j = 0; j < line.length; j++) {
var c = line.charAt(j);
if (c == '*') {
if (emSpanStart == -1) {
html = html + '';
emSpanStart = html.length;
} else {
if (emSpanStart != html.length) {
html = html + '';
} else {
html = html.substring(0, html.length-8) + '*';
}
emSpanStart = -1;
}
} else {
html = html + c;
}
}
html = html + ' ';
}
}
slideContent.innerHTML = html;
slideWrapper.appendChild(slideContent);
root.appendChild(slideWrapper);
slideWrapper.style.visibility = "hidden";
}
function render(content) {
var root = document.createElement('div');
root.className = 'slide-root';
document.body.appendChild(root);
content = trimIndent(content);
var slides = content.split(/[\s+]\n/mg);
for (var i = 0; i < slides.length; i++) {
var slide = slides[i].trim();
renderSlide(root, slide, i);
}
return root;
}
function resize() {
var w = window.innerWidth;
var h = window.innerHeight;
var bw = document.body.offsetWidth;
var bh = document.body.offsetHeight;
var scale = ((w/h < bw/bh) ? w/bw : h/bh);
document.body.style.transform = 'scale(' + scale + ')';
}
var currentSlide = -1;
function goTo(slideIndex) {
currentSlide = slideIndex;
window.location.hash = slideIndex;
var slides = document.querySelectorAll('.slide');
for (var i = 0; i < slides.length; i++) {
var el = slides[i];
var slide = el.children[0];
var scaleWidth = (el.offsetWidth * 0.8 / slide.offsetWidth);
var scaleHeight = (el.offsetHeight * 0.8 / slide.offsetHeight);
slide.style.transform = 'scale(' + Math.min(scaleWidth, scaleHeight) + ')';
if (i == currentSlide) {
el.style.visibility = '';
} else {
el.style.visibility = 'hidden';
}
}
}
function next() {
goTo(Math.min(currentSlide + 1, document.querySelectorAll('.slide').length - 1));
}
function prev() {
goTo(Math.max(currentSlide - 1, 0));
}
window.onload = function() {
resize();
render(document.getElementById('slide').innerHTML);
goTo(window.location.hash.substring(1)||0);
window.onclick = next;
window.onresize = resize;
window.onkeydown = function(e) {
if (e.keyCode == 39) {
next();
} else if (e.keyCode == 37) {
prev();
}
};
};