{"version":3,"sources":["pages/notFound/NotFound.tsx","pages/blog/posts/FirstPost.tsx","pages/blog/posts/FunctionalComponentRefactor.tsx","pages/blog/posts/CorneLayout.tsx","pages/blog/posts.tsx","components/navbar/Navbar.tsx","pages/blog/Blog.tsx","pages/contact/Contact.tsx","App.tsx","reportWebVitals.js","index.js"],"names":["NotFound","className","FirstPost","href","functionalComponentRefactor","CorneLayout","src","alt","Posts","Array","index","element","pageTitle","navTitle","blogNavLink","tags","NotFoundPost","filter","post","findIndex","tag","Navbar","useState","blogMenuOpen","setBlogMenuOpen","blogMenuRef","useRef","history","useHistory","navigateTo","key","push","AppBar","position","elevation","Toolbar","Button","variant","color","disableElevation","onClick","Typography","aria-controls","aria-haspopup","ref","Menu","id","anchorEl","current","keepMounted","open","onClose","map","MenuItem","reverse","Blog","props","currentPost","setCurrentPost","changePage","dir","nextPost","find","useEffect","title","length","document","reduce","acc","curr","i","Contact","App","exact","path","to","render","match","params","reportWebVitals","onPerfEntry","Function","then","getCLS","getFID","getFCP","getLCP","getTTFB","ReactDOM","StrictMode","getElementById"],"mappings":"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","file":"static/js/main.d55e2ce2.chunk.js","sourcesContent":["export default function NotFound() {\r\n    return (\r\n        <div>\r\n            <h1 className=\"title\">Page not found</h1>\r\n        </div>\r\n    );\r\n}","export default function FirstPost() {\r\n    return (\r\n        <div>\r\n            <h1 className=\"title\">Welcome!</h1>\r\n            <div className=\"content\">\r\n                <p>Hey all, welcome! This here is my first post (mostly for testing). I'm planning to use this as a platform for recording things like</p>\r\n                <ul>\r\n                    <li>Development struggles and (hopefully) successes</li>\r\n                    <li>Keyboard builds, build guides, ideas, and more!</li>\r\n                    <li>Who knows, maybe some DnD stuff?</li>\r\n                    <li>&c</li>\r\n                </ul>\r\n                <p>But mostly I just want to maintain my thoughts on the platform while getting to work this site into something bigger. I would like this to be a place where I \r\n                    can store most of my work and ideas.\r\n                </p>\r\n                <p>So! Enjoy, have a look around, do whatever. As you can see this is (currently) a completely static site. I don't really expect that to change any time soon, \r\n                    either. So as a matter of transparency, the code for the site can be found on <a href=\"https://github.com/gwillad/adamgwilliam.dev\">github</a>. Feel free to \r\n                    check out <a href=\"https://github.com/gwillad\">my work</a> on github as well, and <a href=\"/contact\">contact</a> me.\r\n                </p>\r\n            </div>\r\n        </div>\r\n    );\r\n}","export default function functionalComponentRefactor() {\r\n    return (\r\n        <div>\r\n            <h1 className=\"title\">Refactoring the site</h1>\r\n            <h3 className=\"title\">Why I'm refactoring the site</h3>\r\n            <div className=\"content\">\r\n                <p>So, I have worked with react.js for about a year now (since May 2020) at my current position. A lot of the work I do in it is class-based. I'm not sure \r\n                    if that was an intentional decision by my team before I joined or not. I suspect it was just legacy use of the SPA they use as a template for spinning up \r\n                    new projects. </p>\r\n                <p>Normally, this wouldn't be a huge deal, except as of React 16.8, we have been introduced to <a href=\"https://reactjs.org/docs/hooks-overview.html\">hooks</a>.\r\n                    Not only that, but a lot of development in react OSS projects is using hooks and functional components primarily. Personally it feels like a pretty big \r\n                    paradigm shift, but I think it's worth keeping up on it as I can to ensure that I can write effective react going forward.</p>\r\n                <p>So I'll be rewritting this website as purely functional components with react hooks as needed</p>\r\n            </div>\r\n            <h3 className=\"title\">Journey, hiccups, &c</h3>\r\n            <div className=\"content\">\r\n                <p>First things first, we need a list of all the components that need refactoring. I've already started this post as a functional component (peak behind the \r\n                    scenes, this blog is written in react cause I'm too lazy to learn a blogging platform). Next there's components, pages, and the top level app. Luckily this\r\n                    site is still really small, so we don't have to work too hard at the moment.</p>\r\n                <p>First bump is with the navbar - we have some state and we have some routing. State seems easy enough with the <code>useState</code> hook. I assume there is\r\n                    some corresponding <code>useRoutes</code> hook or something like that for react router. There's also a ref for aligning the blog menu to it's label. \r\n                    Luckily I found this handy <a href=\"https://dev.to/carlosrafael22/using-refs-in-react-functional-components-part-1-useref-callback-ref-2j5i\">blog post</a> \r\n                    describing how to use ref hooks! The navigation was easy as well, there's <a href=\"https://reactrouter.com/web/api/Hooks/usehistory\">a hook</a> for \r\n                    <code>useHistory</code> as well. Seems like there's a hook for everything! So far , the transition has been easy. Admittedly, I don't have a super complex\r\n                    use case, but in my experience, starting with something this simple is always a good way to dig into something new. It's also worth noting that this has \r\n                    seemed to reduce boiler plate</p>\r\n                <p>Posts were easy, they really don't have anything in them that's interesting</p>\r\n                <p>Next is the blog page itself which basically just finds the correct blog and renders it. We do use a prop here, so that's unfamiliar territory, but it looks\r\n                    to be as easy as using <code>function(props)</code>... And it appears you can strongly type it too (which is always good in my opinion). I ended up \r\n                    refactoring the way I do page title setting to use <code>document.title = \"title\"</code> instead of Helmet, a 3rd party OSS react package that sets the \r\n                    document title with a dom element. This refactor was interesting because I used <code>useState</code> and <code>useEffect</code> in conjunction in a cool\r\n                    way! An interesting effect is that we have to pass the state as a dependency in <code>useEffect</code>.</p>\r\n                <p>Everything else was easy as well. The only thing worth noting is setting the page title in App.tsx with <code>useEffect</code> hook (which is literally the \r\n                    example the give in the hooks overview, so...).</p>\r\n            </div>\r\n            <div className=\"content\">\r\n                <p>Welp, that was easy! I'm glad I did it and will definitely be looking forward to working with functional components and hooks in the future. Even just this \r\n                    short exercise was useful in demistifying the whole concept. Check out the \r\n                    code <a href=\"https://github.com/gwillad/adamgwilliam.dev/tree/functional-component-refator\">here</a>, or feel free to <a href=\"/contact\">hit me up</a>.</p>\r\n            </div>\r\n        </div>\r\n    );\r\n}","export default function CorneLayout() {\r\n    return (\r\n        <div>\r\n            <h1 className=\"title\">Experimenting with my Corne Layout</h1>\r\n            <div className=\"content\">\r\n                <p>So for those who don't know (which might be everyone), I am a big fan of <a href=\"https://www.reddit.com/r/CustomKeyboards/\">custom keyboards</a>. I got into the\r\n                    hobby at the beginning of the pandemic. I had just started a new job and was stuck inside in my studio apartment with my partner and my loud ass keyboard \r\n                    (an old coolermaster with Cherry MX Blues, if you're wondering). The board itself was fine, but it was clear that it wasn't going to work. I was simply making \r\n                    too much noise. \r\n                </p>\r\n                <p>My brother had been talking to me about his keyboards and showing me his cool ortholinear boards (all the keys are in rows and columns like a \r\n                    grid), and telling me about the switches... at the time I kind of just tuned it out. He was clearly much deeper down the rabbit hole than I, and I couldn't\r\n                    keep up. Remembering this, I reached out to him for some advice, and we starting talking about form factors and hot swap and switch types and QMK and.... \r\n                    Before I knew it, I had bought a $110 keyboard (more than I ever thought I would spend) and was buying new keycap sets and switches to experiment\r\n                    with the sound... I was hooked. Thanks for that, David.\r\n                </p>\r\n                <p>Fast forward a year and change and I'm pretty deep in it at this point. I have several boards, several more that I have bought, built, and sold. I am a member\r\n                    of several keyboard focused discords and consider some of those folks in those spheres my friends. I even got my partner into it (she's a big fan of the case \r\n                    design and keycap aspects). It has been, in my opinion, really important for my mental health during the pandemic. I was stuck inside, but I was exploring a \r\n                    new hobby and making new friends the whole time. I am really grateful to the community because of that.\r\n                </p>       \r\n                <p>Plus, the keyboards are dope.</p>\r\n                <img className=\"img\" src=\"https://imgur.com/Nl2m144.jpg\" alt=\"polycarbonate keyboard with colorful keycaps\"/>      \r\n                <img className=\"img\" src=\"https://imgur.com/nrpp47P.jpg\" alt=\"small polycarbonate keyboard with dark keycaps\"/>\r\n                <img className=\"img\" src=\"https://imgur.com/vGf7MwJ.jpg\" alt=\"all black keyboard with purple accents\"/> \r\n                <img className=\"img\" src=\"https://imgur.com/njIxRa2.jpg\" alt=\"split keyboard\"/> \r\n                <p>That final photo is called a CRKBD or Corne. Specifically, a black aluminum <a href=\"https://imkulio.com/\">IMK Corne</a> (a custom case for the typical\r\n                    fr4 sandwich corne, which is what most cornes are), with lubed (205g0) and spring swapped (100g progressive \r\n                    sprits) <a href=\"https://novelkeys.xyz/collections/switches/products/novelkeys-cream-switches\">NK Creams</a>, \r\n                    and <a href=\"https://drop.com/buy/drop-matt3o-mt3-susuwatari-custom-keycap-set?utm_source=linkshare&referer=XPCNQT\">MT3 Susuwatari</a>. It's a lovely little \r\n                    keyboard, and as you can see has some interesting features:\r\n                </p>\r\n                <ul>\r\n                    <li>Columnar stagger - the keys are aligned by column instead of by row, like with standard layouts. This means your fingers only move up and down, \r\n                        not side to side. It takes a bit to get used to, but ultimately is a more comfortable typing experience.\r\n                    </li>\r\n                    <li>\r\n                        Those screens with the bongo cat on them bongo at the same speed that I type. It's extremely cute. \r\n                    </li>\r\n                    <li>40% layout - this board is missing <i>a lot</i> of keys compared to a typical full sized keyboard. No numpad, no nav keys like arrows, no F row, very few \r\n                        of the normal modifier keys like control or alt... there isn't even a num row.\r\n                    </li>\r\n                    <li>Split in half! This allows you to type with hands apart which is much more comfortable for shoulders, back, and wrists. Seriously. It's hard to go back now.</li>\r\n                </ul>\r\n                <p>So, how do you type on these you might ask? Layers! The two keys next to the big boys where the thumbs go are called layer keys. They act a lot like a \"fn\" key\r\n                    you see on some laptop keyboards which change the functionality of other keys when held. So basically I have memorized a secondary layout that's mapped to the \r\n                    same keys as the alphas. Just have to hold the \"LWR\" (lower) and/or \"RSE\" (raise) key to access them. With that I have all the functionality I need. Numbers, \r\n                    symbols, navigation, and F row!\r\n                </p>\r\n                <p>One of the many appeals of the hobby is the personalization and customization of things like keymap layout. It's a lot of fun to try to optimize your\r\n                    keystrokes and make sure you're typing efficiently. The reason I wanted to write this post was to document a change from an old layout to a new one. Here's the \r\n                    old layout.\r\n                </p>\r\n                <img className=\"img\" src=\"https://imgur.com/FYrDQjP.jpg\" alt=\"keymap of old layer zero\"/>      \r\n                <img className=\"img\" src=\"https://imgur.com/RyRVd2T.jpg\" alt=\"keymap of old layer one\"/>\r\n                <img className=\"img\" src=\"https://imgur.com/WMCvb53.jpg\" alt=\"keymap of old layer two\"/> \r\n                <img className=\"img\" src=\"https://imgur.com/FkuxKms.jpg\" alt=\"keymap of old layer three\"/> \r\n                <p>These screenshots are from a program called <a href=\"https://caniusevia.com/\">Via</a>. It's a semi-open source project that uses QMK, a common custom keyboard firmware \r\n                    to map keys on the fly without having to reflash the hardware. The upside triangles mean \"no key here\". M1 and M0 are macros (which automatically type multiple \r\n                    keys at once) and ADV keys are special commands in QMK. MO(1) and MO(2) are the special layer keys I spoke about above. \r\n                </p>\r\n                <p>The issues I was having with the layout were three-fold: </p>\r\n                <ol>\r\n                    <li>Because I have to hit the lower key so frequently - MO(1) in layer 0 - I often accidentally hit the windows key, which is super disrupting.</li>\r\n                    <li>The arrow cluster on layer 2 is unintuitive. I never really grokked where to put my fingers. I use arrows a lot navigating around code, so I thought\r\n                        this would start to come naturally, but as you can see I have several board and for the most part they all have the arrows in different locations. It can \r\n                        be hard to build muscle memory for it when switching boards regularly (which I do).\r\n                    </li>\r\n                    <li>This is a minor issue, but I use delete key fairly regularly, and in this layout it's paired with the right shift. You can't see it in the layout, because \r\n                        it's using something called \"Mod Tap\" which is a functionality in the keyboard which allows you to press one key (a modifier, specifically) when held, and \r\n                        another key when tapped. In this case, it's the ADV key on the bottom right where right shift would be normally, and that has right shift on hold, delete on \r\n                        tap. \r\n                    </li>\r\n                </ol>\r\n                <p>So, because it's so easy to experiment, I went for it! Here's the new layout.</p>\r\n                <img className=\"img\" src=\"https://imgur.com/z6aTzrt.jpg\" alt=\"keymap of new layer zero\"/>      \r\n                <img className=\"img\" src=\"https://imgur.com/ZIFKdyr.jpg\" alt=\"keymap of new layer one\"/>\r\n                <img className=\"img\" src=\"https://imgur.com/MfLrE7E.jpg\" alt=\"keymap of new layer two\"/> \r\n                <img className=\"img\" src=\"https://imgur.com/3aPCXiX.jpg\" alt=\"keymap of new layer three\"/> \r\n                <p>A handful of major changes:</p>\r\n                <ul>\r\n                    <li>Probably the biggest change - all the symbols including numbers have been moved to one layer. The idea I had is to have one layer for all symbols and \r\n                        another layer just for navigation. This let me put the arrow cluster in a much more intuitive place, and I think this will also help with typing strings of \r\n                        symbols and numbers (which I do more than you might think...)\r\n                    </li>\r\n                    <li>Delete has been moved to where windows key was and windows was moved to a layer. Frankly, I don't use windows key a ton anyway. I mostly \r\n                        use <a href=\"https://www.launchy.net/\">Launchy</a>. I am hoping I will end up with a lot fewer interruptions while typing. \r\n                    </li>\r\n                    <li>The macros (which were used to launch common programs like launchy and a command prompt) are now in the function layer, which I think makes a little more \r\n                        sense to me. \r\n                    </li>\r\n                </ul>\r\n                <p>The biggest issue with changes like this is just getting used to it. And, assuming I do get used to it (which is extremely likely to happen, just takes \r\n                    time) then porting it over to my other 40% boards!\r\n                </p>\r\n                <p>As always, feel free to <a href=\"/contact\">hit me up</a> if you have any questions!</p>\r\n            </div>\r\n        </div>\r\n    );\r\n\r\n}\r\n","import { ReactElement } from \"react\";\r\n\r\nimport NotFound from \"../notFound/NotFound\";\r\nimport FirstPost from \"./posts/FirstPost\";\r\nimport FunctionalComponentRefactor from \"./posts/FunctionalComponentRefactor\";\r\nimport CorneLayout from \"./posts/CorneLayout\";\r\n\r\ntype Tag = \"misc\" | \"dev\" | \"keebs\" | \"dnd\";\r\n\r\nexport type Post = {\r\n    index: number,\r\n    element: ReactElement,\r\n    pageTitle: string, \r\n    navTitle?: string,\r\n    blogNavLink?: string,\r\n    tags?: Tag[],\r\n}\r\n\r\nexport const Posts = new Array<Post>(\r\n    {index: 0, element: <FirstPost />, pageTitle: \"Welcome!\", navTitle: \"Welcome!\", blogNavLink: \"first-post\", tags: [\"misc\"]},\r\n    {index: 1, element: <FunctionalComponentRefactor />, pageTitle: \"Refactoring the site\", navTitle: \"Refactor\", blogNavLink: \"refactoring-the-site\", tags: [\"dev\"]},\r\n    {index: 2, element: <CorneLayout />, pageTitle: \"Corne Layout Experiments\", navTitle: \"Corne Layout\", blogNavLink: \"corne-layout-experiments\", tags: [\"keebs\"]}\r\n);\r\nexport const NotFoundPost: Post = {index: -1, element: <NotFound />, pageTitle: \"Not Found\"};\r\nexport const PostsByTag = new Array<Array<Post>>(\r\n    Posts.filter(post => post.tags && post.tags.findIndex(tag => tag === \"misc\") !== -1),\r\n    Posts.filter(post => post.tags && post.tags.findIndex(tag => tag === \"dev\") !== -1),\r\n    Posts.filter(post => post.tags && post.tags.findIndex(tag => tag === \"keebs\") !== -1),\r\n    Posts.filter(post => post.tags && post.tags.findIndex(tag => tag === \"dnd\") !== -1),\r\n)","import { useRef, useState } from 'react';\r\nimport { useHistory } from 'react-router-dom';\r\n\r\nimport { Posts } from '../../pages/blog/posts';\r\n\r\nimport Button from '@material-ui/core/Button'\r\nimport AppBar from '@material-ui/core/AppBar';\r\nimport Toolbar from '@material-ui/core/Toolbar';\r\nimport Typography from '@material-ui/core/Typography';\r\nimport Menu from '@material-ui/core/Menu';\r\nimport MenuItem from '@material-ui/core/MenuItem';\r\nimport './Navbar.css';\r\n\r\nexport default function Navbar() {\r\n    const [blogMenuOpen, setBlogMenuOpen] = useState(false);\r\n    const blogMenuRef = useRef<HTMLButtonElement>(null);\r\n    const history = useHistory();\r\n\r\n    function navigateTo(key: string): void {\r\n        setBlogMenuOpen(false);\r\n        history.push(key);\r\n    }\r\n\r\n    return (\r\n        <AppBar position=\"static\" elevation={0}>\r\n            <Toolbar className=\"header\">\r\n                <Button variant=\"contained\" color=\"primary\" disableElevation onClick={() => navigateTo(`/`)}><Typography variant=\"h6\">adamgwilliam.dev</Typography></Button>\r\n                <div>            \r\n                    {/* <Button variant=\"contained\" color=\"primary\" disableElevation onClick={() => navigateTo(`/resume`)} >\r\n                        Resume\r\n                    </Button>                    */}\r\n                    <Button variant=\"contained\" color=\"primary\" disableElevation onClick={() => navigateTo(`/contact`)} >\r\n                        Contact\r\n                    </Button>\r\n                    <Button variant=\"contained\" color=\"primary\" disableElevation aria-controls=\"blog-menu\" aria-haspopup=\"true\" onClick={() => setBlogMenuOpen(true)} ref={blogMenuRef}>\r\n                        Blog\r\n                    </Button>\r\n                    <Menu \r\n                        id=\"blog-menu\"\r\n                        anchorEl={blogMenuRef.current}\r\n                        keepMounted\r\n                        open={blogMenuOpen}\r\n                        onClose={() => setBlogMenuOpen(false)}\r\n                    >\r\n                        {Posts.map(post => \r\n                            <MenuItem onClick={() => navigateTo(`/blog/${post.blogNavLink}`)} key={post.pageTitle}>\r\n                                {post.navTitle}\r\n                            </MenuItem>).reverse()\r\n                        }\r\n                    </Menu>\r\n                </div>\r\n            </Toolbar>\r\n        </AppBar>\r\n    );\r\n}","import { useEffect, useState } from 'react';\r\nimport { useHistory } from 'react-router-dom';\r\n\r\nimport { Posts, NotFoundPost, Post } from './posts';\r\n\r\nimport Button from '@material-ui/core/Button';\r\nimport './Blog.css';\r\n\r\ntype Direction = \"prev\" | \"next\";\r\n\r\ninterface IBlogProps {\r\n    title: string;\r\n}\r\n\r\nexport default function Blog(props: IBlogProps) {\r\n    const [currentPost, setCurrentPost] = useState<Post>(NotFoundPost);\r\n    const history = useHistory();\r\n\r\n    useEffect(() => {\r\n        setCurrentPost(props.title === \"last\" ? Posts[Posts.length - 1] : Posts.find(post => post.blogNavLink === props.title) || NotFoundPost);\r\n    }, [currentPost.pageTitle, props.title]);\r\n\r\n    useEffect(() => {\r\n        document.title = currentPost.pageTitle;\r\n    })\r\n\r\n    function changePage(dir: Direction) {\r\n        const nextPost = Posts.find(post => post.index === currentPost.index + (dir === \"next\" ? 1 : -1)) || NotFoundPost;\r\n        history.push(`/blog/${nextPost.blogNavLink}`);\r\n    }\r\n\r\n    return (\r\n        <div>\r\n            <div className=\"blogNavContainer\">\r\n                <div className=\"prevButton\">\r\n                    { currentPost.index > 0 &&\r\n                    <Button color=\"primary\" disableElevation onClick={() => changePage(\"prev\")} >\r\n                        Previous Post\r\n                    </Button>}\r\n                </div>\r\n                <div className=\"nextButton\">\r\n                    { currentPost.index < (Posts.length - 1) && \r\n                    <Button color=\"primary\" disableElevation onClick={() => changePage(\"next\")} >\r\n                        Next Post\r\n                    </Button>}\r\n                </div>\r\n            </div>\r\n            <div className=\"container\">\r\n                {currentPost.element}\r\n            </div>\r\n            { currentPost.tags && \r\n            <div className=\"tagList\">\r\n                {currentPost.tags.reduce((acc, curr, i) => acc + (i === 0 ? \"\": \" \") + curr, \"\")}\r\n            </div>}\r\n        </div>\r\n    );\r\n}","export default function Contact() {\r\n\r\n    return (\r\n        <div>\r\n            <p>You can find my work on <a href=\"https://github.com/gwillad\">github</a>. \r\n                You can contact me on discord at gwillad#0001. \r\n                If you really really want to, you can also <a href=\"mailto:adamgwilliam@gmail.com\">email me</a>.\r\n            </p>\r\n\r\n        </div>\r\n    );\r\n}","import { useEffect } from 'react';\r\nimport { \r\n    Route, \r\n    Redirect, \r\n    Switch,\r\n    BrowserRouter as Router\r\n} from 'react-router-dom';\r\nimport Navbar from './components/navbar/Navbar';\r\nimport Blog from './pages/blog/Blog';\r\nimport Contact from './pages/contact/Contact';\r\nimport NotFound from './pages/notFound/NotFound';\r\n\r\nimport './App.css';\r\n\r\nexport default function App() {\r\n  useEffect(() => { \r\n    document.title = \"Adam Gwilliam\"; \r\n  });\r\n\r\n  return (\r\n    <div className=\"App\">\r\n      <Router>\r\n        <Navbar />\r\n        <Switch>\r\n          <Route exact path=\"/\">\r\n            <Redirect to=\"/blog/last\" />\r\n          </Route>\r\n          {/* <Route exact path=\"/resume\" render={() => <Resume />} /> */}\r\n          <Route exact path=\"/contact\" render={() => <Contact />} />\r\n          <Route path=\"/blog/:title\" render={({match}) => <Blog title={match.params.title} />} />\r\n          <Route render={()=> <NotFound />} />\r\n        </Switch>\r\n      </Router>\r\n    </div>\r\n  );\r\n}\r\n","const reportWebVitals = onPerfEntry => {\r\n  if (onPerfEntry && onPerfEntry instanceof Function) {\r\n    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {\r\n      getCLS(onPerfEntry);\r\n      getFID(onPerfEntry);\r\n      getFCP(onPerfEntry);\r\n      getLCP(onPerfEntry);\r\n      getTTFB(onPerfEntry);\r\n    });\r\n  }\r\n};\r\n\r\nexport default reportWebVitals;\r\n","import React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport './index.css';\r\nimport App from './App';\r\nimport reportWebVitals from './reportWebVitals';\r\n\r\nReactDOM.render(\r\n  <React.StrictMode>\r\n    <App />\r\n  </React.StrictMode>,\r\n  document.getElementById('root')\r\n);\r\n\r\n// If you want to start measuring performance in your app, pass a function\r\n// to log results (for example: reportWebVitals(console.log))\r\n// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals\r\nreportWebVitals();\r\n"],"sourceRoot":""}