Skip to content

sketching and analysis use case page #960

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
underbluewaters merged 3 commits into from
Jun 24, 2026
Merged

sketching and analysis use case page #960

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4c4d78e
WIP
underbluewaters Jun 23, 2026
127850c
Finished first copy of sketch and analysis page
underbluewaters Jun 24, 2026
cb7b246
WIP
underbluewaters Jun 24, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added packages/client/public/favicon-32.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified packages/client/public/favicon.ico
View file
Open in desktop
Binary file not shown.
14 changes: 8 additions & 6 deletions packages/client/public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,16 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="/favicon.ico" />
<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png" />
<link rel="apple-touch-icon" sizes="192x192" href="/logo192.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta
name="description"
content="SeaSketch is the platform for marine spatial planning. Publish maps, survey stakeholders, and design better ocean plans."
/>
<meta name="theme-color" content="#267588" />
<meta name="seasketch-build" content="%REACT_APP_BUILD%" />
<link rel="apple-touch-icon" href="/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="/manifest.json" />
<link href="/fonts.css" rel="stylesheet" />
<link href="/tailwind-empty-vars-2.css" rel="stylesheet" />
Expand Down
Binary file modified packages/client/public/logo192.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified packages/client/public/logo512.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
7 changes: 4 additions & 3 deletions packages/client/public/manifest.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
{
"short_name": "SeaSketch",
"name": "SeaSketch",
"description": "The platform for marine spatial planning.",
"icons": [
{
"src": "favicon.ico",
Expand All @@ -18,8 +19,8 @@
"sizes": "512x512"
}
],
"start_url": ".",
"start_url": "/",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
"theme_color": "#267588",
"background_color": "#020617"
}
Binary file removed packages/client/public/uses/data-governance.png
View file
Open in desktop
Binary file not shown.
Binary file removed packages/client/public/uses/drag-and-drop-data.png
View file
Open in desktop
Binary file not shown.
Binary file removed packages/client/public/uses/fast-beautiful-maps-cursor.png
View file
Open in desktop
Binary file not shown.
Binary file removed packages/client/public/uses/fast-beautiful-maps-tiles.png
View file
Open in desktop
Binary file not shown.
Binary file removed packages/client/public/uses/fast-beautiful-maps.png
View file
Open in desktop
Binary file not shown.
Binary file removed packages/client/public/uses/graphical-cartography-tools.png
View file
Open in desktop
Binary file not shown.
Binary file removed packages/client/public/uses/map-portal-hero.png
View file
Open in desktop
Binary file not shown.
Binary file removed packages/client/public/uses/outer-reef-flat.png
View file
Open in desktop
Binary file not shown.
92 changes: 73 additions & 19 deletions packages/client/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
import React, { Suspense, useEffect, useMemo, useState } from "react";
import { Switch, Route, Redirect, useLocation } from "react-router-dom";
import {
Switch,
Route,
Redirect,
useHistory,
useLocation,
} from "react-router-dom";
import { Trans, useTranslation } from "react-i18next";
import SignInPage from "./SignInPage";
import ProjectsPage from "./homepage/ProjectsPage";
Expand All @@ -21,11 +27,7 @@ import DeveloperApiPage from "./DeveloperAPIPage";
import { Helmet } from "react-helmet";
import LandingPage from "./homepage/LandingPage";
import TeamPage from "./homepage/TeamPage";
import {
MapPortalHostingPage,
OceanUseSurveysPage,
SketchingAndAnalysisPage,
} from "./homepage/useCases";
import SiteHelmet from "./homepage/SiteHelmet";
import {
CaseStudiesIndex,
AzoresCaseStudy,
Expand Down Expand Up @@ -72,6 +74,24 @@ const LazySubmitOfflineResponsesPage = React.lazy(
/* webpackChunkName: "OfflineSurveys" */ "./offline/SubmitOfflineResponsesPage"
)
);
const LazyMapPortalHostingPage = React.lazy(
() =>
import(
/* webpackChunkName: "MapPortalHosting" */ "./homepage/useCases/MapPortalHosting"
)
);
const LazyOceanUseSurveysPage = React.lazy(
() =>
import(
/* webpackChunkName: "OceanUseSurveys" */ "./homepage/useCases/OceanUseSurveys"
)
);
const LazySketchingAndAnalysisPage = React.lazy(
() =>
import(
/* webpackChunkName: "SketchingAndAnalysis" */ "./homepage/useCases/SketchingAndAnalysis"
)
);

const LazyFullScreenOfflinePage = React.lazy(
() =>
Expand Down Expand Up @@ -103,10 +123,33 @@ const LazySuperuserDashboard = React.lazy(
() => import(/* webpackChunkName: "SuperuserDashboard" */ "./Dashboard")
);

/** Public marketing pages that should start at the top on forward navigation. */
function shouldScrollMarketingPageToTop(pathname: string, hash: string) {
if (hash) {
return false;
}
if (pathname.startsWith("/uses/") || pathname.startsWith("/case-studies")) {
return true;
}
return [
"/",
"/projects",
"/api",
"/team",
"/new-project",
"/terms-of-use",
"/privacy-policy",
"/signin",
"/submit-offline-surveys",
"/account-settings",
].includes(pathname);
}

function App() {
const { user } = useAuth0();
useTranslation("homepage");
const [error, setError] = useState<Error | null>(null);
const history = useHistory();
const location = useLocation();
const isUseCaseRoute = location.pathname.startsWith("/uses/");
const isDarkRoutes =
Expand Down Expand Up @@ -147,13 +190,23 @@ function App() {
}
}, [location.pathname, location.hash]);

