Initial project setup

.gitignore

@@ -0,0 +1 @@
+notes/

kelikatti-api/.gitignore

@@ -0,0 +1 @@
+target/

kelikatti-api/Cargo.toml

@@ -0,0 +1,11 @@
+[package]
+name = "kelikatti-api"
+version = "0.1.0"
+edition = "2024"
+
+[dependencies]
+actix-web = "4.10.2"
+env_logger = "0.11.8"
+log = "0.4.27"
+serde = { version = "1.0.219", features = ["std", "derive"] }
+serde_json = "1.0.140"

kelikatti-api/src/lib.rs

@@ -0,0 +1,7 @@
+use serde::{Deserialize, Serialize};
+
+#[derive(Serialize, Deserialize)]
+pub struct WeatherDTO {}
+
+#[derive(Serialize, Deserialize)]
+pub struct ForecastDTO {}

kelikatti-api/src/main.rs

@@ -0,0 +1,41 @@
+use actix_web::{App, HttpResponse, HttpServer, middleware, web};
+use log::info;
+use serde::{Deserialize, Serialize};
+
+#[derive(Serialize, Deserialize)]
+pub struct Example {
+    key: String,
+    value: u32,
+    visible: bool,
+}
+
+/// This handler uses json extractor
+async fn index() -> HttpResponse {
+    info!("Called index!");
+    HttpResponse::Ok().body("Hello\n")
+}
+
+async fn post(example: web::Json<Example>) -> HttpResponse {
+    HttpResponse::Ok().json(example.0)
+}
+
+#[actix_web::main]
+async fn main() -> std::io::Result<()> {
+    const PORT: u16 = 8080;
+    env_logger::init_from_env(env_logger::Env::new().default_filter_or("info"));
+
+    info!("Server listening on port {PORT}");
+
+    HttpServer::new(|| {
+        App::new()
+            // enable logger
+            .wrap(middleware::Logger::default())
+            // global configuration
+            .app_data(web::JsonConfig::default().limit(4096))
+            .service(web::resource("/").route(web::get().to(index)))
+            .service(web::resource("/post").route(web::post().to(post)))
+    })
+    .bind(("127.0.0.1", PORT))?
+    .run()
+    .await
+}

kelikatti-web/.editorconfig

@@ -0,0 +1,10 @@
+[*.{js,jsx,mjs,cjs,ts,tsx,mts,cts,vue,css,scss,sass,less,styl}]
+charset = utf-8
+indent_size = 4
+tab_width = 4
+indent_style = tab
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+end_of_line = lf
+max_line_length = 100

kelikatti-web/.gitignore

@@ -0,0 +1,30 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+*.tsbuildinfo

kelikatti-web/.prettierrc

@@ -0,0 +1,8 @@
+{
+	"$schema": "https://json.schemastore.org/prettierrc",
+	"semi": false,
+	"singleQuote": true,
+	"printWidth": 100,
+	"useTabs": true,
+	"trailingComma": "es5"
+}

kelikatti-web/.vscode/extensions.json

@@ -0,0 +1,9 @@
+{
+  "recommendations": [
+    "Vue.volar",
+    "dbaeumer.vscode-eslint",
+    "EditorConfig.EditorConfig",
+    "oxc.oxc-vscode",
+    "esbenp.prettier-vscode"
+  ]
+}

kelikatti-web/README.md

@@ -0,0 +1,39 @@
+# kelikatti-web
+
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
+
+## Type Support for `.vue` Imports in TS
+
+TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vite.dev/config/).
+
+## Project Setup
+
+```sh
+npm install
+```
+
+### Compile and Hot-Reload for Development
+
+```sh
+npm run dev
+```
+
+### Type-Check, Compile and Minify for Production
+
+```sh
+npm run build
+```
+
+### Lint with [ESLint](https://eslint.org/)
+
+```sh
+npm run lint
+```

kelikatti-web/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

kelikatti-web/eslint.config.ts

