qgustavor/index.html Secret

## index.html
<!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>
	<!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>