EchoesWorks#

Next-Generation Tech Blog/Presentation/Slider 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 yourslide

Setup

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

Intro

1. ajax. Ajax Function
2. bar. Process Bar Function
3. effect. fadeIn & fadeOut animate
4. events_handler. handler keydown & touch & slide event
5. image. fullscreen, left ,right image
6. main. main function to connection other function
7. parser. parser data.json
8. slide. core slide code
9. umarkdown. markdown convert
10. utils. utils function

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.

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