EchoesWorks

Next-Generation Tech Blog/Presentation Framework

zh

下一代技术博客/展示框架

简介: EchoesWorks —— 打造下一代技术Blog/Presentation 框架

Demo: http://demo.echoesworks.com/

Feature

Core

• Markdown Presentation
• Integrate Github Code/Gist Code
• Full Screen Background Image
• Left/Right side Images Support
• Process Bar
• Auto Play
• Subtitles
• Tab Control

zh

• 支持 Markdown
• 集成Github代码
• 全屏背景图片
• 左/右侧图片支持
• 进度条
• 自动播放
• 字幕
• 分屏控制

Usage

Clone Demo

git clone git@github.com:echoesworks/echoesworks-demo.git

Or

1.Install

bower install echoesworks

2.Data

Create example.md:

<section>
![background](app/background.jpg)

#EchoesWorks

##Phodal Huang

</section>
<section>

#Design for Developer

##EchoesWorks?

##What is different?

##What we need?
</section>

Create data.json:

[
  {
    "time": "00:01.00",
    "code": "https://raw.githubusercontent.com/phodal/echoesworks/master/bower.json",
    "word": "hello, world"
  },
  {
    "time": "00:05.00",
    "word": [
      {
        "word": "Привет"
      },
      {
        "word": "Bonjour"
      },
      {
        "word": "こんにちは"
      },
      {
        "word": "你好"
      },
      {
        "word": "Ciao"
      },
      {
        "word": "Hello, World"
      }
    ]
  },
  {
    "time": "00:12.51",
    "code": false,
    "word": "hello, world, 2"
  }]

• Markdown Slide
• Data for code & Time Control
  

3.Code

 var EW = new EchoesWorks({
        element: 'slide'
    });

Example with slide

    EchoesWorks.get('data/example.md', function(data){
            document.querySelector('slide').innerHTML = EchoesWorks.md.parse(data);
            EchoesWorks.imageHandler();
            new EchoesWorks({
                element: 'slide'
            });
        })

Setup Development

1.Install devDependencies

 npm install

2.Development

3.Run Test

 npm test

4.Push Code & Waiting CI

Inspired by & Thanks to

• Slide

  • https://github.com/markdalgleish/bespoke.js
  • https://github.com/bartaz/impress.js
  • https://github.com/gajus/swing
  • https://github.com/thebird/Swipe

• Markdown

  • https://github.com/simonwaldherr/micromarkdown.js/

• Time

  • https://github.com/vorg/timeline.js

• Process Bar

  • https://github.com/jacoborus/nanobar

License

© 2015 Phodal Huang. This code is distributed under the MIT license. See LICENSE.txt in this directory.

待我代码编成，娶你为妻可好