diff --git a/.gitignore b/.gitignore index c5eab7e..7f7dc9b 100644 --- a/.gitignore +++ b/.gitignore @@ -40,3 +40,6 @@ yarn-error.log* # typescript *.tsbuildinfo next-env.d.ts + +.astro +dist diff --git a/astro.config.js b/astro.config.js new file mode 100644 index 0000000..81bdc76 --- /dev/null +++ b/astro.config.js @@ -0,0 +1,8 @@ +import { defineConfig } from 'astro/config'; +import tailwind from "@astrojs/tailwind"; +import preact from "@astrojs/preact"; + +// https://astro.build/config +export default defineConfig({ + integrations: [tailwind(), preact({compat: true})] +}); \ No newline at end of file diff --git a/bun.lockb b/bun.lockb index c6d81df..ac1b9d2 100755 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/index.html b/index.html deleted file mode 100644 index 3060b4a..0000000 --- a/index.html +++ /dev/null @@ -1,22 +0,0 @@ - - - - - - - - flash.comma.ai - - -
- - - - diff --git a/jsconfig.json b/jsconfig.json new file mode 100644 index 0000000..ca3d121 --- /dev/null +++ b/jsconfig.json @@ -0,0 +1,12 @@ +{ + "compilerOptions": { + "baseUrl": ".", + "paths": { + "@/*": [ + "src/*" + ] + }, + "jsx": "react-jsx", + "jsxImportSource": "preact" + } +} \ No newline at end of file diff --git a/package.json b/package.json index 9c54987..9e94f8c 100644 --- a/package.json +++ b/package.json @@ -4,9 +4,9 @@ "private": true, "type": "module", "scripts": { - "dev": "vite", - "build": "vite build", - "start": "vite preview", + "dev": "astro dev", + "build": "astro build", + "start": "astro preview", "lint": "eslint . --ext js,jsx --report-unused-disable-directives", "test": "vitest" }, @@ -14,21 +14,22 @@ "node": ">=20.11.0" }, "dependencies": { + "@astrojs/preact": "^3.5.0", + "@astrojs/react": "^3.6.0", + "@astrojs/tailwind": "^5.1.0", "@fontsource-variable/inter": "^5.0.18", "@fontsource-variable/jetbrains-mono": "^5.0.21", + "@testing-library/preact": "^3.2.4", "android-fastboot": "github:commaai/fastboot.js#c3ec6fe3c96a48dab46e23d0c8c861af15b2144a", + "astro": "^4.10.3", "comlink": "^4.4.1", "jssha": "^3.3.1", - "react": "^18.3.1", - "react-dom": "^18.3.1", + "preact": "^10.22.0", "xz-decompress": "^0.2.1" }, "devDependencies": { "@tailwindcss/typography": "^0.5.13", "@testing-library/jest-dom": "^6.4.5", - "@testing-library/react": "^15.0.7", - "@types/react": "^18.3.3", - "@types/react-dom": "^18.3.0", "@vitejs/plugin-react": "^4.3.0", "autoprefixer": "10.4.14", "eslint": "^8.57.0", @@ -37,9 +38,7 @@ "eslint-plugin-react-refresh": "^0.4.7", "jsdom": "^22.1.0", "postcss": "^8.4.38", - "tailwindcss": "^3.4.3", - "vite": "^5.2.12", - "vite-svg-loader": "^5.1.0", + "tailwindcss": "^3.4.4", "vitest": "^1.6.0" } } diff --git a/src/app/favicon.ico b/public/favicon.ico similarity index 100% rename from src/app/favicon.ico rename to public/favicon.ico diff --git a/src/app/icon.png b/public/icon.png similarity index 100% rename from src/app/icon.png rename to public/icon.png diff --git a/src/app/icon.svg b/public/icon.svg similarity index 100% rename from src/app/icon.svg rename to public/icon.svg diff --git a/src/app/App.test.jsx b/src/app/App.test.jsx deleted file mode 100644 index 206de72..0000000 --- a/src/app/App.test.jsx +++ /dev/null @@ -1,10 +0,0 @@ -import { Suspense } from 'react' -import { expect, test } from 'vitest' -import { render, screen } from '@testing-library/react' - -import App from '.' - -test('renders without crashing', () => { - render() - expect(screen.getByText('flash.comma.ai')).toBeInTheDocument() -}) diff --git a/src/app/index.jsx b/src/app/index.jsx deleted file mode 100644 index 54828b1..0000000 --- a/src/app/index.jsx +++ /dev/null @@ -1,162 +0,0 @@ -import { Suspense, lazy } from 'react' - -import comma from '../assets/comma.svg' -import fastbootPorts from '../assets/fastboot-ports.svg' -import zadigCreateNewDevice from '../assets/zadig_create_new_device.png' -import zadigForm from '../assets/zadig_form.png' - -const Flash = lazy(() => import('./Flash')) - -export default function App() { - const version = import.meta.env.VITE_PUBLIC_GIT_SHA || 'dev' - console.info(`flash.comma.ai version: ${version}`); - return ( -
-
-
- comma -

flash.comma.ai

- -

This tool allows you to flash AGNOS onto your comma device.

-

- AGNOS is the Ubuntu-based operating system for your{" "} - comma 3/3X. -

-
-
- -
-

Requirements

-
    -
  • - A web browser which supports WebUSB (such as Google Chrome, Microsoft Edge, Opera), running on Windows, macOS, Linux, or Android. -
    • -
  • - A USB-C cable to power your device outside the car. -
    • -
  • - Another USB-C cable to connect the device to your computer. -
    • -
-

USB Driver

-

- You need additional driver software for Windows before you connect - your device. -

-
    -
  1. - Download and install Zadig. -
    2. -
  2. - Under Device in the menu bar, select Create New Device. - Zadig Create New Device -
    3. -
  3. - Fill in three fields. The first field is just a description and - you can fill in anything. The next two fields are very important. - Fill them in with 18D1 and D00D respectively. - Press "Install Driver" and give it a few minutes to install. - Zadig Form -
    4. -
-

- No additional software is required for macOS or Linux. -

-
-
- -
-

Fastboot

-

Follow these steps to put your device into fastboot mode:

-
    -
  1. Power off the device and wait for the LEDs to switch off.
    2. -
  2. Connect power to the OBD-C port (port 1).
    3. -
  3. Then, quickly connect - the device to your computer using the USB-C port (port 2).
    4. -
  4. After a few seconds, the device should indicate it's in fastboot mode and show its serial number.
    5. -
- image showing comma three and two ports. the upper port is labeled 1. the lower port is labeled 2. -

- If your device shows the comma spinner with a loading bar, then it's not in fastboot mode. - Unplug all cables, wait for the device to switch off, and try again. -

-
-
- -
-

Flashing

-

- After your device is in fastboot mode, you can click the button to start flashing. A prompt may appear to - select a device; choose the device labeled "Android". -

-

- The process can take 15+ minutes depending on your internet connection and system performance. Do not - unplug the device until all steps are complete. -

-
-
- -
-

Troubleshooting

-

Cannot enter fastboot or device says "Press any key to continue"

-

- Try using a different USB cable or USB port. Sometimes USB 2.0 ports work better than USB 3.0 (blue) ports. - If you're using a USB hub, try connecting the device directly to your computer, or alternatively use a - USB hub between your computer and the device. -

-

My device's screen is blank

-

- The device can still be in fastboot mode and reflashed normally if the screen isn't displaying - anything. A blank screen is usually caused by installing older software that doesn't support newer - displays. If a reflash doesn't fix the blank screen, then the device's display may be damaged. -

-

After flashing, device says unable to mount data partition

-

- This is expected after the filesystem is erased. Press confirm to finish resetting your device. -

-

General Tips

-
    -
  • Try another computer or OS
    • -
  • Try different USB ports on your computer
    • -
  • Try different USB-C cables, including the OBD-C cable that came with the device
    • -
-

Other questions

-

- If you need help, join our Discord server and go to - the #hw-three-3x channel. -

-
- -
-
- flash.comma.ai version: {version} -
-
- -
- Loading...

}> - - -
- -
- flash.comma.ai version: {version.substring(0, 7)} -
-
- ) -} diff --git a/src/app/Flash.jsx b/src/components/Flash.jsx similarity index 99% rename from src/app/Flash.jsx rename to src/components/Flash.jsx index d7c544d..1d8589b 100644 --- a/src/app/Flash.jsx +++ b/src/components/Flash.jsx @@ -1,4 +1,4 @@ -import { useCallback } from 'react' +import { useCallback } from 'preact/hooks' import { Step, Error, useFastboot } from '@/utils/fastboot' @@ -228,7 +228,7 @@ export default function Flash() { onClick={handleContinue} > cable import('./Flash')) + +export default function LazyFlash() { + return ( +
+ Loading...

}> + + +
+ ) +} \ No newline at end of file diff --git a/src/env.d.ts b/src/env.d.ts new file mode 100644 index 0000000..8c34fb4 --- /dev/null +++ b/src/env.d.ts @@ -0,0 +1 @@ +/// \ No newline at end of file diff --git a/src/index.css b/src/index.css deleted file mode 100644 index b5c61c9..0000000 --- a/src/index.css +++ /dev/null @@ -1,3 +0,0 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; diff --git a/src/main.jsx b/src/main.jsx deleted file mode 100644 index 40fea3e..0000000 --- a/src/main.jsx +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react' -import ReactDOM from 'react-dom/client' - -import '@fontsource-variable/inter' -import '@fontsource-variable/jetbrains-mono' - -import './index.css' -import App from './app' - -ReactDOM.createRoot(document.getElementById('root')).render( - - - , -) diff --git a/src/pages/index.astro b/src/pages/index.astro new file mode 100644 index 0000000..52b7a55 --- /dev/null +++ b/src/pages/index.astro @@ -0,0 +1,170 @@ +--- +import '@fontsource-variable/inter' +import '@fontsource-variable/jetbrains-mono' + +import comma from '@/assets/comma.svg' +import fastbootPorts from '@/assets/fastboot-ports.svg' +import zadigCreateNewDevice from '@/assets/zadig_create_new_device.png' +import zadigForm from '@/assets/zadig_form.png' + +import LazyFlash from '../components/LazyFlash.jsx'; + +const version = import.meta.env.VITE_PUBLIC_GIT_SHA || 'dev' + +--- + + + + + + + + flash.comma.ai + + +
+
+
+ comma +

