{"componentChunkName":"component---gatsby-theme-mdx-deck-src-templates-deck-js","path":"/","matchPath":"/*","result":{"data":{"deck":{"id":"920dde17-3e7c-5715-b5bb-140fb80b5406","body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsx mdx */\nvar theme = customTheme;\nvar _frontmatter = {};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\n\nvar Appear = makeShortcode(\"Appear\");\nvar Split = makeShortcode(\"Split\");\nvar Notes = makeShortcode(\"Notes\");\nvar layoutProps = {\n  theme: theme,\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h1\", null, \"Intro to MDX Deck\"), mdx(\"hr\", null), mdx(\"h1\", null, \"Copernicus Tech Debt Demolition\"), mdx(Appear, {\n    mdxType: \"Appear\"\n  }, mdx(\"h3\", null, \"\\uD83D\\uDE4B\\u200D\\u2640\\uFE0F \", mdx(\"em\", {\n    parentName: \"h3\"\n  }, \"\\\"but how did you make the slides?\\\"\"))), mdx(\"hr\", null), mdx(CodeSurferColumns, {\n    sizes: [2, 3],\n    mdxType: \"CodeSurferColumns\"\n  }, mdx(Step, {\n    mdxType: \"Step\"\n  }, mdx(\"img\", {\n    src: onereqmanyres1\n  }), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"Alternative: Sideposting via Spraypaint \\\\\\\"with\\\\\\\" option\\\"\",\n    \"title\": \"\\\"Alternative:\",\n    \"Sideposting\": true,\n    \"via\": true,\n    \"Spraypaint\": true,\n    \"\\\\\\\"with\\\\\\\"\": true,\n    \"option\\\"\": true\n  }), \"  const householdMembers = members.map((member, idx) => {\\n    const incomes = member.incomes ? member.incomes.map(\\n      ({ incomeAmount, incomeType, notes, ssnClaimBenefitsNumber }) =>\\n        new IncomeResource({\\n          incomeType,\\n          notes,\\n          amount: incomeAmount,\\n          ssnClaimBenefitsNumber\\n        })\\n    ) : null\\n\\n    const assets = member.assets ? member.assets.map(\\n      ({annualIncome, cashValue, divestedDate, notes, status }) =>\\n        new AssetResource({\\n          status,\\n          cashValue,\\n          annualIncome,\\n          notes,\\n          divestedDate\\n        })\\n    ) : null\\n\\n    return new HouseholdMemberResource({\\n      ...member,\\n      incomes,\\n      assets\\n    })\\n  })\\n\\n  const certDetailModel = new Detail({\\n    subsidyType,\\n    effectiveDate,\\n    moveInDate,\\n    transactionType,\\n      // ... more attributes\\n    eligibilityCheckNotRequired,\\n    householdMembers\\n  })\\n\\n  const incomeCertificationCore = new IncomeCertificationCore()\\n  incomeCertificationCore.assignAttributes({\\n    id,\\n    unitUuid,\\n    certDetailType: projectType,\\n    certificationDetail: certDetailModel\\n  })\\n\\n  await incomeCertificationCore.save({\\n    with: {\\n      certificationDetail: {\\n        householdMembers: ['assets', 'incomes']\\n      }\\n    }\\n  })\\n\"))), mdx(Step, {\n    mdxType: \"Step\"\n  }, mdx(\"img\", {\n    src: onereqmanyres3\n  }), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\",\n    \"metastring\": \"2:10 title=\\\"Alternative: Sideposting via Spraypaint \\\\\\\"with\\\\\\\" option\\\" subtitle=\\\"Create Income resources\\\"\",\n    \"2:10\": true,\n    \"title\": \"\\\"Alternative:\",\n    \"Sideposting\": true,\n    \"via\": true,\n    \"Spraypaint\": true,\n    \"\\\\\\\"with\\\\\\\"\": true,\n    \"option\\\"\": true,\n    \"subtitle\": \"\\\"Create\",\n    \"Income\": true,\n    \"resources\\\"\": true\n  }), \"  const householdMembers = members.map((member, idx) => {\\n    const incomes = member.incomes ? member.incomes.map(\\n      ({ incomeAmount, incomeType, notes, ssnClaimBenefitsNumber }) =>\\n        new IncomeResource({\\n          incomeType,\\n          notes,\\n          amount: incomeAmount,\\n          ssnClaimBenefitsNumber\\n        })\\n    ) : null\\n\\n    const assets = member.assets ? member.assets.map(\\n      ({annualIncome, cashValue, divestedDate, notes, status }) =>\\n        new AssetResource({\\n          status,\\n          cashValue,\\n          annualIncome,\\n          notes,\\n          divestedDate\\n        })\\n    ) : null\\n\\n    return new HouseholdMemberResource({\\n      ...member,\\n      incomes,\\n      assets\\n    })\\n  })\\n\\n  const certDetailModel = new Detail({\\n    subsidyType,\\n    effectiveDate,\\n    moveInDate,\\n    transactionType,\\n      // ... more attributes\\n    eligibilityCheckNotRequired,\\n    householdMembers\\n  })\\n\\n  const incomeCertificationCore = new IncomeCertificationCore()\\n  incomeCertificationCore.assignAttributes({\\n    id,\\n    unitUuid,\\n    certDetailType: projectType,\\n    certificationDetail: certDetailModel\\n  })\\n\\n  await incomeCertificationCore.save({\\n    with: {\\n      certificationDetail: {\\n        householdMembers: ['assets', 'incomes']\\n      }\\n    }\\n  })\\n\"))), mdx(Step, {\n    mdxType: \"Step\"\n  }, mdx(\"img\", {\n    src: onereqmanyres4\n  }), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\",\n    \"metastring\": \"12:21 title=\\\"Alternative: Sideposting via Spraypaint \\\\\\\"with\\\\\\\" option\\\" subtitle=\\\"Create Asset resources\\\"\",\n    \"12:21\": true,\n    \"title\": \"\\\"Alternative:\",\n    \"Sideposting\": true,\n    \"via\": true,\n    \"Spraypaint\": true,\n    \"\\\\\\\"with\\\\\\\"\": true,\n    \"option\\\"\": true,\n    \"subtitle\": \"\\\"Create\",\n    \"Asset\": true,\n    \"resources\\\"\": true\n  }), \"  const householdMembers = members.map((member, idx) => {\\n    const incomes = member.incomes ? member.incomes.map(\\n      ({ incomeAmount, incomeType, notes, ssnClaimBenefitsNumber }) =>\\n        new IncomeResource({\\n          incomeType,\\n          notes,\\n          amount: incomeAmount,\\n          ssnClaimBenefitsNumber\\n        })\\n    ) : null\\n\\n    const assets = member.assets ? member.assets.map(\\n      ({annualIncome, cashValue, divestedDate, notes, status }) =>\\n        new AssetResource({\\n          status,\\n          cashValue,\\n          annualIncome,\\n          notes,\\n          divestedDate\\n        })\\n    ) : null\\n\\n    return new HouseholdMemberResource({\\n      ...member,\\n      incomes,\\n      assets\\n    })\\n  })\\n\\n  const certDetailModel = new Detail({\\n    subsidyType,\\n    effectiveDate,\\n    moveInDate,\\n    transactionType,\\n      // ... more attributes\\n    eligibilityCheckNotRequired,\\n    householdMembers\\n  })\\n\\n  const incomeCertificationCore = new IncomeCertificationCore()\\n  incomeCertificationCore.assignAttributes({\\n    id,\\n    unitUuid,\\n    certDetailType: projectType,\\n    certificationDetail: certDetailModel\\n  })\\n\\n  await incomeCertificationCore.save({\\n    with: {\\n      certificationDetail: {\\n        householdMembers: ['assets', 'incomes']\\n      }\\n    }\\n  })\\n\"))), mdx(Step, {\n    mdxType: \"Step\"\n  }, mdx(\"img\", {\n    src: onereqmanyres2\n  }), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\",\n    \"metastring\": \"23:27 title=\\\"Alternative: Sideposting via Spraypaint \\\\\\\"with\\\\\\\" option\\\" subtitle=\\\"Create Household Member Resource from Incomes and Assets\\\"\",\n    \"23:27\": true,\n    \"title\": \"\\\"Alternative:\",\n    \"Sideposting\": true,\n    \"via\": true,\n    \"Spraypaint\": true,\n    \"\\\\\\\"with\\\\\\\"\": true,\n    \"option\\\"\": true,\n    \"subtitle\": \"\\\"Create\",\n    \"Household\": true,\n    \"Member\": true,\n    \"Resource\": true,\n    \"from\": true,\n    \"Incomes\": true,\n    \"and\": true,\n    \"Assets\\\"\": true\n  }), \"  const householdMembers = members.map((member, idx) => {\\n    const incomes = member.incomes ? member.incomes.map(\\n      ({ incomeAmount, incomeType, notes, ssnClaimBenefitsNumber }) =>\\n        new IncomeResource({\\n          incomeType,\\n          notes,\\n          amount: incomeAmount,\\n          ssnClaimBenefitsNumber\\n        })\\n    ) : null\\n\\n    const assets = member.assets ? member.assets.map(\\n      ({annualIncome, cashValue, divestedDate, notes, status }) =>\\n        new AssetResource({\\n          status,\\n          cashValue,\\n          annualIncome,\\n          notes,\\n          divestedDate\\n        })\\n    ) : null\\n\\n    return new HouseholdMemberResource({\\n      ...member,\\n      incomes,\\n      assets\\n    })\\n  })\\n\\n  const certDetailModel = new Detail({\\n    subsidyType,\\n    effectiveDate,\\n    moveInDate,\\n    transactionType,\\n      // ... more attributes\\n    eligibilityCheckNotRequired,\\n    householdMembers\\n  })\\n\\n  const incomeCertificationCore = new IncomeCertificationCore()\\n  incomeCertificationCore.assignAttributes({\\n    id,\\n    unitUuid,\\n    certDetailType: projectType,\\n    certificationDetail: certDetailModel\\n  })\\n\\n  await incomeCertificationCore.save({\\n    with: {\\n      certificationDetail: {\\n        householdMembers: ['assets', 'incomes']\\n      }\\n    }\\n  })\\n\"))), mdx(Step, {\n    mdxType: \"Step\"\n  }, mdx(\"img\", {\n    src: onereqmanyres4_1\n  }), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\",\n    \"metastring\": \"1:27 title=\\\"Alternative: Sideposting via Spraypaint \\\\\\\"with\\\\\\\" option\\\" subtitle=\\\"Create Household Member Resource from Incomes and Assets\\\"\",\n    \"1:27\": true,\n    \"title\": \"\\\"Alternative:\",\n    \"Sideposting\": true,\n    \"via\": true,\n    \"Spraypaint\": true,\n    \"\\\\\\\"with\\\\\\\"\": true,\n    \"option\\\"\": true,\n    \"subtitle\": \"\\\"Create\",\n    \"Household\": true,\n    \"Member\": true,\n    \"Resource\": true,\n    \"from\": true,\n    \"Incomes\": true,\n    \"and\": true,\n    \"Assets\\\"\": true\n  }), \"  const householdMembers = members.map((member, idx) => {\\n    const incomes = member.incomes ? member.incomes.map(\\n      ({ incomeAmount, incomeType, notes, ssnClaimBenefitsNumber }) =>\\n        new IncomeResource({\\n          incomeType,\\n          notes,\\n          amount: incomeAmount,\\n          ssnClaimBenefitsNumber\\n        })\\n    ) : null\\n\\n    const assets = member.assets ? member.assets.map(\\n      ({annualIncome, cashValue, divestedDate, notes, status }) =>\\n        new AssetResource({\\n          status,\\n          cashValue,\\n          annualIncome,\\n          notes,\\n          divestedDate\\n        })\\n    ) : null\\n\\n    return new HouseholdMemberResource({\\n      ...member,\\n      incomes,\\n      assets\\n    })\\n  })\\n\\n  const certDetailModel = new Detail({\\n    subsidyType,\\n    effectiveDate,\\n    moveInDate,\\n    transactionType,\\n      // ... more attributes\\n    eligibilityCheckNotRequired,\\n    householdMembers\\n  })\\n\\n  const incomeCertificationCore = new IncomeCertificationCore()\\n  incomeCertificationCore.assignAttributes({\\n    id,\\n    unitUuid,\\n    certDetailType: projectType,\\n    certificationDetail: certDetailModel\\n  })\\n\\n  await incomeCertificationCore.save({\\n    with: {\\n      certificationDetail: {\\n        householdMembers: ['assets', 'incomes']\\n      }\\n    }\\n  })\\n\"))), mdx(Step, {\n    mdxType: \"Step\"\n  }, mdx(\"img\", {\n    src: onereqmanyres6\n  }), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\",\n    \"metastring\": \"48:56 title=\\\"Alternative: Sideposting via Spraypaint \\\\\\\"with\\\\\\\" option\\\" subtitle=\\\"Save the income certification \\\\\\\"with\\\\\\\" the related details, assets, and incomes resources\\\"\",\n    \"48:56\": true,\n    \"title\": \"\\\"Alternative:\",\n    \"Sideposting\": true,\n    \"via\": true,\n    \"Spraypaint\": true,\n    \"\\\\\\\"with\\\\\\\"\": true,\n    \"option\\\"\": true,\n    \"subtitle\": \"\\\"Save\",\n    \"the\": true,\n    \"income\": true,\n    \"certification\": true,\n    \"related\": true,\n    \"details,\": true,\n    \"assets,\": true,\n    \"and\": true,\n    \"incomes\": true,\n    \"resources\\\"\": true\n  }), \"  const householdMembers = members.map((member, idx) => {\\n    const incomes = member.incomes ? member.incomes.map(\\n      ({ incomeAmount, incomeType, notes, ssnClaimBenefitsNumber }) =>\\n        new IncomeResource({\\n          incomeType,\\n          notes,\\n          amount: incomeAmount,\\n          ssnClaimBenefitsNumber\\n        })\\n    ) : null\\n\\n    const assets = member.assets ? member.assets.map(\\n      ({annualIncome, cashValue, divestedDate, notes, status }) =>\\n        new AssetResource({\\n          status,\\n          cashValue,\\n          annualIncome,\\n          notes,\\n          divestedDate\\n        })\\n    ) : null\\n\\n    return new HouseholdMemberResource({\\n      ...member,\\n      incomes,\\n      assets\\n    })\\n  })\\n\\n  const certDetailModel = new Detail({\\n    subsidyType,\\n    effectiveDate,\\n    moveInDate,\\n    transactionType,\\n      // ... more attributes\\n    eligibilityCheckNotRequired,\\n    householdMembers\\n  })\\n\\n  const incomeCertificationCore = new IncomeCertificationCore()\\n  incomeCertificationCore.assignAttributes({\\n    id,\\n    unitUuid,\\n    certDetailType: projectType,\\n    certificationDetail: certDetailModel\\n  })\\n\\n  await incomeCertificationCore.save({\\n    with: {\\n      certificationDetail: {\\n        householdMembers: ['assets', 'incomes']\\n      }\\n    }\\n  })\\n\")))), mdx(\"hr\", null), mdx(\"h1\", null, \"Components as Data\"), mdx(\"hr\", null), mdx(\"div\", {\n    style: {\n      width: '100vw',\n      height: '100vh',\n      backgroundColor: 'white'\n    }\n  }, mdx(IconGrid, {\n    mdxType: \"IconGrid\"\n  }, mdx(ZoomSteps, {\n    mdxType: \"ZoomSteps\"\n  }, mdx(Database, {\n    style: {\n      gridRow: '2/3',\n      gridColumn: '1/2'\n    },\n    mdxType: \"Database\"\n  }), mdx(BusinessLogic, {\n    style: {\n      gridRow: '2/3',\n      gridColumn: '2/3'\n    },\n    mdxType: \"BusinessLogic\"\n  }), mdx(DataFetching, {\n    style: {\n      gridRow: '2/3',\n      gridColumn: '3/4'\n    },\n    mdxType: \"DataFetching\"\n  }), mdx(FeatureFlag, {\n    style: {\n      gridRow: '3/4',\n      gridColumn: '4/5'\n    },\n    mdxType: \"FeatureFlag\"\n  }), mdx(ABTest, {\n    style: {\n      gridRow: '1/2',\n      gridColumn: '4/5'\n    },\n    mdxType: \"ABTest\"\n  }), mdx(Components, {\n    style: {\n      gridRow: '2/3',\n      gridColumn: '4/5'\n    },\n    mdxType: \"Components\"\n  }), mdx(Render, {\n    style: {\n      gridRow: '2/3',\n      gridColumn: '5/6'\n    },\n    mdxType: \"Render\"\n  })))), mdx(\"hr\", null), mdx(\"div\", {\n    style: {\n      width: '100vw',\n      height: '100vh',\n      backgroundColor: 'white'\n    }\n  }, mdx(IconGrid, {\n    mdxType: \"IconGrid\"\n  }, mdx(Database, {\n    style: {\n      gridRow: '2/3',\n      gridColumn: '1/2'\n    },\n    mdxType: \"Database\"\n  }), mdx(BusinessLogic, {\n    style: {\n      gridRow: '2/3',\n      gridColumn: '2/3'\n    },\n    mdxType: \"BusinessLogic\"\n  }), mdx(DataFetching, {\n    style: {\n      gridRow: '2/3',\n      gridColumn: '3/4'\n    },\n    mdxType: \"DataFetching\"\n  }), mdx(FeatureFlag, {\n    style: {\n      gridRow: '3/4',\n      gridColumn: '4/5'\n    },\n    mdxType: \"FeatureFlag\"\n  }), mdx(ABTest, {\n    style: {\n      gridRow: '1/2',\n      gridColumn: '4/5'\n    },\n    mdxType: \"ABTest\"\n  }), mdx(Components, {\n    style: {\n      gridRow: '2/3',\n      gridColumn: '4/5'\n    },\n    mdxType: \"Components\"\n  }), mdx(Render, {\n    style: {\n      gridRow: '2/3',\n      gridColumn: '5/6'\n    },\n    mdxType: \"Render\"\n  })), mdx(DecoupleLine, {\n    steps: ['LEFT', 'MID_LEFT', 'FAR_RIGHT', 'MID_RIGHT'],\n    mdxType: \"DecoupleLine\"\n  })), mdx(\"hr\", null), mdx(\"h1\", null, \"MDX Deck\"), mdx(\"h2\", null, \"React MDX-based presentation decks\"), mdx(\"hr\", null), mdx(CodeSurfer, {\n    mdxType: \"CodeSurfer\"\n  }, mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-md\",\n    \"metastring\": \"title=\\\"What is Markdown?\\\" subtitle=\\\"A lightweight markup language with plain-text-formatting syntax\\\"\",\n    \"title\": \"\\\"What\",\n    \"is\": true,\n    \"Markdown?\\\"\": true,\n    \"subtitle\": \"\\\"A\",\n    \"lightweight\": true,\n    \"markup\": true,\n    \"language\": true,\n    \"with\": true,\n    \"plain-text-formatting\": true,\n    \"syntax\\\"\": true\n  }), \"# Heading\\n- **List**\\n- of\\n- important *things*\\n\\n`console.log('code sample')`\\n\\n[Learn more!](https://www.markdownguide.org/)\\n\"))), mdx(\"hr\", null), mdx(CodeSurfer, {\n    mdxType: \"CodeSurfer\"\n  }, mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-md\",\n    \"metastring\": \"title=\\\"What is MDX?\\\" subtitle=\\\"MDX is an authorable format for writing JSX in your Markdown\\\"\",\n    \"title\": \"\\\"What\",\n    \"is\": true,\n    \"MDX?\\\"\": true,\n    \"subtitle\": \"\\\"MDX\",\n    \"an\": true,\n    \"authorable\": true,\n    \"format\": true,\n    \"for\": true,\n    \"writing\": true,\n    \"JSX\": true,\n    \"in\": true,\n    \"your\": true,\n    \"Markdown\\\"\": true\n  }), \"# Heading\\n- **List**\\n- of\\n- important *things*\\n\\n`console.log('code sample')`\\n\\n[Learn more!](https://www.markdownguide.org/)\\n\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-mdx\",\n    \"metastring\": \"1:12 title=\\\"MDX\\\" subtitle=\\\"Inline components in your markdown. Think short codes!\\\"\",\n    \"1:12\": true,\n    \"title\": \"\\\"MDX\\\"\",\n    \"subtitle\": \"\\\"Inline\",\n    \"components\": true,\n    \"in\": true,\n    \"your\": true,\n    \"markdown.\": true,\n    \"Think\": true,\n    \"short\": true,\n    \"codes!\\\"\": true\n  }), \"import InteractiveChart from './components'\\n\\n# Heading\\n- **List**\\n- of\\n- important *things*\\n\\n<InteractiveChart size=\\\"medium\\\" />\\n\\n`console.log('code sample')`\\n\\n[Learn more!](https://www.markdownguide.org/)\\n\"))), mdx(\"hr\", null), mdx(\"h1\", null, \"MDX Deck\"), mdx(\"p\", null, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"npm install mdx-deck\")), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\uD83D\\uDCDD Write presentations in markdown\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u269B\\uFE0F Import and use React components\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\uD83D\\uDC85 Customizable themes and components\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"0\\uFE0F\\u20E3 Zero-config CLI\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\uD83D\\uDC81 Presenter mode\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\uD83D\\uDCD3 Speaker notes\")), mdx(\"hr\", null), mdx(\"h2\", null, mdx(\"inlineCode\", {\n    parentName: \"h2\"\n  }, \"<Appear />\")), mdx(Appear, {\n    mdxType: \"Appear\"\n  }, mdx(\"img\", {\n    width: \"800px\",\n    alt: \"boo\",\n    src: \"https://media.giphy.com/media/mDLkpVWddyqqI/giphy.gif\"\n  })), mdx(\"hr\", null), mdx(CodeSurfer, {\n    mdxType: \"CodeSurfer\"\n  }, mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-md\",\n    \"metastring\": \"title=\\\"<Appear/> Code sample\\\"\",\n    \"title\": \"\\\"<Appear/>\",\n    \"Code\": true,\n    \"sample\\\"\": true\n  }), \"## `<Appear />`\\n\\n<Appear>\\n\\n<img\\n  width=\\\"800px\\\"\\n  alt=\\\"boo\\\"\\n  src=\\\"https://media.giphy.com/media/mDLkpVWddyqqI/giphy.gif\\\"\\n/>\\n\\n</Appear>\\n\"))), mdx(\"hr\", null), mdx(\"h2\", null, mdx(\"inlineCode\", {\n    parentName: \"h2\"\n  }, \"<Split />\")), mdx(Split, {\n    mdxType: \"Split\"\n  }, mdx(\"img\", {\n    \"src\": \"https://media.giphy.com/media/PllyuUTPUHjqWqox5l/giphy.gif\",\n    \"alt\": null\n  }), mdx(\"img\", {\n    \"src\": \"https://media.giphy.com/media/oz4mYmqFT2GTIaD5Ga/giphy.gif\",\n    \"alt\": null\n  })), mdx(\"hr\", null), mdx(CodeSurfer, {\n    mdxType: \"CodeSurfer\"\n  }, mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-md\",\n    \"metastring\": \"title=\\\"<Split/> Code sample\\\"\",\n    \"title\": \"\\\"<Split/>\",\n    \"Code\": true,\n    \"sample\\\"\": true\n  }), \"## `<Split />`\\n\\n<Split>\\n\\n![left](https://media.giphy.com/media/PllyuUTPUHjqWqox5l/giphy.gif)\\n\\n![right](https://media.giphy.com/media/oz4mYmqFT2GTIaD5Ga/giphy.gif)\\n\\n</Split>\\n\"))), mdx(\"hr\", null), mdx(\"h2\", null, mdx(\"inlineCode\", {\n    parentName: \"h2\"\n  }, \"<Notes />\")), mdx(Notes, {\n    mdxType: \"Notes\"\n  }, mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Notes is exactly what it sounds like\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"A way to create speaker notes, viewable only in speaker mode\"))), mdx(\"hr\", null), mdx(\"h1\", null, \"This is the Next Slide\"), mdx(\"hr\", null), mdx(\"h1\", null, \"\\\"Those code slides are magic\\\"\"), mdx(\"img\", {\n    width: \"800px\",\n    alt: \"david blain\",\n    src: \"https://media.giphy.com/media/Sf0lxerEx2eNG/giphy.gif\"\n  }), mdx(\"hr\", null), mdx(CodeSurfer, {\n    mdxType: \"CodeSurfer\"\n  }, mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-md\",\n    \"metastring\": \"title=\\\"Animated Code Samples with <CodeSurfer/ >\\\"\",\n    \"title\": \"\\\"Animated\",\n    \"Code\": true,\n    \"Samples\": true,\n    \"with\": true,\n    \"<CodeSurfer/\": true,\n    \">\\\"\": true\n  }), \"\\n<CodeSurfer>\\n\\n```md title=\\\"Markdown\\\"\\n# Heading\\n- **List**\\n- of\\n- important *things*\\n\\n`console.log('code sample')`\\n\\n[Learn more!](https://www.markdownguide.org/)\\n\\u200E```\\n\\n</CodeSurfer>\\n\\n\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-md\",\n    \"metastring\": \"1:30 title=\\\"Animated Code Samples with <CodeSurfer/ >\\\"\",\n    \"1:30\": true,\n    \"title\": \"\\\"Animated\",\n    \"Code\": true,\n    \"Samples\": true,\n    \"with\": true,\n    \"<CodeSurfer/\": true,\n    \">\\\"\": true\n  }), \"\\n<CodeSurfer>\\n\\n```md title=\\\"Markdown\\\"\\n# Heading\\n- **List**\\n- of\\n- important *things*\\n\\n`console.log('code sample')`\\n\\n[Learn more!](https://www.markdownguide.org/)\\n\\u200E```\\n\\n```mdx 1:12 title=\\\"MDX\\\" subtitle=\\\"Inline components in your markdown. Think short codes!\\\"\\nimport InteractiveChart from './components'\\n\\n# Heading\\n- **List**\\n- of\\n- important *things*\\n\\n<InteractiveChart size=\\\"medium\\\" />\\n\\n`console.log('code sample')`\\n\\n[Learn more!](https://www.markdownguide.org/)\\n\\u200E```\\n\\n</CodeSurfer>\\n\\n\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"15\": true,\n    \"className\": \"language-md\",\n    \"metastring\": \"15 title=\\\"CodeSurfer API\\\" subtitle=\\\"highlight, line ranges, and columns. add titles, and subtitles\\\"\",\n    \"title\": \"\\\"CodeSurfer\",\n    \"API\\\"\": true,\n    \"subtitle\": \"\\\"highlight,\",\n    \"line\": true,\n    \"ranges,\": true,\n    \"and\": true,\n    \"columns.\": true,\n    \"add\": true,\n    \"titles,\": true,\n    \"subtitles\\\"\": true\n  }), \"\\n<CodeSurfer>\\n\\n```md title=\\\"Markdown\\\"\\n# Heading\\n- **List**\\n- of\\n- important *things*\\n\\n`console.log('code sample')`\\n\\n[Learn more!](https://www.markdownguide.org/)\\n\\u200E```\\n\\n```mdx 1:12 title=\\\"MDX\\\" subtitle=\\\"Inline components in your markdown. Think short codes!\\\"\\nimport InteractiveChart from './components'\\n\\n# Heading\\n- **List**\\n- of\\n- important *things*\\n\\n<InteractiveChart size=\\\"medium\\\" />\\n\\n`console.log('code sample')`\\n\\n[Learn more!](https://www.markdownguide.org/)\\n\\u200E```\\n\\n</CodeSurfer>\\n\\n\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-md\",\n    \"metastring\": \"title=\\\"CodeSurfer API\\\" subtitle=\\\"CodeSurfer parses the AST, diffs between steps and animates accordingly\\\"\",\n    \"title\": \"\\\"CodeSurfer\",\n    \"API\\\"\": true,\n    \"subtitle\": \"\\\"CodeSurfer\",\n    \"parses\": true,\n    \"the\": true,\n    \"AST,\": true,\n    \"diffs\": true,\n    \"between\": true,\n    \"steps\": true,\n    \"and\": true,\n    \"animates\": true,\n    \"accordingly\\\"\": true\n  }), \"\\n<CodeSurfer>\\n\\n```md title=\\\"Markdown\\\"\\n# Heading\\n- **List**\\n- of\\n- important *things*\\n\\n`console.log('code sample')`\\n\\n[Learn more!](https://www.markdownguide.org/)\\n\\u200E```\\n\\n</CodeSurfer>\\n\\n\"))), mdx(\"hr\", null), mdx(LiveCode, {\n    title: \"Live coding with <LiveCode />\",\n    size: \"large\",\n    previewProps: {\n      style: {\n        display: 'flex',\n        flexDirection: 'column',\n        alignItems: 'center',\n        justifyContent: 'center'\n      }\n    },\n    editorProps: {\n      style: {\n        fontSize: '0.4em',\n        backgroundColor: '#121212'\n      }\n    },\n    code: \"() => {\\n    const [count, setCount] = React.useState(1)\\n    return (\\n      <button\\n        style={{ color: \\\"white\\\", padding: \\\"40px\\\", background: \\\"linear-gradient(45deg,#0cf,#4be8ff)\\\", borderRadius: \\\"15px\\\", fontSize: '2rem',border: 0 }}\\n        onClick={() =>\\n          setCount(count => count + 1)\\n        }\\n      >\\n        {`Num Clicks: ${count}`}\\n      </button>\\n    )\\n  }\",\n    mdxType: \"LiveCode\"\n  }), mdx(\"hr\", null), mdx(\"h2\", null, \"Custom MDX Deck Components\"), mdx(\"img\", {\n    src: \"https://media.giphy.com/media/10yIEN8cMn4i9W/giphy.gif\"\n  }), mdx(\"hr\", null), mdx(\"h1\", null, \"useSteps\"), mdx(\"hr\", null), mdx(CodeSurferColumns, {\n    sizes: [2, 3],\n    mdxType: \"CodeSurferColumns\"\n  }, mdx(Step, {\n    mdxType: \"Step\"\n  }, mdx(\"h3\", null, \"The current step is 1/4\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-jsx\"\n  }), \"import React from 'react'\\nimport { useSteps } from 'mdx-deck'\\n\\nexport default props => {\\n  const length = 4\\n  const step = useSteps(length)\\n\\n  return (\\n    <h2>\\n      The current step is {step}/{length}\\n    </h2>\\n  )\\n}\\n\"))), mdx(Step, {\n    mdxType: \"Step\"\n  }, mdx(\"h3\", null, \"The current step is 2/4\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-jsx\",\n    \"metastring\": \"5:6\",\n    \"5:6\": true\n  }), \"import React from 'react'\\nimport { useSteps } from 'mdx-deck'\\n\\nexport default props => {\\n  const length = 4\\n  const step = useSteps(length)\\n\\n  return (\\n    <h2>\\n      The current step is {step}/{length}\\n    </h2>\\n  )\\n}\\n\"))), mdx(Step, {\n    mdxType: \"Step\"\n  }, mdx(\"h3\", null, \"The current step is 3/4\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"10\": true,\n    \"className\": \"language-jsx\",\n    \"metastring\": \"10\"\n  }), \"import React from 'react'\\nimport { useSteps } from 'mdx-deck'\\n\\nexport default props => {\\n  const length = 4\\n  const step = useSteps(length)\\n\\n  return (\\n    <h2>\\n      The current step is {step}/{length}\\n    </h2>\\n  )\\n}\\n\"))), mdx(Step, {\n    mdxType: \"Step\"\n  }, mdx(\"h3\", null, \"The current step is 4/4\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-jsx\",\n    \"metastring\": \"10[27:41]\",\n    \"10[27:41]\": true\n  }), \"import React from 'react'\\nimport { useSteps } from 'mdx-deck'\\n\\nexport default props => {\\n  const length = 4\\n  const step = useSteps(length)\\n\\n  return (\\n    <h2>\\n      The current step is {step}/{length}\\n    </h2>\\n  )\\n}\\n\")))), mdx(\"hr\", null), mdx(CodeSurferColumns, {\n    sizes: [2, 3],\n    mdxType: \"CodeSurferColumns\"\n  }, mdx(Step, {\n    mdxType: \"Step\"\n  }, mdx(\"svg\", {\n    height: \"100%\",\n    width: \"100%\"\n  }, mdx(Circle, {\n    color: \"red\",\n    mdxType: \"Circle\"\n  })), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-jsx\"\n  }), \"import React from 'react'\\n\\nexport default ({\\n  color,\\n  x = '50%',\\n  y = '50%'\\n}) => (\\n  <circle\\n    cx={x}\\n    cy={y}\\n    r=\\\"50\\\"\\n    fill={color}\\n  />\\n)\\n\")))), mdx(\"hr\", null), mdx(CodeSurfer, {\n    mdxType: \"CodeSurfer\"\n  }, mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-jsx\"\n  }), \"import React from 'react'\\nimport { useSteps } from 'mdx-deck'\\nimport Circle from './Circle'\\n\\nexport default ({\\n  color = 'white',\\n  x=['50%', '75%', '21%'],\\n  y=['50%', '75%', '81%']\\n}) => {\\n  const step = useSteps(x.length-1)\\n  return (\\n    <Circle\\n      x={x[step]}\\n      y={y[step]}\\n      r=\\\"50\\\"\\n    />\\n  )\\n}\\n\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"2\": true,\n    \"className\": \"language-jsx\",\n    \"metastring\": \"2\"\n  }), \"import React from 'react'\\nimport { useSteps } from 'mdx-deck'\\nimport Circle from './Circle'\\n\\nexport default ({\\n  color = 'white',\\n  x=['50%', '75%', '21%'],\\n  y=['50%', '75%', '81%']\\n}) => {\\n  const step = useSteps(x.length-1)\\n  return (\\n    <Circle\\n      x={x[step]}\\n      y={y[step]}\\n      r=\\\"50\\\"\\n    />\\n  )\\n}\\n\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-jsx\",\n    \"metastring\": \"7,8,10,13,14\",\n    \"7,8,10,13,14\": true\n  }), \"import React from 'react'\\nimport { useSteps } from 'mdx-deck'\\nimport Circle from './Circle'\\n\\nexport default ({\\n  color = 'white',\\n  x=['50%', '75%', '21%'],\\n  y=['50%', '75%', '81%']\\n}) => {\\n  const step = useSteps(x.length-1)\\n  return (\\n    <Circle\\n      x={x[step]}\\n      y={y[step]}\\n      r=\\\"50\\\"\\n    />\\n  )\\n}\\n\"))), mdx(\"hr\", null), mdx(\"svg\", {\n    height: \"100%\",\n    width: \"100%\"\n  }, mdx(MovableCircle, {\n    color: \"red\",\n    mdxType: \"MovableCircle\"\n  })), mdx(\"hr\", null), mdx(CodeSurfer, {\n    mdxType: \"CodeSurfer\"\n  }, mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-jsx\"\n  }), \"import React from 'react'\\nimport { useSteps } from 'mdx-deck'\\nimport { useSpring, animated } from 'react-spring'\\nimport Circle from './Circle'\\n\\nconst AnimatedCircle = animated(Circle)\\n\\nexport default ({\\n  color,\\n  x,\\n  y\\n}) => {\\n  const step = useSteps(x.length-1)\\n  const props = useSpring({ x: x[step],y: y[step]})\\n  return (\\n    <AnimatedCircle\\n      x={props.x}\\n      y={props.y}\\n      r=\\\"50\\\"\\n      color={color}\\n    />\\n  )\\n}\\n\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-jsx\",\n    \"metastring\": \"2:3\",\n    \"2:3\": true\n  }), \"import React from 'react'\\nimport { useSteps } from 'mdx-deck'\\nimport { useSpring, animated } from 'react-spring'\\nimport Circle from './Circle'\\n\\nconst AnimatedCircle = animated(Circle)\\n\\nexport default ({\\n  color,\\n  x,\\n  y\\n}) => {\\n  const step = useSteps(x.length-1)\\n  const props = useSpring({ x: x[step],y: y[step]})\\n  return (\\n    <AnimatedCircle\\n      x={props.x}\\n      y={props.y}\\n      r=\\\"50\\\"\\n      color={color}\\n    />\\n  )\\n}\\n\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-jsx\",\n    \"metastring\": \"10,11,13,14\",\n    \"10,11,13,14\": true\n  }), \"import React from 'react'\\nimport { useSteps } from 'mdx-deck'\\nimport { useSpring, animated } from 'react-spring'\\nimport Circle from './Circle'\\n\\nconst AnimatedCircle = animated(Circle)\\n\\nexport default ({\\n  color,\\n  x,\\n  y\\n}) => {\\n  const step = useSteps(x.length-1)\\n  const props = useSpring({ x: x[step],y: y[step]})\\n  return (\\n    <AnimatedCircle\\n      x={props.x}\\n      y={props.y}\\n      r=\\\"50\\\"\\n      color={color}\\n    />\\n  )\\n}\\n\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-jsx\",\n    \"metastring\": \"10,11,13[8:12],14[17:51]\",\n    \"10,11,13[8:12],14[17:51]\": true\n  }), \"import React from 'react'\\nimport { useSteps } from 'mdx-deck'\\nimport { useSpring, animated } from 'react-spring'\\nimport Circle from './Circle'\\n\\nconst AnimatedCircle = animated(Circle)\\n\\nexport default ({\\n  color,\\n  x,\\n  y\\n}) => {\\n  const step = useSteps(x.length-1)\\n  const props = useSpring({ x: x[step],y: y[step]})\\n  return (\\n    <AnimatedCircle\\n      x={props.x}\\n      y={props.y}\\n      r=\\\"50\\\"\\n      color={color}\\n    />\\n  )\\n}\\n\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-jsx\",\n    \"metastring\": \"14[8:13],16,17,18\",\n    \"14[8:13],16,17,18\": true\n  }), \"import React from 'react'\\nimport { useSteps } from 'mdx-deck'\\nimport { useSpring, animated } from 'react-spring'\\nimport Circle from './Circle'\\n\\nconst AnimatedCircle = animated(Circle)\\n\\nexport default ({\\n  color,\\n  x,\\n  y\\n}) => {\\n  const step = useSteps(x.length-1)\\n  const props = useSpring({ x: x[step],y: y[step]})\\n  return (\\n    <AnimatedCircle\\n      x={props.x}\\n      y={props.y}\\n      r=\\\"50\\\"\\n      color={color}\\n    />\\n  )\\n}\\n\"))), mdx(\"hr\", null), mdx(StepCounter, {\n    num: 5,\n    mdxType: \"StepCounter\"\n  }), mdx(\"svg\", {\n    height: \"100%\",\n    width: \"100%\"\n  }, mdx(AnimatedCircle, {\n    color: \"red\",\n    y: ['80%', '85%', '15%', '90%', '11%'],\n    x: ['10%', '65%', '83%', '10%', '22%'],\n    mdxType: \"AnimatedCircle\"\n  }), mdx(AnimatedCircle, {\n    color: \"purple\",\n    x: ['10%', '75%', '15%', '90%', '11%'],\n    y: ['20%', '75%', '83%', '10%', '22%'],\n    mdxType: \"AnimatedCircle\"\n  }), mdx(AnimatedCircle, {\n    color: \"blue\",\n    x: ['83%', '10%', '22%', '90%', '11%'],\n    y: ['50%', '75%', '50%', '75%', '15%'],\n    mdxType: \"AnimatedCircle\"\n  }), mdx(AnimatedCircle, {\n    color: \"green\",\n    x: ['83%', '10%', '18%', '90%', '11%'].reverse(),\n    y: ['50%', '75%', '44%', '75%', '15%'].reverse(),\n    mdxType: \"AnimatedCircle\"\n  })), mdx(\"hr\", null), mdx(\"span\", {\n    style: {\n      fontSize: '12rem'\n    }\n  }, \"\\uD83E\\uDD14\"), mdx(\"hr\", null), mdx(\"h1\", null, mdx(\"inlineCode\", {\n    parentName: \"h1\"\n  }, \"<ReleaseSchedule />\")), mdx(\"img\", {\n    alr: \"release schedule\",\n    src: release\n  }), mdx(\"hr\", null), mdx(CodeSurfer, {\n    mdxType: \"CodeSurfer\"\n  }, mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-jsx\",\n    \"metastring\": \"title=\\\"MDX Deck Release Schedule\\\"\",\n    \"title\": \"\\\"MDX\",\n    \"Deck\": true,\n    \"Release\": true,\n    \"Schedule\\\"\": true\n  }), \"export default () => {\\n  const [selected, setSelected] = React.useState('none')\\n  const release = COLORS.indexOf(selected)\\n  const step = useSteps(7);\\n\\n  return (\\n    <svg width='100%' height='100%'>\\n      <g id='columnGroup'>\\n        <RowLabel active={isActiveEnv(release, step, 0)} x={X_AXIS_OFFSET} y={row(0)}>Branch</RowLabel>\\n        <RowLabel active={isActiveEnv(release, step, 1)} x={X_AXIS_OFFSET} y={row(1)}>Internal</RowLabel>\\n        <RowLabel active={isActiveEnv(release, step, 2)} x={X_AXIS_OFFSET} y={row(2)}>Live 1</RowLabel>\\n        <RowLabel active={isActiveEnv(release, step, 3)} x={X_AXIS_OFFSET} y={row(3)}>Live All</RowLabel>\\n\\n        <ColLabel active={isActiveDay(release, step, 0)} x={col(0)} y={Y_AXIS_OFFSET}>M</ColLabel>\\n        <ColLabel active={isActiveDay(release, step, 1)} x={col(1)} y={Y_AXIS_OFFSET}>T</ColLabel>\\n        <ColLabel active={isActiveDay(release, step, 2)} x={col(2)} y={Y_AXIS_OFFSET}>W</ColLabel>\\n        <ColLabel active={isActiveDay(release, step, 3)} x={col(3)} y={Y_AXIS_OFFSET}>T</ColLabel>\\n        <ColLabel active={isActiveDay(release, step, 4)} x={col(4)} y={Y_AXIS_OFFSET}>F</ColLabel>\\n        <ColLabel active={isActiveDay(release, step, 5)} x={col(5)} y={Y_AXIS_OFFSET}>S</ColLabel>\\n        <ColLabel active={isActiveDay(release, step, 6)} x={col(6)} y={Y_AXIS_OFFSET}>S</ColLabel>\\n        <ColLabel active={isActiveDay(release, step, 7)} x={col(7)} y={Y_AXIS_OFFSET}>M</ColLabel>\\n        <ColLabel active={isActiveDay(release, step, 8)} x={col(8)} y={Y_AXIS_OFFSET}>T</ColLabel>\\n      </g>\\n      {/* Red Line */}\\n      <Line x1={col(0)} y1={row(0)} x2={col(3)} y2={row(3)} color=\\\"red\\\" selected={selected} />\\n      {/* Purple Lines */}\\n      <Line x1={col(1)} y1={row(0)} x2={col(3)} y2={row(2)} color=\\\"purple\\\" selected={selected} />\\n      <Line x1={col(3)} y1={row(2)} x2={col(7)} y2={row(2)} color=\\\"purple\\\" selected={selected} dashed />\\n      <Line x1={col(7)} y1={row(2)} x2={col(8)} y2={row(3)} color=\\\"purple\\\" selected={selected} />\\n      {/* Blue Lines */}\\n      <Line x1={col(2)} y1={row(0)} x2={col(4)} y2={row(2)} color=\\\"blue\\\" selected={selected}  />\\n      <Line x1={col(4)} y1={row(2)} x2={col(7)} y2={row(2)} color=\\\"blue\\\" selected={selected} dashed />\\n      <Line x1={col(7)} y1={row(2)} x2={col(8)} y2={row(3)} color=\\\"blue\\\" selected={selected}  />\\n      {/* Green Lines */}\\n      <Line x1={col(3)} y1={row(0)} x2={col(4)} y2={row(1)} color=\\\"green\\\" selected={selected}  />\\n      <Line x1={col(4)} y1={row(1)} x2={col(7)} y2={row(1)} color=\\\"green\\\" selected={selected} dashed/>\\n      <Line x1={col(7)} y1={row(1)} x2={col(8)} y2={row(2)} color=\\\"green\\\" selected={selected} />\\n      {/* Animated Dots */}\\n      <AnimatedCircle\\n        r=\\\"18\\\"\\n        toggled={selected === 'red'}\\n        fillOpacity={selectedOpacity(selected, 'red')}\\n        onClick={() => setSelected(selected => selected !== 'red' ? 'red' : 'none')}\\n        color=\\\"red\\\"\\n        x={DAY_STEPS[0].map(col)}\\n        y={ENV_STEPS[0].map(row)}\\n      />\\n      <AnimatedCircle\\n        toggled={selected === 'purple'}\\n        fillOpacity={selectedOpacity(selected, 'purple')}\\n        onClick={() => setSelected(selected => selected !== 'purple' ? 'purple' : 'none')}\\n        r=\\\"18\\\"\\n        color=\\\"purple\\\"\\n        x={DAY_STEPS[1].map(col)}\\n        y={ENV_STEPS[1].map(row)}\\n      />\\n      <AnimatedCircle\\n        toggled={selected === 'blue'}\\n        fillOpacity={selectedOpacity(selected, 'blue')}\\n        onClick={() => setSelected(selected => selected !== 'blue' ? 'blue' : 'none')}\\n        r=\\\"18\\\"\\n        color=\\\"blue\\\"\\n        x={DAY_STEPS[2].map(col)}\\n        y={ENV_STEPS[2].map(row)}\\n      />\\n      <AnimatedCircle\\n        toggled={selected === 'green'}\\n        onClick={() => setSelected(selected => selected !== 'green' ? 'green' : 'none')}\\n        fillOpacity={selectedOpacity(selected, 'green')}\\n        r=\\\"18\\\"\\n        color=\\\"green\\\" \\n        x={DAY_STEPS[3].map(col)}\\n        y={ENV_STEPS[3].map(row)}\\n      />\\n    </svg>\\n  )\\n}\\n\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-jsx\",\n    \"metastring\": \"9:22 subtitle=\\\"col/row helpers position svgs, highlight when active\\\"\",\n    \"9:22\": true,\n    \"subtitle\": \"\\\"col/row\",\n    \"helpers\": true,\n    \"position\": true,\n    \"svgs,\": true,\n    \"highlight\": true,\n    \"when\": true,\n    \"active\\\"\": true\n  }), \"export default () => {\\n  const [selected, setSelected] = React.useState('none')\\n  const release = COLORS.indexOf(selected)\\n  const step = useSteps(7);\\n\\n  return (\\n    <svg width='100%' height='100%'>\\n      <g id='columnGroup'>\\n        <RowLabel active={isActiveEnv(release, step, 0)} x={X_AXIS_OFFSET} y={row(0)}>Branch</RowLabel>\\n        <RowLabel active={isActiveEnv(release, step, 1)} x={X_AXIS_OFFSET} y={row(1)}>Internal</RowLabel>\\n        <RowLabel active={isActiveEnv(release, step, 2)} x={X_AXIS_OFFSET} y={row(2)}>Live 1</RowLabel>\\n        <RowLabel active={isActiveEnv(release, step, 3)} x={X_AXIS_OFFSET} y={row(3)}>Live All</RowLabel>\\n\\n        <ColLabel active={isActiveDay(release, step, 0)} x={col(0)} y={Y_AXIS_OFFSET}>M</ColLabel>\\n        <ColLabel active={isActiveDay(release, step, 1)} x={col(1)} y={Y_AXIS_OFFSET}>T</ColLabel>\\n        <ColLabel active={isActiveDay(release, step, 2)} x={col(2)} y={Y_AXIS_OFFSET}>W</ColLabel>\\n        <ColLabel active={isActiveDay(release, step, 3)} x={col(3)} y={Y_AXIS_OFFSET}>T</ColLabel>\\n        <ColLabel active={isActiveDay(release, step, 4)} x={col(4)} y={Y_AXIS_OFFSET}>F</ColLabel>\\n        <ColLabel active={isActiveDay(release, step, 5)} x={col(5)} y={Y_AXIS_OFFSET}>S</ColLabel>\\n        <ColLabel active={isActiveDay(release, step, 6)} x={col(6)} y={Y_AXIS_OFFSET}>S</ColLabel>\\n        <ColLabel active={isActiveDay(release, step, 7)} x={col(7)} y={Y_AXIS_OFFSET}>M</ColLabel>\\n        <ColLabel active={isActiveDay(release, step, 8)} x={col(8)} y={Y_AXIS_OFFSET}>T</ColLabel>\\n      </g>\\n      {/* Red Line */}\\n      <Line x1={col(0)} y1={row(0)} x2={col(3)} y2={row(3)} color=\\\"red\\\" selected={selected} />\\n      {/* Purple Lines */}\\n      <Line x1={col(1)} y1={row(0)} x2={col(3)} y2={row(2)} color=\\\"purple\\\" selected={selected} />\\n      <Line x1={col(3)} y1={row(2)} x2={col(7)} y2={row(2)} color=\\\"purple\\\" selected={selected} dashed />\\n      <Line x1={col(7)} y1={row(2)} x2={col(8)} y2={row(3)} color=\\\"purple\\\" selected={selected} />\\n      {/* Blue Lines */}\\n      <Line x1={col(2)} y1={row(0)} x2={col(4)} y2={row(2)} color=\\\"blue\\\" selected={selected}  />\\n      <Line x1={col(4)} y1={row(2)} x2={col(7)} y2={row(2)} color=\\\"blue\\\" selected={selected} dashed />\\n      <Line x1={col(7)} y1={row(2)} x2={col(8)} y2={row(3)} color=\\\"blue\\\" selected={selected}  />\\n      {/* Green Lines */}\\n      <Line x1={col(3)} y1={row(0)} x2={col(4)} y2={row(1)} color=\\\"green\\\" selected={selected}  />\\n      <Line x1={col(4)} y1={row(1)} x2={col(7)} y2={row(1)} color=\\\"green\\\" selected={selected} dashed/>\\n      <Line x1={col(7)} y1={row(1)} x2={col(8)} y2={row(2)} color=\\\"green\\\" selected={selected} />\\n      {/* Animated Dots */}\\n      <AnimatedCircle\\n        r=\\\"18\\\"\\n        toggled={selected === 'red'}\\n        fillOpacity={selectedOpacity(selected, 'red')}\\n        onClick={() => setSelected(selected => selected !== 'red' ? 'red' : 'none')}\\n        color=\\\"red\\\"\\n        x={DAY_STEPS[0].map(col)}\\n        y={ENV_STEPS[0].map(row)}\\n      />\\n      <AnimatedCircle\\n        toggled={selected === 'purple'}\\n        fillOpacity={selectedOpacity(selected, 'purple')}\\n        onClick={() => setSelected(selected => selected !== 'purple' ? 'purple' : 'none')}\\n        r=\\\"18\\\"\\n        color=\\\"purple\\\"\\n        x={DAY_STEPS[1].map(col)}\\n        y={ENV_STEPS[1].map(row)}\\n      />\\n      <AnimatedCircle\\n        toggled={selected === 'blue'}\\n        fillOpacity={selectedOpacity(selected, 'blue')}\\n        onClick={() => setSelected(selected => selected !== 'blue' ? 'blue' : 'none')}\\n        r=\\\"18\\\"\\n        color=\\\"blue\\\"\\n        x={DAY_STEPS[2].map(col)}\\n        y={ENV_STEPS[2].map(row)}\\n      />\\n      <AnimatedCircle\\n        toggled={selected === 'green'}\\n        onClick={() => setSelected(selected => selected !== 'green' ? 'green' : 'none')}\\n        fillOpacity={selectedOpacity(selected, 'green')}\\n        r=\\\"18\\\"\\n        color=\\\"green\\\" \\n        x={DAY_STEPS[3].map(col)}\\n        y={ENV_STEPS[3].map(row)}\\n      />\\n    </svg>\\n  )\\n}\\n\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-jsx\",\n    \"metastring\": \"24:37\",\n    \"24:37\": true\n  }), \"export default () => {\\n  const [selected, setSelected] = React.useState('none')\\n  const release = COLORS.indexOf(selected)\\n  const step = useSteps(7);\\n\\n  return (\\n    <svg width='100%' height='100%'>\\n      <g id='columnGroup'>\\n        <RowLabel active={isActiveEnv(release, step, 0)} x={X_AXIS_OFFSET} y={row(0)}>Branch</RowLabel>\\n        <RowLabel active={isActiveEnv(release, step, 1)} x={X_AXIS_OFFSET} y={row(1)}>Internal</RowLabel>\\n        <RowLabel active={isActiveEnv(release, step, 2)} x={X_AXIS_OFFSET} y={row(2)}>Live 1</RowLabel>\\n        <RowLabel active={isActiveEnv(release, step, 3)} x={X_AXIS_OFFSET} y={row(3)}>Live All</RowLabel>\\n\\n        <ColLabel active={isActiveDay(release, step, 0)} x={col(0)} y={Y_AXIS_OFFSET}>M</ColLabel>\\n        <ColLabel active={isActiveDay(release, step, 1)} x={col(1)} y={Y_AXIS_OFFSET}>T</ColLabel>\\n        <ColLabel active={isActiveDay(release, step, 2)} x={col(2)} y={Y_AXIS_OFFSET}>W</ColLabel>\\n        <ColLabel active={isActiveDay(release, step, 3)} x={col(3)} y={Y_AXIS_OFFSET}>T</ColLabel>\\n        <ColLabel active={isActiveDay(release, step, 4)} x={col(4)} y={Y_AXIS_OFFSET}>F</ColLabel>\\n        <ColLabel active={isActiveDay(release, step, 5)} x={col(5)} y={Y_AXIS_OFFSET}>S</ColLabel>\\n        <ColLabel active={isActiveDay(release, step, 6)} x={col(6)} y={Y_AXIS_OFFSET}>S</ColLabel>\\n        <ColLabel active={isActiveDay(release, step, 7)} x={col(7)} y={Y_AXIS_OFFSET}>M</ColLabel>\\n        <ColLabel active={isActiveDay(release, step, 8)} x={col(8)} y={Y_AXIS_OFFSET}>T</ColLabel>\\n      </g>\\n      {/* Red Line */}\\n      <Line x1={col(0)} y1={row(0)} x2={col(3)} y2={row(3)} color=\\\"red\\\" selected={selected} />\\n      {/* Purple Lines */}\\n      <Line x1={col(1)} y1={row(0)} x2={col(3)} y2={row(2)} color=\\\"purple\\\" selected={selected} />\\n      <Line x1={col(3)} y1={row(2)} x2={col(7)} y2={row(2)} color=\\\"purple\\\" selected={selected} dashed />\\n      <Line x1={col(7)} y1={row(2)} x2={col(8)} y2={row(3)} color=\\\"purple\\\" selected={selected} />\\n      {/* Blue Lines */}\\n      <Line x1={col(2)} y1={row(0)} x2={col(4)} y2={row(2)} color=\\\"blue\\\" selected={selected}  />\\n      <Line x1={col(4)} y1={row(2)} x2={col(7)} y2={row(2)} color=\\\"blue\\\" selected={selected} dashed />\\n      <Line x1={col(7)} y1={row(2)} x2={col(8)} y2={row(3)} color=\\\"blue\\\" selected={selected}  />\\n      {/* Green Lines */}\\n      <Line x1={col(3)} y1={row(0)} x2={col(4)} y2={row(1)} color=\\\"green\\\" selected={selected}  />\\n      <Line x1={col(4)} y1={row(1)} x2={col(7)} y2={row(1)} color=\\\"green\\\" selected={selected} dashed/>\\n      <Line x1={col(7)} y1={row(1)} x2={col(8)} y2={row(2)} color=\\\"green\\\" selected={selected} />\\n      {/* Animated Dots */}\\n      <AnimatedCircle\\n        r=\\\"18\\\"\\n        toggled={selected === 'red'}\\n        fillOpacity={selectedOpacity(selected, 'red')}\\n        onClick={() => setSelected(selected => selected !== 'red' ? 'red' : 'none')}\\n        color=\\\"red\\\"\\n        x={DAY_STEPS[0].map(col)}\\n        y={ENV_STEPS[0].map(row)}\\n      />\\n      <AnimatedCircle\\n        toggled={selected === 'purple'}\\n        fillOpacity={selectedOpacity(selected, 'purple')}\\n        onClick={() => setSelected(selected => selected !== 'purple' ? 'purple' : 'none')}\\n        r=\\\"18\\\"\\n        color=\\\"purple\\\"\\n        x={DAY_STEPS[1].map(col)}\\n        y={ENV_STEPS[1].map(row)}\\n      />\\n      <AnimatedCircle\\n        toggled={selected === 'blue'}\\n        fillOpacity={selectedOpacity(selected, 'blue')}\\n        onClick={() => setSelected(selected => selected !== 'blue' ? 'blue' : 'none')}\\n        r=\\\"18\\\"\\n        color=\\\"blue\\\"\\n        x={DAY_STEPS[2].map(col)}\\n        y={ENV_STEPS[2].map(row)}\\n      />\\n      <AnimatedCircle\\n        toggled={selected === 'green'}\\n        onClick={() => setSelected(selected => selected !== 'green' ? 'green' : 'none')}\\n        fillOpacity={selectedOpacity(selected, 'green')}\\n        r=\\\"18\\\"\\n        color=\\\"green\\\" \\n        x={DAY_STEPS[3].map(col)}\\n        y={ENV_STEPS[3].map(row)}\\n      />\\n    </svg>\\n  )\\n}\\n\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-jsx\",\n    \"metastring\": \"38:56 subtitle=\\\"Circles animate based on step\\\"\",\n    \"38:56\": true,\n    \"subtitle\": \"\\\"Circles\",\n    \"animate\": true,\n    \"based\": true,\n    \"on\": true,\n    \"step\\\"\": true\n  }), \"export default () => {\\n  const [selected, setSelected] = React.useState('none')\\n  const release = COLORS.indexOf(selected)\\n  const step = useSteps(7);\\n\\n  return (\\n    <svg width='100%' height='100%'>\\n      <g id='columnGroup'>\\n        <RowLabel active={isActiveEnv(release, step, 0)} x={X_AXIS_OFFSET} y={row(0)}>Branch</RowLabel>\\n        <RowLabel active={isActiveEnv(release, step, 1)} x={X_AXIS_OFFSET} y={row(1)}>Internal</RowLabel>\\n        <RowLabel active={isActiveEnv(release, step, 2)} x={X_AXIS_OFFSET} y={row(2)}>Live 1</RowLabel>\\n        <RowLabel active={isActiveEnv(release, step, 3)} x={X_AXIS_OFFSET} y={row(3)}>Live All</RowLabel>\\n\\n        <ColLabel active={isActiveDay(release, step, 0)} x={col(0)} y={Y_AXIS_OFFSET}>M</ColLabel>\\n        <ColLabel active={isActiveDay(release, step, 1)} x={col(1)} y={Y_AXIS_OFFSET}>T</ColLabel>\\n        <ColLabel active={isActiveDay(release, step, 2)} x={col(2)} y={Y_AXIS_OFFSET}>W</ColLabel>\\n        <ColLabel active={isActiveDay(release, step, 3)} x={col(3)} y={Y_AXIS_OFFSET}>T</ColLabel>\\n        <ColLabel active={isActiveDay(release, step, 4)} x={col(4)} y={Y_AXIS_OFFSET}>F</ColLabel>\\n        <ColLabel active={isActiveDay(release, step, 5)} x={col(5)} y={Y_AXIS_OFFSET}>S</ColLabel>\\n        <ColLabel active={isActiveDay(release, step, 6)} x={col(6)} y={Y_AXIS_OFFSET}>S</ColLabel>\\n        <ColLabel active={isActiveDay(release, step, 7)} x={col(7)} y={Y_AXIS_OFFSET}>M</ColLabel>\\n        <ColLabel active={isActiveDay(release, step, 8)} x={col(8)} y={Y_AXIS_OFFSET}>T</ColLabel>\\n      </g>\\n      {/* Red Line */}\\n      <Line x1={col(0)} y1={row(0)} x2={col(3)} y2={row(3)} color=\\\"red\\\" selected={selected} />\\n      {/* Purple Lines */}\\n      <Line x1={col(1)} y1={row(0)} x2={col(3)} y2={row(2)} color=\\\"purple\\\" selected={selected} />\\n      <Line x1={col(3)} y1={row(2)} x2={col(7)} y2={row(2)} color=\\\"purple\\\" selected={selected} dashed />\\n      <Line x1={col(7)} y1={row(2)} x2={col(8)} y2={row(3)} color=\\\"purple\\\" selected={selected} />\\n      {/* Blue Lines */}\\n      <Line x1={col(2)} y1={row(0)} x2={col(4)} y2={row(2)} color=\\\"blue\\\" selected={selected}  />\\n      <Line x1={col(4)} y1={row(2)} x2={col(7)} y2={row(2)} color=\\\"blue\\\" selected={selected} dashed />\\n      <Line x1={col(7)} y1={row(2)} x2={col(8)} y2={row(3)} color=\\\"blue\\\" selected={selected}  />\\n      {/* Green Lines */}\\n      <Line x1={col(3)} y1={row(0)} x2={col(4)} y2={row(1)} color=\\\"green\\\" selected={selected}  />\\n      <Line x1={col(4)} y1={row(1)} x2={col(7)} y2={row(1)} color=\\\"green\\\" selected={selected} dashed/>\\n      <Line x1={col(7)} y1={row(1)} x2={col(8)} y2={row(2)} color=\\\"green\\\" selected={selected} />\\n      {/* Animated Dots */}\\n      <AnimatedCircle\\n        r=\\\"18\\\"\\n        toggled={selected === 'red'}\\n        fillOpacity={selectedOpacity(selected, 'red')}\\n        onClick={() => setSelected(selected => selected !== 'red' ? 'red' : 'none')}\\n        color=\\\"red\\\"\\n        x={DAY_STEPS[0].map(col)}\\n        y={ENV_STEPS[0].map(row)}\\n      />\\n      <AnimatedCircle\\n        toggled={selected === 'purple'}\\n        fillOpacity={selectedOpacity(selected, 'purple')}\\n        onClick={() => setSelected(selected => selected !== 'purple' ? 'purple' : 'none')}\\n        r=\\\"18\\\"\\n        color=\\\"purple\\\"\\n        x={DAY_STEPS[1].map(col)}\\n        y={ENV_STEPS[1].map(row)}\\n      />\\n      <AnimatedCircle\\n        toggled={selected === 'blue'}\\n        fillOpacity={selectedOpacity(selected, 'blue')}\\n        onClick={() => setSelected(selected => selected !== 'blue' ? 'blue' : 'none')}\\n        r=\\\"18\\\"\\n        color=\\\"blue\\\"\\n        x={DAY_STEPS[2].map(col)}\\n        y={ENV_STEPS[2].map(row)}\\n      />\\n      <AnimatedCircle\\n        toggled={selected === 'green'}\\n        onClick={() => setSelected(selected => selected !== 'green' ? 'green' : 'none')}\\n        fillOpacity={selectedOpacity(selected, 'green')}\\n        r=\\\"18\\\"\\n        color=\\\"green\\\" \\n        x={DAY_STEPS[3].map(col)}\\n        y={ENV_STEPS[3].map(row)}\\n      />\\n    </svg>\\n  )\\n}\\n\"))), mdx(\"hr\", null), mdx(ReleaseSchedule, {\n    mdxType: \"ReleaseSchedule\"\n  }), mdx(\"hr\", null), mdx(\"h1\", null, \"Resources\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Slides - \", mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"https://mdx-intro.netlify.com/\"\n  }), \"https://mdx-intro.netlify.com/\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"https://github.com/infiniteluke/mdx-deck-intro\"\n  }), \"Slide Deck Code\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"https://github.com/jxnblk/mdx-deck\"\n  }), \"mdx-deck\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"https://github.com/pomber/code-surfer\"\n  }), \"CodeSurfer\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"https://copernicus-ah.netlify.com/\"\n  }), \"Copernicus Tech Debt Tech Demo Slides\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"https://componentsasdata.com/\"\n  }), \"Components as Data Slides\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"@luke on slack\")), mdx(\"hr\", null), mdx(\"h1\", null, \"\\uD83D\\uDC4B Thanks!\"));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"matchPath":"/*","id":"920dde17-3e7c-5715-b5bb-140fb80b5406","slug":"","title":"Intro to MDX Deck"}}}