component---src-pages-blog-mdx-frontmatter-slug-js-content-file-path-blog-first-post-mdx-476427e6c120e4504a3b.js.map

{"version":3,"file":"component---src-pages-blog-mdx-frontmatter-slug-js-content-file-path-blog-first-post-mdx-476427e6c120e4504a3b.js","mappings":"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","sources":["webpack://samuel-tan/./blog/first-post.mdx","webpack://samuel-tan/./src/pages/blog/{mdx.frontmatter__slug}.js","webpack://samuel-tan/./node_modules/@mdx-js/react/lib/index.js"],"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    p: \"p\",\n    h2: \"h2\",\n    ul: \"ul\",\n    li: \"li\",\n    span: \"span\",\n    a: \"a\",\n    pre: \"pre\",\n    code: \"code\"\n  }, _provideComponents(), props.components);\n  return React.createElement(React.Fragment, null, React.createElement(_components.p, null, \"I've always wanted my own website as it would serve as an easy way of collecting the projects that I work on, both work and otherwise.\"), \"\\n\", React.createElement(_components.p, null, \"However, I've never put in the effort to properly make a website - until now. The create-a-website project aligns with other projects that I intend to do across this summer holiday.\"), \"\\n\", React.createElement(_components.h2, null, \"Website Components\"), \"\\n\", React.createElement(_components.p, null, \"Nontechnical requirements:\"), \"\\n\", React.createElement(_components.ul, null, \"\\n\", React.createElement(_components.li, null, \"Introduce myself, my areas of interest and my projects\"), \"\\n\", React.createElement(_components.li, null, \"Aesthetically appealing\"), \"\\n\", React.createElement(_components.li, null, \"Link to my other social media\"), \"\\n\"), \"\\n\", React.createElement(_components.p, null, \"Technical requirements:\"), \"\\n\", React.createElement(_components.ul, null, \"\\n\", React.createElement(_components.li, null, \"Fast loading time\"), \"\\n\", React.createElement(_components.li, null, \"Ideally, good SEO\"), \"\\n\"), \"\\n\", React.createElement(_components.h2, null, \"Attempt 1: Using React\"), \"\\n\", React.createElement(_components.p, null, \"I must preface that this is my first attempt at making a website and my goal was to create a minimal website that works. A quick search had me find that React was the framework that seemed easiest to pick up.\"), \"\\n\", React.createElement(_components.p, null, \"After completing a short tutorial on react, I built my first website as shown:\"), \"\\n\", React.createElement(_components.span, {\n    dangerouslySetInnerHTML: {\n      __html: \"<span\\n      class=\\\"gatsby-resp-image-wrapper\\\"\\n      style=\\\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 1200px; \\\"\\n    >\\n      <a\\n    class=\\\"gatsby-resp-image-link\\\"\\n    href=\\\"/static/092e98d2097feac46d83e8dbfa67a022/fb8ff/orig_page.jpg\\\"\\n    style=\\\"display: block\\\"\\n    target=\\\"_blank\\\"\\n    rel=\\\"noopener\\\"\\n  >\\n    <span\\n    class=\\\"gatsby-resp-image-background-image\\\"\\n    style=\\\"padding-bottom: 50%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAKABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAQBAwX/xAAVAQEBAAAAAAAAAAAAAAAAAAAAAf/aAAwDAQACEAMQAAABwWk5S8Bf/8QAGxAAAgEFAAAAAAAAAAAAAAAAAQIhAAMQEjH/2gAIAQEAAQUCBm9pSGMJz//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABoQAAEFAQAAAAAAAAAAAAAAAAEAERIgITH/2gAIAQEABj8CD8Qhlf/EABwQAAICAgMAAAAAAAAAAAAAAAABITEQQRFhsf/aAAgBAQABPyG6uUj1eXTYzZ3h6Pc//9oADAMBAAIAAwAAABCED//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8QP//EABURAQEAAAAAAAAAAAAAAAAAABAR/9oACAECAQE/EKf/xAAdEAEAAgICAwAAAAAAAAAAAAABESEAMRBhQbHw/9oACAEBAAE/EJNDKNxN5HVgiOE8N41y3Z6OPVm75oz/2Q=='); background-size: cover; display: block;\\\"\\n  ></span>\\n  <img\\n        class=\\\"gatsby-resp-image-image\\\"\\n        alt=\\\"Original page\\\"\\n        title=\\\"\\\"\\n        src=\\\"/static/092e98d2097feac46d83e8dbfa67a022/e5166/orig_page.jpg\\\"\\n        srcset=\\\"/static/092e98d2097feac46d83e8dbfa67a022/f93b5/orig_page.jpg 300w,\\n/static/092e98d2097feac46d83e8dbfa67a022/b4294/orig_page.jpg 600w,\\n/static/092e98d2097feac46d83e8dbfa67a022/e5166/orig_page.jpg 1200w,\\n/static/092e98d2097feac46d83e8dbfa67a022/d9c39/orig_page.jpg 1800w,\\n/static/092e98d2097feac46d83e8dbfa67a022/fb8ff/orig_page.jpg 1914w\\\"\\n        sizes=\\\"(max-width: 1200px) 100vw, 1200px\\\"\\n        style=\\\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\\\"\\n        loading=\\\"lazy\\\"\\n        decoding=\\\"async\\\"\\n      />\\n  </a>\\n    </span>\"\n    }\n  }), \"\\n\", React.createElement(_components.p, null, \"I liked the additional animation at the start of being able to spell out my name - even though it was a good-to-have. FontAwesome was used for the icons that listed my socials.\"), \"\\n\", React.createElement(_components.p, null, \"However, I realised that\"), \"\\n\", React.createElement(_components.ul, null, \"\\n\", React.createElement(_components.li, null, \"Search-engine optimisation was not ideal.\"), \"\\n\", React.createElement(_components.li, null, \"Addition and maintaining of blog pages would need to be done via a CMS/some other static site generator or framework.\"), \"\\n\", React.createElement(_components.li, null, \"Programmatically creating pages might be tough to do with just React alone.\"), \"\\n\"), \"\\n\", React.createElement(_components.p, null, \"Therefore, I made the decision to redo the website on \", React.createElement(_components.a, {\n    href: \"https://www.gatsbyjs.com/\"\n  }, \"Gatsby\"), \" which is a static-site generator framework known for having many plugins that can be used to boost the performance of a site. It's also built on top of react.js, and uses purple heavily :D\"), \"\\n\", React.createElement(_components.h2, null, \"Attempt 2: Gatsby\"), \"\\n\", React.createElement(_components.p, null, \"Gatsby uses \", React.createElement(_components.a, {\n    href: \"https://graphql.org/\"\n  }, \"GraphQL\"), \" in order to interact with a data layer. As I wanted to create new pages programmatically, I created pages using a query that matches the id of each blog post with its characteristics as shown:\"), \"\\n\", React.createElement(_components.pre, null, React.createElement(_components.code, null, \"const BlogPost = ({ data, children }) => {\\r\\n  return (\\r\\n    <Layout pageTitle={data.mdx.frontmatter.name}>\\r\\n      <p>{data.mdx.frontmatter.date}</p>\\r\\n      {children}\\r\\n    </Layout>\\r\\n  )\\r\\n}\\r\\nexport const query = graphql`\\r\\n  query ($id: String) {\\r\\n    mdx(id: {eq: $id}) {\\r\\n      frontmatter {\\r\\n        name\\r\\n        date(formatString: \\\"MMMM D, YYYY\\\")\\r\\n      }\\r\\n    }\\r\\n  }\\r\\n`\\r\\nexport const Head = ({data}) => <Seo title={data.mdx.frontmatter.name} />\\r\\n\\r\\nexport default BlogPost\\n\")), \"\\n\", React.createElement(_components.p, null, \"This works to create a page each time a new .mdx file is created.\"), \"\\n\", React.createElement(_components.p, null, \"Through Gatsby, I've also realised that load times are a lot faster than before! :D\"), \"\\n\", React.createElement(_components.h2, null, \"Attempt 3: Extensions?\"), \"\\n\", React.createElement(_components.p, null, \"I'd like to see where I can take this page with me to.\"), \"\\n\", React.createElement(_components.p, null, \"Potential improvements include:\"), \"\\n\", React.createElement(_components.ul, null, \"\\n\", React.createElement(_components.li, null, \"Adding a PostgreSQL database for upcoming performances\"), \"\\n\", React.createElement(_components.li, null, \"Adding (another) PostgreSQL database for my projects\"), \"\\n\", React.createElement(_components.li, null, \"Improving the CSS - I like it as is, but I'm quite easily satisfied with the aesthetic side of things.\"), \"\\n\"), \"\\n\", React.createElement(_components.p, null, \"That's all for now!\"));\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 GATSBY_COMPILED_MDX from \"C:/Users/Samuel/Downloads/PW2/samuel-tan/blog/first-post.mdx\";\nimport * as React from 'react';\nimport {graphql} from 'gatsby';\nimport Layout from '../../components/layout';\nimport Seo from '../../components/seo';\nconst BlogPost = ({data, children}) => {\n  return React.createElement(Layout, {\n    pageTitle: data.mdx.frontmatter.name\n  }, React.createElement(\"p\", null, data.mdx.frontmatter.date), children);\n};\nexport const query = graphql`\n  query ($id: String) {\n    mdx(id: {eq: $id}) {\n      frontmatter {\n        name\n        date(formatString: \"MMMM D, YYYY\")\n      }\n    }\n  }\n`;\nexport const Head = ({data}) => React.createElement(Seo, {\n  title: data.mdx.frontmatter.name\n});\nBlogPost\nexport default function GatsbyMDXWrapper(props) {\n  return React.createElement(BlogPost, props, React.createElement(GATSBY_COMPILED_MDX, props));\n}\n","/**\n * @typedef {import('react').ReactNode} ReactNode\n * @typedef {import('mdx/types.js').MDXComponents} Components\n *\n * @typedef Props\n *   Configuration.\n * @property {Components | MergeComponents | null | undefined} [components]\n *   Mapping of names for JSX components to React components.\n * @property {boolean | null | undefined} [disableParentContext=false]\n *   Turn off outer component context.\n * @property {ReactNode | null | undefined} [children]\n *   Children.\n *\n * @callback MergeComponents\n *   Custom merge function.\n * @param {Components} currentComponents\n *   Current components from the context.\n * @returns {Components}\n *   Merged components.\n */\n\nimport React from 'react'\n\n/**\n * @type {import('react').Context<Components>}\n * @deprecated\n *   This export is marked as a legacy feature.\n *   That means it’s no longer recommended for use as it might be removed\n *   in a future major release.\n *\n *   Please use `useMDXComponents` to get context based components and\n *   `MDXProvider` to set context based components instead.\n */\nexport const MDXContext = React.createContext({})\n\n/**\n * @param {import('react').ComponentType<any>} Component\n * @deprecated\n *   This export is marked as a legacy feature.\n *   That means it’s no longer recommended for use as it might be removed\n *   in a future major release.\n *\n *   Please use `useMDXComponents` to get context based components instead.\n */\nexport function withMDXComponents(Component) {\n  return boundMDXComponent\n\n  /**\n   * @param {Record<string, unknown> & {components?: Components | null | undefined}} props\n   * @returns {JSX.Element}\n   */\n  function boundMDXComponent(props) {\n    const allComponents = useMDXComponents(props.components)\n    return React.createElement(Component, {...props, allComponents})\n  }\n}\n\n/**\n * Get current components from the MDX Context.\n *\n * @param {Components | MergeComponents | null | undefined} [components]\n *   Additional components to use or a function that takes the current\n *   components and filters/merges/changes them.\n * @returns {Components}\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    // Custom merge via a function prop\n    if (typeof components === 'function') {\n      return components(contextComponents)\n    }\n\n    return {...contextComponents, ...components}\n  }, [contextComponents, components])\n}\n\n/** @type {Components} */\nconst emptyObject = {}\n\n/**\n * Provider for MDX context\n *\n * @param {Props} props\n * @returns {JSX.Element}\n */\nexport function MDXProvider({components, children, disableParentContext}) {\n  /** @type {Components} */\n  let allComponents\n\n  if (disableParentContext) {\n    allComponents =\n      typeof components === 'function'\n        ? components({})\n        : components || emptyObject\n  } else {\n    allComponents = useMDXComponents(components)\n  }\n\n  return React.createElement(\n    MDXContext.Provider,\n    {value: allComponents},\n    children\n  )\n}\n"],"names":["_createMdxContent","props","_components","Object","assign","p","h2","ul","li","span","a","pre","code","_provideComponents","components","React","dangerouslySetInnerHTML","__html","href","wrapper","MDXLayout","BlogPost","_ref","data","children","Layout","pageTitle","mdx","frontmatter","name","date","Head","_ref2","Seo","title","GatsbyMDXWrapper","GATSBY_COMPILED_MDX","MDXContext","useMDXComponents","contextComponents"],"sourceRoot":""}