Release 0.1.0 (#42)

- Improve readme for release - Add changelog - Bump package version to 0.1.0
omahili · Mar 7, 2022 · 87d5e55 · 87d5e55
1 parent b54ec0c
commit 87d5e55
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 11 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -0,0 +1,18 @@
+# Changelog
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [Unreleased]
+
+## [0.1.0] - 2022-03-08
+### Added
+- Configurable seat map with cart and legend
+- Basic functions to manage seats and cart
+- Event listeners
+- Minified js and css
+- TypeScript declaration file
+
+[Unreleased]: https://github.com/omahili/seatchart.js/compare/v0.1.0...HEAD
+[0.1.0]: https://github.com/omahili/seatchart.js/releases/tag/v0.1.0
diff --git a/README.md b/README.md
@@ -5,6 +5,23 @@ Create beautiful designed seat maps 💺🗺️
 - [Demo](https://seatchart.js.org/demo.html)
 - [Docs](https://seatchart.js.org)
 
+## Install
+
+You can get seatchart from npm or use a CDN like [jsDelivr](https://www.jsdelivr.com).
+
+### Npm
+
+```
+npm install --save seatchart
+```
+
+### JsDelivr
+
+```
+https://cdn.jsdelivr.net/npm/[email protected]/dist/seatchart.min.js
+https://cdn.jsdelivr.net/npm/[email protected]/dist/seatchart.min.css
+```
+
 ## Usage
 
 ```html
@@ -13,7 +30,7 @@ Create beautiful designed seat maps 💺🗺️
   <head>
     <title>Seatchart Example</title>
 
-    <link rel="stylesheet" href="path/to/seatchart.min.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/seatchart.min.css">
     <style>
       .economy {
         color: white;
@@ -24,7 +41,7 @@ Create beautiful designed seat maps 💺🗺️
   <body>
     <div id="container"></div>
 
-    <script type="text/javascript" src="path/to/seatchart.min.js"></script>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/seatchart.min.js"></script>
     <script>
       var element = document.getElementById('container');
       var options = {
@@ -47,12 +64,14 @@ Create beautiful designed seat maps 💺🗺️
 </html>
 ```
 
-## Example with React
+## Usage with React
+
+Create your Seatchart component:
 
 ```javascript
 // Seatchart.tsx
 import React, { forwardRef, useEffect, useRef } from 'react';
-import SeatchartJS, { Options } from 'path/to/seatchart';
+import SeatchartJS, { Options } from 'seatchart';
 
 interface SeatchartProps {
   options: Options;
@@ -89,19 +108,17 @@ const Seatchart = forwardRef<SeatchartJS | undefined, SeatchartProps>(({ options
 });
 
 export default Seatchart;
+```
 
-// App.css
-.economy {
-  color: white;
-  background-color: #43aa8b;
-}
+Import it and use it:
 
+```javascript
 // App.tsx
 import React, { useRef } from 'react';
-import SeatchartJS, { Options } from 'path/to/seatchart';
+import SeatchartJS, { Options } from 'seatchart';
 import Seatchart from './Seatchart';
 
-import 'path/to/seatchart/dist/seatchart.min.css';
+import 'seatchart/dist/seatchart.min.css';
 import './App.css';
 
 const options: Options = {
@@ -140,3 +157,13 @@ const App = () => {
 
 export default App;
 ```
+
+And don't forget to style your seats:
+
+```css
+/* App.css */
+.economy {
+  color: white;
+  background-color: #43aa8b;
+}
+```
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,5 +1,6 @@
 {
   "name": "seatchart",
+  "version": "0.1.0",
   "description": "Create beautiful designed seat maps.",
   "main": "dist/seatchart.js",
   "types": "dist/seatchart.d.ts",