{"version":3,"file":"blog-posts-B1WsK10F.js","sources":["../../../app/frontend/javascript/components/blog-posts/components/PostTags.vue","../../../app/frontend/javascript/components/blog-posts/components/BlogPost.vue","../../../app/frontend/javascript/components/blog-posts/views/BlogPosts.vue","../../../app/frontend/javascript/components/blog-posts/api.js","../../../app/frontend/javascript/components/blog-posts/app.js","../../../app/frontend/entrypoints/blog-posts.js"],"sourcesContent":["<template>\n  <div class=\"tags\">\n    <ul>\n      <li v-for=\"tag in tags\" :key=\"tag.id\" :ref=\"setTagItems\">\n        <a :href=\"tag.url\">\n          {{ tag.name }}\n        </a>\n      </li>\n    </ul>\n    <span>{{ hiddenItems }}</span>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: \"PostTags\",\n  props: {\n    tags: Array \n  },\n  data() {\n    return {\n      tagItems: [],\n      hiddenItems: \"\",\n    }\n  },\n  methods: {\n    setTagItems(tagItem) {\n      if (tagItem && !this.tagItems.includes(tagItem)) {\n        this.tagItems.push(tagItem)\n      }\n    },\n    getHiddenTags(tagItems) {\n      const tagsYPositions = tagItems.map(x => x.getBoundingClientRect().y);\n      const minY = Math.min(...tagsYPositions);\n\n      return tagsYPositions.filter(x => x > minY).length;\n    }\n  },\n  mounted() {\n    setInterval(() => {\n      const hiddenCount = this.getHiddenTags(this.tagItems);\n      this.hiddenItems = hiddenCount > 0 ? `+${hiddenCount}` : '';\n      this.count++;\n    }, 100)\n  }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n@import \"@/stylesheets/application/base/config\";\n\n.tags {\n  display: flex;\n  justify-content: center;\n  order: 1;\n\n  ul {\n      margin: 0;\n      padding: 0;\n      list-style: none;\n      flex-wrap: wrap;\n      overflow: hidden;\n      white-space: nowrap;\n      height: 2.4rem;\n      \n      display: flex;\n      justify-content: center;\n\n      li {  \n        z-index: 20;\n        \n        &:first-of-type {\n          margin-left: 8px;\n        }\n\n        margin: 0 8px 3px 0;\n        line-height: 1.4em;\n\n        a {\n          color: $prussian-blue;\n          border: 1px solid $jungle-mist-grey;\n          color: $william-teal;\n          border-radius: 3px;\n          padding: 8px 10px;\n          font-size: 0.7rem;\n          white-space: nowrap;\n          transition: all .2s;\n          text-decoration: none;\n          font-family: 'AvenirNextPro';\n\n          &:hover {\n            border: 1px solid $regal-blue;\n            background: $regal-blue;\n            color: #fff;\n          }\n        }\n      }\n  }\n\n  span {\n    display: block;\n    margin-left: 5px;\n    font-size: 0.7rem;\n    color: $jungle-mist-grey;\n    line-height: 2.4rem;\n  }\n}\n</style>\n","<template>\n  <div class=\"post-card\">\n    <a class=\"blog-link\" :href=\"link\" :aria-label=\"title\"></a>\n    <img class=\"feature-img lazyload\" alt=\"\" :src=\"transparentImage\" :data-src=\"featureImg\" />\n    <div class=\"content\">\n      <div class=\"post-date\">{{ getPostDate() }}</div>\n      <PostTags :tags=\"tags\" />\n      <header>\n          <h2>{{ title }}</h2>\n      </header>\n      <div class=\"excerpt\">\n          <p>{{ excerpt }}</p>\n      </div>\n      <div class=\"author\">\n        <a :href=\"author.url\" class=\"author\">\n          <img class=\"blur-up lazyload\" alt=\"\" :src=\"transparentImage\" :data-src=\"author.profile_image\" />\n          <span>{{ author.name }}</span>\n        </a>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\nimport PostTags from './PostTags.vue';\nimport moment from 'moment';\n\nexport default {\n  name: \"BlogPost\",\n  components: { PostTags },\n  props: {\n    tags: Array,\n    title: String,\n    featureImg: String,\n    date: String,\n    link: String,\n    excerpt: String,\n    author: Object\n  },\n  data: function () {\n    return {\n      transparentImage: \"data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==\"\n    }\n  },\n  methods: {\n    getPostDate() {\n      const date = moment(this.date);\n      return date.format(\"DD MMM YYYY\");\n    } \n  }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n@import \"@/stylesheets/application/base/config\";\n\n.post-card {\n  box-flex: 1;\n  flex: 1 0 0;\n\n  min-width: 280px;\n  @include on-non-mobile(){\n    min-width: 350px;\n  }\n  \n  position: relative;\n  margin: 1rem;\n  \n  min-height: 300px;\n  background: #fff 50%;\n  background-size: cover;\n  box-shadow: 8px 14px 8px rgba(39, 44, 49, 0.06), \n              1px 3px 8px rgba(39, 44, 49, 0.03);\n  transition: all .5s ease;\n\n  display: flex;\n  flex-direction: column;\n\n  .blog-link {\n    position: absolute;\n    height: 100%;\n    width: 100%;\n    z-index: 10;\n  }\n\n  &:hover {\n    transition: all .3s ease;\n    transform: translate3D(0,-1px,0);\n    box-shadow: 0 0 4px #51ff9c, 0 0 4px #51ff9c, 0 0 4px #51ff9c, 0 0 4px #51ff9c\n  }\n\n  .content {\n    padding: 10px 40px 7px;\n    box-flex: 1;\n    flex-grow: 1;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    color: $william-teal;\n    font-family: \"AvenirNextPro\", sans-serif;\n    font-size: 1.4rem;\n    text-align: center;\n    height: calc(100% - 200px);\n\n    * {\n      margin: 10px 0\n    }\n\n    a {\n      color: $william-teal;\n    }\n\n    a:hover {\n      text-decoration: underline;\n    }\n\n    header {\n      flex: 2 0 2.2rem;\n      order: 2;\n      margin: 0;\n      padding: 0;\n      border: 0;\n      font-size: 100%;\n      font: inherit;\n      vertical-align: baseline;\n\n      h2 {\n        text-align: center;\n      }\n    }\n\n    .post-date {\n      order: 5;\n      position: absolute;\n      top: 0;\n      left: 0;\n      background: rgba(0,37,68,.51);\n      padding: 2px 6px;\n      margin: 0;\n      color: #fff;\n      font-size: 0.8rem;\n    }\n\n    .excerpt {\n      order: 3;\n      flex: 4 0 7.2rem;\n      overflow: hidden;\n\n      p {\n        margin: 0 10%;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        display: -webkit-box;\n        -webkit-line-clamp: 3;\n        -webkit-box-orient: vertical;\n        font-size: 1.0rem;\n        color: #6e787c;\n      }\n    }\n\n    .author {\n      order: 4;\n      z-index: 20;\n      width: fit-content;\n      margin: 10px auto;\n\n      img {\n        width: 32px;\n        height: 32px;\n        border-radius: 50%;\n        margin: 0 auto;\n      }\n\n      .blur-up {\n        transition: opacity .2s,filter .3s,-webkit-filter .3s;\n        object-fit: cover;\n      }\n      .blur-up.lazyloaded {\n        opacity: 1;\n        filter: blur(0);\n      }\n\n      span {\n        display: block;\n        margin: 0 auto;\n        font-size: 0.9rem;\n        font-weight: 900;\n      }\n    }\n  }\n\n  .feature-img {\n    width: 100%;\n    height: 200px;\n    background: $jungle-mist-grey no-repeat 50%;\n    object-fit: cover;\n  }\n}\n</style>\n","<template>\n  <div class=\"wrapper\">\n    <BlogPost \n      v-for=\"post in posts\" \n      :key=\"post.id\" \n      :tags=\"post.tags\"\n      :title=\"post.title\"\n      :feature-img=\"post.feature_image\"\n      :date=\"post.created_at\"\n      :link=\"post.url\"\n      :excerpt=\"post.excerpt\"\n      :author=\"post.primary_author\"\n    />\n    <div class=\"right-padding\"></div>\n  </div>\n</template>\n\n<script>\nimport BlogPost from \"@/javascript/components/blog-posts/components/BlogPost.vue\"\n\nexport default {\n  name: 'BlogPosts',\n  components: { BlogPost },\n  props: [\"limit\", \"tag\"],  \n  data () {\n    return {\n      posts: {}\n    }\n  },\n  methods: {\n    loadData () {\n      this.$getBlogPosts(this.limit, this.tag)\n        .then(response => {\n          this.posts = response.posts;\n        })\n    }\n  },\n  mounted() {\n    this.loadData();\n  }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.wrapper {\n  display: flex;\n  flex-wrap: wrap;\n}\n</style>\n","import axios from 'axios'\n\nconst BASE_URL = 'https://hubbado.ghost.io/ghost/api/v3/content'\nconst apiKey = '9663006612b5153244bc6358f6'\nconst apiInclude = '&include=authors,tags'\nlet apiFilter = '&filter=visibility:public'\n\nexport const getBlogPosts = async (limit, tag) => {\n  apiFilter += `%2Btag:${tag}`;\n  const apiLimit = `&limit=${limit}`\n  return (await axios.get(`${BASE_URL}/posts?key=${apiKey}${apiInclude}${apiFilter}${apiLimit}`)).data\n}\n","import { createApp as createVue, h } from 'vue'\nimport BlogPosts from '@/javascript/components/blog-posts/views/BlogPosts.vue'\nimport { getBlogPosts } from '@/javascript/components/blog-posts/api'\n\nexport default function createApp (element) {\n  const limit = element.getAttribute('data-limit');\n  const tag = element.getAttribute('data-tag');\n\n  const vm = createVue({\n    render() { return h(BlogPosts, { limit, tag } )}\n  })\n\n  vm.config.globalProperties.$getBlogPosts = getBlogPosts\n  vm.mount(element);\n\n  return vm\n}\n","import domready from 'domready'\nimport createApp from '@/javascript/components/blog-posts/app'\n\ndomready(() => {\n  for (let element of document.querySelectorAll('[data-vue=\"blog-posts\"]')) {\n    element.vm = createApp(element)\n  }\n})\n"],"names":["_sfc_main","tagItem","tagItems","tagsYPositions","x","minY","hiddenCount","_hoisted_1","_hoisted_2","_openBlock","_createElementBlock","_createElementVNode","_Fragment","_renderList","$props","tag","$options","$data","PostTags","moment","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","_ctx","_toDisplayString","_createVNode","_component_PostTags","BlogPost","response","post","_createBlock","_component_BlogPost","BASE_URL","apiKey","apiInclude","apiFilter","getBlogPosts","limit","apiLimit","axios","createApp","element","vm","createVue","h","BlogPosts","domready"],"mappings":"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"}