GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → ahomu → Talkie

ahomu / Talkie

Licence: mit
Simple slide presentation library. Responsive scaling & markdown ready.

Programming Languages

typescript
32286 projects

Labels

htmlmarkdownrxjsslide

Projects that are alternatives of or similar to Talkie

Hacker Slides
A small UI for building presentation slides from markdown markup
Stars: ✭ 316 (-36.8%)
Mutual labels:  markdown, slide
Tomd
Convert HTML to Markdown.
Stars: ✭ 493 (-1.4%)
Mutual labels:  markdown
React Presents
React slideshow framework
Stars: ✭ 454 (-9.2%)
Mutual labels:  slide
Redpen
RedPen is an open source proofreading tool to check if your technical documents meet the writing standard. RedPen supports various markup text formats (Markdown, Textile, AsciiDoc, Re:VIEW, reStructuredText and LaTeX).
Stars: ✭ 466 (-6.8%)
Mutual labels:  markdown
Kite
🌴 Kite 前台页面是vue ssr服务端渲染、后台页面是react spa、服务层nodejs express、mysql编写的一套多权限文章、动态管理系统
Stars: ✭ 455 (-9%)
Mutual labels:  markdown
Jupytext
Jupyter Notebooks as Markdown Documents, Julia, Python or R scripts
Stars: ✭ 4,969 (+893.8%)
Mutual labels:  markdown
Pympress
Pympress is a simple yet powerful PDF reader designed for dual-screen presentations
Stars: ✭ 450 (-10%)
Mutual labels:  slide
Docx2md
Convert Microsoft Word Document to Markdown
Stars: ✭ 498 (-0.4%)
Mutual labels:  markdown
Remark React
plugin to transform to React
Stars: ✭ 484 (-3.2%)
Mutual labels:  markdown
Ng Pageslide
AngularJS sliding panel for serving additional content from off the page
Stars: ✭ 464 (-7.2%)
Mutual labels:  slide
React Simplemde Editor
React wrapper for simplemde markdown editor
Stars: ✭ 463 (-7.4%)
Mutual labels:  markdown
Nuxt Markdown Blog Starter
Nuxt + Markdown blog starter
Stars: ✭ 456 (-8.8%)
Mutual labels:  markdown
Beibq
基于flask开发类似gitbook的知识管理网站。 http://demo.beibq.cn
Stars: ✭ 480 (-4%)
Mutual labels:  markdown
Markdown
markdown parser and HTML renderer for Go
Stars: ✭ 454 (-9.2%)
Mutual labels:  markdown
Mdast
Markdown Abstract Syntax Tree format
Stars: ✭ 493 (-1.4%)
Mutual labels:  markdown
Awesome Markdown
📝 Delightful Markdown stuff.
Stars: ✭ 451 (-9.8%)
Mutual labels:  markdown
Pymdown Extensions
Extensions for Python Markdown
Stars: ✭ 459 (-8.2%)
Mutual labels:  markdown
Innersourcepatterns
Proven approaches that can guide you through applying open source best practices within your organization
Stars: ✭ 473 (-5.4%)
Mutual labels:  markdown
Markdown Viewer
Markdown Viewer / Browser Extension
Stars: ✭ 497 (-0.6%)
Mutual labels:  markdown
Mask
🎭 A CLI task runner defined by a simple markdown file
Stars: ✭ 495 (-1%)
Mutual labels:  markdown
View All Similar Projects ➔

Talkie.js - Web Components based Slide library

The master branch is unstable because it makes comprehensive changes with v0.13. For v0.12 code, please refer to the v0.12.x branch.

npm version build status Dependency Status

This library written in TypeScript & ReactiveX/rxjs: A reactive programming library for JavaScript.

For more information about dependency Please look at the package.json.

Feature

  • [x] Markdown support
  • [x] Code highlighting
  • [x] Layout attributes
  • [x] keyboard control
  • [x] touch control
  • [x] Responsive scaling (4:3, 16:9)
  • [x] FullScreen mode
  • [x] Background image & filter
  • [x] Progress indicator
  • [x] Accessibility support
  • [ ] Pointer mode (TODO)
  • [ ] Canvas drawing mode (experimental) (drop v0.13~)

Real presentation sample

Getting started

Talkie.js contains two of the CSS and one of JavaScript.

  • dist/talkie.min.css
  • dist/talkie.min.js
  • dist/talkie.theme-default.css

Next code is the simplest example.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./dist/talkie.css">
<link rel="stylesheet" href="./dist/talkie.theme-default.css">
</head>
<body>

<!-- Pure HTML style -->
<tk-slide layout>
  <h1>Slide 1</h1>
</tk-slide>

<!-- Markdown style ( require `type` attribute ) -->
<tk-slide layout type="text/x-markdown">
# Slide 2
</tk-slide>

<script src="./dist/webcomponents-loader.js"></script>
<script src="./dist/talkie.js"></script>
<script>
window.addEventListener('WebComponentsReady', function(e) {
  document.body.className += ' webcomponents-ready';
  talkie.run();
});
</script>
</body>
</html>

If you use the code highlighting, you must load these files.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/monokai-sublime.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>

Slide ratio

The default slide is 4:3 (width 1024px, height 768px). If you execute it with the following code, the slide ratio becomes 16:9 (width: 1366px, height 768px).

talkie.run({wide: true});

Scrolling direction

The default scrollable direction is vertical. If you execute it with the following code, the scroll direction becomes horizontal.

talkie.run({horizontal: true});

Backface image & filter

You can add backface attribute into each slides. Image path that you specify in the backface attribute will be the background of when the slide is displayed.

<tk-slide layout
          backface="background-image.jpg"
          backface-filter="blur(1px) brightness(.8)">

  <h1>Title</h1>
  <p>foo, bar, baz, qux...</p>

</tk-slide>

backface-filter attribute is applied to the background image as CSS Filters. But using this, will occur side effect significantly to performance on mobile device.

All options

interface TalkieOptions {
  wide?: boolean; // default: false
  horizontal?: boolean; // default: false
}

talkie.run(options);

FullScreen mode

When you press the f will be a full-screen mode. f or Esc Press and then exit.

Utilities

Many thanks!

Change Log

v0.13

  • TODO

v0.12

  • Add option linkShouldBlank.
  • Add [horizontal] style for default theme.
  • Fixed that transition suppression was not appropriate.
  • Update dependencies.

v0.11

  • Add experimental feature "canvas drawing".
  • Remove Aozora Mincho from default style.

v0.10

  • Improve accessibility support.
  • aria-hidden attribute to use instead of visible,
  • Rename attribute, page to data-page.
  • Rename attribute, body-bg to data-body-bg.
  • Rename attribute, no-transition to data-no-transition.

v0.9

  • Remove the Bacon.js, to use the ReactiveX/rxjs instead.
  • Add TalkieExport.key: (charKey: string) => Observable<KeyboardEvent>.
  • Deprecated TalkieExport.api
  • Deprecated TalkieExport.controls
  • Fixed unexpected transparent background at fullscreen.
  • Default theme some style changes.
    • [invert] has been cut out from the specified value of the layout.
    • Deprecated layouts [title-invert], [bullets-invert]
    • Now it is specified as [layout=title][invert].

License

The MIT License (MIT)

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].