Merge pull request #1289 from hackmdio/feature/embed-geolocation

Support embedding geolocation data

lib/csp.js

@@ -7,7 +7,7 @@ var defaultDirectives = {
   defaultSrc: ['\'self\''],
   scriptSrc: ['\'self\'', 'vimeo.com', 'https://gist.github.com', 'www.slideshare.net', 'https://query.yahooapis.com', '\'unsafe-eval\''],
   // ^ TODO: Remove unsafe-eval - webpack script-loader issues https://github.com/hackmdio/codimd/issues/594
-  imgSrc: ['*'],
+  imgSrc: ['*', 'data:'],
   styleSrc: ['\'self\'', '\'unsafe-inline\'', 'https://github.githubassets.com'], // unsafe-inline is required for some libs, plus used in views
   fontSrc: ['\'self\'', 'data:', 'https://public.slidesharecdn.com'],
   objectSrc: ['*'], // Chrome PDF viewer treats PDFs as objects :/

package-lock.json

@@ -8750,6 +8750,12 @@
         }
       }
     },
+    "leaflet": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.6.0.tgz",
+      "integrity": "sha512-CPkhyqWUKZKFJ6K8umN5/D2wrJ2+/8UIpXppY7QDnUZW5bZL5+SEI2J7GBpwh4LIupOKqbNSQXgqmrEJopHVNQ==",
+      "dev": true
+    },
     "left-pad": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/left-pad/-/left-pad-1.3.0.tgz",

package.json

@@ -177,6 +177,7 @@
     "imports-loader": "~0.8.0",
     "intelli-espower-loader": "~1.0.1",
     "jsonlint": "~1.6.2",
+    "leaflet": "~1.6.0",
     "less": "~3.9.0",
     "less-loader": "~4.1.0",
     "markdown-it-ruby": "^0.1.1",

public/css/extra.css

@@ -79,6 +79,10 @@
     width: 100%;
     height: 100%;
 }
