md-parser/md-parser/src/components/PublishedPage.vue

91 lines
1.9 KiB
Vue

<template>
<div>
<p class='alert alert-primary' id='published-message'>Your article was published !</p>
<a @click.prevent.once='generateMDFile' value='Download .md file' class='btn btn-secondary' id='download-button'>Download !</a>
<br>
<hr>
<br>
<span>{{ author }} wrote </span>
<span v-if="date_created">on {{ date_created }}</span>
<span>: </span>
<hr>
<h1 id='article-title'>{{ title}}</h1>
<vue-markdown :source='articleText'></vue-markdown>
</div>
</template>
<script>
import VueMarkdown from '../../node_modules/vue-markdown/src/VueMarkdown.js'
export default {
components: {
VueMarkdown,
},
name: 'PublishedPage',
props: {
},
data: function(){
return {
ready: false,
}
},
computed: {
articleText () {
return this.$store.state.article.content
},
author () {
return this.$store.state.article.meta.author
},
date_created () {
return this.$store.state.article.meta.date_created
},
title () {
return this.$store.state.article.meta.title
}
},
methods : {
generateMDFile : function(){
if(this.ready){
return
}
let file = new Blob(
[this.articleText],
{type: 'text/text'}
)
let fileURL = URL.createObjectURL(file)
// create the link
const linkElement = document.getElementById('download-button')
// add the file url
linkElement.setAttribute('href', fileURL)
linkElement.innerHTML = 'Ready !'
linkElement.setAttribute('download', 'article.md')
this.ready = true
},
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#published-message {
max-width: 80%;
display: block;
text-align: center;
}
hr {
max-width: 80%;
margin: 50px;
}
#article-title:before {
content: "« "
}
#article-title:after {
content: " »"
}
</style>