diff options
Diffstat (limited to 'public')
| -rw-r--r-- | public/css/slide.css | 19 | ||||
| -rw-r--r-- | public/docs/features.md | 15 | ||||
| -rw-r--r-- | public/docs/slide-example.md | 218 | ||||
| -rw-r--r-- | public/docs/yaml-metadata.md | 4 | ||||
| -rw-r--r-- | public/js/extra.js | 11 | ||||
| -rw-r--r-- | public/js/lib/editor/index.js | 2 | ||||
| -rw-r--r-- | public/js/locale.js | 3 | ||||
| -rw-r--r-- | public/js/render.js | 2 | ||||
| -rwxr-xr-x | public/js/reveal-markdown.js | 4 | ||||
| -rw-r--r-- | public/js/slide.js | 7 | ||||
| -rw-r--r-- | public/views/hackmd/header.ejs | 16 | ||||
| -rw-r--r-- | public/views/index/body.ejs | 10 | ||||
| -rw-r--r-- | public/views/slide.ejs | 14 |
13 files changed, 282 insertions, 43 deletions
diff --git a/public/css/slide.css b/public/css/slide.css index 74bc03c8..a8591108 100644 --- a/public/css/slide.css +++ b/public/css/slide.css @@ -258,6 +258,10 @@ pre.abc > svg { transform-style: preserve-3d; } +.slides, #meta { + display: none; +} + .reveal .slides > section, .reveal .slides > section > section { transform-style: flat; @@ -283,12 +287,25 @@ pre.abc > svg { padding: 25px 15px; } +.footer .gray-font { + color: #777; +} + .footer > * { margin-left: auto; margin-right: auto; max-width: 758px; } +.footer .ui-no-lastchangeuser { + width: 18px; +} + +.footer .slides-disqus { + margin-top: 25px; + margin-bottom: 15px; +} + html, body { height: 100%; width: 100%; @@ -330,4 +347,4 @@ html, body { .print-pdf .footer { display: none; -}
\ No newline at end of file +} diff --git a/public/docs/features.md b/public/docs/features.md index b64b988e..a894c087 100644 --- a/public/docs/features.md +++ b/public/docs/features.md @@ -47,12 +47,15 @@ or import content from your **clipboard** <i class="fa fa-clipboard"></i>, and t It is possible to change the access permission to a note through the little button on the top right of the view. There are four possible options: -<i class="fa fa-leaf fa-fw"></i> **Freely**: Anyone can edit this note. -<i class="fa fa-pencil fa-fw"></i> **Editable**: A signed-in user can edit this note. -<i class="fa fa-id-card fa-fw"></i> **Limited**: People have to sign-in to view and edit this note. -<i class="fa fa-lock fa-fw"></i> **Locked**: Anyone can view this note but only the owner can edit it. -<i class="fa fa-umbrella fa-fw"></i> **Protected**: People have to sign-in to view this note but only owner can edit. -<i class="fa fa-hand-stop-o fa-fw"></i> **Private**: Only the owner can view and edit this note. +| |Owner read/write|Signed-in read|Signed-in write|Guest read|Guest write| +|:-----------------------------|:--------------:|:------------:|:-------------:|:--------:|:---------:| +|<span class="text-nowrap"><i class="fa fa-leaf fa-fw"></i> **Freely**</span> |✔|✔|✔|✔|✔| +|<span class="text-nowrap"><i class="fa fa-pencil fa-fw"></i> **Editable**</span> |✔|✔|✔|✔|✖| +|<span class="text-nowrap"><i class="fa fa-id-card fa-fw"></i> **Limited**</span> |✔|✔|✔|✖|✖| +|<span class="text-nowrap"><i class="fa fa-lock fa-fw"></i> **Locked**</span> |✔|✔|✖|✔|✖| +|<span class="text-nowrap"><i class="fa fa-umbrella fa-fw"></i> **Protected**</span> |✔|✔|✖|✖|✖| +|<span class="text-nowrap"><i class="fa fa-hand-stop-o fa-fw"></i> **Private**</span> |✔|✖|✖|✖|✖| + **Only the owner of the note can change the note's permissions.** diff --git a/public/docs/slide-example.md b/public/docs/slide-example.md index 6249477f..e2e024b1 100644 --- a/public/docs/slide-example.md +++ b/public/docs/slide-example.md @@ -1,5 +1,10 @@ -Slide example -=== +--- +slideOptions: + transition: slide +--- + +# Slide example + This feature still in beta, may have some issues. For details please visit: @@ -17,42 +22,80 @@ Is the divider of slides ---- -### First branch of first slide +### First branch of first the slide `----` Is the divider of branches +Use the _Space_ key to navigate through all slides. + ---- -### Second branch of first slide +### Second branch of first the slide + +Nested slides are useful for adding additional detail underneath a high-level horizontal slide. + +--- + +## Point of View + +Press **ESC** to enter the slide overview. + +--- + +## Touch Optimized + +Presentations look great on touch devices, like mobile phones and tablets. Simply swipe through your slides. + +--- + +## Fragments `<!-- .element: class="fragment" data-fragment-index="1" -->` Is the fragment syntax -- Item 1<!-- .element: class="fragment" data-fragment-index="1" --> -- Item 2<!-- .element: class="fragment" data-fragment-index="2" --> +Hit the next arrow... + +... to step through ... + +<span>... a<!-- .element: class="fragment" data-fragment-index="1" --></span> <span>fragmented<!-- .element: class="fragment" data-fragment-index="2" --></span> <span>slide.<!-- .element: class="fragment" data-fragment-index="3" --></span> + +Note: + This slide has fragments which are also stepped through in the notes window. --- -## Second slide +## Fragment Styles -<!-- .slide: data-background="#1A237E" --> +There are different types of fragments, like: -`<!-- .slide: data-background="#1A237E" -->` +grow -Is the background syntax +shrink + +fade-out + +fade-up (also down, left and right!) + +current-visible + +Highlight <span><!-- .element: class="fragment highlight-red" -->red</span> <span><!-- .element: class="fragment highlight-blue" -->blue</span> <span><!-- .element: class="fragment highlight-green"-->green</span> --- <!-- .slide: data-transition="zoom" --> +## Transition Styles +Different background transitions are available via the transition option. This one's called "zoom". + `<!-- .slide: data-transition="zoom" -->` Is the transition syntax -you can use: +You can use: + none/fade/slide/convex/concave/zoom --- @@ -61,10 +104,12 @@ none/fade/slide/convex/concave/zoom `<!-- .slide: data-transition="fade-in convex-out" -->` -Also can set different in/out transition +Also, you can set different in/out transition + +You can use: + +none/fade/slide/convex/concave/zoom -you can use: -none/fade/slide/convex/concave/zoom postfix with `-in` or `-out` --- @@ -75,9 +120,150 @@ postfix with `-in` or `-out` Custom the transition speed! -you can use: +You can use: + default/fast/slow --- -# The End
\ No newline at end of file +## Themes + +reveal.js comes with a few themes built in: + +Black (default) - White - League - Sky - Beige - Simple + +Serif - Blood - Night - Moon - Solarized + +It can be set in YAML slideOptions + +--- + +<!-- .slide: data-background="#1A237E" --> + +`<!-- .slide: data-background="#1A237E" -->` + +Is the background syntax + +--- + +<!-- .slide: data-background="https://s3.amazonaws.com/hakim-static/reveal-js/image-placeholder.png" data-background-color="#005" --> + +<div style="color: #fff;"> + +## Image Backgrounds + +`<!-- .slide: data-background="image.png"-->` + +</div> + +---- + +<!-- .slide: data-background="https://s3.amazonaws.com/hakim-static/reveal-js/image-placeholder.png" data-background-repeat="repeat" data-background-size="100px" data-background-color="#005" --> + +<div style="color: #fff;"> + +## Tiled Backgrounds + +`<!-- .slide: data-background="image.png" data-background-repeat="repeat" data-background-size="100px" -->` + +</div> + +---- + +<!-- .slide: data-background-video="https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.mp4,https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.webm" data-background-color="#000000" --> + +<div style="background-color: rgba(0, 0, 0, 0.9); color: #fff; padding: 20px;"> + +## Video Backgrounds + +`<!-- .slide: data-background-video="video.mp4,video.webm" -->` + +</div> + +---- + +<!-- .slide: data-background="http://i.giphy.com/90F8aUepslB84.gif" --> + +## ... and GIFs! + +--- + +## Pretty Code + +``` javascript +function linkify( selector ) { + if( supports3DTransforms ) { + + const nodes = document.querySelectorAll( selector ); + + for( const i = 0, len = nodes.length; i < len; i++ ) { + var node = nodes[i]; + + if( !node.className ) { + node.className += ' roll'; + } + } + } +} +``` +Code syntax highlighting courtesy of [highlight.js](http://softwaremaniacs.org/soft/highlight/en/description/). + +--- + +## Marvelous List + +- No order here +- Or here +- Or here +- Or here + +--- + +## Fantastic Ordered List + +1. One is smaller than... +2. Two is smaller than... +3. Three! + +--- + +## Tabular Tables + +| Item | Value | Quantity | +| ---- | ----- | -------- | +| Apples | $1 | 7 | +| Lemonade | $2 | 18 | +| Bread | $3 | 2 | + +--- + +## Clever Quotes + +> “For years there has been a theory that millions of monkeys typing at random on millions of typewriters would reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue.” + +--- + +## Intergalactic Interconnections + +You can link between slides internally, [like this](#/1/3). + +--- + +## Speaker + +There's a [speaker view](https://github.com/hakimel/reveal.js#speaker-notes). It includes a timer, preview of the upcoming slide as well as your speaker notes. + +Press the _S_ key to try it out. + +Note: + Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you open the speaker notes window (hit `s` on your keyboard). + +--- + +## Take a Moment + +Press `B` or `.` on your keyboard to pause the presentation. This is helpful when you're on stage and want to take distracting slides off the screen. + +--- + +# The End diff --git a/public/docs/yaml-metadata.md b/public/docs/yaml-metadata.md index 7158104b..d49418f6 100644 --- a/public/docs/yaml-metadata.md +++ b/public/docs/yaml-metadata.md @@ -134,6 +134,9 @@ This option allow you provide custom options to slide mode. Please below document for more details: https://github.com/hakimel/reveal.js/#configuration +You could also set slide theme which named in below css files: +https://github.com/hakimel/reveal.js/tree/master/css/theme + **Notice: always use two spaces as indention in YAML metadata!** > default: not set (which use default slide options) @@ -142,4 +145,5 @@ https://github.com/hakimel/reveal.js/#configuration ```xml slideOptions: transition: fade + theme: white ```
\ No newline at end of file diff --git a/public/js/extra.js b/public/js/extra.js index bf388139..d36592d9 100644 --- a/public/js/extra.js +++ b/public/js/extra.js @@ -559,6 +559,15 @@ export function finishView (view) { // only static transform should be here export function postProcess (code) { const result = $(`<div>${code}</div>`) + // process style tags + result.find('style').each((key, value) => { + let html = $(value).html() + // unescape > symbel inside the style tags + html = html.replace(/>/g, '>') + // remove css @import to prevent XSS + html = html.replace(/@import url\(([^)]*)\);?/gi, '') + $(value).html(html) + }) // link should open in new window or tab result.find('a:not([href^="#"]):not([target])').attr('target', '_blank') // update continue line numbers @@ -1083,7 +1092,7 @@ const gistPlugin = new Plugin( (match, utils) => { const gistid = match[1] - const code = `<code data-gist-id="${gistid}"/>` + const code = `<code data-gist-id="${gistid}"></code>` return code } ) diff --git a/public/js/lib/editor/index.js b/public/js/lib/editor/index.js index 2991998b..33c1e0d4 100644 --- a/public/js/lib/editor/index.js +++ b/public/js/lib/editor/index.js @@ -74,6 +74,8 @@ export default class Editor { }, 'Cmd-Left': 'goLineLeftSmart', 'Cmd-Right': 'goLineRight', + 'Home': 'goLineLeftSmart', + 'End': 'goLineRight', 'Ctrl-C': function (cm) { if (!isMac && cm.getOption('keyMap').substr(0, 3) === 'vim') { document.execCommand('copy') diff --git a/public/js/locale.js b/public/js/locale.js index 2a2c1814..71c0f99f 100644 --- a/public/js/locale.js +++ b/public/js/locale.js @@ -11,6 +11,9 @@ $('.ui-locale option').each(function () { }) if (Cookies.get('locale')) { lang = Cookies.get('locale') + if (lang === 'zh') { + lang = 'zh-TW' + } } else if (supportLangs.indexOf(userLang) !== -1) { lang = supportLangs[supportLangs.indexOf(userLang)] } else if (supportLangs.indexOf(userLangCode) !== -1) { diff --git a/public/js/render.js b/public/js/render.js index 88a05bde..e2574b5f 100644 --- a/public/js/render.js +++ b/public/js/render.js @@ -27,7 +27,7 @@ var filterXSSOptions = { whiteList: whiteList, escapeHtml: function (html) { // allow html comment in multiple lines - return html.replace(/<(.*?)>/g, '<$1>') + return html.replace(/<(?!!--)/g, '<').replace(/-->/g, '__HTML_COMMENT_END__').replace(/>/g, '>').replace(/__HTML_COMMENT_END__/g, '-->') }, onIgnoreTag: function (tag, html, options) { // allow comment tag diff --git a/public/js/reveal-markdown.js b/public/js/reveal-markdown.js index eca148d8..d15b5ebd 100755 --- a/public/js/reveal-markdown.js +++ b/public/js/reveal-markdown.js @@ -18,7 +18,7 @@ import { md } from './extra' } }(this, function () { var DEFAULT_SLIDE_SEPARATOR = '^\r?\n---\r?\n$' - var DEFAULT_NOTES_SEPARATOR = 'note:' + var DEFAULT_NOTES_SEPARATOR = '^note:' var DEFAULT_ELEMENT_ATTRIBUTES_SEPARATOR = '\\.element\\s*?(.+?)$' var DEFAULT_SLIDE_ATTRIBUTES_SEPARATOR = '\\.slide:\\s*?(\\S.+?)$' @@ -320,7 +320,7 @@ import { md } from './extra' var notes = section.querySelector('aside.notes') var markdown = getMarkdownFromSlide(section) - + markdown = markdown.replace(/</g, '<').replace(/>/g, '>') var rendered = md.render(markdown) rendered = preventXSS(rendered) var result = window.postProcess(rendered) diff --git a/public/js/slide.js b/public/js/slide.js index 9dfda65b..59a352ec 100644 --- a/public/js/slide.js +++ b/public/js/slide.js @@ -4,9 +4,10 @@ require('../css/extra.css') require('../css/site.css') +import { preventXSS } from './render' import { md, updateLastChange, removeDOMEvents, finishView } from './extra' -const body = $('.slides').text() +const body = preventXSS($('.slides').text()) window.createtime = window.lastchangeui.time.attr('data-createtime') window.lastchangetime = window.lastchangeui.time.attr('data-updatetime') @@ -132,6 +133,6 @@ Reveal.addEventListener('ready', event => { }) Reveal.addEventListener('slidechanged', renderSlide) -const isMacLike = !!navigator.platform.match(/(Mac|iPhone|iPod|iPad)/i) +const isWinLike = navigator.platform.indexOf('Win') > -1 -if (!isMacLike) $('.container').addClass('hidescrollbar') +if (isWinLike) $('.container').addClass('hidescrollbar') diff --git a/public/views/hackmd/header.ejs b/public/views/hackmd/header.ejs index 87d2b065..47b563ac 100644 --- a/public/views/hackmd/header.ejs +++ b/public/views/hackmd/header.ejs @@ -32,6 +32,7 @@ </li> <li role="presentation"><a role="menuitem" class="ui-extra-slide" tabindex="-1" href="#" target="_blank"><i class="fa fa-tv fa-fw"></i> <%= __('Slide Mode') %></a> </li> + <% if((typeof github !== 'undefined' && github) || (typeof dropbox !== 'undefined' && dropbox) || (typeof google !== 'undefined' && google) || (typeof gitlab !== 'undefined' && gitlab && (!gitlab.scope || gitlab.scope === 'api'))) { %> <li class="divider"></li> <li class="dropdown-header"><%= __('Export') %></li> <li role="presentation"><a role="menuitem" class="ui-save-dropbox" tabindex="-1" href="#" target="_self"><i class="fa fa-dropbox fa-fw"></i> Dropbox</a> @@ -46,6 +47,7 @@ <li role="presentation"><a role="menuitem" class="ui-save-snippet" href="#"><i class="fa fa-gitlab fa-fw"></i> Snippet</a> </li> <% } %> + <% } %> <li class="divider"></li> <li class="dropdown-header"><%= __('Import') %></li> <li role="presentation"><a role="menuitem" class="ui-import-dropbox" tabindex="-1" href="#" target="_self"><i class="fa fa-dropbox fa-fw"></i> Dropbox</a> @@ -68,8 +70,10 @@ </li> <li role="presentation"><a role="menuitem" class="ui-download-raw-html" tabindex="-1" href="#" target="_self"><i class="fa fa-file-code-o fa-fw"></i> <%= __('Raw HTML') %></a> </li> - <li role="presentation"><a role="menuitem" class="ui-download-pdf-beta" tabindex="-1" href="#" target="_self"><i class="fa fa-file-pdf-o fa-fw"></i> PDF (Beta)</a> - </li> + <% if(allowpdfexport) {%> + <li role="presentation"><a role="menuitem" class="ui-download-pdf-beta" tabindex="-1" href="#" target="_self"><i class="fa fa-file-pdf-o fa-fw"></i> PDF (Beta)</a> + </li> + <% } %> <li class="divider"></li> <li role="presentation"><a role="menuitem" class="ui-help" href="#" data-toggle="modal" data-target=".help-modal"><i class="fa fa-question-circle fa-fw"></i> Help</a> </li> @@ -129,6 +133,7 @@ </li> <li role="presentation"><a role="menuitem" class="ui-extra-slide" tabindex="-1" href="#" target="_blank"><i class="fa fa-tv fa-fw"></i> <%= __('Slide Mode') %></a> </li> + <% if((typeof github !== 'undefined' && github) || (typeof dropbox !== 'undefined' && dropbox) || (typeof google !== 'undefined' && google) || (typeof gitlab !== 'undefined' && gitlab && (!gitlab.scope || gitlab.scope === 'api'))) { %> <li class="divider"></li> <li class="dropdown-header"><%= __('Export') %></li> <li role="presentation"><a role="menuitem" class="ui-save-dropbox" tabindex="-1" href="#" target="_self"><i class="fa fa-dropbox fa-fw"></i> Dropbox</a> @@ -143,6 +148,7 @@ <li role="presentation"><a role="menuitem" class="ui-save-snippet" href="#"><i class="fa fa-gitlab fa-fw"></i> Snippet</a> </li> <% } %> + <% } %> <li class="divider"></li> <li class="dropdown-header"><%= __('Import') %></li> <li role="presentation"><a role="menuitem" class="ui-import-dropbox" tabindex="-1" href="#" target="_self"><i class="fa fa-dropbox fa-fw"></i> Dropbox</a> @@ -165,8 +171,10 @@ </li> <li role="presentation"><a role="menuitem" class="ui-download-raw-html" tabindex="-1" href="#" target="_self"><i class="fa fa-file-code-o fa-fw"></i> <%= __('Raw HTML') %></a> </li> - <li role="presentation"><a role="menuitem" class="ui-download-pdf-beta" tabindex="-1" href="#" target="_self"><i class="fa fa-file-pdf-o fa-fw"></i> PDF (Beta)</a> - </li> + <% if(allowpdfexport) {%> + <li role="presentation"><a role="menuitem" class="ui-download-pdf-beta" tabindex="-1" href="#" target="_self"><i class="fa fa-file-pdf-o fa-fw"></i> PDF (Beta)</a> + </li> + <% } %> </ul> </li> </ul> diff --git a/public/views/index/body.ejs b/public/views/index/body.ejs index b14dde8a..b9c5c426 100644 --- a/public/views/index/body.ejs +++ b/public/views/index/body.ejs @@ -13,14 +13,14 @@ </li> <div class="ui-signin" style="float: right; margin-top: 8px;<% if(signin) { %> display: none;<% } %>"> <% if(allowAnonymous) { %> - <a type="button" href="<%- url %>/new" class="btn btn-sm btn-link"><i class="fa fa-plus"></i> <%= __('New guest note') %></a> + <a type="button" href="<%- url %>/new" class="btn btn-sm btn-primary"><i class="fa fa-plus"></i> <%= __('New guest note') %></a> <% } %> <% if(facebook || twitter || github || gitlab || dropbox || google || ldap || email) { %> <button class="btn btn-sm btn-success ui-signin" data-toggle="modal" data-target=".signin-modal"><%= __('Sign In') %></button> <% } %> </div> <div class="ui-signout" style="float: right; margin-top: 8px;<% if(!signin) { %> display: none;<% } %>"> - <a type="button" href="<%- url %>/new" class="btn btn-sm btn-link"><i class="fa fa-plus"></i> <%= __('New note') %></a> + <a type="button" href="<%- url %>/new" class="btn btn-sm btn-primary"><i class="fa fa-plus"></i> <%= __('New note') %></a> <span class="ui-profile dropdown pull-right"> <button id="profileLabel" class="btn btn-sm btn-link ui-profile-label" style="padding-right: 0;" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <img class="ui-avatar" width="20" height="20"><span class="hidden-xs hidden-sm"> <span class="ui-name"></span></span> <i class="fa fa-caret-down"></i> @@ -130,7 +130,8 @@ </p> <select class="ui-locale"> <option value="en">English</option> - <option value="zh">中文</option> + <option value="zh-CN">简体中文</option> + <option value="zh-TW">繁體中文</option> <option value="fr">Français</option> <option value="de">Deutsch</option> <option value="ja">日本語</option> @@ -148,6 +149,7 @@ <option value="hi">हिन्दी</option> <option value="sv">svenska</option> <option value="eo">Esperanto</option> + <option value="da">dansk</option> </select> </div> </div> @@ -174,4 +176,4 @@ </div> </div> </div> -<%- include ../shared/signin-modal %>
\ No newline at end of file +<%- include ../shared/signin-modal %> diff --git a/public/views/slide.ejs b/public/views/slide.ejs index 26c38bba..220a9435 100644 --- a/public/views/slide.ejs +++ b/public/views/slide.ejs @@ -30,7 +30,11 @@ <% } %> <!-- For reveal.js theme --> + <% if(typeof theme !== 'undefined' && theme) { %> + <link rel="stylesheet" href="<%- url %>/build/reveal.js/css/theme/<%= theme %>.css" id="theme"> + <% } else { %> <link rel="stylesheet" href="<%- url %>/build/reveal.js/css/theme/black.css" id="theme"> + <% } %> <!-- For syntax highlighting --> <link rel="stylesheet" href="<%- url %>/build/reveal.js/lib/css/zenburn.css"> <!-- For overwrite reveal.js --> @@ -50,19 +54,19 @@ <body> <div class="container"> <div class="reveal"> - <div class="slides" style="display: none;"><%= body %></div> + <div class="slides"><%= body %></div> </div> - <div id="meta" style="display: none;"><%= meta %></div> + <div id="meta"><%= meta %></div> <div class="footer"> - <div class="unselectable hidden-print" style="color: #777;"> + <div class="unselectable hidden-print gray-font"> <small> <span> <% if(lastchangeuserprofile) { %> <span class="ui-lastchangeuser"> <i class="ui-user-icon small" style="background-image: url(<%- lastchangeuserprofile.photo %>);" data-toggle="tooltip" data-placement="right" title="<%- lastchangeuserprofile.name %>"></i></span> <% } else { %> - <span class="ui-no-lastchangeuser"> <i class="fa fa-clock-o fa-fw" style="width: 18px;"></i></span> + <span class="ui-no-lastchangeuser"> <i class="fa fa-clock-o fa-fw"></i></span> <% } %> <span class="text-uppercase ui-status-lastchange"></span> <span class="ui-lastchange text-uppercase" data-createtime="<%- createtime %>" data-updatetime="<%- updatetime %>"></span> @@ -78,7 +82,7 @@ </small> </div> <% if(typeof disqus !== 'undefined' && disqus) { %> - <div style="margin-top: 25px; margin-bottom: 15px;"> + <div class="slides-disqus"> <%- include shared/disqus %> </div> <% } %> |