refactor: rewrite in astro

Closes #196.

.eslintrc.js → .eslintrc.cjs

@@ -8,7 +8,6 @@ module.exports = {
     'kentcdodds/jsx-a11y',
     'prettier',
     'plugin:prettier/recommended',
-    'plugin:@next/next/recommended',
   ],
   plugins: ['prettier'],
   rules: {

.github/workflows/ci.yml

@@ -45,5 +45,5 @@ jobs:
         env:
           CI: true
 
-      - name: Run tests
-        run: pnpm run test
+      # - name: Run tests
+      #   run: pnpm run test

.gitignore

@@ -1,12 +1,11 @@
-# =========================
-# Node.js-Specific Ignores
-# =========================
+# Build output
+dist/
 
-# Build directory
-.next/
+# Generated types
+.astro/
 
-# Static export path
-out/
+# JetBrains setting folder
+.idea/
 
 # swc
 .swc/

.stylelintrc.cjs

@@ -0,0 +1,13 @@
+/** @type {import('stylelint').Config} */
+module.exports = {
+  extends: ['stylelint-config-standard', 'stylelint-config-html/html', 'stylelint-config-html/astro'],
+  rules: {
+    'unit-allowed-list': ['em', 'rem', 'ms', 'ch', 's', 'px', '%', 'deg', 'fr', 'vh', 'vw', 'svh', 'svw'],
+    'at-rule-no-unknown': [
+      true,
+      {
+        ignoreAtRules: ['tailwind'],
+      },
+    ],
+  },
+};

.vscode/extensions.json

@@ -1,3 +1,4 @@
 {
-  "recommendations": ["EditorConfig.EditorConfig", "esbenp.prettier-vscode"]
+  "recommendations": ["astro-build.astro-vscode"],
+  "unwantedRecommendations": []
 }

.vscode/launch.json

@@ -0,0 +1,11 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "command": "./node_modules/.bin/astro dev",
+      "name": "Development server",
+      "request": "launch",
+      "type": "node-terminal"
+    }
+  ]
+}

.vscode/settings.json

@@ -11,6 +11,14 @@
   "typescript.tsdk": "node_modules/typescript/lib",
   "css.validate": false,
   "stylelint.enable": true,
-  "deno.enable": false,
-  "dotenv.enableAutocloaking": true
+  "dotenv.enableAutocloaking": true,
+  "[astro]": {
+    "editor.defaultFormatter": "astro-build.astro-vscode"
+  },
+  "[dotenv]": {
+    "editor.defaultFormatter": "foxundermoon.shell-format"
+  },
+  "[ignore]": {
+    "editor.defaultFormatter": "foxundermoon.shell-format"
+  }
 }

astro.config.mjs

@@ -0,0 +1,11 @@
+// @ts-check
+import { defineConfig } from 'astro/config';
+
+import tailwind from '@astrojs/tailwind';
+
+import react from '@astrojs/react';
+
+// https://astro.build/config
+export default defineConfig({
+  integrations: [tailwind(), react()]
+});

package.json

