Skip to content

Commit

Permalink
Update code samples/embeds
Browse files Browse the repository at this point in the history
  • Loading branch information
adamyonk committed Apr 2, 2018
1 parent 4caec1b commit 57716ad
Show file tree
Hide file tree
Showing 10 changed files with 1,881 additions and 3,410 deletions.
6 changes: 6 additions & 0 deletions gatsby-config.js
Expand Up @@ -43,6 +43,12 @@ module.exports = {
resolve: "gatsby-transformer-remark",
options: {
plugins: [
{
resolve: "gatsby-remark-prismjs",
options: {
inlineCodeMarker: "±",
},
},
{
resolve: "gatsby-remark-images",
options: {
Expand Down
5,175 changes: 1,795 additions & 3,380 deletions package-lock.json

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions package.json
Expand Up @@ -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",
Expand All @@ -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": {}
Expand Down
75 changes: 62 additions & 13 deletions src/layouts/index.js
Expand Up @@ -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>
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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>
)
Expand Down
2 changes: 1 addition & 1 deletion src/pages/blog/2013-05-17-css-map-pins.md
Expand Up @@ -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
2 changes: 1 addition & 1 deletion src/pages/blog/2013-08-01-easy-masked-file-inputs.md
Expand Up @@ -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>
1 change: 1 addition & 0 deletions src/pages/blog/2015-10-12-jekyll-and-webpack.md
Expand Up @@ -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 })],
}
Expand Down
2 changes: 1 addition & 1 deletion src/pages/blog/2016-03-08-github-merge-button-from-cli.md
Expand Up @@ -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:
Expand Down
Expand Up @@ -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]
Expand Down
Expand Up @@ -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)
Expand Down

0 comments on commit 57716ad

Please sign in to comment.