<template>
  <q-page class="flex flex-center q-pt-xl">
    <div class="row full-width reverse-wrap margenes">
      <div class="col q-px-sm full-height">
        <q-markdown :src="post" style="font-size: 120%"></q-markdown>
        <q-btn
          color="secondary"
          label="Volver"
          @click="volver"
          class="q-my-sm"
        ></q-btn>
        <q-icon
          size="xl"
          name="img:icons/mastodon.png"
          class="cursor-pointer float-right q-mr-md"
          @click="twitter"
        />
        <a rel="me" href="https://masto.es/@clonbg">   </a>
      </div>
    </div>
  </q-page>
</template>
<script>
import { openURL } from "quasar";
import { stories } from "../store/blog.json";
export default {
  props: ["markdown"],
  data() {
    return {
      post: "",
      web: "",
      categorias: "",
    };
  },
  watch: {},
  methods: {
    scrollToTop() {
      window.scrollTo(0, 0);
    },
    volver() {
      this.$router.push({ path: "/" });
    },
    twitter() {
      let url = `https://masto.es/publish?text=@clonbg@masto.es - ${this.web} |`;
      console.log(url);
      openURL(url);
    },
  },
  created() {
    try {
      const texto = require(`../markdowns/stories/${this.$route.params.markdown}.md`);
      this.post = texto.default;
      this.scrollToTop();
      this.web = window.location.href.replace("#", "%23");
      let item = stories.find(
        (element) => element.id == this.$route.params.markdown
      );
      let itemtags = item.categorias;
      this.categorias = itemtags.toString();
    } catch (error) {
      this.$router.push({ path: "*" });
    }
  },
};
</script>
<style scoped>
a:link,
a:visited,
a:active {
  text-decoration: none;
  color: black;
}
.margenes {
  padding: 6vh 5vw 6vh 5vw;
}
</style>
