component---src-app-templates-post-template-post-layout-ui-tsx-content-file-path-posts-2020-03-16-etc-token-md-2ef41986cb74fe5219de.js.map

{"version":3,"file":"component---src-app-templates-post-template-post-layout-ui-tsx-content-file-path-posts-2020-03-16-etc-token-md-2ef41986cb74fe5219de.js","mappings":"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","sources":["webpack://kyoungah-dev-blog/./posts/2020-03-16-etc-token.md","webpack://kyoungah-dev-blog/./src/app/templates/post-template/post-layout.ui.tsx","webpack://kyoungah-dev-blog/./src/app/templates/post-template/components/post-layout-content/post-layout.content.module.css","webpack://kyoungah-dev-blog/./src/app/templates/post-template/components/post-layout-content/post-layout-content.ui.tsx","webpack://kyoungah-dev-blog/./src/app/templates/post-template/components/post-layout-date/post-layout-date.module.css","webpack://kyoungah-dev-blog/./src/app/templates/post-template/components/post-layout-date/post-layout-date.tsx","webpack://kyoungah-dev-blog/./src/app/templates/post-template/components/post-layout-tags/post-layout.module.css","webpack://kyoungah-dev-blog/./src/app/templates/post-template/components/post-layout-tags/post-layout-tags.ui.tsx","webpack://kyoungah-dev-blog/./src/app/templates/post-template/components/post-layout-title/post-layout-title.module.css","webpack://kyoungah-dev-blog/./src/app/templates/post-template/components/post-layout-title/post-layout-title.ui.tsx","webpack://kyoungah-dev-blog/./src/entities/tags/index.ts","webpack://kyoungah-dev-blog/./src/entities/tags/tags.ui.tsx","webpack://kyoungah-dev-blog/./src/entities/tags/tags.module.css","webpack://kyoungah-dev-blog/./src/shared/uis/tag/tag.ui.tsx","webpack://kyoungah-dev-blog/./src/shared/uis/tag/tag.module.css","webpack://kyoungah-dev-blog/./src/shared/uis/container/container.module.css","webpack://kyoungah-dev-blog/./src/shared/uis/container/container.ui.tsx","webpack://kyoungah-dev-blog/./src/widgets/basic-layout/basic-layout.module.css","webpack://kyoungah-dev-blog/./src/widgets/basic-layout/basic-layout.ui.tsx","webpack://kyoungah-dev-blog/./src/widgets/header/header.module.css","webpack://kyoungah-dev-blog/./src/widgets/header/header.ui.tsx","webpack://kyoungah-dev-blog/./src/widgets/footer/footer.module.css","webpack://kyoungah-dev-blog/./src/widgets/footer/footer.ui.tsx","webpack://kyoungah-dev-blog/./src/widgets/default-layout/default-layout.ui.tsx","webpack://kyoungah-dev-blog/./src/app/templates/post-template/post-layout.module.css","webpack://kyoungah-dev-blog/./node_modules/@mdx-js/react/lib/index.js","webpack://kyoungah-dev-blog/./node_modules/clsx/dist/clsx.mjs"],"sourcesContent":["/*@jsxRuntime classic @jsx React.createElement @jsxFrag React.Fragment*/\nimport {useMDXComponents as _provideComponents} from \"@mdx-js/react\";\nimport React from \"react\";\nfunction _createMdxContent(props) {\n  const _components = Object.assign({\n    h2: \"h2\",\n    h3: \"h3\",\n    ul: \"ul\",\n    li: \"li\",\n    ol: \"ol\",\n    p: \"p\",\n    span: \"span\",\n    a: \"a\",\n    blockquote: \"blockquote\"\n  }, _provideComponents(), props.components);\n  return React.createElement(React.Fragment, null, React.createElement(_components.h2, null, \"세션기반 인증 방식\"), \"\\n\", React.createElement(_components.h3, null, \"세션\"), \"\\n\", React.createElement(_components.ul, null, \"\\n\", React.createElement(_components.li, null, \"일정시간 동안 같은 사용자로부터 들어오는 일련의 요구를 하나의 상태로 보고 그 상태를 일정하기 유지시키는 기술.\", \"\\n\", React.createElement(_components.ul, null, \"\\n\", React.createElement(_components.li, null, \"일정시간이란 방문자가 클라이언트를 통해 서버에 접속한 시점으로부터 방문자가 클라이언트를 종료함으로써 연결을 끝내는 시점.\"), \"\\n\"), \"\\n\"), \"\\n\"), \"\\n\", React.createElement(_components.h3, null, \"세션 기반 인증 방식 FLOW\"), \"\\n\", React.createElement(_components.ol, null, \"\\n\", React.createElement(_components.li, null, \"\\n\", React.createElement(_components.p, null, \"사용자가 로그인을 한다.\"), \"\\n\", React.createElement(_components.ul, null, \"\\n\", React.createElement(_components.li, null, \"사용자가 입력한 로그인 정보를 서버로 전달(Request).\"), \"\\n\"), \"\\n\"), \"\\n\", React.createElement(_components.li, null, \"\\n\", React.createElement(_components.p, null, \"서버는 사용자의 Request를 받아 사용자 검증을 한다. 유효할 경우 사용자의 고유한 ID값을 부여하여 세션 저장소에 저장한 후, 이와 연결되는 세션 ID를 생성하여 response header에 포함시켜 반환한다.\"), \"\\n\", React.createElement(_components.ul, null, \"\\n\", React.createElement(_components.li, null, \"대부분의 경우 세션 정보를 서버 메모리 OR DB에 저장한다.\"), \"\\n\"), \"\\n\"), \"\\n\", React.createElement(_components.li, null, \"\\n\", React.createElement(_components.p, null, \"사용자는 서버에서 해당 세션 ID를 받아 쿠키에 저장한 후, 인증이 필요한 요청에 접근할 때 마다 쿠키를 request header에 포함시켜 보낸다.\"), \"\\n\"), \"\\n\", React.createElement(_components.li, null, \"\\n\", React.createElement(_components.p, null, \"서버는 쿠키를 받아 세션 저장소에서 검증한 후, 요청에 해당하는 데이터를 반환한다.\"), \"\\n\"), \"\\n\"), \"\\n\", React.createElement(_components.h2, null, \"토큰기반 인증 방식\"), \"\\n\", React.createElement(_components.ul, null, \"\\n\", React.createElement(_components.li, null, \"인증 받은 사용자들에게 토큰을 발급하고 서버에 요청을 할 때 header에 토큰을 함께 보내도록 하여 유효성 검사를 하는 방식.\"), \"\\n\"), \"\\n\", React.createElement(_components.h3, null, \"토큰 기반 인증 방식 FLOW\"), \"\\n\", React.createElement(_components.ol, null, \"\\n\", React.createElement(_components.li, null, \"사용자가 로그인을 한다.\", \"\\n\", React.createElement(_components.ul, null, \"\\n\", React.createElement(_components.li, null, \"사용자가 입력한 로그인 정보를 서버로 전달(Request).\"), \"\\n\"), \"\\n\"), \"\\n\", React.createElement(_components.li, null, \"서버는 사용자의 Request를 받아 사용자 검증을 한다. 유효할 경우 서버측에서 유저에게 정상적으로 발급된 토큰임을 증명하는 signature를 갖는 토큰을 발급해준다.\"), \"\\n\", React.createElement(_components.li, null, \"클라이언트 측에서 전달받은 토큰을 저장해두고 서버에 요청할 때 마다 해당 토큰을 서버에 같이 전달한다.\"), \"\\n\", React.createElement(_components.li, null, \"서버는 토큰을 검증하고 요청에 응답한다.\"), \"\\n\"), \"\\n\", React.createElement(_components.h3, null, \"특징\"), \"\\n\", React.createElement(_components.ul, null, \"\\n\", React.createElement(_components.li, null, \"무상태(stateless)이며 확장성이 있다.\", \"\\n\", React.createElement(_components.ul, null, \"\\n\", React.createElement(_components.li, null, \"토큰을 클라이언트에 저장하기 때문에 완전히 stateless 하다.\"), \"\\n\", React.createElement(_components.li, null, \"클라이언트와 서버의 연결고리가 없기 떄문에 서버의 확장성이 높아진다.\"), \"\\n\"), \"\\n\"), \"\\n\", React.createElement(_components.li, null, \"플랫폼간 권한 공유\", \"\\n\", React.createElement(_components.ul, null, \"\\n\", React.createElement(_components.li, null, \"페이스북, 구글 같은 소설 계정들을 이용하여 다른 서비스에서도 권한을 공유할 수 있다(OAuth).\", \"\\n\", React.createElement(_components.ul, null, \"\\n\", React.createElement(_components.li, null, \"OAuth: 인터넷 사용자들이 비밀번호를 제공하지 않고 다른 웹사이트 상의 자신들의 정보에 대해 웹사이트나 애플리케이션의 접근권한을 부여할 수 있는 공통적인 수단으로서 사용되는 접금 위임을 위한 개방형 표준.\"), \"\\n\"), \"\\n\"), \"\\n\"), \"\\n\"), \"\\n\", React.createElement(_components.li, null, \"여러 플랫폼 및 도메인\", \"\\n\", React.createElement(_components.ul, null, \"\\n\", React.createElement(_components.li, null, \"토큰을 사용하면 어떤 디바이스나 도메인에도 토큰만 유효하다면 요청이 정상적으로 처리된다.\", \"\\n\", React.createElement(_components.ul, null, \"\\n\", React.createElement(_components.li, null, \"서버측에서 어플리케이션 응답 부분에 \", React.createElement(_components.span, {\n    dangerouslySetInnerHTML: {\n      __html: \"<code class=\\\"language-text\\\">Access-Control-Allow-Origin: *</code>\"\n    }\n  }), \"를 header에 포함시켜주면 된다.\"), \"\\n\"), \"\\n\"), \"\\n\"), \"\\n\"), \"\\n\", React.createElement(_components.li, null, \"웹 표준 기반\", \"\\n\", React.createElement(_components.ul, null, \"\\n\", React.createElement(_components.li, null, \"토큰 기반 인증 시스템의 구현체인 \", React.createElement(_components.a, {\n    href: \"https://jwt.io/\"\n  }, \"JWT\"), \"는 개방형 표준 \", React.createElement(_components.a, {\n    href: \"https://tools.ietf.org/html/rfc7519\"\n  }, \"RFC 7519\"), \"에 등록되어 있다.\"), \"\\n\"), \"\\n\"), \"\\n\", React.createElement(_components.li, null, \"CSRF(Cross-site Request Forgery, 사이트간 요청위조) 방지.\", \"\\n\", React.createElement(_components.ul, null, \"\\n\", React.createElement(_components.li, null, \"세션 기반 방식은 쿠키가 사용자 정보를 가지고 있기 때문에 사용자가 로그인한 상태에서 사이트간 요청 위조 공격 코드가 삽입된 페이지를 열어도 서버는 요청을 신뢰하고 작업을 수행하게 된다. 그러나 토큰 기반 인증에서는 header 내에 토큰이 포함되어 있으므로 CSRF를 방지할 수 있다.\", \"\\n\", React.createElement(_components.ul, null, \"\\n\", React.createElement(_components.li, null, \"토큰을 사용하는 환경에서도 취약점이 존재 할 수 있으니 언제나 취약점에 대비해야 한다.\"), \"\\n\"), \"\\n\"), \"\\n\"), \"\\n\"), \"\\n\"), \"\\n\", React.createElement(_components.h2, null, \"Reference\"), \"\\n\", React.createElement(_components.blockquote, null, \"\\n\", React.createElement(_components.ul, null, \"\\n\", React.createElement(_components.li, null, React.createElement(_components.a, {\n    href: \"https://88240.tistory.com/190\"\n  }, \"Session 이란?\")), \"\\n\", React.createElement(_components.li, null, React.createElement(_components.a, {\n    href: \"https://dooopark.tistory.com/6\"\n  }, \"서버 기반 인증, 토큰 기반 인증 (Session, Cookie / JSON Web Token)\")), \"\\n\", React.createElement(_components.li, null, React.createElement(_components.a, {\n    href: \"https://velopert.com/2350\"\n  }, \"[JWT] 토큰(Token) 기반 인증에 대한 소개\")), \"\\n\"), \"\\n\"));\n}\nfunction MDXContent(props = {}) {\n  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n  return MDXLayout ? React.createElement(MDXLayout, props, React.createElement(_createMdxContent, props)) : _createMdxContent(props);\n}\nexport default MDXContent;\n","import React from \"react\";\nimport GATSBY_COMPILED_MDX from \"/Users/yookyoung.park/Workspace/kyoungah-dev-blog/posts/2020-03-16-etc-token.md\";\nimport {MDXProvider} from '@mdx-js/react';\nimport {Container} from '@/shared/uis/container';\nimport {DefaultLayout} from '@/widgets/default-layout';\nimport {PostLayoutContent} from './components/post-layout-content';\nimport {PostLayoutDate} from './components/post-layout-date';\nimport {PostLayoutTags} from './components/post-layout-tags';\nimport {PostLayoutTitle} from './components/post-layout-title';\nimport {postLayoutContainer, postLayoutTitle} from './post-layout.module.css';\nimport {jsx as _jsx} from \"react/jsx-runtime\";\nimport {jsxs as _jsxs} from \"react/jsx-runtime\";\nfunction PostLayout(_ref) {\n  var _data$mdx$frontmatter, _data$mdx;\n  let {data, children} = _ref;\n  const {date, tags, title} = (_data$mdx$frontmatter = data === null || data === void 0 ? void 0 : (_data$mdx = data.mdx) === null || _data$mdx === void 0 ? void 0 : _data$mdx.frontmatter) !== null && _data$mdx$frontmatter !== void 0 ? _data$mdx$frontmatter : {};\n  return _jsx(DefaultLayout, {\n    children: _jsxs(Container, {\n      className: postLayoutContainer,\n      children: [_jsx(PostLayoutTitle, {\n        className: postLayoutTitle,\n        title: title\n      }), _jsx(PostLayoutDate, {\n        date: date\n      }), _jsx(PostLayoutTags, {\n        tags: tags\n      }), _jsx(PostLayoutContent, {\n        children: _jsx(MDXProvider, {\n          children: children\n        })\n      })]\n    })\n  });\n}\nconst query = \"1347208223\";\nPostLayout\nexport default function GatsbyMDXWrapper(props) {\n  return React.createElement(PostLayout, props, React.createElement(GATSBY_COMPILED_MDX, props));\n}\n","// extracted by mini-css-extract-plugin\nexport var postLayoutContentRoot = \"post-layout-content-module--post-layout-content-root--01754\";","import { clsx } from \"clsx\";\nimport { type HTMLAttributes, type PropsWithChildren } from \"react\";\n\nimport { postLayoutContentRoot } from \"./post-layout.content.module.css\";\n\ntype Props = PropsWithChildren & HTMLAttributes<HTMLDivElement>;\n\nfunction PostLayoutContent({ children, className, ...props }: Props) {\n  return (\n    <div className={clsx(postLayoutContentRoot, className)} {...props}>\n      {children}\n    </div>\n  );\n}\n\nexport { PostLayoutContent };\n","// extracted by mini-css-extract-plugin\nexport var postLayoutDateRoot = \"post-layout-date-module--post-layout-date-root--f34d1\";","import { clsx } from \"clsx\";\nimport { type HTMLAttributes } from \"react\";\n\nimport { postLayoutDateRoot } from \"./post-layout-date.module.css\";\n\ntype Props = { date: string } & HTMLAttributes<HTMLHeadingElement>;\n\nfunction PostLayoutDate({ className, date, ...props }: Props) {\n  return (\n    <span className={clsx(postLayoutDateRoot, className)} {...props}>\n      {date}\n    </span>\n  );\n}\n\nexport { PostLayoutDate };\n","// extracted by mini-css-extract-plugin\nexport var postLayoutTags = \"post-layout-module--post-layout-tags--837df\";","import { Tags } from \"@/entities/tags\";\nimport { Link } from \"gatsby\";\n\nimport { postLayoutTags } from \"./post-layout.module.css\";\n\ntype Props = { tags: string[] };\n\nfunction PostLayoutTags({ tags }: Props) {\n  return (\n    <Tags className={postLayoutTags}>\n      {tags.map((tag) => (\n        <Link key={tag} to={`/tags/${tag}`}>\n          <Tags.Tag tag={tag} />\n        </Link>\n      ))}\n    </Tags>\n  );\n}\n\nexport { PostLayoutTags };\n","// extracted by mini-css-extract-plugin\nexport var postLayoutTitleRoot = \"post-layout-title-module--post-layout-title-root--88374\";","import { clsx } from \"clsx\";\nimport { postLayoutTitleRoot } from \"./post-layout-title.module.css\";\nimport { HTMLAttributes } from \"react\";\n\ntype Props = { title: string } & HTMLAttributes<HTMLHeadingElement>;\n\nfunction PostLayoutTitle({ className, title, ...props }: Props) {\n  return (\n    <h1 className={clsx(postLayoutTitleRoot, className)} {...props}>\n      {title}\n    </h1>\n  );\n}\n\nexport { PostLayoutTitle };\n","import { Tag } from '@/shared/uis/tag';\nimport { Tags } from './tags.ui';\n\nconst ComposedTags = Object.assign(Tags, {\n  Tag,\n});\n\nexport { ComposedTags as Tags };\n","import { PropsWithChildren, type HTMLAttributes } from 'react';\nimport { clsx } from 'clsx';\n\nimport { tagsRoot } from './tags.module.css';\n\ntype Props = PropsWithChildren & HTMLAttributes<HTMLDivElement>;\n\nfunction Tags({ children, className, ...props }: Props) {\n  return (\n    <div className={clsx(tagsRoot, className)} {...props}>\n      {children}\n    </div>\n  );\n}\n\nexport { Tags };\n","// extracted by mini-css-extract-plugin\nexport var show = \"tags-module--show--7704b\";\nexport var tagsRoot = \"tags-module--tags-root--e3461\";","import { clsx } from 'clsx';\n\nimport type { HTMLAttributes, ReactNode } from 'react';\n\nimport { tagRoot } from './tag.module.css';\n\ntype Props = {\n  tag: ReactNode;\n} & HTMLAttributes<HTMLSpanElement>;\n\nfunction Tag({ className, tag, ...props }: Props) {\n  return (\n    <span className={clsx(tagRoot, className)} {...props}>\n      {tag}\n    </span>\n  );\n}\n\nexport type { Props as TagProps };\nexport { Tag };\n","// extracted by mini-css-extract-plugin\nexport var tagRoot = \"tag-module--tag-root--aae01\";","// extracted by mini-css-extract-plugin\nexport var containerRoot = \"container-module--container-root--3b208\";","import { clsx } from 'clsx';\nimport type { PropsWithChildren, HTMLAttributes } from 'react';\n\nimport { containerRoot } from './container.module.css';\n\ntype Props = PropsWithChildren & HTMLAttributes<HTMLSpanElement>;\n\nfunction Container({ children, className, ...props }: Props) {\n  return (\n    <div className={clsx(containerRoot, className)} {...props}>\n      {children}\n    </div>\n  );\n}\n\nexport { Container };\n","// extracted by mini-css-extract-plugin\nexport var basicLayoutRoot = \"basic-layout-module--basic-layout-root--a11e0\";","import { clsx } from 'clsx';\nimport { type HTMLAttributes, type PropsWithChildren } from 'react';\n\nimport { basicLayoutRoot } from './basic-layout.module.css';\n\ntype Props = PropsWithChildren & HTMLAttributes<HTMLDivElement>;\n\nfunction BasicLayout({ children, className, ...props }: Props) {\n  return (\n    <div className={clsx(basicLayoutRoot, className)} {...props}>\n      {children}\n    </div>\n  );\n}\n\nexport { BasicLayout };\n","// extracted by mini-css-extract-plugin\nexport var about = \"header-module--about--32ac9\";\nexport var headerLogo = \"header-module--header-logo--5bbdc\";\nexport var headerNavigation = \"header-module--header-navigation--24bcb\";\nexport var headerNavigationItem = \"header-module--header-navigation-item--ba248\";\nexport var headerNavigationItemLink = \"header-module--header-navigation-item-link--d6da9\";\nexport var headerNavigationList = \"header-module--header-navigation-list--3815c\";\nexport var headerRoot = \"header-module--header-root--01ceb\";\nexport var tags = \"header-module--tags--eb332\";","import { Link } from 'gatsby';\nimport { clsx } from 'clsx';\n\nimport {\n  about,\n  headerRoot,\n  headerLogo,\n  headerNavigation,\n  headerNavigationList,\n  headerNavigationItem,\n  headerNavigationItemLink,\n  tags,\n} from './header.module.css';\n\nfunction Header() {\n  return (\n    <header className={headerRoot}>\n      <Link to=\"/\">\n        <img\n          src=\"/images/logo.png\"\n          srcSet={`/images/logo-small.png 200w, /images/logo.png 300w`}\n          sizes=\"(max-width: 360px) 200px, 300px\"\n          alt=\"dev.kyoungah.me\"\n          className={headerLogo}\n        />\n      </Link>\n      <nav className={headerNavigation}>\n        <ul className={headerNavigationList}>\n          <li className={headerNavigationItem}>\n            <Link to=\"/tags\">\n              <span\n                aria-label=\"tags\"\n                className={clsx(headerNavigationItemLink, tags)}\n              />\n            </Link>\n          </li>\n          <li className={headerNavigationItem}>\n            <a href=\"/about\" rel=\"noopener\" target=\"_blank\">\n              <span\n                aria-label=\"about\"\n                className={clsx(headerNavigationItemLink, about)}\n              />\n            </a>\n          </li>\n        </ul>\n      </nav>\n    </header>\n  );\n}\n\nexport { Header };\n","// extracted by mini-css-extract-plugin\nexport var footerRoot = \"footer-module--footer-root--795ff\";","import { footerRoot } from './footer.module.css';\n\nfunction Footer() {\n  return (\n    <footer className={footerRoot}>\n      <span>Powered by Gatsby, Hosted by GitHub Pages.</span>\n      <span>\n        ©\n        <a\n          href=\"https://github.com/partykyoung\"\n          rel=\"noreferrer\"\n          target=\"_blank\">\n          KyoungAh\n        </a>\n        , All rights reserved.\n      </span>\n    </footer>\n  );\n}\n\nexport { Footer };\n","import type { PropsWithChildren } from \"react\";\n\nimport { Header } from \"../header\";\nimport { Footer } from \"../footer\";\nimport { BasicLayout } from \"../basic-layout\";\n\nfunction DefaultLayout({ children }: PropsWithChildren) {\n  return (\n    <>\n      <Header />\n      <BasicLayout>{children}</BasicLayout>\n      <Footer />\n    </>\n  );\n}\n\nexport { DefaultLayout };\n","// extracted by mini-css-extract-plugin\nexport var postLayoutContainer = \"post-layout-module--post-layout-container--f40b5\";\nexport var postLayoutTitle = \"post-layout-module--post-layout-title--1c575\";","/**\n * @typedef {import('mdx/types.js').MDXComponents} MDXComponents\n * @typedef {import('react').Component<{}, {}, unknown>} Component\n * @typedef {import('react').ReactNode} ReactNode\n */\n\n/**\n * @callback MergeComponents\n *   Custom merge function.\n * @param {Readonly<MDXComponents>} currentComponents\n *   Current components from the context.\n * @returns {MDXComponents}\n *   Additional components.\n *\n * @typedef Props\n *   Configuration for `MDXProvider`.\n * @property {ReactNode | null | undefined} [children]\n *   Children (optional).\n * @property {Readonly<MDXComponents> | MergeComponents | null | undefined} [components]\n *   Additional components to use or a function that creates them (optional).\n * @property {boolean | null | undefined} [disableParentContext=false]\n *   Turn off outer component context (default: `false`).\n */\n\nimport React from 'react'\n\n/** @type {Readonly<MDXComponents>} */\nconst emptyComponents = {}\n\nconst MDXContext = React.createContext(emptyComponents)\n\n/**\n * Get current components from the MDX Context.\n *\n * @param {Readonly<MDXComponents> | MergeComponents | null | undefined} [components]\n *   Additional components to use or a function that creates them (optional).\n * @returns {MDXComponents}\n *   Current components.\n */\nexport function useMDXComponents(components) {\n  const contextComponents = React.useContext(MDXContext)\n\n  // Memoize to avoid unnecessary top-level context changes\n  return React.useMemo(\n    function () {\n      // Custom merge via a function prop\n      if (typeof components === 'function') {\n        return components(contextComponents)\n      }\n\n      return {...contextComponents, ...components}\n    },\n    [contextComponents, components]\n  )\n}\n\n/**\n * Provider for MDX context.\n *\n * @param {Readonly<Props>} properties\n *   Properties.\n * @returns {JSX.Element}\n *   Element.\n * @satisfies {Component}\n */\nexport function MDXProvider(properties) {\n  /** @type {Readonly<MDXComponents>} */\n  let allComponents\n\n  if (properties.disableParentContext) {\n    allComponents =\n      typeof properties.components === 'function'\n        ? properties.components(emptyComponents)\n        : properties.components || emptyComponents\n  } else {\n    allComponents = useMDXComponents(properties.components)\n  }\n\n  return React.createElement(\n    MDXContext.Provider,\n    {value: allComponents},\n    properties.children\n  )\n}\n","function r(e){var t,f,n=\"\";if(\"string\"==typeof e||\"number\"==typeof e)n+=e;else if(\"object\"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=\" \"),n+=f)}else for(f in e)e[f]&&(n&&(n+=\" \"),n+=f);return n}export function clsx(){for(var e,t,f=0,n=\"\",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=\" \"),n+=t);return n}export default clsx;"],"names":["_createMdxContent","props","_components","Object","assign","h2","h3","ul","li","ol","p","span","a","blockquote","_provideComponents","components","React","dangerouslySetInnerHTML","__html","href","wrapper","MDXLayout","PostLayout","_ref","_data$mdx$frontmatter","_data$mdx","data","children","date","tags","title","mdx","frontmatter","_jsx","DefaultLayout","_jsxs","Container","className","postLayoutContainer","PostLayoutTitle","postLayoutTitle","PostLayoutDate","PostLayoutTags","PostLayoutContent","MDXProvider","GatsbyMDXWrapper","GATSBY_COMPILED_MDX","postLayoutContentRoot","clsx","postLayoutDateRoot","postLayoutTags","Tags","map","tag","Link","to","Tag","postLayoutTitleRoot","ComposedTags","containerRoot","basicLayoutRoot","BasicLayout","about","headerLogo","headerNavigation","headerNavigationItem","headerNavigationItemLink","headerNavigationList","headerRoot","Header","src","srcSet","sizes","alt","rel","target","footerRoot","Footer","_Fragment","emptyComponents","MDXContext","useMDXComponents","contextComponents","properties","allComponents","disableParentContext","Provider","value","r","e","t","f","n","Array","isArray","o","length","arguments"],"sourceRoot":""}