Skip to content
Permalink
Browse files

Snippet refactoring

  • Loading branch information...
karreiro committed Apr 8, 2019
1 parent a963f42 commit 8741ef7331498f927d5de8c41eeb04a75f55dd8f
Showing with 203 additions and 16 deletions.
  1. +1 −0 _includes/head.html
  2. +1 −1 _includes/header.html
  3. +77 −0 _layouts/snippet.html
  4. +99 −15 _sass/_Code.sass
  5. +17 −0 _sass/_Snippet.sass
  6. +1 −0 _sass/main.sass
  7. +2 −0 assets/js/highlight.min.js
  8. +5 −0 snippet.md
@@ -23,6 +23,7 @@
<link rel="canonical" href="{{ page.url | replace:'index.html','' | absolute_url }}">
<link rel="alternate" type="application/rss+xml" title="{{ site.title | escape }}"
href="{{ '/feed.xml' | relative_url }}">
<script src="/assets/js/highlight.min.js"></script>
<script src="/assets/js/typed.min.js"></script>

{% if jekyll.environment == 'production' and site.google_analytics %}
@@ -15,7 +15,7 @@
{% if page_paths %}
{% for path in page_paths %}
{% assign my_page = site.pages | where: "path", path | first %}
{% if my_page.title %}
{% if my_page.title and my_page.name != 'snippet.md' %}
<a href="{{ my_page.url | relative_url }}">
{{ my_page.title | escape }}
</a>
@@ -0,0 +1,77 @@
---
layout: default
---

<div id="snippet">
<div class="row">
<div class="column column-50">
<h3>Code</h3>
</div>
<div class="column column-50">
<h3>Preview</h3>
</div>
</div>

<div class="row">
<div class="column column-50">
<div class="highlighter-rouge">
<div class="highlight">
<pre class="highlight">
<code id="code" class="html"></code>
</pre>
</div>
</div>
</div>
<div class="column column-50">
<iframe id="livePreview"></iframe>
</div>
</div>
</div>

<script type="text/javascript">
(function () {
const gistId = new URLSearchParams(window.location.search).get('gist_id');
const snippet = document.querySelector('#snippet');
const livePreview = document.querySelector('#livePreview');
const code = document.querySelector('#code');
function showLivePreview(content) {
const livePreviewDocument = livePreview.contentWindow.document;
livePreviewDocument.open();
livePreviewDocument.write(content);
livePreviewDocument.close();
}
function showHighlightedCode(content) {
code.innerHTML = hljs.highlightAuto(content).value;
}
function showPreview(content) {
showLivePreview(content);
showHighlightedCode(content);
snippet.hidden = false;
}
snippet.hidden = true;
fetch('https://api.github.com/gists/' + gistId)
.then(function (res) {
return res.json().then(function (body) {
if (res.status === 200) {
return body;
}
});
})
.then(function (info) {
const fileName = Object.keys(info.files)[ 0 ];
const content = info.files[ fileName ].content;
showPreview(content);
})
.catch(function (err) {
console.log(err)
window.location.href = '/404.html';
});
}());
</script>
@@ -3,20 +3,104 @@
// ––––––––––––––––––––––––––––––––––––––––––––––––––

code
background: $color-tertiary
border-radius: .4rem
font-size: 86%
margin: 0 .2rem
padding: .2rem .5rem
white-space: nowrap
background: #F7F7F7
border-radius: .4rem
font-size: 86%
margin: 0 .2rem
padding: .2rem .5rem
white-space: nowrap

pre
background: $color-tertiary
border-left: .3rem solid $color-primary
overflow-y: hidden

& > code
border-radius: 0
display: block
padding: 1rem 1.5rem
white-space: pre
background: #F7F7F7
border-left: .3rem solid $color-primary
overflow-y: hidden

& > code
opacity: .9
border-radius: 0
display: block
padding: 1rem 1.5rem
white-space: pre

.hljs
display: block
overflow-x: auto
padding: 0.5em
background: #fff

.hljs
display: block
overflow-x: auto
padding: 0.5em
color: #333
background: #f8f8f8

.hljs-comment,
.hljs-quote
color: #998
font-style: italic

.hljs-keyword,
.hljs-selector-tag,
.hljs-subst
color: #333
font-weight: bold

.hljs-number,
.hljs-literal,
.hljs-variable,
.hljs-template-variable,
.hljs-tag .hljs-attr
color: #008080

.hljs-string,
.hljs-doctag
color: #d14

.hljs-title,
.hljs-section,
.hljs-selector-id
color: #900
font-weight: bold

.hljs-subst
font-weight: normal

.hljs-type,
.hljs-class .hljs-title
color: #458
font-weight: bold

.hljs-tag,
.hljs-name,
.hljs-attribute
color: #000080
font-weight: normal

.hljs-regexp,
.hljs-link
color: #009926

.hljs-symbol,
.hljs-bullet
color: #990073

.hljs-built_in,
.hljs-builtin-name
color: #0086b3

.hljs-meta
color: #999
font-weight: bold

.hljs-deletion
background: #fdd

.hljs-addition
background: #dfd

.hljs-emphasis
font-style: italic

.hljs-strong
font-weight: bold
@@ -0,0 +1,17 @@

// Snippet
// ––––––––––––––––––––––––––––––––––––––––––––––––––

#snippet
padding: 0 2rem

.highlight
margin: 0

.highlighter-rouge,
#livePreview
box-shadow: 0 4px 5px #EFEFEF
border: 1px solid #CCC
height: 50vh
width: 100%
overflow-y: scroll
@@ -25,3 +25,4 @@
@import Disqus
@import Gist
@import Activity
@import Snippet

Large diffs are not rendered by default.

Oops, something went wrong.
@@ -0,0 +1,5 @@
---
layout: snippet
title: Snippet
permalink: /snippet
---

0 comments on commit 8741ef7

Please sign in to comment.
You can’t perform that action at this time.