Dataset recommendations (#243)

package.json

@@ -10,6 +10,10 @@
     "build": "webpack -p --progress --config webpack.config.prod.js"
   },
   "devDependencies": {
+    "babel-core": "^6.10.4",
+    "babel-loader": "^6.2.4",
+    "babel-plugin-transform-runtime": "^6.8.0",
+    "babel-preset-es2015": "^6.9.0",
     "css-loader": "^0.23.1",
     "extract-text-webpack-plugin": "^1.0.1",
     "file-loader": "^0.8.5",

theme/js/dataset-recommendations.js

@@ -0,0 +1,63 @@
+const recoUrl = 'https://raw.githubusercontent.com/etalab/datasets_reco/master/reco_json/';
+const maxRecos = 2;
+
+function getDatasetId() {
+    const selector = '#json_ld';
+    const dataset = JSON.parse(document.querySelector(selector).text);
+    return dataset && dataset['@id'];
+}
+
+function addRecos(recos) {
+    const recoContainer = document.getElementById('dataset-recommendations-container');
+    let recoChildContainer, recoChildEmbed;
+    recos.splice(0, maxRecos).forEach((reco) => {
+        recoChildContainer = document.createElement('div');
+        recoChildContainer.classList.add('recommendation');
+
+        recoChildEmbed = document.createElement('div');
+        recoChildEmbed.setAttribute('data-udata-dataset-id', reco[0]);
+
+        recoChildContainer.appendChild(recoChildEmbed);
+        recoContainer.appendChild(recoChildContainer);
+    });
+}
+
+function addWidgetScript() {
+    const scriptElm = document.createElement('script');
+    scriptElm.type = 'application/javascript';
+    scriptElm.src = '/static/widgets.js';
+    scriptElm.id = 'udata';
+    scriptElm.onload = loadDatasets;
+    document.body.appendChild(scriptElm);
+}
+
+function loadDatasets() {
+    udataScript.loadDatasets();
+}
+
+function fetchRecos(datasetId) {
+    fetch(recoUrl + datasetId + '.json').then((response) => {
+        if(response.ok) {
+            return response.json();
+        }
+    }).then((recos) => {
+        recos = recos && recos[datasetId];
+        if (recos) {
+            addRecos(recos);
+            addWidgetScript();
+            const recoParent = document.getElementById('dataset-recommendations');
+            recoParent.style.display = 'block';
+        }
+    }).catch((err) => {
+        console.log('Error while fetching recommendations:', err);
+    });
+}
+
+global.udataDatasetRecos = {
+    load() {
+        const datasetId = getDatasetId();
+        if (datasetId) {
+            fetchRecos(datasetId);
+        }
+    }
+}

theme/less/gouvfr-dataset-recommendations.less

@@ -0,0 +1,23 @@
+#dataset-recommendations {
+    display: none;
+    .dataset-card {
+        margin: 0 0 1em 0 !important;
+    }
+
+    .recommendation {
+        margin-bottom: 1em;
+    }
+
+    @media only screen and (min-device-width: 1200px){
+
+        #dataset-recommendations-container {
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+        }
+
+        .recommendation {
+            width: 405px;
+        }
+    }
+}

theme/less/gouvfr.less

@@ -14,6 +14,7 @@
 @import "gouvfr/community";
 
 @import "gouvfr-dataset";
+@import "gouvfr-dataset-recommendations";
 @import "gouvfr-reuse";
 @import "gouvfr-org";
 @import "gouvfr-topic";

udata_gouvfr/theme/templates/dataset/display.html

@@ -1,3 +1,12 @@
 {% extends 'dataset/display.html' %}
 
 {% set community_subtitle = _('Explore with %(certifier)s', certifier=config.SITE_TITLE ) %}
+
+{% block left_column_bottom %}
+<!-- dataset recommendations -->
+<script src="{{ theme_static('dataset-recommendations.js') }}" type="text/javascript" onload="udataDatasetRecos.load()"></script>
+<div id="dataset-recommendations" class="hidden-xs">
+    <h3>{{ _('See also') }}</h3>
+    <div id="dataset-recommendations-container"></div>
+</div>
+{% endblock %}

webpack.config.js

@@ -14,6 +14,7 @@ module.exports = {
     entry: {
         theme: "theme",
         admin: "admin",
+        "dataset-recommendations": "js/dataset-recommendations.js",
     },
     output: {
         path: static_path,
@@ -32,8 +33,17 @@ module.exports = {
             {test: /\.json$/, loader: "json"},
             {test: /\.html$/, loader: "html"},
             {test: /\.(woff|svg|ttf|eot|otf)([\?]?.*)$/, exclude: /img/, loader: "file?name=[name].[ext]"},
+            {test: /\.js$/, loader: 'babel-loader', include: [
+                    path.resolve(source_path, 'js'),
+                ]
+            }
         ]
     },
+    babel: {
+        presets: ['es2015'],
+        comments: false,
+        plugins: ['transform-runtime']
+    },
     plugins: [
         new ExtractTextPlugin('[name].css'),
         require('webpack-fail-plugin'),