{"version":3,"file":"BsU92A-7.js","sources":["../../../../components/section/hero-insight.vue","../../../../components/component/insight-sections.vue","../../../../pages/insights/[slug].vue"],"sourcesContent":["<script setup>\nconst props = defineProps({\n  heading: String,\n  body: String,\n  cta: Object,\n  media: Object,\n  postDate: String,\n  parent: String,\n});\nconst insightHero = ref(null);\nconst currentTheme = ref(null);\nconst isDarkTheme = ref(null);\n\nonMounted(() => {\n  const { getCurrentTheme, isBlackText } = useTheme();\n  currentTheme.value = getCurrentTheme();\n  isDarkTheme.value = isBlackText(currentTheme.value);\n});\n\nwatch(currentTheme, () => {\n  if (!process.client) return;\n  if (!insightHero.value) return;\n  if (isDarkTheme.value) insightHero.value.dataset.sectionTheme = \"dark\";\n});\n\nconst { isMobileOrTablet } = useDevice();\nconst { width: innerWidth } = useWindowSize();\n\nconst isMobile = computed(() => {\n  if (process.server) return isMobileOrTablet;\n  return innerWidth.value < 900;\n});\n</script>\n\n<template>\n  <section class=\"relative flex min-h-[60vh] w-full\">\n    <div\n      class=\"hero-insight relative z-[1] h-auto\"\n      ref=\"insightHero\"\n      :class=\"`text-${currentTheme}-text transition-colors duration-300`\"\n    >\n      <ui-bleed\n        class=\"flex h-full flex-col gap-[var(--grid-gap)] pb-4 pt-80 md:pt-52 lg:flex-row\"\n      >\n        <div class=\"content relative h-full w-full lg:w-[var(--cols-6)]\">\n          <span class=\"blurred absolute flex h-full w-full\"></span>\n          <div\n            class=\"relative z-[2] flex h-full flex-col justify-between gap-[var(--grid-gap)] p-bleed\"\n          >\n            <div class=\"breadcrumbs inline-flex\">\n              <ui-font-text v-if=\"parent\" type=\"xs\"> Article </ui-font-text>\n              <ui-font-text v-if=\"parent\" type=\"xs\" class=\"opacity-50\">\n                \\{{ parent }}\n              </ui-font-text>\n            </div>\n            <div class=\"body grid gap-4\">\n              <component-element-highlighted-text\n                :highlighted-text=\"heading\"\n                :has-color=\"false\"\n                :type=\"isMobile ? 'l' : 'xxl'\"\n                :has-scramble-effect=\"true\"\n              />\n              <ui-font-text v-if=\"body\" type=\"s\">\n                {{ body }}\n              </ui-font-text>\n            </div>\n\n            <ui-font-text v-if=\"postDate\" type=\"xs\" class=\"opacity-50\">\n              Published {{ formatDate(postDate) }}\n            </ui-font-text>\n          </div>\n          <ui-tag-corners />\n        </div>\n        <div class=\"mt-auto w-full lg:w-[var(--cols-6)]\">\n          <ui-call-to-action\n            v-if=\"cta\"\n            :cta=\"cta\"\n            :has-background=\"true\"\n            :invert-background=\"false\"\n            :has-icon=\"true\"\n          />\n        </div>\n      </ui-bleed>\n    </div>\n    <div v-if=\"media\" class=\"absolute left-0 top-0 z-[0] h-full w-full\">\n      <component-common-media\n        class=\"h-full w-full object-cover\"\n        :media=\"media\"\n        loading=\"eager\"\n      ></component-common-media>\n    </div>\n  </section>\n</template>\n\n<style scoped>\n.blurred {\n  -webkit-backdrop-filter: blur(24px);\n  backdrop-filter: blur(24px);\n}\n</style>\n","<script setup>\nconst props = defineProps({\n  sections: Array,\n  isInsight: Boolean,\n  insightData: Object,\n});\n\nconst route = useRoute();\nfunction camelCaseToWords(s) {\n  const result = s.replace(/([A-Z])/g, \" $1\");\n  return result.charAt(0).toUpperCase() + result.slice(1);\n}\n\nconst debug = computed(() => useRoute().query.sections !== undefined);\n\nconst sectionsContainer = ref(null);\nconst { isMobileOrTablet } = useDevice();\nconst { width: innerWidth } = useWindowSize();\n\nconst isMobile = computed(() => {\n  if (process.server) return isMobileOrTablet;\n  return innerWidth.value < 900;\n});\n\nconst { height: containerHeight } = useElementSize(sectionsContainer);\n\nconst slideWidth = computed(() => {\n  if (!isMobile.value) {\n    return props.people.length <= 2 ? \"var(--cols-6)\" : \"var(--cols-3)\";\n  }\n  return \"calc(var(--cols-4) - var(--grid-gap))\";\n});\n</script>\n\n<template>\n  <div\n    class=\"insight-sections-wrapper relative flex flex-col gap-[var(--grid-gap)] lg:flex-row lg:px-bleed\"\n    ref=\"sectionsContainer\"\n  >\n    <div v-if=\"!isMobile\" class=\"sticky-wrapper w-cols-6 shrink-0\">\n      <component-element-sticky-insight\n        v-if=\"isInsight && !isMobile\"\n        :insight-data=\"insightData\"\n        :container-height=\"containerHeight\"\n      />\n    </div>\n    <div\n      v-else-if=\"isMobile && insightData?.authors?.length > 0\"\n      class=\"authors relative mt-spacing-section w-full overflow-clip\"\n    >\n      <client-only>\n        <component-element-embla-carousel\n          :slide-width=\"\n            innerWidth < 768\n              ? 'calc(var(--cols-4) - var(--grid-gap))'\n              : 'var(--cols-6)'\n          \"\n          :has-navigation=\"false\"\n          type=\"case\"\n          class=\"relative w-full\"\n        >\n          <component-element-insight-people-card\n            v-for=\"(item, index) in insightData.authors\"\n            :key=\"index\"\n            :has-background=\"true\"\n            v-bind=\"item\"\n            class=\"embla__slide h-full min-w-0\"\n            :class=\"{ 'ml-[var(--grid-gap)]': index !== 0 }\"\n        /></component-element-embla-carousel>\n      </client-only>\n    </div>\n    <div\n      class=\"sections my-spacing-section flex w-full flex-col gap-spacing-section px-bleed md:my-spacing-section-desktop md:gap-spacing-section-desktop lg:w-cols-6 lg:px-0\"\n    >\n      <component-section\n        v-for=\"({ id, type, data }, idx) in sections\"\n        :data-module-name=\"debug ? camelCaseToWords(type) : null\"\n        :class=\"{ 'debug-module': debug }\"\n        :type=\"type\"\n        :data=\"data\"\n        :idx=\"idx\"\n        :id=\"id\"\n      />\n    </div>\n  </div>\n</template>\n","<script setup>\nconst route = useRoute();\nconst { data, error } = await useCmsFetch(`entry/${route.params.slug}`);\n\nconst { setGlobalTheme } = useTheme();\nsetGlobalTheme(data.value.theme);\n\nconst { breadcrumbs } = useTTCState();\n\nonMounted(() => {\n  breadcrumbs.value = data.value.breadcrumbs;\n});\n\nonBeforeUnmount(() => {\n  breadcrumbs.value = null;\n});\n\nconst { isMobileOrTablet } = useDevice();\nconst { width: innerWidth } = useWindowSize();\n\nconst isMobile = computed(() => {\n  if (process.server) return isMobileOrTablet;\n  return innerWidth.value < 900;\n});\n\nuseHead({\n  title: data.value?.seoTitle + \" | .the tech collective\",\n\n  meta: [\n    { property: \"og:title\", content: data.value?.seoTitle },\n    { name: \"image\", property: \"og:image\", content: data.value?.seoImage },\n    { name: \"description\", content: data.value?.seoDescription },\n    { name: \"robots\", content: data.value?.seoRobots },\n  ],\n  link: [{ rel: \"canonical\", href: data.value?.seoCanonical }].filter(\n    (item) => item.href,\n  ),\n});\n</script>\n\n<template>\n  <div v-if=\"data\">\n    <section-hero-insight\n      :heading=\"data.meta.teaserTitle || data.title\"\n      :body=\"data.meta.teaserDescription\"\n      :media=\"data.meta.media\"\n      :cta=\"data.cta\"\n      :post-date=\"data.meta.postDate\"\n      :parent=\"data.meta.parent\"\n    />\n    <component-insight-sections\n      v-if=\"data\"\n      :sections=\"data.insightSections\"\n      :is-insight=\"true\"\n      :insight-data=\"data\"\n    />\n    <component-sections v-if=\"data\" :sections=\"data.sections\" />\n    <!-- <code>\n      <pre>{{ data }}</pre>\n    </code> -->\n  </div>\n</template>\n\n<style></style>\n"],"names":["insightHero","ref","currentTheme","isDarkTheme","onMounted","getCurrentTheme","isBlackText","useTheme","watch","isMobileOrTablet","useDevice","innerWidth","useWindowSize","isMobile","computed","props","__props","useRoute","camelCaseToWords","s","result","debug","sectionsContainer","containerHeight","useElementSize","route","data","error","__temp","__restore","_withAsyncContext","useCmsFetch","setGlobalTheme","breadcrumbs","useTTCState","onBeforeUnmount","useHead","_a","_b","_c","_d","_e","_f","item"],"mappings":"85BASM,MAAAA,EAAcC,EAAI,IAAI,EACtBC,EAAeD,EAAI,IAAI,EACvBE,EAAcF,EAAI,IAAI,EAE5BG,EAAU,IAAM,CACd,KAAM,CAAE,gBAAAC,EAAiB,YAAAC,CAAY,EAAIC,EAAS,EAClDL,EAAa,MAAQG,EAAgB,EACzBF,EAAA,MAAQG,EAAYJ,EAAa,KAAK,CAAA,CACnD,EAEDM,EAAMN,EAAc,IAAM,CAEnBF,EAAY,OACbG,EAAY,QAAmBH,EAAA,MAAM,QAAQ,aAAe,OAAA,CACjE,EAEK,KAAA,CAAE,iBAAAS,CAAiB,EAAIC,EAAU,EACjC,CAAE,MAAOC,CAAW,EAAIC,EAAc,EAEtCC,EAAWC,EAAS,IAEjBH,EAAW,MAAQ,GAC3B,4tDC9BD,MAAMI,EAAQC,EAMAC,EAAS,EACvB,SAASC,EAAiBC,EAAG,CAC3B,MAAMC,EAASD,EAAE,QAAQ,WAAY,KAAK,EACnC,OAAAC,EAAO,OAAO,CAAC,EAAE,cAAgBA,EAAO,MAAM,CAAC,CAAA,CAGxD,MAAMC,EAAQP,EAAS,IAAMG,EAAW,EAAA,MAAM,WAAa,MAAS,EAE9DK,EAAoBrB,EAAI,IAAI,EAC5B,CAAE,iBAAAQ,CAAiB,EAAIC,EAAU,EACjC,CAAE,MAAOC,CAAW,EAAIC,EAAc,EAEtCC,EAAWC,EAAS,IAEjBH,EAAW,MAAQ,GAC3B,EAEK,CAAE,OAAQY,GAAoBC,EAAeF,CAAiB,EAEjD,OAAAR,EAAS,IACrBD,EAAS,MAGP,wCAFEE,EAAM,OAAO,QAAU,EAAI,gBAAkB,eAGvD,6rCC9BD,MAAMU,EAAQR,EAAS,EACjB,CAAE,KAAAS,EAAM,MAAAC,CAAM,GAAI,CAAAC,EAAAC,CAAA,EAAAC,EAAA,IAAMC,GAAY,SAASN,EAAM,OAAO,IAAI,EAAE,CAAA,mBAEhE,CAAE,eAAAO,CAAe,EAAIzB,EAAS,EACrByB,EAAAN,EAAK,MAAM,KAAK,EAEzB,KAAA,CAAE,YAAAO,CAAY,EAAIC,EAAY,EAEpC9B,EAAU,IAAM,CACF6B,EAAA,MAAQP,EAAK,MAAM,WAAA,CAChC,EAEDS,GAAgB,IAAM,CACpBF,EAAY,MAAQ,IAAA,CACrB,EAEK,KAAA,CAAE,iBAAAxB,CAAiB,EAAIC,EAAU,EACjC,CAAE,MAAOC,CAAW,EAAIC,EAAc,EAE3B,OAAAE,EAAS,IAEjBH,EAAW,MAAQ,GAC3B,EAEOyB,GAAA,CACN,QAAOC,EAAAX,EAAK,QAAL,YAAAW,EAAY,UAAW,0BAE9B,KAAM,CACJ,CAAE,SAAU,WAAY,SAASC,EAAAZ,EAAK,QAAL,YAAAY,EAAY,QAAS,EACtD,CAAE,KAAM,QAAS,SAAU,WAAY,SAASC,EAAAb,EAAK,QAAL,YAAAa,EAAY,QAAS,EACrE,CAAE,KAAM,cAAe,SAASC,EAAAd,EAAK,QAAL,YAAAc,EAAY,cAAe,EAC3D,CAAE,KAAM,SAAU,SAASC,EAAAf,EAAK,QAAL,YAAAe,EAAY,SAAU,CACnD,EACA,KAAM,CAAC,CAAE,IAAK,YAAa,MAAMC,EAAAhB,EAAK,QAAL,YAAAgB,EAAY,YAAc,CAAA,EAAE,OAC1DC,GAASA,EAAK,IAAA,CACjB,CACD"}