From b615d9517c0779d03ab5b88f4c774e6fb11f7dd9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=F0=9F=8D=95?= Date: Tue, 28 Apr 2026 16:20:45 +0800 Subject: [PATCH 1/2] Display app version in footer Updates the application to display the current version number in a new footer section. This also involves refactoring the project links into the footer and removing the separate project-links section. The version number is now dynamically injected into the build using Vite's define configuration, referencing the package.json version. --- package.json | 2 +- src/app.tsx | 47 ++++++++++++++++++----------- src/styles.css | 74 +++++++++++++++++++++++++++++++--------------- tsconfig.node.json | 1 + vite.config.ts | 4 +++ 5 files changed, 86 insertions(+), 42 deletions(-) diff --git a/package.json b/package.json index a0937f5..6770de1 100644 --- a/package.json +++ b/package.json @@ -43,5 +43,5 @@ "lint": "knip && biome check --write . && tsc --noEmit" }, "type": "module", - "version": "0.0.1" + "version": "0.0.2" } diff --git a/src/app.tsx b/src/app.tsx index 40fb675..4429938 100644 --- a/src/app.tsx +++ b/src/app.tsx @@ -5,6 +5,8 @@ import { convertMariaDbBlobToSqlite, } from './sql-converter' +declare const __APP_VERSION__: string + type FileSystemWritableFileStreamLike = { write(chunk: string): Promise close(): Promise @@ -351,23 +353,6 @@ export default function App() { -
- - View source on GitHub - - - Report an issue - -
- {warnings.length > 0 ? (
) : null} + +
+
+ SQL Converter v{__APP_VERSION__} +

+ A browser-side MariaDB/MySQL dump to SQLite SQL + converter. Files are processed locally and are not + uploaded. +

+
+ + +
) } diff --git a/src/styles.css b/src/styles.css index 08dccc9..e6727bd 100644 --- a/src/styles.css +++ b/src/styles.css @@ -334,30 +334,6 @@ h2 { margin-top: 22px; } -.project-links { - display: flex; - flex-wrap: wrap; - gap: 12px; - margin-top: 22px; -} - -.project-links a { - display: inline-flex; - align-items: center; - min-height: 42px; - padding: 9px 16px; - font-weight: 900; - color: #102820; - text-decoration: none; - background: rgba(255, 252, 242, 0.7); - border: 1px solid rgba(16, 40, 32, 0.14); - border-radius: 999px; -} - -.project-links a:hover { - background: rgba(245, 159, 92, 0.22); -} - .content-grid article, .warnings-panel { padding: 28px; @@ -383,6 +359,51 @@ h2 { word-break: break-word; } +.site-footer { + display: flex; + gap: 20px; + align-items: center; + justify-content: space-between; + padding: 26px 4px 0; + margin-top: 30px; + color: rgba(16, 40, 32, 0.72); +} + +.site-footer strong { + display: block; + margin-bottom: 8px; + color: #102820; +} + +.site-footer p { + max-width: 640px; + margin-bottom: 0; + line-height: 1.6; +} + +.site-footer nav { + display: flex; + flex-wrap: wrap; + gap: 10px; +} + +.site-footer a { + display: inline-flex; + align-items: center; + min-height: 38px; + padding: 8px 14px; + font-weight: 900; + color: #102820; + text-decoration: none; + background: rgba(255, 252, 242, 0.6); + border: 1px solid rgba(16, 40, 32, 0.14); + border-radius: 999px; +} + +.site-footer a:hover { + background: rgba(245, 159, 92, 0.22); +} + @media (max-width: 860px) { .page-shell { width: min(100% - 20px, 680px); @@ -397,4 +418,9 @@ h2 { .hero-copy { min-height: 420px; } + + .site-footer { + flex-direction: column; + align-items: flex-start; + } } diff --git a/tsconfig.node.json b/tsconfig.node.json index f575282..20e7cc6 100644 --- a/tsconfig.node.json +++ b/tsconfig.node.json @@ -14,6 +14,7 @@ /* Linting */ "noUnusedLocals": true, "noUnusedParameters": true, + "resolveJsonModule": true, "skipLibCheck": true, "target": "es2023", "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", diff --git a/vite.config.ts b/vite.config.ts index 4345658..9d2945e 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,9 +1,13 @@ import babel from '@rolldown/plugin-babel' import react, { reactCompilerPreset } from '@vitejs/plugin-react' import { defineConfig } from 'vite' +import packageJson from './package.json' // https://vite.dev/config/ export default defineConfig({ base: '/sql-converter/', + define: { + __APP_VERSION__: JSON.stringify(packageJson.version), + }, plugins: [react(), babel({ presets: [reactCompilerPreset()] })], }) From 302814b9ba5d4ef5051961e7cb96dfd26348cb00 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=F0=9F=8D=95?= Date: Tue, 28 Apr 2026 16:44:24 +0800 Subject: [PATCH 2/2] Use output handle name for display When saving the converted SQL, use the actual name from the output file handle instead of a suggested default name. This ensures the displayed success message accurately reflects the saved file's name. --- src/app.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/app.tsx b/src/app.tsx index 4429938..4e7ff46 100644 --- a/src/app.tsx +++ b/src/app.tsx @@ -14,6 +14,7 @@ type FileSystemWritableFileStreamLike = { } type FileSystemFileHandleLike = { + name?: string createWritable(): Promise } @@ -108,8 +109,9 @@ export default function App() { ], }) + const outputName = outputHandle.name ?? suggestedOutputFileName writable = await outputHandle.createWritable() - setOutputFileName(suggestedOutputFileName) + setOutputFileName(outputName) setStatus('') setConversionState('converting') @@ -126,7 +128,7 @@ export default function App() { setWarnings(result.warnings) setStatus( - `Success. Converted ${result.statementsConverted.toLocaleString()} SQL statements to ${suggestedOutputFileName}.`, + `Success. Converted ${result.statementsConverted.toLocaleString()} SQL statements to ${outputName}.`, ) setConversionState('success') } catch (error) {