flash.comma.ai

+ +

This tool allows you to flash AGNOS onto your comma device.

+

+ AGNOS is the Ubuntu-based operating system for your{" "} + comma 3/3X. +

+
+
+ +
+

Requirements

+
    +
  • + A web browser which supports WebUSB (such as Google Chrome, Microsoft Edge, Opera), running on Windows, macOS, Linux, or Android. +
    • +
  • + A USB-C cable to power your device outside the car. +
    • +
  • + Another USB-C cable to connect the device to your computer. +
    • +
+

USB Driver

+

+ You need additional driver software for Windows before you connect + your device. +

+
    +
  1. + Download and install Zadig. +
    2. +
  2. + Under Device in the menu bar, select Create New Device. + Zadig Create New Device +
    3. +
  3. + Fill in three fields. The first field is just a description and + you can fill in anything. The next two fields are very important. + Fill them in with 18D1 and D00D respectively. + Press "Install Driver" and give it a few minutes to install. + Zadig Form +
    4. +
+

+ No additional software is required for macOS or Linux. +

+
+
+ +
+

Fastboot

+

Follow these steps to put your device into fastboot mode:

+
    +
  1. Power off the device and wait for the LEDs to switch off.
    2. +
  2. Connect power to the OBD-C port (port 1).
    3. +
  3. Then, quickly connect + the device to your computer using the USB-C port (port 2).
    4. +
  4. After a few seconds, the device should indicate it's in fastboot mode and show its serial number.
    5. +
