ChristophP/new-pet-stack.sh

## new-pet-stack.sh
#!/usr/bin/env sh

set -eu

# checking input
[ -z ${1:-} ] && echo "Missing directory name. Call this script with a directory name you want to create." && exit 1;
DIR=$1
[ -d $DIR ] && echo "Directory ${DIR} already exists. I need a fresh directory." && exit 1;

# scaffolding of dirs and files
echo "Creating directory ${DIR}"
mkdir -p $DIR/src
cd $DIR

echo "Writing files ..."

echo "{
  \"scripts\": {
    \"start\": \"parcel src/index.html\",
    \"build\": \"parcel build src/index.html\",
    \"lint\": \"eslint src && elm-format src --validate\",
    \"lint:fix\": \"eslint src --fix && elm-format src --yes\"
  }
}" > package.json

# create elm.json
echo "{
    \"type\": \"application\",
    \"source-directories\": [
        \"src\"
    ],
    \"elm-version\": \"0.19.1\",
    \"dependencies\": {
        \"direct\": {
            \"elm/browser\": \"1.0.2\",
            \"elm/core\": \"1.0.5\",
            \"elm/html\": \"1.0.0\"
        },
        \"indirect\": {
            \"elm/json\": \"1.1.3\",
            \"elm/time\": \"1.0.0\",
            \"elm/url\": \"1.0.0\",
            \"elm/virtual-dom\": \"1.0.2\"
        }
    },
    \"test-dependencies\": {
        \"direct\": {},
        \"indirect\": {}
    }
}
" > elm.json

# create src/index.html
echo "<!DOCTYPE HTML>
<html>

<head>
  <meta charset=\"UTF-8\">
  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">
  <title>Give me a title</title>

  <link rel=\"stylesheet\" href=\"./style.css\">

  <script type="module" src=\"./index.js\"></script>
</head>

<body>
  <noscript>C'mom, turn on JavaScript in your Browser already.</noscript>
</body>

</html>
" > src/index.html

# create index.js
echo "import { Elm } from \"./Main.elm\";

Elm.Main.init();
" > src/index.js

# create src/Main.elm
echo "module Main exposing (main)

import Browser
import Browser.Navigation as Nav
import Html exposing (Html, h1, text)
import Html.Attributes exposing (class)

main : Program () Model Msg
main =
    Browser.document
        { init = init
        , update = update
        , view = view
        , subscriptions = always Sub.none
        }


-- Model


type alias Model =
    {}


init : () -> ( Model, Cmd Msg )
init flags =
    ( {}, Cmd.none )


-- Update


type Msg
    = NoOp

update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
      NoOp ->
          ( model, Cmd.none )

-- VIEW


view : Model -> Browser.Document msg
view model =
    Browser.Document \"Give me a title\"
        [ h1 [ class \"text-4xl py-4 text-center\" ] [ text \"Let's go pet stack.\"] ]

" > src/Main.elm

# create src/style.css
echo "
@tailwind base;

/* my resets */
html, body {
  height: 100%;
}

body {
  font-size: 16px;
}

svg {
  fill: currentColor;
}
/* my resets end */

@tailwind components;

@tailwind utilities;

/* put custom utilities here */

" > src/style.css

# create .gitignore
echo "node_modules/
elm-stuff/
.cache/
dist/
" > .gitignore

# create postcss.config.js
echo "{
  \"plugins\": [
    \"tailwindcss\",
    \"autoprefixer\"
  ]
}
" > .postcssrc.json

# create .eslintrc.json
echo "{
  \"env\": {
    \"browser\": true,
    \"es2021\": true
  },
  \"extends\": [\"airbnb-base\", \"prettier\"],
  \"plugins\": [\"prettier\"],
  \"rules\": {
    \"prettier/prettier\": \"error\"
  }
}
" > .eslintrc.json

# install dependencies
echo "Installing npm dependencies ..."
npm i -D elm elm-format parcel tailwindcss postcss autoprefixer \
  eslint eslint-config-prettier eslint-plugin-prettier eslint-config-airbnb-base \
  eslint-plugin-import prettier

# creating tailwind config
npx tailwindcss init
echo "module.exports = {
  content: [\"src/**/*.html\", \"src/**/*.css\", \"src/**/*.elm\"],
  theme: {
    extend: {},
  },
  plugins: [],
};
" > tailwind.config.js

# formatting and auto fixing
echo "Formatting with prettier and elm format"
npm run lint:fix

# check if build succeeds
echo "building project to see if everything worked"
npm run build

