xevion/banner
1
0
Fork 0
mirror of https://github.com/Xevion/banner.git synced 2026-01-31 00:23:31 -06:00
Code Issues Packages Projects Releases Wiki Activity

feat: modernize build tooling and add CI/CD workflow

Browse Source 
Switch to Bun for 2-5x faster frontend builds, implement cargo-chef for
reliable Rust dependency caching, and add Biome for fast code
formatting.

Build system improvements:
- Replace pnpm with Bun for frontend package management
- Add cargo-chef to Dockerfile for better Rust build layer caching
- Update all commands to use bun instead of pnpm

Developer experience:
- Add comprehensive Justfile commands (format, format-check, db)
- Implement automated PostgreSQL Docker setup with random port
allocation
- Add stricter checks (--deny warnings on clippy, --all-features flag)

Code quality:
- Add Biome formatter for 10-100x faster TypeScript/JavaScript
formatting
- Add GitHub Actions CI/CD workflow for automated checks
- Update .dockerignore with comprehensive exclusions
- Format all code with cargo fmt (Rust) and Biome (TypeScript)

All changes maintain backward compatibility and can be tested
incrementally.
This commit is contained in:
Ryan Walters
2025-11-18 11:55:06 -06:00
parent 3292d35521
commit 966732a6d2
27 changed files with 1658 additions and 6939 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/biome.json
+30
View File
@@ -0,0 +1,30 @@
{
"$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
"vcs": {
"enabled": true,
"clientKind": "git",
"useIgnoreFile": true
},
"files": {
"ignoreUnknown": false,
"ignore": ["dist/", "node_modules/", ".tanstack/"]
},
"formatter": {
"enabled": true,
"indentStyle": "space",
"indentWidth": 2,
"lineWidth": 100,
"lineEnding": "lf"
},
"javascript": {
"formatter": {
"quoteStyle": "double",
"trailingCommas": "es5",
"semicolons": "always",
"arrowParentheses": "always"
}
},
"linter": {
"enabled": false
}
}
web/bun.lock
+1297
View File
File diff suppressed because it is too large Load Diff
web/eslint.config.js
+18 -21
View File
@@ -1,24 +1,24 @@
import js from '@eslint/js';
import tseslint from 'typescript-eslint';
import react from 'eslint-plugin-react';
import reactHooks from 'eslint-plugin-react-hooks';
import reactRefresh from 'eslint-plugin-react-refresh';
import js from "@eslint/js";
import tseslint from "typescript-eslint";
import react from "eslint-plugin-react";
import reactHooks from "eslint-plugin-react-hooks";
import reactRefresh from "eslint-plugin-react-refresh";
export default tseslint.config(
// Ignore generated files and build outputs
{
ignores: ['dist', 'node_modules', 'src/routeTree.gen.ts', '*.config.js'],
ignores: ["dist", "node_modules", "src/routeTree.gen.ts", "*.config.js"],
},
// Base configs
js.configs.recommended,
...tseslint.configs.recommendedTypeChecked,
// React plugin configuration
{
files: ['**/*.{ts,tsx}'],
files: ["**/*.{ts,tsx}"],
plugins: {
react,
'react-hooks': reactHooks,
'react-refresh': reactRefresh,
"react-hooks": reactHooks,
"react-refresh": reactRefresh,
},
languageOptions: {
parserOptions: {
@@ -31,33 +31,30 @@ export default tseslint.config(
},
settings: {
react: {
version: '19.0',
version: "19.0",
},
},
rules: {
// React rules
...react.configs.recommended.rules,
...react.configs['jsx-runtime'].rules,
...react.configs["jsx-runtime"].rules,
...reactHooks.configs.recommended.rules,
// React Refresh
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
"react-refresh/only-export-components": ["warn", { allowConstantExport: true }],
// TypeScript overrides
'@typescript-eslint/no-unused-vars': [
'error',
"@typescript-eslint/no-unused-vars": [
"error",
{
argsIgnorePattern: '^_',
varsIgnorePattern: '^_',
argsIgnorePattern: "^_",
varsIgnorePattern: "^_",
},
],
'@typescript-eslint/no-explicit-any': 'warn',
"@typescript-eslint/no-explicit-any": "warn",
// Disable prop-types since we're using TypeScript
'react/prop-types': 'off',
"react/prop-types": "off",
},
}
);
web/package.json
+5 -1
View File
@@ -8,7 +8,10 @@
"build": "vite build && tsc",
"serve": "vite preview",
"test": "vitest run",
"lint": "tsc && eslint . --ext .ts,.tsx"
"lint": "tsc && eslint . --ext .ts,.tsx",
"typecheck": "tsc --noEmit",
"format": "biome format --write .",
"format:check": "biome format ."
},
"dependencies": {
"@radix-ui/themes": "^3.2.1",
@@ -24,6 +27,7 @@
"recharts": "^3.2.0"
},
"devDependencies": {
"@biomejs/biome": "^1.9.4",
"@eslint/js": "^9.39.0",
"@testing-library/dom": "^10.4.0",
"@testing-library/react": "^16.2.0",
web/pnpm-lock.yaml
Generated
-6749
View File
File diff suppressed because it is too large Load Diff
web/src/App.css
+1 -2
View File
@@ -1,7 +1,6 @@
.App {
min-height: 100vh;
font-family:
-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
"Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
background-color: var(--color-background);
color: var(--color-text);
web/src/lib/api.ts
+1 -3
View File
@@ -38,9 +38,7 @@ export class BannerApiClient {
const response = await fetch(`${this.baseUrl}${endpoint}`);
if (!response.ok) {
throw new Error(
`API request failed: ${response.status} ${response.statusText}`
);
throw new Error(`API request failed: ${response.status} ${response.statusText}`);
}
return (await response.json()) as T;
web/src/reportWebVitals.ts
+9 -9
View File
@@ -1,13 +1,13 @@
const reportWebVitals = (onPerfEntry?: () => void) => {
if (onPerfEntry && onPerfEntry instanceof Function) {
void import('web-vitals').then(({ onCLS, onINP, onFCP, onLCP, onTTFB }) => {
onCLS(onPerfEntry)
onINP(onPerfEntry)
onFCP(onPerfEntry)
onLCP(onPerfEntry)
onTTFB(onPerfEntry)
})
void import("web-vitals").then(({ onCLS, onINP, onFCP, onLCP, onTTFB }) => {
onCLS(onPerfEntry);
onINP(onPerfEntry);
onFCP(onPerfEntry);
onLCP(onPerfEntry);
onTTFB(onPerfEntry);
});
}
}
};
export default reportWebVitals
export default reportWebVitals;
web/src/routeTree.gen.ts
+26 -26
View File
@@ -8,52 +8,52 @@
// You should NOT make any changes in this file as it will be overwritten.
// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
import { Route as rootRouteImport } from './routes/__root'
import { Route as IndexRouteImport } from './routes/index'
import { Route as rootRouteImport } from "./routes/__root";
import { Route as IndexRouteImport } from "./routes/index";
const IndexRoute = IndexRouteImport.update({
id: '/',
path: '/',
id: "/",
path: "/",
getParentRoute: () => rootRouteImport,
} as any)
} as any);
export interface FileRoutesByFullPath {
'/': typeof IndexRoute
"/": typeof IndexRoute;
}
export interface FileRoutesByTo {
'/': typeof IndexRoute
"/": typeof IndexRoute;
}
export interface FileRoutesById {
__root__: typeof rootRouteImport
'/': typeof IndexRoute
__root__: typeof rootRouteImport;
"/": typeof IndexRoute;
}
export interface FileRouteTypes {
fileRoutesByFullPath: FileRoutesByFullPath
fullPaths: '/'
fileRoutesByTo: FileRoutesByTo
to: '/'
id: '__root__' | '/'
fileRoutesById: FileRoutesById
fileRoutesByFullPath: FileRoutesByFullPath;
fullPaths: "/";
fileRoutesByTo: FileRoutesByTo;
to: "/";
id: "__root__" | "/";
fileRoutesById: FileRoutesById;
}
export interface RootRouteChildren {
IndexRoute: typeof IndexRoute
IndexRoute: typeof IndexRoute;
}
declare module '@tanstack/react-router' {
declare module "@tanstack/react-router" {
interface FileRoutesByPath {
'/': {
id: '/'
path: '/'
fullPath: '/'
preLoaderRoute: typeof IndexRouteImport
parentRoute: typeof rootRouteImport
}
"/": {
id: "/";
path: "/";
fullPath: "/";
preLoaderRoute: typeof IndexRouteImport;
parentRoute: typeof rootRouteImport;
};
}
}
const rootRouteChildren: RootRouteChildren = {
IndexRoute: IndexRoute,
}
};
export const routeTree = rootRouteImport
._addFileChildren(rootRouteChildren)
._addFileTypes<FileRouteTypes>()
._addFileTypes<FileRouteTypes>();
web/src/routes/index.tsx
+13 -37
View File
@@ -101,13 +101,11 @@ const getOverallHealth = (state: StatusState): Status | "Unreachable" => {
const getServices = (state: StatusState): Service[] => {
if (state.mode !== "response") return [];
return Object.entries(state.status.services).map(
([serviceId, serviceInfo]) => ({
name: serviceInfo.name,
status: serviceInfo.status,
icon: SERVICE_ICONS[serviceId] || SERVICE_ICONS.default,
})
);
return Object.entries(state.status.services).map(([serviceId, serviceInfo]) => ({
name: serviceInfo.name,
status: serviceInfo.status,
icon: SERVICE_ICONS[serviceId] || SERVICE_ICONS.default,
}));
};
const StatusDisplay = ({ status }: { status: Status | "Unreachable" }) => {
@@ -197,17 +195,11 @@ function App() {
// Create a timeout promise
const timeoutPromise = new Promise<never>((_, reject) => {
setTimeout(
() => reject(new Error("Request timeout")),
REQUEST_TIMEOUT
);
setTimeout(() => reject(new Error("Request timeout")), REQUEST_TIMEOUT);
});
// Race between the API call and timeout
const statusData = await Promise.race([
client.getStatus(),
timeoutPromise,
]);
const statusData = await Promise.race([client.getStatus(), timeoutPromise]);
const endTime = Date.now();
const responseTime = endTime - startTime;
@@ -219,8 +211,7 @@ function App() {
lastFetch: new Date(),
});
} catch (err) {
const errorMessage =
err instanceof Error ? err.message : "Failed to fetch data";
const errorMessage = err instanceof Error ? err.message : "Failed to fetch data";
// Check if it's a timeout error
if (errorMessage === "Request timeout") {
@@ -302,12 +293,8 @@ function App() {
<Flex direction="column" gap="3" style={{ marginTop: "16px" }}>
{shouldShowSkeleton
? // Show skeleton for 3 services during initial loading only
Array.from({ length: 3 }).map((_, index) => (
<SkeletonService key={index} />
))
: services.map((service) => (
<ServiceStatus key={service.name} service={service} />
))}
Array.from({ length: 3 }).map((_, index) => <SkeletonService key={index} />)
: services.map((service) => <ServiceStatus key={service.name} service={service} />)}
</Flex>
<Flex direction="column" gap="2" style={BORDER_STYLES}>
@@ -326,17 +313,11 @@ function App() {
{shouldShowLastFetch ? (
<TimingRow icon={Clock} name="Last Updated">
{isLoading ? (
<Text
size="2"
style={{ paddingBottom: "2px" }}
color="gray"
>
<Text size="2" style={{ paddingBottom: "2px" }} color="gray">
Loading...
</Text>
) : (
<Tooltip
content={`as of ${state.lastFetch.toLocaleTimeString()}`}
>
<Tooltip content={`as of ${state.lastFetch.toLocaleTimeString()}`}>
<abbr
style={{
cursor: "pointer",
@@ -363,12 +344,7 @@ function App() {
</Flex>
</Flex>
</Card>
<Flex
justify="center"
style={{ marginTop: "12px" }}
gap="2"
align="center"
>
<Flex justify="center" style={{ marginTop: "12px" }} gap="2" align="center">
{__APP_VERSION__ && (
<Text
size="1"
web/src/styles.css
+2 -4
View File
@@ -2,14 +2,12 @@
body {
margin: 0;
font-family:
-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
"Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family:
source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
}
web/tsconfig.json
+1 -1
View File
@@ -23,7 +23,7 @@
"noUncheckedSideEffectImports": true,
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"],
"@/*": ["./src/*"]
}
}
}
web/vite.config.ts
+1 -4
View File
@@ -7,10 +7,7 @@ import { readFileSync, existsSync } from "node:fs";
// Extract version from Cargo.toml
function getVersion() {
const filename = "Cargo.toml";
const paths = [
resolve(__dirname, filename),
resolve(__dirname, "..", filename),
];
const paths = [resolve(__dirname, filename), resolve(__dirname, "..", filename)];
for (const path of paths) {
try {