{"componentChunkName":"component---src-templates-blog-post-js","path":"/blog/new-site/","result":{"data":{"site":{"siteMetadata":{"host":"xenodochial-pasteur-bb9d87.netlify.com"}},"mdx":{"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/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"New Site\",\n  \"date\": \"2019-04-18\",\n  \"thumbnail\": \"./thumbnails/default.png\"\n};\nvar layoutProps = {\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(\"p\", null, \"This is the obligatory \\\"I made a new site!\\\" post. It's not gonna be very long, but I wanted to at least\\nlist the major tech pillars and why I chose them.\"), mdx(\"h2\", null, \"1. \", mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"https://www.gatsbyjs.org/\"\n  }), \"Gatsby\")), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"What is it:\"), \" A static website builder written in JS and wrapping React.\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Why I chose it:\"), \" A wanted a static website builder for the normal reasons, I didn't want a server,\\nCDNs are fast, serving static files is cheap. What Gatsby (and \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://nextjs.org/\"\n  }), \"Next\"), \", \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://vuepress.vuejs.org/\"\n  }), \"VuePress\"), \", and \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://github.com/ef4/prember\"\n  }), \"Prember\"), \") add is an integrated client-side framework for making rich interactivity. I chose Gatsby out of the list because it was the first I heard of, I'm already familiar with React,\\nand it has a strong community.\"), mdx(\"h2\", null, \"2. \", mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"https://sass-lang.com/\"\n  }), \"Sass/SCSS\")), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"What is it:\"), \" The tried and true CSS preprocessor that enhances the language with features such as imports,\\nnested selectors, custom functions, and mixins.\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Why I chose it:\"), \" I'm not ready to jump ship to CSS-in-JS. Conceptually, I don't think it's a good idea,\\nand for a site the size of mine, with exactly one contributor, I wasn't concerned about the weaknesses to CSS that\\nCSS-in-JS tries to solve. One new thing I'm trying out is CSS4 variables. The trick I'm using is to use variables in\\nstyle sheet declarations, but to define the values of those variables via inline styles in JSX where I can read variable\\nvalues from places like frontmatter, JSON, etc.\"), mdx(\"h2\", null, \"3. \", mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"https://github.com/dingoeatingfuzz/wggl\"\n  }), \"Wggl\")), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"What is it:\"), \" My own WebGL wrapper library.\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Why I chose it:\"), \" I'll write about this more later, I think, but it boils down to three reasons. Reason one is that\\ninterfacing with WebGL directly is tedious, error-prone, and frankly asking for an abstraction. Reason two is that despite\\nonly having this site to think about, I figured I could write that abstraction. Reason three is I somehow entirely missed\\n\", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"http://regl.party/\"\n  }), \"regl\"), \" when researching existing solutions.\"), mdx(\"h2\", null, \"4. \", mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"https://github.com/toml-lang/toml\"\n  }), \"TOML\")), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"What is it:\"), \" A configuration language.\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Why I chose it:\"), \" You gotta have something, and TOML is the apex of configuration languages that are nice to use and are\\nadopted standards. JSON is too verbose, YAML is too surprising and clunky, anything else isn't popular enough.\"), mdx(\"h2\", null, \"5. \", mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"https://github.com/DingoEatingFuzz/mlange-2018/blob/master/transformers/slides-md.js\"\n  }), \"Slides MD\")), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"What is it:\"), \" A specialized Markdown superset for documenting slide decks.\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Why I \", mdx(\"del\", {\n    parentName: \"strong\"\n  }, \"chose\"), \" wrote it\"), \": I needed a way to author talk pages that satisfied the design I wanted. Markdown + frontmatter almost checked all the boxes, but I wanted to separate each slide so I could think of slide content as data that got treated in the template. \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://mdxjs.com/\"\n  }), \"MDX\"), \" almost worked, since it would let me wrap each slide in a component, but that isn't treating content as data, that's embedded the templating within the data. Then I found \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://github.com/jxnblk/mdx-deck\"\n  }), \"MDX Slides\"), \" which inspired me to look into making my own Gatsby transformer and my own syntax for splitting sections of a markdown file. I'll write more about this later too.\"), mdx(\"h2\", null, \"The End\"), mdx(\"p\", null, \"There you have it. I made a new site and I used things to make it.\"));\n}\n;\nMDXContent.isMDXComponent = true;","excerpt":"This is the obligatory \"I made a new site!\" post. It's not gonna be very long, but I wanted to at least\nlist the major tech pillars and why…","frontmatter":{"title":"New Site","date":"2019-04-18","thumbnail":{"childImageSharp":{"original":{"src":"/static/default-a3f1704664035bd1538cde3c0c1e7886.png"}}}}}},"pageContext":{"slug":"/blog/new-site/"}},"staticQueryHashes":[]}