{"version":3,"file":"component---src-pages-projects-the-gables-tsx-43c4cb769fcf6f31b477.js","mappings":"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","sources":["webpack://axon-division/./src/constants/hashtags.constants.ts","webpack://axon-division/./src/components/GatsbyImageAdaptor/GatsbyImageAdaptor.tsx","webpack://axon-division/./src/utils/css.utils.ts","webpack://axon-division/./src/components/ProjectPage/ProjectPage.tsx","webpack://axon-division/./src/components/SimpleEntryGallery/SimpleEntryGallery.tsx","webpack://axon-division/./src/content/projects/the-gables.project.ts","webpack://axon-division/./src/components/ProjectURLButton/ProjectURLButton.tsx","webpack://axon-division/./src/utils/image.utils.ts","webpack://axon-division/./src/components/NativeVideoWrapper/NativeVideoWrapper.tsx","webpack://axon-division/./src/content/images/the-gables/the-gables-homepage-loop-video-poster.jpg","webpack://axon-division/./src/content/images/the-gables/the-gables-homepage-loop-video.mp4","webpack://axon-division/./src/content/images/the-gables/the-gables-homepage-loop-video.webm","webpack://axon-division/./src/components/TheGablesHomepageLoopVideo/TheGablesHomepageLoopVideo.tsx","webpack://axon-division/./src/pages/projects/the-gables.tsx"],"sourcesContent":["export enum Hashtag {\n  'branding' = 'branding',\n  'digitalDesign' = 'digitalDesign',\n  'printDesign' = 'printDesign',\n  'animations' = 'animations',\n}\n\nexport const DesignHashtags = [\n  Hashtag.digitalDesign,\n  Hashtag.animations,\n  Hashtag.branding,\n  Hashtag.printDesign,\n]","import { GatsbyImage, GatsbyImageProps, getImage } from 'gatsby-plugin-image';\nimport React from 'react';\nimport { ImageWithMetaInfo } from '../../types/app.types';\nimport { ImageDataLike } from '../../types/gatsby.types';\n\ntype GatsbyImageAdaptorProps = {\n  image: ImageWithMetaInfo | ImageDataLike,\n  id?: string,\n  title?: string,\n  alt?: string,\n  className?: string,\n  objectFit?: GatsbyImageProps['objectFit'],\n  objectPosition?: GatsbyImageProps['objectPosition'],\n  backgroundColor?: string,\n}\n\n/**\n * A little adaptor component that automatically applies the getImage method for graphQL image query results.\n * It also accepts title/alt overrides.\n */\nconst GatsbyImageAdaptor: React.FC<GatsbyImageAdaptorProps> = props => {\n  const image = props.image ? getImage(('image' in props.image || 'title' in props.image || 'alt' in props.image) ? props.image?.image : props.image) : null;\n  return image ? <GatsbyImage\n    id={props.id}\n    {...props}\n    image={image}\n    title={props.title ?? props.image?.title}\n    alt={props.alt ?? props.image?.alt ?? ''}\n    backgroundColor={props.backgroundColor}\n  /> : null;\n}\n\nexport default GatsbyImageAdaptor;","import { isBuildTime } from \"../env\";\nimport tick from \"./waiters.utils\";\n\nexport const getFontSize = (element?: HTMLElement, fallback: number = 16) => {\n  if (isBuildTime) return fallback;\n  return parseFloat(getComputedStyle(element ?? document.body).fontSize);\n}\n\nexport const disableSmoothScroll = () => {\n  if (isBuildTime) return;\n  document.documentElement.style.scrollBehavior = 'auto';\n  return enableSmoothScroll;\n}\n\nexport const enableSmoothScroll = () => {\n  if (isBuildTime) return;\n  document.documentElement.style.scrollBehavior = 'smooth';\n}\n\nexport const disableSmoothScrollTemporarily = async () => {\n  if (isBuildTime) return;\n  document.documentElement.style.scrollBehavior = 'auto';\n  await tick();\n  document.documentElement.style.scrollBehavior = 'smooth';\n}","import { Observer } from 'mobx-react-lite';\nimport React, { ReactElement } from 'react';\nimport { useOnMount } from '../../hooks/lifecycle.hooks';\nimport { useAnimateTextEnterByLine } from '../../hooks/useAnimateTextEnterByLine.hook';\nimport { useObservableRef } from '../../hooks/useObservableRef.hook';\nimport { ProjectMetaInfoWithQueriedResources } from '../../types/app.types';\nimport { PageComponent } from '../../types/gatsby.types';\nimport joinClassName from '../../utils/className.utils';\nimport { disableSmoothScrollTemporarily } from '../../utils/css.utils';\nimport PageSection from '../PageSection/PageSection';\nimport PageTemplate from '../PageTemplate/PageTemplate';\nimport ProjectURLButton from '../ProjectURLButton/ProjectURLButton';\nimport StandardTextBlock from '../StandardTextBlock/StandardTextBlock';\nimport TricolorMorphDef from '../TricolorMorphDef/TricolorMorphDef';\nimport Widowless from '../Widowless/Widowless';\nimport './ProjectPage.scss';\n\ntype ProjectPageProps = {\n  project: ProjectMetaInfoWithQueriedResources,\n  sidebarExtraContent?: ReactElement,\n}\n\nconst ProjectPage: PageComponent<ProjectPageProps> = props => {\n  const key = `ProjectPage--${props.project.name}`;\n  useOnMount(disableSmoothScrollTemporarily);\n  const pageHeadingGroupRef = useObservableRef();\n  useAnimateTextEnterByLine(pageHeadingGroupRef, { \n    animateTextEnter: { delay: 100 }\n  });\n  return <Observer children={() => (\n    <PageTemplate\n      {...props} // always include\n      className={joinClassName('ProjectPage', key)}\n      title={props.project.displayName}\n      description={props.project.description}\n      keywords={props.project.keywords}\n      entryMeta={props.project}\n      backgroundImage={props.project.pageBackgroundImage ?? props.project.featuredImage}\n    >\n      <TricolorMorphDef />\n      <PageSection\n        id=\"ProjectPageContentWrapper\"\n        as=\"article\"\n        className=\"ProjectPageContentWrapper\"\n      >\n\n        <aside className=\"ProjectPageMetaInfoColumn\">\n          <div className=\"ProjectPageMetaInfoColumnContent\">\n            <header className=\"ProjectPageHeader\">\n              <div className=\"ProjectPageHeaderInner\">\n                <div className=\"ProjectPageHeaderHeadingGroup\" ref={pageHeadingGroupRef} >\n                  <h1 className=\"ProjectPageTitle\">{props.project.displayName}</h1>\n                  <p className=\"ProjectPageSubtitle\"><Widowless as=\"strong\">{props.project.subtitle}</Widowless></p>\n                </div>\n                <StandardTextBlock className=\"ProjectPageDescription\" animateTextEnter={{ delay: 300 }}>\n                  <Widowless>{props.project.description}</Widowless>\n                </StandardTextBlock>\n                {props.project.url && <ProjectURLButton project={props.project} ribbons />}\n                {props.sidebarExtraContent && <div className=\"ProjectPageDescriptionExtraContent\">\n                  {props.sidebarExtraContent}\n                </div>}\n              </div>\n            </header>\n          </div>\n        </aside>\n\n        <div className=\"ProjectPageContent\">\n          {props.children}\n        </div>\n\n      </PageSection>\n    </PageTemplate>\n  )} />\n}\n\nexport default ProjectPage;","import React, { ReactNode } from 'react';\nimport { EntryMetaInfoWithQueriedResources } from '../../types/app.types';\nimport joinClassName from '../../utils/className.utils';\nimport { isNumber } from '../../utils/typeChecks.utils';\nimport AppScreenshotSlider from '../AppScreenshotSlider/AppScreenshotSlider';\nimport GatsbyImageAdaptor from '../GatsbyImageAdaptor/GatsbyImageAdaptor';\nimport './SimpleEntryGallery.scss';\n\ntype SimpleEntryGalleryProps = {\n  className?: string,\n  entry: EntryMetaInfoWithQueriedResources,\n  range?: [number, number],\n  doNotRenderContainer?: boolean,\n  autoAddMobileSlides?: boolean,\n  mobileSlidesPosition?: number,\n}\n\nconst SimpleEntryGallery: React.FC<SimpleEntryGalleryProps> = props => {\n  const mobileScreenshots = props.entry.mobileScreenshots;\n  const slides: ReactNode[] = (props.entry.gallery ?? []).slice(props.range?.[0] ?? 0, props.range?.[1] ?? (props.entry.gallery?.length ?? 0)).map((entry, i) => React.createElement(\n    props.doNotRenderContainer ? 'div' : 'li',\n    { \n      key: i,\n      className: \"SimpleEntryGalleryItem\",\n      children: <GatsbyImageAdaptor\n        image={entry}\n      />\n    }\n  ));\n  if (mobileScreenshots && (props.autoAddMobileSlides || isNumber(props.mobileSlidesPosition))) slides.splice(props.mobileSlidesPosition ?? 1, 0, <AppScreenshotSlider slides={mobileScreenshots} key=\"mobileScreenshots\" />)\n  if (props.doNotRenderContainer) return <>{slides}</>\n  return <ul className={joinClassName('SimpleEntryGallery', props.className)}>\n    { slides }\n  </ul>\n}\n\nexport default SimpleEntryGallery;","import { graphql, useStaticQuery } from \"gatsby\";\nimport { Category } from \"../../constants/categories.constants\";\nimport { Hashtag } from \"../../constants/hashtags.constants\";\nimport { Sector } from \"../../constants/sectors.constants\";\nimport { ImageWithMetaInfo, ProjectMetaInfo, ProjectMetaInfoWithQueriedResources } from \"../../types/app.types\";\nimport { TheGablesImagesQuery } from \"../../types/generated\";\n\nexport const ProjectMetaInfoTheGables: ProjectMetaInfo = {\n  name: \"the-gables\",\n  displayName: \"The Gables B&B\",\n  abbreviation: \"The Gables\",\n  subtitle: \"Branding & Website for The Gables B&B\",\n  description: \"The Gables is a charming historic residence in Picton that was converted to a Bed & Breakfast, located in the scenic town of Picton in the South Island of New Zealand.\",\n  url: 'https://thegables.co.nz/',\n  categories: [\n    Category.websites,\n    Category.design,\n  ],\n  sectors: [\n    Sector.tourism,\n  ],\n  hasPage: true,\n  hashtags: [\n    Hashtag.branding,\n  ],\n  keywords: [\n    'web design',\n    'web development',\n    'branding design',\n    'WordPress',\n  ],\n  // logos: {\n  //   default: TheGablesLogoDefault,\n  //   reversed: TheGablesLogoReversed,\n  // }\n}\nexport const useTheGablesInfo = () => {\n  const TheGablesImages: TheGablesImagesQuery = useStaticQuery(graphql`\n    query TheGablesImages {\n      featuredImage: file(relativePath: {eq: \"images/the-gables/the-gables-bnb-lounge-dining-table-view.jpg\"}) {\n        childImageSharp {\n          gatsbyImageData(width: 1280, height: 720)\n        }\n      }\n      gallery: allFile(\n        sort: {fields: name},\n        filter: {\n          extension: {regex: \"/(jpg)|(jpeg)|(png)/\"},\n          relativeDirectory: {eq: \"images/the-gables/gallery\"}\n        }\n      ) {\n        edges {\n          node {\n            name\n            childImageSharp {\n              gatsbyImageData(width: 2560, height: 1440)\n            }\n          }\n        }\n      }\n    }\n  `)\n  const imageMetaData: Partial<ImageWithMetaInfo>[] = [\n    {\n      title: \"The Gables B&B Homepage Screenshot\",\n      alt: \"The Gables Homepage Screenshot, desktop version\",\n    },\n  ]\n  const info: ProjectMetaInfoWithQueriedResources = {\n    ...ProjectMetaInfoTheGables,\n    featuredImage: {\n      image: TheGablesImages.featuredImage!.childImageSharp,\n      title: \"The Gables B&B Lounge View\",\n      alt: \"The Gables B&B lounge view from the dining table\",\n    },\n    gallery: TheGablesImages.gallery.edges.map((edge, i) => ({\n      image: edge.node.childImageSharp?.gatsbyImageData,\n      ...imageMetaData[i]\n    }))\n  }\n  return info;\n}","import React from 'react';\nimport { useAppContext } from '../../controllers/app.controller';\nimport { ProjectMetaInfo } from '../../types/app.types';\nimport joinClassName from '../../utils/className.utils';\nimport CTAButton, { CTAButtonProps } from '../CTAButton/CTAButton';\n// import './ProjectURLButton.scss';\n\ntype ProjectURLButtonProps = Omit<CTAButtonProps, 'title'> & {\n  project: ProjectMetaInfo,\n  drawLine?: 'left' | 'right' | false,\n}\n\nconst ProjectURLButton: React.FC<ProjectURLButtonProps> = props => {\n  const { UI } = useAppContext();\n  return <CTAButton\n    {...props}\n    className={joinClassName('ProjectURLButton', props.className)}\n    to={props.project.url}\n    title={`Visit ${props.project.displayName}`}\n    rel=\"noreferrer\"\n    target=\"_blank\"\n    drawLine={props.drawLine === false ? undefined : (props.drawLine ?? (UI.viewport.width > 768 ? 'left' : 'right'))}\n  >Visit Site</CTAButton>\n}\n\nexport default ProjectURLButton;","import { isBuildTime } from \"../env\";\n\nfunction checkIfBrowserSupportsWebp() {\n  if (isBuildTime) return true;\n  const canvas = document.createElement('canvas');\n  if (!!(canvas.getContext && canvas.getContext('2d'))) {\n    // was able or not to get WebP representation\n    return canvas.toDataURL('image/webp').indexOf('data:image/webp') == 0;\n  }\n  else {\n    // very old browser like IE 8, canvas not supported\n    return false;\n  }\n}\nexport const supportsWebp = checkIfBrowserSupportsWebp();","import { action } from 'mobx';\nimport { Observer } from 'mobx-react-lite';\nimport React from 'react';\nimport { isBuildTime } from '../../env';\nimport { useOnMount } from '../../hooks/lifecycle.hooks';\nimport { useObservableRef } from '../../hooks/useObservableRef.hook';\nimport joinClassName from '../../utils/className.utils';\nimport { makeDisposerController } from '../../utils/disposer.utils';\nimport { supportsWebp } from '../../utils/image.utils';\nimport { useStore } from '../../utils/mobx.utils';\nimport { isArray } from '../../utils/typeChecks.utils';\nimport { observeVisibility } from '../../utils/visibilityObserver.util';\nimport './NativeVideoWrapper.scss';\n\ntype NativeVideoWrapperProps = {\n  id: string,\n  className?: string,\n  loop?: boolean,\n  muted?: boolean,\n  poster?: string,\n  posterWebp?: string,\n  autoPlay?: boolean,\n  controls?: boolean,\n  preload?: HTMLVideoElement['preload'],\n  playsInline?: boolean,\n  width?: number,\n  height?: number,\n  src?: string | string[],\n  onlyLoadWhenVisible?: boolean,\n  rounded?: boolean,\n}\n\nconst NativeVideoWrapper: React.FC<NativeVideoWrapperProps> = props => {\n  const ref = useObservableRef();\n  const videoRef = useObservableRef<HTMLVideoElement>();\n  // const p = useProps(props);\n  const s = useStore(() => ({\n    src: props.onlyLoadWhenVisible ? [''] : isArray(props.src) ? props.src : [props.src],\n  }))\n  useOnMount(() => {\n    if (isBuildTime) return;\n    const d = makeDisposerController();\n    const setSrcAndPlay = action(() => {\n      s.src = isArray(props.src) ? props.src : [props.src];\n      videoRef?.current?.play();\n    })\n    d.add(observeVisibility(ref, {\n      id: props.id,\n      onBecomeVisible: setSrcAndPlay,\n      onBecomeInvisible: () => {\n        videoRef?.current?.pause();\n      }\n    }))\n    if (!props.onlyLoadWhenVisible) { \n      setSrcAndPlay();\n    }\n    return d.disposer;\n  })\n  return <Observer children={() => (\n    <div\n      id={props.id}\n      className={joinClassName('NativeVideoWrapper', props.className, props.rounded && 'rounded')}\n      ref={ref}\n    >\n      <video  \n        loop={props.loop ?? true}\n        muted={props.muted ?? true}\n        poster={props.posterWebp && supportsWebp ? props.posterWebp : props.poster}\n        preload={props.preload ?? 'auto'}\n        width={props.width}\n        height={props.height}\n        autoPlay={props.autoPlay ?? (props.onlyLoadWhenVisible ? true : false)}\n        controls={props.controls ?? false}\n        playsInline={props.playsInline ?? true}\n      >\n        {s.src && s.src.map((srcString, i) => <source src={srcString} key={i}/>)}\n      </video>\n    </div>\n  )} />\n}\n\nexport default NativeVideoWrapper;","export default __webpack_public_path__ + \"static/the-gables-homepage-loop-video-poster-cc0da71394382c4ba66a89d33242d1a4.jpg\";","export default __webpack_public_path__ + \"static/the-gables-homepage-loop-video-8e7b0e44308346ffdf703a864c8e57dc.mp4\";","export default __webpack_public_path__ + \"static/the-gables-homepage-loop-video-9037238408147702ec591c18d3991f5b.webm\";","import { Observer } from 'mobx-react-lite';\nimport React from 'react';\nimport videoPoster from '../../content/images/the-gables/the-gables-homepage-loop-video-poster.jpg';\n// import './TheGablesHomepageLoopVideo.scss';\nimport videoMp4 from '../../content/images/the-gables/the-gables-homepage-loop-video.mp4';\nimport videoWebm from '../../content/images/the-gables/the-gables-homepage-loop-video.webm';\nimport NativeVideoWrapper from '../NativeVideoWrapper/NativeVideoWrapper';\n\ntype TheGablesHomepageLoopVideoProps = {\n  rounded?: boolean,\n}\n\nconst TheGablesHomepageLoopVideo: React.FC<TheGablesHomepageLoopVideoProps> = props => {\n  return <Observer children={() => (\n    <NativeVideoWrapper \n      id=\"TheGablesHomepageLoopVideo\"\n      className=\"TheGablesHomepageLoopVideo\" \n      src={[videoWebm, videoMp4]}\n      poster={videoPoster}\n      width={1280}\n      height={720}\n      onlyLoadWhenVisible\n      rounded={props.rounded}\n    />\n  )} />\n}\n\nexport default TheGablesHomepageLoopVideo;","import React from 'react';\nimport ProjectPage from '../../components/ProjectPage/ProjectPage';\nimport SimpleEntryGallery from '../../components/SimpleEntryGallery/SimpleEntryGallery';\nimport TheGablesHomepageLoopVideo from '../../components/TheGablesHomepageLoopVideo/TheGablesHomepageLoopVideo';\nimport { useTheGablesInfo } from '../../content/projects/the-gables.project';\nimport { PageComponent } from '../../types/gatsby.types';\n// import './ProjectPageTheGables.scss';\n\ntype ProjectPageTheGablesProps = {}\n\nconst ProjectPageTheGables: PageComponent<ProjectPageTheGablesProps> = props => {\n  const metaInfo = useTheGablesInfo();\n  return <ProjectPage\n    {...props} // always include\n    project={metaInfo}\n  >\n    <TheGablesHomepageLoopVideo />\n    <SimpleEntryGallery entry={metaInfo} autoAddMobileSlides range={[1, Infinity]}/>\n  </ProjectPage>\n}\n\nexport default ProjectPageTheGables;"],"names":["Hashtag","DesignHashtags","digitalDesign","animations","branding","printDesign","props","_props$image","_props$title","_props$image2","_ref","_props$alt","_props$image3","image","getImage","_jsx","GatsbyImage","_objectSpread","id","title","alt","backgroundColor","disableSmoothScrollTemporarily","async","isBuildTime","document","documentElement","style","scrollBehavior","tick","key","project","name","useOnMount","pageHeadingGroupRef","useObservableRef","useAnimateTextEnterByLine","animateTextEnter","delay","Observer","children","_props$project$pageBa","_jsxs","PageTemplate","className","joinClassName","displayName","description","keywords","entryMeta","backgroundImage","pageBackgroundImage","featuredImage","TricolorMorphDef","PageSection","as","ref","Widowless","subtitle","StandardTextBlock","url","ProjectURLButton","ribbons","sidebarExtraContent","_props$entry$gallery","_props$range$","_props$range","_props$range$2","_props$range2","_props$entry$gallery$","_props$entry$gallery2","_props$mobileSlidesPo","mobileScreenshots","entry","slides","gallery","slice","range","length","map","i","React","doNotRenderContainer","GatsbyImageAdaptor","autoAddMobileSlides","isNumber","mobileSlidesPosition","splice","AppScreenshotSlider","_Fragment","ProjectMetaInfoTheGables","abbreviation","categories","Category","websites","design","sectors","Sector","tourism","hasPage","hashtags","useTheGablesInfo","TheGablesImages","useStaticQuery","imageMetaData","childImageSharp","edges","edge","_edge$node$childImage","node","gatsbyImageData","_props$drawLine","UI","useAppContext","CTAButton","to","rel","target","drawLine","undefined","viewport","width","supportsWebp","canvas","createElement","getContext","toDataURL","indexOf","checkIfBrowserSupportsWebp","videoRef","s","useStore","src","onlyLoadWhenVisible","isArray","d","makeDisposerController","setSrcAndPlay","action","_videoRef$current","current","play","add","observeVisibility","onBecomeVisible","onBecomeInvisible","_videoRef$current2","pause","disposer","_props$loop","_props$muted","_props$preload","_props$autoPlay","_props$controls","_props$playsInline","rounded","loop","muted","poster","posterWebp","preload","height","autoPlay","controls","playsInline","srcString","NativeVideoWrapper","videoWebm","videoMp4","videoPoster","metaInfo","ProjectPage","TheGablesHomepageLoopVideo","SimpleEntryGallery","Infinity"],"sourceRoot":""}