{"version":3,"sources":["webpack://gatsby-test-notion-api/./src/layout.js","webpack://gatsby-test-notion-api/./src/pages/index.js"],"names":["Layout","children","className","to","role","aria-label","href","pages","data","allMarkdownRemark","edges","map","node","key","frontmatter","slug","title"],"mappings":"0LAGaA,EAAS,SAAC,GAAD,IAAGC,EAAH,EAAGA,SAAH,OACrB,gCACC,uBAAKC,UAAU,mCACd,0BACC,sBAAIA,UAAU,OACb,gBAAC,KAAD,CAAMC,GAAG,KACR,wBACCD,UAAU,mDACVE,KAAK,MACLC,aAAW,QAHZ,UAYJ,wBAAMH,UAAU,uDAAuDD,GAEvE,0BAAQC,UAAU,4GACjB,+FACoE,2CAA2B,IAD/F,4BAIA,uBAAKA,UAAU,wCACd,qBAAGI,KAAK,gCAAR,WACA,qBAAGA,KAAK,kCAAR,aACA,qBAAGA,KAAK,+BAAR,UACA,qBAAGA,KAAK,qBAAR,SAED,yBACC,qBAAGA,KAAK,qBAAR,4B,8DCyGJ,UAvIkB,SAAC,GAAc,IACzBC,EADwB,EAAXC,KACAC,kBAAkBC,MAErC,OACE,gBAAC,IAAD,KACE,2BAASR,UAAU,8CACjB,sBAAIA,UAAU,iDACZ,qBAAGI,KAAK,wBACN,wBAAMJ,UAAU,gDAAhB,WAGG,IALP,IAMI,IACF,qBAAGI,KAAK,qBACN,wBAAMJ,UAAU,8CAAhB,WAGG,IAXP,IAYI,IACF,qBAAGI,KAAK,0DACN,wBACEJ,UAAU,6CACVE,KAAK,MACLC,aAAW,SAHb,QASJ,qBAAGH,UAAU,kBAAb,MAGF,uBAAKA,UAAU,uCACb,sHAEyB,IACvB,qBAAGI,KAAK,0DAAR,4BAEK,IALP,sDASA,yCACgB,IACd,qBAAGA,KAAK,wDAAR,oBAEK,IAJP,yDAQA,sEAC6C,IAC3C,qBAAGA,KAAK,2BAAR,eAFF,QAEyD,IACvD,mCAHF,+BAMA,oIAEuC,6CAFvC,MAEqE,IACnE,mCAHF,mFAI+B,6CAJ/B,KAOA,sBAAIJ,UAAU,YAAd,iDAIA,2BACE,0BACGK,EAAMI,KAAI,gBAAGC,EAAH,EAAGA,KAAH,OACT,sBAAIC,IAAKD,EAAKE,YAAYC,MACxB,qBAAGT,KAAMM,EAAKE,YAAYC,MAAOH,EAAKE,YAAYE,aAM1D,sBAAId,UAAU,YAAd,WAEA,mFAC0D,IACxD,2CAFF,6DAGe,wDAHf,yIAQA,sBAAIA,UAAU,YAAd,wBAEA,2BACE,0BACE,0BACE,qBAAGI,KAAK,qBAAR,WAEF,0BACE,qBAAGA,KAAK,wBAAR,WAEF,0BACE,qBAAGA,KAAK,sGAAR,iDAIF,0BACE,qBAAGA,KAAK,6DAAR,gCAKF,0BACE,qBAAGA,KAAK,0DACN,wDADF,YAIF,0BACE,qBAAGA,KAAK,4DACN,wDADF,eAIF,0BACE,qBAAGA,KAAK,kFACN,wDADF,qBAIF,0BACE,qBAAGA,KAAK,iDAAR","file":"component---src-pages-index-js-b40ee738e1ba8ca1f36c.js","sourcesContent":["import { Link } from \"gatsby\"\nimport React from \"react\"\n\nexport const Layout = ({ children }) => (\n\t<>\n\t\t<nav className=\"flex py-2 lg:py-5 lg:px-3 fixed\">\n\t\t\t<ol>\n\t\t\t\t<li className=\"m-5\">\n\t\t\t\t\t<Link to=\"/\">\n\t\t\t\t\t\t<span\n\t\t\t\t\t\t\tclassName=\"px-3 py-3.5 bg-violet-300 rounded-full shadow-lg\"\n\t\t\t\t\t\t\trole=\"img\"\n\t\t\t\t\t\t\taria-label=\"home\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t🏠\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</Link>\n\t\t\t\t</li>\n\t\t\t</ol>\n\t\t</nav>\n\n\t\t<main className=\"space-y-5 mb-12 flex flex-col space-y-12 bg-gray-50\">{children}</main>\n\n\t\t<footer className=\"flex flex-col align-middle text-center justify-center p-12 bg-violet-200 text-xs text-gray-700 space-y-5\">\n\t\t\t<p>\n\t\t\t\tYou can reach me out here for questions, feedback, or just a talk (<strong>@orlowdev</strong>{\" \"}\n\t\t\t\tpretty much everywhere):\n\t\t\t</p>\n\t\t\t<div className=\"flex space-x-3 self-center underline\">\n\t\t\t\t<a href=\"https://twitter.com/orlowdev\">Twitter</a>\n\t\t\t\t<a href=\"https://instagram.com/orlowdev\">Instagram</a>\n\t\t\t\t<a href=\"https://github.com/orlowdev\">GitHub</a>\n\t\t\t\t<a href=\"https://orlow.dev\">Blog</a>\n\t\t\t</div>\n\t\t\t<p>\n\t\t\t\t<a href=\"https://orlow.dev\">&copy; Sergei Orlov 2021</a>\n\t\t\t</p>\n\t\t</footer>\n\t</>\n)\n","import { graphql } from \"gatsby\";\nimport * as React from \"react\";\nimport { Layout } from \"../layout\";\n\n// markup\nconst IndexPage = ({ data }) => {\n  const pages = data.allMarkdownRemark.edges;\n\n  return (\n    <Layout>\n      <section className=\"pt-28 pb-20 px-5 text-center bg-violet-500\">\n        <h1 className=\"text-5xl lg:text-7xl leading-loose font-black\">\n          <a href=\"https://gatsbyjs.com\">\n            <span className=\"bg-violet-400 px-4 py-2 rounded-md shadow-md\">\n              Gatsby\n            </span>\n          </a>{\" \"}\n          +{\" \"}\n          <a href=\"https://notion.so\">\n            <span className=\"bg-gray-400 px-4 py-2 rounded-md shadow-md\">\n              Notion\n            </span>\n          </a>{\" \"}\n          ={\" \"}\n          <a href=\"https://www.npmjs.com/package/gatsby-source-notion-api\">\n            <span\n              className=\"bg-rose-400 px-4 py-2 rounded-md shadow-md\"\n              role=\"img\"\n              aria-label=\"heart\"\n            >\n              ♥️\n            </span>\n          </a>\n        </h1>\n        <p className=\"text-4xl mt-14\">↓</p>\n      </section>\n\n      <div className=\"prose prose-purple px-5 self-center\">\n        <p>\n          This is a demo website that uses Notion.so as a backend for Gatsby.\n          This is possible using{\" \"}\n          <a href=\"https://www.npmjs.com/package/gatsby-source-notion-api\">\n            gatsby-source-notion-api\n          </a>{\" \"}\n          plugin that works with official public Notion API.\n        </p>\n\n        <p>\n          Check out the{\" \"}\n          <a href=\"https://github.com/orlowdev/gatsby-source-notion-api\">\n            README on GitHub\n          </a>{\" \"}\n          for the latest information on how to use the package.\n        </p>\n\n        <p>\n          The styling of this demo site is done with{\" \"}\n          <a href=\"https://tailwindcss.com\">TailwindCSS</a> with{\" \"}\n          <strong>0</strong> lines of CSS code written.\n        </p>\n\n        <p>\n          Thanks to simple and convenient API provided by MarkdownRemark and\n          MDX, you can query Notion pages with <code>mardownRemark</code> or{\" \"}\n          <code>mdx</code> if you use them. For your convenience, all Notion\n          page properties are put into <strong>frontmatter</strong>.\n        </p>\n\n        <h2 className=\"text-2lg\">\n          Here is the list of pages coming from Notion:\n        </h2>\n\n        <nav>\n          <ol>\n            {pages.map(({ node }) => (\n              <li key={node.frontmatter.slug}>\n                <a href={node.frontmatter.slug}>{node.frontmatter.title}</a>\n              </li>\n            ))}\n          </ol>\n        </nav>\n\n        <h2 className=\"text-2lg\">Caveats</h2>\n\n        <p>\n          Currently Notion API returns many blocks with a type of{\" \"}\n          <code>unsupported</code>. They will hopefully become available later\n          on. For now, <code>gatsby-source-notion-api</code> marks places for\n          these blocks with an HTML comment. All attachment blocks are not\n          supported. Unfortunately, it also includes images.\n        </p>\n\n        <h2 className=\"text-2lg\">Additional Resources</h2>\n\n        <nav>\n          <ol>\n            <li>\n              <a href=\"https://notion.so\">Notion</a>\n            </li>\n            <li>\n              <a href=\"https://gatsbyjs.com\">Gatsby</a>\n            </li>\n            <li>\n              <a href=\"https://www.notion.so/orlowdev/0549d94d05524848934d748d1d0a039d?v=e78d3774bdac4aa38b11f9386d16701d\">\n                Notion database this website takes data from\n              </a>\n            </li>\n            <li>\n              <a href=\"https://github.com/orlowdev/gatsby-source-notion-api-demo\">\n                Source code of this website\n              </a>\n            </li>\n\n            <li>\n              <a href=\"https://www.npmjs.com/package/gatsby-source-notion-api\">\n                <code>gatsby-source-notion-api</code> on NPM\n              </a>\n            </li>\n            <li>\n              <a href=\"https://www.github.com/orlowdev/gatsby-source-notion-api\">\n                <code>gatsby-source-notion-api</code> on GitHub\n              </a>\n            </li>\n            <li>\n              <a href=\"https://www.gatsbyjs.com/plugins/gatsby-source-notionso/?=gatsby-source-notion\">\n                <code>gatsby-source-notion-api</code> on GatsbyJS.com\n              </a>\n            </li>\n            <li>\n              <a href=\"https://developers.notion.com/reference/intro\">\n                Notion API reference\n              </a>\n            </li>\n          </ol>\n        </nav>\n      </div>\n    </Layout>\n  );\n};\n\nexport default IndexPage;\n\nexport const query = graphql`\n  query IndexPage {\n    allMarkdownRemark {\n      edges {\n        node {\n          frontmatter {\n            title\n            slug\n          }\n        }\n      }\n    }\n  }\n`;\n"],"sourceRoot":""}