Merge pull request #29 from sensebox/add-markdown

Add markdown

package-lock.json

@@ -1806,6 +1806,14 @@
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.5.tgz",
       "integrity": "sha512-7+2BITlgjgDhH0vvwZU/HZJVyk+2XUlvxXe8dFMedNX/aMkaOq++rMAFXc0tM7ij15QaWlbdQASBR9dihi+bDQ=="
     },
+    "@types/mdast": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-3.0.3.tgz",
+      "integrity": "sha512-SXPBMnFVQg1s00dlMCc/jCdvPqdE4mXaMMCeRlxLDmTAEoegHT53xKtkDnzDTOcmMHUfcjyf36/YYZ6SxRdnsw==",
+      "requires": {
+        "@types/unist": "*"
+      }
+    },
     "@types/minimatch": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz",
@@ -1955,6 +1963,11 @@
         }
       }
     },
+    "@types/unist": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.3.tgz",
+      "integrity": "sha512-FvUupuM3rlRsRtCN+fDudtmytGO6iHJuuRKS1Ss0pG5z8oX0diNEw94UEL7hgDbpN94rgaK5R7sWm6RrSkZuAQ=="
+    },
     "@types/yargs": {
       "version": "13.0.9",
       "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.9.tgz",
@@ -2980,6 +2993,11 @@
       "resolved": "https://registry.npmjs.org/babylon/-/babylon-6.18.0.tgz",
       "integrity": "sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ=="
     },
+    "bail": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/bail/-/bail-1.0.5.tgz",
+      "integrity": "sha512-xFbRxM1tahm08yHBP16MMjVUAvDaBMD38zsM9EMAUN61omwLmKlOpB/Zku5QkjZ8TZ4vn53pj+t518cH0S03RQ=="
+    },
     "balanced-match": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
@@ -3571,6 +3589,21 @@
         "supports-color": "^5.3.0"
       }
     },
+    "character-entities": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-1.2.4.tgz",
+      "integrity": "sha512-iBMyeEHxfVnIakwOuDXpVkc54HijNgCyQB2w0VfGQThle6NXn50zU6V/u+LDhxHcDUPojn6Kpga3PTAD8W1bQw=="
+    },
+    "character-entities-legacy": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-1.1.4.tgz",
+      "integrity": "sha512-3Xnr+7ZFS1uxeiUDvV02wQ+QDbc55o97tIV5zHScSPJpcLm/r0DFPcoY3tYRp+VZukxuMeKgXYmsXQHO05zQeA=="
+    },
+    "character-reference-invalid": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-1.1.4.tgz",
+      "integrity": "sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg=="
+    },
     "chardet": {
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/chardet/-/chardet-0.7.0.tgz",
@@ -6677,6 +6710,63 @@
         }
       }
     },
+    "html-to-react": {
+      "version": "1.4.5",
+      "resolved": "https://registry.npmjs.org/html-to-react/-/html-to-react-1.4.5.tgz",
+      "integrity": "sha512-KONZUDFPg5OodWaQu2ymfkDmU0JA7zB1iPfvyHehTmMUZnk0DS7/TyCMTzsLH6b4BvxX15g88qZCXFhJWktsmA==",
+      "requires": {
+        "domhandler": "^3.3.0",
+        "htmlparser2": "^5.0",
+        "lodash.camelcase": "^4.3.0",
+        "ramda": "^0.27.1"
+      },
+      "dependencies": {
+        "dom-serializer": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.1.0.tgz",
+          "integrity": "sha512-ox7bvGXt2n+uLWtCRLybYx60IrOlWL/aCebWJk1T0d4m3y2tzf4U3ij9wBMUb6YJZpz06HCCYuyCDveE2xXmzQ==",
+          "requires": {
+            "domelementtype": "^2.0.1",
+            "domhandler": "^3.0.0",
+            "entities": "^2.0.0"
+          }
+        },
+        "domelementtype": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.0.2.tgz",
+          "integrity": "sha512-wFwTwCVebUrMgGeAwRL/NhZtHAUyT9n9yg4IMDwf10+6iCMxSkVq9MGCVEH+QZWo1nNidy8kNvwmv4zWHDTqvA=="
+        },
+        "domhandler": {
+          "version": "3.3.0",
+          "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-3.3.0.tgz",
+          "integrity": "sha512-J1C5rIANUbuYK+FuFL98650rihynUOEzRLxW+90bKZRWB6A1X1Tf82GxR1qAWLyfNPRvjqfip3Q5tdYlmAa9lA==",
+          "requires": {
+            "domelementtype": "^2.0.1"
+          }
+        },
+        "domutils": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.4.2.tgz",
+          "integrity": "sha512-NKbgaM8ZJOecTZsIzW5gSuplsX2IWW2mIK7xVr8hTQF2v1CJWTmLZ1HOCh5sH+IzVPAGE5IucooOkvwBRAdowA==",
+          "requires": {
+            "dom-serializer": "^1.0.1",
+            "domelementtype": "^2.0.1",
+            "domhandler": "^3.3.0"
+          }
+        },
+        "htmlparser2": {
+          "version": "5.0.1",
+          "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-5.0.1.tgz",
+          "integrity": "sha512-vKZZra6CSe9qsJzh0BjBGXo8dvzNsq/oGvsjfRdOrrryfeD9UOBEEQdeoqCRmKZchF5h2zOBMQ6YuQ0uRUmdbQ==",
+          "requires": {
+            "domelementtype": "^2.0.1",
+            "domhandler": "^3.3.0",
+            "domutils": "^2.4.2",
+            "entities": "^2.0.0"
+          }
+        }
+      }
+    },
     "html-webpack-plugin": {
       "version": "4.0.0-beta.11",
       "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-4.0.0-beta.11.tgz",
@@ -7042,6 +7132,20 @@
         "kind-of": "^3.0.2"
       }
     },
+    "is-alphabetical": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-1.0.4.tgz",
+      "integrity": "sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg=="
+    },
+    "is-alphanumerical": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-1.0.4.tgz",
+      "integrity": "sha512-UzoZUr+XfVz3t3v4KyGEniVL9BDRoQtY7tOyrRybkVNjDFWyo1yhXNGrrBTQxp3ib9BLAWs7k2YKBQsFRkZG9A==",
+      "requires": {
+        "is-alphabetical": "^1.0.0",
+        "is-decimal": "^1.0.0"
+      }
+    },
     "is-arguments": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.0.4.tgz",
@@ -7104,6 +7208,11 @@
       "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.2.tgz",
       "integrity": "sha512-USlDT524woQ08aoZFzh3/Z6ch9Y/EWXEHQ/AaRN0SkKq4t2Jw2R2339tSXmwuVoY7LLlBCbOIlx2myP/L5zk0g=="
     },
