Skip to content

Commit

Permalink
Update readmes
Browse files Browse the repository at this point in the history
  • Loading branch information
Dmitri committed Jan 29, 2018
1 parent 6b88ed9 commit f78d806
Show file tree
Hide file tree
Showing 2 changed files with 18 additions and 14 deletions.
4 changes: 2 additions & 2 deletions ENV.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
# Get your project environment started for `chat-bubble` with Yarn and WebPack
> This readme is based on [this](https://appdividend.com/2017/03/28/beginners-guide-to-setup-es6-development-environment/) (no relation).
> This readme is based on [this](https://appdividend.com/2017/03/28/beginners-guide-to-setup-es6-development-environment/) guide (no relation).
It's presumed that you have [Yarn](https://yarnpkg.com/lang/en/docs/install/) installed on your system. NPM will work too, but you'll need to switch the commands a bit. This guide does not include versioning (like GitHub) setup which you should probably have as well.
It's presumed that you have [Yarn](https://yarnpkg.com/lang/en/docs/install/) installed on your system. NPM will work too, but you'll need to switch the commands. This guide does not include versioning (like GitHub) setup which you should probably have as well.

1. Run `yarn init` in your project directory. You can leave all fields blank.
2. Run `yarn add webpack webpack-dev-server babel-core babel-loader babel-preset-es2015 --save-dev`
Expand Down
28 changes: 16 additions & 12 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,16 +1,19 @@
# 🤖 chat-bubble
# chat-bubble
[![npm version](https://badge.fury.io/js/chat-bubble.svg)](https://badge.fury.io/js/chat-bubble)
[![GitHub version](https://badge.fury.io/gh/dmitrizzle%2Fchat-bubble.svg)](https://badge.fury.io/gh/dmitrizzle%2Fchat-bubble)
![dependencies](https://david-dm.org/dmitrizzle/chat-bubble.svg)
![downloads](https://img.shields.io/npm/dt/chat-bubble.svg)

> Simple chatbot UI for the Web with JSON scripting.
> Simple chatbot UI for the Web with JSON scripting 👋🤖🤙
![Screenshot](screenshot.gif?raw=true)

- Quick set-up, no-brainer implementation. Works with or without Natural Language Classifiers.
- 1KB GZipped.
- No dependencies. Written with ES5 (compatible with IE11+, Edge + modern browsers).
- Quick set-up & implementation.
- Works with or without Natural Language Classifiers.
- 1KB GZipped. No dependencies. Written with ES5 (compatible with IE11+).

# [Demo](#demos--more-usage-examples) | [Tutorial Video](https://www.youtube.com/watch?v=fkJ935a7VSk) 👀
***

**[Demo](#demos--more-usage-examples)** | [Tutorial Video](https://www.youtube.com/watch?v=fkJ935a7VSk)

***

Expand All @@ -22,7 +25,7 @@
Get the .ZIP file [here](https://github.com/dmitrizzle/chat-bubble/archive/master.zip).

## Quick start
This method assumes you've got a development environment running that's capable of transpiling ES6 JavaScript. There's a short guide on how to get one working [here](ENV.md). Otherwise see "I have no ES6 dev environment."
This method assumes you've got a development environment running that's capable of transpiling ES6 JavaScript. There's a short guide on how to get one working [here](ENV.md). Otherwise see "[I have no ES6 dev environment](https://github.com/dmitrizzle/chat-bubble/new/master#i-have-no-es6-dev-environment)." This guide will show you how to build [this](https://dmitrizzle.github.io/chat-bubble/examples/1-basics.html).

```javascript
/************************************************************************/
Expand All @@ -33,8 +36,9 @@ This method assumes you've got a development environment running that's capable
import { Bubbles, prepHTML } from "../node_modules/chat-bubble/component/Bubbles.js"

// this is a convenience script that builds all necessary HTML,
// imports all scripts and stylesheets
// you can specify a different ID for the HTML div container with
// imports all scripts and stylesheets; your container DIV will
// have a default `id="chat"`;
// you can specify a different ID with:
// `container: "my_chatbox_id"` option
prepHTML({relative_path: "../node_modules/chat-bubble/"})

Expand All @@ -44,7 +48,7 @@ prepHTML({relative_path: "../node_modules/chat-bubble/"})
/************************************************************************/

// initialize by constructing a named function...
var chatWindow = new Bubbles(
const chatWindow = new Bubbles(
document.getElementById('chat'), // ...passing HTML container element...
"chatWindow" // ...and name of the function as a parameter
);
Expand Down Expand Up @@ -88,7 +92,7 @@ chatWindow.talk(
```

## "I have no ES6 dev environment!"
If you don't want to bother with setting up a development server and transpiler for ES6 code, I get it. Simply unzip the [package](https://github.com/dmitrizzle/chat-bubble/archive/master.zip) and create `index.html` inside of that directory and add all the JavaScript that you see SAMPLE IMPLEMENTATION comment above.
If you don't want to bother with setting up a development server and transpiler for ES6 code, I get it. Simply unzip the [package](https://github.com/dmitrizzle/chat-bubble/archive/master.zip) and create `index.html` inside of that directory. Then add all the JavaScript that you see below the `/*SAMPLE IMPLEMENTATION*/` comment in the code example above. Replace `const` with `var`.

```html
<!DOCTYPE html>
Expand Down

0 comments on commit f78d806

Please sign in to comment.