From 1c69c4abf6e54ccab886c23cd6e691179ce6f076 Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Fri, 7 Oct 2022 12:37:48 +1100
Subject: Install client side tools

Install and configure Vite, Vue, Tailwind, Pinia, Typescript, and ESLint
Add basic framework files (index.html, App.vue, main.ts, etc)
Update READMEs
Add favicon, font, and LICENCE.txt
---
 src/App.vue                      | 10 ++++++++++
 src/README.md                    |  7 +++++++
 src/components/TestComponent.vue |  8 ++++++++
 src/index.css                    | 17 +++++++++++++++++
 src/main.ts                      |  8 ++++++++
 src/vite-env.d.ts                |  7 +++++++
 6 files changed, 57 insertions(+)
 create mode 100644 src/App.vue
 create mode 100644 src/README.md
 create mode 100644 src/components/TestComponent.vue
 create mode 100644 src/index.css
 create mode 100644 src/main.ts
 create mode 100644 src/vite-env.d.ts

(limited to 'src')

diff --git a/src/App.vue b/src/App.vue
new file mode 100644
index 0000000..f88c1a0
--- /dev/null
+++ b/src/App.vue
@@ -0,0 +1,10 @@
+<template>
+	<div class="text-stone-100 bg-yellow-700">
+		Hello World
+	</div>
+	<test-component/>
+</template>
+
+<script setup lang="ts">
+import TestComponent from './components/TestComponent.vue';
+</script>
diff --git a/src/README.md b/src/README.md
new file mode 100644
index 0000000..409e796
--- /dev/null
+++ b/src/README.md
@@ -0,0 +1,7 @@
+# Files
+-   **main.ts**: Included by ../index.html. Creates the main Vue component.
+-   **App.vue**: The main Vue component.
+-   **components**:
+    -   **TestComponent.vue**: For testing.
+-   **index.css**: Included by main.ts. Provides Tailwind's CSS classes.
+-   **vite-env.d.ts**:  From Vite's template files.
diff --git a/src/components/TestComponent.vue b/src/components/TestComponent.vue
new file mode 100644
index 0000000..d2ba0b7
--- /dev/null
+++ b/src/components/TestComponent.vue
@@ -0,0 +1,8 @@
+<template>
+	<div class="text-yellow-500 bg-stone-700">
+		Testing
+	</div>
+</template>
+
+<script setup lang="ts">
+</script>
diff --git a/src/index.css b/src/index.css
new file mode 100644
index 0000000..44996b5
--- /dev/null
+++ b/src/index.css
@@ -0,0 +1,17 @@
+/* From Tailwind */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Other */
+@font-face {
+	font-family: Ubuntu;
+	src: url('/font/Ubuntu-Regular.woff2');
+}
+body {
+	font-family: Ubuntu, system-ui, sans-serif;
+	touch-action: manipulation; /* Prevents non-standard gestures such as double-tap to zoom */
+}
+a {
+	@apply hover:underline hover:cursor-pointer;
+}
diff --git a/src/main.ts b/src/main.ts
new file mode 100644
index 0000000..f30fa57
--- /dev/null
+++ b/src/main.ts
@@ -0,0 +1,8 @@
+import {createApp} from 'vue'
+import {createPinia} from 'pinia';
+import App from './App.vue'
+import './index.css'
+
+const app = createApp(App);
+app.use(createPinia());
+app.mount('#app');
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
new file mode 100644
index 0000000..323c78a
--- /dev/null
+++ b/src/vite-env.d.ts
@@ -0,0 +1,7 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
-- 
cgit v1.2.3