feat(ODX-1): update snippets theme for guided tutorial (#750)

* feat(ODX-1): update snippets theme

* feat(ODX-1): fix integration + js

* feat(ODX-1): fix

* feat(ODX-1): fix

* feat(ODX-1): fix

* feat(ODX-1): fix

* Update src/partials/guided-tutorials.handlebars

Co-authored-by: Thomas Galvaing <thomas.galvaing@akeneo.com>

Co-authored-by: Samuel Gomis <samuel.gomis@getakeneo.com>
Co-authored-by: Thomas Galvaing <thomas.galvaing@akeneo.com>

package.json

@@ -6,9 +6,10 @@
   "dependencies": {
     "bootstrap": "3.4.1",
     "font-awesome": "4.7.0",
+    "isotope-layout": "3.0.6",
     "jquery": "3.5.1",
     "lato-font": "3.0.0",
-    "isotope-layout": "3.0.6"
+    "prismjs": "^1.29.0"
   },
   "devDependencies": {
     "del": "2.2.2",

src/partials/guided-tutorials.handlebars

@@ -5,4 +5,27 @@
             {{{mainContent}}}
         </div>
     </div>
+    <script type="text/javascript">
+        $( document ).ready(function() {
+            $('.code-tabs li:first-child').addClass('active');
+        });
+        function copySnippetContent(event){
+            const copyToClipboard = $(this);
+            copyToClipboard.text("Copied!");
+            copyToClipboard.addClass("copied");
+            setTimeout(function() {
+                copyToClipboard.removeClass('copied');
+                copyToClipboard.text("Copy");
+            }, 3000);
+
+            const parentTextContent = event.target.parentElement.firstChild.innerText;
+            navigator.clipboard.writeText(parentTextContent);
+        }
+        $( "pre" ).append( `<span class="copy-to-clipboard-button">Copy</span>`);
+        $('.copy-to-clipboard-button').click(copySnippetContent);
+        $('.code-tabs li').click(function(){
+            $(this).parent().children().removeClass('active');
+            $(this).addClass('active');
+        });
+    </script>
 {{/layout}}

src/partials/layout.handlebars

@@ -9,6 +9,7 @@
     <script src='/js/bootstrap.min.js'></script>
     <script src="/js/isotope.pkgd.min.js"></script>
     <link rel="icon" type="image/png" href="/img/akene36.png">
+    <link rel="stylesheet" href="/css/prism-okaidia.css">
     <link rel="stylesheet" href="/css/variables.css">
     <link rel="stylesheet" href="/css/font-awesome.min.css">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css">