refactor notes directory and front matter

notes/bernie-sanders-bern-app-data/index.mdx

@@ -1,19 +1,17 @@
----
-title: 'Bernie Sanders'' Creepy "BERN" App Wants Your Data...From Your Best Friends'
-date: 2019-05-08 10:31:02-0400
-description: "The team behind Bernie's campaign has a new app named BERN. It's undoubtedly a smart move, but also a concerning one for privacy advocates."
-tags:
-  - Privacy
-  - Data
-  - Bernie Sanders
-  - 2020 Presidential Campaign
-  - Politics
-image: "/static/images/notes/bernie-sanders-bern-app-data/sad-bernie.jpg"
----
+import featuredImage from "./sad-bernie.jpg";
+
+export const frontmatter = {
+  title: 'Bernie Sanders\' Creepy "BERN" App Wants Your Data...From Your Best Friends',
+  date: "2019-05-08 10:31:02-0400",
+  description:
+    "The team behind Bernie's campaign has a new app named BERN. It's undoubtedly a smart move, but also a concerning one for privacy advocates.",
+  tags: ["Privacy", "Data", "Bernie Sanders", "2020 Presidential Campaign", "Politics"],
+  image: featuredImage.src,
+};
 
 The team behind Bernie Sanders' 2020 campaign [released a new web app](https://www.nbcnews.com/politics/2020-election/bernie-sanders-2020-campaign-unveils-app-increase-its-voter-database-n999206) last month named [BERN](https://app.berniesanders.com/). The goal of BERN is simple: to gather as much information as they can on as many voters in the United States as they can, and make their grassroots army of enthusiastic supporters do the work. It's undoubtedly a smart strategy, but also a concerning one for myself and other privacy advocates.
 
-![Sad Bernie](../public/static/images/notes/bernie-sanders-bern-app-data/sad-bernie.jpg)
+![Sad Bernie](./sad-bernie.jpg)
 
 BERN has two features: one called "Friend-to-Friend" (described as "add everyone in your network") and another called "Community Canvassing" (described as "talk to people around you every day, e.g. on the bus, outside the grocery store, at a park"). Both of these involve phoning home to Sanders HQ with the following information on anybody you know or meet:
 
@@ -42,43 +40,43 @@ Here's one of the instructional videos provided internally to volunteers:
 
 <Video
   src={{
-    webm: "/static/images/notes/bernie-sanders-bern-app-data/friend-to-friend.webm",
-    mp4: "/static/images/notes/bernie-sanders-bern-app-data/friend-to-friend.mp4",
+    webm: "/static/bernie-sanders-bern-app-data/friend-to-friend.webm",
+    mp4: "/static/bernie-sanders-bern-app-data/friend-to-friend.mp4",
   }}
-  poster="/static/images/notes/bernie-sanders-bern-app-data/poster-friend-to-friend.png"
+  poster="/static/bernie-sanders-bern-app-data/poster-friend-to-friend.png"
 />
 
 ...and a few privacy-related questions about the friend-to-friend feature were answered by campaign staff in a separate closed webinar for volunteers this week:
 
-![Q&A 1](../public/static/images/notes/bernie-sanders-bern-app-data/webinar-qa-1.png)
+![Q&A 1](./webinar-qa-1.png)
 
