Skip to content

Instantly share code, notes, and snippets.

@qgustavor qgustavor/index.html Secret

Last active Nov 4, 2017
Embed
What would you like to do?
wshp - markdown test
<!DOCTYPE html>
<html lang=pt>
<meta charset=utf-8>
<meta name=viewport content="initial-scale=1, minimum-scale=1, width=device-width">
<title>wshp - markdown test</title>
<style>
*{margin:0;padding:0}
html,code{font:15px/22px arial,sans-serif}
html{background:#fff;color:#222;padding:15px}
body{margin:5% auto 0;max-width:960px;min-height:180px;padding:30px 0 15px}
.markup-comparison {
display: flex;
margin: 15px 0;
}
.markup-comparison > * {
width: 100%;
margin: 0 15px;
}
.markup-comparison .splitter {
width: 1px;
border-left: 1px solid #888;
}
.markup-comparison pre {
white-space: pre-wrap;
}
.hymn .author {
font-style: italic;
margin: 0.5em 1em 1em;
}
.hymn-part {
margin-bottom: 1em;
margin-left: 3em;
}
.hymn-part.refrain {
border-left: 0.2em solid #3A8;
padding-left: 1em;
margin-left: 1.8em;
}
.hymn-part .verse {
display: block;
}
.hymn-part .index {
float: left;
font-size: 1.5em;
margin-top: .25em;
margin-left: -1.1em;
}
.bible p, .bible h1, .bible h2 {
margin-bottom: 0.5em;
}
.bible .woj {
color: #F14;
}
.bible .reference {
font-size: 0.8em;
color: #888;
}
[v-cloak] { display: none; }
</style>
<script src="https://unpkg.com/vue@2.5.2/dist/vue.min.js"></script>
<script src="https://wzrd.in/standalone/remark-parse"></script>
<script src="https://unpkg.com/yaml-front-matter@3.4.0/dist/js-yaml-front-client.min.js"></script>
<div id="app" v-cloak>
<h1>wshp - markdown test</h1>
<p>Tests for markdown syntax on hymns and bible content:</p>
<markup-comparison>---
title: Chuvas de Graça
author: José Rodrigues
type: hymn
---
Deus prometeu com certeza
Chuvas de graça mandar;
Ele nos dá fortaleza,
E ricas bênçãos sem par
> Chuvas de graça,
> Chuvas pedimos, Senhor;
> Manda-nos chuvas constantes,
> Chuvas do Consolador.
Cristo nos tem concedido
O santo Consolador,
De plena paz nos enchido,
Para o reinado do amor.
Dá-nos, Senhor, amplamente,
Teu grande gozo e poder;
Fonte de amor permanente,
Põe dentro de nosso ser.
Faze os teus servos piedosos,
Dá-lhes virtude e valor,
Dando os teus dons preciosos,
Do santo Preceptor.
</markup-comparison>
<markup-comparison>---
title: João 3
type: bible
---
# Jesus e Nicodemos
[1] Havia um fariseu chamado Nicodemos, que era líder dos judeus. [2] Uma noite ele foi visitar Jesus e disse:
— Rabi, nós sabemos que o senhor é um mestre que Deus enviou, pois ninguém pode fazer esses milagres se Deus não estiver com ele.
[3] Jesus respondeu:
**— Eu afirmo ao senhor que isto é verdade: ninguém pode ver o Reino de Deus se não nascer de novo.**
[4] Nicodemos perguntou:
— Como é que um homem velho pode nascer de novo? Será que ele pode voltar para a barriga da sua mãe e nascer outra vez?
[5] Jesus disse:
**— Eu afirmo ao senhor que isto é verdade: ninguém pode entrar no Reino de Deus se não nascer da água e do Espírito. [6] Quem nasce de pais humanos é um ser de natureza humana; quem nasce do Espírito é um ser de natureza espiritual. [7] Por isso não fique admirado porque eu disse que todos vocês precisam nascer de novo. [8] O vento sopra onde quer, e ouve-se o barulho que ele faz, mas não se sabe de onde ele vem, nem para onde vai. A mesma coisa acontece com todos os que nascem do Espírito.**
[9] — Como pode ser isso? — perguntou Nicodemos.
[10] Jesus respondeu:
**— O senhor é professor do povo de Israel e não entende isso? [11] Pois eu afirmo ao senhor que isto é verdade: nós falamos daquilo que sabemos e contamos o que temos visto, mas vocês não querem aceitar a nossa mensagem. [12] Se vocês não creem quando falo das coisas deste mundo, como vão crer se eu falar das coisas do céu? [13] Ninguém subiu ao céu, a não ser o Filho do Homem, que desceu do céu.**
**[14] — Assim como Moisés, no deserto, levantou a cobra de bronze numa estaca, assim também o Filho do Homem tem de ser levantado, [15] para que todos os que crerem nele tenham a vida eterna. [16] Porque Deus amou o mundo tanto, que deu o seu único Filho, para que todo aquele que nele crer não morra, mas tenha a vida eterna. [17] Pois Deus mandou o seu Filho para salvar o mundo e não para julgá-lo.**
**[18] — Aquele que crê no Filho não é julgado; mas quem não crê já está julgado porque não crê no Filho único de Deus. [19] E é assim que o julgamento é feito: Deus mandou a luz ao mundo, mas as pessoas preferiram a escuridão porque fazem o que é mau. [20] Pois todos os que fazem o mal odeiam a luz e fogem dela, para que ninguém veja as coisas más que eles fazem. [21] Mas os que vivem de acordo com a verdade procuram a luz, a fim de que possa ser visto claramente que as suas ações são feitas de acordo com a vontade de Deus.**
# Jesus e João Batista
[22] Depois disso, Jesus e os seus discípulos foram para a região da Judeia. Ele ficou algum tempo com eles ali e batizava as pessoas. [23] João também estava batizando em Enom, perto de Salim, porque lá havia muita água. [24] (João ainda não tinha sido preso.)
[25] Alguns discípulos de João tiveram uma discussão com um judeu sobre a cerimônia de purificação. [26] Eles foram dizer a João:
— Mestre, aquele homem que estava com o senhor no outro lado do rio Jordão está batizando as pessoas. O senhor falou sobre ele, lembra? E todos estão indo atrás dele.
[27] João respondeu:
— Ninguém pode ter alguma coisa se ela não for dada por Deus. [28] Vocês são testemunhas de que eu disse: “Eu não sou o Messias, mas fui enviado adiante dele.” [29] Num casamento, o noivo é aquele a quem a noiva pertence. O amigo do noivo está ali, e o escuta, e se alegra quando ouve a voz dele. Assim também o que está acontecendo com Jesus me faz ficar completamente alegre. [30] Ele tem de ficar cada vez mais importante, e eu, menos importante.
# Aquele que vem do céu
[31] Aquele que vem de cima é o mais importante de todos, e quem vem da terra é da terra e fala das coisas terrenas. Quem vem do céu é o mais importante de todos. [32] Ele fala daquilo que viu e ouviu, mas ninguém aceita a sua mensagem. [33] Quem aceita a sua mensagem dá prova de que o que Deus diz é verdade. [34] Aquele que Deus enviou diz as palavras de Deus porque Deus dá do seu Espírito sem medida. [35] O Pai ama o Filho e pôs tudo nas mãos dele. [36] Por isso quem crê no Filho tem a vida eterna; porém quem desobedece ao Filho nunca terá a vida eterna, mas sofrerá para sempre o castigo de Deus.
</markup-comparison>
</div>
<template id="markup-comparison">
<div class="markup-comparison">
<pre><slot></slot></pre>
<div class="splitter"></div>
<div v-if="!data" class="loading">...</div>
<div v-if="data && data.type === 'hymn'" class="hymn">
<h1>{{ data.title }}</h1>
<p class="author">Por {{ data.author }}</p>
<p v-for="part in data.content" :class="{'hymn-part':1, refrain: part.refrain}">
<span class="index" v-if="!part.refrain">{{ part.index }}</span>
<span class="verse" v-for="verse in part.verses">{{ verse }}</span>
</p>
</div>
<div v-if="data && data.type === 'bible'" class="bible">
<h1>{{ data.title }}</h1>
<template v-for="part in data.content">
<h2 v-if="part.type === 'heading'">{{ part.value }}</h2>
<p class="part" v-else>
<template v-for="part in part.children">
<span class="reference" v-if="part.type === 'linkReference'">{{ part.identifier }}</span>
<span v-if="part.type === 'text'">{{ part.value }}</span>
<span class="woj" v-if="part.type === 'strong'">
<template v-for="part in part.children">
<span class="reference" v-if="part.type === 'linkReference'">{{ part.identifier }}</span>
<span v-if="part.type === 'text'">{{ part.value }}</span>
</template>
</span>
</template>
</p>
</template>
</div>
</div>
</template>
<script>
const normalizers = {
hymn (children) {
let index = 0
return children.map(e => {
const refrain = e.type === 'blockquote'
const verses = refrain
? e.children[0].children[0].value.split(/[\r\n]+/g)
: e.children[0].value.split(/[\r\n]+/g)
if (!refrain) index++
return {refrain, verses, index}
})
},
bible (children) {
return children.map(e => {
if (e.type === 'heading') {
return {
type: 'heading',
depth: e.depth,
value: e.children[0].value
}
}
return e
})
}
}
Vue.component('markup-comparison', {
template: '#markup-comparison',
data () {
return { data: null }
},
mounted () {
const source = this.$slots.default[0].text
const contentTag = Symbol()
const data = jsyaml.loadFront(source, contentTag)
const parser = new remarkParse.Parser()
parser.file = data[contentTag]
delete data[contentTag]
const rawContent = parser.parse()
// Normalize content
data.content = normalizers[data.type](rawContent.children)
console.log(JSON.parse(JSON.stringify(data)))
this.data = data
}
})
const app = new Vue({
el: '#app'
})
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.