# Done
echo "Done. Have fun with your PET stack in ${DIR}"
	#!/usr/bin/env sh

	set -eu

	# checking input
	[ -z ${1:-} ] && echo "Missing directory name. Call this script with a directory name you want to create." && exit 1;
	DIR=$1
	[ -d $DIR ] && echo "Directory ${DIR} already exists. I need a fresh directory." && exit 1;

	# scaffolding of dirs and files
	echo "Creating directory ${DIR}"
	mkdir -p $DIR/src
	cd $DIR

	echo "Writing files ..."

	echo "{
	\"scripts\": {
	\"start\": \"parcel src/index.html\",
	\"build\": \"parcel build src/index.html\",
	\"lint\": \"eslint src && elm-format src --validate\",
	\"lint:fix\": \"eslint src --fix && elm-format src --yes\"
	}
	}" > package.json

	# create elm.json
	echo "{
	\"type\": \"application\",
	\"source-directories\": [
	\"src\"
	],
	\"elm-version\": \"0.19.1\",
	\"dependencies\": {
	\"direct\": {
	\"elm/browser\": \"1.0.2\",
	\"elm/core\": \"1.0.5\",
	\"elm/html\": \"1.0.0\"
	},
	\"indirect\": {
	\"elm/json\": \"1.1.3\",
	\"elm/time\": \"1.0.0\",
	\"elm/url\": \"1.0.0\",
	\"elm/virtual-dom\": \"1.0.2\"
	}
	},
	\"test-dependencies\": {
	\"direct\": {},
	\"indirect\": {}
	}
	}
	" > elm.json

	# create src/index.html
	echo "<!DOCTYPE HTML>
	<html>

	<head>
	<meta charset=\"UTF-8\">
	<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">
	<title>Give me a title</title>

	<link rel=\"stylesheet\" href=\"./style.css\">

	<script type="module" src=\"./index.js\"></script>
	</head>

	<body>
	<noscript>C'mom, turn on JavaScript in your Browser already.</noscript>
	</body>

	</html>
	" > src/index.html

	# create index.js
	echo "import { Elm } from \"./Main.elm\";

	Elm.Main.init();
	" > src/index.js

	# create src/Main.elm
	echo "module Main exposing (main)

	import Browser
	import Browser.Navigation as Nav
	import Html exposing (Html, h1, text)
	import Html.Attributes exposing (class)

	main : Program () Model Msg
	main =
	Browser.document
	{ init = init
	, update = update
	, view = view
	, subscriptions = always Sub.none
	}



	-- Model


	type alias Model =
	{}


	init : () -> ( Model, Cmd Msg )
	init flags =
	( {}, Cmd.none )


	-- Update


	type Msg
	= NoOp

	update : Msg -> Model -> ( Model, Cmd Msg )
	update msg model =
	case msg of
	NoOp ->
	( model, Cmd.none )

	-- VIEW


	view : Model -> Browser.Document msg
	view model =
	Browser.Document \"Give me a title\"
	[ h1 [ class \"text-4xl py-4 text-center\" ] [ text \"Let's go pet stack.\"] ]

	" > src/Main.elm

	# create src/style.css
	echo "
	@tailwind base;

	/* my resets */
	html, body {
	height: 100%;
	}

	body {
	font-size: 16px;
	}

	svg {
	fill: currentColor;
	}
	/* my resets end */

	@tailwind components;

	@tailwind utilities;

	/* put custom utilities here */

	" > src/style.css

	# create .gitignore
	echo "node_modules/
	elm-stuff/
	.cache/
	dist/
	" > .gitignore

	# create postcss.config.js
	echo "{
	\"plugins\": [
	\"tailwindcss\",
	\"autoprefixer\"
	]
	}
	" > .postcssrc.json

	# create .eslintrc.json
	echo "{
	\"env\": {
	\"browser\": true,
	\"es2021\": true
	},
	\"extends\": [\"airbnb-base\", \"prettier\"],
	\"plugins\": [\"prettier\"],
	\"rules\": {
	\"prettier/prettier\": \"error\"
	}
	}
	" > .eslintrc.json

	# install dependencies
	echo "Installing npm dependencies ..."
	npm i -D elm elm-format parcel tailwindcss postcss autoprefixer \
	eslint eslint-config-prettier eslint-plugin-prettier eslint-config-airbnb-base \
	eslint-plugin-import prettier

	# creating tailwind config
	npx tailwindcss init
	echo "module.exports = {
	content: [\"src/*/.html\", \"src/*/.css\", \"src/*/.elm\"],
	theme: {
	extend: {},
	},
	plugins: [],
	};
	" > tailwind.config.js

	# formatting and auto fixing
	echo "Formatting with prettier and elm format"
	npm run lint:fix

	# check if build succeeds
	echo "building project to see if everything worked"
	npm run build

	# Done
	echo "Done. Have fun with your PET stack in ${DIR}"