@@ -1,97 +1,68 @@
 {
-  "name": "@resir014/stream-overlays",
-  "version": "1.0.0",
-  "description": "Experimenting on using React for OBS stream overlays.",
-  "main": "N/A",
-  "repository": "https://github.com/resir014/stream-overlays.git",
-  "author": "Resi Respati <resir014@gmail.com>",
-  "license": "MIT",
-  "private": true,
-  "engines": {
-    "node": "18.x || 20.x"
-  },
+  "name": "stream-overlays",
+  "type": "module",
+  "version": "0.0.1",
   "scripts": {
-    "build": "next build",
-    "dev": "next",
-    "export": "next export",
-    "format": "prettier --write \"./src/**/*.{ts,tsx}\" \"./*.{js,ts,tsx}\"",
-    "lint": "eslint \"**/*.{js,jsx,ts,tsx}\"",
-    "lint:fix": "eslint --fix \"**/*.{js,jsx,ts,tsx}\"",
-    "start": "next start",
-    "test": "is-ci \"test:coverage\" \"test:watch\"",
-    "test:coverage": "jest --coverage",
-    "test:watch": "jest --watch",
-    "test:debug": "node --inspect-brk ./node_modules/jest/bin/jest.js --runInBand --watch",
-    "type-check": "tsc --noEmit",
+    "dev": "astro dev",
+    "start": "astro dev",
+    "build": "astro check && astro build",
+    "preview": "astro preview",
+    "astro": "astro",
+    "type-check": "astro check",
     "validate": "npm run type-check && npm run lint"
   },
   "dependencies": {
-    "@capsizecss/core": "^3.1.1",
-    "@capsizecss/metrics": "^1.3.0",
-    "@fontsource/jetbrains-mono": "^5.0.20",
-    "@headlessui/react": "^1.7.19",
+    "@astrojs/check": "^0.9.4",
+    "@astrojs/react": "^3.6.2",
+    "@astrojs/tailwind": "^5.1.2",
+    "@astrojs/ts-plugin": "^1.10.4",
+    "@capsizecss/core": "^4.1.2",
+    "@capsizecss/metrics": "^3.3.0",
+    "@fontsource-variable/inter": "^5.1.0",
+    "@fontsource-variable/jetbrains-mono": "^5.1.1",
+    "@headlessui/react": "^2.2.0",
     "@notionhq/client": "^2.2.15",
     "@resir014/lerp": "^0.1.1",
     "@tanstack/react-query": "^4.36.1",
     "@trpc/client": "^10.45.2",
-    "@trpc/next": "^10.45.2",
     "@trpc/react-query": "^10.45.2",
     "@trpc/server": "^10.45.2",
+    "astro": "^4.16.10",
     "clsx": "^2.1.1",
-    "date-fns": "^2.30.0",
+    "date-fns": "^4.1.0",
     "dequal": "^2.0.3",
-    "eslint-config-gsap": "^3.0.0",
-    "nanoid": "^5.0.7",
-    "next": "^14.2.3",
-    "normalize.css": "^8.0.1",
-    "query-string": "^9.0.0",
+    "nanoid": "^5.0.8",
+    "query-string": "^9.1.1",
     "react": "^18.3.1",
-    "react-countdown": "^2.3.5",
+    "react-countdown": "^2.3.6",
     "react-dom": "^18.3.1",
     "react-feather": "^2.0.10",
-    "socket.io-client": "^2.4.0",
-    "text-case": "^1.0.9",
-    "typeface-inter": "^3.18.1",
+    "tailwindcss": "^3.4.14",
+    "typescript": "^5.6.3",
     "webfontloader": "^1.6.28",
-    "zod": "^3.23.6",
-    "zustand": "^4.5.2"
+    "zod": "^3.23.8",
+    "zustand": "^5.0.1"
   },
   "devDependencies": {
-    "@babel/eslint-plugin": "^7.24.5",
-    "@babel/preset-react": "^7.24.1",
     "@resir014/tailwind-preset-chungking": "0.1.4-canary.7",
-    "@testing-library/jest-dom": "^6.4.5",
-    "@testing-library/react": "^15.0.6",
-    "@types/jest": "^29.5.12",
     "@types/node": "^20.12.8",
-    "@types/react": "^18.3.1",
-    "@types/react-dom": "^18.3.0",
-    "@types/socket.io-client": "^1.4.36",
-    "@types/webfontloader": "^1.6.38",
-    "@typescript-eslint/eslint-plugin": "^7.8.0",
-    "@typescript-eslint/parser": "^7.8.0",
-    "autoprefixer": "^10.4.19",
-    "cross-env": "^7.0.3",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
     "eslint": "^8.56.0",
+    "eslint-config-gsap": "^3.0.0",
     "eslint-config-kentcdodds": "^21.0.0",
-    "eslint-config-next": "^14.2.3",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-import-resolver-typescript": "^3.6.1",
-    "eslint-plugin-jsx-a11y": "^6.8.0",
-    "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-react": "^7.34.1",
+    "eslint-import-resolver-typescript": "^3.6.3",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-react": "^7.37.2",
     "is-ci-cli": "^2.2.0",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
-    "postcss": "^8.4.38",
-    "postcss-import": "^16.1.0",
-    "prettier": "^3.2.5",
-    "react-intersection-observer": "^9.10.2",
+    "prettier": "^3.3.3",
+    "react-intersection-observer": "^9.13.1",
     "react-is": "^18.3.1",
-    "stylelint": "^15.11.0",
-    "stylelint-config-recommended": "^12.0.0",
-    "tailwindcss": "^3.4.3",
-    "ts-node": "^10.9.2",
-    "typescript": "^5.4.5"
+    "stylelint": "^16.10.0",
+    "stylelint-config-html": "^1.1.0",
+    "stylelint-config-recommended": "^14.0.1",
+    "stylelint-config-standard": "^36.0.1"
   }
 }