@@ -0,0 +1,24 @@
+import { globalIgnores } from 'eslint/config'
+import { defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript'
+import pluginVue from 'eslint-plugin-vue'
+import pluginOxlint from 'eslint-plugin-oxlint'
+import skipFormatting from '@vue/eslint-config-prettier/skip-formatting'
+
+// To allow more languages other than `ts` in `.vue` files, uncomment the following lines:
+// import { configureVueProject } from '@vue/eslint-config-typescript'
+// configureVueProject({ scriptLangs: ['ts', 'tsx'] })
+// More info at https://github.com/vuejs/eslint-config-typescript/#advanced-setup
+
+export default defineConfigWithVueTs(
+  {
+    name: 'app/files-to-lint',
+    files: ['**/*.{ts,mts,tsx,vue}'],
+  },
+
+  globalIgnores(['**/dist/**', '**/dist-ssr/**', '**/coverage/**']),
+
+  pluginVue.configs['flat/essential'],
+  vueTsConfigs.recommended,
+  ...pluginOxlint.configs['flat/recommended'],
+  skipFormatting,
+)

kelikatti-web/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="">
+
+<head>
+	<meta charset="UTF-8">
+	<link rel="icon" href="/favicon.ico">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Kelikatti</title>
+</head>
+
+<body>
+	<div id="app"></div>
+	<script type="module" src="/src/main.ts"></script>
+</body>
+
+</html>

kelikatti-web/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "kelikatti-web",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "run-p type-check \"build-only {@}\" --",
+    "preview": "vite preview",
+    "build-only": "vite build",
+    "type-check": "vue-tsc --build",
+    "lint:oxlint": "oxlint . --fix -D correctness --ignore-path .gitignore",
+    "lint:eslint": "eslint . --fix",
+    "lint": "run-s lint:*",
+    "format": "prettier --write src/"
+  },
+  "dependencies": {
+    "vue": "^3.5.13",
+    "vue-router": "^4.5.0"
+  },
+  "devDependencies": {
+    "@tsconfig/node22": "^22.0.1",
+    "@types/node": "^22.14.0",
+    "@vitejs/plugin-vue": "^5.2.3",
+    "@vitejs/plugin-vue-jsx": "^4.1.2",
+    "@vue/eslint-config-prettier": "^10.2.0",
+    "@vue/eslint-config-typescript": "^14.5.0",
+    "@vue/tsconfig": "^0.7.0",
+    "eslint": "^9.22.0",
+    "eslint-plugin-oxlint": "^0.16.0",
+    "eslint-plugin-vue": "~10.0.0",
+    "jiti": "^2.4.2",
+    "npm-run-all2": "^7.0.2",
+    "oxlint": "^0.16.0",
+    "prettier": "3.5.3",
+    "typescript": "~5.8.0",
+    "vite": "^6.2.4",
+    "vite-plugin-vue-devtools": "^7.7.2",
+    "vue-tsc": "^2.2.8"
+  }
+}

kelikatti-web/src/App.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import { RouterView } from 'vue-router'
+</script>
+
+<template>
+	<RouterView />
+</template>

kelikatti-web/src/components/forecast.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { ForecastDTO } from '../types'
+
+defineProps<{
+	data: ForecastDTO
+}>()
+</script>
+
+<template>
+	<div class="container">
+		<h2>Forecast!</h2>
+		<div v-for="weather in data.list">
+			<ul>
+				<li>temparature: {{ weather.temperature }}</li>
+				<li>feels like: {{ weather.feels_like }}</li>
+			</ul>
+		</div>
+	</div>
+</template>
+
+<style scoped></style>

kelikatti-web/src/components/weather.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { WeatherDTO } from '../types'
+
+defineProps<{
+	data: WeatherDTO
+}>()
+</script>
+
+<template>
+	<div class="container">
+		<h2>Weather!</h2>
+		<div>
+			<div>temparature: {{ data.temperature }}</div>
+			<div>feels like: {{ data.feels_like }}</div>
+		</div>
+	</div>
+</template>
+
+<style scoped></style>

kelikatti-web/src/global.ts

