{"version":3,"sources":["webpack:///./src/utilities/Video.tsx","webpack:///./src/components/Message.tsx","webpack:///./src/components/Block.tsx","webpack:///./src/templates/index.tsx"],"names":["Video","videoID","description","styleClass","className","src","srcDoc","allow","allowFullScreen","title","loading","width","height","frameBorder","Message","children","content","type","collapse","useState","collapseOpen","setCollapseOpen","isCollapse","messageType","dangerouslySetInnerHTML","__html","onClick","Block","footer","url","linkText","YTALink","Home","data","pageInfo","markdownRemark","Layout","pageTitle","heroTitle","heroSubTitle","frontmatter","subTitle","heroTagLine","tagline","heroImage","hero","html"],"mappings":"4FAAA,yBAiDeA,IAxCD,SAAC,GAQT,IAPJC,EAOI,EAPJA,QACAC,EAMI,EANJA,YACAC,EAKI,EALJA,WAMA,OACE,yBACEC,UACED,EAAa,SAAWA,EAAa,8BAGvC,yBAAKC,UAAU,2CACb,4BACEC,IAAK,0CAA+CJ,EACpDK,OACE,kSACGL,EACH,mDACGA,EACH,wBACGC,GAA4B,mBAC/B,4CAEFK,MAAM,0EACNC,iBAAe,EACfC,MAAK,IAAKP,GAA4B,mBACtCQ,QAAQ,OACRC,MAAM,MACNC,OAAO,MACPC,YAAY,U,kCC1CtB,yBAsEeC,IAhDC,SAAC,GAAwD,IAAtDC,EAAsD,EAAtDA,SAAUC,EAA4C,EAA5CA,QAASC,EAAmC,EAAnCA,KAAMC,EAA6B,EAA7BA,SAA6B,EAC/BC,oBAAS,GAA1CC,EADgE,KAClDC,EADkD,KAOjEC,EAAaJ,IAAY,EACzBK,EAAcN,EAEpB,OACE,yBAAKb,UAAU,mBACb,yBAAKA,UAAS,qBAAuBmB,GACnC,yBAAKnB,UAAS,mBAAoBkB,EAAa,GAAK,UAClD,yBACElB,UAAS,iCAAmCmB,EAAnC,8BACKD,EAAa,YAAc,IADhC,8BAEKF,EAAe,aAAe,IAFnC,4BAKT,yBAAKhB,UAAU,aACZW,GAAYA,EAEZC,GACC,yBAAKQ,wBAAyB,CAAEC,OAAQT,QAM/CE,GACC,4BACEd,UAAU,sDACVa,KAAK,SACLS,QA/BK,WACbL,GAAiBD,KAgCT,yBAAKhB,UAAU,QACZgB,EACG,cACA,kB,8ECZHO,EAzBM,SAAC,GAOJ,IANhBlB,EAMgB,EANhBA,MACAmB,EAKgB,EALhBA,OACAC,EAIgB,EAJhBA,IACAC,EAGgB,EAHhBA,SACAf,EAEgB,EAFhBA,SACAZ,EACgB,EADhBA,WAEA,OACE,yBACEC,UACED,EAAa,SAAWA,EAAa,iCAGvC,wBAAIC,UAAU,wBAAwBK,GACtC,yBAAKL,UAAU,kBAAkBW,GACjC,yBAAKX,UAAU,iBACZyB,GAAO,kBAACE,EAAA,EAAD,CAASF,IAAKA,GAAMC,GAE3BF,GAAU,oCAAGA,M,oCCmCPI,UA3DF,SAAC,GAAgC,UAA9BC,EAA8B,EAA9BA,KACRC,EAAWD,EAAKE,eAEtB,OACE,kBAACC,EAAA,EAAD,CACEC,UAAW,cACXC,UAAU,iCACVC,cAAc,UAAAL,EAASM,mBAAT,eAAsBC,WAAY,GAChDC,aAAa,UAAAR,EAASM,mBAAT,eAAsBG,UAAW,GAC9CC,WAAW,UAAAV,EAASM,mBAAT,eAAsBK,OAAQ,IAExCZ,EAAKE,eAAeW,MACnB,kBAAChC,EAAA,EAAD,CAASE,QAASkB,EAASY,KAAM7B,KAAK,QAAQC,UAAU,IAG1D,yBAAKd,UAAU,mCACb,kBAAC,EAAD,CACEK,MAAM,qBACNoB,IAAI,cACJC,SAAS,aAET,wBAAI1B,UAAU,OACZ,wBAAIA,UAAU,YAAd,sBACA,wBAAIA,UAAU,YAAd,YACA,wBAAIA,UAAU,YAAd,wBACA,wBAAIA,UAAU,YAAd,UACA,wBAAIA,UAAU,YAAd,4BACA,wBAAIA,UAAU,YAAd,cAIJ,kBAAC,EAAD,CAAOK,MAAM,OAAOoB,IAAI,OAAOC,SAAS,aACtC,oCACE,yDAEE,6BAFF,iBAQN,yBAAK1B,UAAU,mCACb,kBAACJ,EAAA,EAAD,CAAOC,QAAQ,cAAcC,YAAY,gCAE3C,yBAAKE,UAAU,mCACb,kBAACJ,EAAA,EAAD,CACEC,QAAQ,cACRC,YAAY,gCAGd,kBAACF,EAAA,EAAD,CACEC,QAAQ,cACRC,YAAY","file":"component---src-templates-index-tsx-4cbf239eb349f7f3d43b.js","sourcesContent":["/**\n * Convert YT video to no-cookie + also loads after click\n *\n * @todo add better alt description\n *\n */\n\nimport React from 'react'\n\nconst Video = ({\n  videoID,\n  description,\n  styleClass,\n}: {\n  videoID: string\n  description?: string\n  styleClass?: string\n}) => {\n  return (\n    <div\n      className={`${\n        styleClass ? 'video ' + styleClass : 'video col-sm col-md-6 mb-5'\n      }`}\n    >\n      <div className=\"embed-responsive embed-responsive-16by9\">\n        <iframe\n          src={'https://www.youtube-nocookie.com/embed/' + `${videoID}`}\n          srcDoc={\n            '<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em black}</style><a href=https://www.youtube-nocookie.com/embed/' +\n            `${videoID}` +\n            '?autoplay=1><img src=https://img.youtube.com/vi/' +\n            `${videoID}` +\n            \"/hqdefault.jpg alt='\" +\n            `${description ? description : 'Jiu-Jitsu Aalst'}` +\n            \"' class='hosted-video'><span>▶</span></a>\"\n          }\n          allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"\n          allowFullScreen\n          title={`${description ? description : 'Jiu-Jitsu Aalst'}`}\n          loading=\"lazy\"\n          width=\"560\"\n          height=\"315\"\n          frameBorder=\"0\"\n        ></iframe>\n      </div>\n    </div>\n  )\n}\n\nexport default Video\n","import React, { useState } from 'react'\n\n//https://stackoverflow.com/a/61281828\ninterface MessageBasics {\n  type?: string\n  collapse?: boolean\n}\n\ninterface MessageWithContent extends MessageBasics {\n  type?: string\n  content: string\n  children?: never\n}\n\ninterface MessageWithChildren extends MessageBasics {\n  type?: string\n  content?: never\n  children: React.ReactNode\n}\n\ntype MessageProps = MessageWithContent | MessageWithChildren\n\nconst Message = ({ children, content, type, collapse }: MessageProps) => {\n  const [collapseOpen, setCollapseOpen] = useState(false)\n\n  const toggle = () => {\n    setCollapseOpen(!collapseOpen)\n  }\n\n  const isCollapse = collapse || false\n  const messageType = type\n\n  return (\n    <div className=\"container pt-1 \">\n      <div className={`message mt-1 mb-5 ${messageType}`}>\n        <div className={`container pt-5 ${isCollapse ? '' : ' pb-5'}`}>\n          <div\n            className={`row justify-content-md-center ${messageType}\n                        ${isCollapse ? ' collapse' : ''}\n                        ${collapseOpen ? ' is-active' : ''}\n                      `}\n          >\n            <div className=\"col-md-10\">\n              {children && children}\n\n              {content && (\n                <div dangerouslySetInnerHTML={{ __html: content }}></div>\n              )}\n            </div>\n          </div>\n        </div>\n\n        {collapse && (\n          <button\n            className=\"container-fluid test btn--simple btn--accordion p-1\"\n            type=\"button\"\n            onClick={toggle}\n          >\n            <div className=\"link\">\n              {collapseOpen\n                ? 'Toon minder'\n                : 'Toon meer'}\n            </div>\n          </button>\n        )}\n      </div>\n    </div>\n  )\n}\n\nexport default Message\n","import React from 'react'\nimport YTALink from '@/utilities/YTALink'\n\n//https://stackoverflow.com/a/61281828\ninterface BlockBasics {\n  title: string\n  children?: React.ReactNode\n  styleClass?: string\n}\n\ninterface BlockWithFooter extends BlockBasics {\n  footer: string\n  url?: never\n  linkText?: never\n}\n\ninterface BlockWithLink extends BlockBasics {\n  url: string\n  linkText: string\n  footer?: never\n}\n\ntype BlockProps = BlockWithFooter | BlockWithLink\n\nexport const Block = ({\n  title,\n  footer,\n  url,\n  linkText,\n  children,\n  styleClass,\n}: BlockProps) => {\n  return (\n    <div\n      className={`${\n        styleClass ? 'block ' + styleClass : 'block col-sm-12 col-md-6 mb-5'\n      }`}\n    >\n      <h2 className=\"block--title h4 mb-2\">{title}</h2>\n      <div className=\"block--content\">{children}</div>\n      <div className=\"block--footer\">\n        {url && <YTALink url={url}>{linkText}</YTALink>}\n\n        {footer && <>{footer}</>}\n      </div>\n    </div>\n  )\n}\n\nexport default Block\n","import React from 'react'\nimport { graphql } from 'gatsby'\n\nimport Block from '@/components/Block'\nimport Hero from '@/components/Hero'\nimport Video from '@/utilities/Video'\nimport Layout from '@/components/Layout'\nimport Message from '@/components/Message'\nimport Navigation from '@/components/Navigation'\n\ninterface PageTemplateProps {\n  data: {\n    markdownRemark: {\n      html: string\n      frontmatter: any\n    }\n  }\n}\n\nconst Home = ({ data }: PageTemplateProps) => {\n  const pageInfo = data.markdownRemark\n\n  return (\n    <Layout\n      pageTitle={'Startpagina'}\n      heroTitle=\"Jiu-Jitsu<br/>Yukio Tani Aalst\"\n      heroSubTitle={pageInfo.frontmatter?.subTitle || ''}\n      heroTagLine={pageInfo.frontmatter?.tagline || ''}\n      heroImage={pageInfo.frontmatter?.hero || ''}\n    >\n      {data.markdownRemark.html && (\n        <Message content={pageInfo.html} type=\"alert\" collapse={true} />\n      )}\n\n      <div className=\"row justify-content-center pb-3\">\n        <Block\n          title=\"Woensdag &amp; vrijdag\"\n          url=\"/trainingen\"\n          linkText=\"Meer info\"\n        >\n          <dl className=\"row\">\n            <dt className=\"col-sm-8\">Juniores (6–9jaar)</dt>\n            <dd className=\"col-sm-4\">18–18u50</dd>\n            <dt className=\"col-sm-8\">Juniores (10–13jaar)</dt>\n            <dd className=\"col-sm-4\">19–20u</dd>\n            <dt className=\"col-sm-8\">Seniores (vanaf 14 jaar)</dt>\n            <dd className=\"col-sm-4\">20–21u30</dd>\n          </dl>\n        </Block>\n\n        <Block title=\"Dojo\" url=\"dojo\" linkText=\"Meer info\">\n          <>\n            <address>\n              Jan De Windtstraat 59\n              <br />\n              9300 Aalst\n            </address>\n          </>\n        </Block>\n      </div>\n      <div className=\"row justify-content-center pb-3\">\n        <Video videoID=\"CNlzDPVBIO8\" description=\"Jiu-Jitsu Yukio Tani Aalst\" />\n      </div>\n      <div className=\"row justify-content-center pb-3\">\n        <Video\n          videoID=\"GNnvVDDL3tI\"\n          description=\"Yukio Tani Aalst - training\"\n        />\n\n        <Video\n          videoID=\"abuiks52zOs\"\n          description=\"Yukio Tani Aalst - Leslie Ottoey Sportpromotie 2019\"\n        />\n      </div>\n    </Layout>\n  )\n}\n\nexport default Home\n\nexport const indexPageQuery = graphql`\n  query indexPage($id: String!) {\n    markdownRemark(id: { eq: $id }) {\n      html\n      frontmatter {\n        title\n        subTitle\n        tagline\n        hero {\n          childImageSharp {\n            fluid(maxWidth: 400, quality: 80) {\n              ...GatsbyImageSharpFluid_withWebp\n              ...GatsbyImageSharpFluidLimitPresentationSize\n            }\n          }\n        }\n      }\n    }\n  }\n`\n"],"sourceRoot":""}