-![Q&A 2](../public/static/images/notes/bernie-sanders-bern-app-data/webinar-qa-2.png)
+![Q&A 2](./webinar-qa-2.png)
 
 Defenders of the BERN app have pointed out that the information used is already available from public voter rolls maintained independently by each state. This is true. But these public records have never been tied to a campaign's internal voter files through a tool that's wide open to the entire internet, with incentives to add valuable data that benefits one candidate.
 
 There were even unverified claims that [BERN was leaking voter ID numbers](https://info.idagent.com/blog/bern-app-exposes-150m-voter-records), which are the same as one's driver's license ID numbers in some states, through JSON responses in the first few days after its release. There don't be appear to be strict rate limits on calls to the API either, potentially inviting malicious actors from around the world — wink wink — to scrape personal data on tens of millions of Americans en masse.
 
-![BERN's API response in Chrome DevTools](../public/static/images/notes/bernie-sanders-bern-app-data/json-response.jpg)
+![BERN's API response in Chrome DevTools](./json-response.jpg)
 
 Others have noted that web-based organizing tools like BERN have been used by campaigns at all levels since President Obama's well-oiled, futuristic machine in 2007. This is also true, and I'm a big fan of the trend they started.
 
-But the latter category of databases — like [NationBuilder](https://nationbuilder.com/) and, more notably, [NGP VAN's VoteBuilder](https://act.ngpvan.com/votebuilder) software based on the Obama campaign's inventions and now used by almost all Democratic campaigns across the United States — are secured and strictly guarded. Volunteer accounts need to be created and approved by paid campaign organizers and are locked down to provide the bare minimum amount of information necessary for one to canvass or phone bank a shortlist of voters. Every single click is also recorded in a [detailed log](/static/images/notes/bernie-sanders-bern-app-data/sanders-campaign-audit.pdf) down to the millisecond. (This is how [Bernie's organizers got busted](https://time.com/4155185/bernie-sanders-hillary-clinton-data/) snooping around Hillary's VoteBuilder data last cycle, by the way.)
+But the latter category of databases — like [NationBuilder](https://nationbuilder.com/) and, more notably, [NGP VAN's VoteBuilder](https://act.ngpvan.com/votebuilder) software based on the Obama campaign's inventions and now used by almost all Democratic campaigns across the United States — are secured and strictly guarded. Volunteer accounts need to be created and approved by paid campaign organizers and are locked down to provide the bare minimum amount of information necessary for one to canvass or phone bank a shortlist of voters. Every single click is also recorded in a [detailed log](/static/bernie-sanders-bern-app-data/sanders-campaign-audit.pdf) down to the millisecond. (This is how [Bernie's organizers got busted](https://time.com/4155185/bernie-sanders-hillary-clinton-data/) snooping around Hillary's VoteBuilder data last cycle, by the way.)
 
 ![NGP VAN's audit of the Sanders campaign's VoteBuilder
-  activity](../public/static/images/notes/bernie-sanders-bern-app-data/votebuilder-audit.png)
+  activity](./votebuilder-audit.png)
 
 BERN is taking this to an unprecedented level. Allowing anybody on the internet to sign up and add others' personal information to the campaign's database without their knowledge is troubling, especially when you consider the gamified "points" system they've added as an incentive to report as much information on as many people as possible.
 
 ![BERN discussion on /r/SandersForPresident
-  thread](../public/static/images/notes/bernie-sanders-bern-app-data/reddit-bros.png)
+  thread](./reddit-bros.png)
 
 In addition to the points system, it was revealed in the webinar mentioned above that the campaign is planning on giving out shiny rewards based on how many friends one adds, setting expectations at 50+ contacts to reach the "Bernie Super Bundler" tier — whatever that means.
 
-![Webinar Slide 1](../public/static/images/notes/bernie-sanders-bern-app-data/webinar-slide-1.png)
+![Webinar Slide 1](./webinar-slide-1.png)
 
 In the middle of the webinar, the organizer also paused the presentation for _fifteen minutes_ — complete with a countdown clock — and told volunteers to race to add as many of their friends as possible in that time. She announced afterwards that participants added 20 to 40 friends into the app on average, with some allegedly adding close to 100 in fifteen minutes.
 
-![Webinar Slide 2](../public/static/images/notes/bernie-sanders-bern-app-data/webinar-slide-2.png)
+![Webinar Slide 2](./webinar-slide-2.png)
 
 The [Privacy Policy link](https://berniesanders.com/privacy-policy/) at the bottom of the app links to a generic policy that looks like it's been copied from a default Wix website. There's no mention of the BERN app, no details of how they explicitly use our information, and no sign of an opt-out procedure.
 

notes/cloudflare-dns-archive-is-blocked/index.mdx

@@ -1,19 +1,17 @@
----
-title: "Does Cloudflare's 1.1.1.1 DNS Block Archive.is?"
-date: 2019-05-04 09:35:12-0400
-description: "Short answer: no. Quite the opposite, actually — Archive.is is intentionally blocking 1.1.1.1 users. Here's why."
-tags:
-  - Cloudflare
-  - DNS
-  - Networking
-  - Privacy
-  - Temper Tantrums
-image: "/static/images/notes/cloudflare-dns-archive-is-blocked/archive-is.png"
----
+import featuredImage from "./archive-is.png";
+
+export const frontmatter = {
+  title: "Does Cloudflare's 1.1.1.1 DNS Block Archive.is?",
+  date: "2019-05-04 09:35:12-0400",
+  description:
+    "Short answer: no. Quite the opposite, actually — Archive.is is intentionally blocking 1.1.1.1 users. Here's why.",
+  tags: ["Cloudflare", "DNS", "Networking", "Privacy", "Temper Tantrums"],
+  image: featuredImage.src,
+};
 
 **tl;dr:** No. Quite the opposite, actually — [Archive.is](https://archive.is/)'s owner is intentionally blocking 1.1.1.1 users.
 
-![Archive.today screenshot](../public/static/images/notes/cloudflare-dns-archive-is-blocked/archive-is.png)
+![Archive.today screenshot](./archive-is.png)
 
 A [recent post on Hacker News](https://news.ycombinator.com/item?id=19828317) pointed out something I've noticed myself over the past year — the [Archive.is](https://archive.is/) website archiving tool (aka [Archive.today](https://archive.today/) and a few other TLDs) appears unresponsive when I'm on my home network, where I use Cloudflare's fantastic public DNS service, [1.1.1.1](https://1.1.1.1/). I didn't connect the two variables until I read this post, where somebody noticed that the Archive.is domain resolves for [Google's 8.8.8.8](https://developers.google.com/speed/public-dns/) DNS, but not 1.1.1.1. An interesting and timeless debate on [privacy versus convenience](https://www.adweek.com/digital/why-consumers-are-increasingly-willing-to-trade-privacy-for-convenience/) ensued.
 

notes/cool-bash-tricks-for-your-terminal-dotfiles/index.mdx

@@ -1,18 +1,15 @@
----
-title: 'Cool Bash Tricks for Your Terminal''s "Dotfiles"'
-date: 2018-12-10 20:01:50-0400
-description: "Bashfiles usually contain shortcuts compatible with Bash terminals to automate convoluted commands. Here's a summary of the ones I find most helpful that you can add to your own .bash_profile or .bashrc file."
-tags:
-  - Dotfiles
-  - Hacks
-  - macOS
-  - Programming
-  - Terminal
-  - Tutorial
-image: "/static/images/notes/cool-bash-tricks-for-your-terminal-dotfiles/terminal.png"
----
+import featuredImage from "./terminal.png";
 
-![Terminal.app on macOS](../public/static/images/notes/cool-bash-tricks-for-your-terminal-dotfiles/terminal.png)
+export const frontmatter = {
+  title: 'Cool Bash Tricks for Your Terminal\'s "Dotfiles"',
+  date: "2018-12-10 20:01:50-0400",
+  description:
+    "Bashfiles usually contain shortcuts compatible with Bash terminals to automate convoluted commands. Here's a summary of the ones I find most helpful that you can add to your own .bash_profile or .bashrc file.",
+  tags: ["Dotfiles", "Hacks", "macOS", "Programming", "Terminal", "Tutorial"],
+  image: featuredImage.src,
+};
+
+![Terminal.app on macOS](./terminal.png)
 
 You may have noticed the recent trend of techies [posting their "dotfiles" on GitHub](https://github.com/topics/dotfiles) for the world to see. These usually contain shortcuts compatible with Bash terminals to automate convoluted commands that, I'll admit, I needed to Google every single time.
 

notes/coronavirus-open-source/index.mdx

@@ -1,15 +1,13 @@
----
-title: "COVID-19 vs. the Open Source Community ⚔️"
-date: 2020-03-23 15:17:09-0400
-description: "The open source community is rallying together like no other to provide coronavirus information to the public in innovative ways."
-tags:
-  - Open Source
-  - COVID-19
-  - Coronavirus
-  - Public Health
-  - GitHub
-image: "/static/images/notes/coronavirus-open-source/covid19dashboards.png"
----
+import featuredImage from "./covid19dashboards.png";
+
+export const frontmatter = {
+  title: "COVID-19 vs. the Open Source Community ⚔️",
+  date: "2020-03-23 15:17:09-0400",
+  description:
+    "The open source community is rallying together like no other to provide coronavirus information to the public in innovative ways.",
+  tags: ["Open Source", "COVID-19", "Coronavirus", "Public Health", "GitHub"],
+  image: featuredImage.src,
+};
 
 We're all quickly learning that worldwide pandemics can bring out both [the best](https://www.vox.com/culture/2020/3/13/21179293/coronavirus-italy-covid19-music-balconies-sing) and [the worst](https://twitter.com/9NewsAUS/status/1236088663093608448) of humanity. But one thing has become readily apparent to me — outside of the large teams of medical professionals risking their lives right this minute, the open source community stands alone in its ability to rapidly organize in the midst of chaos to give back to the world and, in this case, make it safer for all of us.
 
@@ -21,7 +19,7 @@ Now that Americans are _finally_ starting to get tested for the coronavirus, inf
 
 The maintainers are also [fully transparent](https://covidtracking.com/about-tracker/) about their process and take great care to annotate individual figures with the methodology used to arrive at each, which has earned them the [trust](https://covidtracking.com/#press) of even the largest national news organizations reporting on COVID-19.
 
-![The COVID Tracking Project](../public/static/images/notes/coronavirus-open-source/covidtracking.png)
+![The COVID Tracking Project](./covidtracking.png)
 
 ## [#findthemasks](https://findthemasks.com/) <OctocatLink repo="r-pop/findthemasks" />
 
@@ -29,7 +27,7 @@ This one might be my favorite, simply because of its laser-like focus on solving
 
 _Please_ look up your local hospitals on [#findthemasks](https://findthemasks.com/#sites) and follow their instructions to donate anything you have hoarded — it's likely the single most impactful thing you can do at this point. If you don't see your local hospital, or don't feel comfortable shipping equipment to any hospital listed, you can also visit [PPE Link](https://ppelink.org/ppe-donations/) and they will connect you with hospitals in your area.
 
-![#findthemasks](../public/static/images/notes/coronavirus-open-source/findthemasks.png)
+![#findthemasks](./findthemasks.png)
 
 ## [#StayTheFuckHome](https://staythefuckhome.com/) <OctocatLink repo="flore2003/staythefuckhome" />
 
@@ -37,37 +35,37 @@ I figured I'd throw in this cheeky website broadcasting a simple but serious mes
 
 The [GitHub community](https://github.com/flore2003/staythefuckhome/pulls?q=is%3Apr) has translated the instructional essay into over a dozen different languages — including a [safe-for-work version](https://staythefuckhome.com/sfw/), if that helps — and they're [looking for more translators](https://github.com/flore2003/staythefuckhome#contributing) if you're multilingual and need something besides Netflix to fill your time with while you **_stay the fuck home!_** 😉
 
-![#StayTheFuckHome](../public/static/images/notes/coronavirus-open-source/staythefuckhome.png)
+![#StayTheFuckHome](./staythefuckhome.png)
 
 ## [COVID-19 Dashboards](https://covid19dashboards.com/) <OctocatLink repo="github/covid19-dashboard" />
 
 This collection of various visualizations is fascinating (and sobering) to look at. If you're smarter than I am and have experience in data analysis, their team (led by a [GitHub engineer](https://github.com/hamelsmu)) would be more than happy to [add your contribution](https://github.com/github/covid19-dashboard/blob/master/CONTRIBUTING.md) to the site — they're using [Jupyter Notebooks](https://jupyter.org/) and [fastpages](https://github.com/fastai/fastpages).
 
-![COVID-19 Dashboards](../public/static/images/notes/coronavirus-open-source/covid19dashboards.png)
+![COVID-19 Dashboards](./covid19dashboards.png)
 
 ## [CoronaTracker](https://coronatracker.samabox.com/) <OctocatLink repo="MhdHejazi/CoronaTracker" />
 
 CoronaTracker is a _beautiful_ cross-platform app for iOS and macOS with intuitive maps and charts fed by reputable live data. Apple is [being justifiably picky](https://developer.apple.com/news/?id=03142020a) about "non-official" Coronavirus apps in their App Store ([so is Google](https://blog.google/inside-google/company-announcements/coronavirus-covid19-response/), by the way) but you can still [download the macOS app directly](https://coronatracker.samabox.com/) or [compile the iOS source code](https://github.com/MhdHejazi/CoronaTracker#1-ios-app) yourself using Xcode if you wish.
 
-![CoronaTracker](../public/static/images/notes/coronavirus-open-source/coronatracker.png)
+![CoronaTracker](./coronatracker.png)
 
 ## [Staying Home Club](https://stayinghome.club/) <OctocatLink repo="phildini/stayinghomeclub" />
 
 A bit more family-friendly than [#StayTheFuckHome](https://staythefuckhome.com/), the [Staying Home Club](https://stayinghome.club/) is maintaining a running list of over a thousand companies and universities mandating that employees and students work from home, as well as events that have been canceled or moved online. Quarantining yourself might feel lonely, but here's solid proof that you're far from alone right now.
 
-![Staying Home Club](../public/static/images/notes/coronavirus-open-source/stayinghome.png)
+![Staying Home Club](./stayinghome.png)
 
 ## [Nextstrain for nCoV](https://nextstrain.org/ncov) <OctocatLink repo="nextstrain/ncov" />
 
 This one is a bit over my head, but apparently [Nextstrain](https://nextstrain.org/) is a pretty impressive open-source service targeted at genome data analysis and visualization of different pathogens. Their [COVID-19 page](https://nextstrain.org/ncov) is still awe-inspiring to look at for a layman like me, but probably a thousand times more so if you're an actual scientist — in which case, the [genome data they've open-sourced](https://github.com/nextstrain/ncov) might be of interest to you.
 
-![Nextstrain for nCOV](../public/static/images/notes/coronavirus-open-source/nextstrain.png)
+![Nextstrain for nCOV](./nextstrain.png)
 
 ## [Johns Hopkins 2019-nCoV Data](https://systems.jhu.edu/research/public-health/ncov/) <OctocatLink repo="CSSEGISandData/COVID-19" />
 
 Johns Hopkins University's [visual COVID-19 global dashboard](https://www.arcgis.com/apps/opsdashboard/index.html#/bda7594740fd40299423467b48e9ecf6) has been bookmarked as my go-to source of information since the beginning of this crisis earlier this year. Now, JHU's [Center for Systems Science and Engineering](https://systems.jhu.edu/) has open-sourced [their data and analysis](https://github.com/CSSEGISandData/COVID-19) for anybody to use.
 
-![Johns Hopkins 2019-nCoV Data](../public/static/images/notes/coronavirus-open-source/hopkins.png)
+![Johns Hopkins 2019-nCoV Data](./hopkins.png)
 
 ## [COVID-19 Scenarios](https://neherlab.org/covid19/) <OctocatLink repo="neherlab/covid19_scenarios" />
 
@@ -75,13 +73,13 @@ COVID-19 Scenarios will probably hit everyone in a different way, depending on y
 
 The maintainers at the [Neher Lab in Basel, Switzerland](https://neherlab.org/) even have a [discussion thread](https://github.com/neherlab/covid19_scenarios/issues/18) and an [open chatroom](https://spectrum.chat/covid19-scenarios/general/questions-discussions~8d49f461-a890-4beb-84f7-2d6ed0ae503a) set up for both scientists and non-scientists to ask questions and post ideas, which I find really nice of them!
 
-![COVID-19 Scenarios](../public/static/images/notes/coronavirus-open-source/scenarios.png)
+![COVID-19 Scenarios](./scenarios.png)
 
 ## [Corona Data Scraper](https://coronadatascraper.com/#home) <OctocatLink repo="lazd/coronadatascraper" />
 
 Similar to the [COVID Tracking Project](https://covidtracking.com/) above, the [Corona Data Scraper](https://coronadatascraper.com/#home) has set up an automated process to scrape verified data from across the web to form massive CSV spreadsheets and JSON objects. They even [rate the quality](https://github.com/lazd/coronadatascraper#source-rating) of each source to prioritize data accordingly.
 
-![Corona Data Scraper](../public/static/images/notes/coronavirus-open-source/coronadatascraper.png)
+![Corona Data Scraper](./coronadatascraper.png)
 
 ## [Folding@home](https://foldingathome.org/covid19/) <OctocatLink repo="FoldingAtHome/coronavirus" />
 
@@ -93,10 +91,10 @@ You can [download their software here](https://foldingathome.org/start-folding/)
 
 <Video
   src={{
-    webm: "/static/images/notes/coronavirus-open-source/folding.webm",
-    mp4: "/static/images/notes/coronavirus-open-source/folding.mp4",
+    webm: "/static/coronavirus-open-source/folding.webm",
+    mp4: "/static/coronavirus-open-source/folding.mp4",
   }}
-  poster="/static/images/notes/coronavirus-open-source/folding-thumb.png"
+  poster="/static/coronavirus-open-source/folding-thumb.png"
   autoplay
 />
 
@@ -104,6 +102,6 @@ You can [download their software here](https://foldingathome.org/start-folding/)
 
 To wrap this list up, I thought I'd include [yet another API](https://github.com/ExpDev07/coronavirus-tracker-api) fed by multiple data sources that you can use to create your own open-source project if any of these inspired you. This one is incredibly flexible in terms of [query parameters and endpoints](https://github.com/ExpDev07/coronavirus-tracker-api#api-endpoints) but they all return simple JSON responses like we all know and love.
 
-![Coronavirus Tracker API](../public/static/images/notes/coronavirus-open-source/tracker-api.png)
+![Coronavirus Tracker API](./tracker-api.png)
 
 ### Stay safe (and [home](https://staythefuckhome.com/ "One last time...")), friends! ❤️

notes/css-waving-hand-emoji/index.mdx

@@ -1,15 +1,12 @@
----
-title: "Animated Waving Hand Emoji 👋 Using CSS"
-date: 2019-04-17 14:20:10-0400
-description: "How to make the 👋 waving hand emoji actually wave using pure CSS animation!"
-tags:
-  - CSS
-  - Animation
-  - Emoji
-  - Keyframes
-  - Cool Tricks
-image: "/static/images/notes/css-waving-hand-emoji/codepen.png"
----
+import featuredImage from "./codepen.png";
+
+export const frontmatter = {
+  title: "Animated Waving Hand Emoji 👋 Using CSS",
+  date: "2019-04-17 14:20:10-0400",
+  description: "How to make the 👋 waving hand emoji actually wave using pure CSS animation!",
+  tags: ["CSS", "Animation", "Emoji", "Keyframes", "Cool Tricks"],
+  image: featuredImage.src,
+};
 
 ## Howdy, friends! 👋
 

notes/dark-mode/index.mdx

@@ -1,15 +1,9 @@
----
-title: "How To: Add Dark Mode to a Website 🌓"
-date: 2021-10-15 08:56:33-0400
-description: "Simple dark mode switching using local storage, OS preference detection, and minimal JavaScript."
-tags:
-  - JavaScript
-  - NPM
-  - CSS
-  - Dark Mode
-  - How To
-  - Tutorial
----
+export const frontmatter = {
+  title: "How To: Add Dark Mode to a Website 🌓",
+  date: "2021-10-15 08:56:33-0400",
+  description: "Simple dark mode switching using local storage, OS preference detection, and minimal JavaScript.",
+  tags: ["JavaScript", "NPM", "CSS", "Dark Mode", "How To", "Tutorial"],
+};
 
 Love it or hate it, it seems that the [dark mode fad](https://en.wikipedia.org/wiki/Light-on-dark_color_scheme) is here to stay, especially now that more and more devices have [OLED screens](https://www.macrumors.com/2019/10/21/ios-13-dark-mode-extends-iphone-battery-life/) that display true blacks... which means that these trendsetters might go blind from your site's insanely white background if you're behind the curve and don't offer your own dark mode.
 

notes/dropping-dropbox/index.mdx

@@ -1,19 +1,17 @@
----
-title: "Why I'm Dropping Dropbox"
-date: 2019-11-20 17:22:43-0400
-description: "I'm finally canceling my Dropbox Pro account and moving to iCloud Drive for synchronized cloud storage."
-tags:
-  - Cloud Storage
-  - Dropbox
-  - Apple
-  - iCloud Drive
-  - Betrayal
-image: "/static/images/notes/dropping-dropbox/email.png"
----
+import featuredImage from "./email.png";
+
+export const frontmatter = {
+  title: "Why I'm Dropping Dropbox",
+  date: "2019-11-20 17:22:43-0400",
+  description:
+    "I'm finally canceling my Dropbox Pro account and moving to iCloud Drive for synchronized cloud storage.",
+  tags: ["Cloud Storage", "Dropbox", "Apple", "iCloud Drive", "Betrayal"],
+  image: featuredImage.src,
+};
 
 I've been a loyal Dropbox user since its inception as a [Y Combinator startup](https://www.ycombinator.com/apply/dropbox/) ten years ago. Having a folder on all of my devices that instantly synchronized with each other was a game-changer for me, and I grew dependent on it more and more as they gave out free storage like candy — 48 GB for having a Samsung Chromebook, 1 GB for "Posting \<3 to Twitter," and so on — until I needed to upgrade to Dropbox Pro. But this month I canceled my Pro subscription after a few too many strikes.
 
-![Deleting 401,907 files from Dropbox... 😬](../public/static/images/notes/dropping-dropbox/email.png)
+![Deleting 401,907 files from Dropbox... 😬](./email.png)
 
 ## Five strikes, you're out...
 
@@ -30,21 +28,21 @@ Decisions made by the top folks at Dropbox gave me an increasingly sour taste in
 
 <Video
   src={{
-    webm: "/static/images/notes/dropping-dropbox/cancel.webm",
-    mp4: "/static/images/notes/dropping-dropbox/cancel.mp4",
+    webm: "/static/dropping-dropbox/cancel.webm",
+    mp4: "/static/dropping-dropbox/cancel.mp4",
   }}
-  poster="/static/images/notes/dropping-dropbox/cancel.png"
+  poster="/static/dropping-dropbox/cancel.png"
 />
 
 ## Seeking an alternative...
 
 The infamous [Apple Ecosystem™](https://medium.com/swlh/the-irresistible-lure-of-the-apple-ecosystem-81bf8d66294a) has held me firmly in its grasp for over a decade now, and the main requirement of a replacement cloud storage service for me was smooth interoperability between my MacBook, iPhone, and iPad.
 
-![iCloud Drive storage](../public/static/images/notes/dropping-dropbox/icloud-storage.png)
+![iCloud Drive storage](./icloud-storage.png)
 
 I've never been a proponent of leaving all your eggs in one basket. But it's hard to ignore the convenience of Apple's streamlined (and [finally](https://www.imore.com/developers-encounter-major-icloud-issues-ios-13-beta) reliable) [**iCloud Drive**](https://www.apple.com/icloud/), which is already installed on all of my devices (and actually cheaper than Dropbox gigabyte-for-gigabyte, at \$9.99/month for 2 TB). In fact, it's nearly invisible on macOS: I can simply save files in my Documents or Desktop folders as I always have and they're uploaded in the background. Git repositories now sync just fine and my files reappeared without a hitch after I recently formatted my Mac.
 
-![iCloud Drive](../public/static/images/notes/dropping-dropbox/icloud-drive.png)
+![iCloud Drive](./icloud-drive.png)
 
 I still use (and highly recommend) [**Backblaze**](https://www.backblaze.com/) ([referral link](https://secure.backblaze.com/r/00x84e)) to backup my home folder and add a second layer of redundancy to storing all of my most important files on ["someone else's computer."](https://www.zdnet.com/article/stop-saying-the-cloud-is-just-someone-elses-computer-because-its-not/) And as long as I remember to plug in my external SSD every so often, they're also backed up locally via [Time Machine](https://support.apple.com/en-us/HT201250).
 

notes/finding-candidates-subdomain-takeovers/index.mdx

@@ -1,22 +1,20 @@
----
-title: "Finding Candidates for Subdomain Takeovers"
-date: 2019-03-10 11:19:48-0400
-description: "A subdomain takeover occurs when a subdomain points to a shared hosting account that is abandoned by its owner, leaving the endpoint available to claim for yourself."
-tags:
-  - Pentesting
-  - Infosec
-  - Subdomain Takeover
-  - Bug Bounty
-  - Tutorial
-image: "/static/images/notes/finding-candidates-subdomain-takeovers/hackerone-2.png"
----
+import featuredImage from "./hackerone-2.png";
+
+export const frontmatter = {
+  title: "Finding Candidates for Subdomain Takeovers",
+  date: "2019-03-10 11:19:48-0400",
+  description:
+    "A subdomain takeover occurs when a subdomain points to a shared hosting account that is abandoned by its owner, leaving the endpoint available to claim for yourself.",
+  tags: ["Pentesting", "Infosec", "Subdomain Takeover", "Bug Bounty", "Tutorial"],
+  image: featuredImage.src,
+};
 
 A **subdomain takeover** occurs when a subdomain (like _example_.jarv.is) points to a shared hosting account that is abandoned by its owner, leaving the endpoint available to claim for yourself.
 
 Not only are takeovers a fun way to dip your toes into [penetration testing](https://www.cloudflare.com/learning/security/glossary/what-is-penetration-testing/), but they can also be incredibly lucrative thanks to [bug bounty programs](https://en.wikipedia.org/wiki/Bug_bounty_program) on services like [HackerOne](https://hackerone.com/hacktivity?order_direction=DESC&order_field=popular&filter=type%3Aall&querystring=subdomain%20takeover) and [Bugcrowd](https://bugcrowd.com/programs), where corporations pay pentesters for their discoveries.
 
 ![Huge rewards for subdomain takeovers on
-  HackerOne!](../public/static/images/notes/finding-candidates-subdomain-takeovers/hackerone-2.png)
+  HackerOne!](./hackerone-2.png)
 
 For a deep dive on the implications of takeovers, which can be a pretty serious vector of attack for malicious actors to obtain information from users of the targeted company, [Patrik Hudak](https://twitter.com/0xpatrik) wrote a [great post here](https://0xpatrik.com/subdomain-takeover/). Definitely take some time to skim through it and come back here when you're ready to hunt for a potential takeover yourself.
 

notes/github-actions/index.mdx

@@ -1,23 +1,20 @@
----
-title: "I ❤️ GitHub Actions"
-date: 2019-10-25 13:58:39-0400
-description: "I've found a new hobby of making cool GitHub Actions, the latest tool in the CI world. Here's why."
-tags:
-  - DevOps
-  - GitHub
-  - Continuous Integration
-  - Docker
-  - Open Source
-image: "/static/images/notes/github-actions/actions-flow.png"
----
+import featuredImage from "./actions-flow.png";
 
-![Example workflow for a GitHub Action](../public/static/images/notes/github-actions/actions-flow.png)
+export const frontmatter = {
+  title: "I ❤️ GitHub Actions",
+  date: "2019-10-25 13:58:39-0400",
+  description: "I've found a new hobby of making cool GitHub Actions, the latest tool in the CI world. Here's why.",
+  tags: ["DevOps", "GitHub", "Continuous Integration", "Docker", "Open Source"],
+  image: featuredImage.src,
+};
+
+![Example workflow for a GitHub Action](./actions-flow.png)
 
 Since being accepted into the beta for [GitHub Actions](https://github.com/features/actions) a few months ago, I've found a new side hobby of whipping up new (and ideally creative) actions for anybody to add to their CI pipeline. Actions are modular steps that interact with a GitHub repository and can be coded with [Docker](https://github.com/actions/hello-world-docker-action) or [JavaScript/Node](https://github.com/actions/hello-world-javascript-action) — and either way, they can be as [simple](https://github.com/jakejarvis/wait-action) or as [complex](https://github.com/jakejarvis/lighthouse-action) as you want. But in both cases, they're incredibly fun to make and the results always scratch my itch for instant gratification.
 
 My favorite so far is my [Lighthouse Audit action](https://github.com/jakejarvis/lighthouse-action), which spins up a headless Google Chrome instance in an Ubuntu container and runs [Google's Lighthouse tool](https://developers.google.com/web/tools/lighthouse), which scores webpages on performance, accessibility, SEO, etc. and provides actual suggestions to improve them. It's a perfect example of the power of combining containers with Git workflows.
 
-![The results of a Lighthouse audit on this website, after running tests in a headless Google Chrome.](../public/static/images/notes/github-actions/lighthouse-output.png)
+![The results of a Lighthouse audit on this website, after running tests in a headless Google Chrome.](./lighthouse-output.png)
 
 It's also been a fantastic avenue to dip my feet into the collaborative nature of GitHub and the open-source community. I've made some small apps in the past but these are the first projects where I'm regularly receiving new issues to help out with and impressive pull requests to merge. It's a great feeling!
 
@@ -49,7 +46,7 @@ Using an action is also surprisingly simple, and more intuitive than [Travis CI]
 
 For a more complex example, when I forked [Hugo](https://github.com/gohugoio/hugo) (the static site generator used to build this website) to make some small personalized changes, I also translated [their `.travis.yml` file](https://github.com/gohugoio/hugo/blob/master/.travis.yml) into a [`workflow.yml` file](https://github.com/jakejarvis/hugo-custom/blob/master/.github/workflows/workflow.yml) for practice, which simultaneously runs comprehensive unit tests on **three operating systems** (Ubuntu 18.04, Windows 10, and macOS 10.14) with the latest two Go versions _each!_ If the tests are all successful, it builds a Docker image and pushes it to both [Docker Hub](https://hub.docker.com/r/jakejarvis/hugo-custom) and the [GitHub Package Registry](https://github.com/jakejarvis/hugo-custom/packages) (also [in beta](https://github.com/features/package-registry)).
 
-![Build logs for my Hugo fork](../public/static/images/notes/github-actions/hugo-logs.png)
+![Build logs for my Hugo fork](./hugo-logs.png)
 
 Then another workflow, which [lives in this website's repository](https://github.com/jakejarvis/jarv.is/blob/master/.github/workflows/gh-pages.yml), pulls that Docker image, builds the Hugo site, and pushes it to GitHub Pages. All astoundingly fast. All for free.
 

notes/github-rename-master/index.mdx

@@ -1,18 +1,15 @@
----
-title: "How To: Safely Rename `master` Branch on GitHub ✊🏾"
-date: 2020-06-28 09:28:52-0400
-description: 'Some of the most popular open-source projects are renaming their default branch from "master" on GitHub. Here''s how to do so, and safely.'
-tags:
-  - How To
-  - Tutorial
-  - Git
-  - GitHub
-  - Open Source
-  - Black Lives Matter
-image: "/static/images/notes/github-rename-master/github-default.png"
----
+import featuredImage from "./blm-topic.png";
 
-![Black lives matter.](../public/static/images/notes/github-rename-master/blm-topic.png)
+export const frontmatter = {
+  title: "How To: Safely Rename `master` Branch on GitHub ✊🏾",
+  date: "2020-06-28 09:28:52-0400",
+  description:
+    'Some of the most popular open-source projects are renaming their default branch from "master" on GitHub. Here\'s how to do so, and safely.',
+  tags: ["How To", "Tutorial", "Git", "GitHub", "Open Source", "Black Lives Matter"],
+  image: featuredImage.src,
+};
+
+![Black lives matter.](./blm-topic.png)
 
 In the midst of this year's long-overdue support of the [**Black Lives Matter**](https://blacklivesmatters.carrd.co/) movement and calls to action in the US and around the world, a [new spotlight](https://mail.gnome.org/archives/desktop-devel-list/2019-May/msg00066.html) has been placed on unchecked invocations of racially charged language in the computer science world, no matter how big or small — like the long-standing and, until recently, widely accepted terms ["master" and "slave"](https://tools.ietf.org/id/draft-knodel-terminology-00.html#master-slave) as an oppressive metaphor for ownership/importance.
 
@@ -53,7 +50,7 @@ You can verify this worked by running `git branch -r`. You should see something
 
 Setting the default branch remotely is the only step that can't be done on the command line (although you can technically [use the GitHub API](https://github.com/erbridge/github-branch-renamer)). Head to **Settings → Branches** on GitHub to [change the default branch](https://help.github.com/en/github/collaborating-with-issues-and-pull-requests/changing-the-base-branch-of-a-pull-request).
 
-![Changing the default branch of a GitHub repository](../public/static/images/notes/github-rename-master/github-default.png)
+![Changing the default branch of a GitHub repository](./github-default.png)
 
 ### 4. Delete the old `master` branch on GitHub:
 
@@ -71,7 +68,7 @@ Do a quick search of your codebase for `master` to manually replace any dead ref
 
 Pay attention to CI files — `.travis.yml`, `.github/workflows/`, `.circleci/config.yml`, etc. — and make sure there aren't any external services relying on `master` being there. For example, I almost forgot to change the branch [Netlify triggers auto-deploys](https://docs.netlify.com/site-deploys/overview/#branches-and-deploys) from to build this site:
 
-![Netlify auto-deployment branch setting](../public/static/images/notes/github-rename-master/netlify-deploy.png)
+![Netlify auto-deployment branch setting](./netlify-deploy.png)
 
 ~~Unfortunately, GitHub won't redirect links containing `master` to the new branch (as of now), so look for any [github.com](https://github.com/) URLs as well.~~
 

notes/how-to-backup-linux-server/index.mdx

@@ -1,18 +1,15 @@
----
-title: "How To: Automatically Backup a Linux VPS to a Separate Cloud Storage Service"
-date: 2019-06-09 19:03:10-0400
-description: "A walkthrough for backing up a Linux server to an external storage provider like Amazon S3 automatically."
-tags:
-  - How To
-  - Tutorial
-  - Servers
-  - Backups
-  - Linux
-  - Restic
-image: "/static/images/notes/how-to-backup-linux-server/apocalypse.png"
----
+import featuredImage from "./apocalypse.png";
 
-![The Cloud-pocalypse: Coming soon(er than you think) to a server near you.](../public/static/images/notes/how-to-backup-linux-server/apocalypse.png)
+export const frontmatter = {
+  title: "How To: Automatically Backup a Linux VPS to a Separate Cloud Storage Service",
+  date: "2019-06-09 19:03:10-0400",
+  description:
+    "A walkthrough for backing up a Linux server to an external storage provider like Amazon S3 automatically.",
+  tags: ["How To", "Tutorial", "Servers", "Backups", "Linux", "Restic"],
+  image: featuredImage.src,
+};
+
+![The Cloud-pocalypse: Coming soon(er than you think) to a server near you.](./apocalypse.png)
 
 Last month, the founder of [a small startup](https://raisup.com/) got quite a bit of [attention on Twitter](https://twitter.com/w3Nicolas/status/1134529316904153089) (and [Hacker News](https://news.ycombinator.com/item?id=20064169)) when he called out [DigitalOcean](https://www.digitalocean.com/) who, in his words, "killed" his company. Long story short: DigitalOcean's automated abuse system flagged the startup's account after they spun up about ten powerful droplets for some CPU-intensive jobs and deleted them shortly after — which is literally **the biggest selling point** of a "servers by the hour" company like DigitalOcean, by the way — and, after replying to the support ticket, an unsympathetic customer support agent [declined to reactivate](https://twitter.com/w3Nicolas/status/1134529372172509184) the account without explanation. [Nicolas](https://twitter.com/w3Nicolas) had no way of even accessing his data, turning the inconvenient but trivial task of migrating servers into a potentially fatal situation for his company.
 

notes/how-to-pull-request-fork-github/index.mdx

@@ -1,16 +1,13 @@
----
-title: "How To: Fork a GitHub Repository & Submit a Pull Request"
-date: 2019-04-09 02:17:03-0400
-description: "Walkthrough of forking a GitHub repository, cloning it, committing your changes to a new branch, and pushing it back upstream."
-tags:
-  - How To
-  - Tutorial
-  - Git
-  - Pull Request
-  - Open Source
-  - GitHub
-image: "/static/images/notes/how-to-pull-request-fork-github/step7-2.png"
----
+import featuredImage from "./step7-2.png";
+
+export const frontmatter = {
+  title: "How To: Fork a GitHub Repository & Submit a Pull Request",
+  date: "2019-04-09 02:17:03-0400",
+  description:
+    "Walkthrough of forking a GitHub repository, cloning it, committing your changes to a new branch, and pushing it back upstream.",
+  tags: ["How To", "Tutorial", "Git", "Pull Request", "Open Source", "GitHub"],
+  image: featuredImage.src,
+};
 
 <svg width="150" height="150" viewBox="0 0 40 40" style={{ float: "right", marginBottom: "6px", marginLeft: "12px" }}>
   <path d="M6.5 35v-4.8c0-5.4 4.3-9.7 9.7-9.7h7.6c5.4 0 9.7-4.3 9.7-9.7V6M6.5 32.5v-26" fill="none" stroke="#a3b7cc" />
@@ -34,7 +31,7 @@ Starting from the very beginning, we'll fork an existing repository to our accou
 
 Assuming you're using GitHub, this step is easy. Just find the repository you're contributing to and press the Fork button in the upper right. This will create an exact copy of the repository (and all of its branches) under your own username.
 
-![Step 1](../public/static/images/notes/how-to-pull-request-fork-github/step1.png)
+![Step 1](./step1.png)
 
 ## 2. Clone your new fork locally
 
@@ -44,7 +41,7 @@ GitHub will automatically redirect you to the forked repository under your usern
 git clone git@github.com:jakejarvis/react-native.git
 ```
 
-![Step 2](../public/static/images/notes/how-to-pull-request-fork-github/step2.png)
+![Step 2](./step2.png)
 
 ## 3. Track the original repository as a remote of the fork
 
@@ -92,9 +89,9 @@ git push -u origin fix-readme-typo
 
 You're now all ready to submit the improvement you've made to the project's maintainers for approval. Head over to the original repositories Pull Requests tab, and you should see an automatic suggestion from GitHub to create a pull request from your new branch.
 
-![Step 7.1](../public/static/images/notes/how-to-pull-request-fork-github/step7-1.png)
+![Step 7.1](./step7-1.png)
 
-![Step 7.2](../public/static/images/notes/how-to-pull-request-fork-github/step7-2.png)
+![Step 7.2](./step7-2.png)
 
 ---
 

notes/how-to-shrink-linux-virtual-disk-vmware/index.mdx

@@ -1,17 +1,14 @@
----
-title: "How To: Shrink a Linux Virtual Machine Disk with VMware"
-date: 2018-12-04 19:10:04-0400
-description: "VMware is bad at shrinking Linux VMs when space is freed up. How to optimize and shrink virtual disks."
-tags:
-  - How To
-  - Linux
-  - Tutorial
-  - Virtual Machines
-  - VMware
-image: "/static/images/notes/how-to-shrink-linux-virtual-disk-vmware/screen-shot-2018-12-07-at-2-04-04-pm.png"
----
+import featuredImage from "./screen-shot-2018-12-07-at-2-04-04-pm.png";
 
-![`df -dh` = WTF](../public/static/images/notes/how-to-shrink-linux-virtual-disk-vmware/screen-shot-2018-12-07-at-2-04-04-pm.png)
+export const frontmatter = {
+  title: "How To: Shrink a Linux Virtual Machine Disk with VMware",
+  date: "2018-12-04 19:10:04-0400",
+  description: "VMware is bad at shrinking Linux VMs when space is freed up. How to optimize and shrink virtual disks.",
+  tags: ["How To", "Linux", "Tutorial", "Virtual Machines", "VMware"],
+  image: featuredImage.src,
+};
+
+![`df -dh` = WTF](./screen-shot-2018-12-07-at-2-04-04-pm.png)
 
 **[VMware Workstation](https://www.vmware.com/products/workstation-pro.html)** and **[Fusion](https://www.vmware.com/products/fusion.html)** normally work hard to minimize the size of virtual hard disks for optimizing the amount of storage needed on your host machine . On Windows virtual machines, [VMware has a "clean up" function](https://docs.vmware.com/en/VMware-Fusion/11/com.vmware.fusion.using.doc/GUID-6BB29187-F47F-41D1-AD92-1754036DACD9.html), which detects newly unused space and makes the size of the virtual hard disk smaller accordingly. You'll notice that even if you create a virtual machine with a capacity of 60 GB, for example, the actual size of the VMDK file will dynamically resize to fit the usage of the guest operating system. 60 GB is simply the maximum amount of storage allowed; if your guest operating system and its files amount to 20 GB, the VMDK file will simply be 20 GB.
 
@@ -71,7 +68,7 @@ VMware on macOS makes this a little tricky, since it packages VMs in what looks
 
 We need to right click on the .vmwarevm "file," and select **Show Package Contents** to see what's really in there. You should see the actual .VMDK file sitting there — normally we're looking for the plain VMDK file (named _Virtual Disk.vmdk_ by default) without a bunch of numbers after it, but if you have snapshots associated with your VM, this might not be the file we actually want. But run the command below with it anyways, and the output will tell you if you need to use a different file.
 
-![Finding .vmwarevm in Finder](../public/static/images/notes/how-to-shrink-linux-virtual-disk-vmware/screen-shot-2018-12-07-at-1-58-42-pm.png)
+![Finding .vmwarevm in Finder](./screen-shot-2018-12-07-at-1-58-42-pm.png)
 
 Now, we're going to run our final command in our **host** terminal, so open that up. Linux installations of VMware Workstation should have a simple map to the _vmware-vdiskmanager_ utility that you can run anywhere, but on macOS we need to tell it exactly where that's located: in the Applications folder, where Fusion is installed.
 

notes/hugo-to-nextjs/index.mdx

@@ -1,17 +1,15 @@
----
-title: "Revenge of the JavaScript: Moving from Hugo to Next.js"
-date: 2022-04-07 10:53:33-0400
-description: "The next chapter in this website's history of overengineering, from static HTML with Hugo to React everywhere with Next.js."
-tags:
-  - React
-  - JavaScript
-  - Next.js
-  - Hugo
-  - Meta
-image: "/static/images/notes/hugo-to-nextjs/web-vitals.png"
----
+import featuredImage from "./web-vitals.png";
 
-![Pull Request #711](../public/static/images/notes/hugo-to-nextjs/pr.png)
+export const frontmatter = {
+  title: "Revenge of the JavaScript: Moving from Hugo to Next.js",
+  date: "2022-04-07 10:53:33-0400",
+  description:
+    "The next chapter in this website's history of overengineering, from static HTML with Hugo to React everywhere with Next.js.",
+  tags: ["React", "JavaScript", "Next.js", "Hugo", "Meta"],
+  image: featuredImage.src,
+};
+
+![Pull Request #711](./pr.png)
 
 I'll say right off the bat: this website has a _loooong_ history of going overboard with its tech stack. I use this domain as a vehicle to [learn new things](https://www.jvt.me/talks/overengineering-your-personal-website/), and given [how frequently](https://stackoverflow.blog/2018/01/11/brutal-lifecycle-javascript-frameworks/) the tides turn in the frontend development waters these days, things can (and did) get messy pretty quickly.
 
@@ -30,7 +28,7 @@ Enter [**Next.js**](https://nextjs.org/), which caught my eye over other JS-cent
 - **Fewer `devDependencies` and consolidated build tooling.** I don't want to look at another Gulp task for as long as possible. Next's [built-in](https://nextjs.org/docs/api-reference/next.config.js/custom-webpack-config) Webpack and Babel support has come in clutch here.
 - **Same (or better) [Lighthouse scores](https://web.dev/learn/#lighthouse).** The heavier load of JS has certainly affected performance a bit, but any modern browser can easily keep up with any React code I'll be using at this scale. And because of Next's static page generation (and [next-seo](https://github.com/garmeeh/next-seo)) nothing has changed in the realm of SEO.
 
-![Vercel web vitals analytics](../public/static/images/notes/hugo-to-nextjs/web-vitals.png)
+![Vercel web vitals analytics](./web-vitals.png)
 
 ## Things I still miss from Hugo
 

notes/millenial-with-hillary-clinton/index.mdx

@@ -1,17 +1,16 @@
----
-title: "Why This Millennial Is With Hillary Clinton Now — and Why We All Need To Be In November"
-date: 2016-02-29 00:10:26-0400
-description: 'I am a 24-year-old "millennial" and I passionately support Hillary Clinton for the 45th President of the United States. Yes, we exist.'
-tags:
-  - 2016 Presidential Election
-  - Bernie Sanders
-  - Hillary Clinton
-  - Politics
-image: "/static/images/notes/millenial-with-hillary-clinton/24707394571_0818d4ab83_o-1-copy.jpg"
-noComments: true
----
+import featuredImage from "./24707394571_0818d4ab83_o-1-copy.jpg";
 
-![Hillary for New Hampshire Winter Fellows with Hillary Clinton in Derry, NH (February 3, 2016)](../public/static/images/notes/millenial-with-hillary-clinton/24707394571_0818d4ab83_o-1-copy.jpg)
+export const frontmatter = {
+  title: "Why This Millennial Is With Hillary Clinton Now — and Why We All Need To Be In November",
+  date: "2016-02-29 00:10:26-0400",
+  description:
+    'I am a 24-year-old "millennial" and I passionately support Hillary Clinton for the 45th President of the United States. Yes, we exist.',
+  tags: ["2016 Presidential Election", "Bernie Sanders", "Hillary Clinton", "Politics"],
+  image: featuredImage.src,
+  noComments: true,
+};
+
+![Hillary for New Hampshire Winter Fellows with Hillary Clinton in Derry, NH (February 3, 2016)](./24707394571_0818d4ab83_o-1-copy.jpg)
 
 ## Keeping in mind the big picture...
 
@@ -23,7 +22,7 @@ My goal here isn't to convince every Bernie believer to jump ship and support he
 
 After working for months as a fellow on Hillary's campaign in New Hampshire leading up to the first primary in the country, I could feed you all the standard campaign talking points in my sleep: After graduating from Yale Law she went to work at the [Children's Defense Fund](https://www.childrensdefense.org/), not a high-paying New York law firm. She [went undercover](https://www.nytimes.com/2015/12/28/us/politics/how-hillary-clinton-went-undercover-to-examine-race-in-education.html?_r=0) in Alabama to investigate discrimination in public schools. She [got juveniles out of adult prisons](https://www.huffingtonpost.com/entry/huffpost-criminal-justice-survey-democratics_us_56bb85eae4b0b40245c5038b). She [gave 8 million children healthcare](https://www.hillaryclinton.com/briefing/factsheets/2015/12/23/hillary-clintons-lifelong-fight-for-quality-affordable-health-care-for-all-americans/). But there's just one thing that, for some reason, is hard for people to believe: at her core she is a good, caring, and loving person who has had only selfless intentions her entire life. I promise you.
 
-![The best birthday gift. 🎉](../public/static/images/notes/millenial-with-hillary-clinton/9e58a-1bvweqv_ve2_c1tw5-ihrhw.jpg)
+![The best birthday gift. 🎉](./9e58a-1bvweqv_ve2_c1tw5-ihrhw.jpg)
 
 I had the incredible chance to meet Hillary the weekend before the New Hampshire primary. Her motorcade plowed through a quiet suburb in Manchester around noon and she hopped out to go knock on the doors of some lucky families. As neighbors started coming out of their houses to shake her hand, I couldn't restrain myself from at least trying to get close and wave hello. (By the way, it's amazing how casual the people in New Hampshire are about meeting presidential candidates.)
 
@@ -45,9 +44,8 @@ As [Bill Maher](https://medium.com/u/cdc04a9799f6) (an avid Bernie supporter) [s
 
 <Video
   src={{
-    webm: "/static/images/hillary/convention-720p.webm",
-    mp4: "/static/images/hillary/convention-720p.mp4",
-    vtt: "/static/images/hillary/subs.en.vtt",
+    webm: "/static/hillary/convention-720p.webm",
+    mp4: "/static/hillary/convention-720p.mp4",
+    vtt: "/static/hillary/subs.en.vtt",
   }}
-  poster="/static/images/hillary/thumb.png"
 />

notes/my-first-code/index.mdx

@@ -1,19 +1,17 @@
----
-title: "My First Code: Jake's Bulletin Board"
-date: 2019-10-01 08:34:25-0400
-description: "My first full coding project ever: a PHP bulletin board creatively titled Jake's Bulletin Board, circa 2003."
-tags:
-  - Hello World
-  - Baby's First PHP
-  - Nostalgia
-  - Vintage Code
-  - Awesome List
-image: "/static/images/notes/my-first-code/jbb-screen1.png"
----
+import featuredImage from "./jbb-screen1.png";
 
-![Awesome First Code on GitHub](../public/static/images/notes/my-first-code/netscape.png)
+export const frontmatter = {
+  title: "My First Code: Jake's Bulletin Board",
+  date: "2019-10-01 08:34:25-0400",
+  description:
+    "My first full coding project ever: a PHP bulletin board creatively titled Jake's Bulletin Board, circa 2003.",
+  tags: ["Hello World", "Baby's First PHP", "Nostalgia", "Vintage Code", "Awesome List"],
+  image: featuredImage.src,
+};
 
-![Code Quality: A for effort](../public/static/images/notes/my-first-code/badges.png)
+![Awesome First Code on GitHub](./netscape.png)
+
+![Code Quality: A for effort](./badges.png)
 
 I recently published my terrible, horrible, no good, very bad [first HTML site](https://jakejarvis.github.io/my-first-website/) and [first PHP project](https://github.com/jakejarvis/jbb#readme) ever and developed a new addiction to Web 1.0 nostalgia, fed by others who were brave enough to do the same.
 
@@ -23,7 +21,7 @@ Hopefully we can all look back at our first projects and be proud of how far we'
 
 ---
 
-![Jake's Bulletin Board](../public/static/images/notes/my-first-code/jbb-logo.png)
+![Jake's Bulletin Board](./jbb-logo.png)
 
 Aside from my [first HTML creation](https://jakejarvis.github.io/my-first-website/) (circa 2001), my first real coding project was in 2003: a PHP 4 masterpiece creatively titled **Jake's Bulletin Board**. I've published the [source code in full on GitHub](https://github.com/jakejarvis/jbb) for your viewing pleasure and highlighted the best/worst parts below.
 
@@ -152,10 +150,10 @@ while ($topic = mysql_fetch_object($result30)) {
 
 The installation "wizard" (that's the joke, I presume...) ([sql_submit.php](https://github.com/jakejarvis/jbb/blob/87b606797414b2fe563af85e269566fc5e076cc5/setup/sql_submit.php))
 
-![JBB Installation Wizard](../public/static/images/notes/my-first-code/jbb-screen1.png)
+![JBB Installation Wizard](./jbb-screen1.png)
 
 And finally, JBB's actual interface... or literally as much of it as I could get to function in 2019. ([index.php](https://github.com/jakejarvis/jbb/blob/87b606797414b2fe563af85e269566fc5e076cc5/index.php))
 
-![JBB Homepage](../public/static/images/notes/my-first-code/jbb-screen3.png)
+![JBB Homepage](./jbb-screen3.png)
 
-![JBB Post](../public/static/images/notes/my-first-code/jbb-screen4.png)
+![JBB Post](./jbb-screen4.png)

notes/netlify-analytics-review/index.mdx

@@ -1,20 +1,17 @@
----
-title: "Netlify Analytics Review"
-date: 2019-11-13T08:21:22-0500
-description: "Netlify has released Netlify Analytics, a tracking tool that's the only one of its kind, prioritizing privacy and speed."
-tags:
-  - Review
-  - Analytics
-  - Data
-  - Netlify
-  - Privacy
-  - JAMStack
-image: "/static/images/notes/netlify-analytics-review/overview.png"
----
+import featuredImage from "./overview.png";
+
+export const frontmatter = {
+  title: "Netlify Analytics Review",
+  date: "2019-11-13T08:21:22-0500",
+  description:
+    "Netlify has released Netlify Analytics, a tracking tool that's the only one of its kind, prioritizing privacy and speed.",
+  tags: ["Review", "Analytics", "Data", "Netlify", "Privacy", "JAMStack"],
+  image: featuredImage.src,
+};
 
 I've been trying out [Netlify Analytics](https://www.netlify.com/products/analytics/) on this site for over a month now and have some quick thoughts about this unique offering in a world full of bloated and invasive tracking scripts.
 
-![Pageview charts on Netlify Analytics](../public/static/images/notes/netlify-analytics-review/pageviews-2.png)
+![Pageview charts on Netlify Analytics](./pageviews-2.png)
 
 ## 👍  Pros
 
@@ -46,7 +43,7 @@ Ad blocking is becoming commonplace on the World Wide Web with [over 25% of user
 
 That's a _huge_ chunk of visitors missing that Netlify Analytics gains back for you — and probably far more if your audience is tech-savvy like those reading this post likely are. (Some might even [block JavaScript completely](https://www.gnu.org/philosophy/javascript-trap.en.html) using extensions like [NoScript](https://addons.mozilla.org/en-US/firefox/addon/noscript/).)
 
-![Pageview and 404 tracking on Netlify Analytics](../public/static/images/notes/netlify-analytics-review/pages.png)
+![Pageview and 404 tracking on Netlify Analytics](./pages.png)
 
 Another tangential benefit you simply don't get from JavaScript-based tools like Google Analytics is the "Resources Not Found" box, which separates out URLs that resulted in a 404 Not Found error. Because of the 404 tracking, I discovered how many people were still subscribed to my posts via RSS from when I used WordPress _years_ ago, and I was able to redirect `/feed` and `/rss` to the new location.
 
@@ -62,7 +59,7 @@ It makes sense that Netlify needs to subsidize the cost of providing free enterp
 
 ### 📈  Accuracy
 
-![Referrer and bandwidth tracking on Netlify Analytics](../public/static/images/notes/netlify-analytics-review/sources-bandwidth.png)
+![Referrer and bandwidth tracking on Netlify Analytics](./sources-bandwidth.png)
 
 Clearly, as much as I wish they did, 60,000+ visitors didn't type my website directly into the URL bar in the past month. Some of my articles have been circulating on Hacker News, Reddit, Twitter, etc. — none of which have even made a blip on the dashboard.
 
@@ -74,7 +71,7 @@ One more note: since Netlify doesn't process IP addresses or user agents, bots c
 
 ### ⏱️  Historical Data
 
-![Overview of Netlify Analytics stats](../public/static/images/notes/netlify-analytics-review/overview.png)
+![Overview of Netlify Analytics stats](./overview.png)
 
 Trying out Netlify Analytics meant switching this site from [GitHub Pages](https://pages.github.com/) to Netlify — something I still have mixed feelings about. But if I had been on Netlify the entire time, I would have gotten thirty days of historical stats backfilled right off the bat, from before I even started paying for Analytics.
 

notes/presidential-candidates-404-pages/index.mdx

@@ -1,16 +1,14 @@
----
-title: "Ranking 2020 Presidential Candidates's 404 Pages"
-date: 2019-10-30 13:58:39-0400
-description: "Each of the 2020 presidential candidates's 404 Not Found pages, ranked."
-tags:
-  - Politics
-  - Campaign 2020
-  - Rankings
-  - Attempted Humor
-image: "/static/images/notes/presidential-candidates-404-pages/obama-laughing.jpg"
----
+import featuredImage from "./obama-laughing.jpg";
 
-![President Barack H. Obama, probably ranking some of these 404 pages.](../public/static/images/notes/presidential-candidates-404-pages/obama-laughing.jpg)
+export const frontmatter = {
+  title: "Ranking 2020 Presidential Candidates's 404 Pages",
+  date: "2019-10-30 13:58:39-0400",
+  description: "Each of the 2020 presidential candidates's 404 Not Found pages, ranked.",
+  tags: ["Politics", "Campaign 2020", "Rankings", "Attempted Humor"],
+  image: featuredImage.src,
+};
+
+![President Barack H. Obama, probably ranking some of these 404 pages.](./obama-laughing.jpg)
 
 Ever since [President Obama injected technology](https://arstechnica.com/information-technology/2012/11/built-to-win-deep-inside-obamas-campaign-tech/) into presidential politics in a historic way, one of the few bright spots of the incredibly long and exhausting race for me has been inspecting each candidate's campaign website. They end up revealing a great deal about how much each of them is willing to invest in the internet, and how young and innovative (and potentially funny) the staff members they attract are.
 
@@ -20,7 +18,7 @@ More recently, though, little-known hidden Easter eggs on ["404 Not Found"](http
 
 I'm a _huge_ sucker for Kate McKinnon's spot-on impression of Warren on Saturday Night Live. And [unfortunately](https://twitter.com/realdonaldtrump/status/1097116612279316480), seeing a campaign embrace SNL is like a breath of fresh air these days. [Watch all of the Kate McWarren videos so far here; you won't regret it.](https://www.nbc.com/saturday-night-live/cast/kate-mckinnon-15056/impersonation/elizabeth-warren-287903)
 
-![Elizabeth Warren](../public/static/images/notes/presidential-candidates-404-pages/warren.png)
+![Elizabeth Warren](./warren.png)
 
 ## 2. Bernie Sanders — [berniesanders.com](https://berniesanders.com/asdfasdf404/)
 
@@ -28,8 +26,8 @@ Although the designer who selected this GIF likely had _thousands_ of choices wh
 
 <Video
   src={{
-    webm: "/static/images/notes/presidential-candidates-404-pages/sanders.webm",
-    mp4: "/static/images/notes/presidential-candidates-404-pages/sanders.mp4",
+    webm: "/static/presidential-candidates-404-pages/sanders.webm",
+    mp4: "/static/presidential-candidates-404-pages/sanders.mp4",
   }}
   autoplay
 />
@@ -38,7 +36,7 @@ Although the designer who selected this GIF likely had _thousands_ of choices wh
 
 Uncle Joe has a nice and simple 404 page. I like it, along with the Ray-Bans and his choice of vanilla ice cream.
 
-![Joe Biden](../public/static/images/notes/presidential-candidates-404-pages/biden.png)
+![Joe Biden](./biden.png)
 
 ## 4. Beto O'Rourke — [betoorourke.com](https://betoorourke.com/asdfasdf404)
 
@@ -46,8 +44,8 @@ A ballsy move, considering Beto's infamous [DUI arrest](https://www.politifact.c
 
 <Video
   src={{
-    webm: "/static/images/notes/presidential-candidates-404-pages/orourke.webm",
-    mp4: "/static/images/notes/presidential-candidates-404-pages/orourke.mp4",
+    webm: "/static/presidential-candidates-404-pages/orourke.webm",
+    mp4: "/static/presidential-candidates-404-pages/orourke.mp4",
   }}
   autoplay
 />
@@ -58,8 +56,8 @@ Another clean and simple page with a top-notch GIF. It injected some emotion int
 
 <Video
   src={{
-    webm: "/static/images/notes/presidential-candidates-404-pages/harris.webm",
-    mp4: "/static/images/notes/presidential-candidates-404-pages/harris.mp4",
+    webm: "/static/presidential-candidates-404-pages/harris.webm",
+    mp4: "/static/presidential-candidates-404-pages/harris.mp4",
   }}
   autoplay
 />
@@ -68,55 +66,55 @@ Another clean and simple page with a top-notch GIF. It injected some emotion int
 
 I love, love, _love_ Pete's design for his whole campaign, and his beautiful 404 page is no exception. In case you didn't know, Pete for America has an entire ["Design Toolkit"](https://design.peteforamerica.com/) publicly available for all to view and use, with really cool and in-depth explanations for all of their choices — even their [color palette](https://design.peteforamerica.com/colors). Very progressive indeed.
 
-![Pete Buttigeg](../public/static/images/notes/presidential-candidates-404-pages/buttigeg.png)
+![Pete Buttigeg](./buttigeg.png)
 
 ## 7. Cory Booker — [corybooker.com](https://corybooker.com/asdfasdf404/)
 
 Love the photo choice. But although pains me to go against my Senator from my home state, I still _cannot stand_ his choice of font. Oh well, I guess that's now a criterion for running for president in 2020.
 
-![Cory Booker](../public/static/images/notes/presidential-candidates-404-pages/booker.png)
+![Cory Booker](./booker.png)
 
 ## 8. Andrew Yang — [yang2020.com](https://www.yang2020.com/asdfasdf404)
 
 Not sure if donating to Yang 2020 will help put a page at [yang2020.com/alsdjfzoif](https://www.yang2020.com/alsdjfzoif) — the actual URL I visited to grab this screenshot — but the Bitmoji Andrew looks pretty chill.
 
-![Andrew Yang](../public/static/images/notes/presidential-candidates-404-pages/yang.png)
+![Andrew Yang](./yang.png)
 
 ## 9. Amy Klobuchar — [amyklobuchar.com](https://amyklobuchar.com/asdfasdf404)
 
 This is the 404 page of someone who won't forget the [Midwestern roots](https://en.wikipedia.org/wiki/Uff_da) she comes from once she moves into the White House...or writes a memoir about her campaign from her Minnesota home.
 
-![Amy Klobuchar](../public/static/images/notes/presidential-candidates-404-pages/klobuchar.png)
+![Amy Klobuchar](./klobuchar.png)
 
 ## 10. Steve Bullock — [stevebullock.com](https://stevebullock.com/asdfasdf404)
 
 I'll never publicly say anything against a good Dad joke. This is no exception.
 
-![Steve Bullock](../public/static/images/notes/presidential-candidates-404-pages/bullock.png)
+![Steve Bullock](./bullock.png)
 
 ## 11. Michael Bennet — [michaelbennet.com](https://michaelbennet.com/asdfasdf404)
 
 Another quality Dad joke here.
 
-![Michael Bennet](../public/static/images/notes/presidential-candidates-404-pages/bennet.png)
+![Michael Bennet](./bennet.png)
 
 ## 12. John Delaney — [johndelaney.com](https://www.johndelaney.com/asdfasdf404)
 
 Yet another Dad joke? I honestly had the hardest time ranking these three.
 
-![John Delaney](../public/static/images/notes/presidential-candidates-404-pages/delaney.png)
+![John Delaney](./delaney.png)
 
 ## 13. Marianne Williamson — [marianne2020.com](https://www.marianne2020.com/asdfasdf404)
 
 A 404 page only a motivational author and speaker running for president could envision.
 
-![Marianne Williamson](../public/static/images/notes/presidential-candidates-404-pages/williamson.png)
+![Marianne Williamson](./williamson.png)
 
 ## 14. The Donald — [donaldjtrump.com](https://donaldjtrump.com/asdfasdf404)
 
 I guess this would be slightly humorous...four years ago. Time to move on from your middle-school crush, Donny.
 
-![Trump/Pence](../public/static/images/notes/presidential-candidates-404-pages/trump.png)
+![Trump/Pence](./trump.png)
 
 ---
 
@@ -126,16 +124,16 @@ These candidates haven't configured a custom 404 page, settling for the default
 
 ### 15. Julián Castro — [julianforthefuture.com](https://www.julianforthefuture.com/asdfasdf404)
 
-![Julián Castro](../public/static/images/notes/presidential-candidates-404-pages/castro.png)
+![Julián Castro](./castro.png)
 
 ### 16. Wayne Messam — [wayneforusa.com](https://wayneforusa.com/asdfasdf404)
 
-![Wayne Messam](../public/static/images/notes/presidential-candidates-404-pages/messam.png)
+![Wayne Messam](./messam.png)
 
 ### 17. Tulsi Gabbard — [tulsi2020.com](https://www.tulsi2020.com/asdfasdf404)
 
-![Tulsi Gabbard](/public/static/images/notes/presidential-candidates-404-pages/gabbard.png)
+![Tulsi Gabbard](./gabbard.png)
 
 ### 18. Joe Sestak — [joesestak.com](https://www.joesestak.com/asdfasdf404)
 
-![Joe Sestak](../public/static/images/notes/presidential-candidates-404-pages/sestak.png)
+![Joe Sestak](./sestak.png)

notes/security-headers-cloudflare-workers/index.mdx

@@ -1,23 +1,21 @@
----
-title: "Adding Security Headers Using Cloudflare Workers"
-date: 2019-02-28 03:18:10-0400
-description: "How to add important security headers to your website using Cloudflare Workers before delivering the response to the user."
-tags:
-  - Security
-  - HTTP Headers
-  - Cloudflare
-  - Hosting
-  - Tutorial
-image: "/static/images/notes/security-headers-cloudflare-workers/security-headers.png"
----
+import featuredImage from "./security-headers.png";
 
-![An A+ security grade for this website!](../public/static/images/notes/security-headers-cloudflare-workers/security-headers.png)
+export const frontmatter = {
+  title: "Adding Security Headers Using Cloudflare Workers",
+  date: "2019-02-28 03:18:10-0400",
+  description:
+    "How to add important security headers to your website using Cloudflare Workers before delivering the response to the user.",
+  tags: ["Security", "HTTP Headers", "Cloudflare", "Hosting", "Tutorial"],
+  image: featuredImage.src,
+};
+
+![An A+ security grade for this website!](./security-headers.png)
 
 In 2019, it's becoming more and more important to harden websites via HTTP response headers, which all modern browsers parse and enforce. Multiple standards have been introduced over the past few years to protect users from various attack vectors, including `Content-Security-Policy` for injection protection, `Strict-Transport-Security` for HTTPS enforcement, `X-XSS-Protection` for cross-site scripting prevention, `X-Content-Type-Options` to enforce correct MIME types, `Referrer-Policy` to limit information sent with external links, [and many, many more](https://www.netsparker.com/whitepaper-http-security-headers/).
 
 [Cloudflare Workers](https://www.cloudflare.com/products/cloudflare-workers/) are a great feature of [Cloudflare](https://www.cloudflare.com/) that allows you to modify responses on-the-fly between your origin server and the user, similar to [AWS Lambda](https://aws.amazon.com/lambda/) (but much simpler). We'll use a Worker to add the headers.
 
-![Cloudflare Workers](../public/static/images/notes/security-headers-cloudflare-workers/cf-workers.png)
+![Cloudflare Workers](./cf-workers.png)
 
 Workers can be enabled for $5/month via the [Cloudflare Dashboard](https://dash.cloudflare.com/). (It's worth noting, once enabled, Workers can be used on _any zone_ on your account, not just one website!).