Merge pull request #56 from atomiks/codepen

[FEATURE] Open in Codepen

src/css/components/buttons.scss

@@ -0,0 +1,76 @@
+.btn {
+  display: inline-block;
+  position: relative;
+  top: -1px;
+  font-weight: bold;
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  color: #8385aa;
+  white-space: nowrap;
+  border: 1px solid #c8cbf2;
+  border-radius: 2px;
+  vertical-align: middle;
+  line-height: 2;
+  padding: 0 0.5rem;
+  margin-right: 0.5rem;
+  transition: all 0.1s ease-out;
+  outline: 0;
+
+  &.is-large {
+    font-size: 0.95rem;
+    border-radius: 0.2rem;
+
+    .feather {
+      top: -2px;
+      width: 18px;
+      height: 18px;
+    }
+  }
+
+  .feather {
+    vertical-align: middle;
+    margin-right: 0.25rem;
+    position: relative;
+    top: -1px;
+    width: 14px;
+    height: 14px;
+  }
+}
+
+button.btn {
+  user-select: none;
+  cursor: pointer;
+  margin-bottom: 1rem;
+  margin-right: 1rem;
+  background: white;
+
+  &:hover {
+    background: #8385aa;
+    border-color: #8385aa;
+    color: white;
+  }
+
+  &.focus-visible:focus {
+    box-shadow: 0 0 0 0.25rem transparentize(#8385aa, 0.5);
+  }
+
+  &:active {
+    box-shadow: inset 0 0.1rem 0.1rem 0.1rem rgba(0, 0, 0, 0.2);
+    background: darken(#8385aa, 10);
+    border-color: darken(#8385aa, 10);
+  }
+
+  &.is-active {
+    background: #7983ff;
+    border-color: #7983ff;
+    color: white;
+
+    &.focus-visible:focus {
+      box-shadow: 0 0 0 0.25rem transparentize(#7983ff, 0.5);
+    }
+  }
+
+  &.codepen-btn {
+    margin-top: 0.5rem;
+  }
+}

src/css/index.scss

@@ -5,3 +5,4 @@
 @import './components/snippet.scss';
 @import './components/back-to-top-button.scss';
 @import './components/tags.scss';
+@import './components/buttons.scss';

src/js/components/CodepenCopy.js

@@ -0,0 +1,28 @@
+import { selectAll } from '../deps/utils'
+
+const snippets = selectAll('.snippet')
+snippets.forEach(snippet => {
+  var codepenForm = document.createElement('form');
+  codepenForm.action = 'https://codepen.io/pen/define';
+  codepenForm.method = 'POST';
+  codepenForm.target = '_blank';
+  var codepenInput = document.createElement('input');
+  codepenInput.type = 'hidden';
+  codepenInput.name = 'data';
+  var codepenButton = document.createElement('button');
+  codepenButton.classList = 'btn is-large codepen-btn';
+  codepenButton.innerHTML = '<i data-feather="eye"></i>View on Codepen';
+  var css = snippet.querySelector('pre code.lang-css');
+  var html = snippet.querySelector('pre code.lang-html');
+  var js = snippet.querySelector('pre code.lang-js');
+  var data = {
+    css : css.textContent,
+    title: snippet.querySelector('h3 > span').textContent,
+    html: html ? html.textContent : '',
+    js: js ? js.textContent : ''
+  }
+  codepenInput.value = JSON.stringify(data);
+  codepenForm.appendChild(codepenInput);
+  codepenForm.appendChild(codepenButton);
+  snippet.insertBefore(codepenForm, snippet.querySelector('.snippet-demo').nextSibling);
+});

src/js/index.js

@@ -17,3 +17,4 @@ import Sidebar from './components/Sidebar'
 import BackToTopButton from './components/BackToTopButton'
 import Tag from './components/Tag'
 import Snippet from './components/Snippet'
+import CodepenCopy from './components/CodepenCopy'