From 1c69c4abf6e54ccab886c23cd6e691179ce6f076 Mon Sep 17 00:00:00 2001 From: Terry Truong 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 --- .eslintrc.js | 26 +++++++++++++++++++ LICENCE.txt | 19 ++++++++++++++ README.md | 54 +++++++++++++++++++++++++++++++++++++++ index.html | 14 ++++++++++ package.json | 23 +++++++++++++++-- postcss.config.js | 6 +++++ public/favicon.png | Bin 0 -> 4837 bytes public/font/Ubuntu-Regular.woff2 | Bin 0 -> 114860 bytes 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 +++++ tailwind.config.js | 11 ++++++++ tsconfig.json | 18 +++++++++++++ tsconfig.node.json | 9 +++++++ vite.config.ts | 17 ++++++++++++ 18 files changed, 252 insertions(+), 2 deletions(-) create mode 100644 .eslintrc.js create mode 100644 LICENCE.txt create mode 100644 README.md create mode 100644 index.html create mode 100644 postcss.config.js create mode 100644 public/favicon.png create mode 100644 public/font/Ubuntu-Regular.woff2 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 create mode 100644 tailwind.config.js create mode 100644 tsconfig.json create mode 100644 tsconfig.node.json create mode 100644 vite.config.ts 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 . + +## 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 @@ + + + + + + Histplorer + + + + +
+ + + 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 Binary files /dev/null and b/public/favicon.png differ diff --git a/public/font/Ubuntu-Regular.woff2 b/public/font/Ubuntu-Regular.woff2 new file mode 100644 index 0000000..667cebb Binary files /dev/null and b/public/font/Ubuntu-Regular.woff2 differ 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 @@ + + + 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 @@ + + + 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 @@ +/// + +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, + }, +}) -- cgit v1.2.3