+    "is-decimal": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-1.0.4.tgz",
+      "integrity": "sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw=="
+    },
     "is-descriptor": {
       "version": "0.1.6",
       "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-0.1.6.tgz",
@@ -7159,6 +7268,11 @@
         "is-extglob": "^2.1.1"
       }
     },
+    "is-hexadecimal": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-1.0.4.tgz",
+      "integrity": "sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw=="
+    },
     "is-in-browser": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz",
@@ -8286,6 +8400,11 @@
       "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
       "integrity": "sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0="
     },
+    "lodash.camelcase": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
+      "integrity": "sha1-soqmKIorn8ZRA1x3EfZathkDMaY="
+    },
     "lodash.memoize": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
@@ -8419,6 +8538,30 @@
         "safe-buffer": "^5.1.2"
       }
     },
+    "mdast-add-list-metadata": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/mdast-add-list-metadata/-/mdast-add-list-metadata-1.0.1.tgz",
+      "integrity": "sha512-fB/VP4MJ0LaRsog7hGPxgOrSL3gE/2uEdZyDuSEnKCv/8IkYHiDkIQSbChiJoHyxZZXZ9bzckyRk+vNxFzh8rA==",
+      "requires": {
+        "unist-util-visit-parents": "1.1.2"
+      }
+    },
+    "mdast-util-from-markdown": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-0.8.1.tgz",
+      "integrity": "sha512-qJXNcFcuCSPqUF0Tb0uYcFDIq67qwB3sxo9RPdf9vG8T90ViKnksFqdB/Coq2a7sTnxL/Ify2y7aIQXDkQFH0w==",
+      "requires": {
+        "@types/mdast": "^3.0.0",
+        "mdast-util-to-string": "^1.0.0",
+        "micromark": "~2.10.0",
+        "parse-entities": "^2.0.0"
+      }
+    },
+    "mdast-util-to-string": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-1.1.0.tgz",
+      "integrity": "sha512-jVU0Nr2B9X3MU4tSK7JP1CMkSvOj7X5l/GboG1tKRw52lLF1x2Ju92Ms9tNetCcbfX3hzlM73zYo2NKkWSfF/A=="
+    },
     "mdn-data": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz",
@@ -8507,6 +8650,15 @@
       "resolved": "https://registry.npmjs.org/microevent.ts/-/microevent.ts-0.1.1.tgz",
       "integrity": "sha512-jo1OfR4TaEwd5HOrt5+tAZ9mqT4jmpNAusXtyfNzqVm9uiSYFZlKM1wYL4oU7azZW/PxQW53wM0S6OR1JHNa2g=="
     },
+    "micromark": {
+      "version": "2.10.1",
+      "resolved": "https://registry.npmjs.org/micromark/-/micromark-2.10.1.tgz",
+      "integrity": "sha512-fUuVF8sC1X7wsCS29SYQ2ZfIZYbTymp0EYr6sab3idFjigFFjGa5UwoniPlV9tAgntjuapW1t9U+S0yDYeGKHQ==",
+      "requires": {
+        "debug": "^4.0.0",
+        "parse-entities": "^2.0.0"
+      }
+    },
     "micromatch": {
       "version": "3.1.10",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz",
@@ -9404,6 +9556,19 @@
         "safe-buffer": "^5.1.1"
       }
     },
+    "parse-entities": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-2.0.0.tgz",
+      "integrity": "sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ==",
+      "requires": {
+        "character-entities": "^1.0.0",
+        "character-entities-legacy": "^1.0.0",
+        "character-reference-invalid": "^1.0.0",
+        "is-alphanumerical": "^1.0.0",
+        "is-decimal": "^1.0.0",
+        "is-hexadecimal": "^1.0.0"
+      }
+    },
     "parse-json": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz",
@@ -10730,6 +10895,11 @@
         "performance-now": "^2.1.0"
       }
     },
+    "ramda": {
+      "version": "0.27.1",
+      "resolved": "https://registry.npmjs.org/ramda/-/ramda-0.27.1.tgz",
+      "integrity": "sha512-PgIdVpn5y5Yns8vqb8FzBUEYn98V3xcPgawAkkgj0YJ0qDsnHCiNmZYfOGMgOvoB0eWFLpYbhxUR3mxfDIMvpw=="
+    },
     "randombytes": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
@@ -11023,6 +11193,23 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "react-markdown": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/react-markdown/-/react-markdown-5.0.2.tgz",
+      "integrity": "sha512-kmkB4JbV7LqkDAjvaKRKtodB3n3Id76/DalaDun1U8FuLB0SenPfvH+jAQ5Pcpo54cACRQc1LB1yXmuuuIVecw==",
+      "requires": {
+        "@types/mdast": "^3.0.3",
+        "@types/unist": "^2.0.3",
+        "html-to-react": "^1.3.4",
+        "mdast-add-list-metadata": "1.0.1",
+        "prop-types": "^15.7.2",
+        "react-is": "^16.8.6",
+        "remark-parse": "^9.0.0",
+        "unified": "^9.0.0",
+        "unist-util-visit": "^2.0.0",
+        "xtend": "^4.0.1"
+      }
+    },
     "react-redux": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.0.tgz",
@@ -11320,6 +11507,14 @@
       "resolved": "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz",
       "integrity": "sha1-VNvzd+UUQKypCkzSdGANP/LYiKk="
     },
+    "remark-parse": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-9.0.0.tgz",
+      "integrity": "sha512-geKatMwSzEXKHuzBNU1z676sGcDcFoChMK38TgdHJNAYfFtsfHDQG7MoJAjs6sgYMqyLduCYWDIWZIxiPeafEw==",
+      "requires": {
+        "mdast-util-from-markdown": "^0.8.0"
+      }
+    },
     "remove-trailing-separator": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz",
@@ -11387,6 +11582,11 @@
       "resolved": "https://registry.npmjs.org/repeat-string/-/repeat-string-1.6.1.tgz",
       "integrity": "sha1-jcrkcOHIirwtYA//Sndihtp15jc="
     },
+    "replace-ext": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/replace-ext/-/replace-ext-1.0.0.tgz",
+      "integrity": "sha1-3mMSg3P8v3w8z6TeWkgMRaZ5WOs="
+    },
     "request": {
       "version": "2.88.2",
       "resolved": "https://registry.npmjs.org/request/-/request-2.88.2.tgz",
@@ -13021,6 +13221,11 @@
         "punycode": "^2.1.0"
       }
     },
