diff options
| author | yum <yum.food.vr@gmail.com> | 2025-05-29 15:56:51 -0700 |
|---|---|---|
| committer | yum <yum.food.vr@gmail.com> | 2025-05-29 15:57:18 -0700 |
| commit | 1ede199387c072a85e8757a6aaec04d2c7cdeba4 (patch) | |
| tree | 68ecedd5f2f4c000c8f8e9045cfed7a49bdee0e4 | |
| parent | 0ebc79354ace812731a5c9a0a670cecd1ea941d7 (diff) | |
Add basic electron+tailwind hello world
| -rw-r--r-- | ui/.gitignore | 3 | ||||
| -rw-r--r-- | ui/index.html | 20 | ||||
| -rw-r--r-- | ui/index.js | 29 | ||||
| -rw-r--r-- | ui/package.json | 24 | ||||
| -rw-r--r-- | ui/postcss.config.js | 6 | ||||
| -rw-r--r-- | ui/preload.js | 7 | ||||
| -rw-r--r-- | ui/src/input.css | 3 | ||||
| -rw-r--r-- | ui/tailwind.config.js | 12 | ||||
| -rw-r--r-- | ui_design.md | 29 |
9 files changed, 133 insertions, 0 deletions
diff --git a/ui/.gitignore b/ui/.gitignore new file mode 100644 index 0000000..2109e19 --- /dev/null +++ b/ui/.gitignore @@ -0,0 +1,3 @@ +build +node_modules +package-lock.json diff --git a/ui/index.html b/ui/index.html new file mode 100644 index 0000000..240e6ca --- /dev/null +++ b/ui/index.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="UTF-8"> + <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'"> + <title>Hello World!</title> + <link rel="stylesheet" href="build/output.css"> </head> +<body> + <div class="container mx-auto mt-10 p-5 bg-gray-100 rounded shadow-lg"> + <h1 class="text-4xl font-bold text-blue-600 text-center"> + Hello World! + </h1> + <p class="text-center text-gray-700 mt-2"> + Welcome to your Electron app with Tailwind CSS! + </p> + </div> + + </body> +</html> + diff --git a/ui/index.js b/ui/index.js new file mode 100644 index 0000000..9751fb2 --- /dev/null +++ b/ui/index.js @@ -0,0 +1,29 @@ +const { app, BrowserWindow, ipcMain } = require('electron'); +const path = require('node:path'); + +function createWindow () { + const mainWindow = new BrowserWindow({ + width: 800, + height: 600, + webPreferences: { + preload: path.join(__dirname, 'preload.js'), + contextIsolation: true, + nodeIntegration: false + } + }); + + mainWindow.loadFile('index.html'); +} + +app.whenReady().then(() => { + createWindow(); + + app.on('activate', function () { + if (BrowserWindow.getAllWindows().length === 0) createWindow(); + }); +}); + +app.on('window-all-closed', function () { + if (process.platform !== 'darwin') app.quit(); +}); + diff --git a/ui/package.json b/ui/package.json new file mode 100644 index 0000000..1c56341 --- /dev/null +++ b/ui/package.json @@ -0,0 +1,24 @@ +{ + "name": "TaSTT", + "version": "1.0.0", + "description": "Speech-to-text tool for VRChat", + "main": "index.js", + "scripts": { + "start": "npm run build:css && electron .", + "build:css": "tailwindcss -i ./src/input.css -o ./build/output.css", + "watch:css": "tailwindcss -i ./src/input.css -o ./build/output.css --watch", + "dev": "npm run watch:css & electron .", + "test": "echo \"Error: no test specified\" && exit 1" + }, + "keywords": [], + "author": "yum_food", + "license": "MIT", + "devDependencies": { + "autoprefixer": "^10.4.21", + "concurrently": "^9.1.2", + "cross-env": "^7.0.3", + "electron": "^36.3.2", + "postcss": "^8.5.4", + "tailwindcss": "^3.4.17" + } +} diff --git a/ui/postcss.config.js b/ui/postcss.config.js new file mode 100644 index 0000000..33ad091 --- /dev/null +++ b/ui/postcss.config.js @@ -0,0 +1,6 @@ +module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +} diff --git a/ui/preload.js b/ui/preload.js new file mode 100644 index 0000000..9f87d19 --- /dev/null +++ b/ui/preload.js @@ -0,0 +1,7 @@ +const { contextBridge, ipcRenderer } = require('electron'); + +contextBridge.exposeInMainWorld('electronAPI', { +}); + +console.log('Preload script loaded.'); + diff --git a/ui/src/input.css b/ui/src/input.css new file mode 100644 index 0000000..b5c61c9 --- /dev/null +++ b/ui/src/input.css @@ -0,0 +1,3 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; diff --git a/ui/tailwind.config.js b/ui/tailwind.config.js new file mode 100644 index 0000000..fa93053 --- /dev/null +++ b/ui/tailwind.config.js @@ -0,0 +1,12 @@ +/** @type {import('tailwindcss').Config} */ +module.exports = { + content: [ + "./index.html", + "./src/**/*.{html,js}", + ], + theme: { + extend: {}, + }, + plugins: [], +} + diff --git a/ui_design.md b/ui_design.md new file mode 100644 index 0000000..e38c632 --- /dev/null +++ b/ui_design.md @@ -0,0 +1,29 @@ +# TaSTT UI + +The TaSTT is built using electron and tailwind.css. + +First, install nodejs. Open PowerShell as administrator: + +```bash +# Delete any existing install. +$ choco uninstall nodejs -y +$ choco install nodejs-lts -y +``` + +Now open a non-admin PowerShell terminal: + +```bash +# Check your node and npm versions. +$ node -v +v22.16.0 +$ npm -v +10.9.2 +# Set up directory +$ mkdir ui +cd ui +npm init -y +npm install --save-dev electron +# Get tailwind and deps +npm install --save-dev tailwindcss@3 postcss autoprefixer concurrently cross-env +npx tailwindcss init -p +``` |