+.geo-map {
+  width: 100%;
+  height: 250px;
+}
 
 .MJX_Assistive_MathML {
     display: none;

public/css/markdown.css

@@ -127,6 +127,7 @@
 .markdown-body pre.graphviz,
 .markdown-body pre.mermaid,
 .markdown-body pre.abc,
+.markdown-body pre.geo,
 .markdown-body pre.vega {
     text-align: center;
     background-color: inherit;

public/css/slide.css

@@ -224,6 +224,7 @@ pre.sequence-diagram,
 pre.graphviz,
 pre.mermaid,
 pre.abc,
+pre.geo,
 pre.vega {
     text-align: center;
     background-color: white;

public/js/extra.js

@@ -1,5 +1,5 @@
 /* eslint-env browser, jquery */
-/* global moment, serverurl, plantumlServer */
+/* global moment, serverurl, plantumlServer, L */
 
 import Prism from 'prismjs'
 import hljs from 'highlight.js'
@@ -453,6 +453,48 @@ export function finishView (view) {
       console.warn(err)
     }
   })
+  // geo map
+  view.find('div.geo.raw').removeClass('raw').each(async function (key, value) {
+    const $elem = $(value).parent().parent()
+    const $value = $(value)
+    const content = $value.text()
+    $value.unwrap()
+
+    try {
+      let position, zoom
+      if (content.match(/^[\d.,\s]+$/)) {
+        const [lng, lat, zoo] = content.split(',').map(parseFloat)
+        zoom = zoo
+        position = [lat, lng]
+      } else {
+        // parse value as address
+        const data = await fetch(`https://nominatim.openstreetmap.org/search?q=${encodeURIComponent(content)}&format=json`).then(r => r.json())
+        if (!data || !data.length) {
+          throw new Error('Location not found')
+        }
+        const { lat, lon } = data[0]
+        position = [lat, lon]
+      }
+      $elem.html(`<div class="geo-map"></div>`)
+      const map = L.map($elem.find('.geo-map')[0]).setView(position, zoom || 16)
+
+      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        attribution: '<a href="https://www.openstreetmap.org/">OSM</a>',
+        maxZoom: 18
+      }).addTo(map)
+      L.marker(position, {
+        icon: L.icon({
+          iconUrl: `${serverurl}/build/leaflet/images/marker-icon.png`,
+          shadowUrl: `${serverurl}/build/leaflet/images/marker-shadow.png`
+        })
+      }).addTo(map)
+      $elem.addClass('geo')
+    } catch (err) {
+      $elem.append(`<div class="alert alert-warning">${escapeHTML(err)}</div>`)
+      console.warn(err)
+    }
+  })
+
   // image href new window(emoji not included)
   const images = view.find('img.raw[src]').removeClass('raw')
   images.each((key, value) => {
@@ -1013,6 +1055,8 @@ function highlightRender (code, lang) {
     return `<div class="abc raw">${code}</div>`
   } else if (lang === 'vega') {
     return `<div class="vega raw">${code}</div>`
+  } else if (lang === 'geo') {
+    return `<div class="geo raw">${code}</div>`
   }
   const result = {
     value: code

public/js/index.js

@@ -101,7 +101,7 @@ var cursorActivityDebounce = 50
 var cursorAnimatePeriod = 100
 var supportContainers = ['success', 'info', 'warning', 'danger', 'spoiler']
 var supportCodeModes = ['javascript', 'typescript', 'jsx', 'htmlmixed', 'htmlembedded', 'css', 'xml', 'clike', 'clojure', 'ruby', 'python', 'shell', 'php', 'sql', 'haskell', 'coffeescript', 'yaml', 'pug', 'lua', 'cmake', 'nginx', 'perl', 'sass', 'r', 'dockerfile', 'tiddlywiki', 'mediawiki', 'go', 'gherkin'].concat(hljs.listLanguages())
-var supportCharts = ['sequence', 'flow', 'graphviz', 'mermaid', 'abc', 'plantuml', 'vega']
+var supportCharts = ['sequence', 'flow', 'graphviz', 'mermaid', 'abc', 'plantuml', 'vega', 'geo']
 var supportHeaders = [
   {
     text: '# h1',

public/views/codimd/foot.ejs

@@ -24,6 +24,7 @@
 <script src="https://cdnjs.cloudflare.com/ajax/libs/vega/5.9.1/vega.min.js" integrity="sha256-xVmd2OiOTh73s2iPfGy1DNyu/lCKvaDto452MU1O+xs=" crossorigin="anonymous" defer></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/vega-lite/4.4.0/vega-lite.min.js" integrity="sha256-ollz/GSuG0/f7aV4v8LGDYxPs4G2DwEk9+hALicqp9I=" crossorigin="anonymous" defer></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/vega-embed/6.2.2/vega-embed.min.js" integrity="sha256-AW13lGYqQzWT9PymwqUEJqQHaz9ntM5m5jQVkvtzja4=" crossorigin="anonymous" defer></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.6.0/leaflet.js" integrity="sha256-fNoRrwkP2GuYPbNSJmMJOCyfRB2DhPQe0rGTgzRsyso=" crossorigin="anonymous" defer></script>
 <%- include ../build/index-scripts %>
 <% } else { %>
 <script src="<%- serverURL %>/build/MathJax/MathJax.js" defer></script>

public/views/codimd/head.ejs

@@ -13,6 +13,7 @@
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/4.9.0/bootstrap-social.min.css" integrity="sha256-02JtFTurpwBjQJ6q13iJe82/NF0RbZlJroDegK5g87Y=" crossorigin="anonymous" />
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css" integrity="sha256-3iu9jgsy9TpTwXKb7bNQzqWekRX7pPK+2OLj3R922fo=" crossorigin="anonymous" />
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@hackmd/emojify.js@2.1.0/dist/css/basic/emojify.min.css" integrity="sha256-UOrvMOsSDSrW6szVLe8ZDZezBxh5IoIfgTwdNDgTjiU=" crossorigin="anonymous" />
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.6.0/leaflet.css" integrity="sha256-SHMGCYmST46SoyGgo4YR/9AlK1vf3ff84Aq9yK4hdqM=" crossorigin="anonymous" />
 <%- include ../build/index-header %>
 <%- include ../shared/polyfill %>
 <% } else { %>

public/views/pretty.ejs

@@ -22,6 +22,7 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fork-awesome/1.1.3/css/fork-awesome.min.css" integrity="sha256-ZhApazu+kejqTYhMF+1DzNKjIzP7KXu6AzyXcC1gMus=" crossorigin="anonymous" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css" integrity="sha256-3iu9jgsy9TpTwXKb7bNQzqWekRX7pPK+2OLj3R922fo=" crossorigin="anonymous" />
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@hackmd/emojify.js@2.1.0/dist/css/basic/emojify.min.css" integrity="sha256-UOrvMOsSDSrW6szVLe8ZDZezBxh5IoIfgTwdNDgTjiU=" crossorigin="anonymous" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.6.0/leaflet.css" integrity="sha256-SHMGCYmST46SoyGgo4YR/9AlK1vf3ff84Aq9yK4hdqM=" crossorigin="anonymous" />
     <%- include build/pretty-header %>
     <%- include shared/polyfill %>
   <% } else { %>
@@ -93,6 +94,7 @@
 <script src="https://cdnjs.cloudflare.com/ajax/libs/vega/5.9.1/vega.min.js" integrity="sha256-xVmd2OiOTh73s2iPfGy1DNyu/lCKvaDto452MU1O+xs=" crossorigin="anonymous" defer></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/vega-lite/4.4.0/vega-lite.min.js" integrity="sha256-ollz/GSuG0/f7aV4v8LGDYxPs4G2DwEk9+hALicqp9I=" crossorigin="anonymous" defer></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/vega-embed/6.2.2/vega-embed.min.js" integrity="sha256-AW13lGYqQzWT9PymwqUEJqQHaz9ntM5m5jQVkvtzja4=" crossorigin="anonymous" defer></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.6.0/leaflet.js" integrity="sha256-fNoRrwkP2GuYPbNSJmMJOCyfRB2DhPQe0rGTgzRsyso=" crossorigin="anonymous" defer></script>
 <%- include build/pretty-scripts %>
 <% } else { %>
 <script src="<%- serverURL %>/build/MathJax/MathJax.js" defer></script>

public/views/slide.ejs

@@ -20,6 +20,7 @@
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css" integrity="sha256-3iu9jgsy9TpTwXKb7bNQzqWekRX7pPK+2OLj3R922fo=" crossorigin="anonymous" />
         <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@3.9.2/css/reveal.min.css" integrity="sha256-h2NhWerL2k7KAzo6YqYMo1T5B6+QT2Bb/CprRV2aW20=" crossorigin="anonymous" />
         <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@hackmd/emojify.js@2.1.0/dist/css/basic/emojify.min.css" integrity="sha256-UOrvMOsSDSrW6szVLe8ZDZezBxh5IoIfgTwdNDgTjiU=" crossorigin="anonymous" />
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.6.0/leaflet.css" integrity="sha256-SHMGCYmST46SoyGgo4YR/9AlK1vf3ff84Aq9yK4hdqM=" crossorigin="anonymous" />
         <%- include build/slide-header %>
         <%- include shared/polyfill %>
         <% } else { %>
@@ -108,6 +109,7 @@
         <script src="https://cdnjs.cloudflare.com/ajax/libs/vega/5.9.1/vega.min.js" integrity="sha256-xVmd2OiOTh73s2iPfGy1DNyu/lCKvaDto452MU1O+xs=" crossorigin="anonymous" defer></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/vega-lite/4.4.0/vega-lite.min.js" integrity="sha256-ollz/GSuG0/f7aV4v8LGDYxPs4G2DwEk9+hALicqp9I=" crossorigin="anonymous" defer></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/vega-embed/6.2.2/vega-embed.min.js" integrity="sha256-AW13lGYqQzWT9PymwqUEJqQHaz9ntM5m5jQVkvtzja4=" crossorigin="anonymous" defer></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.6.0/leaflet.js" integrity="sha256-fNoRrwkP2GuYPbNSJmMJOCyfRB2DhPQe0rGTgzRsyso=" crossorigin="anonymous" defer></script>
         <%- include build/slide-scripts %>
         <% } else { %>
         <script src="<%- serverURL %>/build/MathJax/MathJax.js" defer></script>

webpack.common.js

@@ -181,6 +181,11 @@ module.exports = {
         from: '*',
         to: 'dictionary-de-ch/'
       },
+      {
+        context: path.join(__dirname, 'node_modules/leaflet'),
+        from: 'dist',
+        to: 'leaflet'
+      }
     ]),
     new MiniCssExtractPlugin()
   ],
@@ -257,7 +262,8 @@ module.exports = {
       path.join(__dirname, 'node_modules/bootstrap/dist/css/bootstrap.min.css'),
       path.join(__dirname, 'node_modules/fork-awesome/css/fork-awesome.min.css'),
       path.join(__dirname, 'public/css/bootstrap-social.css'),
-      path.join(__dirname, 'node_modules/ionicons/css/ionicons.min.css')
+      path.join(__dirname, 'node_modules/ionicons/css/ionicons.min.css'),
+      path.join(__dirname, 'node_modules/leaflet/dist/leaflet.css')
     ],
     'index-pack': [
       'babel-polyfill',
@@ -285,6 +291,7 @@ module.exports = {
       'script-loader!vega-embed',
       'expose-loader?io!socket.io-client',
       'expose-loader?RevealMarkdown!reveal-markdown',
+      'expose-loader?L!leaflet',
       path.join(__dirname, 'public/js/index.js')
     ],
     pretty: [
@@ -303,7 +310,8 @@ module.exports = {
     'pretty-styles-pack': [
       path.join(__dirname, 'node_modules/bootstrap/dist/css/bootstrap.min.css'),
       path.join(__dirname, 'node_modules/fork-awesome/css/fork-awesome.min.css'),
-      path.join(__dirname, 'node_modules/ionicons/css/ionicons.min.css')
+      path.join(__dirname, 'node_modules/ionicons/css/ionicons.min.css'),
+      path.join(__dirname, 'node_modules/leaflet/dist/leaflet.css')
     ],
     'pretty-pack': [
       'babel-polyfill',
@@ -323,6 +331,7 @@ module.exports = {
       'script-loader!vega-lite',
       'script-loader!vega-embed',
       'expose-loader?RevealMarkdown!reveal-markdown',
+      'expose-loader?L!leaflet',
       path.join(__dirname, 'public/js/pretty.js')
     ],
     slide: [
@@ -341,7 +350,8 @@ module.exports = {
     ],
     'slide-styles-pack': [
       path.join(__dirname, 'node_modules/fork-awesome/css/fork-awesome.min.css'),
-      path.join(__dirname, 'node_modules/ionicons/css/ionicons.min.css')
+      path.join(__dirname, 'node_modules/ionicons/css/ionicons.min.css'),
+      path.join(__dirname, 'node_modules/leaflet/dist/leaflet.css')
     ],
     'slide-pack': [
       'babel-polyfill',
@@ -366,6 +376,7 @@ module.exports = {
       'script-loader!vega-embed',
       'expose-loader?Reveal!reveal.js',
       'expose-loader?RevealMarkdown!reveal-markdown',
+      'expose-loader?L!leaflet',
       path.join(__dirname, 'public/js/slide.js')
     ]
   },