+    "trough": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/trough/-/trough-1.0.5.tgz",
+      "integrity": "sha512-rvuRbTarPXmMb79SmzEp8aqXNKcK+y0XaB298IXueQ8I2PsrATcPBCSPyK/dDNa2iWOhKlfNnOjdAOTBU/nkFA=="
+    },
     "ts-pnp": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/ts-pnp/-/ts-pnp-1.1.6.tgz",
@@ -13113,6 +13318,31 @@
       "resolved": "https://registry.npmjs.org/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-1.1.0.tgz",
       "integrity": "sha512-PqSoPh/pWetQ2phoj5RLiaqIk4kCNwoV3CI+LfGmWLKI3rE3kl1h59XpX2BjgDrmbxD9ARtQobPGU1SguCYuQg=="
     },
+    "unified": {
+      "version": "9.2.0",
+      "resolved": "https://registry.npmjs.org/unified/-/unified-9.2.0.tgz",
+      "integrity": "sha512-vx2Z0vY+a3YoTj8+pttM3tiJHCwY5UFbYdiWrwBEbHmK8pvsPj2rtAX2BFfgXen8T39CJWblWRDT4L5WGXtDdg==",
+      "requires": {
+        "bail": "^1.0.0",
+        "extend": "^3.0.0",
+        "is-buffer": "^2.0.0",
+        "is-plain-obj": "^2.0.0",
+        "trough": "^1.0.0",
+        "vfile": "^4.0.0"
+      },
+      "dependencies": {
+        "is-buffer": {
+          "version": "2.0.5",
+          "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.5.tgz",
+          "integrity": "sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ=="
+        },
+        "is-plain-obj": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-2.1.0.tgz",
+          "integrity": "sha512-YWnfyRwxL/+SsrWYfOpUtz5b3YD+nyfkHvjbcanzk8zgyO4ASD67uVMRt8k5bM4lLMDnXfriRhOpemw+NfT1eA=="
+        }
+      }
+    },
     "union-value": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.1.tgz",
@@ -13150,6 +13380,45 @@
         "imurmurhash": "^0.1.4"
       }
     },
+    "unist-util-is": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-4.0.3.tgz",
+      "integrity": "sha512-bTofCFVx0iQM8Jqb1TBDVRIQW03YkD3p66JOd/aCWuqzlLyUtx1ZAGw/u+Zw+SttKvSVcvTiKYbfrtLoLefykw=="
+    },
+    "unist-util-stringify-position": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-2.0.3.tgz",
+      "integrity": "sha512-3faScn5I+hy9VleOq/qNbAd6pAx7iH5jYBMS9I1HgQVijz/4mv5Bvw5iw1sC/90CODiKo81G/ps8AJrISn687g==",
+      "requires": {
+        "@types/unist": "^2.0.2"
+      }
+    },
+    "unist-util-visit": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-2.0.3.tgz",
+      "integrity": "sha512-iJ4/RczbJMkD0712mGktuGpm/U4By4FfDonL7N/9tATGIF4imikjOuagyMY53tnZq3NP6BcmlrHhEKAfGWjh7Q==",
+      "requires": {
+        "@types/unist": "^2.0.0",
+        "unist-util-is": "^4.0.0",
+        "unist-util-visit-parents": "^3.0.0"
+      },
+      "dependencies": {
+        "unist-util-visit-parents": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-3.1.1.tgz",
+          "integrity": "sha512-1KROIZWo6bcMrZEwiH2UrXDyalAa0uqzWCxCJj6lPOvTve2WkfgCytoDTPaMnodXh1WrXOq0haVYHj99ynJlsg==",
+          "requires": {
+            "@types/unist": "^2.0.0",
+            "unist-util-is": "^4.0.0"
+          }
+        }
+      }
+    },
+    "unist-util-visit-parents": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-1.1.2.tgz",
+      "integrity": "sha512-yvo+MMLjEwdc3RhhPYSximset7rwjMrdt9E41Smmvg25UQIenzrN83cRnF1JMzoMi9zZOQeYXHSDf7p+IQkW3Q=="
+    },
     "universalify": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
@@ -13344,6 +13613,34 @@
         "extsprintf": "^1.2.0"
       }
     },
+    "vfile": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/vfile/-/vfile-4.2.0.tgz",
+      "integrity": "sha512-a/alcwCvtuc8OX92rqqo7PflxiCgXRFjdyoGVuYV+qbgCb0GgZJRvIgCD4+U/Kl1yhaRsaTwksF88xbPyGsgpw==",
+      "requires": {
+        "@types/unist": "^2.0.0",
+        "is-buffer": "^2.0.0",
+        "replace-ext": "1.0.0",
+        "unist-util-stringify-position": "^2.0.0",
+        "vfile-message": "^2.0.0"
+      },
+      "dependencies": {
+        "is-buffer": {
+          "version": "2.0.5",
+          "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.5.tgz",
+          "integrity": "sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ=="
+        }
+      }
+    },
+    "vfile-message": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-2.0.4.tgz",
+      "integrity": "sha512-DjssxRGkMvifUOJre00juHoP9DPWuzjxKuMDrhNbk2TdaYYBNMStsNhEOt3idrtI12VQYM/1+iM0KOzXi4pxwQ==",
+      "requires": {
+        "@types/unist": "^2.0.0",
+        "unist-util-stringify-position": "^2.0.0"
+      }
+    },
     "vm-browserify": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz",

package.json

@@ -21,6 +21,7 @@
     "react": "^16.13.1",
     "react-cookie-consent": "^5.2.0",
     "react-dom": "^16.13.1",
+    "react-markdown": "^5.0.2",
     "react-redux": "^7.2.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.1",

src/App.css

@@ -5,3 +5,31 @@
   position: relative;
   padding-bottom: 60px; /* height of your footer + 30px*/
 }
+
+
+.tutorial img{
+  display: flex;
+  align-items: center;
+  max-height: 40vH;
+  max-width: 100%;
+  margin: auto;
+} 
+
+.tutorial blockquote{
+    background: #f9f9f9;
+    border-left: 10px solid#4EAF47;
+    margin: 1.5em 10px;
+    padding: 0.5em 10px;
+    quotes: "\201C""\201D""\2018""\2019";
+  }
+  blockquote:before {
+    color:#4EAF47;
+    content: open-quote;
+    font-size: 4em;
+    line-height: 0.1em;
+    margin-right: 0.25em;
+    vertical-align: -0.4em;
+  }
+  blockquote p {
+    display: inline;
+  }

src/components/Blockly/toolbox/Toolbox.js

