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

18 files changed, 252 insertions, 2 deletions

diff --git a/.eslintrc.js b/.eslintrc.js
new file mode 100644
index 0000000..556ae40
--- /dev/null
+++ b/.eslintrc.js
@@ -0,0 +1,26 @@
+module.exports = {
+    "env": {
+        "browser": true,
+        "es2021": true
+    },
+    "extends": [
+        "eslint:recommended",
+        "plugin:vue/vue3-essential",
+        "plugin:@typescript-eslint/recommended"
+    ],
+    "overrides": [
+    ],
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "ecmaVersion": "latest",
+        "sourceType": "module"
+    },
+    "plugins": [
+        "vue",
+        "@typescript-eslint"
+    ],
+    "rules": {
+        "@typescript-eslint/no-non-null-assertion": "off",
+        "no-constant-condition": "off",
+    }
+}
diff --git a/LICENCE.txt b/LICENCE.txt
new file mode 100644
index 0000000..47844fb
--- /dev/null
+++ b/LICENCE.txt
@@ -0,0 +1,19 @@
+Copyright 2022 Terry Truong
+
+Permission is hereby granted, free of charge, to any person obtaining a
+copy of this software and associated documentation files (the "Software"),
+to deal in the Software without restriction, including without limitation
+the rights to use, copy, modify, merge, publish, distribute, sublicense,
+and/or sell copies of the Software, and to permit persons to whom the
+Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included
+in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR
+OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
+ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+OTHER DEALINGS IN THE SOFTWARE.
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..3d98947
--- /dev/null
+++ b/README.md
@@ -0,0 +1,54 @@
+# Histplorer
+
+An interactive historical timeline.
+[Available online](https://terryt.dev/tilo/).
+
+## Project Overview
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+tempor incididunt ut labore et dolore magna aliqua.
+
+## Files
+
+### Project Level
+-   **package.json**:       Contains npm project information, such as package dependencies
+-   **package-lock.json**:  Auto-generated by npm. Used for replicable installations
+-   **LICENCE.txt**:        This project's license (MIT)
+### Client & Server
+-   **src**:                Contains most of the client-side code
+-   **index.html**:         Holds code for the main page, into which code from 'src' will be included
+-   **public**:             Contains files to be copied unchanged in the client's production build
+-   **backend**:            Contains code for the server, and for generating history data
+### Configuration
+-   **vite.config.js**:     For configuring Vite
+-   **tailwind.config.js**: For configuring Tailwind
+-   **postcss.config.js**:  For configuring Tailwind
+-   **tsconfig.json**:      For configuring Typescript
+-   **tsconfig.node.json**: For configuring Typescript
+### Other
+-   **.gitignore**:         Lists files to be ignored if using Git
+
+## Setup Instructions
+
+### Client Side
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+tempor incididunt ut labore et dolore magna aliqua.
+
+### Server Side
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+tempor incididunt ut labore et dolore magna aliqua.
+
+### Running Histplorer
+1.  In `backend/`, run `./server.py`, which starts a basic HTTP server that provides
+    history data on port 8000.
+1.  Running `npm run dev` starts the dev server.
+1.  Open a web browser, and navigate to <http://localhost:5713>.
+
+## Deploying the Website
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+tempor incididunt ut labore et dolore magna aliqua.
+
+## Licence
+
+Histplorer is licensed under the MIT Licence.
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..09d25a7
--- /dev/null
+++ b/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Histplorer</title>
+	<link rel="icon" href="/favicon.png" />
+	<link rel="preload" href="/font/Ubuntu-Regular.woff2" as="font" type="font/woff2" crossorigin/>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
index 882895f..00b3e1b 100644
--- a/package.json
+++ b/package.json
@@ -1,13 +1,32 @@
 {
   "name": "histplorer",
+  "private": true,
   "version": "0.1.0",
   "description": "An interactive historical timeline",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "dev": "vite",
+    "build": "vue-tsc --noEmit && vite build",
+    "preview": "vite preview",
+    "tsc": "vue-tsc --noEmit"
   },
   "author": "Terry Truong",
   "license": "MIT",
+  "dependencies": {
+    "pinia": "^2.0.22",
+    "vue": "^3.2.37"
+  },
   "devDependencies": {
-    "smartcrop-cli": "^2.0.3"
+    "@typescript-eslint/eslint-plugin": "^5.39.0",
+    "@typescript-eslint/parser": "^5.39.0",
+    "@vitejs/plugin-vue": "^3.1.0",
+    "autoprefixer": "^10.4.12",
+    "eslint": "^8.24.0",
+    "eslint-plugin-vue": "^9.6.0",
+    "postcss": "^8.4.17",
+    "smartcrop-cli": "^2.0.3",
+    "tailwindcss": "^3.1.8",
+    "typescript": "^4.6.4",
+    "vite": "^3.1.0",
+    "vue-tsc": "^0.40.4"
   }
 }
diff --git a/postcss.config.js b/postcss.config.js
new file mode 100644
index 0000000..33ad091
--- /dev/null
+++ b/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/public/favicon.png b/public/favicon.png
new file mode 100644
index 0000000..41776c9
--- /dev/null
+++ b/public/favicon.png
diff --git a/public/font/Ubuntu-Regular.woff2 b/public/font/Ubuntu-Regular.woff2
new file mode 100644
index 0000000..667cebb
--- /dev/null
+++ b/public/font/Ubuntu-Regular.woff2
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
+}
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..7849f91
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,11 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./index.html",
+    "./src/**/*.{vue,js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..d4aefa2
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "strict": true,
+    "jsx": "preserve",
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "lib": ["ESNext", "DOM"],
+    "skipLibCheck": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/tsconfig.node.json b/tsconfig.node.json
new file mode 100644
index 0000000..9d31e2a
--- /dev/null
+++ b/tsconfig.node.json
@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100644
index 0000000..895d557
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,17 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+	plugins: [vue()],
+	base: '/',
+	server: {
+		proxy: {'/data': 'http://localhost:8000', '/hist_data': 'http://localhost:8000'},
+	watch: {
+		ignored: ['**/backend', '**/public'],
+	},
+	},
+	build: {
+		sourcemap: true,
+	},
+})