Skip to content

Instantly share code, notes, and snippets.

@athaeryn

athaeryn/codpen

Created April 11, 2017 19:25
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save athaeryn/4f547b691f18a28962efc503a4168978 to your computer and use it in GitHub Desktop.
Save athaeryn/4f547b691f18a28962efc503a4168978 to your computer and use it in GitHub Desktop.
Download ZIP
Codpen — Like Codepen but local?
Raw
codpen
#!/bin/sh
if ! hash chrome-cli 2>/dev/null; then
echo "Couldn't find chrome-cli. Ensure it's installed and on your PATH."
exit 1
fi
DIRNAME="/tmp/codpen+$(date '+%s')"
INDEX="$DIRNAME/index.html"
RELOAD="$DIRNAME/reload"
RELOADVIM="$DIRNAME/reload.vim"
mkdir -p $DIRNAME
cat <<EOF >> "$INDEX"
<!doctype html>
<html>
<head>
<meta charset="utf8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="main.css">
</head>
<body>
hey
<script src="main.js"></script>
</body>
</html>
EOF
TAB=`chrome-cli open "file://$INDEX" -n | awk '/Id/ { print $2 }'`
cat <<EOF >> "$RELOAD"
#!/bin/sh
chrome-cli reload -t $TAB
EOF
chmod +x "$RELOAD"
cat <<EOF >> "$RELOADVIM"
augroup Codpen
autocmd!
autocmd BufWritePost * !./reload
augroup END
EOF
cat <<EOF >> "$DIRNAME/main.css"
body {
font-family: monospace;
}
EOF
cat <<EOF >> "$DIRNAME/main.js"
console.log('hey');
EOF
vim "$INDEX" -c ":cd $DIRNAME | :so $RELOADVIM"
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment