refactor(web): pages

krystxf · Dec 8, 2024 · b520402 · b520402 · vercel · Dec 8, 2024
1 parent c34b34a
commit b520402
Show file tree

Hide file tree

Showing 24 changed files with 84 additions and 79 deletions.
diff --git a/apps/web/next.config.mjs b/apps/web/next.config.mjs
@@ -9,6 +9,25 @@ const nextConfig = {
         deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
         imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
     },
+    async redirects() {
+        return [
+            {
+                source: "/docs",
+                destination: "/",
+                permanent: true,
+            },
+            {
+                source: "/docs/privacy-policy",
+                destination: "/privacy-policy",
+                permanent: true,
+            },
+            {
+                source: "/docs/terms-and-conditions",
+                destination: "/terms-and-conditions",
+                permanent: true,
+            },
+        ];
+    },
 };
 
 const withNextra = nextra({

diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx
@@ -1,8 +1,9 @@
 import type { Metadata } from "next";
-import "./globals.css";
-import { poppins } from "./fonts";
+import "@/styles/globals.css";
+import { poppins } from "@/fonts";
 import { Navbar } from "@/components/Navbar";
 import { Footer } from "@/components/Footer";
+import { getTitle } from "@/utils/metadata.utils";
 
 const WEB_URL = new URL("https://metronow.dev");
 
@@ -13,7 +14,7 @@ const appleAppLink = {
 } as const;
 
 export const metadata: Metadata = {
-    title: "Metro Now",
+    title: getTitle(),
     description: "Prague public transport app",
     category: "Public transport",
     keywords: ["prague", "praha", "public transport", "metro", "tram", "bus"],
@@ -49,7 +50,7 @@ export default function RootLayout({
     return (
         <html lang="en">
             <body className={poppins.className}>
-                <div className="dark:bg-black min-h-screen">
+                <div className="dark:bg-black">
                     <Navbar variant="transparent" />
 
                     {children}

diff --git a/...onents/sections/MapSection/MapSection.tsx → apps/web/src/app/map/client-page.tsx b/...onents/sections/MapSection/MapSection.tsx → apps/web/src/app/map/client-page.tsx
@@ -1,25 +1,16 @@
 "use client";
 
 import MapGL, { Source, Layer } from "react-map-gl";
-import { useState, useEffect } from "react";
+import { useState } from "react";
 import { pragueCoorinates } from "@/constants/coordinates";
-import { getStopsGeojson } from "@/components/sections/MapSection/functions/getStopsGeojson";
-import { pointsLayer } from "@/components/sections/MapSection/layers/point-layer";
-import { heatmapLayer } from "@/components/sections/MapSection/layers/heatmap-layer";
+import { pointsLayer } from "@/app/map/map-layers/point-layer";
+import { heatmapLayer } from "@/app/map/map-layers/heatmap-layer";
 import { PidLogo } from "@/components/PidLogo/PidLogo";
 
-export const MapSection = () => {
-    const [allowZoom, setAllowZoom] = useState(false);
-    const [stopsGeojson, setStopsGeojson] = useState<null | object>(null);
-
-    const updateStopsGeojson = async () => {
-        const data = await getStopsGeojson();
-        setStopsGeojson(data);
-    };
+export const MapClientPage = (props) => {
+    const { stopsGeojson } = props;
 
-    useEffect(() => {
-        updateStopsGeojson();
-    }, []);
+    const [allowZoom, setAllowZoom] = useState(false);
 
     return (
         <div
@@ -34,7 +25,7 @@ export const MapSection = () => {
                 </span>
             </div>
 
-            <div className="h-[60vh] w-full">
+            <div className="h-[80vh] w-full relative">
                 <MapGL
                     initialViewState={{
                         ...pragueCoorinates,
@@ -43,18 +34,19 @@ export const MapSection = () => {
                     dragRotate={false}
                     maxZoom={18}
                     minZoom={5}
-                    boxZoom={false}
                     style={{
                         position: "relative",
+                        display: "block",
                     }}
+                    boxZoom={false}
                     keyboard={false}
                     scrollZoom={allowZoom}
                     mapStyle="mapbox://styles/mapbox/dark-v9"
                     mapboxAccessToken={process.env.NEXT_PUBLIC_MAPBOX_TOKEN}
                     attributionControl={false}
                 >
                     {stopsGeojson && (
-                        <Source type="geojson" data={stopsGeojson}>
+                        <Source type="geojson" data={stopsGeojson as any}>
                             <Layer {...heatmapLayer} />
                             <Layer {...pointsLayer} />
                         </Source>

diff --git a/apps/web/src/app/map/layout.tsx b/apps/web/src/app/map/layout.tsx
@@ -0,0 +1,15 @@
+import { getTitle } from "@/utils/metadata.utils";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+    title: getTitle("Map"),
+    description: "Metro Now area coverage",
+};
+
+export default function RootLayout({
+    children,
+}: Readonly<{
+    children: React.ReactNode;
+}>) {
+    return children;
+}
diff --git a/...ctions/MapSection/layers/heatmap-layer.ts → ...b/src/app/map/map-layers/heatmap-layer.ts b/...ctions/MapSection/layers/heatmap-layer.ts → ...b/src/app/map/map-layers/heatmap-layer.ts
@@ -39,7 +39,7 @@ export const heatmapLayer: LayerProps = {
         "heatmap-radius": {
             stops: [
                 [11, 5],
-                [15, 20],
+                [15, 50],
             ],
         },
         // decrease opacity to transition into the circle layer

diff --git a/...sections/MapSection/layers/point-layer.ts → ...web/src/app/map/map-layers/point-layer.ts b/...sections/MapSection/layers/point-layer.ts → ...web/src/app/map/map-layers/point-layer.ts
diff --git a/...s/MapSection/functions/getStopsGeojson.ts → apps/web/src/app/map/page.tsx b/...s/MapSection/functions/getStopsGeojson.ts → apps/web/src/app/map/page.tsx
@@ -1,11 +1,14 @@
 "use server";
 
+import { MapClientPage } from "./client-page";
+
 type Datapoint = {
     latitude: number;
     longitude: number;
     name: string;
 };
-export const getStopsGeojson = async () => {
+
+export default async function MapPage() {
     const res = await fetch("https://api.metronow.dev/v1/platform/all");
     const data: Datapoint[] = await res.json();
 
@@ -20,5 +23,5 @@ export const getStopsGeojson = async () => {
         })),
     };
 
-    return geojson;
-};
+    return <MapClientPage stopsGeojson={geojson} />;
+}
diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx
@@ -8,7 +8,6 @@ import DownloadOnAppStoreLight from "../../public/download-on-appstore-light.svg
 import MetroNowIcon from "../../public/metro-now-icon.png";
 import MetroNowIphoneMockup from "../../public/iphone-mockup.png";
 import { FeaturesSection } from "@/components/sections/FeaturesSection";
-import { MapSection } from "@/components/sections/MapSection";
 
 export default function LandingPage() {
     return (
@@ -63,7 +62,6 @@ export default function LandingPage() {
                 </div>
             </main>
 
-            <MapSection />
             <FeaturesSection />
         </>
     );

diff --git a/apps/web/src/app/sitemap.ts b/apps/web/src/app/sitemap.ts
@@ -1,7 +1,8 @@
-import { HOMEPAGE_URL } from "../constants/api";
+import { HOMEPAGE_URL } from "@/constants/api";
 import type { MetadataRoute } from "next";
 
 const docsPaths = [
+    "/map",
     "/docs",
     "/docs/backend",
     "/docs/privacy-policy",

diff --git a/apps/web/src/components/Footer/Footer.tsx b/apps/web/src/components/Footer/Footer.tsx
@@ -53,10 +53,10 @@ export const Footer = () => {
                     <FooterSectionHeading className="mt-8">
                         Legal
                     </FooterSectionHeading>
-                    <FooterLink href="/docs/terms-and-conditions">
+                    <FooterLink href="/terms-and-conditions">
                         Terms & conditions
                     </FooterLink>
-                    <FooterLink href="/docs/privacy-policy">
+                    <FooterLink href="/privacy-policy">
                         Privacy policy
                     </FooterLink>
                 </FooterSection>

diff --git a/apps/web/src/components/Navbar/Navbar.tsx b/apps/web/src/components/Navbar/Navbar.tsx
@@ -56,6 +56,8 @@ export const Navbar = (props: Props) => {
                     <div className="gap-12 sm:flex hidden">
                         <NavbarLink href={"/"}>About</NavbarLink>
 
+                        <NavbarLink href={"/map"}>Map</NavbarLink>
+
                         <NavbarLink href={SOURCE_CODE_URL} target="_blank">
                             Source Code
                         </NavbarLink>

diff --git a/apps/web/src/components/sections/MapSection/index.ts b/apps/web/src/components/sections/MapSection/index.ts
diff --git a/apps/web/src/app/fonts.ts → apps/web/src/fonts/fonts.ts b/apps/web/src/app/fonts.ts → apps/web/src/fonts/fonts.ts
diff --git a/apps/web/src/fonts/index.ts b/apps/web/src/fonts/index.ts
@@ -0,0 +1 @@
+export { poppins } from "@/fonts/fonts";
diff --git a/apps/web/src/pages/_meta.json b/apps/web/src/pages/_meta.json
@@ -1,25 +1,25 @@
-{
-    "docs": {
-        "title": "Docs",
-        "type": "page"
+{ 
+    "home":{
+        "title": "Home",
+        "href": "/",
+        "type": "link"
     },
-
     "api": {
-        "title": "API",
+        "title": "Home",
         "type": "page",
-        "href": "/docs/api"
+        "href": "/"
     },
     "legal": {
         "title": "Legal",
         "type": "menu",
         "items": {
             "about": {
                 "title": "Privacy policy",
-                "href": "/docs/privacy-policy"
+                "href": "/privacy-policy"
             },
             "contact": {
                 "title": "Terms & conditions",
-                "href": "/docs/terms-and-conditions"
+                "href": "/terms-and-conditions"
             }
         }
     }

diff --git a/apps/web/src/pages/docs/_meta.json b/apps/web/src/pages/docs/_meta.json
diff --git a/apps/web/src/pages/docs/api.mdx b/apps/web/src/pages/docs/api.mdx
diff --git a/apps/web/src/pages/docs/backend.mdx b/apps/web/src/pages/docs/backend.mdx
diff --git a/apps/web/src/pages/docs/index.mdx b/apps/web/src/pages/docs/index.mdx
diff --git a/apps/web/src/pages/docs/privacy-policy.mdx → apps/web/src/pages/privacy-policy.mdx b/apps/web/src/pages/docs/privacy-policy.mdx → apps/web/src/pages/privacy-policy.mdx
diff --git a/...b/src/pages/docs/terms-and-conditions.mdx → apps/web/src/pages/terms-and-conditions.mdx b/...b/src/pages/docs/terms-and-conditions.mdx → apps/web/src/pages/terms-and-conditions.mdx
diff --git a/apps/web/src/app/globals.css → apps/web/src/styles/globals.css b/apps/web/src/app/globals.css → apps/web/src/styles/globals.css
@@ -11,3 +11,7 @@
 html {
     scroll-behavior: smooth;
 }
+
+[mapboxgl-children] {
+    height: auto !important;
+}
diff --git a/apps/web/src/utils/metadata.utils.ts b/apps/web/src/utils/metadata.utils.ts
@@ -0,0 +1,7 @@
+export const getTitle = (title?: string | null) => {
+    if (!title) {
+        return "Metro Now";
+    }
+
+    `${title} | Metro Now`;
+};
diff --git a/apps/web/theme.config.tsx b/apps/web/theme.config.tsx
@@ -4,7 +4,7 @@ import React from "react";
 
 const themeConfig = {
     logo: <strong>🚇 metro-now</strong>,
-    docsRepositoryBase: `${SOURCE_CODE_URL}/tree/main/docs`,
+    docsRepositoryBase: `${SOURCE_CODE_URL}/tree/main/apps/web`,
     project: {
         link: SOURCE_CODE_URL,
     },