@@ -0,0 +1,72 @@
+import { reactive } from 'vue'
+import type { ForecastDTO, WeatherDTO } from './types'
+
+class Fetched<T> {
+	data?: T = undefined
+	loading: boolean = false
+	error?: string = undefined
+
+	reset() {
+		this.data = undefined
+		this.loading = false
+		this.error = undefined
+	}
+
+	setSuccess(value: T) {
+		this.data = value
+		this.loading = false
+		this.error = undefined
+	}
+
+	setError(err: string) {
+		this.data = undefined
+		this.loading = false
+		this.error = err
+	}
+
+	/** Take a promise and call either setSuccess or setError depending on result.
+	 *
+	 *	Returns a promise that duplicates the resolve/rejection.
+	 * */
+	resolve(promise: Promise<T>): Promise<T> {
+		return new Promise((res, rej) => {
+			promise
+				.then((data) => {
+					this.setSuccess(data)
+					res(data)
+				})
+				.catch((err) => {
+					this.setError(err)
+					rej(err)
+				})
+		})
+	}
+}
+
+export const weather: Fetched<WeatherDTO> = reactive(new Fetched<WeatherDTO>())
+export const forecast: Fetched<ForecastDTO> = reactive(new Fetched<ForecastDTO>())
+
+class Popup {
+	message?: string = undefined
+	visible: boolean = false
+	private timeoutHandle?: number = undefined
+
+	show(message: string, timeoutMs: number = 5000) {
+		this.message = message
+		this.visible = true
+		this.timeoutHandle = setTimeout(() => {
+			this.visible = false
+			this.timeoutHandle = undefined
+		}, timeoutMs)
+	}
+
+	hide() {
+		this.visible = false
+		if (this.timeoutHandle !== undefined) {
+			clearTimeout(this.timeoutHandle)
+			this.timeoutHandle = undefined
+		}
+	}
+}
+
+export const popup: Popup = reactive(new Popup())

kelikatti-web/src/main.ts

@@ -0,0 +1,8 @@
+import './styles.css'
+import './theme.css'
+
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'
+
+createApp(App).use(router).mount('#app')

kelikatti-web/src/router.ts

@@ -0,0 +1,15 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import DashboardView from './views/dashboard.vue'
+
+const router = createRouter({
+	history: createWebHistory(),
+	routes: [
+		{
+			path: '/',
+			name: 'dashboard',
+			component: DashboardView,
+		},
+	],
+})
+
+export default router

kelikatti-web/src/styles.css

@@ -0,0 +1,63 @@
+body {
+	margin: 0;
+}
+
+:root {
+	font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+	font-size: 16px;
+	line-height: 24px;
+	font-weight: 400;
+	font-synthesis: none;
+	text-rendering: optimizeLegibility;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	-webkit-text-size-adjust: 100%;
+}
+
+.page {
+	margin: 1em;
+	display: flex;
+	flex-direction: column;
+	justify-content: flex-start;
+	align-items: flex-start;
+}
+
+.stretch {
+	width: 100%;
+}
+
+.logo {
+	height: 6em;
+	padding: 1.5em;
+	will-change: filter;
+	transition: 0.75s;
+}
+
+.row {
+	display: flex;
+	justify-content: flex-start;
+}
+
+a {
+	font-weight: 500;
+	text-decoration: inherit;
+}
+
+input,
+button {
+	border-radius: 2px;
+	border: 1px solid transparent;
+	padding: 0.5em 1.2em;
+	font-size: 1em;
+	font-weight: 500;
+	font-family: inherit;
+}
+
+button {
+	cursor: pointer;
+}
+
+input,
+button {
+	outline: none;
+}

kelikatti-web/src/theme.css

@@ -0,0 +1,61 @@
+:root {
+	--primary-1: #f6f6f6;
+	--primary-2: #a0a0a0;
+	--background: #2f2f2f;
+	--secondary-1: #2e8b57;
+	--error: #ff3333;
+	--error-contrast: #3f1f1ff0;
+	--button-border: #396cd8;
+	--button-background: #0f0f0f98;
+	--button-background-active: #0f0f0f69;
+	color: var(--primary-1);
+	background-color: var(--background);
+}
+
+a {
+	color: #646cff;
+}
+
+a:hover {
+	color: #24c8db;
+}
+
+input,
+button {
+	color: var(--primary);
+	background-color: var(--button-background);
+	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
+}
+
+button:hover {
+	border-color: var(--button-border);
+}
+
+button:active {
+	border-color: var(--button-border);
+	background-color: var(--button-background-active);
+}
+
+.c-primary-1 {
+	color: var(--primary-1);
+}
+
+.c-primary-2 {
+	color: var(--primary-2);
+}
+
+.c-secondary-1 {
+	color: var(--secondary-1);
+}
+
+.c-error {
+	color: var(--error);
+}
+
+.c-bg {
+	background-color: var(--background);
+}
+
+.c-bg-error {
+	background-color: var(--error-contrast);
+}

