w1ndy · July 6, 2022 03:53
diff --git a/vite-bootstrap.sh b/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."