<script setup>
  import { ref, onMounted, computed } from "vue";

  import { useMenuStore } from '../stores/MenuStore';
  const MenuStore = useMenuStore();
  MenuStore.get_today();

  import MiniLinkListing from './listings/MiniBlueskyLinks.vue';
  import LinkListing from './listings/BlueskyLinks.vue';

  MenuStore.fetchBlogPosts();
  const links = computed(() => {
    return MenuStore.blog_posts;
  });

  MenuStore.fetchDigiSnaxx();
  const snaxx = computed(() => {
    return MenuStore.snaxx;
  });

  defineProps({
        limit: {
            type: Number,
            require: false
        }
    })

</script>
        
<template class="">
    <div class="p-2">
      <p class="text-xl">Recent writings:</p>
    </div>
    <div v-if="limit"  class="md:grid lg:grid">
        <p class="p-1" v-for="(item, index) in links.slice(0,limit)">
            <a :href="item.url">{{ item.title }}</a> 
        </p>
    </div>

    <div  v-if="!limit"  class="md:grid lg:grid md:justify-center lg:justify-center">
        <p v-if="!limit" class="" v-for="(item, index) in links">
            <a :href="item.url">{{ item.title }}</a> 
        </p>
    </div>
</template>

<style scoped>
    /* table {
      width: 70%
    } */

    .tcenter, th {
      text-align: center
    }

    .green {
      background-color: green; 
    }

    .yellow {
      background-color: yellow; 
    }
    
    table {
      border-collapse: separate;
    }
    
    td, p.border {
    /* background-color: #222; */
    border-collapse: separate;
    /* border-left: .1em solid #333; */
    /* border-right: .1em solid #333; */
    border-radius: 25px;
    padding: 2em;
    margin: 1em;
    }

    .social-data {
      display: block;
      /* float: right; */
      text-align: center;
      padding-right: 1em;
    }

    div > span {
      text-align: center;
      padding-right: 1em;
    }

    .link {
        border-radius: 25px;
        padding: .5rem;
        margin: .5rem;
        background-color: orange;
        color: #000;
        font-weight: bold;
    }
</style>