91 lines
1.9 KiB
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>
|