move some non-post pages to mdx

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

@@ -39,10 +39,10 @@ Using either feature, a volunteer starts with a search of the database for the v
 Here's one of the instructional videos provided internally to volunteers:
 
 <Video
-  src={{
-    webm: "/static/bernie-sanders-bern-app-data/friend-to-friend.webm",
-    mp4: "/static/bernie-sanders-bern-app-data/friend-to-friend.mp4",
-  }}
+  src={[
+    "/static/bernie-sanders-bern-app-data/friend-to-friend.webm",
+    "/static/bernie-sanders-bern-app-data/friend-to-friend.mp4",
+  ]}
   poster="/static/bernie-sanders-bern-app-data/poster-friend-to-friend.png"
 />
 

notes/coronavirus-open-source/index.mdx

@@ -1,3 +1,5 @@
+import Link from "../../components/Link";
+import { SiGithub } from "react-icons/si";
 import featuredImage from "./covid19dashboards.png";
 
 export const frontmatter = {
@@ -9,6 +11,18 @@ export const frontmatter = {
   image: featuredImage.src,
 };
 
+export const OctocatLink = ({ repo }) => {
+  return (
+    <Link
+      href={`https://github.com/${repo}`}
+      plain
+      style={{ margin: "0 0.4em", color: "var(--colors-text) !important" }}
+    >
+      <SiGithub style={{ display: "inline", height: "1.2em", width: "1.2em", verticalAlign: "-0.2em" }} />
+    </Link>
+  );
+};
+
 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.
 
 These are just a few incredible open source projects that didn't exist a few months ago, but rapidly formed teams of dozens of contributors to fill both big needs and small niches in the fight to defeat the novel coronavirus, aka [**COVID-19**](https://www.cdc.gov/coronavirus/2019-nCoV/index.html).
@@ -90,10 +104,7 @@ You can [download their software here](https://foldingathome.org/start-folding/)
 **Fun fact:** The team behind Folding@home has seen a [**huge** spike in computational power](https://www.reddit.com/r/pcmasterrace/comments/flgm7q/ama_with_the_team_behind_foldinghome_coronavirus/) this month after cryptominers started mining coronavirus proteins instead of boring, old Ethereum with their insanely overpowered GPUs! 👏
 
 <Video
-  src={{
-    webm: "/static/coronavirus-open-source/folding.webm",
-    mp4: "/static/coronavirus-open-source/folding.mp4",
-  }}
+  src={["/static/coronavirus-open-source/folding.webm", "/static/coronavirus-open-source/folding.mp4"]}
   poster="/static/coronavirus-open-source/folding-thumb.png"
   autoplay
 />

notes/dark-mode/index.mdx

@@ -23,14 +23,13 @@ I've written a simple implementation below, which...
 
 ...meaning that any CSS selectors beginning with `body.dark` or `body.light` will only apply when the respective mode is active. A good place to start is by separating any color rules — your background, text, links, etc. — into a different section of your CSS. Using [SASS or SCSS](https://sass-lang.com/) makes this a whole lot [easier with nesting](https://sass-lang.com/guide#topic-3) but is not required; this was written with a [KISS](https://www.youtube-nocookie.com/embed/O58A7MJfOwU?hl=en&fs=1&showinfo=1&rel=0&iv_load_policy=3) mentality.
 
-<IFrame
+<iframe
   src="https://jakejarvis.github.io/dark-mode-example/"
   title="Dark Mode Example"
   loading="lazy"
-  height={190}
-  width={650}
-  allowScripts
-/>
+  style={{ height: "190px", width: "100%" }}
+  sandbox="allow-same-origin allow-scripts allow-popups allow-top-navigation-by-user-activation"
+></iframe>
 
 A _very_ barebones example is embedded above ([view the source here](https://github.com/jakejarvis/dark-mode-example), or [open in a new window](https://jakejarvis.github.io/dark-mode-example/) if your browser is blocking the frame) and you can try it out on this site by clicking the 💡 lightbulb in the upper right corner of this page. You'll notice that the dark theme sticks when refreshing this page, navigating between other pages, or if you were to return to this example weeks from now.
 

notes/dropping-dropbox/index.mdx

@@ -27,10 +27,7 @@ Decisions made by the top folks at Dropbox gave me an increasingly sour taste in
 - ...and as a bonus, making the process of canceling Dropbox Pro incredibly convoluted, annoying, and sketchy. Here's a video demonstration via [Justin Dunham](https://twitter.com/jwyattd):
 
 <Video
-  src={{
-    webm: "/static/dropping-dropbox/cancel.webm",
-    mp4: "/static/dropping-dropbox/cancel.mp4",
-  }}
+  src={["/static/dropping-dropbox/cancel.webm", "/static/dropping-dropbox/cancel.mp4"]}
   poster="/static/dropping-dropbox/cancel.png"
 />
 

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

@@ -43,9 +43,5 @@ As [Bill Maher](https://medium.com/u/cdc04a9799f6) (an avid Bernie supporter) [s
 **Update:** The campaign has included my snowy New Hampshire interaction with her in one of the DNC convention videos! See a few short seconds of my joy at 1:24.
 
 <Video
-  src={{
-    webm: "/static/hillary/convention-720p.webm",
-    mp4: "/static/hillary/convention-720p.mp4",
-    vtt: "/static/hillary/subs.en.vtt",
-  }}
+  src={["/static/hillary/convention-720p.webm", "/static/hillary/convention-720p.mp4", "/static/hillary/subs.en.vtt"]}
 />

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

@@ -25,10 +25,10 @@ I'm a _huge_ sucker for Kate McKinnon's spot-on impression of Warren on Saturday
 Although the designer who selected this GIF likely had _thousands_ of choices when searching "[Bernie finger wagging GIF](https://www.google.com/search?q=Bernie+finger+wagging+GIF&tbm=isch&tbs=itp:animated)," the text beside it is well-written and funny — even though we both know putting a page at [berniesanders.com/zxcliaosid](https://berniesanders.com/zxcliaosid/) probably won't be a top priority of a President Sanders.
 
 <Video
-  src={{
-    webm: "/static/presidential-candidates-404-pages/sanders.webm",
-    mp4: "/static/presidential-candidates-404-pages/sanders.mp4",
-  }}
+  src={[
+    "/static/presidential-candidates-404-pages/sanders.webm",
+    "/static/presidential-candidates-404-pages/sanders.mp4",
+  ]}
   autoplay
 />
 
@@ -43,10 +43,10 @@ Uncle Joe has a nice and simple 404 page. I like it, along with the Ray-Bans and
 A ballsy move, considering Beto's infamous [DUI arrest](https://www.politifact.com/texas/statements/2019/mar/14/club-growth/beto-orourke-arrested-dwi-flee-scene/) in the '90s — but still a clever ask for a donation and a great use of a GIF, even if it's left over from his Senate campaign.
 
 <Video
-  src={{
-    webm: "/static/presidential-candidates-404-pages/orourke.webm",
-    mp4: "/static/presidential-candidates-404-pages/orourke.mp4",
-  }}
+  src={[
+    "/static/presidential-candidates-404-pages/orourke.webm",
+    "/static/presidential-candidates-404-pages/orourke.mp4",
+  ]}
   autoplay
 />
 
@@ -55,10 +55,10 @@ A ballsy move, considering Beto's infamous [DUI arrest](https://www.politifact.c
 Another clean and simple page with a top-notch GIF. It injected some emotion into visiting [kamalaharris.com/alskdjf](https://kamalaharris.com/alskdjf).
 
 <Video
-  src={{
-    webm: "/static/presidential-candidates-404-pages/harris.webm",
-    mp4: "/static/presidential-candidates-404-pages/harris.mp4",
-  }}
+  src={[
+    "/static/presidential-candidates-404-pages/harris.webm",
+    "/static/presidential-candidates-404-pages/harris.mp4",
+  ]}
   autoplay
 />