feat: add Open Graph image generation and SEO metadata

- Introduced `PageSeo` component for managing page metadata for social sharing.
- Created Open Graph image templates using SVG and static fonts for better visual representation.
- Implemented service alert management with functions to check active alerts and format route numbers.
- Added utility functions for generating and watching alert validity.
- Developed a script to generate Open Graph images dynamically based on page content.
- Included tests for service alert functionalities to ensure correctness and reliability.

package.json

@@ -3,8 +3,9 @@
     "version": "1.0.0",
     "private": true,
     "scripts": {
-        "dev": "next dev --webpack",
-        "build": "next build --webpack",
+        "dev": "npm run generate:og && next dev --webpack",
+        "build": "npm run generate:og && next build --webpack",
+        "generate:og": "node scripts/generate-og-images.mjs",
         "start": "next start",
         "lint": "eslint .",
         "test": "node --test tests/*.test.mjs",