aboutsummaryrefslogtreecommitdiff
path: root/src/frontend/app/root.tsx
blob: 49c9dc875c1a007b967e1bfae016462ef99d83b8 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
import {
  isRouteErrorResponse,
  Links,
  Meta,
  Scripts,
  ScrollRestoration,
} from "react-router";

import "@fontsource-variable/roboto";
import type { Route } from "./+types/root";
import "./root.css";

//#region Maplibre setup
import maplibregl from "maplibre-gl";
import "maplibre-theme/icons.default.css";
import "maplibre-theme/modern.css";
import { Protocol } from "pmtiles";
import { AppProvider } from "./AppContext";
const pmtiles = new Protocol();
maplibregl.addProtocol("pmtiles", pmtiles.tile);
//#endregion

import "./i18n";

export const links: Route.LinksFunction = () => [];

export function Layout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="es">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta name="mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="default" />
        <link rel="icon" type="image/jpg" href="/logo-512.jpg" />
        <link rel="icon" href="/favicon.ico" sizes="64x64" />
        <link rel="apple-touch-icon" href="/logo-512.jpg" sizes="512x512" />
        <meta name="theme-color" content="#ffffff" />
        <link rel="canonical" href="https://busurbano.costas.dev/" />

        <meta
          name="description"
          content="Aplicación web para encontrar paradas y tiempos de llegada de los autobuses urbanos"
        />
        <meta
          name="keywords"
          content="autobús, urbano, parada, tiempo, llegada, transporte, público, España"
        />
        <meta name="author" content="Ariel Costas Guerrero" />

        <meta property="og:title" content="Busurbano Web" />
        <meta property="og:type" content="website" />
        <meta property="og:url" content="https://busurbano.costas.dev/" />
        <meta
          property="og:image"
          content="https://busurbano.costas.dev/logo-512.jpg"
        />
        <meta
          property="og:description"
          content="Aplicación web para encontrar paradas y tiempos de llegada de los autobuses urbanos"
        />

        <link rel="manifest" href="/manifest.webmanifest" />

        <meta name="robots" content="noindex, nofollow" />
        <meta name="googlebot" content="noindex, nofollow" />

        <title>Busurbano</title>
        <Meta />
        <Links />
      </head>
      <body>
        {children}
        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  );
}

import { AppShell } from "./components/layout/AppShell";

export default function App() {
  if ("serviceWorker" in navigator) {
    navigator.serviceWorker.register("/pwa-worker.js").catch((error) => {
      console.error("Error registering SW:", error);
    });
  }

  return (
    <AppProvider>
      <AppShell />
    </AppProvider>
  );
}

export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
  let message = "Oops!";
  let details = "An unexpected error occurred.";
  let stack: string | undefined;

  if (isRouteErrorResponse(error)) {
    message = error.status === 404 ? "404" : "Error";
    details =
      error.status === 404
        ? "The requested page could not be found."
        : error.statusText || details;
  } else if (import.meta.env.DEV && error && error instanceof Error) {
    details = error.message;
    stack = error.stack;
  }

  return (
    <main>
      <h1>{message}</h1>
      <p>{details}</p>
      {stack && (
        <pre>
          <code>{stack}</code>
        </pre>
      )}
    </main>
  );
}