@@ -234,7 +234,7 @@ class Toolbox extends React.Component {
                     <Block type="sensebox_send_to_osem" />
                 </Category>
                 <Category id="catSenseBoxOutput_LoRa" name="  LoRa" colour={getColour().sensebox}>
-                    <Category id="catSenseBoxOutput_LoRa_activation" name="    Aktiviereung" colour={getColour().sensebox}>
+                    <Category id="catSenseBoxOutput_LoRa_activation" name="    Aktivierung" colour={getColour().sensebox}>
                         <Block type="sensebox_lora_initialize_otaa" />
                         <Block type="sensebox_lora_initialize_abp" />
                     </Category>

src/components/Home.js

@@ -54,7 +54,7 @@ class Home extends Component {
   }
 
   componentDidMount() {
-
+    this.setState({ stats: window.localStorage.getItem('stats') })
     this.props.workspaceName(createNameId());
     fetch(process.env.REACT_APP_BLOCKLY_API + this.props.location.pathname)
       .then(res => res.json())

src/components/Settings/StatsSelector.js

@@ -27,7 +27,7 @@ export default function StatsSelector() {
     return (
         <div>
             <FormControl className={classes.formControl}>
-                <InputLabel id="demo-simple-select-label">Renderer</InputLabel>
+                <InputLabel id="demo-simple-select-label">Statistiken</InputLabel>
                 <Select
                     labelId="demo-simple-select-label"
                     id="demo-simple-select"

src/components/Tutorial/Instruction.js

@@ -8,6 +8,8 @@ import BlocklyWindow from '../Blockly/BlocklyWindow';
 
 import Grid from '@material-ui/core/Grid';
 import Typography from '@material-ui/core/Typography';
+import ReactMarkdown from 'react-markdown'
+
 
 class Instruction extends Component {
 
@@ -17,37 +19,37 @@ class Instruction extends Component {
     var areRequirements = step.requirements && step.requirements.length > 0;
     return (
       <div>
-        <Typography variant='h4' style={{marginBottom: '5px'}}>{step.headline}</Typography>
-        <Typography style={isHardware ? {} : {marginBottom: '5px'}}>{step.text}</Typography>
+        <Typography variant='h4' style={{ marginBottom: '5px' }}>{step.headline}</Typography>
+        <Typography style={isHardware ? {} : { marginBottom: '5px' }}><ReactMarkdown className={'tutorial'} linkTarget={'_blank'} skipHtml={false}>{step.text}</ReactMarkdown></Typography>
         {isHardware ?
-          <Hardware picture={step.hardware}/> : null}
+          <Hardware picture={step.hardware} /> : null}
         {areRequirements > 0 ?
-          <Requirement tutorialIds={step.requirements}/> : null}
+          <Requirement tutorialIds={step.requirements} /> : null}
         {step.media ?
           step.media.picture ?
-            <div style={{display: 'flex', justifyContent: 'center', marginBottom: '5px'}}>
-              <img src={`/media/tutorial/${step.media.picture}`} alt='' style={{maxWidth: '100%'}}/>
+            <div style={{ display: 'flex', justifyContent: 'center', marginBottom: '5px' }}>
+              <img src={`/media/tutorial/${step.media.picture}`} alt='' style={{ maxHeight: '40vH', maxWidth: '100%' }} />
             </div>
-          : step.media.youtube ?
+            : step.media.youtube ?
               /*16:9; width: 800px; height: width/16*9=450px*/
-              <div style={{maxWidth: '800px', margin: 'auto'}}>
-                <div style={{position: 'relative', height: 0, paddingBottom: 'calc(100% / 16 * 9)'}}>
-                  <iframe title={step.media.youtube} style={{position: 'absolute', top: '0', left: '0', width: '100%', maxWidth: '800px', height: '100%', maxHeight: '450px'}} src={`https://www.youtube.com/embed/${step.media.youtube}`} frameBorder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />
+              <div style={{ maxWidth: '800px', margin: 'auto' }}>
+                <div style={{ position: 'relative', height: 0, paddingBottom: 'calc(100% / 16 * 9)' }}>
+                  <iframe title={step.media.youtube} style={{ position: 'absolute', top: '0', left: '0', width: '100%', maxWidth: '800px', height: '100%', maxHeight: '450px' }} src={`https://www.youtube.com/embed/${step.media.youtube}`} frameBorder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />
                 </div>
               </div>
-          : null
-        : null}
+              : null
+          : null}
         {step.xml ?
-        <Grid container spacing={2} style={{marginBottom: '5px'}}>
-          <Grid item xs={12}>
-            <BlocklyWindow
-              svg
-              blockDisabled
-              initialXml={step.xml}
-            />
+          <Grid container spacing={2} style={{ marginBottom: '5px' }}>
+            <Grid item xs={12}>
+              <BlocklyWindow
+                svg
+                blockDisabled
+                initialXml={step.xml}
+              />
+            </Grid>
           </Grid>
-        </Grid>
-        : null }
+          : null}
       </div>
     );
   };

src/data/hardware.json

@@ -1,128 +1,158 @@
 [
   {
-    "id": "bmp280",
-    "name": "Luftdruck und Temperatursensor",
-    "src": "bmp280.png",
-    "url": "https://sensebox.github.io/books-v2/edu/de/komponenten/sensoren/luftdruck-temperatur.html"
+    "id": "senseboxmcu",
+    "name": "senseBox MCU",
+    "src": "senseboxmcu.png",
+    "url": "https://docs.sensebox.de/hardware/allgemein-sensebox-mcu/"
   },
   {
     "id": "breadboard",
     "name": "Breadboard",
     "src": "breadboard.png",
-    "url": "https://sensebox.github.io/books-v2/blockly/de/uebersicht/sensebox_components.html"
-  },
-  {
-    "id": "button",
-    "name": "Knopf",
-    "src": "button.png",
-    "url": "https://sensebox.github.io/books-v2/blockly/de/uebersicht/sensebox_components.html"
-  },
-  {
-    "id": "hc04",
-    "name": "Ultraschall-Distanzsensor",
-    "src": "hc04.png",
-    "url": "https://sensebox.github.io/books-v2/blockly/de/uebersicht/sensebox_components.html"
-  },
-  {
-    "id": "hdc1080",
-    "name": "Temperatur und Luftfeuchtigkeitssensor",
-    "src": "hdc1080.png",
-    "url": "https://sensebox.github.io/books-v2/edu/de/komponenten/sensoren/hdc1080.html"
-  },
-  {
-    "id": "jst-adapter",
-    "name": "JST-Adapterkabel",
-    "src": "jst-adapter.png",
-    "url": "https://sensebox.github.io/books-v2/blockly/de/uebersicht/sensebox_components.html"
-  },
-  {
-    "id": "jst-jst",
-    "name": "JST-JST Kabel",
-    "src": "jst-jst.png",
-    "url": "https://sensebox.github.io/books-v2/blockly/de/uebersicht/sensebox_components.html"
-  },
-  {
-    "id": "jumperwire",
-    "name": "Steckkabel",
-    "src": "jumperwire.png",
-    "url": "https://sensebox.github.io/books-v2/blockly/de/uebersicht/sensebox_components.html"
-  },
-  {
-    "id": "ldr",
-    "name": "LDR",
-    "src": "ldr.png",
-    "url": "https://sensebox.github.io/books-v2/blockly/de/uebersicht/sensebox_components.html"
-  },
-  {
-    "id": "led",
-    "name": "LEDs",
-    "src": "led.png",
-    "url": "https://sensebox.github.io/books-v2/blockly/de/uebersicht/sensebox_components.html"
-  },
-  {
-    "id": "microphone",
-    "name": "Mikrofon",
-    "src": "microphone.png",
-    "url": "https://sensebox.github.io/books-v2/blockly/de/uebersicht/sensebox_components.html"
-  },
-  {
-    "id": "oled",
-    "name": "OLED-Display",
-    "src": "oled.png",
-    "url": "https://sensebox.github.io/books-v2/edu/de/komponenten/zubehoer/led-display.html"
-  },
-  {
-    "id": "piezo",
-    "name": "Piezo",
-    "src": "piezo.png",
-    "url": "https://sensebox.github.io/books-v2/blockly/de/uebersicht/sensebox_components.html"
-  },
-  {
-    "id": "resistor-10kohm",
-    "name": "10 kOhm Widerstand",
-    "src": "resistor-10kohm.png",
-    "url": "https://sensebox.github.io/books-v2/blockly/de/uebersicht/sensebox_components.html"
-  },
-  {
-    "id": "resistor-470ohm",
-    "name": "470 Ohm Widerstand",
-    "src": "resistor-470ohm.png",
-    "url": "https://sensebox.github.io/books-v2/blockly/de/uebersicht/sensebox_components.html"
-  },
-  {
-    "id": "rgb-led",
-    "name": "RGB-LED",
-    "src": "rgb-led.png",
-    "url": "https://sensebox.github.io/books-v2/blockly/de/uebersicht/sensebox_components.html"
-  },
-  {
-    "id": "sd-bee",
-    "name": "mSD-Bee",
-    "src": "sd-bee.png",
-    "url": "https://sensebox.github.io/books-v2/edu/de/komponenten/bees/sd.html"
-  },
-  {
-    "id": "senseboxmcu",
-    "name": "senseBox MCU",
-    "src": "senseboxmcu.png",
-    "url": "https://sensebox.github.io/books-v2/edu/de/komponenten/sensebox-mcu.html"
+    "url": ""
   },
   {
     "id": "usb-cable",
     "name": "USB-Kabel",
     "src": "usb-cable.png",
-    "url": "https://sensebox.github.io/books-v2/edu/de/komponenten/zubehoer/netzteil-und-usb-kabel.html"
+    "url": ""
+  },
+  {
+    "id": "oled",
+    "name": "OLED-Display",
+    "src": "oled.png",
+    "url": "https://docs.sensebox.de/hardware/zubehoer-display/"
+  },
+  {
+    "id": "hdc1080",
+    "name": "Temperatur und Luftfeuchtigkeitssensor",
+    "src": "hdc1080.png",
+    "url": "https://docs.sensebox.de/hardware/sensoren-temperatur-luftfeuchte/"
+  },
+  {
+    "id": "bmp280",
+    "name": "Luftdruck und Temperatursensor",
+    "src": "bmp280.png",
+    "url": "https://docs.sensebox.de/hardware/sensoren-luftdruck-temperatur/"
   },
   {
     "id": "veml6070",
     "name": "Helligkeit und UV-Sensor",
     "src": "veml6070.png",
-    "url": "https://sensebox.github.io/books-v2/blockly/de/uebersicht/sensebox_components.html"
+    "url": "https://docs.sensebox.de/hardware/sensoren-helligkeit-uv/"
+  },
+  {
+    "id": "co2",
+    "name": "CO2-Sensor(SCD30)",
+    "src": "scd30.png",
+    "url": "https://docs.sensebox.de/hardware/sensoren-co2/"
+  },
+  {
+    "id": "bme680",
+    "name": "Umweltsensor (BME680)",
+    "src": "sensors-bme.png",
+    "url": "https://docs.sensebox.de/hardware/sensoren-umweltsensor/"
+  },
+  {
+    "id": "feinstaub",
+    "name": "Feinstaubsensor",
+    "src": "feinstaub.png",
+    "url": "https://docs.sensebox.de/hardware/sensoren-feinstaub/"
+  },
+  {
+    "id": "gps",
+    "name": "GPS-Modul",
+    "src": "sensors-gps.png",
+    "url": "https://docs.sensebox.de/hardware/sensoren-gps/"
+  },
+  {
+    "id": "sd-bee",
+    "name": "mSD-Bee",
+    "src": "sd-bee.png",
+    "url": "https://docs.sensebox.de/hardware/bee-sd/"
   },
   {
     "id": "wifi-bee",
     "name": "WiFi-Bee",
     "src": "wifi-bee.png",
-    "url": "https://sensebox.github.io/books-v2/edu/de/komponenten/bees/wifi.html"
+    "url": "https://docs.sensebox.de/hardware/bee-wifi/"
+  },
+  {
+    "id": "lora-bee",
+    "name": "LoRa-Bee",
+    "src": "lora-bee.png",
+    "url": "https://docs.sensebox.de/hardware/bee-lora/"
+  },
+  {
+    "id": "button",
+    "name": "Knopf",
+    "src": "button.png",
+    "url": "https://docs.sensebox.de/hardware/sensoren-distanz/"
+  },
+  {
+    "id": "hc04",
+    "name": "Ultraschall-Distanzsensor",
+    "src": "hc04.png",
+    "url": "https://docs.sensebox.de/hardware/sensoren-distanz/"
+  },
+  {
+    "id": "ldr",
+    "name": "LDR",
+    "src": "ldr.png",
+    "url": ""
+  },
+  {
+    "id": "led",
+    "name": "LEDs",
+    "src": "led.png",
+    "url": ""
+  },
+  {
+    "id": "microphone",
+    "name": "Mikrofon",
+    "src": "microphone.png",
+    "url": "https://docs.sensebox.de/hardware/sensoren-mikro/"
+  },
+  {
+    "id": "piezo",
+    "name": "Piezo",
+    "src": "piezo.png",
+    "url": ""
+  },
+  {
+    "id": "rgb-led",
+    "name": "RGB-LED",
+    "src": "rgb-led.png",
+    "url": ""
+  },
+  {
+    "id": "jst-adapter",
+    "name": "JST-Adapterkabel",
+    "src": "jst-adapter.png",
+    "url": ""
+  },
+  {
+    "id": "jst-jst",
+    "name": "JST-JST Kabel",
+    "src": "jst-jst.png",
+    "url": ""
+  },
+  {
+    "id": "jumperwire",
+    "name": "Steckkabel",
+    "src": "jumperwire.png",
+    "url": ""
+  },
+  {
+    "id": "resistor-10kohm",
+    "name": "10 kOhm Widerstand",
+    "src": "resistor-10kohm.png",
+    "url": ""
+  },
+  {
+    "id": "resistor-470ohm",
+    "name": "470 Ohm Widerstand",
+    "src": "resistor-470ohm.png",
+    "url": ""
   }
-]
+]

