{"version":3,"file":"ArticlePost-N5hPXzhZ.js","sources":["../../src/components/article/ArticleByline.vue","../../src/queries/GetArticlePost.js","../../src/components/article/ArticlePost.vue"],"sourcesContent":["<template>\n  <p class=\"body-2\">\n    By\n    <span v-for=\"(author, index) in authorData\" :key=\"index\">\n      <router-link\n        :to=\"{\n          name: 'ArticleTerm',\n          params: {\n            slug: author.slug,\n            type: 'author',\n          },\n        }\"\n        :ga4-event=\"\n          JSON.stringify({\n            click_type: 'author_name',\n            component: `${parent}`,\n            content_group: 'blog',\n            gtm_tag: 'link',\n            link_text: `${author.name}`,\n            link_url: `${author.slug}`,\n          })\n        \"\n        v-html=\"author.name\"\n      ></router-link>\n      <span v-if=\"checkLength(authorData.length, index, 'two')\">&nbsp;and&nbsp;</span>\n      <span v-if=\"checkLength(authorData.length, index, 'many')\">\n        {{ checkLength(authorData.length, index, '') ? ',&nbsp;' : ',&nbsp;and&nbsp;' }}\n      </span>\n    </span>\n  </p>\n</template>\n\n<script setup lang=\"ts\">\nimport { Coauthors } from '@/types/blog.interface';\nimport { useRouteParent } from '@/composables/Common.js';\n\ndefineProps<{\n  authorData: Array<Coauthors>;\n}>();\n\nconst { parent } = useRouteParent();\n\nfunction checkLength(length: number, index: number, type: string): boolean {\n  if (type == 'two') {\n    return length === 2 && index !== 1;\n  }\n\n  if (type === 'many') {\n    return length > 2 && index !== length - 1;\n  }\n\n  return index !== length - 2;\n}\n</script>\n","import gql from 'graphql-tag';\n\nexport const articlePostQuery = gql`\n  query getPost($slug: ID!) {\n    post(id: $slug, idType: SLUG) {\n      author {\n        node {\n          name\n          slug\n        }\n      }\n      categories {\n        nodes {\n          name\n          slug\n        }\n      }\n      coAuthors {\n        name\n        slug\n      }\n      content\n      date\n      excerpt\n      featuredImage {\n        node {\n          altText\n          caption\n          description\n          mediaDetails {\n            height\n            width\n          }\n          sourceUrl\n        }\n      }\n      featuredImageWidth\n      imageSrcset\n      slug\n      tags {\n        nodes {\n          name\n          slug\n        }\n      }\n      title\n    }\n  }\n`;\n","<template>\n  <article v-if=\"post && Object.keys(post).length\">\n    <PostFeaturedImage\n      v-if=\"post.featuredImage\"\n      :is-aspect=\"true\"\n      :is-wide=\"post.featuredImageWidth === 'wide'\"\n      :featured-image=\"post.featuredImage.node\"\n      :srcset=\"post.imageSrcset\"\n      :ga4-data='`{\"click_type\": \"hero\", \"component\": \"ArticlePost\", \"content_group\": \"post\", \"gtm_tag\": \"image\", \"file_name\": \"${post.featuredImage.node.sourceUrl.split(\"/\").pop()}\"}`'>\n    </PostFeaturedImage>\n    <article :class=\"[$style.article, 'container']\">\n      <header>\n        <nav>\n          <BackLink\n            component=\"ArticlePost\"\n            group=\"post\"\n            label=\"Articles\"\n            name=\"ArticleSection\"\n          ></BackLink>\n        </nav>\n        <h1 v-html=\"post.title\"></h1>\n        <div :class=\"[$style.categories, 'subtitle-2', 'space-0-above']\">\n          <ul>\n            <li v-for=\"(cat, index) in post.categories.nodes\" :key=\"index\">\n              <router-link\n                :to=\"{\n                  name: 'ArticleTerm',\n                  params: {\n                    slug: category,\n                    subcategory: getSubCategory(cat.slug),\n                    type: 'category',\n                  },\n                }\"\n                :ga4-event=\"\n                  JSON.stringify({\n                    filter_location: 'post',\n                    filter_type: 'category',\n                    filter_value: `${cat.name}`,\n                    gtm_tag: 'filter',\n                  })\n                \"\n                v-html=\"cat.name\"\n              ></router-link>\n            </li>\n          </ul>\n          <time class=\"subtitle-2\" :datetime=\"post.date\">{{ post.date }}</time>\n        </div>\n        <ArticleByline :author-data=\"post.coAuthors\"></ArticleByline>\n      </header>\n      <ProcessContent\n        ref=\"mainContent\"\n        :content=\"post.content\"\n        wrapper=\"section\"\n        :class=\"[$style.content, 'space-12-16-above']\"\n      ></ProcessContent>\n      <footer v-if=\"post.tags.nodes.length\" class=\"space-24-32-above\">\n        <p class=\"label\">Tags:</p>\n        <ul class=\"tags\">\n          <li v-for=\"(tag, index) in post.tags.nodes\" :key=\"index\">\n            <router-link\n              :to=\"{\n                name: 'ArticleTerm',\n                params: {\n                  slug: tag.slug,\n                  type: 'tag',\n                },\n              }\"\n              :ga4-event=\"\n                JSON.stringify({\n                  filter_location: 'post',\n                  filter_type: 'tag',\n                  filter_value: `${tag.name}`,\n                  gtm_tag: 'filter',\n                })\n              \"\n              v-html=\"tag.name\"\n            ></router-link>\n          </li>\n        </ul>\n      </footer>\n    </article>\n  </article>\n</template>\n\n<script setup lang=\"ts\">\nimport ArticleByline from '@/components/article/ArticleByline.vue';\nimport { articlePostQuery } from '@/queries/GetArticlePost';\nimport BackLink from '@/components/common/BackLink.vue';\nimport { dataLoaded, useHandleError, useMetaData } from '@/composables/Common.js';\nimport { Post } from '@/types/articles.interface';\nimport PostFeaturedImage from '@/components/common/PostFeaturedImage.vue';\nimport ProcessContent from '@/components/common/ProcessContent.vue';\nimport { ref } from 'vue';\nimport { useQuery } from 'villus';\n\nconst props = defineProps<{\n  category: string;\n  slug: string;\n}>();\n\nconst { handleError } = useHandleError();\nconst { setMetaDescription, setMetaTitle } = useMetaData();\n\nconst post = ref<Post>({});\n\nconst { data } = useQuery({\n  onData: data => {\n    if (data.post && Object.keys(data.post).length) {\n      post.value = data.post;\n      setMetaTitle(data.title);\n      setMetaDescription(data.excerpt);\n      dataLoaded();\n    }\n\n    if (!data.post || Object.keys(data.post).length === 0) {\n      handleError('ArticlePost', props.slug);\n    }\n  },\n  query: articlePostQuery,\n  variables: { slug: props.slug },\n});\n\nfunction getSubCategory(slug: string): string {\n  if (props.category !== slug) {\n    return slug;\n  }\n\n  return '';\n}\n</script>\n\n<script lang=\"ts\">\nexport default {\n  beforeRoute(params, villusClient) {\n    return new Promise<void>((resolve, reject) => {\n      villusClient\n        .executeQuery({\n          query: articlePostQuery,\n          variables: {\n            slug: params.slug,\n          },\n        })\n        .then(() => resolve())\n        .catch((err) => reject(err));\n    });\n  },\n};\n</script>\n\n<style lang=\"scss\">\n@use '@/styles/links.module.scss' as *;\n</style>\n\n<style lang=\"scss\" module>\n.categories {\n  time {\n    display: inline;\n  }\n\n  ul {\n    display: inline;\n    margin: 0;\n    padding: 0;\n\n    li {\n      display: inline-block;\n\n      &::after {\n        @include pipe;\n      }\n\n      a {\n        text-decoration: none;\n\n        &:hover {\n          text-decoration: underline;\n        }\n      }\n    }\n  }\n}\n\n.content {\n  & > img {\n    height: 100%;\n    width: 100%;\n  }\n}\n\n@media (min-width: $break-point) {\n  .article {\n    @include grid;\n\n    footer {\n      grid-column: 1 / span 6;\n    }\n\n    > header {\n      @include grid;\n      grid-column: span 12;\n\n      > * {\n        grid-column: 1 / span 8;\n      }\n\n      nav {\n        grid-column: span 12;\n      }\n    }\n\n    .content {\n      @include grid-content;\n    }\n  }\n}\n</style>\n"],"names":["parent","useRouteParent","checkLength","length","index","type","articlePostQuery","gql","__default__","params","villusClient","resolve","reject","err","props","__props","handleError","useHandleError","setMetaDescription","setMetaTitle","useMetaData","post","ref","useQuery","data","dataLoaded","getSubCategory","slug"],"mappings":"+jBAwCM,KAAA,CAAE,OAAAA,CAAO,EAAIC,EAAe,EAEzB,SAAAC,EAAYC,EAAgBC,EAAeC,EAAuB,CACzE,OAAIA,GAAQ,MACHF,IAAW,GAAKC,IAAU,EAG/BC,IAAS,OACJF,EAAS,GAAKC,IAAUD,EAAS,EAGnCC,IAAUD,EAAS,CAAA,+lBCjDfG,EAAmBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gGCkIjBC,EAAA,CACb,YAAYC,EAAQC,EAAc,CAChC,OAAO,IAAI,QAAc,CAACC,EAASC,IAAW,CAC5CF,EACG,aAAa,CACZ,MAAOJ,EACP,UAAW,CACT,KAAMG,EAAO,IAAA,CACf,CACD,EACA,KAAK,IAAME,GAAS,EACpB,MAAOE,GAAQD,EAAOC,CAAG,CAAC,CAAA,CAC9B,CAAA,CAEL,sEAnDA,MAAMC,EAAQC,EAKR,CAAE,YAAAC,CAAY,EAAIC,EAAe,EACjC,CAAE,mBAAAC,EAAoB,aAAAC,CAAa,EAAIC,EAAY,EAEnDC,EAAOC,EAAU,EAAE,EAERC,EAAS,CACxB,OAAQC,GAAQ,CACVA,EAAK,MAAQ,OAAO,KAAKA,EAAK,IAAI,EAAE,SACtCH,EAAK,MAAQG,EAAK,KAClBL,EAAaK,EAAK,KAAK,EACvBN,EAAmBM,EAAK,OAAO,EACpBC,EAAA,IAGT,CAACD,EAAK,MAAQ,OAAO,KAAKA,EAAK,IAAI,EAAE,SAAW,IACtCR,EAAA,cAAeF,EAAM,IAAI,CAEzC,EACA,MAAOR,EACP,UAAW,CAAE,KAAMQ,EAAM,IAAK,CAC/B,CAAA,EAED,SAASY,EAAeC,EAAsB,CACxC,OAAAb,EAAM,WAAaa,EACdA,EAGF,EAAA"}