Finish usable published version

mvdbster · Sep 30, 2019 · ea07a9b · ea07a9b
1 parent bcdd5d5
commit ea07a9b
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 15 deletions.
diff --git a/README.md b/README.md
@@ -22,6 +22,23 @@ Then, just import to your React component:
 ```jsx
   import { MapillaryViewer } from 'react-mapillary';
 ```
+### Stylesheets
+
+Add the required stylesheets.
+```
+{/* The following line can be included in your src/index.js or App.js file*/}
+
+import 'mapillary-js/dist/mapillary.min.css';
+```
+
+or
+
+The simplest way is to include the latest styles from the CDN. A little more information about the benefits of using a CDN can be found here.
+
+```html
+  <link href='https://unpkg.com/mapillary-js@2.18.1/dist/mapillary.min.css' rel='stylesheet' />
+
+```
 
 ## Examples
 TBD

diff --git a/example/index.html b/example/index.html
@@ -4,6 +4,7 @@
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
     <title>react-mapillary</title>
+    <link href='https://unpkg.com/mapillary-js@2.18.1/dist/mapillary.min.css' rel='stylesheet' />
   </head>
   <body style="margin: 0">
     <div id="root" style="width: 100vw; height: 100vh;"></div>

diff --git a/package.json b/package.json
@@ -1,9 +1,12 @@
 {
   "name": "react-mapillary",
-  "version": "0.0.1",
+  "version": "0.0.5",
   "description": "A react component for the mapillary-js lib",
   "main": "dist/react-mapillary.js",
   "module": "dist/react-mapillary.js",
+  "files": [
+    "dist"
+  ],
   "scripts": {
     "start": "webpack-dev-server --config webpack.dev.js",
     "build": "webpack --config webpack.prod.js",
@@ -36,18 +39,15 @@
     "@babel/preset-react": "^7.0.0",
     "babel-eslint": "^10.0.3",
     "babel-loader": "^8.0.4",
-    "css-loader": "^3.2.0",
     "eslint": "^6.3.0",
     "eslint-config-airbnb": "^18.0.1",
     "eslint-loader": "^3.0.0",
     "eslint-plugin-import": "^2.18.2",
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-react": "^7.14.3",
-    "file-loader": "^4.2.0",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
     "react-test-renderer": "^15.6.2",
-    "style-loader": "^1.0.0",
     "webpack": "^4.39.3",
     "webpack-cli": "^3.3.8",
     "webpack-dev-server": "^3.8.0",

diff --git a/src/index.jsx b/src/index.jsx
@@ -1,7 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import * as Mapillary from 'mapillary-js';
-import 'mapillary-js/dist/mapillary.min.css';
 
 class MapillaryViewer extends Component {
   componentDidMount() {

diff --git a/webpack.common.js b/webpack.common.js
@@ -15,14 +15,6 @@ module.exports = {
         loader: 'babel-loader',
         exclude: /node_modules/,
       },
-      {
-        test: /\.css$/,
-        use: ['style-loader', 'css-loader'],
-      },
-      {
-        test: /.(jpg|jpeg|png|mp3|svg)$/,
-        use: ['file-loader'],
-      },
     ],
   },
 };
diff --git a/webpack.prod.js b/webpack.prod.js
@@ -9,8 +9,8 @@ module.exports = merge(common, {
   entry: './src/index.jsx',
   output: {
     path: path.join(__dirname, 'dist'),
-    filename: 'mappilary-react.js',
-    library: 'mappilary-react',
+    filename: 'react-mapillary.js',
+    library: 'react-mapillary',
     libraryTarget: 'umd',
   },
 });