Update code samples/embeds

Author: adamyonk

gatsby-config.js

@@ -43,6 +43,12 @@ module.exports = {
       resolve: "gatsby-transformer-remark",
       options: {
         plugins: [
+          {
+            resolve: "gatsby-remark-prismjs",
+            options: {
+              inlineCodeMarker: "±",
+            },
+          },
           {
             resolve: "gatsby-remark-images",
             options: {

package-lock.json

@@ -12,6 +12,7 @@
     "gatsby-plugin-react-next": "^1.0.11",
     "gatsby-plugin-styled-jsx": "^2.0.6",
     "gatsby-remark-images": "^1.5.60",
+    "gatsby-remark-prismjs": "^1.2.21",
     "gatsby-source-filesystem": "^1.5.27",
     "gatsby-transformer-remark": "^1.7.39",
     "prettier": "^1.11.1",
@@ -22,8 +23,7 @@
   "scripts": {
     "build": "gatsby build",
     "start": "gatsby develop",
-    "format":
-      "prettier './*.{js,json}' '.{babel,prettier}rc' 'src/**/*.{js,json,md}' --write ",
+    "format": "prettier './*.{js,json}' '.{babel,prettier}rc' 'src/**/*.{js,json,md}' --write ",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "devDependencies": {}

package.json

@@ -2,6 +2,7 @@ import React from "react"
 import PropTypes from "prop-types"
 import Link from "gatsby-link"
 import Helmet from "react-helmet"
+require("prismjs/themes/prism-solarizedlight.css")
 
 const TemplateWrapper = ({ children }) => (
   <React.Fragment>
@@ -245,20 +246,20 @@ const TemplateWrapper = ({ children }) => (
         line-height: 0;
       }
 
-      code,
-      pre {
-        font-family: var(--monospace);
-      }
+      // code,
+      // pre {
+      //   font-family: var(--monospace);
+      // }
 
-      pre code {
-        background: var(--base3);
-        border-radius: 2px;
-        box-sizing: border-box;
-        display: block;
-        overflow: scroll;
-        padding: 0.25em 0.75em;
-        width: 100%;
-      }
+      // pre code {
+      //   background: var(--base3);
+      //   border-radius: 2px;
+      //   box-sizing: border-box;
+      //   display: block;
+      //   overflow: scroll;
+      //   padding: 0.25em 0.75em;
+      //   width: 100%;
+      // }
 
       .logo {
         align-items: center;
@@ -361,6 +362,54 @@ const TemplateWrapper = ({ children }) => (
       header h1 {
         margin-bottom: 0em;
       }
+
+      /**
+       * Prism things:
+       */
+      .gatsby-highlight-code-line {
+        background-color: #feb;
+        display: block;
+        margin-right: -1em;
+        margin-left: -1em;
+        padding-right: 1em;
+        padding-left: 0.75em;
+        border-left: 0.25em solid #f99;
+      }
+
+      /**
+       * Add back the container background-color, border-radius, padding, margin
+       * and overflow that we removed from <pre>.
+       */
+      .gatsby-highlight {
+        background-color: #fdf6e3;
+        border-radius: 0.3em;
+        margin: 0.5em 0;
+        padding: 1em;
+        overflow: auto;
+      }
+
+      /**
+       * Remove the default PrismJS theme background-color, border-radius, margin,
+       * padding and overflow.
+       * 1. Make the element just wide enough to fit its content.
+       * 2. Always fill the visible space in .gatsby-highlight.
+       */
+      .gatsby-highlight pre[class*="language-"] {
+        background-color: transparent;
+        margin: 0;
+        padding: 0;
+        overflow: initial;
+        float: left; /* 1 */
+        min-width: 100%; /* 2 */
+      }
+
+      :not(pre) > code[class*="language-"] {
+        // display: inline-block;
+      }
+      code[class*="language-"],
+      pre[class*="language-"] {
+        font-family: var(--body);
+      }
     `}</style>
   </React.Fragment>
 )

src/layouts/index.js

@@ -8,6 +8,6 @@ tags: [css]
 
 I spend a fair amount of time trying to get this shape nailed down in CSS, so I wanted to share and save someone the time. The secret was in setting the second set of radii on the `box-shadow` property. [MDN][mdn] has a helpful visual to help wrap your mind around that lesser-known feature of box-shadow.
 
-<a class="jsbin-embed" href="http://jsbin.com/bepoco/embed?output">JS Bin on jsbin.com</a><script src="http://static.jsbin.com/js/embed.min.js?3.35.9"></script>
+<iframe src="https://codesandbox.io/embed/k9162mxoqv?autoresize=1&hidenavigation=1&module=%2Findex.html" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
 
 [mdn]: https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius

src/pages/blog/2013-05-17-css-map-pins.md

@@ -10,4 +10,4 @@ I put together a pretty simple solution for masking yet another native HTML inpu
 
 I'm just kidding. You guys are great!
 
-<a class="jsbin-embed" href="http://jsbin.com/susuda/embed?output">JS Bin on jsbin.com</a><script src="http://static.jsbin.com/js/embed.min.js?3.35.9"></script>
+<iframe src="https://codesandbox.io/embed/8k2kjzll32?autoresize=1&hidenavigation=1&moduleview=1" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>

src/pages/blog/2013-08-01-easy-masked-file-inputs.md

@@ -10,6 +10,7 @@ I was recently setting up a Jekyll site that had the JavaScript and CSS compiled
 
 ```javascript
 var webpack = require("webpack")
+
 module.exports = {
   plugins: [new webpack.BannerPlugin("---\n---\n\n", { raw: true })],
 }

src/pages/blog/2015-10-12-jekyll-and-webpack.md

@@ -19,7 +19,7 @@ See `git-merge-pr` below or [grab it from my dotfiles][git-merge-pr]!
 
 ## git-merge-pr
 
-```shell
+```bash
 #!/usr/bin/env bash
 
 # Contributors:

src/pages/blog/2016-03-08-github-merge-button-from-cli.md

@@ -10,28 +10,28 @@ I was recently trying to pull data off of an iMac for a friend, but didn't have
 
 Start up your Mac in single-user mode<sup>[2](#2)</sup>, then run the following commands<sup>[3](#3)</sup>:
 
-```shell
+```bash
 # Check the filesystem
-$ /sbin/fsck -y
+/sbin/fsck -y
 
 # Mount the root volume
-$ mount -uw /
+mount -uw /
 
 # Create mount destination
-$ mkdir /Volumes/backup
+mkdir /Volumes/backup
 
 # Get a list of available drives
-$ df -h
+df -h
 
 # Plug in USB backup drive, look for new drive name
-$ df -h
+df -h
 
 # Mount the drive with the name you got from last step. Probably looks
 # something like /dev/rdisk2s2. Note the rdisk / disk name difference.
-$ mount -t hfs /dev/disk2s2 /Volumes/backup
+mount -t hfs /dev/disk2s2 /Volumes/backup
 
 # rsync data to your backup
-$ rsync -ahz /Users/you/ /Volumes/backup/
+rsync -ahz /Users/you/ /Volumes/backup/
 ```
 
 <sup><a name="1">1</a></sup>Share files between two computers with target disk mode: [https://support.apple.com/en-us/HT201462][target disk mode]

src/pages/blog/2016-03-14-recover-data-from-a-mac-without-target-disk-mode.md

@@ -11,10 +11,10 @@ tags: [apple, macos, command-line]
 * Name it "Add to Safari Reading List" and add a "Run AppleScript" action with the following AppleScript, and don't forget to use "Google Chrome Canary" and or "Safari Technology Preview" instead if you prefer them:
 
   ```applescript
-  tell application "Google Chrome"
-    set pageUrl to get URL of active tab of first window
-  end tell
-  tell application "Safari" to add reading list item pageUrl
+    tell application "Google Chrome"
+      set pageUrl to get URL of active tab of first window
+    end tell
+    tell application "Safari" to add reading list item pageUrl
   ```
 
   ![](/img/send-chrome-tab-to-safari-reading-list/3.png)