<template>
  <div class="d-flex align-end justify-start flex-row-reverse flex-wrap">
    <SubCard
      class="ma-2 pa-2"
      v-for="(v, k, i) in LSData"
      :key="i"
      :title="k"
      :content="markdownToHtml(v)"
      :contentSize="contentSize"
    />
  </div>
</template>

<script>
import SubCard from "./SubCard.vue";
import { marked } from "marked";

export default {
  name: "HomePage",
  props: ["contentSize"],

  components: {
    SubCard,
  },

  mounted() {
    this.loadFromLS();
  },

  data: () => ({
    LSData: {},
  }),

  methods: {
    // LocalStorage
    loadFromLS() {
      this.LSData = JSON.parse(localStorage.getItem("LSData")) || this.LSData;
    },
    markdownToHtml(content) {
      return marked.parse(content, { gfm: true });
    },
  },
};
</script>