w1ndy/vite-bootstrap.sh

## vite-bootstrap.sh
#!/bin/bash
# USAGE: bash <(curl -sL https://gist.githubusercontent.com/w1ndy/1c484c8bfafa06b5b42cca0591b026fb/raw/vite-bootstrap.sh) <PROJECT_NAME>

set -e

if [ -z "$1" ]
  then
    echo "No project name supplied"
    exit 1
fi

pnpm create vite "$1" --template vue-ts
cd "$1"

pnpm install
pnpm install --save-dev \
    eslint eslint-plugin-vue @typescript-eslint/parser \
    prettier eslint-config-prettier \
    vite-plugin-windicss windicss \
    @types/lodash
pnpm install --save \
    @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/vue-fontawesome@latest-3 \
    lodash

cat <<EOF > .editorconfig
root = true

[*]
indent_size = 4
trim_trailing_whitespace = true
insert_final_newline = true
EOF

cat <<EOF > .eslintrc.json
{
    "parser": "vue-eslint-parser",
    "parserOptions": {
        "parser": "@typescript-eslint/parser"
    },
    "extends": ["plugin:vue/vue3-recommended", "prettier"]
}
EOF

cat <<EOF > .prettierrc.json
{
    "singleAttributePerLine": true,
    "semi": false,
    "singleQuote": true
}
EOF

cat <<EOF > vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import WindiCSS from 'vite-plugin-windicss'

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [vue(), WindiCSS()],
})
EOF

cat <<EOF > src/main.ts
import 'virtual:windi.css'

import { createApp } from 'vue'
import App from './App.vue'

import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
// import { faUserSecret } from '@fortawesome/free-solid-svg-icons'
// library.add(faUserSecret)

createApp(App).component('font-awesome-icon', FontAwesomeIcon).mount('#app')
EOF

cat <<EOF > index.html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <link
            rel="icon"
            href="/favicon.ico"
        />
        <link
            rel="preconnect"
            href="https://fonts.googleapis.com"
        />
        <link
            rel="preconnect"
            href="https://fonts.gstatic.com"
            crossorigin
        />
        <link
            href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap"
            rel="stylesheet"
        />
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0"
        />
        <title>Vite App</title>
    </head>
    <body>
        <div id="app"></div>
        <script
            type="module"
            src="/src/main.ts"
        ></script>
    </body>
</html>
EOF

cat <<EOF > src/App.vue
<script setup lang="ts">
</script>

<template>
    <div>Initialized with vite-bootstrap</div>
</template>

<style>
body {
    margin: 0;
    padding: 0;
    background-color: #fafafa;
    width: 100vw;
    height: 100vh;
    font-family: Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#app {
    width: 100%;
    height: 100%;
}
</style>
EOF

rm src/components/HelloWorld.vue

echo "bootstrapped."
	#!/bin/bash
	# USAGE: bash <(curl -sL https://gist.githubusercontent.com/w1ndy/1c484c8bfafa06b5b42cca0591b026fb/raw/vite-bootstrap.sh) <PROJECT_NAME>

	set -e

	if [ -z "$1" ]
	then
	echo "No project name supplied"
	exit 1
	fi

	pnpm create vite "$1" --template vue-ts
	cd "$1"

	pnpm install
	pnpm install --save-dev \
	eslint eslint-plugin-vue @typescript-eslint/parser \
	prettier eslint-config-prettier \
	vite-plugin-windicss windicss \
	@types/lodash
	pnpm install --save \
	@fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/vue-fontawesome@latest-3 \
	lodash

	cat <<EOF > .editorconfig
	root = true

	[*]
	indent_size = 4
	trim_trailing_whitespace = true
	insert_final_newline = true
	EOF

	cat <<EOF > .eslintrc.json
	{
	"parser": "vue-eslint-parser",
	"parserOptions": {
	"parser": "@typescript-eslint/parser"
	},
	"extends": ["plugin:vue/vue3-recommended", "prettier"]
	}
	EOF

	cat <<EOF > .prettierrc.json
	{
	"singleAttributePerLine": true,
	"semi": false,
	"singleQuote": true
	}
	EOF

	cat <<EOF > vite.config.ts
	import { defineConfig } from 'vite'
	import vue from '@vitejs/plugin-vue'
	import WindiCSS from 'vite-plugin-windicss'

	// https://vitejs.dev/config/
	export default defineConfig({
	plugins: [vue(), WindiCSS()],
	})
	EOF

	cat <<EOF > src/main.ts
	import 'virtual:windi.css'

	import { createApp } from 'vue'
	import App from './App.vue'

	import { library } from '@fortawesome/fontawesome-svg-core'
	import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
	// import { faUserSecret } from '@fortawesome/free-solid-svg-icons'
	// library.add(faUserSecret)

	createApp(App).component('font-awesome-icon', FontAwesomeIcon).mount('#app')
	EOF

	cat <<EOF > index.html
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<link
	rel="icon"
	href="/favicon.ico"
	/>
	<link
	rel="preconnect"
	href="https://fonts.googleapis.com"
	/>
	<link
	rel="preconnect"
	href="https://fonts.gstatic.com"
	crossorigin
	/>
	<link
	href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap"
	rel="stylesheet"
	/>
	<meta
	name="viewport"
	content="width=device-width, initial-scale=1.0"
	/>
	<title>Vite App</title>
	</head>
	<body>
	<div id="app"></div>
	<script
	type="module"
	src="/src/main.ts"
	></script>
	</body>
	</html>
	EOF

	cat <<EOF > src/App.vue
	<script setup lang="ts">
	</script>

	<template>
	<div>Initialized with vite-bootstrap</div>
	</template>

	<style>
	body {
	margin: 0;
	padding: 0;
	background-color: #fafafa;
	width: 100vw;
	height: 100vh;
	font-family: Roboto, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	}

	#app {
	width: 100%;
	height: 100%;
	}
	</style>
	EOF

	rm src/components/HelloWorld.vue

	echo "bootstrapped."