{"version":3,"file":"PageMapLocation-339ce582.js","sources":["../../src/components/atoms/ATextLink.vue","../../../../../assets/map/map-icon-magnifying-glass.png","../../../../../assets/map/map-icon-car.png","../../../../../assets/map/map-icon-confetti.png","../../src/views/PageMapLocation.vue"],"sourcesContent":["<template>\n  <button\n    class=\"color-[--color] font-bold flex clamp-gap-2-2 items-center\"\n    :class=\"{\n      'text-body-sm': size === 'sm',\n      'text-body-md': size === 'md',\n    }\"\n    :style=\"{\n      '--color': primaryColor?.hex || 'black',\n    }\"\n  >\n    <AIcon v-if=\"iconLeading\" :icon=\"iconLeading\" />\n    <span><slot /></span>\n  </button>\n</template>\n\n<script setup lang=\"ts\">\nimport { Fa6SolidIcon } from '@/types';\nimport useConfig from '@/composables/useConfig';\n\nconst { primaryColor } = useConfig();\n\ntype Props = {\n  iconLeading?: Fa6SolidIcon;\n  size?: 'sm' | 'md';\n};\nwithDefaults(defineProps<Props>(), {\n  iconLeading: undefined,\n  size: 'md',\n});\n</script>\n","export default \"__VITE_PUBLIC_ASSET__21630c15__\"","export default \"__VITE_PUBLIC_ASSET__994d5d8b__\"","export default \"__VITE_PUBLIC_ASSET__6ebb5de8__\"","<template>\n  <div\n    class=\"fixed z-map-ui w-screen h-fill-available top-0 left-0 clamp-pt-50-75 page-px map-ui-pb grid grid-cols-1 grid-rows-1 justify-start items-end pointer-events-none\"\n  >\n    <div\n      class=\"relative max-w-full max-h-40vh tl:max-h-full tl:clamp-w-75-100 flex container-inline-size\"\n    >\n      <div\n        class=\"pointer-events-auto hide-scrollbars overflow-y-scroll shadow-card bg-white color-black clamp-rounded-4-8 w-full flex flex-col @xl:flex-row\"\n      >\n        <div\n          v-if=\"content?.media?.length || youtubeUrl\"\n          class=\"relative shrink-0 bg-[--section-bg-color] w-full clamp-h-40-60 @xl:sticky @xl:top-0 @xl:h-full @xl:clamp-max-w-55-90\"\n        >\n          <ElementMedia\n            v-if=\"content?.media?.length\"\n            :bloks=\"content?.media\"\n            ratio=\"orig\"\n            :sizes=\"[\n              { bpMin: '0', vw: 80 },\n              { bpMin: 'tp', vw: 50 },\n              { bpMin: 'tl', vw: 33 },\n            ]\"\n            class=\"w-full h-full object-cover\"\n          />\n          <div\n            class=\"absolute clamp-bottom-2-4 left-50% translate-x--50% w-full flex justify-center\"\n          >\n            <ALink\n              v-if=\"youtubeUrl\"\n              :to=\"{\n                linktype: 'url',\n                url: youtubeUrl,\n                target: 'blank',\n              }\"\n            >\n              <AButton\n                text=\"Watch episode\"\n                size=\"sm\"\n                icon=\"play\"\n                variant=\"secondary\"\n              />\n            </ALink>\n          </div>\n        </div>\n        <div class=\"clamp-pt-4-8\">\n          <div class=\"clamp-px-4-8\">\n            <h1 class=\"text-body-md font-bold clamp-mb-2-4 @lg:clamp-pr-9-11\">\n              {{ content?.episodeTitle }}\n            </h1>\n            <p class=\"text-body-xs clamp-mb-2-4\" v-if=\"content?.visitedOn\">\n              Visited on {{ visitedOnFormatted }}\n            </p>\n            <p class=\"text-body-sm clamp-mb-4-8\" v-if=\"content?.description\">\n              {{ content?.description }}\n            </p>\n            <div\n              v-if=\"\n                content?.venuePhone ||\n                content?.venueEmail ||\n                content?.venueAddress ||\n                content?.venueTitle ||\n                content?.venuePromoText\n              \"\n              class=\"text-body-sm flex flex-col clamp-gap-2-3 clamp-mt-2-3 clamp-mb-4-8\"\n            >\n              <div\n                class=\"flex clamp-gap-1-2 items-center\"\n                v-if=\"content?.venuePhone || content?.venueEmail\"\n              >\n                <img\n                  src=\"/assets/map/map-icon-magnifying-glass.png\"\n                  class=\"clamp-w-12-12 shrink-0\"\n                />\n                <div>\n                  <ATextLink v-if=\"content?.venuePhone\" size=\"sm\">\n                    <ALink\n                      v-if=\"content?.venuePhone\"\n                      :to=\"{\n                        linktype: 'tel',\n                        tel: content?.venuePhone,\n                      }\"\n                    >\n                      {{ content?.venuePhone }}\n                    </ALink>\n                  </ATextLink>\n                  <ATextLink v-if=\"content?.venueEmail\" size=\"sm\">\n                    <ALink\n                      :to=\"{\n                        linktype: 'email',\n                        email: content?.venueEmail,\n                      }\"\n                    >\n                      {{ content?.venueEmail }}\n                    </ALink>\n                  </ATextLink>\n                </div>\n              </div>\n              <div\n                class=\"flex clamp-gap-1-2 items-center\"\n                v-if=\"content?.venueAddress || content?.venueTitle\"\n              >\n                <img\n                  src=\"/assets/map/map-icon-car.png\"\n                  class=\"clamp-w-12-12 shrink-0\"\n                />\n                <div>\n                  <p class=\"font-bold\">{{ content?.venueTitle }}</p>\n                  <p>{{ content?.venueAddress }}</p>\n                </div>\n              </div>\n              <div\n                class=\"flex clamp-gap-1-2 items-center\"\n                v-if=\"content?.venuePromoText\"\n              >\n                <img\n                  src=\"/assets/map/map-icon-confetti.png\"\n                  class=\"clamp-w-12-12 shrink-0\"\n                />\n                <p class=\"font-bold\">{{ content?.venuePromoText }}</p>\n              </div>\n            </div>\n          </div>\n          <div\n            class=\"sticky bottom-0 clamp-px-4-8 flex clamp-gap-2-3 clamp-py-2-4 bg-white border-t-1 border-gray border-opacity-20 shadow-[0_0px_20px_0px_rgba(0,0,0,0.10)]\"\n            v-if=\"content?.venueWebsite || venueDirectionsUrl\"\n          >\n            <ALink\n              v-if=\"content?.venueWebsite\"\n              :to=\"{\n                linktype: 'url',\n                url: content?.venueWebsite,\n                target: 'blank',\n              }\"\n            >\n              <AButton\n                text=\"Visit venue website\"\n                variant=\"secondary\"\n                size=\"sm\"\n              />\n            </ALink>\n            <ALink\n              v-if=\"venueDirectionsUrl\"\n              :to=\"{\n                linktype: 'url',\n                url: venueDirectionsUrl,\n                target: 'blank',\n              }\"\n            >\n              <AButton\n                text=\"Get directions\"\n                variant=\"primary-outline\"\n                size=\"sm\"\n              />\n            </ALink>\n          </div>\n        </div>\n      </div>\n      <ALink\n        v-if=\"mapOverviewSlug\"\n        :to=\"{ linktype: 'story', cached_url: mapOverviewSlug }\"\n        class=\"absolute clamp-top-2-4 clamp-right-2-4 pointer-events-auto\"\n      >\n        <AIconButton\n          icon=\"xmark\"\n          size=\"sm\"\n          ariaLabel=\"Close\"\n          variant=\"secondary\"\n        />\n      </ALink>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { useRoute } from 'vue-router';\nimport useMapGeojson from '@/composables/useMapGeojson';\nimport { useFormattedDate } from '@/composables/useDateFormatting';\nimport useConfig from '@/composables/useConfig';\nconst { config } = useConfig();\n\nconst route = useRoute();\nconst { stories: locationStories } = useMapGeojson();\n\nconst locationSlug = computed(() => route.params.location);\nconst locationData = computed(() => {\n  if (!locationStories.value) return null;\n  return locationStories.value.find((loc) => loc.slug === locationSlug.value);\n});\nconst mapOverviewSlug = computed(() => {\n  if (!locationData.value) return undefined;\n  return locationData.value.full_slug.replace(`/${locationSlug.value}`, '');\n});\n\nconst content = computed(() => locationData.value?.content);\n\nconst visitedOnFormatted = computed(() => {\n  if (!content.value?.visitedOn) return undefined;\n  const date = useFormattedDate(content.value?.visitedOn);\n  return date.value;\n});\n\nconst venueDirectionsUrl = computed(() => {\n  if (!content.value?.venueAddress) return undefined;\n  const query = encodeURIComponent(\n    `${content.value.venueTitle} ${content.value?.venueAddress}`,\n  );\n  return `https://www.google.com/maps/search/?api=1&query=${query}`;\n  // https://developers.google.com/maps/documentation/urls/get-started#search-action\n});\n\nconst youtubeUrl = computed(() => {\n  if (!content.value?.youtubeVideoId) return undefined;\n  return `https://www.youtube.com/watch?v=${content.value.youtubeVideoId}`;\n});\n\nconst canonicalUrl = computed(() => {\n  const baseUrl = `${window.location.protocol}//${window.location.host}`;\n  const path = route.fullPath.endsWith('/')\n    ? route.fullPath.slice(0, -1)\n    : route.fullPath;\n  return baseUrl + path;\n});\nconst seo = computed(() => {\n  return {\n    title: content.value?.episodeTitle || '',\n    description: content.value?.description || '',\n    image: content.value?.media?.[0]?.filename || '',\n  };\n});\nuseHead({\n  title: seo.value.title,\n  meta: [\n    { name: 'description', content: seo.value.description },\n    { property: 'og:site_name', content: config.value?.title },\n    { property: 'og:title', content: seo.value.title },\n    { property: 'og:description', content: seo.value.description },\n    { property: 'og:image', content: seo.value.image },\n    { property: 'og:url', content: canonicalUrl.value },\n    { property: 'og:type', content: 'website' },\n    { property: 'twitter:title', content: seo.value.title },\n    { property: 'twitter:description', content: seo.value.description },\n    { property: 'twitter:image', content: seo.value.image },\n  ],\n  link: [{ rel: 'canonical', href: canonicalUrl.value }],\n});\n</script>\n"],"names":["primaryColor","useConfig","_imports_0","_imports_1","_imports_2","config","route","useRoute","locationStories","useMapGeojson","locationSlug","computed","locationData","loc","mapOverviewSlug","content","_a","visitedOnFormatted","useFormattedDate","_b","venueDirectionsUrl","youtubeUrl","canonicalUrl","baseUrl","path","seo","_e","_d","_c","useHead"],"mappings":"ujBAoBA,KAAA,CAAA,aAAAA,GAAAC,2XCpBeC,GAAA,4CCAAC,GAAA,+BCAAC,GAAA,63CCmLf,KAAA,CAAA,OAAAC,GAAAJ,KAEAK,EAAAC,KACA,CAAA,QAAAC,CAAA,EAAAC,GAAA,EAEAC,EAAAC,EAAA,IAAAL,EAAA,OAAA,QAAA,EACAM,EAAAD,EAAA,IACEH,EAAA,MACAA,EAAA,MAAA,KAAAK,GAAAA,EAAA,OAAAH,EAAA,KAAA,EAD4B,IAC8C,EAE5EI,EAAAH,EAAA,IAAA,CACE,GAAAC,EAAA,MACA,OAAAA,EAAA,MAAA,UAAA,QAAA,IAAAF,EAAA,KAAA,GAAA,EAAA,CAAwE,CAAA,EAG1EK,EAAAJ,EAAA,IAAA,OAAA,OAAAK,EAAAJ,EAAA,QAAA,YAAAI,EAAA,QAAA,EAEAC,GAAAN,EAAA,IAAA,SACE,OAAAK,EAAAD,EAAA,QAAA,MAAAC,EAAA,UACAE,IAAAC,EAAAJ,EAAA,QAAA,YAAAI,EAAA,SAAA,EACA,MAF+B,MAEnB,CAAA,EAGdC,EAAAT,EAAA,IAAA,SACE,OAAAK,EAAAD,EAAA,QAAA,MAAAC,EAAA,aAIA,mDAHA,mBAAc,GAAAD,EAAA,MAAA,UAAA,KAAAI,EAAAJ,EAAA,QAAA,YAAAI,EAAA,YAAA,EAC8C,CAE5D,GAJkC,MAI6B,CAAA,EAIjEE,EAAAV,EAAA,IAAA,OACE,IAAAK,EAAAD,EAAA,QAAA,MAAAC,EAAA,eACA,MAAA,mCAAAD,EAAA,MAAA,cAAA,EAAsE,CAAA,EAGxEO,EAAAX,EAAA,IAAA,CACE,MAAAY,EAAA,GAAA,OAAA,SAAA,QAAA,KAAA,OAAA,SAAA,IAAA,GACAC,EAAAlB,EAAA,SAAA,SAAA,GAAA,EAAAA,EAAA,SAAA,MAAA,EAAA,EAAA,EAAAA,EAAA,SAGA,OAAAiB,EAAAC,CAAiB,CAAA,EAEnBC,EAAAd,EAAA,IAAA,eACE,MAAA,CAAO,QAAAK,EAAAD,EAAA,QAAA,YAAAC,EAAA,eAAA,GACiC,cAAAG,EAAAJ,EAAA,QAAA,YAAAI,EAAA,cAAA,GACK,QAAAO,GAAAC,GAAAC,EAAAb,EAAA,QAAA,YAAAa,EAAA,QAAA,YAAAD,EAAA,KAAA,YAAAD,EAAA,WAAA,EACG,CAChD,CAAA,EAEF,OAAAG,GAAA,CAAQ,MAAAJ,EAAA,MAAA,MACW,KAAA,CACX,CAAA,KAAA,cAAA,QAAAA,EAAA,MAAA,WAAA,EACkD,CAAA,SAAA,eAAA,SAAAT,EAAAX,EAAA,QAAA,YAAAW,EAAA,KAAA,EACG,CAAA,SAAA,WAAA,QAAAS,EAAA,MAAA,KAAA,EACR,CAAA,SAAA,iBAAA,QAAAA,EAAA,MAAA,WAAA,EACY,CAAA,SAAA,WAAA,QAAAA,EAAA,MAAA,KAAA,EACZ,CAAA,SAAA,SAAA,QAAAH,EAAA,KAAA,EACC,CAAA,SAAA,UAAA,QAAA,SAAA,EACR,CAAA,SAAA,gBAAA,QAAAG,EAAA,MAAA,KAAA,EACY,CAAA,SAAA,sBAAA,QAAAA,EAAA,MAAA,WAAA,EACY,CAAA,SAAA,gBAAA,QAAAA,EAAA,MAAA,KAAA,CACZ,EACxD,KAAA,CAAA,CAAA,IAAA,YAAA,KAAAH,EAAA,MAAA,CACqD,CAAA"}