// Ensure use-case detail pages always start at the top when navigating
// between routes in the SPA.
// Scroll marketing pages to top on forward navigation only. Using pathname
// in a mount effect also ran on HMR remounts and POP (back/forward), which
// fought browser scroll restoration during development and when using the
// back button. Hash navigations (e.g. /#use-cases) are handled separately.
useEffect(() => {
if (location.pathname.startsWith("/uses/")) {
window.scrollTo({ top: 0, left: 0, behavior: "auto" });
}
}, [location.pathname]);
return history.listen((nextLocation, action) => {
if (
(action === "PUSH" || action === "REPLACE") &&
shouldScrollMarketingPageToTop(
nextLocation.pathname,
nextLocation.hash
)
) {
window.scrollTo({ top: 0, left: 0, behavior: "auto" });
}
});
}, [history]);

const frontOfTheHouse = [
"/signin",
Expand Down Expand Up @@ -254,13 +307,13 @@ function App() {
<TeamPage />
</Route>
<Route exact path="/uses/map-portal-hosting">
<MapPortalHostingPage />
<LazyMapPortalHostingPage />
</Route>
<Route exact path="/uses/ocean-use-surveys">
<OceanUseSurveysPage />
<LazyOceanUseSurveysPage />
</Route>
<Route exact path="/uses/sketching-and-analysis">
<SketchingAndAnalysisPage />
<LazySketchingAndAnalysisPage />
</Route>
<Route exact path="/uses/map-portal">
<Redirect to="/uses/map-portal-hosting" />
Expand Down Expand Up @@ -298,10 +351,11 @@ function App() {
<OfflineResponsesToastNotification />
<LazyFullScreenOfflinePage />
<LandingPage />
<Helmet>
<title>SeaSketch</title>
<link rel="canonical" href={`https://www.seasketch.org/`} />
</Helmet>
<SiteHelmet
title="SeaSketch"
description="SeaSketch is the platform for marine spatial planning. Publish maps, survey stakeholders, and design better ocean plans."
path="/"
/>
{/* <h1 className="mx-auto max-w-xl mt-2 mb-8 text-3xl text-left sm:text-center leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl sm:leading-10">
{t(
"SeaSketch Supports Collaborative Planning for our Oceans"
Expand Down
6 changes: 6 additions & 0 deletions packages/client/src/DeveloperAPIPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,19 @@
/* eslint-disable i18next/no-literal-string */

import { Trans } from "react-i18next";
import SiteHelmet from "./homepage/SiteHelmet";

export default function DeveloperApiPage() {
return (
<main
className="bg-gray-800 pt-12"
style={{ minHeight: "calc(100vh - 64px)" }}
>
<SiteHelmet
title="Developer API"
description="Customize SeaSketch projects using the open-source Geoprocessing Framework."
path="/api"
/>
<div className="mx-auto max-w-screen-xl">
<div className="lg:grid lg:grid-cols-12 lg:gap-8 overflow-x-hidden pb-4">
<div className="px-4 sm:px-6 sm:text-center md:max-w-2xl md:mx-auto lg:pl-8 lg:col-span-6 lg:text-left lg:flex lg:items-center">
Expand Down
41 changes: 7 additions & 34 deletions packages/client/src/header/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,6 @@ import ProfileControl from "./ProfileControl";
import useCurrentProjectMetadata from "../useCurrentProjectMetadata";
import { useCaseLinks } from "../homepage/useCases";

// Temporary launch mode:
// Keep Features as a simple anchor to `/#use-cases` for now.
// To restore the dropdown with all use case pages, set this back to `true`.
const enableFeaturesDropdown = false;

const navigationLinks = [
{
to: "/projects",
Expand Down Expand Up @@ -134,7 +129,7 @@ export default function Header() {
{
<div className="ml-10 flex items-baseline space-x-4">
{navigationLinks.map((link) =>
link.to === "/features" && enableFeaturesDropdown ? (
link.to === "/features" ? (
<Popover.Root
key={link.to}
open={featuresOpen}
Expand Down Expand Up @@ -189,19 +184,6 @@ export default function Header() {
</Popover.Content>
</Popover.Portal>
</Popover.Root>
) : link.to === "/features" ? (
<a
key={link.to}
href="/#use-cases"
className={`
px-3 py-2 rounded-md text-sm font-medium text-slate-200
hover:text-white focus:outline-none focus-visible:ring-1

`}
id={link.id}
>
{link.label}
</a>
) : (
<NavLink
key={link.to}
Expand Down Expand Up @@ -279,35 +261,26 @@ export default function Header() {
} bg-white absolute top left w-full h-content shadow-xl z-10 pt-2`}
>
{navigationLinks.map((link) =>
link.to === "/features" && enableFeaturesDropdown ? (
link.to === "/features" ? (
<div key={link.to}>
<a
href="/#use-cases"
<span
id={`modal-` + link.id}
className={`block w-full text-left px-4 py-2 text-base leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900 font-semibold`}
className="block w-full px-4 py-2 text-base font-semibold leading-5 text-gray-700"
>
{link.label}
</a>
</span>
{useCaseLinks.map((feature) => (
<NavLink
key={feature.to}
to={feature.to}
id={`modal-nav-${feature.id}`}
className={`block w-full text-left px-8 py-2 text-sm leading-5 text-gray-600 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900`}
onClick={() => setProfileModalOpen(false)}
className="block w-full text-left px-8 py-2 text-sm leading-5 text-gray-600 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
>
{feature.navLabel}
</NavLink>
))}
</div>
) : link.to === "/features" ? (
<a
key={link.to}
href="/#use-cases"
id={`modal-` + link.id}
className={`block w-full text-left px-4 py-2 text-base leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900 font-semibold`}
>
{link.label}
</a>
) : (
<NavLink
key={link.to}
Expand Down
38 changes: 15 additions & 23 deletions packages/client/src/homepage/LandingPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import Testimonials from "./Testimonials";
import News from "./News";
import WhereWeWork from "./WhereWeWork";
import ProjectSearchBar from "./ProjectSearchBar";
import { publishedUseCaseLinks, enableAllUseCaseLinks } from "./useCases";
import { useCaseLinks } from "./useCases";

export type TrustedPartnerLogo = {
alt: string;
Expand Down Expand Up @@ -364,10 +364,10 @@ export default function LandingPage() {
<li>Integrates with Esri and open-source services</li>
</ul>
<Link
to={publishedUseCaseLinks[0].to}
to={useCaseLinks[0].to}
className="mt-5 inline-block text-sm font-medium text-sky-700 hover:text-sky-900 hover:underline"
>
{publishedUseCaseLinks[0].readMoreLabel}
{useCaseLinks[0].readMoreLabel}
</Link>
</div>
</div>
Expand Down Expand Up @@ -418,16 +418,12 @@ export default function LandingPage() {
<li>Offline data collection</li>
<li>Understand ocean uses by sector</li>
</ul>
{enableAllUseCaseLinks ? (
// Re-enable this once Ocean Use Surveys page is complete.
// Make sure `enableAllUseCaseLinks` is set to true in `homepage/useCases/index.ts`.
<Link
to="/uses/ocean-use-surveys"
className="mt-5 inline-block text-sm font-medium text-sky-700 hover:text-sky-900 hover:underline"
>
Read more about Ocean Use Surveys
</Link>
) : null}
<Link
to={useCaseLinks[1].to}
className="mt-5 inline-block text-sm font-medium text-sky-700 hover:text-sky-900 hover:underline"
>
{useCaseLinks[1].readMoreLabel}
</Link>
</div>
</div>

Expand Down Expand Up @@ -475,16 +471,12 @@ export default function LandingPage() {
<li>Online collaboration tools and discussion forums</li>
<li>Export products to GIS and Excel</li>
</ul>
{/* {enableAllUseCaseLinks ? (
// Re-enable this once Sketching and Analysis page is complete.
// Make sure `enableAllUseCaseLinks` is set to true in `homepage/useCases/index.ts`.
<Link
to="/uses/sketching-and-analysis"
className="mt-5 inline-block text-sm font-medium text-sky-700 hover:text-sky-900 hover:underline"
>
Read more about Sketching and Analysis
</Link>
) : null} */}
<Link
to={useCaseLinks[2].to}
className="mt-5 inline-block text-sm font-medium text-sky-700 hover:text-sky-900 hover:underline"
>
{useCaseLinks[2].readMoreLabel}
</Link>
</div>
</div>
</div>
Expand Down
15 changes: 6 additions & 9 deletions packages/client/src/homepage/NewProjectPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import NewProjectForm from "./NewProjectForm";
import { Link } from "react-router-dom";
import { useMeQuery, useVerifyEmailMutation } from "../generated/graphql";
import Skeleton from "../components/Skeleton";
import { Helmet } from "react-helmet";
import SiteHelmet from "./SiteHelmet";

const logos = [
{
Expand Down Expand Up @@ -55,14 +55,11 @@ export default function NewProjectPage() {
const { data, loading, error } = useMeQuery();
return (
<main className="bg-gray-800 min-h-screen pt-12 text-black">
<Helmet>
<title>Create a SeaSketch Project</title>
<meta
name="description"
content="Create a free SeaSketch project for your marine spatial planning needs."
/>
<link rel="canonical" href={`https://www.seasketch.org/new-project/`} />
</Helmet>
<SiteHelmet
title="Create a SeaSketch Project"
description="Create a free SeaSketch project for your marine spatial planning needs."
path="/new-project"
/>

<div className="mx-auto max-w-screen-xl">
<div className="lg:grid lg:grid-cols-12 lg:gap-8">
Expand Down
Loading
Loading