src/data/tutorial/ErsteSchritte.json

@@ -1 +1,59 @@
-{"id":1602160534286,"title":"Erste Schritte","steps":[{"id":1,"type":"instruction","headline":"Erste Schritte","text":"In diesem Tutorial lernst du die ersten Schritte mit der senseBox kennen. Du erstellst ein erstes Programm, baust einen ersten Schaltkreis auf und lernst, wie du das Programm auf die senseBox MCU überträgst.","hardware":["senseboxmcu","led","breadboard","jst-adapter","resistor-470ohm"],"requirements":[]},{"id":2,"type":"instruction","headline":"Aufbau der Schaltung","text":"Stecke die LED auf das Breadboard und verbinde diese mithile des Widerstandes und dem JST Kabel mit dem Port Digital/Analog 1."},{"id":3,"type":"instruction","headline":"Programmierung","text":"Jedes Programm für die senseBox besteht aus zwei Funktionen. Die Setup () Funktion wird zu Begin einmalig ausgeführt und der Programmcode Schrittweise ausgeführt. Nachdem die Setup () Funktion durchlaufen worden ist wird der Programmcode aus der zweiten Funktion, der Endlosschleife, fortlaufend wiederholt.","xml":"<xml xmlns=\"https://developers.google.com/blockly/xml\">\n  <block type=\"arduino_functions\" id=\"QWW|$jB8+*EL;}|#uA\" deletable=\"false\" x=\"27\" y=\"16\"></block>\n</xml>"},{"id":4,"type":"instruction","headline":"Leuchten der LED","text":"Um nun die LED zum leuchten zu bringen wird folgender Block in die Endlosschleife eingefügt. Der Block bietet dir auszuwählen an welchen Pin die LED angeschlossen wurd und ob diese ein oder ausgeschaltet werden soll.","xml":"<xml xmlns=\"https://developers.google.com/blockly/xml\">\n  <block type=\"sensebox_led\" id=\"S_GEYN/`Z]?{5:aKp6e^\" x=\"21\" y=\"27\">\n    <field name=\"PIN\">1</field>\n    <field name=\"STAT\">HIGH</field>\n  </block>\n</xml>"},{"id":5,"type":"task","headline":"Aufgabe 1","text":"Verwende den zuvor kennengelernten Block, um die LED zum leuchten zu bringen.","xml":"<xml xmlns=\"https://developers.google.com/blockly/xml\">\n  <block type=\"arduino_functions\" id=\"QWW|$jB8+*EL;}|#uA\" deletable=\"false\" x=\"27\" y=\"16\">\n    <statement name=\"LOOP_FUNC\">\n      <block type=\"sensebox_led\" id=\"S#27sNt/*c:[Zv+YyzD9\">\n        <field name=\"PIN\">1</field>\n        <field name=\"STAT\">HIGH</field>\n      </block>\n    </statement>\n  </block>\n</xml>"},{"id":6,"type":"instruction","headline":"Programmcode übertragen","text":"Super! Du hast dein erstes Programm erstellt und kompiliert. In nächsten Schritt muss das Programm auf deine senseBox MCU übertragen werden. Schließe diese mithilfe des USB Kabel an deinem Computer an und drücke 2 mal schnell hintereinander auf den roten Reset Button, um die senseBox MCU in den Lernmodus zu versetzten. Die senseBox MCU erscheint nun als USB-Gerät in deinem Dateiexplorer. Kopiere anschließend das Programm auf die senseBox MCU.","media":{"youtube":"jzlOJ7Zuqqw"}}]}
+{
+    "id": 1602160534286,
+    "title": "Erste Schritte",
+    "steps": [
+        {
+            "id": 1,
+            "type": "instruction",
+            "headline": "Erste Schritte",
+            "text": "In diesem Tutorial lernst du die ersten Schritte mit der senseBox kennen. Du erstellst ein erstes Programm, baust einen ersten Schaltkreis auf und lernst, wie du das Programm auf die senseBox MCU überträgst.",
+            "hardware": [
+                "senseboxmcu",
+                "led",
+                "breadboard",
+                "jst-adapter",
+                "resistor-470ohm"
+            ],
+            "requirements": []
+        },
+        {
+            "id": 2,
+            "type": "instruction",
+            "headline": "Aufbau der Schaltung",
+            "text": "Stecke die LED auf das Breadboard und verbinde diese mithilfe des Widerstandes und dem JST Kabel mit dem Port Digital/Analog 1.\n",
+            "media": {
+                "picture": "tutorial_01.png"
+            }
+        },
+        {
+            "id": 3,
+            "type": "instruction",
+            "headline": "Programmierung",
+            "text": "Jedes Programm für die senseBox besteht aus zwei Funktionen. Die Setup () Funktion wird zu Begin einmalig ausgeführt und der Programmcode Schrittweise ausgeführt. Nachdem die Setup () Funktion durchlaufen worden ist wird der Programmcode aus der zweiten Funktion, der Endlosschleife, fortlaufend wiederholt.",
+            "xml": "<xml xmlns=\"https://developers.google.com/blockly/xml\">\n  <block type=\"arduino_functions\" id=\"QWW|$jB8+*EL;}|#uA\" deletable=\"false\" x=\"27\" y=\"16\"></block>\n</xml>"
+        },
+        {
+            "id": 4,
+            "type": "instruction",
+            "headline": "Leuchten der LED",
+            "text": "Um nun die LED zum leuchten zu bringen wird folgender Block in die Endlosschleife eingefügt. Der Block bietet dir auszuwählen an welchen Pin die LED angeschlossen wurd und ob diese ein oder ausgeschaltet werden soll.",
+            "xml": "<xml xmlns=\"https://developers.google.com/blockly/xml\">\n  <block type=\"sensebox_led\" id=\"S_GEYN/`Z]?{5:aKp6e^\" x=\"21\" y=\"27\">\n    <field name=\"PIN\">1</field>\n    <field name=\"STAT\">HIGH</field>\n  </block>\n</xml>"
+        },
+        {
+            "id": 5,
+            "type": "task",
+            "headline": "Aufgabe 1",
+            "text": "Verwende den zuvor kennengelernten Block, um die LED zum leuchten zu bringen.",
+            "xml": "<xml xmlns=\"https://developers.google.com/blockly/xml\">\n  <block type=\"arduino_functions\" id=\"QWW|$jB8+*EL;}|#uA\" deletable=\"false\" x=\"27\" y=\"16\">\n    <statement name=\"LOOP_FUNC\">\n      <block type=\"sensebox_led\" id=\"S#27sNt/*c:[Zv+YyzD9\">\n        <field name=\"PIN\">1</field>\n        <field name=\"STAT\">HIGH</field>\n      </block>\n    </statement>\n  </block>\n</xml>"
+        },
+        {
+            "id": 6,
+            "type": "instruction",
+            "headline": "Programmcode übertragen",
+            "text": "Super! Du hast dein erstes Programm erstellt und kompiliert. In nächsten Schritt muss das Programm auf deine senseBox MCU übertragen werden. Schließe diese mithilfe des USB Kabel an deinem Computer an und drücke 2 mal schnell hintereinander auf den roten Reset Button, um die senseBox MCU in den Lernmodus zu versetzten. Die senseBox MCU erscheint nun als USB-Gerät in deinem Dateiexplorer. Kopiere anschließend das Programm auf die senseBox MCU.",
+            "media": {
+                "youtube": "jzlOJ7Zuqqw"
+            }
+        }
+    ]
+}

