Renovate · Zandor Smith · Zandor Smith · Zandor Smith · Zandor Smith · Zandor Smith
--- a/.gitignore
+++ b/.gitignore
 node_modules
 /lib
-config.js
\ No newline at end of file
+/docs
+config.js
+/.env
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -7,7 +7,7 @@ workflow:
  rules:
    - if: $CI_COMMIT_BRANCH

-build:
+build-lib:
  image: node:lts
  stage: build
  before_script:
@@ -19,12 +19,25 @@ build:
  artifacts:
    paths:
      - lib/*
+  needs: []
+
+build-docs:
+  image: node:lts
+  stage: build
+  before_script:
+    - npm install
+  script:
+    - npm run docs:prod
+  tags:
+    - docker
+  artifacts:
+    paths:
+      - docs/*
+  needs: []

 publish:
  image: node:lts
  stage: publish
-  variables:
-    NPM_TOKEN: ${CI_JOB_TOKEN}
  before_script:
    - npm install
  script:
@@ -38,7 +51,7 @@ publish:
  rules:
    - if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH && $CI_COMMIT_MESSAGE !~ /chore(release)$/
  needs:
-    - job: build
+    - job: build-lib
      artifacts: true

 code-navigation:

--- a/docs/assets/cat.jpeg
+++ b/docs/assets/cat.jpeg
--- a/docs/assets/railicon.png
+++ b/docs/assets/railicon.png
--- a/docs/bundle.js
+++ b/docs/bundle.js
--- a/docs/index.html
+++ b/docs/index.html
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta http-equiv="X-UA-Compatible" content="ie=edge">
-  <meta name="description" content="CHANGE THIS">
-  <title>React Apple Mapkitjs</title>
-</head>
-
-<body>
-  <div id="app"></div>
-  <script src="https://cdn.apple-mapkit.com/mk/5.x.x/mapkit.js"></script>
-<script type="text/javascript" src="bundle.js"></script></body>
-
-</html>
\ No newline at end of file
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,6 +23,7 @@
        "babel-loader": "^8.0.6",
        "concurrently": "^3.5.1",
        "css-loader": "^3.4.2",
+        "dotenv-webpack": "^7.1.0",
        "html-webpack-plugin": "^3.2.0",
        "react": "^16.12.0",
        "react-dom": "^16.12.0",
@@ -5042,6 +5043,39 @@
        "node": ">=8"
      }
    },
+    "node_modules/dotenv": {
+      "version": "8.6.0",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-8.6.0.tgz",
+      "integrity": "sha512-IrPdXQsk2BbzvCBGBOTmmSH5SodmqZNt4ERAZDmW4CT+tL8VtvinqywuANaFu4bOMWki16nqf0e4oC0QIaDr/g==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/dotenv-defaults": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/dotenv-defaults/-/dotenv-defaults-2.0.2.tgz",
+      "integrity": "sha512-iOIzovWfsUHU91L5i8bJce3NYK5JXeAwH50Jh6+ARUdLiiGlYWfGw6UkzsYqaXZH/hjE/eCd/PlfM/qqyK0AMg==",
+      "dev": true,
+      "dependencies": {
+        "dotenv": "^8.2.0"
+      }
+    },
+    "node_modules/dotenv-webpack": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/dotenv-webpack/-/dotenv-webpack-7.1.0.tgz",
+      "integrity": "sha512-+aUOe+nqgLerA/n611oyC15fY79BIkGm2fOxJAcHDonMZ7AtDpnzv/Oe591eHAenIE0t6w03UyxDnLs/YUxx5Q==",
+      "dev": true,
+      "dependencies": {
+        "dotenv-defaults": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "webpack": "^4 || ^5"
+      }
+    },
    "node_modules/duplexer2": {
      "version": "0.1.4",
      "resolved": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.1.4.tgz",
@@ -20656,6 +20690,30 @@
        "is-obj": "^2.0.0"
      }
    },
+    "dotenv": {
+      "version": "8.6.0",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-8.6.0.tgz",
+      "integrity": "sha512-IrPdXQsk2BbzvCBGBOTmmSH5SodmqZNt4ERAZDmW4CT+tL8VtvinqywuANaFu4bOMWki16nqf0e4oC0QIaDr/g==",
+      "dev": true
+    },
+    "dotenv-defaults": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/dotenv-defaults/-/dotenv-defaults-2.0.2.tgz",
+      "integrity": "sha512-iOIzovWfsUHU91L5i8bJce3NYK5JXeAwH50Jh6+ARUdLiiGlYWfGw6UkzsYqaXZH/hjE/eCd/PlfM/qqyK0AMg==",
+      "dev": true,
+      "requires": {
+        "dotenv": "^8.2.0"
+      }
+    },
+    "dotenv-webpack": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/dotenv-webpack/-/dotenv-webpack-7.1.0.tgz",
+      "integrity": "sha512-+aUOe+nqgLerA/n611oyC15fY79BIkGm2fOxJAcHDonMZ7AtDpnzv/Oe591eHAenIE0t6w03UyxDnLs/YUxx5Q==",
+      "dev": true,
+      "requires": {
+        "dotenv-defaults": "^2.0.2"
+      }
+    },
    "duplexer2": {
      "version": "0.1.4",
      "resolved": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.1.4.tgz",
--- a/package.json
+++ b/package.json
 {
  "name": "@zandor300/react-apple-mapkitjs",
-  "version": "0.9.1",
+  "version": "0.9.2",
  "description": "A react wrapper for apple mapkit.js",
  "main": "lib/index.js",
  "scripts": {
@@ -38,6 +38,7 @@
    "babel-loader": "^8.0.6",
    "concurrently": "^3.5.1",
    "css-loader": "^3.4.2",
+    "dotenv-webpack": "^7.1.0",
    "html-webpack-plugin": "^3.2.0",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",

--- a/renovate.json
+++ b/renovate.json
+{
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+  "extends": [
+    "config:base"
+  ],
+  "prConcurrentLimit": 10
+}
--- a/src/docs/index.jsx
+++ b/src/docs/index.jsx
-import React, { Fragment } from "react";
+import React from "react";
 import { render } from "react-dom";
-import { AppleMaps, Annotation, ImageAnnotation } from "../../lib";
+import { AppleMaps, Annotation } from "../../lib";
 import "./styles.css";
 import { CurrentLocationOverride } from "../lib";
-import { YOUR_ACCESS_TOKEN_HERE } from '../../config'
+
+const MAPKITJS_TOKEN = process.env.MAPKITJS_TOKEN

 function Demo() {
 	return (
-		<Fragment>
-			<AppleMaps 
-				token={YOUR_ACCESS_TOKEN_HERE}
+		<div style={{ width: "100%", height: "100vh" }}>
+			<AppleMaps
+				token={MAPKITJS_TOKEN}
+				width="100%"
+				height="100%"
 				latitude={53.8008}
 				longitude={-1.5491}
 				zoomLevel={6}
 			>
-				<Annotation 
+				<Annotation
+					id="apple"
 					latitude={53.7967}
 					longitude={-1.5438}
 					color="#969696"
@@ -23,21 +27,13 @@ function Demo() {
 					selected={true}
 					glyphText=""
 				/>
-				<ImageAnnotation 
-					latitude={53.8158}
-					longitude={-1.4017}
-					title="Cat Cafe"
-					subtitle="scholes"
-					selected={true}
-					url='./assets/cat.jpeg'
-				/>
-				<Annotation 
+				<Annotation
+					id="leeds"
 					latitude={53.7950}
 					longitude={-1.5474}
 					color="red"
 					title="Rail Station"
 					subtitle="Leeds"
-					selected={false}
 					glyphImage='./assets/railicon.png'
 				/>
 				<CurrentLocationOverride 
@@ -46,7 +42,7 @@ function Demo() {
 					direction={90}
 				/>
 			</AppleMaps>
-		</Fragment>
+		</div>
 	);
 }


--- a/src/docs/styles.css
+++ b/src/docs/styles.css
 body {
+  margin: 0;
  background: #eee;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
-}
\ No newline at end of file
+}
--- a/webpack.config.js
+++ b/webpack.config.js
 const path = require("path");
+const Dotenv = require("dotenv-webpack");
 const HtmlWebpackPlugin = require("html-webpack-plugin");

 module.exports = {
@@ -23,6 +24,9 @@ module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, "src/docs/index.html")
+    }),
+    new Dotenv({
+      path: "./.env"
    })
  ],
  resolve: {