kelikatti-web/src/types.ts

@@ -0,0 +1,31 @@
+export type Condition = 'Thunderstorm' | 'Drizzle' | 'Rain' | 'Snow' | 'Fog'
+
+export type Cloudiness = 'Clear' | 'Few' | 'Cloudy' | 'Overcast'
+
+export interface WeatherDTO {
+	/** Is the report from time between sunrise and sunset? */
+	is_day: boolean
+	/** Temperature in Celsius */
+	temperature?: number
+	/** Perception of temperature in Celsius */
+	feels_like?: number
+	/** Wind speed in meters/second */
+	wind_speed?: number
+	/** Humidity percentage (0 - 100) */
+	humidity?: number
+	/** Meteorological wind direction in degrees
+	 *
+	 * 0: From north
+	 * 90: From east
+	 * 180: Form south
+	 * 270: From west
+	 * */
+	wind_degrees?: number
+	cloudiness?: Cloudiness
+	/** List of possible weather phenomena */
+	conditions: Condition[]
+}
+
+export interface ForecastDTO {
+	list: WeatherDTO[]
+}

kelikatti-web/src/views/dashboard.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import Weather from '../components/weather.vue'
+import Forecast from '../components/forecast.vue'
+import { ForecastDTO, WeatherDTO } from '../types';
+
+const weather: WeatherDTO = {
+	is_day: true,
+	cloudiness: 'Clear',
+	temperature: 10.5,
+	feels_like: 7.0,
+	wind_speed: 3.0,
+	wind_degrees: 170,
+	conditions: [],
+};
+
+const forecast: ForecastDTO = {
+	list: [weather, weather, weather],
+};
+
+</script>
+
+<template>
+	<div class="page">
+		<header class="header">
+			<h1>Kelikatti</h1>
+			<h2>It's weather with cats!</h2>
+		</header>
+		<button>Ayy lmao</button>
+		<div class="weather-container">
+			<Weather :data=weather />
+		</div>
+		<div class="forecast-container">
+			<Forecast :data=forecast />
+		</div>
+	</div>
+</template>
+
+<style scoped></style>

kelikatti-web/tsconfig.app.json

@@ -0,0 +1,20 @@
+{
+	"extends": "@vue/tsconfig/tsconfig.dom.json",
+	"include": [
+		"env.d.ts",
+		"src/**/*",
+		"src/**/*.vue",
+		"src/*.vue"
+	],
+	"exclude": [
+		"src/**/__tests__/*"
+	],
+	"compilerOptions": {
+		"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+		"paths": {
+			"@/*": [
+				"./src/*"
+			]
+		}
+	}
+}

kelikatti-web/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    },
+    {
+      "path": "./tsconfig.app.json"
+    }
+  ]
+}

kelikatti-web/tsconfig.node.json

@@ -0,0 +1,19 @@
+{
+  "extends": "@tsconfig/node22/tsconfig.json",
+  "include": [
+    "vite.config.*",
+    "vitest.config.*",
+    "cypress.config.*",
+    "nightwatch.conf.*",
+    "playwright.config.*",
+    "eslint.config.*"
+  ],
+  "compilerOptions": {
+    "noEmit": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "types": ["node"]
+  }
+}

kelikatti-web/vite.config.ts

@@ -0,0 +1,20 @@
+import { fileURLToPath, URL } from 'node:url'
+
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import vueJsx from '@vitejs/plugin-vue-jsx'
+import vueDevTools from 'vite-plugin-vue-devtools'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [
+    vue(),
+    vueJsx(),
+    vueDevTools(),
+  ],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url))
+    },
+  },
+})