« Oatmeal

Tagged "bash"

Basic blot blogging from the command-line

Posting to my blog is a breeze from mobile thanks to a couple shortcuts and Drafts actions I’ve put together. I wanted posting to be just as seemless from my computer, too. Here is my quick and dirty solution!

#!/usr/bin/env bash

cd "$(dirname "$0")" # Go to the script's directory

DATE=$(date +%Y-%m-%d-%H-%M)

# The paths to your blot website's draft and post directories
DRAFT_DIR=/Users/someuser/Dropbox/Apps/Blot/drafts/
POST_DIR=/Users/someuser/Dropbox/Apps/Blot/posts/

USER_INPUT="$@"

# Your editor of choice
EDITOR='emacs'

if [ -n "$USER_INPUT" ]; then

    if [ $USER_INPUT == "post" ]; then

        printf "title: \ndate: ${DATE}\ntags: " > ${POST_DIR}${DATE}.md
        $EDITOR ${POST_DIR}$DATE.md

    fi

    if [ $USER_INPUT == "draft" ]; then

        printf "title: \ndate: ${DATE}\ntags: " > ${DRAFT_DIR}${DATE}.md
        $EDITOR ${DRAFT_DIR}$DATE.md

    fi

else 

    printf '\nBlot blogging from the command-line.\n\n    draft   create a draft post\n    post    live dangerously and just post that sucker!\n\n'

fi

In the future I may expand this to support editing existing posts, too. I’ve also been toying with a way to do this without ever leaving emacs.

Accio React App

My professional-self has been writing a whole lot of React components lately. I’ve mixed feelings about React (mostly do to it’s parentage), but I’m very much enjoying the work and am happy to be writing functional code.

When I started my most recent React project I decided to not use Webpack and instead opted to use Parcel (shout out to @hjertnes for the intro!). My plan was for this to be a post about Parcel and how to use it, but in the course of sussing out what I was going to cover, I ended up writing a little script…

The script is a beautifully procedural bit of bash that instantiates a basic react starting point.

I’ve used Webpack before and found it to be a) overly complicated, b) a gargantuan time-suck.

I’ve also toyed with react-create-app and always been displeased. It works well, but is a bit limiting out of the box, and it’s eject method is…terrifying?

Accio React App is my answer to react-create-app. It provides the minimal bits needed to start a React project (including react-router, sass and babel) and a basic project scaffolding. It isn’t much, but I’ve already found it to be a helpful little thing.

Here is the script in full, it can also be found on my pastebin and as a gist hosted on GitHub.

#!/bin/bash

# ACCIO REACT APP!
# A quick and dirty way to start a simple React project
# NOTE! This script assumes you are using Yarn
# Author: Eli (https://eli.li)
# License: unlicense (https://unlicense.org/)

read -p 'What is the name of your new project? ' PROJECTNAME

echo 'Creating new project, ' $PROJECTNAME
mkdir $PROJECTNAME
cd $PROJECTNAME

echo 'Now yarn is gonna do *A LOT* of stuff all at once, including initiating a new project, and pulling in a number of dependencies. This may take a few minutes.'
yarn init -y
yarn add react
yarn add react-dom
yarn add react-router-dom
yarn add node-sass
yarn add --dev parcel-bundler
yarn add --dev babel-preset-env
yarn add --dev babel-preset-react

echo 'Next is a slight modification to package.json, adding a `start` and a `build` script'
SCRIPT=',"scripts": {"start": "parcel index.html", "build": "parcel build index.html --out-dir dist" }'
printf '%s\n' H 17i "$SCRIPT" . wq | ed -s package.json

echo 'Making `.babelrc`!'
touch '.babelrc'
echo '{"presets": ["env", "react"]}' >> .babelrc

echo 'Making `.gitignore`!'
touch '.gitignore'
echo '/node_modules' >> .gitignore
echo '/dist' >> .gitignore
echo '/.cache' >> .gitignore
echo '.DS_Store' >> .gitignore

echo 'For our next trick!? Time to make the project scaffolding.'
mkdir 'src'
mkdir 'src/components'
mkdir 'src/scss'
mkdir 'src/static'
touch 'src/index.js'
touch 'src/components/HelloWorld.js'
touch 'src/scss/main.scss'
touch 'index.html'
touch 'README.md'

