Merge remote-tracking branch 'upstream/master' into opg-discover

.dockerignore

@@ -0,0 +1,7 @@
+Dockerfile
+.dockerignore
+node_modules
+npm-debug.log
+README.md
+.next
+.git

.gitignore

@@ -2,10 +2,12 @@
 /coverage
 /build
 /dist
+/tsconfig.tsbuildinfo
 .next
 .DS_Store
 .env
 .idea
+next-env.d.ts
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*

.gitpod.yml

@@ -0,0 +1,3 @@
+tasks:
+  - init: yarn
+    command: yarn dev

.nvmrc

@@ -0,0 +1 @@
+18

Dockerfile

@@ -1,14 +1,64 @@
-FROM mhart/alpine-node:10 as build-stage
+FROM node:18-alpine AS base
+
+# Install dependencies only when needed
+FROM base AS deps
+# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+
+# Install dependencies based on the preferred package manager
+COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
+RUN \
+  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
+  elif [ -f package-lock.json ]; then npm ci; \
+  elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm i --frozen-lockfile; \
+  else echo "Lockfile not found." && exit 1; \
+  fi
+
+
+# Rebuild the source code only when needed
+FROM base AS builder
 WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
 COPY . .
-RUN yarn install --pure-lockfile
-RUN yarn build
-RUN yarn --production
 
-FROM mhart/alpine-node:base-10
+# Next.js collects completely anonymous telemetry data about general usage.
+# Learn more here: https://nextjs.org/telemetry
+# Uncomment the following line in case you want to disable telemetry during the build.
+# ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN NEXTJS_OUTPUT=standalone yarn build
+
+# Production image, copy all the files and run next
+FROM base AS runner
 WORKDIR /app
-ENV NODE_ENV="production"
-COPY --from=build-stage /app .
+
+ENV NODE_ENV production
+# Uncomment the following line in case you want to disable telemetry during runtime.
+# ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+COPY --from=builder /app/public ./public
+
+# Set the correct permission for prerender cache
+RUN mkdir .next
+RUN chown nextjs:nodejs .next
+
+# Automatically leverage output traces to reduce image size
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+USER nextjs
+
 EXPOSE 3000
-CMD ["node", "./node_modules/.bin/next", "start"]
 
+ENV PORT 3000
+# set hostname to localhost
+ENV HOSTNAME "0.0.0.0"
+
+# server.js is created by next build from the standalone output
+# https://nextjs.org/docs/pages/api-reference/next-config-js/output
+CMD ["node", "server.js"]

README.md

