From b520402cf634455ca0db12347ac56d1bba397ed6 Mon Sep 17 00:00:00 2001 From: Krystof Date: Sun, 8 Dec 2024 16:48:17 +0100 Subject: [PATCH] refactor(web): pages --- apps/web/next.config.mjs | 19 +++++++++++++ apps/web/src/app/layout.tsx | 9 +++--- .../map/client-page.tsx} | 28 +++++++------------ apps/web/src/app/map/layout.tsx | 15 ++++++++++ .../map/map-layers}/heatmap-layer.ts | 2 +- .../map/map-layers}/point-layer.ts | 0 .../getStopsGeojson.ts => app/map/page.tsx} | 9 ++++-- apps/web/src/app/page.tsx | 2 -- apps/web/src/app/sitemap.ts | 3 +- apps/web/src/components/Footer/Footer.tsx | 4 +-- apps/web/src/components/Navbar/Navbar.tsx | 2 ++ .../components/sections/MapSection/index.ts | 1 - apps/web/src/{app => fonts}/fonts.ts | 0 apps/web/src/fonts/index.ts | 1 + apps/web/src/pages/_meta.json | 18 ++++++------ apps/web/src/pages/docs/_meta.json | 12 -------- apps/web/src/pages/docs/api.mdx | 4 --- apps/web/src/pages/docs/backend.mdx | 9 ------ apps/web/src/pages/docs/index.mdx | 12 -------- .../src/pages/{docs => }/privacy-policy.mdx | 0 .../pages/{docs => }/terms-and-conditions.mdx | 0 apps/web/src/{app => styles}/globals.css | 4 +++ apps/web/src/utils/metadata.utils.ts | 7 +++++ apps/web/theme.config.tsx | 2 +- 24 files changed, 84 insertions(+), 79 deletions(-) rename apps/web/src/{components/sections/MapSection/MapSection.tsx => app/map/client-page.tsx} (73%) create mode 100644 apps/web/src/app/map/layout.tsx rename apps/web/src/{components/sections/MapSection/layers => app/map/map-layers}/heatmap-layer.ts (98%) rename apps/web/src/{components/sections/MapSection/layers => app/map/map-layers}/point-layer.ts (100%) rename apps/web/src/{components/sections/MapSection/functions/getStopsGeojson.ts => app/map/page.tsx} (77%) delete mode 100644 apps/web/src/components/sections/MapSection/index.ts rename apps/web/src/{app => fonts}/fonts.ts (100%) create mode 100644 apps/web/src/fonts/index.ts delete mode 100644 apps/web/src/pages/docs/_meta.json delete mode 100644 apps/web/src/pages/docs/api.mdx delete mode 100644 apps/web/src/pages/docs/backend.mdx delete mode 100644 apps/web/src/pages/docs/index.mdx rename apps/web/src/pages/{docs => }/privacy-policy.mdx (100%) rename apps/web/src/pages/{docs => }/terms-and-conditions.mdx (100%) rename apps/web/src/{app => styles}/globals.css (76%) create mode 100644 apps/web/src/utils/metadata.utils.ts diff --git a/apps/web/next.config.mjs b/apps/web/next.config.mjs index 38a7f795..f7132af9 100644 --- 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 index e0e53ff0..7b078aef 100644 --- 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 ( -
+
{children} diff --git a/apps/web/src/components/sections/MapSection/MapSection.tsx b/apps/web/src/app/map/client-page.tsx similarity index 73% rename from apps/web/src/components/sections/MapSection/MapSection.tsx rename to apps/web/src/app/map/client-page.tsx index 90a72437..447f96f4 100644 --- a/apps/web/src/components/sections/MapSection/MapSection.tsx +++ b/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); - - const updateStopsGeojson = async () => { - const data = await getStopsGeojson(); - setStopsGeojson(data); - }; +export const MapClientPage = (props) => { + const { stopsGeojson } = props; - useEffect(() => { - updateStopsGeojson(); - }, []); + const [allowZoom, setAllowZoom] = useState(false); return (
{
-
+
{ 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" @@ -54,7 +46,7 @@ export const MapSection = () => { attributionControl={false} > {stopsGeojson && ( - + diff --git a/apps/web/src/app/map/layout.tsx b/apps/web/src/app/map/layout.tsx new file mode 100644 index 00000000..4432de99 --- /dev/null +++ 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/apps/web/src/components/sections/MapSection/layers/heatmap-layer.ts b/apps/web/src/app/map/map-layers/heatmap-layer.ts similarity index 98% rename from apps/web/src/components/sections/MapSection/layers/heatmap-layer.ts rename to apps/web/src/app/map/map-layers/heatmap-layer.ts index 80f9284b..0d30de63 100644 --- a/apps/web/src/components/sections/MapSection/layers/heatmap-layer.ts +++ b/apps/web/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/apps/web/src/components/sections/MapSection/layers/point-layer.ts b/apps/web/src/app/map/map-layers/point-layer.ts similarity index 100% rename from apps/web/src/components/sections/MapSection/layers/point-layer.ts rename to apps/web/src/app/map/map-layers/point-layer.ts diff --git a/apps/web/src/components/sections/MapSection/functions/getStopsGeojson.ts b/apps/web/src/app/map/page.tsx similarity index 77% rename from apps/web/src/components/sections/MapSection/functions/getStopsGeojson.ts rename to apps/web/src/app/map/page.tsx index ed57a351..ac04f58a 100644 --- a/apps/web/src/components/sections/MapSection/functions/getStopsGeojson.ts +++ b/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 ; +} diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx index 202818e3..7588aed6 100644 --- 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() {
- ); diff --git a/apps/web/src/app/sitemap.ts b/apps/web/src/app/sitemap.ts index 5248d8b9..c776c359 100644 --- 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 index be44622a..886b2373 100644 --- a/apps/web/src/components/Footer/Footer.tsx +++ b/apps/web/src/components/Footer/Footer.tsx @@ -53,10 +53,10 @@ export const Footer = () => { Legal - + Terms & conditions - + Privacy policy diff --git a/apps/web/src/components/Navbar/Navbar.tsx b/apps/web/src/components/Navbar/Navbar.tsx index 51797edd..ddfcda0a 100644 --- 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) => {
About + Map + Source Code diff --git a/apps/web/src/components/sections/MapSection/index.ts b/apps/web/src/components/sections/MapSection/index.ts deleted file mode 100644 index 3bf9f843..00000000 --- a/apps/web/src/components/sections/MapSection/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { MapSection } from "@/components/sections/MapSection/MapSection"; diff --git a/apps/web/src/app/fonts.ts b/apps/web/src/fonts/fonts.ts similarity index 100% rename from apps/web/src/app/fonts.ts rename to apps/web/src/fonts/fonts.ts diff --git a/apps/web/src/fonts/index.ts b/apps/web/src/fonts/index.ts new file mode 100644 index 00000000..fa0bc88e --- /dev/null +++ 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 index f43e27d4..7e33fbb0 100644 --- a/apps/web/src/pages/_meta.json +++ b/apps/web/src/pages/_meta.json @@ -1,13 +1,13 @@ -{ - "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", @@ -15,11 +15,11 @@ "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 deleted file mode 100644 index 06ced392..00000000 --- a/apps/web/src/pages/docs/_meta.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "index": "About", - "---": { - "type": "separator" - }, - "api": "API", - "backend": "Backend", - "-- Legal": { - "type": "separator", - "title": "Legal" - } -} diff --git a/apps/web/src/pages/docs/api.mdx b/apps/web/src/pages/docs/api.mdx deleted file mode 100644 index c8d44130..00000000 --- a/apps/web/src/pages/docs/api.mdx +++ /dev/null @@ -1,4 +0,0 @@ -# API - -- [Swagger (REST API)](https://api.metronow.dev/) -- [GraphQL](https://api.metronow.dev/graphql) diff --git a/apps/web/src/pages/docs/backend.mdx b/apps/web/src/pages/docs/backend.mdx deleted file mode 100644 index fa14fcc2..00000000 --- a/apps/web/src/pages/docs/backend.mdx +++ /dev/null @@ -1,9 +0,0 @@ -# Backend - -[source code](https://github.com/krystxf/metro-now/tree/main/apps/backend) - -Wrapper for [Golemio API](https://api.golemio.cz/pid/docs/openapi/#/%F0%9F%9A%8F%20PID%20Departure%20Boards/get_pid_departureboards) built with [NestJS](https://nestjs.com/) - -## Setup - -see instructions in the [README](https://github.com/krystxf/metro-now/blob/main/apps/backend/README.md) diff --git a/apps/web/src/pages/docs/index.mdx b/apps/web/src/pages/docs/index.mdx deleted file mode 100644 index 40fb89e4..00000000 --- a/apps/web/src/pages/docs/index.mdx +++ /dev/null @@ -1,12 +0,0 @@ -# About - -🚇 Metro Now is an app that shows real time metro departures from your nearest station. And it's **open-source**! - -## Supported cities - -- Prague - -## Supported devices - -- iPhone - WIP -- Apple Watch diff --git a/apps/web/src/pages/docs/privacy-policy.mdx b/apps/web/src/pages/privacy-policy.mdx similarity index 100% rename from apps/web/src/pages/docs/privacy-policy.mdx rename to apps/web/src/pages/privacy-policy.mdx diff --git a/apps/web/src/pages/docs/terms-and-conditions.mdx b/apps/web/src/pages/terms-and-conditions.mdx similarity index 100% rename from apps/web/src/pages/docs/terms-and-conditions.mdx rename to apps/web/src/pages/terms-and-conditions.mdx diff --git a/apps/web/src/app/globals.css b/apps/web/src/styles/globals.css similarity index 76% rename from apps/web/src/app/globals.css rename to apps/web/src/styles/globals.css index 856d4b9f..98186504 100644 --- a/apps/web/src/app/globals.css +++ b/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 new file mode 100644 index 00000000..c865f401 --- /dev/null +++ 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 index df80b584..3456eaec 100644 --- a/apps/web/theme.config.tsx +++ b/apps/web/theme.config.tsx @@ -4,7 +4,7 @@ import React from "react"; const themeConfig = { logo: 🚇 metro-now, - docsRepositoryBase: `${SOURCE_CODE_URL}/tree/main/docs`, + docsRepositoryBase: `${SOURCE_CODE_URL}/tree/main/apps/web`, project: { link: SOURCE_CODE_URL, },