feat: add site configuration file

src/components/csv/csv-information-dialog.tsx

@@ -1,4 +1,5 @@
 import { Download, ExternalLink, FileText, Info } from "lucide-react"
+import { siteConfig } from "@/config/site"
 import { Button } from "@/components/ui/button"
 import {
   Dialog,
@@ -45,7 +46,7 @@ export function CSVInformationDialog() {
                 Highlight the entire results table <span className="sm:hidden">with</span> <span className="hidden sm:inline">including the</span> headers
               </p>
               <img
-                src="/monash-grades-calculator/img/select-results.png"
+                src={`${siteConfig.basePath}img/select-results.png`}
                 alt="Selecting academic results table in WES"
                 className="rounded-md border w-full aspect-[26/9] object-cover object-bottom"
               />
@@ -57,7 +58,7 @@ export function CSVInformationDialog() {
                 Copy and paste into <a href="https://docs.google.com/spreadsheets/" className="underline hover:text-primary" target="_blank" rel="noreferrer">Google Sheets</a> or <span className="hidden sm:inline">Microsoft</span> Excel
               </p>
               <img 
-                src="/monash-grades-calculator/img/spreadsheet-view.png" 
+                src={`${siteConfig.basePath}img/spreadsheet-view.png`}
                 alt="Pasted data in Google Sheets"
                 className="hidden sm:block rounded-md border w-full h-auto object-cover"
               />
@@ -69,7 +70,7 @@ export function CSVInformationDialog() {
                 File → Download → <span className="hidden sm:inline">Comma-separated values</span> (.csv)
               </p>
               <img
-                src="/monash-grades-calculator/img/save-dialog.png"
+                src={`${siteConfig.basePath}img/save-dialog.png`}
                 alt="Saving as CSV in Google Sheets"
                 className="rounded-md border w-full aspect-video object-cover"
               />
@@ -87,7 +88,7 @@ export function CSVInformationDialog() {
                   type="button"
                   variant="outline"
                   size="sm"
-                  onClick={() => window.open('https://github.com/ligsnf/monash-grades-calculator/blob/main/public/example_results.csv', '_blank')}
+                  onClick={() => window.open(`${siteConfig.links.github}/blob/main/public/example_results.csv`, '_blank')}
                 >
                   <ExternalLink />
                   <span className="hidden sm:inline">View</span>
@@ -96,7 +97,7 @@ export function CSVInformationDialog() {
                   type="button"
                   variant="outline"
                   size="sm"
-                  onClick={() => window.open('/monash-grades-calculator/example_results.csv', '_blank')}
+                  onClick={() => window.open(`${siteConfig.basePath}example_results.csv`, '_blank')}
                 >
                   <Download />
                   <span className="hidden sm:inline">Download</span>

src/components/results/result-form-row.tsx

@@ -167,7 +167,7 @@ export function ResultFormRow({ defaultValues, onDelete, onChange, gridCols }: R
             onClick={onDelete}
             className="h-8 px-2 md:h-10 md:px-3"
           >
-            <Trash2 className="h-4 w-4 text-destructive" />
+            <Trash2 />
           </Button>
         </div>
       </form>

src/components/site-header.tsx

@@ -1,4 +1,5 @@
 import { Link } from '@tanstack/react-router'
+import { siteConfig } from "@/config/site"
 import { ModeToggle } from "@/components/theme/mode-toggle"
 import { Icons } from "@/components/icons"
 import { Button } from "@/components/ui/button"
@@ -75,11 +76,7 @@ export function SiteHeader() {
           {/* Right side items */}
           <nav className="flex items-center gap-1">
             <Button asChild variant="outline" size="icon" className="hidden sm:flex" >
-              <a
-                href="https://github.com/ligsnf/monash-grades-calculator"
-                target="_blank"
-                rel="noreferrer"
-              >
+              <a href={siteConfig.links.github} target="_blank" rel="noreferrer">
                 <Icons.gitHub className="h-4 w-4" />
                 <span className="sr-only">GitHub</span>
               </a>

src/config/site.ts

@@ -0,0 +1,10 @@
+export const siteConfig = {
+  name: "monash-grades-calculator",
+  url: "https://liangdi.dev/monash-grades-calculator/",
+  basePath: "/monash-grades-calculator/",
+  links: {
+    github: "https://github.com/ligsnf/monash-grades-calculator",
+  }
+}
+
+export type SiteConfig = typeof siteConfig

src/main.tsx

@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom/client'
 import './index.css'
 import { RouterProvider, createRouter, createBrowserHistory } from '@tanstack/react-router'
 import { ThemeProvider } from "@/components/theme/theme-provider"
+import { siteConfig } from "@/config/site"
 
 // Import the generated route tree
 import { routeTree } from './routeTree.gen'
@@ -13,7 +14,7 @@ const browserHistory = createBrowserHistory()
 // Create a new router instance
 const router = createRouter({ 
     routeTree,
-    basepath: "/monash-grades-calculator/",
+    basepath: siteConfig.basePath,
     history: browserHistory,
 })
 

src/routes/about.lazy.tsx

@@ -1,4 +1,5 @@
 import { createLazyFileRoute } from '@tanstack/react-router'
+import { siteConfig } from "@/config/site"
 import { Icons } from '@/components/icons'
 import { Button } from '@/components/ui/button'
 import { Separator } from '@/components/ui/separator'
@@ -84,23 +85,23 @@ function About() {
               <a href="https://www.monash.edu/students/admin/assessments/results/results-legend"
                 className="text-primary hover:underline"
                 target="_blank"
-                rel="noopener noreferrer">
+                rel="noreferrer">
                 Results and Grades Legend
               </a>
             </li>
             <li>
               <a href="https://www.monash.edu/students/admin/assessments/results/gpa"
                 className="text-primary hover:underline"
                 target="_blank"
-                rel="noopener noreferrer">
+                rel="noreferrer">
                 GPA Calculation Method
               </a>
             </li>
             <li>
               <a href="https://www.monash.edu/students/admin/assessments/results/wam"
                 className="text-primary hover:underline"
                 target="_blank"
-                rel="noopener noreferrer">
+                rel="noreferrer">
                 WAM Calculation Method
               </a>
             </li>
@@ -127,21 +128,13 @@ function About() {
         </p>
         <div className="flex flex-col sm:flex-row gap-2">
           <Button asChild variant="outline">
-            <a
-              href="https://github.com/ligsnf/monash-grades-calculator"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
+            <a href={siteConfig.links.github} target="_blank" rel="noreferrer">
               <Icons.gitHub />
               <span>View on GitHub</span>
             </a>
           </Button>
           <Button asChild variant="outline">
-            <a
-              href="https://github.com/ligsnf/monash-grades-calculator/issues/new"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
+            <a href={`${siteConfig.links.github}/issues/new`} target="_blank" rel="noreferrer">
               <Bug />
               <span>Report an Issue</span>
             </a>

vite.config.ts

@@ -2,10 +2,11 @@ import { defineConfig } from 'vite'
 import { TanStackRouterVite } from '@tanstack/router-plugin/vite'
 import react from '@vitejs/plugin-react'
 import path from "path"
+import { siteConfig } from "./src/config/site"
 
 // https://vite.dev/config/
 export default defineConfig({
-  base: "/monash-grades-calculator/",
+  base: siteConfig.basePath,
   plugins: [
     TanStackRouterVite(),
     react()