@@ -20,10 +20,11 @@ You may [add issues](https://github.com/zbycz/osmapp/issues) here on github, or
 ## Features 🗺 📱 🖥
 
 - **clickable map** – poi, cities, localities, ponds (more coming soon)
-- **info panel** – images from Wikipedia, Mapillary or Fody
+- **info panel** – images from Wikipedia, Mapillary or Fody, line numbers on public transport stops
 - **editing** – for anonymous users inserts a note
 - **search engine** – try for example "Tesco, London"
 - **vector maps** – with the possibility of tilting to 3D (drag the compass, or two fingers drag)
+- **3D terrain** - tilt to 3D and then click terrain icon to show 3D terrain
 - **tourist map** – from MapTiler: vector, including marked routes
 - **layer switcher** – still basic, but you can add your own layers
 - **mobile applications** – see [osmapp.org/install](https://osmapp.org/install)

next.config.js

@@ -1,12 +1,22 @@
 /* eslint-disable */
 const packageJson = require('./package.json');
-const withPWA = require('next-pwa');
+const withPWA = require('next-pwa')({
+  dest: 'public',
+});
 
-module.exports = withPWA({
-  pwa: {
-    dest: 'public',
-  },
+const languages = {
+  de: 'Deutsch',
+  cs: 'Česky',
+  en: 'English',
+  es: 'Español',
+  fr: 'Français',
+  it: 'Italiano',
+  pl: 'Polski',
+  am: 'አማርኛ',
+};
 
+module.exports = withPWA({
+  output: process.env.NEXTJS_OUTPUT || undefined,
   //TODO fails with current webpack config. Probably needs to get rid of sentry? (@sentry/nextjs was not cool)
   // future: {
   //   webpack5: true,
@@ -15,25 +25,17 @@ module.exports = withPWA({
     osmappVersion: packageJson.version.replace(/\.0$/, ''),
     commitHash: (process.env.VERCEL_GIT_COMMIT_SHA || '').substr(0, 7),
     commitMessage: process.env.VERCEL_GIT_COMMIT_MESSAGE || 'dev',
-    languages: {
-      de: 'Deutsch',
-      cs: 'Česky',
-      en: 'English',
-      es: 'Español',
-      fr: 'Français',
-      it: 'Italiano',
-      pl: 'Polski',
-      am: 'አማርኛ',
-    },
+    languages,
+  },
+  i18n: {
+    // we let next only handle URL, but chosen locale is in getServerIntl()
+    locales: ['default', ...Object.keys(languages)],
+    defaultLocale: 'default',
+    localeDetection: false,
   },
   webpack: (config, { dev, isServer }) => {
-    // Fixes npm packages that depend on `fs` module
-    config.node = {
-      fs: 'empty',
-    };
-
     if (!dev) {
-      config.devtool = 'source-maps';
+      config.devtool = 'source-map';
       for (const plugin of config.optimization.minimizer) {
         if (plugin.constructor.name === 'TerserPlugin') {
           plugin.options.sourceMap = true;

package.json

@@ -1,8 +1,12 @@
 {
   "name": "osmapp",
   "version": "1.3.0",
+  "engines": {
+    "node": "^18"
+  },
   "scripts": {
     "dev": "next",
+    "test": "jest",
     "lint": "eslint . --report-unused-disable-directives",
     "lintfix": "prettier . --write && eslint ./src ./pages --report-unused-disable-directives --fix",
     "prettify": "prettier . --write",
@@ -28,9 +32,9 @@
     "@material-ui/core": "^4.11.4",
     "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "4.0.0-alpha.58",
+    "@openstreetmap/id-tagging-schema": "^6.1.0",
     "@sentry/browser": "^6.5.1",
     "@sentry/node": "^6.5.1",
-    "@types/maplibre-gl": "^1.13.1",
     "accept-language-parser": "^1.5.0",
     "autosuggest-highlight": "^3.1.1",
     "isomorphic-unfetch": "^3.1.0",
@@ -39,20 +43,21 @@
     "js-cookie": "^2.2.1",
     "jss": "^10.6.0",
     "lodash": "^4.17.21",
-    "maplibre-gl": "^1.14.0",
-    "next": "^10.2.3",
+    "maplibre-gl": "^3.3.1",
+    "next": "^13.4.3",
     "next-cookies": "^2.0.3",
     "next-pwa": "^5.2.21",
     "osm-auth": "^1.1.1",
-    "react": "^17.0.2",
+    "react": "^18.2.0",
     "react-custom-scrollbars": "^4.2.1",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.2.0",
     "react-jss": "^10.6.0",
     "simple-opening-hours": "^0.1.1",
     "styled-components": "^5.3.0",
     "styled-jsx": "^3.4.4"
   },
   "devDependencies": {
+    "@types/autosuggest-highlight": "^3.2.0",
     "@types/jest": "^26.0.23",
     "@typescript-eslint/eslint-plugin": "^4.26.0",
     "babel-eslint": "^10.1.0",
@@ -67,6 +72,6 @@
     "husky": "^4",
     "lint-staged": "^11.0.0",
     "prettier": "^2.3.0",
-    "typescript": "^4.3.2"
+    "typescript": "^5.0.4"
   }
 }

pages/_document.tsx

@@ -1,5 +1,11 @@
 import React from 'react';
-import Document, { Head, Html, Main, NextScript } from 'next/document';
+import Document, {
+  DocumentInitialProps,
+  Head,
+  Html,
+  Main,
+  NextScript,
+} from 'next/document';
 import { ServerStyleSheets } from '@material-ui/core/styles';
 import { ServerStyleSheet } from 'styled-components';
 import { getServerIntl } from '../src/services/intlServer';
@@ -8,7 +14,7 @@ import { Favicons } from '../src/helpers/Favicons';
 
 export default class MyDocument extends Document {
   render() {
-    const { serverIntl } = this.props as any;
+    const { serverIntl, asPath } = this.props as any;
     return (
       <Html lang={serverIntl.lang}>
         <Head>
@@ -23,6 +29,16 @@ export default class MyDocument extends Document {
           <link rel="preconnect" href="https://commons.wikimedia.org" />
           <link rel="preconnect" href="https://www.wikidata.org" />
           <link rel="preconnect" href="https://en.wikipedia.org" />
+          {/* we dont need this to change after SSR */}
+          {Object.keys(serverIntl.languages).map((lang) => (
+            <link
+              key={lang}
+              rel="alternate"
+              hrefLang={lang}
+              href={`/${lang}${asPath}`}
+            />
+          ))}
+
           <Favicons />
           {/* <style>{`body {background-color: #eb5757;}`/* for apple PWA translucent-black status bar *!/</style> */}
         </Head>
@@ -83,5 +99,6 @@ MyDocument.getInitialProps = async (ctx) => {
       sheets2.getStyleElement(),
     ],
     serverIntl,
-  };
+    asPath: ctx.asPath,
+  } as DocumentInitialProps;
 };

pages/sitemap.txt.tsx

@@ -0,0 +1,19 @@
+import { fetchText } from '../src/services/fetch';
+
+const Sitemap = () => null;
+
+export const getServerSideProps = async ({ res }) => {
+  const content = await fetchText(
+    'https://zbycz.github.io/osm-static/sitemap.txt',
+  );
+
+  res.setHeader('Content-Type', 'text/plain');
+  res.write(content);
+  res.end();
+
+  return {
+    props: {},
+  };
+};
+
+export default Sitemap;

src/assets/WikipediaIcon.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+// source https://icon-sets.iconify.design/tabler/brand-wikipedia/
+// license MIT
+export const WikipediaIcon = (props) => (
+  // eslint-disable-next-line react/jsx-props-no-spreading
+  <svg viewBox="0 0 24 24" aria-hidden="true" {...props}>
+    <g
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+    >
+      <path d="M3 4.984h2m3 0h2.5m4 0H17m5 0h-2m-16 0L9.455 19.5L16 4.984" />
+      <path d="M9 4.984L15 19.5l6-14.516" />
+    </g>
+  </svg>
+);

src/components/App/App.tsx

@@ -3,7 +3,9 @@ import Cookies from 'js-cookie';
 
 import nextCookies from 'next-cookies';
 import Router, { useRouter } from 'next/router';
-import FeaturePanel from '../FeaturePanel/FeaturePanel';
+import { Snackbar } from '@material-ui/core';
+import { Alert } from '@material-ui/lab';
+import { FeaturePanel } from '../FeaturePanel/FeaturePanel';
 import Map from '../Map/Map';
 import SearchBox from '../SearchBox/SearchBox';
 import { MapStateProvider, useMapStateContext } from '../utils/MapStateContext';
@@ -16,6 +18,7 @@ import { FeaturePreview } from '../FeaturePreview/FeaturePreview';
 import { TitleAndMetaTags } from '../../helpers/TitleAndMetaTags';
 import { InstallDialog } from '../HomepagePanel/InstallDialog';
 import { setIntlForSSR } from '../../services/intl';
+import { EditDialogProvider } from '../FeaturePanel/helpers/EditDialogContext';
 
 const usePersistMapView = () => {
   const { view } = useMapStateContext();
@@ -66,6 +69,14 @@ const IndexWithProviders = () => {
   usePersistMapView();
   useUpdateViewFromHash();
 
+  // temporary Alert until the issue is fixed
+  const [brokenShown, setBrokenShown] = React.useState(true);
+  const onBrokenClose = (event?: React.SyntheticEvent, reason?: string) => {
+    if (reason !== 'clickaway') {
+      setBrokenShown(false);
+    }
+  };
+
   // TODO add correct error boundaries
   return (
     <>
@@ -77,6 +88,21 @@ const IndexWithProviders = () => {
       <Map />
       {preview && <FeaturePreview />}
       <TitleAndMetaTags />
+
+      {!featureShown && !preview && (
+        <Snackbar open={brokenShown} onClose={onBrokenClose}>
+          <Alert onClose={onBrokenClose} severity="info" variant="outlined">
+            Some clickable POIs are broken on Maptiler –{' '}
+            <a
+              href="https://github.com/openmaptiles/openmaptiles/issues/1587"
+              style={{ textDecoration: 'underline' }}
+            >
+              issue here
+            </a>
+            .
+          </Alert>
+        </Snackbar>
+      )}
     </>
   );
 };
@@ -87,7 +113,9 @@ const App = ({ featureFromRouter, initialMapView, hpCookie }) => {
     <FeatureProvider featureFromRouter={featureFromRouter} hpCookie={hpCookie}>
       <MapStateProvider initialMapView={mapView}>
         <OsmAuthProvider>
-          <IndexWithProviders />
+          <EditDialogProvider /* TODO supply router.query */>
+            <IndexWithProviders />
+          </EditDialogProvider>
         </OsmAuthProvider>
       </MapStateProvider>
     </FeatureProvider>