src/data/tutorial/MesswerteAnDieOpenSenseMapSenden.json

@@ -0,0 +1,82 @@
+{
+    "id": 1605191033983,
+    "title": "Messwerte an die openSenseMap senden",
+    "steps": [
+        {
+            "id": 1,
+            "type": "instruction",
+            "headline": "Messwerte an die openSenseMap senden",
+            "text": "In diesem kurzen Tutorial lernt ihr wie Messwerte der senseBox an die [openSenseMap](https://opensensemap.org) gesendet werden können. Die openSenseMap ist das Datenportal für die senseBox und ermöglicht es euch, schnell und einfach eigene Messwerte zu speichern, zu analysieren und auszuwerten.",
+            "hardware": [
+                "hdc1080",
+                "senseboxmcu",
+                "wifi-bee",
+                "jst-jst"
+            ],
+            "requirements": [
+                1602160534286
+            ]
+        },
+        {
+            "id": 2,
+            "type": "instruction",
+            "headline": "Aufbau der Hardware",
+            "text": "Steckt das WiFi-Bee auf den Steckplatz XBEE1 und schließt den Temperatur- und Luftfeuchtigkeitssensor mit dem JST-JST Kabel an einen der fünf I2C Ports an. ",
+            "media": {
+                "picture": "WiFi-Bee.jpeg"
+            }
+        },
+        {
+            "id": 3,
+            "type": "instruction",
+            "headline": "Verbindung mit dem Wlan herstellen",
+            "text": "Im ersten Schritt muss eine Verbindung mit dem Wlan hergestellt werden. Verwende dazu folgenden Block im Setup und trage dein Netzwerkname und das Passwort ein.",
+            "xml": "<xml xmlns=\"https://developers.google.com/blockly/xml\">\n  <block type=\"arduino_functions\" id=\"QWW|$jB8+*EL;}|#uA\" x=\"27\" y=\"16\">\n    <statement name=\"SETUP_FUNC\">\n      <block type=\"sensebox_wifi\" id=\"A~*O2@X@}1TfhGb_KN36\">\n        <field name=\"SSID\">SSID</field>\n        <field name=\"Password\">Password</field>\n      </block>\n    </statement>\n  </block>\n</xml>"
+        },
+        {
+            "id": 4,
+            "type": "instruction",
+            "headline": "Registrieren auf der openSenseMap",
+            "text": "Gehe auf [opensensemap.org](https://opensensemap.org) und registriere eine neue senseBox mit dem Temperatur- und Luftfeuchtigkeitssensor. \n\nWie genau du deine senseBox registriert wird dir in folgendem Video ab Sekunde 38 erläutert.",
+            "media": {
+                "youtube": "Gz9RzoVp_NI"
+            }
+        },
+        {
+            "id": 5,
+            "type": "instruction",
+            "headline": "Registrieren auf der openSenseMap",
+            "text": "<iframe src=\"https://workshop.opensensemap.org\" title=\"openSenseMap\" width=\"80vW\" height=\"60vH\"></iframe>"
+        },
+        {
+            "id": 6,
+            "type": "instruction",
+            "headline": "Verbinden mit der openSenseMap",
+            "text": "Nach der Registrierung deiner senseBox auf der openSenseMap erhälst du eine senseBox ID und jeweils eine ID für jeden Sensorwert, den du übertragen möchtest. Im nächsten Schritt stellst du eine Verbindung mit der openSenseMap her und sendest die Messwerte. \n\nVerwende den Block \"Messintervall\" aus der Kategorie Zeit um in regelmäßigen Abständen einen Messwert zu übertragen. Der Block \"Verbinde mit openSenseMap\" stellt eine Verbindung mit der openSenseMap her. Trage dort deine senseBox ID und den API Schlüssel ein, den du nach der Registrierung erhalten hast.",
+            "xml": "<xml xmlns=\"https://developers.google.com/blockly/xml\">\n  <block type=\"arduino_functions\" id=\"QWW|$jB8+*EL;}|#uA\" x=\"27\" y=\"16\">\n    <statement name=\"SETUP_FUNC\">\n      <block type=\"sensebox_wifi\" id=\"hh2oxI#,_!%[6bXIS:{:\">\n        <field name=\"SSID\">SSID</field>\n        <field name=\"Password\">Password</field>\n      </block>\n    </statement>\n    <statement name=\"LOOP_FUNC\">\n      <block type=\"sensebox_interval_timer\" id=\"t9:|@yLFdDCfp]#$PJ7t\">\n        <field name=\"interval\">10000</field>\n        <statement name=\"DO\">\n          <block type=\"sensebox_osem_connection\" id=\"nYceK^douw=sKoU4=8_9\">\n            <mutation xmlns=\"http://www.w3.org/1999/xhtml\" type=\"Stationary\"></mutation>\n            <field name=\"host\">\"ingress.opensensemap.org\"</field>\n            <field name=\"SSL\">TRUE</field>\n            <field name=\"type\">Stationary</field>\n            <field name=\"BoxID\">senseBox ID</field>\n            <field name=\"access_token\">access_token</field>\n          </block>\n        </statement>\n      </block>\n    </statement>\n  </block>\n</xml>"
+        },
+        {
+            "id": 7,
+            "type": "instruction",
+            "headline": "Senden von Messwerten",
+            "text": "Verwende nun für jeden Messwert einen Block \"Sende Messwert an die openSenseMap\". Wenn du eine richtige senseBox ID eingetragen hast kannst du im Dropdown Menü das jeweilige Phänomen auswählen, welches du übertragen möchtest. Verbinde anschließend noch den entsprechenden Block für den Sensor oder die Variable, die du übertragen möchtest, um dein Programm zu vervollständigen. ",
+            "xml": "<xml xmlns=\"https://developers.google.com/blockly/xml\">\n  <block type=\"arduino_functions\" id=\"QWW|$jB8+*EL;}|#uA\" x=\"27\" y=\"16\">\n    <statement name=\"SETUP_FUNC\">\n      <block type=\"sensebox_wifi\" id=\"gV~69~Iuf*!nnsm@DoB.\">\n        <field name=\"SSID\">SSID</field>\n        <field name=\"Password\">Password</field>\n      </block>\n    </statement>\n    <statement name=\"LOOP_FUNC\">\n      <block type=\"sensebox_interval_timer\" id=\"HLG3G:N7i4CoWG?9_)On\">\n        <field name=\"interval\">10000</field>\n        <statement name=\"DO\">\n          <block type=\"sensebox_osem_connection\" id=\"Vys7VY`r0)$7p05NC6!7\">\n            <mutation xmlns=\"http://www.w3.org/1999/xhtml\" type=\"Stationary\"></mutation>\n            <field name=\"host\">\"ingress.opensensemap.org\"</field>\n            <field name=\"SSL\">TRUE</field>\n            <field name=\"type\">Stationary</field>\n            <field name=\"BoxID\"></field>\n            <field name=\"access_token\">access_token</field>\n            <statement name=\"DO\">\n              <block type=\"sensebox_send_to_osem\" id=\"rg=VOe|Wv1(x*Rn^:d-/\">\n                <field name=\"SensorID\">5f31034ea4a11c001bad7d45</field>\n                <value name=\"Value\">\n                  <block type=\"sensebox_sensor_temp_hum\" id=\"vDb(CT?_kdCdI/O*t0Cj\">\n                    <field name=\"NAME\">Temperature</field>\n                  </block>\n                </value>\n              </block>\n            </statement>\n          </block>\n        </statement>\n      </block>\n    </statement>\n  </block>\n</xml>"
+        },
+        {
+            "id": 8,
+            "type": "task",
+            "headline": "Messwerte an die openSenseMap senden",
+            "text": "Erstelle nun ein Programm, um die Messwerte für Temperatur- und Luftfeuchtigkeit an die openSenseMap zu übertragen. ",
+            "xml": "<xml xmlns=\"https://developers.google.com/blockly/xml\">\n  <block type=\"arduino_functions\" id=\"QWW|$jB8+*EL;}|#uA\" deletable=\"false\" x=\"27\" y=\"16\">\n    <statement name=\"SETUP_FUNC\">\n      <block type=\"sensebox_wifi\" id=\"r|P6yS+[u6?Unw8Nyw]i\">\n        <field name=\"SSID\">SSID</field>\n        <field name=\"Password\">Password</field>\n      </block>\n    </statement>\n    <statement name=\"LOOP_FUNC\">\n      <block type=\"sensebox_interval_timer\" id=\"8ccf6$uB.o,Y|v%ex]H_\">\n        <field name=\"interval\">10000</field>\n        <statement name=\"DO\">\n          <block type=\"sensebox_osem_connection\" id=\"/rUZp}E^#:-?}a_8X-BF\">\n            <mutation xmlns=\"http://www.w3.org/1999/xhtml\" type=\"Stationary\"></mutation>\n            <field name=\"host\">\"ingress.opensensemap.org\"</field>\n            <field name=\"SSL\">TRUE</field>\n            <field name=\"type\">Stationary</field>\n            <field name=\"BoxID\">5f31034ea4a11c001bad7d43</field>\n            <field name=\"access_token\">access_token</field>\n            <statement name=\"DO\">\n              <block type=\"sensebox_send_to_osem\" id=\"Z7N5aDn-czWBSxgysXxw\">\n                <field name=\"SensorID\">5f31034ea4a11c001bad7d45</field>\n                <value name=\"Value\">\n                  <block type=\"sensebox_sensor_temp_hum\" id=\"S{JRtYYWOt^;[F-Et4{F\">\n                    <field name=\"NAME\">Temperature</field>\n                  </block>\n                </value>\n                <next>\n                  <block type=\"sensebox_send_to_osem\" id=\"Is~x*=Ho.W/;vS~S~/qM\">\n                    <field name=\"SensorID\">5f31034ea4a11c001bad7d44</field>\n                    <value name=\"Value\">\n                      <block type=\"sensebox_sensor_temp_hum\" id=\"GJF2zfVd)p4=*RF=3U);\">\n                        <field name=\"NAME\">Humidity</field>\n                      </block>\n                    </value>\n                  </block>\n                </next>\n              </block>\n            </statement>\n          </block>\n        </statement>\n      </block>\n    </statement>\n  </block>\n</xml>"
+        },
+        {
+            "id": 9,
+            "type": "instruction",
+            "headline": "Programmcode übertragen",
+            "text": "In nächsten Schritt muss das Programm auf deine senseBox MCU übertragen werden. Schließe diese mithilfe des USB Kabel an deinem Computer an und drücke 2 mal schnell hintereinander auf den roten Reset Button, um die senseBox MCU in den Lernmodus zu versetzten. Die senseBox MCU erscheint nun als USB-Gerät in deinem Dateiexplorer. Kopiere anschließend das Programm auf die senseBox MCU.",
+            "media": {
+                "youtube": "jzlOJ7Zuqqw"
+            }
+        }
+    ]
+}

src/data/tutorials.js

@@ -3,7 +3,8 @@ let tutorials = [
     require('./tutorial/Schleifen.json'),
     require('./tutorial/Wenn-DannBedingungen.json'),
     require('./tutorial/VerwendungVonVariablen.json'),
-    require('./tutorial/AnzeigeVonMesswertenAufDemDisplay.json')
+    require('./tutorial/AnzeigeVonMesswertenAufDemDisplay.json'),
+    require('./tutorial/MesswerteAnDieOpenSenseMapSenden.json')
 ]
 
 module.exports = tutorials;