{
    "componentChunkName": "component---src-components-posts-post-tag-js",
    "path": "/articles/tag/website",
    "result": {"data":{"articles":{"totalCount":6,"edges":[{"node":{"frontmatter":{"title":"Automate Git Submodule Updates with Script Kit","slug":"/articles/automate-git-submodule-updates-with-script-kit","excerpt":"A short guide on how I update git submodules using script kit to publish this website","tags":["Script Kit","website","automate"]},"body":"var _excluded = [\"components\"];\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }\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; }\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/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n  \"title\": \"Automate Git Submodule Updates with Script Kit\",\n  \"slug\": \"/articles/automate-git-submodule-updates-with-script-kit\",\n  \"date\": \"2022-03-23\",\n  \"tags\": [\"Script Kit\", \"website\", \"automate\"],\n  \"excerpt\": \"A short guide on how I update git submodules using script kit to publish this website\",\n  \"published\": true,\n  \"featured\": false\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};\nvar Marginnote = makeShortcode(\"Marginnote\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, \"I love my website. I\\u2019ve slowly developed it since 2018, slowly iterating and piecing it together feature by feature. One thing that\\u2019s bothered me for a while is how I publish content on my website. Ever since I started, this website has been structured around markdown files holding the content. Markdown is easy to write, easy to store locally, and flexible I love using it to store my content. Markdown is not the problem.\"), mdx(\"p\", null, \"What I haven\\u2019t loved is the process of issuing all of the git commands necessary to publish that markdown. You see, \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://www.taniarascia.com/git-submodules-private-content/\"\n  }, \"I use git submodules\"), \" to store my website content in two separate private git repositories which I then have to update and commit on my website\\u2019s repository, before pushing to Netlify to publish my website.\", mdx(Marginnote, {\n    mdxType: \"Marginnote\"\n  }, \"One of my directories hold my poems, articles, and blog posts, the other contains my \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"/notes/notes\",\n    \"title\": \"notes\"\n  }, \"[[notes]]\"), \"\"), \" It\\u2019s a process involving terminal windows in multiple directories and a whole list of git commands I sometimes have to google to get the syntax right. It\\u2019s a perfect problem to solve with scripting. \"), mdx(\"p\", null, \"Sometime since I started coding websites almost 4 years ago I picked up the adage that the first time you notice a tedious process ignore it, the second time note it down, and the third time try to automate it. I don\\u2019t live by this adage because if I did I would have fixed this problem a long time ago. \"), mdx(\"p\", null, \"Scripting is the obvious solution to a problem that involves issuing commands in multiple directories automatically. But the barrier to writing and using a script can be high. I have to write the script, store it on my PATH, open a terminal, and run the script. It\\u2019s not an inordinate amount of steps, but it\\u2019s been enough that I haven\\u2019t gotten around to it.\"), mdx(\"p\", null, \"Enter \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://www.scriptkit.com/\"\n  }, \"Script Kit\"), \" an automation tool that allows you to write and execute a library of scripts simply by running the program and selecting the script you want to run. Since I started playing around with it, I\\u2019ve found that it lowers the barrier to entry both to writing and executing scripts. It\\u2019s packaged with easy to use libraries that expose everything from the terminal to an aesthetically pleasing GUI.\"), mdx(\"p\", null, mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"1380px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/9288891fc50242a9dc1d198f288e6cda/2dc7d/script-kit-screenshot.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"67.24637681159422%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAABYlAAAWJQFJUiTwAAABfklEQVQ4y5WSy07CUBCGT6K79iW4nEtvpJzeLwFMCDFG44bARsOz8ShupG7Ymq55CvHgmCktajQITb7MaTrznb/JEELIhZRymWXZJgzD1zzPyyzLyiRJyiSOqxpFURnXZ8ZYRRAEJfbizGg02vi+v0QXIYRotm2vPS8Aw7SACwNETXU2DDD+wTRNoJSu0YVCPU+j1f3dBG5vxturYaKiwFVpLFUWSxUGUkkplSf39Q+2nueB4zjP6KqEgd8vricjmIwHKgldCP0eSNcC6RrQc8wqwRGUZVnAGCsOQtOyiihOwO1Lhb9tWjZwLoBSDoxx4PwoCmun0/kS2rZdpGmKsRVjtGoUAhGnoLD+ELbb7YIxhrHV9+a9+LgQE/4S4ktz2ymSU4Sr5iPn/ONMGuHqIOx2uy+4T0KI3TnpanY4i45GqLVarSdKKS7nG6X0/UxwBtDRLPalpmkDXdcXuq4/1DyeSNO/QAe6UEiGwyGZTqdkPp+T2Wx2FjiDs+jA5xMg/jxFuU0W/gAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"My Script in action\",\n    \"title\": \"My Script in action\",\n    \"src\": \"/static/9288891fc50242a9dc1d198f288e6cda/b1001/script-kit-screenshot.png\",\n    \"srcSet\": [\"/static/9288891fc50242a9dc1d198f288e6cda/e4d6b/script-kit-screenshot.png 345w\", \"/static/9288891fc50242a9dc1d198f288e6cda/1e043/script-kit-screenshot.png 690w\", \"/static/9288891fc50242a9dc1d198f288e6cda/b1001/script-kit-screenshot.png 1380w\", \"/static/9288891fc50242a9dc1d198f288e6cda/2dc7d/script-kit-screenshot.png 1760w\"],\n    \"sizes\": \"(max-width: 1380px) 100vw, 1380px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\",\n    \"decoding\": \"async\"\n  }), \"\\n  \"), \"\\n    \"), \"\\nNow my publication process is: 1. Write article, poem, blog. 2. Press \", mdx(\"code\", {\n    parentName: \"p\",\n    \"className\": \"language-text\"\n  }, \"<CMD>+;\"), \" on my keyboard to run script kit, selecting my Publish Website script. 3. Wait for Netlify to publish my website. \"), mdx(\"p\", null, mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://scriptkit.com\"\n  }, \"Script Kit\"), \" is a wonderful tool.\"), mdx(\"p\", null, mdx(\"em\", {\n    parentName: \"p\"\n  }, \"The full code for my script is \", mdx(\"a\", {\n    parentName: \"em\",\n    \"href\": \"https://github.com/dschapman/dschapman-shared-kenv/blob/master/scripts/publish-website.js\"\n  }, \"on github\"), \" You can also directly install the script if you have Script Kit using \", mdx(\"a\", {\n    parentName: \"em\",\n    \"href\": \"kit://snippet?name=publish-website&content=Ly8gTmFtZTogUHVibGlzaCBXZWJzaXRlCi8vIERlc2NyaXB0aW9uOiBVcGRhdGUgdGhlIGdpdCByZXBvc2l0b3JpZXMgbmVjZXNzYXJ5IHRvIHB1Ymxpc2ggYW4gdXBkYXRlIHRvIG15IHdlYnNpdGUuCi8vIEF1dGhvcjogRGFuaWVsIENoYXBtYW4KLy8gVHdpdHRlcjogQGRzX2NoYXBtYW4KaW1wb3J0ICJAam9obmxpbmRxdWlzdC9raXQiCgpsZXQgd2Vic2l0ZV9jb250ZW50ID0gIi9Vc2Vycy9kYW5pZWxjaGFwbWFuL0xpYnJhcnkvTW9iaWxlIERvY3VtZW50cy9pQ2xvdWR-bWR-b2JzaWRpYW4vRG9jdW1lbnRzL2RzY2hhcG1hbi1jb20tY29udGVudCIKbGV0IHdlYnNpdGVfbm90ZXMgPSAiL1VzZXJzL2RhbmllbGNoYXBtYW4vTGlicmFyeS9Nb2JpbGUgRG9jdW1lbnRzL2lDbG91ZH5tZH5vYnNpZGlhbi9Eb2N1bWVudHMvTXkgbm90ZXMiCmxldCB3ZWJzaXRlX2RpciA9ICIvVXNlcnMvZGFuaWVsY2hhcG1hbi9naXRodWIvZHNjaGFwbWFuL2RzY2hhcG1hbi1jb20iCgpsZXQgdG9kYXkgPSBEYXRlKCkKbGV0IG91dHB1dCA9IFtdCmxldCBpbnB1dCA9IGF3YWl0IGFyZygiUHVibGlzaDoiLCBbeyBuYW1lOiAiV2Vic2l0ZSBDb250ZW50IiwgZGVzY3JpcHRpb246ICJQdWJsaXNoIGFueSBjaGFuZ2VzIHRvIHBvZW1zLCBhcnRpY2xlcyBvciBibG9nIHBvc3RzIiwgInZhbHVlIjogIldlYnNpdGUgQ29udGVudCIgfSwgeyBuYW1lOiAiV2Vic2l0ZSBOb3RlcyIsIGRlc2NyaXB0aW9uOiAiUHVibGlzaCBhbnkgY2hhbmdlcyB0byBwdWJsaWMgbm90ZXMiLCB2YWx1ZTogIldlYnNpdGUgTm90ZXMiICB9LCB7bmFtZTogIkFsbCBDb250ZW50IiwgZGVzY3JpcHRpb246IlB1Ymxpc2ggaXQgYWxsIiwgdmFsdWU6ICJBbGwgQ29udGVudCJ9XSkKLy8gLUMgYWxsb3dzIGdpdCB0byBiZSBydW4gZnJvbSBhbnkgZGlyZWN0b3J5CnN3aXRjaCAoaW5wdXQpIHsKICAgIGNhc2UgIldlYnNpdGUgQ29udGVudCI6CiAgICAgICAgb3V0cHV0LnB1c2goYXdhaXQgZXhlYyhgZ2l0IC1DICIke3dlYnNpdGVfY29udGVudH0iIGFkZCAtQWApKQogICAgICAgIG91dHB1dC5wdXNoKGF3YWl0IGV4ZWMoYGdpdCAtQyAiJHt3ZWJzaXRlX2NvbnRlbnR9IiBjb21taXQgLW0gIlB1Ymxpc2ggY29udGVudDogJHt0b2RheS50b1N0cmluZygpfSJgKSkKICAgICAgICBvdXRwdXQucHVzaChhd2FpdCBleGVjKGBnaXQgLUMgIiR7d2Vic2l0ZV9jb250ZW50fSIgcHVzaGApKQogICAgICAgIG91dHB1dC5wdXNoKGF3YWl0IGV4ZWMoYGdpdCAtQyAiJHt3ZWJzaXRlX2Rpcn0iIHN1Ym1vZHVsZSB1cGRhdGUgLS1yZW1vdGVgKSkKICAgICAgICBvdXRwdXQucHVzaChhd2FpdCBleGVjKGBnaXQgLUMgIiR7d2Vic2l0ZV9kaXJ9IiBhZGQgZHNjaGFwbWFuLWNvbS1jb250ZW50YCkpCiAgICAgICBvdXRwdXQucHVzaChhd2FpdCBleGVjKGBnaXQgLUMgIiR7d2Vic2l0ZV9kaXJ9IiBjb21taXQgLW0gIlB1Ymxpc2ggY29udGVudDogJHt0b2RheS50b1N0cmluZygpfSJgKSkKICAgICAgICBvdXRwdXQucHVzaChhd2FpdCBleGVjKGBnaXQgLUMgIiR7d2Vic2l0ZV9kaXJ9IiBwdXNoYCkpCiAgICAgICAgYnJlYWs7CiAgICBjYXNlICJXZWJzaXRlIE5vdGVzIjoKICAgICAgICBvdXRwdXQucHVzaChhd2FpdCBleGVjKGBnaXQgLUMgIiR7d2Vic2l0ZV9ub3Rlc30iIGFkZCAtQWApKQogICAgICAgIG91dHB1dC5wdXNoKGF3YWl0IGV4ZWMoYGdpdCAtQyAiJHt3ZWJzaXRlX25vdGVzfSIgY29tbWl0IC1tICJQdWJsaXNoIGNvbnRlbnQ6ICR7dG9kYXkudG9TdHJpbmcoKX0iYCkpCiAgICAgICAgb3V0cHV0LnB1c2goYXdhaXQgZXhlYyhgZ2l0IC1DICIke3dlYnNpdGVfbm90ZXN9IiBwdXNoYCkpCiAgICAgICAgb3V0cHV0LnB1c2goYXdhaXQgZXhlYyhgZ2l0IC1DICIke3dlYnNpdGVfZGlyfSIgc3VibW9kdWxlIHVwZGF0ZSAtLXJlbW90ZWApKQogICAgICAgIG91dHB1dC5wdXNoKGF3YWl0IGV4ZWMoYGdpdCAtQyAiJHt3ZWJzaXRlX2Rpcn0iIGFkZCBNeS1ub3Rlc2ApKQogICAgICAgIG91dHB1dC5wdXNoKGF3YWl0IGV4ZWMoYGdpdCAtQyAiJHt3ZWJzaXRlX2Rpcn0iIGNvbW1pdCAtbSAiUHVibGlzaCBub3RlczogJHt0b2RheS50b1N0cmluZygpfSJgKSkKICAgICAgICBvdXRwdXQucHVzaChhd2FpdCBleGVjKGBnaXQgLUMgIiR7d2Vic2l0ZV9kaXJ9IiBwdXNoYCkpCiAgICAgICAgYnJlYWs7CiAgICBjYXNlICJBbGwiOgogICAgICAgIG91dHB1dC5wdXNoKGF3YWl0IGV4ZWMoYGdpdCAtQyAiJHt3ZWJzaXRlX2NvbnRlbnR9IiBhZGQgLUFgKSkKICAgICAgICBvdXRwdXQucHVzaChhd2FpdCBleGVjKGBnaXQgLUMgIiR7d2Vic2l0ZV9jb250ZW50fSIgY29tbWl0IC1tICJQdWJsaXNoIGNvbnRlbnQ6ICR7dG9kYXkudG9TdHJpbmcoKX0iYCkpCiAgICAgICAgb3V0cHV0LnB1c2goYXdhaXQgZXhlYyhgZ2l0IC1DICIke3dlYnNpdGVfY29udGVudH0iIHB1c2hgKSkKICAgICAgICBvdXRwdXQucHVzaChhd2FpdCBleGVjKGBnaXQgLUMgIiR7d2Vic2l0ZV9ub3Rlc30iIGFkZCAtQWApKQogICAgICAgIG91dHB1dC5wdXNoKGF3YWl0IGV4ZWMoYGdpdCAtQyAiJHt3ZWJzaXRlX25vdGVzfSIgY29tbWl0IC1tICJQdWJsaXNoIGNvbnRlbnQ6ICR7dG9kYXkudG9TdHJpbmcoKX0iYCkpCiAgICAgICAgb3V0cHV0LnB1c2goYXdhaXQgZXhlYyhgZ2l0IC1DICIke3dlYnNpdGVfbm90ZXN9IiBwdXNoYCkpCiAgICAgICAgb3V0cHV0LnB1c2goYXdhaXQgZXhlYyhgZ2l0IC1DICIke3dlYnNpdGVfZGlyfSIgc3VibW9kdWxlIHVwZGF0ZSAtLXJlbW90ZWApKQogICAgICAgIG91dHB1dC5wdXNoKGF3YWl0IGV4ZWMoYGdpdCAtQyAiJHt3ZWJzaXRlX2Rpcn0iIGFkZCBNeS1ub3RlcyBkc2NoYXBtYW4tY29tLWNvbnRlbnRgKSkKICAgICAgICBvdXRwdXQucHVzaChhd2FpdCBleGVjKGBnaXQgLUMgIiR7d2Vic2l0ZV9kaXJ9IiBjb21taXQgLW0gIlB1Ymxpc2ggYWxsIGNvbnRlbnQ6ICR7dG9kYXkudG9TdHJpbmcoKX0iYCkpCiAgICAgICAgb3V0cHV0LnB1c2goYXdhaXQgZXhlYyhgZ2l0IC1DICIke3dlYnNpdGVfZGlyfSIgcHVzaGApKQogICAgICAgIGJyZWFrOwogICAgZGVmYXVsdDoKICAgICAgICBicmVhazsKfQoKb3V0cHV0LmZvckVhY2goaXRlbSA9PiB7CiAgICBjb25zb2xlLmxvZyhpdGVtLnN0ZG91dCkKfSkKCg\"\n  }, \"this link\"))));\n}\n;\nMDXContent.isMDXComponent = true;"}},{"node":{"frontmatter":{"title":"Using Dendron and Gatsby Together 🌲","slug":"/articles/using-dendron-and-gatsby-together","excerpt":"How I integrated my Dendron repository and my Gatsby.js website.","tags":["dendron","notes","website","gatsby"]},"body":"var _excluded = [\"components\"];\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }\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; }\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/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n  \"slug\": \"/articles/using-dendron-and-gatsby-together\",\n  \"date\": \"2021-03-06\",\n  \"title\": \"Using Dendron and Gatsby Together 🌲\",\n  \"excerpt\": \"How I integrated my Dendron repository and my Gatsby.js website.\",\n  \"tags\": [\"dendron\", \"notes\", \"website\", \"gatsby\"],\n  \"published\": true\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};\nvar Marginnote = makeShortcode(\"Marginnote\");\nvar Figure = makeShortcode(\"Figure\");\nvar Footnote = makeShortcode(\"Footnote\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h2\", {\n    \"id\": \"introduction\"\n  }, \"Introduction\"), mdx(\"p\", null, \"I love learning new tools and integrating them into my day to day life. \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://dendron.so\"\n  }, \"Dendron\"), \" is the latest in a long line of tools that I\\u2019ve used to keep track of the notes I use to remember things, jot down ideas, or think in a less polished way. Like several other tools I\\u2019ve used it\\u2019s local-first and based in markdown. What makes Dendron special to me is that currently it is the only digital tool I use for notes.\"), mdx(\"p\", null, \"Since discovering the \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://github.com/brettkromkamp/awesome-knowledge-management\"\n  }, \"personal knowledge management space\"), \", and really diving into the space over the past year, I have used several different tools\", mdx(Marginnote, {\n    count: 1,\n    mdxType: \"Marginnote\"\n  }, \"Bear, Notion, Roam, Org-Roam, Logseq, and Obsidian have all played a role in my stack at some point.\"), \" but have always functionally divided \\u2014 using one tool for \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"/notes\"\n  }, \"my public notes\"), \" that I host here on this website, and one tool where I wrote my private notes. What made this even more difficult is that often notes would begin their life in my private notes and then would need to be copied over to my public notes \\u2014 an extra layer of friction that at first was no big deal but has become more and more tedious over time.\"), mdx(\"p\", null, \"Dendron solves this problem and it does so, \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://dendron.so/notes/9c6f600e-f1f3-423b-963a-c71bb081334c.html\"\n  }, \"more or less out of the box\"), \", leveraging 11ty to create a really good looking static site that can be published wherever you want and with the ability to fine tune what notes are published\", mdx(Marginnote, {\n    count: 2,\n    mdxType: \"Marginnote\"\n  }, \"Here are a couple examples of what this native solution does: \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://garden.ianjones.us/\"\n  }, \"garden.ianjones.us\"), \" & \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://kevincunningham.co.uk/garden\"\n  }, \"kevincunningham.co.uk/garden\")), \". But I\\u2019ve spent a lot of time customizing my website and I didn\\u2019t want to lose the ability to have my notes fully integrated into my website.\"), mdx(\"p\", null, \"If you\\u2019re interested in learning more about Dendron, check out \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://dendron.so/notes/e86ac3ab-dbe1-47a1-bcd7-9df0d0490b40.html\"\n  }, \"their quickstart guide\"), \". The rest of this post is a short overview of how I integrated my Dendron notes with my Gatsby.js frontend.\"), mdx(\"h2\", {\n    \"id\": \"the-setup\"\n  }, \"The Setup\"), mdx(\"p\", null, \"Dendron has several things which lend it to very easily integrate with Gatsby.js \\u2014 the first and most important is that it stores all notes in Markdown with YAML frontmatter \\u2014 exactly what Gatsby uses. Another thing that Dendron does that I really like, is it uses a static 32 digit long id so that even if the title or organizing structure changes, Dendron still knows how to find the note in question. I\\u2019ll used that id as the slug of my note (\", mdx(\"code\", {\n    parentName: \"p\",\n    \"className\": \"language-text\"\n  }, \"/note/<id>\"), \").\"), mdx(Figure, {\n    src: \"/dendron-frontmatter.png\",\n    caption: \"An example of Dendron Frontmatter\",\n    mdxType: \"Figure\"\n  }), mdx(\"p\", null, \"To add my Dendron folder to my website I first created a private github repository with my Dendron notes, then I added a private git submodule\", mdx(Footnote, {\n    count: 1,\n    mdxType: \"Footnote\"\n  }, \"Tania Rascia has \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://www.taniarascia.com/git-submodules-private-content/\"\n  }, \"an excellent guide\"), \" on how to set this up.\"), \" to import the contents of that repository into my website.\"), mdx(\"p\", null, \"To get gatsby-plugin-mdx to recognize those markdown files I added this to my existing graphql query in my \", mdx(\"code\", {\n    parentName: \"p\",\n    \"className\": \"language-text\"\n  }, \"gatsby-node.js\"), \" file. Using the \", mdx(\"code\", {\n    parentName: \"p\",\n    \"className\": \"language-text\"\n  }, \"fileAbsolutePath\"), \" to filter only notes in my Dendron folder.\"), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"graphql\"\n  }, mdx(\"pre\", {\n    parentName: \"div\",\n    \"className\": \"language-graphql\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-graphql\"\n  }, mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token attr-name\"\n  }, \"dendron\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \":\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token property-query\"\n  }, \"allMdx\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), \"\\n        \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token attr-name\"\n  }, \"filter\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \":\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n          \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token attr-name\"\n  }, \"fileAbsolutePath\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \":\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token attr-name\"\n  }, \"regex\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \":\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"\\\"/Dendron/\\\"\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), \"\\n          \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token attr-name\"\n  }, \"frontmatter\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \":\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token attr-name\"\n  }, \"published\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \":\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token attr-name\"\n  }, \"eq\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \":\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token boolean\"\n  }, \"true\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), \"\\n        \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), \"\\n      \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n        \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token object\"\n  }, \"edges\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n          \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token object\"\n  }, \"node\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n            \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token object\"\n  }, \"frontmatter\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n              \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token property\"\n  }, \"id\"), \"\\n              \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token property\"\n  }, \"title\"), \"\\n            \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), \"\\n            \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token property\"\n  }, \"id\"), \"\\n          \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), \"\\n          \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token object\"\n  }, \"previous\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n            \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token property\"\n  }, \"id\"), \"\\n          \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), \"\\n          \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token object\"\n  }, \"next\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n            \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token property\"\n  }, \"id\"), \"\\n          \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), \"\\n        \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), \"\\n      \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\")))), mdx(\"p\", null, \"Then I\\u2019ll pass the results of that query to the create pages call in that same file:\"), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"js\"\n  }, mdx(\"pre\", {\n    parentName: \"div\",\n    \"className\": \"language-js\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"const\"), \" dendron \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" result\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), \"data\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), \"dendron\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), \"edges\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\\ndendron\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"forEach\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token parameter\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \" node \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"}\")), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=>\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"createPage\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n    \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token literal-property property\"\n  }, \"path\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \":\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token template-string\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token template-punctuation string\"\n  }, \"`\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token string\"\n  }, \"notes/\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token interpolation\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token interpolation-punctuation punctuation\"\n  }, \"${\"), \"node\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \".\"), \"frontmatter\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \".\"), \"id\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token interpolation-punctuation punctuation\"\n  }, \"}\")), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token template-punctuation string\"\n  }, \"`\")), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \"\\n    \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token literal-property property\"\n  }, \"component\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \":\"), \" path\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"resolve\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token template-string\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token template-punctuation string\"\n  }, \"`\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token string\"\n  }, \"./src/components/notes/note.js\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token template-punctuation string\"\n  }, \"`\")), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \"\\n    \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token literal-property property\"\n  }, \"context\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \":\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token literal-property property\"\n  }, \"id\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \":\"), \" node\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), \"id \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\")))), mdx(\"p\", null, \"And then finally I\\u2019ll create the note.js file I used as a component up above:\"), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"js\"\n  }, mdx(\"pre\", {\n    parentName: \"div\",\n    \"className\": \"language-js\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"import\"), \" React \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"from\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"\\\"react\\\"\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"import\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \" MDXRenderer \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"from\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"\\\"gatsby-plugin-mdx\\\"\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"import\"), \" Layout \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"from\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"\\\"../layout/layout\\\"\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"export\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"default\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token parameter\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \" data \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"}\")), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=>\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"return\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), \"\\n    \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"<\"), \"Layout\\n      title\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"data\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), \"mdx\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), \"frontmatter\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), \"title\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), \"\\n      description\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"data\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), \"mdx\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), \"frontmatter\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), \"excerpt\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), \"\\n      type\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"\\\"Note \\uD83D\\uDCDD\\\"\"), \"\\n    \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \">\"), \"\\n      \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"<\"), \"MDXRenderer\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \">\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"data\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), \"mdx\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), \"body\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"<\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"/\"), \"MDXRenderer\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \">\"), \"\\n    \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"<\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"/\"), \"Layout\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \">\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"export\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"const\"), \" pageQuery \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" graphql\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token template-string\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token template-punctuation string\"\n  }, \"`\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token string\"\n  }, \"\\n  query NoteQuery($id: String) {\\n    mdx(id: { eq: $id }) {\\n      body\\n      excerpt\\n      frontmatter {\\n        title\\n        id\\n      }\\n    }\\n  }\\n\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token template-punctuation string\"\n  }, \"`\")), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\")))), mdx(\"p\", null, \"And just like that all of my Dendron notes are created on my website.\"), mdx(\"h2\", {\n    \"id\": \"ok-so-its-not-as-simple-as-that\"\n  }, \"Ok so it\\u2019s not as simple as that\\u2026\"), mdx(\"p\", null, \"One potential problem with using Dendron\\u2019s Markdown is that it uses wiki-links which Gatsby doesn\\u2019t support natively. Luckily there\\u2019s a plugin which suports wikilinks - \", mdx(\"code\", {\n    parentName: \"p\",\n    \"className\": \"language-text\"\n  }, \"gatsby-remark-doublebrackets-link\"), \". I\\u2019ll install that \", mdx(\"code\", {\n    parentName: \"p\",\n    \"className\": \"language-text\"\n  }, \"yarn add gatsby-remark-double-brackets-link\"), \" and add it to my Gatsby config.\"), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"json\"\n  }, mdx(\"pre\", {\n    parentName: \"div\",\n    \"className\": \"language-json\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-json\"\n  }, mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token property\"\n  }, \"\\\"resolve\\\"\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \":\"), \" `gatsby-plugin-mdx`\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token property\"\n  }, \"\\\"options\\\"\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \":\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n    \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token property\"\n  }, \"\\\"gatsbyRemarkPlugins\\\"\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \":\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"[\"), \"\\n      \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n        \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token property\"\n  }, \"\\\"resolve\\\"\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \":\"), \" `gatsby-remark-double-brackets-link`\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \"\\n        \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token property\"\n  }, \"\\\"options\\\"\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \":\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n          \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token property\"\n  }, \"\\\"titleToURLPath\\\"\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \":\"), \" `$\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"__dirname\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), \"/src/lib/dendron-parse-url.js`\\n        \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), \"\\n      \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), \"\\n    \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"]\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\")))), mdx(\"p\", null, \"This transforms \", mdx(\"code\", {\n    parentName: \"p\",\n    \"className\": \"language-text\"\n  }, \"[[Link to page]]\"), \" to \", mdx(\"code\", {\n    parentName: \"p\",\n    \"className\": \"language-text\"\n  }, \"[Link to page](titleToURL('Link to page'))\"), \" and I can use a custom \", mdx(\"code\", {\n    parentName: \"p\",\n    \"className\": \"language-text\"\n  }, \"titleToURLPath\"), \" function to remove the dendron alias syntax (which uses the \", mdx(\"code\", {\n    parentName: \"p\",\n    \"className\": \"language-text\"\n  }, \"|\"), \" character to separate the alias from the wikilink). But I\\u2019m using the id defined in the frontmatter of the note and not the wikilink as the slug. How can I transform my wikilinks to \", mdx(\"code\", {\n    parentName: \"p\",\n    \"className\": \"language-text\"\n  }, \"[Link to page]('id from frontmatter of target link')\"), \"?\"), mdx(\"p\", null, \"I solved this problem by running a Static Query in my Layout component. This query fetches all of the relevant frontmatter from all of my dendron notes as well as the filename. I stored the relevant data (id, title, slug) in an array of objects with a key value of the filename.\"), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"js\"\n  }, mdx(\"pre\", {\n    parentName: \"div\",\n    \"className\": \"language-js\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"const\"), \" popups \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"const\"), \" posts \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" data\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), \"allMdx\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), \"nodes\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\nposts\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"map\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token parameter\"\n  }, \"post\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=>\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"if\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), \"post\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n    popups\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"[\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token template-string\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token template-punctuation string\"\n  }, \"`\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token interpolation\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token interpolation-punctuation punctuation\"\n  }, \"${\"), \"post\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \".\"), \"slug\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token function\"\n  }, \"substring\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), \"post\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \".\"), \"slug\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token function\"\n  }, \"lastIndexOf\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token string\"\n  }, \"\\\"/\\\"\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \")\"), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token operator\"\n  }, \"+\"), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token number\"\n  }, \"1\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token interpolation-punctuation punctuation\"\n  }, \"}\")), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token template-punctuation string\"\n  }, \"`\")), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"]\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n      \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token literal-property property\"\n  }, \"title\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \":\"), \" post\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), \"frontmatter\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), \"title\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \"\\n      \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token literal-property property\"\n  }, \"body\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \":\"), \" post\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), \"body\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \"\\n      \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token literal-property property\"\n  }, \"slug\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \":\"), \" post\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), \"frontmatter\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), \"slug\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \"\\n      \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token literal-property property\"\n  }, \"dendronId\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \":\"), \" post\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), \"frontmatter\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), \"id\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \"\\n      \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token literal-property property\"\n  }, \"published\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \":\"), \" post\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), \"frontmatter\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), \"published\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \"\\n    \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\")))), mdx(\"p\", null, \"I passed this array of note metadata to a custom mdx component using the custom components prop.\", mdx(Marginnote, {\n    count: 3,\n    mdxType: \"Marginnote\"\n  }, \"I use this same technique to also pass in the body of my articles, poems, and notes to enable link previews.\"), \" I then use custom regex to determine whether the markdown link is an internal link, an external link, or an internal notes link. If it\\u2019s an internal notes link I use the current href (which at this stage is still a wikilink) as the key in the array I passed in to see if there\\u2019s any Dendron notes that matches that href. If there is, I change how that markdown link is rendered and change the link to point from \", mdx(\"code\", {\n    parentName: \"p\",\n    \"className\": \"language-text\"\n  }, \"/notes/dendron.url\"), \" to \", mdx(\"code\", {\n    parentName: \"p\",\n    \"className\": \"language-text\"\n  }, \"/notes/<dendron-id>\"), \".\"), mdx(\"p\", null, \"My raw code for that operation is at the bottom of this article. You\\u2019ll see that I have to do some string manipulation to get it to work. I also include logic throughout to only allow access to notes that include \", mdx(\"code\", {\n    parentName: \"p\",\n    \"className\": \"language-text\"\n  }, \"published: true\"), \" in the frontmatter. Any links to unpublished notes get redirected to a custom 404 page indicating that that note has note yet been published.\"), mdx(\"p\", null, \"If you are considering using Dendron with your Gatsby site I hope that this has proved useful.\"), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"js\"\n  }, mdx(\"pre\", {\n    parentName: \"div\",\n    \"className\": \"language-js\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"const\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function-variable function\"\n  }, \"AnchorTag\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token parameter\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \" href\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \" popups\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token operator\"\n  }, \"...\"), \"restProps \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"}\")), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=>\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"const\"), \" isInternalNotesLink \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"!\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"isEmpty\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), \"href\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"match\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token constant\"\n  }, \"INTERNAL_LINK_REGEX\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"const\"), \" isInternalLink \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"!\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"isEmpty\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), \"href\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"match\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token constant\"\n  }, \"INTERNAL_NON_NOTES_LINK_REGEX\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"let\"), \" renderedLink \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" restProps\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), \"children\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"if\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"isString\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), \"restProps\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), \"children\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n    renderedLink \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" restProps\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), \"children\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"replace\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token regex\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token regex-delimiter\"\n  }, \"/\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token regex-source language-regex\"\n  }, \"\\\\[\\\\[(.*?)\\\\]\\\\]\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token regex-delimiter\"\n  }, \"/\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token regex-flags\"\n  }, \"g\")), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"'$1'\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"if\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), \"isInternalNotesLink\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n    \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"if\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), \"renderedLink\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"includes\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"'|'\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n      renderedLink \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" renderedLink\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"substring\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token number\"\n  }, \"0\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \" renderedLink\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"lastIndexOf\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"'|'\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), \"\\n    \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), \"\\n    \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"if\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"isEmpty\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), \"popups\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"[\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token template-string\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token template-punctuation string\"\n  }, \"`\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token interpolation\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token interpolation-punctuation punctuation\"\n  }, \"${\"), \"href\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token function\"\n  }, \"substring\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), \"href\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token function\"\n  }, \"lastIndexOf\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token string\"\n  }, \"'/'\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \")\"), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token operator\"\n  }, \"+\"), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token number\"\n  }, \"1\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token interpolation-punctuation punctuation\"\n  }, \"}\")), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token template-punctuation string\"\n  }, \"`\")), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"]\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n      \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"return\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), \"\\n        \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"<\"), \"InternalNotesLink\\n          to\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token template-string\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token template-punctuation string\"\n  }, \"`\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token string\"\n  }, \"/notes/\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token interpolation\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token interpolation-punctuation punctuation\"\n  }, \"${\"), \"href\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token function\"\n  }, \"substring\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), \"href\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token function\"\n  }, \"lastIndexOf\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token string\"\n  }, \"'/'\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \")\"), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token operator\"\n  }, \"+\"), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token number\"\n  }, \"1\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token interpolation-punctuation punctuation\"\n  }, \"}\")), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token template-punctuation string\"\n  }, \"`\")), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \">\"), \"\\n          \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"renderedLink\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), \"\\n        \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"<\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"/\"), \"InternalNotesLink\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \">\"), \"\\n      \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), \"\\n    \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"else\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n      \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token comment\"\n  }, \"//check if the note is published, if it's not go to a specific 404 page\"), \"\\n      \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"if\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), \"\\n        popups\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"[\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token template-string\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token template-punctuation string\"\n  }, \"`\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token interpolation\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token interpolation-punctuation punctuation\"\n  }, \"${\"), \"href\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token function\"\n  }, \"substring\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), \"href\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token function\"\n  }, \"lastIndexOf\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token string\"\n  }, \"'/'\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \")\"), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token operator\"\n  }, \"+\"), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token number\"\n  }, \"1\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token interpolation-punctuation punctuation\"\n  }, \"}\")), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token template-punctuation string\"\n  }, \"`\")), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"]\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), \"published \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"!=\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token boolean\"\n  }, \"true\"), \"\\n      \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n        \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"return\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), \"\\n          \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"<\"), \"InternalNotesLink to\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"\\\"/notes/404\\\"\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \">\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"renderedLink\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"<\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"/\"), \"InternalNotesLink\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \">\"), \"\\n        \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), \"\\n      \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"else\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n        \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"return\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), \"\\n          \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"<\"), \"LinktipPreview\\n            link\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token boolean\"\n  }, \"true\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), \"\\n            tiptext\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n              \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"<\"), \"MDXProvider components\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"components\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \">\"), \"\\n                \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"<\"), \"h1\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \">\"), \"\\n                  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"popups\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"[\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token template-string\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token template-punctuation string\"\n  }, \"`\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token interpolation\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token interpolation-punctuation punctuation\"\n  }, \"${\"), \"href\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token function\"\n  }, \"substring\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), \"href\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token function\"\n  }, \"lastIndexOf\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token string\"\n  }, \"'/'\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \")\"), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token operator\"\n  }, \"+\"), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token number\"\n  }, \"1\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token interpolation-punctuation punctuation\"\n  }, \"}\")), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token template-punctuation string\"\n  }, \"`\")), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"]\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), \"title\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), \"\\n                \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"<\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"/\"), \"h1\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \">\"), \"\\n                \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"<\"), \"MDXRenderer\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \">\"), \"\\n                  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"popups\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"[\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token template-string\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token template-punctuation string\"\n  }, \"`\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token interpolation\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token interpolation-punctuation punctuation\"\n  }, \"${\"), \"href\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token function\"\n  }, \"substring\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), \"href\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token function\"\n  }, \"lastIndexOf\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token string\"\n  }, \"'/'\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \")\"), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token operator\"\n  }, \"+\"), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token number\"\n  }, \"1\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token interpolation-punctuation punctuation\"\n  }, \"}\")), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token template-punctuation string\"\n  }, \"`\")), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"]\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), \"body\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), \"\\n                \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"<\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"/\"), \"MDXRenderer\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \">\"), \"\\n              \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"<\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"/\"), \"MDXProvider\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \">\"), \"\\n            \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), \"\\n            placement\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"\\\"right\\\"\"), \"\\n            multiple\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token boolean\"\n  }, \"false\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \">\"), \"\\n            \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"<\"), \"InternalNotesLink\\n              to\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token template-string\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token template-punctuation string\"\n  }, \"`\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token string\"\n  }, \"/notes/\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token interpolation\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token interpolation-punctuation punctuation\"\n  }, \"${\"), \"\\n                popups\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"[\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token template-string\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token template-punctuation string\"\n  }, \"`\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token interpolation\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token interpolation-punctuation punctuation\"\n  }, \"${\"), \"href\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token function\"\n  }, \"substring\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), \"href\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token function\"\n  }, \"lastIndexOf\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token string\"\n  }, \"'/'\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \")\"), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token operator\"\n  }, \"+\"), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token number\"\n  }, \"1\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token interpolation-punctuation punctuation\"\n  }, \"}\")), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token template-punctuation string\"\n  }, \"`\")), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"]\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \".\"), \"dendronId\\n              \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token interpolation-punctuation punctuation\"\n  }, \"}\")), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token template-punctuation string\"\n  }, \"`\")), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \">\"), \"\\n              \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"renderedLink\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), \"\\n            \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"<\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"/\"), \"InternalNotesLink\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \">\"), \"\\n          \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"<\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"/\"), \"LinktipPreview\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \">\"), \"\\n        \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), \"\\n      \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), \"\\n    \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\")))), mdx(\"p\", null, mdx(\"em\", {\n    parentName: \"p\"\n  }, \"Author\\u2019s Note: I now use \", mdx(\"a\", {\n    parentName: \"em\",\n    \"href\": \"obsidian.md\"\n  }, \"Obsidian\"), \" exclusively to keep my notes, mainly due to its amazing mobile app; however I still use this same method to publish my notes and rely on Obsidian templates to generate the uuid to allow for publication.\")));\n}\n;\nMDXContent.isMDXComponent = true;"}},{"node":{"frontmatter":{"title":"How I used Twitter as a CMS","slug":"/articles/how-i-used-twitter-as-a-cms","excerpt":"How I built a website that uses the Twitter API to fetch data from tweets I liked to create a grid of colors.","tags":["playful-learning","svelte","website","TwitJS","Twitter"]},"body":"var _excluded = [\"components\"];\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }\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; }\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/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n  \"title\": \"How I used Twitter as a CMS\",\n  \"date\": \"2020-09-17\",\n  \"slug\": \"/articles/how-i-used-twitter-as-a-cms\",\n  \"tags\": [\"playful-learning\", \"svelte\", \"website\", \"TwitJS\", \"Twitter\"],\n  \"excerpt\": \"How I built a website that uses the Twitter API to fetch data from tweets I liked to create a grid of colors.\",\n  \"published\": true,\n  \"featured\": false\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};\nvar Figure = makeShortcode(\"Figure\");\nvar Marginnote = makeShortcode(\"Marginnote\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, \"I built \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://colors.danielchapman.dev\"\n  }, \"colors.danielchapman.dev\"), \" \\u2014 a single page website composed of a grid of colors. It isn\\u2019t anything too fancy, just some divs composed inside of a flex box, and a couple Svelte animations. The fun part, came in how I got the list of colors I generated, they weren\\u2019t randomly generated, or selected from a list of colors. No, I got them by liking tweets on Twitter. That\\u2019s right, Twitter is my Content Management System (CMS).\"), mdx(Figure, {\n    src: \"/how-colorsdanielchapmandev-gets-its-content.png\",\n    alt: \"How I use Twitter as a CMS\",\n    mdxType: \"Figure\"\n  }), mdx(\"p\", null, \"The content of my website is derived from actions I take on my twitter acount. Technically I do this by liking tweets from the bot \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://twitter.com/everycolorbot\"\n  }, \"@everycolorbot\"), \".\"), mdx(\"p\", null, mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://twitter.com/everycolorbot/status/1306601668314902529\"\n  }, \"https://twitter.com/everycolorbot/status/1306601668314902529\")), mdx(\"p\", null, \"Then using the javascript twitter API client \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://github.com/ttezel/twit\"\n  }, \"twit\"), \" to fetch the last 200 tweets I liked. \", mdx(Marginnote, {\n    count: 1,\n    mdxType: \"Marginnote\"\n  }, \"The 200 tweet limit is a limit imposed by the Twitter API when fetching a list of likes \", mdx(\"a\", {\n    href: \"https://developer.twitter.com/en/docs/twitter-api/v1/tweets/post-and-engage/api-reference/get-favorites-list\"\n  }, \"\\uD83D\\uDCDCDocumentation\"))), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"js\"\n  }, mdx(\"pre\", {\n    parentName: \"div\",\n    \"className\": \"language-js\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"function\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"getColors\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"let\"), \" colors \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"new\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token class-name\"\n  }, \"Array\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n  bot\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"get\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), \"\\n    \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"\\\"favorites/list\\\"\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \"\\n    \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token literal-property property\"\n  }, \"screen_name\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \":\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"\\\"ds_chapman\\\"\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token literal-property property\"\n  }, \"count\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \":\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token number\"\n  }, \"200\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \"\\n    \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"function\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token parameter\"\n  }, \"err\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \" data\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \" response\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n      \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"if\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), \"err\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n        console\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"log\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), \"err\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n      \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"else\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n        data\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"forEach\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"function\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token parameter\"\n  }, \"tweet\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n          \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"if\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), \"tweet\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), \"user\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), \"screen_name \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"===\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"\\\"everycolorbot\\\"\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n            \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"const\"), \" color \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n            color\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), \"text \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token template-string\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token template-punctuation string\"\n  }, \"`\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token string\"\n  }, \"#\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token interpolation\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token interpolation-punctuation punctuation\"\n  }, \"${\"), \"tweet\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \".\"), \"text\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token function\"\n  }, \"slice\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token number\"\n  }, \"2\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token number\"\n  }, \"8\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token interpolation-punctuation punctuation\"\n  }, \"}\")), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token template-punctuation string\"\n  }, \"`\")), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n            color\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), \"url \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token template-string\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token template-punctuation string\"\n  }, \"`\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token string\"\n  }, \"https://twitter.com/i/web/status/\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token interpolation\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token interpolation-punctuation punctuation\"\n  }, \"${\"), \"tweet\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \".\"), \"id_str\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token interpolation-punctuation punctuation\"\n  }, \"}\")), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token template-punctuation string\"\n  }, \"`\")), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n            colors\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"push\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), \"color\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n          \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), \"\\n        \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n        fs\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"writeFile\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"\\\"colors.json\\\"\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token constant\"\n  }, \"JSON\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"stringify\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), \"colors\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token parameter\"\n  }, \"err\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=>\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n          \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"if\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), \"err\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"throw\"), \" err\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n          console\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"log\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"\\\"Colors written to color.json\\\"\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n        \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n      \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), \"\\n    \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\")))), mdx(\"p\", null, \"If that tweet came from @everycolorbot, it saves the color and a link to that tweet to a JSON.\"), mdx(\"p\", null, \"Then it\\u2019s just a matter of importing that JSON to a webpage. I chose to use Svelte for a number of reasons. First and foremost because I was able use the \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://svelte.dev/repl/hello-world?version=3.25.1\"\n  }, \"Svelte REPL\"), \" and some sample data to get my prototype up and running in the browser. This made the development process simple from a setup perspective \\u2014 after I had the prototype in a good state I just had to download the code and add it to my project.\"), mdx(\"p\", null, \"The second reason I chose Svelte was how easy it is to add Svelte animations. I talk about that more in my article \\u201D\", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"/articles/create-a-svelte-site\"\n  }, \"Create a Basic Svelte Site\"), \"\\u201D, but for this site I also used the \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://github.com/d3/d3-random\"\n  }, \"d3-random\"), \" package to randomly stagger when colors fade onto the screen.\"), mdx(\"p\", null, \"Now what\\u2019s the benefit of using Twitter as a CMS? I\\u2019m not sure there is one. On the other hand, there are many fun use cases \\u2014 a next.js site where each post corresponds to a thread; a gatsby site built from an export of your timeline where the main page is a list of all your tweets, but every tweet also lives on its own page; a collection of Dad Jokes sourced from \", mdx(\"code\", {\n    parentName: \"p\",\n    \"className\": \"language-text\"\n  }, \"#DadJokes\"), \". I\\u2019m sure the possibilities are endless because the variety of content stored on Twitter is endless.\"), mdx(\"h2\", {\n    \"id\": \"what-i-learned\"\n  }, \"What I Learned\"), mdx(\"p\", null, \"While I learned many things from this exercise, the point was not to learn a specific platform, or even to learn to think of everything as a CMS. Just because everything can be a CMS doesn\\u2019t mean it should. No the main reason I used Twitter as a CMS was because it was fun, and at the end of the day building things can be fun.\"), mdx(\"p\", null, \"If you want to build something fun I suggest doing something unexpected \\u2014 like using Twitter as the source of your content. If you do, please send it to me (\", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://twitter.com/ds_chapman\"\n  }, \"@ds_chapman\"), \" on Twitter). I\\u2019d love to see what you built!\"));\n}\n;\nMDXContent.isMDXComponent = true;"}},{"node":{"frontmatter":{"title":"Create a Basic Svelte Site","slug":"/articles/create-a-svelte-site","excerpt":"A short guide to creating a simple Svelte site with animations and transitions.","tags":["svelte","website","animation"]},"body":"var _excluded = [\"components\"];\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }\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; }\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/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n  \"title\": \"Create a Basic Svelte Site\",\n  \"slug\": \"/articles/create-a-svelte-site\",\n  \"date\": \"2020-08-24\",\n  \"excerpt\": \"A short guide to creating a simple Svelte site with animations and transitions.\",\n  \"tags\": [\"svelte\", \"website\", \"animation\"],\n  \"published\": true,\n  \"featured\": true\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};\nvar Marginnote = makeShortcode(\"Marginnote\");\nvar Tooltip = makeShortcode(\"Tooltip\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, \"I recently used SvelteJS to create \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://danielchapman.dev\"\n  }, \"a portfolio of websites I\\u2019ve built\"), \". \", mdx(Marginnote, {\n    count: 1,\n    mdxType: \"Marginnote\"\n  }, \"Right now there\\u2019s only two websites listed, but I\\u2019m sure it will expand over time.\"), \" The process of writing the website was fun \\u2014 figuring out the syntax of Svelte, using the lovely transition and animation libraries, and playing with event handlers. Here\\u2019s a quick guide for how you can get started with Svelte.\"), mdx(\"h2\", {\n    \"id\": \"what-is-svelte\"\n  }, \"What is Svelte?\"), mdx(\"p\", null, \"Svelte is a tool for building fast web applications. It\\u2019s a bit similar to other frontend frameworks like React and Vue. Like React, Svelte constructs components, but unlike React which does its work in the browser at run time, Svelte compiles your app into optimized Javascript code.\"), mdx(\"p\", null, \"I found that writing Svelte code is fun \\u2014 it\\u2019s more like writing vanilla HTML or CSS than writing React \\u2014 and animations and transitions have first class support.\"), mdx(\"h2\", {\n    \"id\": \"creating-a-project-with-svelte-3\"\n  }, \"Creating a Project with Svelte 3\"), mdx(\"p\", null, \"There is a template that you can use as a starting point to create your Svelte project. In your terminal run:\"), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"bash\"\n  }, mdx(\"pre\", {\n    parentName: \"div\",\n    \"className\": \"language-bash\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-bash\"\n  }, \"npx degit sveltejs/template my-svelte-project\"))), mdx(\"p\", null, \"This will use npx to run \", mdx(Tooltip, {\n    tiptext: \"Degit is a tool that makes copies of git repositories. If you run `degit some-user/some-repo` it will find the latest commit on https://github.com/some-user/some-repo and download the associated tar file. This is faster than git clone because you're not downloading the entire git history.\",\n    mdxType: \"Tooltip\"\n  }, \"degit\"), \" to create your svelte project.\"), mdx(\"p\", null, \"Next go into the directory and run npm install.\"), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"bash\"\n  }, mdx(\"pre\", {\n    parentName: \"div\",\n    \"className\": \"language-bash\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-bash\"\n  }, mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token builtin class-name\"\n  }, \"cd\"), \" my-svelte-project \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"&&\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"npm\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"install\")))), mdx(\"p\", null, \"Now that all the packages are installed you can start up the development server using \", mdx(\"code\", {\n    parentName: \"p\",\n    \"className\": \"language-text\"\n  }, \"npm run dev\"), \" and see your website at \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"http://localhost:5000\"\n  }, \"http://localhost:5000\"), \". Your Svelte component is stored in the file \", mdx(\"code\", {\n    parentName: \"p\",\n    \"className\": \"language-text\"\n  }, \"src/App.svelte\"), \", although you can easily create additional components and import them into \", mdx(\"code\", {\n    parentName: \"p\",\n    \"className\": \"language-text\"\n  }, \"App.svelte\"), \".\"), mdx(\"h2\", {\n    \"id\": \"basic-svelte-structure\"\n  }, \"Basic Svelte Structure\"), mdx(\"p\", null, \"A svelte file typically has a \", mdx(\"code\", {\n    parentName: \"p\",\n    \"className\": \"language-text\"\n  }, \"script\"), \" tag, a \", mdx(\"code\", {\n    parentName: \"p\",\n    \"className\": \"language-text\"\n  }, \"style\"), \" tag, and the svelte component. The \", mdx(\"code\", {\n    parentName: \"p\",\n    \"className\": \"language-text\"\n  }, \"script\"), \" tags are where the brains of your Svelte component go \\u2014 variable and function declarations. The \", mdx(\"code\", {\n    parentName: \"p\",\n    \"className\": \"language-text\"\n  }, \"style\"), \" tag is contains the CSS to style your component. And finally there\\u2019s the svelte component, which for the most part you compose like you would with HTML or JSX, but there are some exceptions.\"), mdx(\"p\", null, \"The most obvious exception are the if block, each block, and await block which are written in-line in the svelte component.\"), mdx(\"h3\", {\n    \"id\": \"if-block\"\n  }, \"If block\"), mdx(\"p\", null, \"The if block displays certain components conditionally.\"), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"html\"\n  }, mdx(\"pre\", {\n    parentName: \"div\",\n    \"className\": \"language-html\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"{#if expression}\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"<\"), \"div\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), \"This div is displayed conditionally.\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"</\"), \"div\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), \"\\n{:else}\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"<\"), \"div\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), \"Or this will be displayed\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"</\"), \"div\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), \"\\n{/if}\"))), mdx(\"h3\", {\n    \"id\": \"each-block\"\n  }, \"Each block\"), mdx(\"p\", null, \"The each block cycles through an array and displays code a certain way.\"), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"html\"\n  }, mdx(\"pre\", {\n    parentName: \"div\",\n    \"className\": \"language-html\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"<\"), \"ul\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), \"\\n  {#each items as item}\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"<\"), \"li\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), \"{item.name}\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"</\"), \"li\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), \"\\n  {/each}\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"</\"), \"ul\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\"))))), mdx(\"h3\", {\n    \"id\": \"await-block\"\n  }, \"Await block\"), mdx(\"p\", null, \"The await block waits for asynchronous code to return and then displays content.\"), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"html\"\n  }, mdx(\"pre\", {\n    parentName: \"div\",\n    \"className\": \"language-html\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"{#await promise}\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"<\"), \"p\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), \"Waiting for the promise\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"</\"), \"p\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), \"\\n{:then value}\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"<\"), \"p\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), \"The value is {value}\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"</\"), \"p\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), \"\\n{/await}\"))), mdx(\"h2\", {\n    \"id\": \"svelte-transitions--animations\"\n  }, \"Svelte Transitions & Animations\"), mdx(\"p\", null, \"The real star of my experience with Svelte has been the transitions and animations.\"), mdx(\"img\", {\n    \"src\": \"/ef69b3498ca5a0ca6e2e61d6293a0f92/svelte-animations.gif\",\n    \"alt\": \"Svelte Animations from danielchapman.dev\",\n    \"style\": {\n      \"width\": \"100%\"\n    }\n  }), mdx(\"p\", null, \"Transitions have first class support in Svelte, you just import the transition from svelte and attach it to the element you want to transition. For my website I created a \", mdx(\"code\", {\n    parentName: \"p\",\n    \"className\": \"language-text\"\n  }, \"Bio\"), \" component so that if my name is clicked a short introduction will drop down. Implementing this in Svelte was straightforward. Here\\u2019s my \", mdx(\"code\", {\n    parentName: \"p\",\n    \"className\": \"language-text\"\n  }, \"Bio\"), \" component with the styles removed:\"), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"jsx\"\n  }, mdx(\"pre\", {\n    parentName: \"div\",\n    \"className\": \"language-jsx\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"<\"), \"script\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token plain-text\"\n  }, \"\\n  import { slide } from \\\"svelte/transition\\\";\\n  let visible = false;\\n  let symbol = \\\"\\u25BD\\\";\\n  export let intro;\\n\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"</\"), \"script\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), \"\\n\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"<\"), \"style\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token plain-text\"\n  }, \"\\n  ...\\n\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"</\"), \"style\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), \"\\n\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"<\"), \"div\"), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-name\"\n  }, \"class\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-value\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation attr-equals\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\"), \"bio\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\")), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token plain-text\"\n  }, \"\\n  \"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"<\"), \"span\"), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-name\"\n  }, \"class\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-value\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation attr-equals\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\"), \"name\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\")), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-name\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token namespace\"\n  }, \"on:\"), \"click\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token script language-javascript\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token script-punctuation punctuation\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \")\"), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token operator\"\n  }, \"=>\"), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), \"visible \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token operator\"\n  }, \"!\"), \"visible\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"}\")), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token plain-text\"\n  }, \"\\n    \"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"<\"), \"h1\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token plain-text\"\n  }, \"Daniel Chapman\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"</\"), \"h1\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token plain-text\"\n  }, \"\\n\\n    \"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"<\"), \"span\"), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-name\"\n  }, \"class\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-value\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation attr-equals\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\"), \"symbol\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\")), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"visible \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"?\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"'x'\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \":\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"'\\u25BD'\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"</\"), \"span\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token plain-text\"\n  }, \"\\n  \"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"</\"), \"span\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token plain-text\"\n  }, \"\\n  \"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"#\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"if\"), \" visible\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token plain-text\"\n  }, \"\\n    \"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"<\"), \"div\"), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-name\"\n  }, \"class\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-value\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation attr-equals\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\"), \"about\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\")), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-name\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token namespace\"\n  }, \"transition:\"), \"slide\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token plain-text\"\n  }, \"\\n      \"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"<\"), \"h2\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token plain-text\"\n  }, \"About Me\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"</\"), \"h2\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token plain-text\"\n  }, \"\\n      \"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"<\"), \"div\"), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-name\"\n  }, \"class\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-value\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation attr-equals\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\"), \"intro\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\")), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"intro\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"</\"), \"div\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token plain-text\"\n  }, \"\\n    \"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"</\"), \"div\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token plain-text\"\n  }, \"\\n  \"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"/\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"if\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token plain-text\"\n  }, \"\\n\\n\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"</\"), \"div\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\"))))), mdx(\"p\", null, \"You\\u2019ll see a few things here. First the \", mdx(\"code\", {\n    parentName: \"p\",\n    \"className\": \"language-text\"\n  }, \"on:click\"), \" handler which toggles the \", mdx(\"code\", {\n    parentName: \"p\",\n    \"className\": \"language-text\"\n  }, \"visible\"), \" variable. You\\u2019ll also see that there\\u2019s an if block whose contents will only display if \", mdx(\"code\", {\n    parentName: \"p\",\n    \"className\": \"language-text\"\n  }, \"visible\"), \" is true. And finally in the \", mdx(\"code\", {\n    parentName: \"p\",\n    \"className\": \"language-text\"\n  }, \"div\"), \" with the \\u201Cabout\\u201D class you\\u2019ll see the \", mdx(\"code\", {\n    parentName: \"p\",\n    \"className\": \"language-text\"\n  }, \"transition:slide\"), \" attribute; this tells Svelte how to transition the element when it gets attached to or removed from the DOM \\u2014 in other words whenever my name is clicked.\"), mdx(\"p\", null, \"This is where the magic of Svelte started shining through for me. All I hd to do to add a fancy slide transition was to add the \", mdx(\"code\", {\n    parentName: \"p\",\n    \"className\": \"language-text\"\n  }, \"transition:slide\"), \" attribute to a component.\"), mdx(\"p\", null, \"Animations are a little trickier. I wanted a hover effect on the website cards I created so I created \", mdx(\"code\", {\n    parentName: \"p\",\n    \"className\": \"language-text\"\n  }, \"on:mouseenter\"), \" and \", mdx(\"code\", {\n    parentName: \"p\",\n    \"className\": \"language-text\"\n  }, \"on:mouseleave\"), \" handlers that use Svelte\\u2019s \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://svelte.dev/docs#svelte_motion\"\n  }, mdx(\"code\", {\n    parentName: \"a\",\n    \"className\": \"language-text\"\n  }, \"tweened\")), \" function from \", mdx(\"code\", {\n    parentName: \"p\",\n    \"className\": \"language-text\"\n  }, \"svelte/motion\"), \". \", mdx(\"code\", {\n    parentName: \"p\",\n    \"className\": \"language-text\"\n  }, \"tweened\"), \" is a function that starts at an initial value, then when you call \", mdx(\"code\", {\n    parentName: \"p\",\n    \"className\": \"language-text\"\n  }, \"set(newvalue)\"), \", it gradually moves from its initial value to the new value taking into consideration a \", mdx(\"code\", {\n    parentName: \"p\",\n    \"className\": \"language-text\"\n  }, \"duration\"), \" in milliseconds and an \", mdx(\"code\", {\n    parentName: \"p\",\n    \"className\": \"language-text\"\n  }, \"easing\"), \" function that effects how the value is incremented. I used this in combination with a style attribute to gradually animate CSS \", mdx(\"code\", {\n    parentName: \"p\",\n    \"className\": \"language-text\"\n  }, \"box-shadow\"), \" when the mouse hovers over a website card.\"), mdx(\"p\", null, \"The relevant code for the animation is below.\"), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"js\"\n  }, mdx(\"pre\", {\n    parentName: \"div\",\n    \"className\": \"language-js\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"<\"), \"script\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \">\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"export\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"let\"), \" technologies \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"[\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"]\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"export\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"let\"), \" code \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"\\\"\\\"\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"export\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"let\"), \" title \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"\\\"There was no Title\\\"\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"export\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"let\"), \" description \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"\\\"There was no Description\\\"\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"export\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"let\"), \" link\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"export\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"let\"), \" image \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"\\\"\\\"\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"let\"), \" hovered \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token boolean\"\n  }, \"false\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"import\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \" onMount \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"from\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"\\\"svelte\\\"\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"import\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \" fade\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \" slide \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"from\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"\\\"svelte/transition\\\"\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"import\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \" tweened \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"from\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"\\\"svelte/motion\\\"\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"import\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \" cubicOut \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"from\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token string\"\n  }, \"\\\"svelte/easing\\\"\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"const\"), \" shadow \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"tweened\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token number\"\n  }, \"0\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token literal-property property\"\n  }, \"duration\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \":\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token number\"\n  }, \"500\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \",\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token literal-property property\"\n  }, \"easing\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \":\"), \" cubicOut \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"function\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"handleClick\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n    window\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), \"location \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" link\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), \"\\n\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"function\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"handleMouseEnter\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n    shadow\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"set\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token number\"\n  }, \"1\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n    hovered \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token boolean\"\n  }, \"true\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), \"\\n\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"function\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"handleMouseLeave\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"\\n    shadow\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \".\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"set\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token number\"\n  }, \"0\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n    hovered \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token boolean\"\n  }, \"false\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), \"\\n\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"let\"), \" mounted \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token boolean\"\n  }, \"false\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token function\"\n  }, \"onMount\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=>\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"(\"), \"mounted \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"=\"), \" \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token boolean\"\n  }, \"true\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \")\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \";\"), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"<\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"/\"), \"script\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \">\")))), mdx(\"p\", null, \"At the top of the code block I define a tweened function called \", mdx(\"code\", {\n    parentName: \"p\",\n    \"className\": \"language-text\"\n  }, \"shadow\"), \" which will gets set to 1 in \", mdx(\"code\", {\n    parentName: \"p\",\n    \"className\": \"language-text\"\n  }, \"handleMouseEnter()\"), \" and 0 in \", mdx(\"code\", {\n    parentName: \"p\",\n    \"className\": \"language-text\"\n  }, \"handleMouseLeave()\"), mdx(Marginnote, {\n    mdxType: \"Marginnote\"\n  }, \"You\\u2019ll also see the values \", mdx(\"code\", {\n    parentName: \"p\",\n    \"className\": \"language-text\"\n  }, \"on:touchstart\"), \" and \", mdx(\"code\", {\n    parentName: \"p\",\n    \"className\": \"language-text\"\n  }, \"on:touchend\"), \", I discovered that these handle finger presses, so I set them to the equivalent mouse handler.\"), \". It does this over the period of 1/2 a second and uses a cubic easing function (\", mdx(\"code\", {\n    parentName: \"p\",\n    \"className\": \"language-text\"\n  }, \"cubicOut\"), \") Now let\\u2019s continue to look at the Svelte component below:\"), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"jsx\"\n  }, mdx(\"pre\", {\n    parentName: \"div\",\n    \"className\": \"language-jsx\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"#\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"if\"), \" mounted\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), \"\\n  \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"<\"), \"div\"), \"\\n    \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-name\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token namespace\"\n  }, \"on:\"), \"click\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token script language-javascript\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token script-punctuation punctuation\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"handleClick\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"}\")), \"\\n    \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-name\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token namespace\"\n  }, \"on:\"), \"mouseenter\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token script language-javascript\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token script-punctuation punctuation\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"handleMouseEnter\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"}\")), \"\\n    \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-name\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token namespace\"\n  }, \"on:\"), \"touchstart\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token script language-javascript\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token script-punctuation punctuation\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"handleMouseEnter\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"}\")), \"\\n    \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-name\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token namespace\"\n  }, \"on:\"), \"mouseleave\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token script language-javascript\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token script-punctuation punctuation\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"handleMouseLeave\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"}\")), \"\\n    \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-name\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token namespace\"\n  }, \"on:\"), \"touchend\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token script language-javascript\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token script-punctuation punctuation\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"handleMouseLeave\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"}\")), \"\\n    \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-name\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token namespace\"\n  }, \"transition:\"), \"slide\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token script language-javascript\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token script-punctuation punctuation\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token literal-property property\"\n  }, \"delay\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token operator\"\n  }, \":\"), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token number\"\n  }, \"200\"), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"}\")), \"\\n    \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token special-attr\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-name\"\n  }, \"style\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-value\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation attr-equals\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token value css language-css\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token selector\"\n  }, \"box-shadow:\"), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"$shadow * 30\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token selector\"\n  }, \"px\"), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"$shadow * 15\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token selector\"\n  }, \"px #925c77,\"), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"$shadow * 45\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token selector\"\n  }, \"px\"), \"\\n    \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"$shadow * 21\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token selector\"\n  }, \"px #75B9BE,\"), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"$shadow * 60\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token selector\"\n  }, \"px\"), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"$shadow * 30\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), \"px #7297A6\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \";\")), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\"))), \"\\n    \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-name\"\n  }, \"class\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-value\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation attr-equals\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\"), \"site\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\")), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token plain-text\"\n  }, \"\\n    \"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"<\"), \"h2\"), \"\\n      \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-name\"\n  }, \"class\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-value\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation attr-equals\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\"), \"title\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\")), \"\\n      \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-name\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token namespace\"\n  }, \"transition:\"), \"fade\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token script language-javascript\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token script-punctuation punctuation\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token literal-property property\"\n  }, \"delay\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token operator\"\n  }, \":\"), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token number\"\n  }, \"250\"), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"}\")), \"\\n      \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token special-attr\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-name\"\n  }, \"style\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-value\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation attr-equals\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token value css language-css\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token selector\"\n  }, \"text-decoration:\"), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"hovered ? \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token string\"\n  }, \"'underline'\"), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \":\"), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token string\"\n  }, \"'none'\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \";\")), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\"))), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token plain-text\"\n  }, \"\\n      \"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"<\"), \"a\"), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-name\"\n  }, \"href\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token script language-javascript\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token script-punctuation punctuation\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"link\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"}\")), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"title\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"</\"), \"a\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token plain-text\"\n  }, \"\\n    \"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"</\"), \"h2\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token plain-text\"\n  }, \"\\n    \"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"<\"), \"img\"), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-name\"\n  }, \"src\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token script language-javascript\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token script-punctuation punctuation\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"image\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"}\")), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-name\"\n  }, \"alt\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-value\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation attr-equals\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\"), \"A screenshot of {title}\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\")), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"/>\")), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token plain-text\"\n  }, \"\\n    \"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"<\"), \"div\"), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-name\"\n  }, \"class\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-value\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation attr-equals\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\"), \"description\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\")), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-name\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token namespace\"\n  }, \"transition:\"), \"fade\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token script language-javascript\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token script-punctuation punctuation\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token literal-property property\"\n  }, \"delay\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token operator\"\n  }, \":\"), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token number\"\n  }, \"500\"), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"}\")), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token plain-text\"\n  }, \"\\n      \"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"description\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token plain-text\"\n  }, \"\\n    \"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"</\"), \"div\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token plain-text\"\n  }, \"\\n    \"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"<\"), \"div\"), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-name\"\n  }, \"class\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-value\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation attr-equals\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\"), \"code\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"\\\"\")), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token plain-text\"\n  }, \"\\n      \"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"<\"), \"ul\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token plain-text\"\n  }, \"\\n        \"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"#each technologies \", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"as\"), \" technology\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token plain-text\"\n  }, \"\\n          \"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"<\"), \"li\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"technology\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"</\"), \"li\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token plain-text\"\n  }, \"\\n        \"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"/\"), \"each\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token plain-text\"\n  }, \"\\n      \"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"</\"), \"ul\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token plain-text\"\n  }, \"\\n      \"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"<\"), \"a\"), \" \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token attr-name\"\n  }, \"href\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token script language-javascript\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token script-punctuation punctuation\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), \"code\", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"}\")), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token plain-text\"\n  }, \"Source Code\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"</\"), \"a\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token plain-text\"\n  }, \"\\n    \"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"</\"), \"div\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token plain-text\"\n  }, \"\\n  \"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token tag\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \"</\"), \"div\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"token punctuation\"\n  }, \">\")), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"{\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token operator\"\n  }, \"/\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token keyword\"\n  }, \"if\"), mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"token punctuation\"\n  }, \"}\"), \"\\n\"))), mdx(\"p\", null, \"In the top-level div you\\u2019ll see there is a style tag. Animating the CSS in Svelte was a simple matter of using the style tag, and because Svelte allows JS within the curly brackets multiplying the \", mdx(\"code\", {\n    parentName: \"p\",\n    \"className\": \"language-text\"\n  }, \"shadow\"), \" variable (which moves from 0 to 1 when the mouse is hovered, and from 1 to 0 when the mouse is removed.) by different values to create the triple-layered shadow effect that you can see on the site.\"), mdx(\"h2\", {\n    \"id\": \"conclusion\"\n  }, \"Conclusion\"), mdx(\"p\", null, \"All in all it took less than a weekend from the moment I started learning Svelte watching \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://egghead.io/playlists/getting-started-with-svelte-3-05a8541a\"\n  }, \"this 26 minute Egghead collection\"), \" to when I finished the rough draft of \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://danielchapman.dev\"\n  }, \"my Svelte website\"), \". It might not have taken long, but it was long enough to show me that Svelte is a unique, fun language with powerful functionality.\"), mdx(\"p\", null, \"The code for \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://github.com/dschapman/danielchapman-dev\"\n  }, \"my website is open source\"), \" and you are welcome to browse it, copy it, and tinker with it.\"));\n}\n;\nMDXContent.isMDXComponent = true;"}},{"node":{"frontmatter":{"title":"Hypertext Writing","slug":"/articles/hypertext-writing","excerpt":"Every medium has its strengths. There are considerable strengths inherent to a digital, web-based, way of thinking -- first and foremost is the sheer amount of interactivity and connections you can make.","tags":["writing","hypertext-thinking","xanadu","ted-nelson","website","digital thinking"]},"body":"var _excluded = [\"components\"];\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }\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; }\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/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n  \"title\": \"Hypertext Writing\",\n  \"date\": \"2020-06-16\",\n  \"slug\": \"/articles/hypertext-writing\",\n  \"tags\": [\"writing\", \"hypertext-thinking\", \"xanadu\", \"ted-nelson\", \"website\", \"digital thinking\"],\n  \"excerpt\": \"Every medium has its strengths. There are considerable strengths inherent to a digital, web-based, way of thinking -- first and foremost is the sheer amount of interactivity and connections you can make.\",\n  \"published\": true,\n  \"featured\": true\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};\nvar Tooltip = makeShortcode(\"Tooltip\");\nvar Footnote = makeShortcode(\"Footnote\");\nvar Marginnote = makeShortcode(\"Marginnote\");\nvar Figure = makeShortcode(\"Figure\");\nvar Callout = makeShortcode(\"Callout\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, \"Every medium has its strengths. There are considerable strengths inherent to a digital, web-based, way of thinking \\u2014 first and foremost is the sheer amount of interactivity and connections you can make.\"), mdx(\"p\", null, \"Now some of these strengths are not inherent to the web. As \", mdx(Tooltip, {\n    tiptext: \"An early pioneer of the internet and the inventor of the term 'hyperlink'\",\n    mdxType: \"Tooltip\"\n  }, \"Ted Nelson\"), \" points out in his video \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"/notes/9ed1a781-7fa9-4137-8344-95119ffbb08d\"\n  }, \"Visible Connection\"), \" the written word has used its ability to provide context visually through side by side content, marginalia, paragraph summaries and more ever since the \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://en.wikipedia.org/wiki/Rosetta_Stone\"\n  }, \"Rosetta Stone\"), \".\", mdx(Footnote, {\n    count: 1,\n    mdxType: \"Footnote\"\n  }, \"Don\\u2019t forget about the footnote/endnote.\")), mdx(\"p\", null, \"But the web allows writers to do crazy things like use \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://maggieappleton.com/bidirectionals\"\n  }, \"bidirectional links\"), \", or have additional content appear when hovering over text, or reference the text of entire books like \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"http://www.gutenberg.org/cache/epub/10/pg10.txt\"\n  }, \"The King James Bible\"), \" or \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://ocw.mit.edu/ans7870/6/6.006/s08/lecturenotes/files/t8.shakespeare.txt\"\n  }, \"The Complete Works of William Shakespeare\"), \" with short little hyper links.\"), mdx(\"p\", null, \"Our capabilities seem endless and new innovations and tools with new capabilities appear every week.\", mdx(Marginnote, {\n    count: 2,\n    mdxType: \"Marginnote\"\n  }, \"Check out \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://www.notion.so/Artificial-Brain-Networked-notebook-app-a131b468fc6f43218fb8105430304709\"\n  }, \"this growing list of tools\"), \" for networked thinking.\"), \"The key with any medium is knowing what its strengths are and knowing when something might be cool, but not useful. The law of unintended consequences still applies to the internet.\"), mdx(\"h2\", {\n    \"id\": \"links-distract-your-reader\"\n  }, \"Links distract your reader\"), mdx(\"p\", null, \"What are the side effects of links? A flood of information can end up distracting readers. \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://notes.andymatuschak.org/z2HUE4ABbQjUNjrNemvkTCsLa1LPDRuwh1tXC\"\n  }, \"Dense links are helpful for your notes\"), \", but are they helpful to the person trying to follow a logical train of thought in a carefully constructed article?\"), mdx(\"p\", null, \"Links interrupt the flow of a reader\\u2019s thought \\u2014 that is their inherent strength and weakness. In all writing it\\u2019s important to know when a new concept is introduced,\", mdx(Footnote, {\n    count: 2,\n    mdxType: \"Footnote\"\n  }, \"Every new concept threatens to lose a reader who doesn\\u2019t understand or offers them an opportunity to learn. Good writing weaves around potential new concepts, but it also knows its audience and doesn\\u2019t explain every little thing.\"), \" and links provide a convenient way to introduce new concepts \\u2014 linking directly to the sources that helped the writer understand a concept. However, every time a link is offered, a reader is offered a door down a rabbit hole from which they might never emerge.\"), mdx(\"p\", null, \"Ted Nelson and other internet thinkers have leaned heavily on links \\u2014 \", mdx(Tooltip, {\n    tiptext: \"Project Xanadu: The culmination of Ted Nelson's vision for what the World Wide Web should have been - featuring bidirectional links, transclusion, and more.\",\n    mdxType: \"Tooltip\"\n  }, \"Project Xanadu\"), \"\\u2019s promise of visual connection to every source referenced in a text sounds great in theory, but the reality is an interconnected web of colored lines that is difficult to interpret. It is cool technology, but does it actually help the reader?\", mdx(Marginnote, {\n    count: 3,\n    mdxType: \"Marginnote\"\n  }, \"Of course this will vary from reader to reader. Project Xanadu, indeed the very concept of hypertext was created by Ted Nelson to help channel his Attention Deficit Disorder. See \", mdx(\"a\", {\n    href: \"https://www.wired.com/1995/06/xanadu/\"\n  }, \"\\u201CThe Curse of Xanadu\\u201D\"), \", Wired\")), mdx(Figure, {\n    caption: \"Screenshot from XanaduSpace - a 3D implementation of project Xanadu, with visual links connecting an essay with the source texts it references.\",\n    src: \"/9a-XUSP.png\",\n    alt: \"Screenshot from XanaduSpace - a 3D implementation of project Xanadu.\",\n    mdxType: \"Figure\"\n  }), mdx(\"h2\", {\n    \"id\": \"links-dilute-meaning\"\n  }, \"Links dilute meaning\"), mdx(\"p\", null, \"The other danger is that the sheer amount of links will dilute what is communicated. On a practical level, sometimes it is easier to pay attention to the meaning of a text if it is all one color. Furthermore, one of the most valuable things I learned from my English degree was that it is sometimes better to assert my opinion without without any hedging or hiding what I actually think \\u2014 and at least for me, references or links are a way of hiding behind someone else\\u2019s thoughts.\"), mdx(Callout, {\n    mdxType: \"Callout\"\n  }, \"If you don't state your opinion, what sets your writing apart?\"), mdx(\"p\", null, \"Of course there has to be a balance \\u2014 and in an age where anyone can have a platform to say anything, it is important to know what you know, but also what other people might know better.\"), mdx(\"h2\", {\n    \"id\": \"writing-in-hypertext-is-valuable\"\n  }, \"Writing in hypertext is valuable\"), mdx(\"p\", null, \"Of course throughout this essay I\\u2019ve been using links as I write, because while I do believe that links could be a distraction and that they can dilute meaning, I also firmly believe that it is not my job to decide what you the reader can handle and somehow trick you into reading every word I\\u2019ve written. I write knowing that you might have followed my link to the 1995 Wired Article on Ted Nelson that was buried in a footnote up above, and you might not come back after opening that link\\u2026that\\u2019s just fine.\", mdx(Marginnote, {\n    count: 4,\n    mdxType: \"Marginnote\"\n  }, \"I lost an hour when I first discovered that article, and I still want to go back and \", mdx(\"a\", {\n    href: \"https://www.wired.com/1995/06/xanadu/\"\n  }, \"finish reading it\"), \".\")), mdx(\"p\", null, \"As a writer the internet medium has strengths that I haven\\u2019t fully utilized before. I believe this digital format allows all of us \\u2014 writers and readers \\u2014 to make connections in new ways and explore ideas robustly. Certainly it is important to know the power of putting a link in place and limitting the number of links\", mdx(Marginnote, {\n    count: 5,\n    mdxType: \"Marginnote\"\n  }, \"For an example of an essay that does this well, checkout \", mdx(\"a\", {\n    href: \"http://www.eastgate.com/garden/\"\n  }, \"Hypertext Gardens: Delightful Vistas\")), \" to what could be reasonably explored \\u2014 but if each link represents an idea worth exploring, then \", mdx(Tooltip, {\n    tiptext: \"If I believe that truth exists, which I do, than exploration is not something to be scared of, it's something to encourage. The truth can always bear exploration.\",\n    mdxType: \"Tooltip\"\n  }, \"who am I to prevent exploration\"), \".\"), mdx(\"p\", null, \"As I wrote this post I explored \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"/notes/688962f2-77e8-44b4-992c-37a3cc6ce513\"\n  }, \"different notes\"), \" I\\u2019ve written about these subjects as well as other resources, and that process helped me make new connections and improved both my understanding and this article. It comes at the cost of distraction, but that cost was there in the old medium too \\u2014 anyone who has lost hours in a library as a child knows that it has always been possible to fall down a rabbit hole and discover the worlds that are buried underneath.\"), mdx(\"h2\", {\n    \"id\": \"further-reading\"\n  }, \"Further Reading\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://maggieappleton.com/bidirectionals\"\n  }, \"Maggie Appleton\\u2019s Short History of Bidirectional Links\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Ted Nelson\\u2019s Video Series on Project Xanadu, beginning with \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"/notes/9ed1a781-7fa9-4137-8344-95119ffbb08d\"\n  }, \"Visible Connection\"))));\n}\n;\nMDXContent.isMDXComponent = true;"}},{"node":{"frontmatter":{"title":"How I Coded This Website","slug":"/articles/how-i-coded-this-website","excerpt":"A little bit about how I coded this website with GatsbyJS.","tags":["gatsby","resource-list","website"]},"body":"var _excluded = [\"components\"];\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }\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; }\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/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n  \"slug\": \"/articles/how-i-coded-this-website\",\n  \"date\": \"2020-02-07\",\n  \"excerpt\": \"A little bit about how I coded this website with GatsbyJS.\",\n  \"title\": \"How I Coded This Website\",\n  \"tags\": [\"gatsby\", \"resource-list\", \"website\"],\n  \"published\": true\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};\nvar Marginnote = makeShortcode(\"Marginnote\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, \"Fun Fact: I coded this website myself. The source code for everything you see lives on my computer\", mdx(Marginnote, {\n    count: 1,\n    mdxType: \"Marginnote\"\n  }, mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://github.com/dschapman/PersonalBlog\"\n  }, \"You can also browse it on Github\")), \".\"), mdx(\"p\", null, \"There are many reasons I enjoy coding \\u2014 problem solving, creativity, learning new technologies and new systems. I also love coding because its a bit like magic. Lines of code are the incantation, symbols have to be arranged just so or else the magic fizzles.\"), mdx(\"p\", null, \"The problem is that a website is not an easy spell, at least for this dabbler in the art. There are multiple files that work together to accomplish different things. Some of the files define what my \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"/about\"\n  }, \"about page\"), \" looks like, while others work to convert ordinary text files\", mdx(Marginnote, {\n    count: 2,\n    mdxType: \"Marginnote\"\n  }, \"My website content is kept in \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://en.wikipedia.org/wiki/Markdown\"\n  }, \"markdown\"), \" files.\"), \" into web pages like the one you\\u2019re reading now. There are multiple languages at work - in my case Javascript (React), HTML, CSS, and GraphQL.\"), mdx(\"p\", null, \"Luckily, I don\\u2019t have to reinvent the wheel (or the spell book). Other mages have travelled this way before and left their notes and tools behind which I have used as I\\u2019ve coded my site. The largest tool has been \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://www.gatsbyjs.org\"\n  }, \"Gatsby\"), \".\"), mdx(\"h2\", {\n    \"id\": \"what-is-gatsby\"\n  }, \"What is Gatsby?\"), mdx(\"p\", null, \"Gatsby is a static site generator which means that static files are generated when I build my site and then these light-weight pages are served to your browser whenever you visit my website.\"), mdx(\"p\", null, \"What this means practically is that I can design and code my website using Javascript. I can tell Javascript what I want it to do with my content programmatically. Then instead of recreating that for each page of my website, I can just tell it to take content (like \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://github.com/dschapman/my-website/blob/master/content/posts/how-i-coded-this-website.md\"\n  }, \"the markdown file\"), \" containing this article) and turn it into a page on my website complete with the appropriate tags, links to similar content, dynamic share image, and updates to my \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"/\"\n  }, \"front page\"), \" \\u2014 all by adding a single file to a folder.\"), mdx(\"p\", null, \"For me this means that its super easy to write something on my website. I just create a markdown file, write my piece, and then push that file to \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://github.com/dschapman/PersonalBlog\"\n  }, \"my repository on Github\"), \". I can also easily add on to an article I previously wrote \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"like this one\"), \".\"), mdx(\"h2\", {\n    \"id\": \"resources-for-building-your-own-website\"\n  }, \"Resources for Building Your Own Website\"), mdx(\"p\", null, \"I have always enjoyed computers and had a high level understanding of programming before I built my website. But if you don\\u2019t have much of a technical background, these are some of the resources I\\u2019d recommend to get started learning how to code your website:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML\"\n  }, \"MDN web docs \\u2014 Introduction to HTML\"), \": HTML is the backbone of any website and I consult the Mozilla web docs whenever I have a question about HTML or CSS\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://developer.mozilla.org/en-US/docs/Learn/CSS\"\n  }, \"MDN web docs \\u2014 Learn to style HTML using CSS\"), \": CSS is how you make HTML look pretty. The Mozilla Web docs are great.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://developer.mozilla.org/en-US/docs/Learn/JavaScript\"\n  }, \"MDN web docs - Javascript\"), \": I actually didn\\u2019t use MDN to learn Javascript, but including it here for completeness. As long as you\\u2019re familiar with high level programming concepts and willing to learn as you go you can try skipping to the next item on the list.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://egghead.io/courses/build-a-blog-with-react-and-markdown-using-gatsby\"\n  }, \"Build a Blog with React and Markdown \\u2014 Egghead.io\"), \": Egghead.io is a great source for video learning content on web technologies. They are aimed at tech professionals so there\\u2019s some assumed knowledge, but I found this video series easy to follow and by the end you will have a blog of your own built on Gatsby.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.gatsbyjs.org/tutorial/\"\n  }, \"Gatsby.js Tutorials \"), \": Once you\\u2019ve followed the egghead video (or maybe simultaneously) you can also check out the Gatsby documentation.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.gatsbyjs.org/plugins/\"\n  }, \"Gatsby.js Plugin Library\"), \": Once your site is up and running, try adding plugins to add more features. If it doesn\\u2019t work figure out why or try something else.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.gatsbyjs.com/plugins/gatsby-theme-blog/\"\n  }, \"Gatsby Theme Blog\"), \": Gatsby Themes are a great way to get a Gatsby site going without too much coding. If you just want a blog, this one is a great place to start.\")), mdx(\"h3\", {\n    \"id\": \"more-advanced-resources\"\n  }, \"More Advanced Resources\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://egghead.io/playlists/building-an-opengraph-image-generation-api-with-cloudinary-netlify-functions-and-react-914e\"\n  }, \"Building an OpenGraph Image Generation API\"), \": I used this video collection on egghead.io (along with copying code from \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://twitter.com/_jonesian\"\n  }, \"Ian Jones\"), \") to create a system that automatically generates the images that appear when you share my website via twitter or services like imessage. \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://github.com/dschapman/egghead-opengraph-images\"\n  }, \"You can see my implementation of this on Github\"), \".\")));\n}\n;\nMDXContent.isMDXComponent = true;"}}]}},"pageContext":{"tag":"website"}},
    "staticQueryHashes": ["2350352151","2718831839","2976055195","3489984023","4096535113","426988268","733517873"]}