ChristophP · February 5, 2022 07:32
diff --git a/new-pet-stack.sh b/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}"