+ image showing comma three and two ports. the upper port is labeled 1. the lower port is labeled 2. +

+ If your device shows the comma spinner with a loading bar, then it's not in fastboot mode. + Unplug all cables, wait for the device to switch off, and try again. +

+
+
+ +
+

Flashing

+

+ After your device is in fastboot mode, you can click the button to start flashing. A prompt may appear to + select a device; choose the device labeled "Android". +

+

+ The process can take 15+ minutes depending on your internet connection and system performance. Do not + unplug the device until all steps are complete. +

+
+
+ +
+

Troubleshooting

+

Cannot enter fastboot or device says "Press any key to continue"

+

+ Try using a different USB cable or USB port. Sometimes USB 2.0 ports work better than USB 3.0 (blue) ports. + If you're using a USB hub, try connecting the device directly to your computer, or alternatively use a + USB hub between your computer and the device. +

+

My device's screen is blank

+

+ The device can still be in fastboot mode and reflashed normally if the screen isn't displaying + anything. A blank screen is usually caused by installing older software that doesn't support newer + displays. If a reflash doesn't fix the blank screen, then the device's display may be damaged. +

+

After flashing, device says unable to mount data partition

+

+ This is expected after the filesystem is erased. Press confirm to finish resetting your device. +

+

General Tips

+
    +
  • Try another computer or OS
    • +
  • Try different USB ports on your computer
    • +
  • Try different USB-C cables, including the OBD-C cable that came with the device
    • +
+

Other questions

+

+ If you need help, join our Discord server and go to + the #hw-three-3x channel. +

+
+ + +
+ + + +
+ flash.comma.ai version: {version.substring(0, 7)} +
+
+ + + diff --git a/src/utils/fastboot.js b/src/utils/fastboot.js index a9af865..e6fdc4d 100644 --- a/src/utils/fastboot.js +++ b/src/utils/fastboot.js @@ -1,4 +1,4 @@ -import { useEffect, useRef, useState } from 'react' +import { useEffect, useRef, useState } from 'preact/hooks' import { FastbootDevice, setDebugLevel } from 'android-fastboot' import * as Comlink from 'comlink' @@ -101,7 +101,7 @@ export function useFastboot() { const imageWorker = useImageWorker() const fastboot = useRef(new FastbootDevice()) - /** @type {React.RefObject} */ + /** @type {preact.RefObject} */ const manifest = useRef(null) function setStep(step) { diff --git a/src/utils/image.js b/src/utils/image.js index ed27f09..e61172a 100644 --- a/src/utils/image.js +++ b/src/utils/image.js @@ -1,4 +1,4 @@ -import { useEffect, useRef } from 'react' +import { useEffect, useRef } from 'preact/hooks' import * as Comlink from 'comlink' diff --git a/tailwind.config.js b/tailwind.config.js index f1f20e2..b1fee63 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,9 +1,6 @@ /** @type {import('tailwindcss').Config} */ export default { - content: [ - './index.html', - './src/**/*.{js,jsx}', - ], + content: ['./src/**/*.{astro,html,js,jsx,md,mdx}'], theme: { extend: { backgroundImage: {