Display app version in footer

package.json

@@ -43,5 +43,5 @@
         "lint": "knip && biome check --write . && tsc --noEmit"
     },
     "type": "module",
-    "version": "0.0.1"
+    "version": "0.0.2"
 }

src/app.tsx

@@ -5,13 +5,16 @@ import {
     convertMariaDbBlobToSqlite,
 } from './sql-converter'
 
+declare const __APP_VERSION__: string
+
 type FileSystemWritableFileStreamLike = {
     write(chunk: string): Promise<void>
     close(): Promise<void>
     abort?: () => Promise<void>
 }
 
 type FileSystemFileHandleLike = {
+    name?: string
     createWritable(): Promise<FileSystemWritableFileStreamLike>
 }
 
@@ -106,8 +109,9 @@ export default function App() {
                 ],
             })
 
+            const outputName = outputHandle.name ?? suggestedOutputFileName
             writable = await outputHandle.createWritable()
-            setOutputFileName(suggestedOutputFileName)
+            setOutputFileName(outputName)
             setStatus('')
             setConversionState('converting')
 
@@ -124,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) {
@@ -351,23 +355,6 @@ export default function App() {
                 </article>
             </section>
 
-            <section aria-label="Project links" className="project-links">
-                <a
-                    href="https://github.com/dominosaurs/sql-converter"
-                    rel="noreferrer"
-                    target="_blank"
-                >
-                    View source on GitHub
-                </a>
-                <a
-                    href="https://github.com/dominosaurs/sql-converter/issues"
-                    rel="noreferrer"
-                    target="_blank"
-                >
-                    Report an issue
-                </a>
-            </section>
-
             {warnings.length > 0 ? (
                 <section
                     aria-labelledby="warnings-title"
@@ -394,6 +381,34 @@ export default function App() {
                     </details>
                 </section>
             ) : null}
+
+            <footer className="site-footer">
+                <div>
+                    <strong>SQL Converter v{__APP_VERSION__}</strong>
+                    <p>
+                        A browser-side MariaDB/MySQL dump to SQLite SQL
+                        converter. Files are processed locally and are not
+                        uploaded.
+                    </p>
+                </div>
+
+                <nav aria-label="Footer links">
+                    <a
+                        href="https://github.com/dominosaurs/sql-converter"
+                        rel="noreferrer"
+                        target="_blank"
+                    >
+                        GitHub
+                    </a>
+                    <a
+                        href="https://github.com/dominosaurs/sql-converter/issues"
+                        rel="noreferrer"
+                        target="_blank"
+                    >
+                        Issues
+                    </a>
+                </nav>
+            </footer>
         </main>
     )
 }

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;
+    }
 }

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",

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()] })],
 })