component---src-pages-articles-js-73ace78ca1533d43a0cf.js.map

{"version":3,"sources":["webpack:///./node_modules/react-reveal/Fade.js","webpack:///./content/articles/first.md","webpack:///./content/articles/fifth copy.md","webpack:///./content/articles/second copy.md","webpack:///./content/articles/fourth.md","webpack:///./content/articles sync ^\\.\\/.*\\.md$","webpack:///./src/pages/articles.js","webpack:///./content/articles/fifth copy 2.md","webpack:///./content/articles/second.md","webpack:///./content/articles/third.md","webpack:///./content/articles/fifth.md"],"names":["_objectWithoutProperties","o","e","r","t","indexOf","Object","prototype","hasOwnProperty","call","make","distance","left","p","right","a","up","l","down","i","top","u","bottom","n","big","s","mirror","d","opposite","_","toString","lookup","f","y","b","v","c","_globals","animation","Fade","arguments","length","defaults","children","out","forever","timeout","duration","delay","count","style","animationFillMode","reverse","_wrap2","default","defineProperty","exports","value","_propTypes","_wrap","__esModule","propTypes","bool","number","string","module","map","webpackContext","req","id","webpackContextResolve","__webpack_require__","Error","code","keys","resolve","converter","showdown","Converter","tables","simplifiedAutoLink","strikethrough","tasklists","ghCodeBlocks","parseImgDimensions","simpleLineBreaks","openLinksInNewWindow","emoji","Box","styled","div","withConfig","displayName","componentId","ArticleCard","props","darkMode","Tag","span","Article","require","_ref3","node","frontMatter","markdownContent","collapsed","isExpanded","setIsExpanded","useState","React","createElement","Fragment","Link","to","key","expanded","marginBottom","color","padding","name","date","author","readTime","Array","isArray","tags","marginTop","tag","replace","background","excerpt","fontSize","className","dangerouslySetInnerHTML","__html","Articles","_ref","_data$allFile","data","toggleDarkMode","pageContext","Layout","Sidebar","active","perspective","maxWidth","margin","position","gridTemplateColumns","display","undefined","allFile","edges","_ref2","index","articleContent","content","parsed","JSON","parse","parts","split","frontMatterLines","trim","forEach","line","values","join","startsWith","endsWith","slice","makeHtml","error","console","parseMarkdown","stringify","DarkMode"],"mappings":"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","file":"component---src-pages-articles-js-73ace78ca1533d43a0cf.js","sourcesContent":["\"use strict\";\n\nfunction _interopRequireDefault(o) {\n  return o && o.__esModule ? o : {\n    default: o\n  };\n}\nfunction _objectWithoutProperties(o, e) {\n  var r = {};\n  for (var t in o) e.indexOf(t) >= 0 || Object.prototype.hasOwnProperty.call(o, t) && (r[t] = o[t]);\n  return r;\n}\nfunction make(o, e) {\n  var r = e.distance,\n    t = e.left,\n    p = e.right,\n    a = e.up,\n    l = e.down,\n    i = e.top,\n    u = e.bottom,\n    n = e.big,\n    s = e.mirror,\n    d = e.opposite,\n    _ = (r ? r.toString() : 0) + ((t ? 1 : 0) | (p ? 2 : 0) | (i || l ? 4 : 0) | (u || a ? 8 : 0) | (s ? 16 : 0) | (d ? 32 : 0) | (o ? 64 : 0) | (n ? 128 : 0));\n  if (lookup.hasOwnProperty(_)) return lookup[_];\n  var f = t || p || a || l || i || u,\n    y = void 0,\n    b = void 0;\n  if (f) {\n    if (!s != !(o && d)) {\n      var v = [p, t, u, i, l, a];\n      t = v[0], p = v[1], i = v[2], u = v[3], a = v[4], l = v[5];\n    }\n    var c = r || (n ? \"2000px\" : \"100%\");\n    y = t ? \"-\" + c : p ? c : \"0\", b = l || i ? \"-\" + c : a || u ? c : \"0\";\n  }\n  return lookup[_] = (0, _globals.animation)((o ? \"to\" : \"from\") + \" {opacity: 0;\" + (f ? \" transform: translate3d(\" + y + \", \" + b + \", 0);\" : \"\") + \"}\\n     \" + (o ? \"from\" : \"to\") + \" {opacity: 1;transform: none;} \"), lookup[_];\n}\nfunction Fade() {\n  var o = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : _globals.defaults,\n    e = arguments.length > 1 && void 0 !== arguments[1] && arguments[1],\n    r = o.children,\n    t = (o.out, o.forever),\n    p = o.timeout,\n    a = o.duration,\n    l = void 0 === a ? _globals.defaults.duration : a,\n    i = o.delay,\n    u = void 0 === i ? _globals.defaults.delay : i,\n    n = o.count,\n    s = void 0 === n ? _globals.defaults.count : n,\n    d = _objectWithoutProperties(o, [\"children\", \"out\", \"forever\", \"timeout\", \"duration\", \"delay\", \"count\"]),\n    _ = {\n      make: make,\n      duration: void 0 === p ? l : p,\n      delay: u,\n      forever: t,\n      count: s,\n      style: {\n        animationFillMode: \"both\"\n      },\n      reverse: d.left\n    };\n  return e ? (0, _wrap2.default)(d, _, _, r) : _;\n}\nObject.defineProperty(exports, \"__esModule\", {\n  value: !0\n});\nvar _propTypes = require(\"prop-types\"),\n  _globals = require(\"./globals\"),\n  _wrap = require(\"./wrap\"),\n  _wrap2 = _interopRequireDefault(_wrap),\n  propTypes = {\n    out: _propTypes.bool,\n    left: _propTypes.bool,\n    right: _propTypes.bool,\n    top: _propTypes.bool,\n    bottom: _propTypes.bool,\n    big: _propTypes.bool,\n    mirror: _propTypes.bool,\n    opposite: _propTypes.bool,\n    duration: _propTypes.number,\n    timeout: _propTypes.number,\n    distance: _propTypes.string,\n    delay: _propTypes.number,\n    count: _propTypes.number,\n    forever: _propTypes.bool\n  },\n  lookup = {};\nFade.propTypes = propTypes, exports.default = Fade, module.exports = exports.default;","export default \"---\\r\\ntitle: \\\"Building Modern Web Applications with React\\\"\\r\\nslug: \\\"building-modern-web-apps\\\"\\r\\ndate: \\\"2024-11-29\\\"\\r\\nauthor: \\\"Aayush\\\"\\r\\ntags: [\\\"React\\\", \\\"JavaScript\\\", \\\"Web Development\\\"]\\r\\nexcerpt: \\\"Learn how to create scalable and maintainable web applications using React and modern JavaScript practices.\\\"\\r\\nreadTime: \\\"5 min read\\\"\\r\\n---\\r\\n\\r\\nimport { CodeBlock } from '../components/CodeBlock'\\r\\n\\r\\n# Building Modern Web Applications with React\\r\\n\\r\\nModern web development has evolved significantly over the years. React has emerged as one of the most popular libraries for building user interfaces.\\r\\n\\r\\n## Getting Started\\r\\n\\r\\nFirst, let's create a new React application:\\r\\n\\r\\n\\r\\n`npx create-react-app my-modern-app`\\r\\ncd my-modern-app\\r\\nnpm start\\r\\n\\r\\n\\r\\n# JavaScript Code Example\\r\\n\\r\\nHere's a JavaScript code block:\\r\\n\\r\\n```javascript\\r\\nconst calculateSum = (arr) => {\\r\\n  return arr.reduce((sum, num) => sum + num, 0);\\r\\n};\\r\\n\\r\\nconst numbers = [1, 2, 3, 4, 5];\\r\\nconsole.log(calculateSum(numbers)); // Output: 15\\r\\n```\\r\\n## Key Concepts\\r\\n\\r\\n### 1. Component Structure\\r\\n\\r\\nReact components should be:\\r\\n- Small and focused\\r\\n- Reusable\\r\\n- Easy to test\\r\\n\\r\\n### 2. State Management\\r\\n\\r\\nModern React apps have several options for state management:\\r\\n- useState for local state\\r\\n- Context API for shared state\\r\\n- Redux for complex state\\r\\n\\r\\n## Code Examples\\r\\n\\r\\nHere's a simple functional component:\\r\\n\\r\\n<CodeBlock language=\\\"jsx\\\">\\r\\nfunction Welcome({ name }) {\\r\\n  return (\\r\\n    <div>\\r\\n      <h1>Hello, {name}</h1>\\r\\n      <p>Welcome to our app!</p>\\r\\n    </div>\\r\\n  );\\r\\n}\\r\\n</CodeBlock>\\r\\n\\r\\n## Best Practices\\r\\n\\r\\n1. Use functional components with hooks\\r\\n2. Implement proper error boundaries\\r\\n3. Follow the DRY principle\\r\\n\\r\\n## Summary\\r\\n\\r\\nBy following these patterns and practices, you can build maintainable and scalable React applications.\\r\\n\\r\\n## Further Reading\\r\\n- [React Documentation](https://reactjs.org)\\r\\n- [Modern JavaScript Features](https://javascript.info)\";","export default \"---\\r\\ntitle: \\\"Building Modern Web Applications with React\\\"\\r\\nslug: \\\"building-modern-web-apps\\\"\\r\\ndate: \\\"2024-11-29\\\"\\r\\nauthor: \\\"Aayush\\\"\\r\\ntags: [\\\"React\\\", \\\"JavaScript\\\", \\\"Web Development\\\"]\\r\\nexcerpt: \\\"Learn how to create scalable and maintainable web applications using React and modern JavaScript practices.\\\"\\r\\nreadTime: \\\"5 min read\\\"\\r\\n---\\r\\n\\r\\nimport { CodeBlock } from '../components/CodeBlock'\\r\\n\\r\\n# Building Modern Web Applications with React\\r\\n\\r\\nModern web development has evolved significantly over the years. React has emerged as one of the most popular libraries for building user interfaces.\\r\\n\\r\\n## Getting Started\\r\\n\\r\\nFirst, let's create a new React application:\\r\\n\\r\\n\\r\\n`npx create-react-app my-modern-app`\\r\\ncd my-modern-app\\r\\nnpm start\\r\\n\\r\\n\\r\\n# JavaScript Code Example\\r\\n\\r\\nHere's a JavaScript code block:\\r\\n\\r\\n```javascript\\r\\nconst calculateSum = (arr) => {\\r\\n  return arr.reduce((sum, num) => sum + num, 0);\\r\\n};\\r\\n\\r\\nconst numbers = [1, 2, 3, 4, 5];\\r\\nconsole.log(calculateSum(numbers)); // Output: 15\\r\\n```\\r\\n## Key Concepts\\r\\n\\r\\n### 1. Component Structure\\r\\n\\r\\nReact components should be:\\r\\n- Small and focused\\r\\n- Reusable\\r\\n- Easy to test\\r\\n\\r\\n### 2. State Management\\r\\n\\r\\nModern React apps have several options for state management:\\r\\n- useState for local state\\r\\n- Context API for shared state\\r\\n- Redux for complex state\\r\\n\\r\\n## Code Examples\\r\\n\\r\\nHere's a simple functional component:\\r\\n\\r\\n<CodeBlock language=\\\"jsx\\\">\\r\\nfunction Welcome({ name }) {\\r\\n  return (\\r\\n    <div>\\r\\n      <h1>Hello, {name}</h1>\\r\\n      <p>Welcome to our app!</p>\\r\\n    </div>\\r\\n  );\\r\\n}\\r\\n</CodeBlock>\\r\\n\\r\\n## Best Practices\\r\\n\\r\\n1. Use functional components with hooks\\r\\n2. Implement proper error boundaries\\r\\n3. Follow the DRY principle\\r\\n\\r\\n## Summary\\r\\n\\r\\nBy following these patterns and practices, you can build maintainable and scalable React applications.\\r\\n\\r\\n## Further Reading\\r\\n- [React Documentation](https://reactjs.org)\\r\\n- [Modern JavaScript Features](https://javascript.info)\";","export default \"---\\r\\ntitle: \\\"Building Modern Web Applications with React\\\"\\r\\nslug: \\\"building-modern-web-apps\\\"\\r\\ndate: \\\"2024-11-29\\\"\\r\\nauthor: \\\"Aayush\\\"\\r\\ntags: [\\\"React\\\", \\\"JavaScript\\\", \\\"Web Development\\\"]\\r\\nexcerpt: \\\"Learn how to create scalable and maintainable web applications using React and modern JavaScript practices.\\\"\\r\\nreadTime: \\\"5 min read\\\"\\r\\n---\\r\\n\\r\\n## Summary\\r\\n\\r\\nBy following these patterns and practices, you can build maintainable and scalable React applications.\\r\\n\\r\\n## Further Reading\\r\\n- [React Documentation](https://reactjs.org)\\r\\n- [Modern JavaScript Features](https://javascript.info)\";","export default \"---\\r\\ntitle: \\\"Building Modern Web Applications with React\\\"\\r\\nslug: \\\"building-modern-web-apps\\\"\\r\\ndate: \\\"2024-11-29\\\"\\r\\nauthor: \\\"Aayush\\\"\\r\\ntags: [\\\"React\\\", \\\"JavaScript\\\", \\\"Web Development\\\"]\\r\\nexcerpt: \\\"Learn how to create scalable and maintainable web applications using React and modern JavaScript practices.\\\"\\r\\nreadTime: \\\"5 min read\\\"\\r\\n---\\r\\n\\r\\nimport { CodeBlock } from '../components/CodeBlock'\\r\\n\\r\\n# Building Modern Web Applications with React\\r\\n\\r\\nModern web development has evolved significantly over the years. React has emerged as one of the most popular libraries for building user interfaces.\\r\\n\\r\\n## Getting Started\\r\\n\\r\\nFirst, let's create a new React application:\\r\\n\\r\\n\\r\\n`npx create-react-app my-modern-app`\\r\\ncd my-modern-app\\r\\nnpm start\\r\\n\\r\\n\\r\\n# JavaScript Code Example\\r\\n\\r\\nHere's a JavaScript code block:\\r\\n\\r\\n```javascript\\r\\nconst calculateSum = (arr) => {\\r\\n  return arr.reduce((sum, num) => sum + num, 0);\\r\\n};\\r\\n\\r\\nconst numbers = [1, 2, 3, 4, 5];\\r\\nconsole.log(calculateSum(numbers)); // Output: 15\\r\\n```\\r\\n## Key Concepts\\r\\n\\r\\n### 1. Component Structure\\r\\n\\r\\nReact components should be:\\r\\n- Small and focused\\r\\n- Reusable\\r\\n- Easy to test\\r\\n\\r\\n### 2. State Management\\r\\n\\r\\nModern React apps have several options for state management:\\r\\n- useState for local state\\r\\n- Context API for shared state\\r\\n- Redux for complex state\\r\\n\\r\\n## Code Examples\\r\\n\\r\\nHere's a simple functional component:\\r\\n\\r\\n<CodeBlock language=\\\"jsx\\\">\\r\\nfunction Welcome({ name }) {\\r\\n  return (\\r\\n    <div>\\r\\n      <h1>Hello, {name}</h1>\\r\\n      <p>Welcome to our app!</p>\\r\\n    </div>\\r\\n  );\\r\\n}\\r\\n</CodeBlock>\\r\\n\\r\\n## Best Practices\\r\\n\\r\\n1. Use functional components with hooks\\r\\n2. Implement proper error boundaries\\r\\n3. Follow the DRY principle\\r\\n\\r\\n## Summary\\r\\n\\r\\nBy following these patterns and practices, you can build maintainable and scalable React applications.\\r\\n\\r\\n## Further Reading\\r\\n- [React Documentation](https://reactjs.org)\\r\\n- [Modern JavaScript Features](https://javascript.info)\";","var map = {\n\t\"./fifth copy 2.md\": \"jep+\",\n\t\"./fifth copy.md\": \"2d4l\",\n\t\"./fifth.md\": \"wOhZ\",\n\t\"./first.md\": \"1wXr\",\n\t\"./fourth.md\": \"TfUS\",\n\t\"./second copy.md\": \"BrBJ\",\n\t\"./second.md\": \"mN2o\",\n\t\"./third.md\": \"naJN\"\n};\n\n\nfunction webpackContext(req) {\n\tvar id = webpackContextResolve(req);\n\treturn __webpack_require__(id);\n}\nfunction webpackContextResolve(req) {\n\tif(!__webpack_require__.o(map, req)) {\n\t\tvar e = new Error(\"Cannot find module '\" + req + \"'\");\n\t\te.code = 'MODULE_NOT_FOUND';\n\t\tthrow e;\n\t}\n\treturn map[req];\n}\nwebpackContext.keys = function webpackContextKeys() {\n\treturn Object.keys(map);\n};\nwebpackContext.resolve = webpackContextResolve;\nmodule.exports = webpackContext;\nwebpackContext.id = \"cLba\";","import React, { useState } from \"react\";\r\nimport styled from \"styled-components\";\r\nimport Fade from \"react-reveal/Fade\";\r\nimport { Sidebar, DarkMode } from \"../components\";\r\nimport { graphql, Link } from \"gatsby\";\r\nimport Layout from \"../components/layout\";\r\nimport showdown from \"showdown\";\r\n\r\nconst converter = new showdown.Converter({\r\n  tables: true,\r\n  simplifiedAutoLink: true,\r\n  strikethrough: true,\r\n  tasklists: true,\r\n  ghCodeBlocks: true,\r\n  parseImgDimensions: true,\r\n  simpleLineBreaks: true,\r\n  openLinksInNewWindow: true,\r\n  emoji: true,\r\n});\r\n\r\nconst Box = styled.div`\r\n  font-size: 1.18em;\r\n  font-family: \"Montserrat\", sans-serif;\r\n  padding-right: 1em;\r\n  line-height: 165%;\r\n`;\r\n\r\nconst ArticleCard = styled.div`\r\n  // Code block styling\r\n  pre {\r\n    background: ${(props) => (props.darkMode ? \"#1a1a1a\" : \"#f5f5f5\")};\r\n    padding: 1.2em;\r\n    border-radius: 8px;\r\n    overflow-x: auto;\r\n    margin: 1em 0;\r\n    border: 1px solid ${(props) => (props.darkMode ? \"#333\" : \"#e1e1e1\")};\r\n  }\r\n\r\n  // Inline code styling (backticks)\r\n  code {\r\n    font-family: \"Fira Code\", Consolas, Monaco, \"Andale Mono\", monospace;\r\n    background: ${(props) => (props.darkMode ? \"#2d2d2d\" : \"#f0f0f0\")};\r\n    color: ${(props) => (props.darkMode ? \"#e6e6e6\" : \"#333\")};\r\n    padding: 0.2em 0.4em;\r\n    border-radius: 4px;\r\n    font-size: 0.9em;\r\n    border: 1px solid ${(props) => (props.darkMode ? \"#404040\" : \"#ddd\")};\r\n  }\r\n\r\n  // Adjust code inside pre blocks\r\n  pre code {\r\n    background: none;\r\n    padding: 0;\r\n    border: none;\r\n    font-size: 0.95em;\r\n    line-height: 1.5;\r\n    display: block;\r\n  }\r\n\r\n  // Language label for code blocks\r\n  pre:before {\r\n    content: attr(data-language);\r\n    display: block;\r\n    background: ${(props) => (props.darkMode ? \"#333\" : \"#e1e1e1\")};\r\n    color: ${(props) => (props.darkMode ? \"#ccc\" : \"#666\")};\r\n    font-size: 0.8em;\r\n    padding: 0.2em 0.6em;\r\n    border-radius: 4px;\r\n    margin-bottom: 0.8em;\r\n    width: fit-content;\r\n  }\r\n\r\n  background: ${(props) => (props.darkMode ? \"rgb(17 24 39/1)\" : \"#ffffff\")};\r\n  color: white;\r\n  border-radius: 8px;\r\n  box-shadow: rgb(46, 64, 83) 0px 0.25em 0.3em;\r\n  margin-bottom: 1.5rem;\r\n\r\n  p {\r\n    margin-bottom: 1em;\r\n    line-height: 1.7;\r\n  }\r\n\r\n  ul,\r\n  ol {\r\n    margin-left: 1.5em;\r\n    margin-bottom: 1em;\r\n  }\r\n\r\n  // Links\r\n  a {\r\n    color: ${(props) => (props.darkMode ? \"#6CCBFE\" : \"#0066cc\")};\r\n    text-decoration: none;\r\n\r\n    &:hover {\r\n      text-decoration: underline;\r\n    }\r\n  }\r\n\r\n  // Blockquotes\r\n  blockquote {\r\n    border-left: 3px solid ${(props) => (props.darkMode ? \"#666\" : \"#ddd\")};\r\n    margin: 1em 0;\r\n    padding-left: 1em;\r\n    color: ${(props) => (props.darkMode ? \"#ccc\" : \"#666\")};\r\n    font-style: italic;\r\n  }\r\n\r\n  // Images\r\n  img {\r\n    max-width: 100%;\r\n    height: auto;\r\n    border-radius: 4px;\r\n    margin: 1em 0;\r\n  }\r\n\r\n  // Tables\r\n  table {\r\n    width: 100%;\r\n    border-collapse: collapse;\r\n    margin: 1em 0;\r\n  }\r\n\r\n  th,\r\n  td {\r\n    padding: 0.5em;\r\n    border: 1px solid ${(props) => (props.darkMode ? \"#444\" : \"#ddd\")};\r\n    text-align: left;\r\n  }\r\n\r\n  th {\r\n    background: ${(props) => (props.darkMode ? \"#333\" : \"#f5f5f5\")};\r\n  }\r\n`;\r\n\r\nconst ArticleContent = styled.div`\r\n  color: ${(props) => (props.darkMode ? \"#fff\" : \"#333\")};\r\n\r\n  h1,\r\n  h2,\r\n  h3 {\r\n    margin-top: 1.5em;\r\n    margin-bottom: 0.5em;\r\n  }\r\n\r\n  pre {\r\n    background: ${(props) => (props.darkMode ? \"#333\" : \"#f5f5f5\")};\r\n    padding: 1em;\r\n    border-radius: 4px;\r\n    overflow-x: auto;\r\n  }\r\n\r\n  code {\r\n    font-family: monospace;\r\n  }\r\n`;\r\n\r\nconst Tag = styled.span`\r\n  background: ${(props) => (props.darkMode ? \"black\" : \"#eee\")};\r\n  color: ${(props) => (props.darkMode ? \"white\" : \"#333\")};\r\n  padding: 0.2rem 0.5rem;\r\n  border-radius: 4px;\r\n  margin-right: 0.5rem;\r\n  font-size: 0.8em;\r\n`;\r\n\r\nconst getArticle = (name) => {\r\n  return require(\"../../content/articles/\" + name + \".md\");\r\n};\r\n\r\nconst articles = {\r\n  first: require(\"../../content/articles/first.md\"),\r\n  second: require(\"../../content/articles/second.md\"),\r\n  second: require(\"../../content/articles/second.md\"),\r\n  second: require(\"../../content/articles/second.md\"),\r\n};\r\n\r\nconst Articles = ({ data, darkMode, toggleDarkMode, pageContext }) => {\r\n  const parseMarkdown = (content) => {\r\n    try {\r\n      const parsed = JSON.parse(content);\r\n      const parts = parsed && parsed.default ? parsed.default.split(\"---\") : [];\r\n\r\n      if (parts.length >= 3) {\r\n        const frontMatterLines = parts[1].trim().split(\"\\n\");\r\n        const frontMatter = {};\r\n\r\n        frontMatterLines.forEach((line) => {\r\n          const [key, ...values] = line.split(\":\").map((s) => s.trim());\r\n          if (key) {\r\n            let value = values.join(\":\").trim();\r\n            value = value.replace(/^[\"'](.*)[\"']$/, \"$1\");\r\n            if (value.startsWith(\"[\") && value.endsWith(\"]\")) {\r\n              value = value\r\n                .slice(1, -1)\r\n                .split(\",\")\r\n                .map((v) => v.trim());\r\n            }\r\n            frontMatter[key] = value;\r\n          }\r\n        });\r\n        const markdownContent = converter.makeHtml(parts[2].trim());\r\n        return { frontMatter, markdownContent };\r\n      }\r\n      return { frontMatter: {}, markdownContent: content };\r\n    } catch (error) {\r\n      console.error(\"Error parsing markdown:\", error);\r\n      return { frontMatter: {}, markdownContent: content };\r\n    }\r\n  };\r\n\r\n  return (\r\n    <Layout darkMode={true}>\r\n      <Sidebar active={\"articles\"} darkMode={true} />\r\n      <div\r\n        className=\"grid align-center\"\r\n        style={{\r\n          perspective: \"100rem\",\r\n          maxWidth: \"93%\",\r\n          margin: \"auto\",\r\n          position: \"relative\",\r\n          gridTemplateColumns: \"1fr\",\r\n        }}\r\n      >\r\n        <h1>Article</h1>\r\n        <div\r\n          style={{\r\n            display: \"grid\",\r\n            gridTemplateColumns:\r\n              pageContext && pageContext.name !== undefined ? \"1fr\" : \"1fr 1fr\",\r\n          }}\r\n        >\r\n          \r\n          {data?.allFile?.edges.map(({ node }, index) => {\r\n            if (\r\n              pageContext &&\r\n              pageContext.name &&\r\n              node.name !== pageContext.name\r\n            )\r\n              return false;\r\n            const articleContent = getArticle(node.name);\r\n            const { frontMatter, markdownContent } = parseMarkdown(\r\n              JSON.stringify(articleContent)\r\n            );\r\n\r\n            return (\r\n              <Fade left>\r\n                <Box>\r\n                  <Article\r\n                    node={node}\r\n                    collapsed={pageContext && pageContext.name !== undefined}\r\n                    frontMatter={frontMatter}\r\n                    markdownContent={markdownContent}\r\n                  />\r\n                </Box>\r\n              </Fade>\r\n            );\r\n          })}\r\n        </div>\r\n      </div>\r\n      <DarkMode toggleDarkMode={toggleDarkMode} darkMode={darkMode} />\r\n    </Layout>\r\n  );\r\n};\r\n\r\nconst Article = ({ node, frontMatter, markdownContent, collapsed }) => {\r\n  const darkMode = true;\r\n  const [isExpanded, setIsExpanded] = useState(!collapsed);\r\n\r\n  const toggleArticle = () => {\r\n    setIsExpanded(!isExpanded);\r\n  };\r\n\r\n  return (\r\n    <>\r\n      {collapsed && <Link to=\"/articles\">Back</Link>}\r\n      <ArticleCard key={node.id} darkMode={darkMode} expanded={isExpanded}>\r\n        <div\r\n          style={{\r\n            marginBottom: \"1rem\",\r\n            color: darkMode ? \"#999\" : \"#666\",\r\n            padding: \"1em 1em 0em 1em\",\r\n          }}\r\n        >\r\n          <h2>{node.name}</h2>\r\n          {frontMatter.date && <span>📅 {frontMatter.date} • </span>}\r\n          {frontMatter.author && <span>✍️ {frontMatter.author} • </span>}\r\n          {frontMatter.readTime && <span>⏱️ {frontMatter.readTime}</span>}\r\n\r\n          {Array.isArray(frontMatter.tags) && (\r\n            <div style={{ marginTop: \"1rem\", marginBottom: \"1rem\" }}>\r\n              {frontMatter.tags.map((tag) => (\r\n                <Tag key={tag} darkMode={darkMode}>\r\n                  {tag.replace(/\"/g, \"\")}\r\n                </Tag>\r\n              ))}\r\n            </div>\r\n          )}\r\n        </div>\r\n\r\n        <div\r\n          style={{\r\n            background: collapsed? 'rgb(42 46 53 / 1)': \"linear-gradient(90deg, rgba(42, 46, 53, 1), rgba(60, 64, 74, 1), rgba(42, 46, 53, 1))\",\r\n            padding: \"0em 1em 1em 1em\",\r\n          }}\r\n        >\r\n          {frontMatter.excerpt && (\r\n            <p\r\n              style={{\r\n                fontSize: \"1.1em\",\r\n                color: darkMode ? \"#ccc\" : \"#666\",\r\n                marginBottom: \"1.5rem\",\r\n              }}\r\n            >\r\n              {frontMatter.excerpt}\r\n            </p>\r\n          )}\r\n\r\n          <div className=\"content-preview\">\r\n            {collapsed && (\r\n              <div\r\n                dangerouslySetInnerHTML={{\r\n                  __html: markdownContent,\r\n                }}\r\n              />\r\n            )}\r\n          </div>\r\n\r\n          {!collapsed ? (\r\n            <Link to={\"/articles/\" + node.name}>Read more</Link>\r\n          ) : null}\r\n        </div>\r\n      </ArticleCard>\r\n    </>\r\n  );\r\n};\r\nexport const query = graphql`\r\n  query {\r\n    allFile(\r\n      filter: {\r\n        sourceInstanceName: { eq: \"articles\" }\r\n        extension: { regex: \"/(md|mdx)/\" }\r\n      }\r\n    ) {\r\n      edges {\r\n        node {\r\n          id\r\n          name\r\n          relativePath\r\n          internal {\r\n            content\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nexport default Articles;\r\n","export default \"---\\r\\ntitle: \\\"Building Modern Web Applications with React\\\"\\r\\nslug: \\\"building-modern-web-apps\\\"\\r\\ndate: \\\"2024-11-29\\\"\\r\\nauthor: \\\"Aayush\\\"\\r\\ntags: [\\\"React\\\", \\\"JavaScript\\\", \\\"Web Development\\\"]\\r\\nexcerpt: \\\"Learn how to create scalable and maintainable web applications using React and modern JavaScript practices.\\\"\\r\\nreadTime: \\\"5 min read\\\"\\r\\n---\\r\\n\\r\\nimport { CodeBlock } from '../components/CodeBlock'\\r\\n\\r\\n# Building Modern Web Applications with React\\r\\n\\r\\nModern web development has evolved significantly over the years. React has emerged as one of the most popular libraries for building user interfaces.\\r\\n\\r\\n## Getting Started\\r\\n\\r\\nFirst, let's create a new React application:\\r\\n\\r\\n\\r\\n`npx create-react-app my-modern-app`\\r\\ncd my-modern-app\\r\\nnpm start\\r\\n\\r\\n\\r\\n# JavaScript Code Example\\r\\n\\r\\nHere's a JavaScript code block:\\r\\n\\r\\n```javascript\\r\\nconst calculateSum = (arr) => {\\r\\n  return arr.reduce((sum, num) => sum + num, 0);\\r\\n};\\r\\n\\r\\nconst numbers = [1, 2, 3, 4, 5];\\r\\nconsole.log(calculateSum(numbers)); // Output: 15\\r\\n```\\r\\n## Key Concepts\\r\\n\\r\\n### 1. Component Structure\\r\\n\\r\\nReact components should be:\\r\\n- Small and focused\\r\\n- Reusable\\r\\n- Easy to test\\r\\n\\r\\n### 2. State Management\\r\\n\\r\\nModern React apps have several options for state management:\\r\\n- useState for local state\\r\\n- Context API for shared state\\r\\n- Redux for complex state\\r\\n\\r\\n## Code Examples\\r\\n\\r\\nHere's a simple functional component:\\r\\n\\r\\n<CodeBlock language=\\\"jsx\\\">\\r\\nfunction Welcome({ name }) {\\r\\n  return (\\r\\n    <div>\\r\\n      <h1>Hello, {name}</h1>\\r\\n      <p>Welcome to our app!</p>\\r\\n    </div>\\r\\n  );\\r\\n}\\r\\n</CodeBlock>\\r\\n\\r\\n## Best Practices\\r\\n\\r\\n1. Use functional components with hooks\\r\\n2. Implement proper error boundaries\\r\\n3. Follow the DRY principle\\r\\n\\r\\n## Summary\\r\\n\\r\\nBy following these patterns and practices, you can build maintainable and scalable React applications.\\r\\n\\r\\n## Further Reading\\r\\n- [React Documentation](https://reactjs.org)\\r\\n- [Modern JavaScript Features](https://javascript.info)\";","export default \"---\\r\\ntitle: \\\"Building Modern Web Applications with React\\\"\\r\\nslug: \\\"building-modern-web-apps\\\"\\r\\ndate: \\\"2024-11-29\\\"\\r\\nauthor: \\\"Aayush\\\"\\r\\ntags: [\\\"React\\\", \\\"JavaScript\\\", \\\"Web Development\\\"]\\r\\nexcerpt: \\\"Learn how to create scalable and maintainable web applications using React and modern JavaScript practices.\\\"\\r\\nreadTime: \\\"5 min read\\\"\\r\\n---\\r\\n\\r\\n## Summary\\r\\n\\r\\nBy following these patterns and practices, you can build maintainable and scalable React applications.\\r\\n\\r\\n## Further Reading\\r\\n- [React Documentation](https://reactjs.org)\\r\\n- [Modern JavaScript Features](https://javascript.info)\";","export default \"---\\r\\ntitle: \\\"Building Modern Web Applications with React\\\"\\r\\nslug: \\\"building-modern-web-apps\\\"\\r\\ndate: \\\"2024-11-29\\\"\\r\\nauthor: \\\"Aayush\\\"\\r\\ntags: [\\\"React\\\", \\\"JavaScript\\\", \\\"Web Development\\\"]\\r\\nexcerpt: \\\"Learn how to create scalable and maintainable web applications using React and modern JavaScript practices.\\\"\\r\\nreadTime: \\\"5 min read\\\"\\r\\n---\\r\\n\\r\\nimport { CodeBlock } from '../components/CodeBlock'\\r\\n\\r\\n# Building Modern Web Applications with React\\r\\n\\r\\nModern web development has evolved significantly over the years. React has emerged as one of the most popular libraries for building user interfaces.\\r\\n\\r\\n## Getting Started\\r\\n\\r\\nFirst, let's create a new React application:\\r\\n\\r\\n\\r\\n`npx create-react-app my-modern-app`\\r\\ncd my-modern-app\\r\\nnpm start\\r\\n\\r\\n\\r\\n# JavaScript Code Example\\r\\n\\r\\nHere's a JavaScript code block:\\r\\n\\r\\n```javascript\\r\\nconst calculateSum = (arr) => {\\r\\n  return arr.reduce((sum, num) => sum + num, 0);\\r\\n};\\r\\n\\r\\nconst numbers = [1, 2, 3, 4, 5];\\r\\nconsole.log(calculateSum(numbers)); // Output: 15\\r\\n```\\r\\n## Key Concepts\\r\\n\\r\\n### 1. Component Structure\\r\\n\\r\\nReact components should be:\\r\\n- Small and focused\\r\\n- Reusable\\r\\n- Easy to test\\r\\n\\r\\n### 2. State Management\\r\\n\\r\\nModern React apps have several options for state management:\\r\\n- useState for local state\\r\\n- Context API for shared state\\r\\n- Redux for complex state\\r\\n\\r\\n## Code Examples\\r\\n\\r\\nHere's a simple functional component:\\r\\n\\r\\n<CodeBlock language=\\\"jsx\\\">\\r\\nfunction Welcome({ name }) {\\r\\n  return (\\r\\n    <div>\\r\\n      <h1>Hello, {name}</h1>\\r\\n      <p>Welcome to our app!</p>\\r\\n    </div>\\r\\n  );\\r\\n}\\r\\n</CodeBlock>\\r\\n\\r\\n## Best Practices\\r\\n\\r\\n1. Use functional components with hooks\\r\\n2. Implement proper error boundaries\\r\\n3. Follow the DRY principle\\r\\n\\r\\n## Summary\\r\\n\\r\\nBy following these patterns and practices, you can build maintainable and scalable React applications.\\r\\n\\r\\n## Further Reading\\r\\n- [React Documentation](https://reactjs.org)\\r\\n- [Modern JavaScript Features](https://javascript.info)\";","export default \"---\\r\\ntitle: \\\"Building Modern Web Applications with React\\\"\\r\\nslug: \\\"building-modern-web-apps\\\"\\r\\ndate: \\\"2024-11-29\\\"\\r\\nauthor: \\\"Aayush\\\"\\r\\ntags: [\\\"React\\\", \\\"JavaScript\\\", \\\"Web Development\\\"]\\r\\nexcerpt: \\\"Learn how to create scalable and maintainable web applications using React and modern JavaScript practices.\\\"\\r\\nreadTime: \\\"5 min read\\\"\\r\\n---\\r\\n\\r\\nimport { CodeBlock } from '../components/CodeBlock'\\r\\n\\r\\n# Building Modern Web Applications with React\\r\\n\\r\\nModern web development has evolved significantly over the years. React has emerged as one of the most popular libraries for building user interfaces.\\r\\n\\r\\n## Getting Started\\r\\n\\r\\nFirst, let's create a new React application:\\r\\n\\r\\n\\r\\n`npx create-react-app my-modern-app`\\r\\ncd my-modern-app\\r\\nnpm start\\r\\n\\r\\n\\r\\n# JavaScript Code Example\\r\\n\\r\\nHere's a JavaScript code block:\\r\\n\\r\\n```javascript\\r\\nconst calculateSum = (arr) => {\\r\\n  return arr.reduce((sum, num) => sum + num, 0);\\r\\n};\\r\\n\\r\\nconst numbers = [1, 2, 3, 4, 5];\\r\\nconsole.log(calculateSum(numbers)); // Output: 15\\r\\n```\\r\\n## Key Concepts\\r\\n\\r\\n### 1. Component Structure\\r\\n\\r\\nReact components should be:\\r\\n- Small and focused\\r\\n- Reusable\\r\\n- Easy to test\\r\\n\\r\\n### 2. State Management\\r\\n\\r\\nModern React apps have several options for state management:\\r\\n- useState for local state\\r\\n- Context API for shared state\\r\\n- Redux for complex state\\r\\n\\r\\n## Code Examples\\r\\n\\r\\nHere's a simple functional component:\\r\\n\\r\\n<CodeBlock language=\\\"jsx\\\">\\r\\nfunction Welcome({ name }) {\\r\\n  return (\\r\\n    <div>\\r\\n      <h1>Hello, {name}</h1>\\r\\n      <p>Welcome to our app!</p>\\r\\n    </div>\\r\\n  );\\r\\n}\\r\\n</CodeBlock>\\r\\n\\r\\n## Best Practices\\r\\n\\r\\n1. Use functional components with hooks\\r\\n2. Implement proper error boundaries\\r\\n3. Follow the DRY principle\\r\\n\\r\\n## Summary\\r\\n\\r\\nBy following these patterns and practices, you can build maintainable and scalable React applications.\\r\\n\\r\\n## Further Reading\\r\\n- [React Documentation](https://reactjs.org)\\r\\n- [Modern JavaScript Features](https://javascript.info)\";"],"sourceRoot":""}