echo '<!doctype html>' >> index.html
echo '<html lang="en">' >> index.html
echo '<head>' >> index.html
echo '<meta charset="UTF-8">' >> index.html
echo '<meta name="viewport"' >> index.html
echo 'content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">' >> index.html
echo '<meta http-equiv="X-UA-Compatible" content="ie=edge">' >> index.html
echo '<title>'$PROJECTNAME'</title>' >> index.html
echo '<link rel="stylesheet" href="./src/scss/main.scss">' >> index.html
echo '</head>' >> index.html
echo '<body>' >> index.html
echo '<div id="root"></div>' >> index.html
echo '<script src="./src/index.js"></script>' >> index.html
echo '</body>' >> index.html
echo '</html>' >> index.html

echo 'import React from "react";' >> src/index.js
echo 'import ReactDOM from "react-dom";' >> src/index.js
echo 'import {BrowserRouter as Router, Route} from "react-router-dom"' >> src/index.js
echo 'import HelloWorld from "./components/HelloWorld"' >> src/index.js
echo '  ' >> src/index.js
echo 'let Root = document.getElementById("root");' >> src/index.js
echo '  ' >> src/index.js
echo 'ReactDOM.render(' >> src/index.js
echo '<Router>' >> src/index.js
echo '<main>' >> src/index.js
echo '<Route exact strict path="/" component={HelloWorld}/>' >> src/index.js
echo '</main>' >> src/index.js
echo '</Router>,' >> src/index.js
echo 'Root' >> src/index.js
echo ')' >> src/index.js

echo 'import React from "react"' >> src/components/HelloWorld.js
echo '  ' >> src/components/HelloWorld.js
echo 'export default class HelloWorld extends React.Component {' >> src/components/HelloWorld.js
echo 'constructor(props) {' >> src/components/HelloWorld.js
echo 'super(props);' >> src/components/HelloWorld.js
echo '}' >> src/components/HelloWorld.js
echo '  ' >> src/components/HelloWorld.js
echo 'render() {' >> src/components/HelloWorld.js
echo 'return (' >> src/components/HelloWorld.js
echo '<div>' >> src/components/HelloWorld.js
echo '<h1>Hello World!</h1>' >> src/components/HelloWorld.js
echo '</div>' >> src/components/HelloWorld.js
echo ')' >> src/components/HelloWorld.js
echo '}' >> src/components/HelloWorld.js
echo '}' >> src/components/HelloWorld.js

echo 'body {padding: 3em; color: pink}' >> src/scss/main.scss

echo '#' $PROJECTNAME >> README.md
echo '  ' >> README.md
echo '(ノ◕ヮ◕)ノ*:・゚✧' >> README.md
echo 'Built w/a very little bit of magic!' >> README.md
echo '  ' >> README.md
echo '  ' >> README.md
echo 'Run: w/either:' >> README.md
echo '```' >> README.md
echo '$ yarn start' >> README.md
echo '```' >> README.md
echo 'OR, if using NPM' >> README.md
echo '```' >> README.md
echo '$ npm start' >> README.md
echo '```' >> README.md

yarn start

It isn’t pretty (yet), but I’ve got search working on my website! All of my site’s content is stored as static JSON files and I was having a hard time figuring out how best to (quickly) search them all…then I realized that I could use grep wrapped in PHP! Easy peasy. Next up, an archive page of some sort!

After a long time of using fish, and before that zsh I’ve returned to being a full time bash user. There was no particular rhyme nor reason to my using one shell over another, so in an effort to simplify my setup across my two computers and the heaps of servers I interact with on the daily I’ve gone all in on bash.

Jupiter@pizza:~$ 

Stupid-simple bash script to create a local copy of a website

#!/bin/bash

printf "\n\n    Please enter the URL of the website you wish to download.\n    Do not include leading 'http://' or 'https://'?\n\n\n"
printf "    "
read URL
printf "\n\n    Depending on the size of the website you just\n    entered, this may take a few minutes.\n\n\n"
sleep 6
wget --recursive --no-clobber --page-requisites --html-extension --convert-links --restrict-file-names=windows --domains ${URL} --no-parent http://${URL}
printf "\n\n  DONE!\n\n\n"

All the heavy lifting is done by wget, so that will need to be installed before using the script