Add the contact page, containing a map with the company location

I was not sure whether to use PostGIS to store the GPS location of the
company, as i am sure i will only use that point just to show the map.
However, just in case, it is not a big deal.

There is no way to change that from the administration pages for now,
because of time constraints, and it is very unlikely that they will
change the campgrounds’ location in the near future.

The location is in a separate table because i did not want to have to
change every test file, to be honest, but this also makes the map
“optional” without the need for NULL values.

I added the contact address to every public page because the new design
adds it to the footer, so i will be needing it everywhere, just like the
menu.

debian/control

@@ -14,6 +14,7 @@ Build-Depends:
   postgresql-all (>= 217~),
   sqitch,
   pgtap,
+  postgresql-15-postgis-3,
   postgresql-15-pg-libphonenumber,
   postgresql-15-pgtap,
   postgresql-15-pguri,
@@ -54,6 +55,7 @@ Package: camper-sqitch
 Architecture: all
 Depends:
   ${misc:Depends},
+  postgresql-15-postgis-3,
   postgresql-15-pg-libphonenumber,
   postgresql-15-pguri,
   postgresql-15-vat,

demo/demo.sql

@@ -18,6 +18,10 @@ values (52, 'localhost:8080')
      , (52, 'camper.tandem.ws')
 ;
 
+insert into company_geography (company_id, geog)
+values (52, 'SRID=4326;POINT(2.598825853208973 42.24256146290889)')
+;
+
 insert into company_user (company_id, user_id, role)
 values (52, 42, 'employee')
      , (52, 43, 'admin')

deploy/company_geography.sql

@@ -0,0 +1,53 @@
+-- Deploy camper:company_geography to pg
+-- requires: roles
+-- requires: schema_camper
+-- requires: company
+-- requires: user_profile
+-- requires: extension_postgis
+
+begin;
+
+set search_path to camper, public;
+
+create table company_geography (
+	company_id integer primary key references company,
+	geog geography not null
+);
+
+grant select on table company_geography to guest;
+grant select on table company_geography to employee;
+grant select, insert, update, delete on table company_geography to admin;
+
+alter table company_geography enable row level security;
+
+create policy guest_ok
+on company_geography
+for select
+using (true)
+;
+
+create policy insert_to_company
+on company_geography
+for insert
+with check (
+	company_id in (select company_id from user_profile)
+)
+;
+
+create policy update_company
+on company_geography
+for update
+using (
+	company_id in (select company_id from user_profile)
+)
+;
+
+create policy delete_from_company
+on company_geography
+for delete
+using (
+	company_id in (select company_id from user_profile)
+)
+;
+
+commit;

deploy/extension_postgis.sql

@@ -0,0 +1,8 @@
+-- Deploy camper:extension_postgis to pg
+-- requires: schema_public
+
+begin;
+
+create extension if not exists postgis;
+
+commit;

pkg/app/public.go

@@ -44,6 +44,8 @@ func (h *publicHandler) Handler(user *auth.User, company *auth.Company, conn *da
 			h.services.Handler(user, company, conn).ServeHTTP(w, r)
 		case "surroundings":
 			surroundingsHandler(user, company, conn).ServeHTTP(w, r)
+		case "contact":
+			contactHandler(user, company, conn).ServeHTTP(w, r)
 		default:
 			http.NotFound(w, r)
 		}
@@ -69,3 +71,53 @@ func surroundingsHandler(user *auth.User, company *auth.Company, conn *database.
 		}
 	})
 }
+
+func contactHandler(user *auth.User, company *auth.Company, conn *database.Conn) http.Handler {
+	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		var head string
+		head, r.URL.Path = httplib.ShiftPath(r.URL.Path)
+		switch head {
+		case "":
+			switch r.Method {
+			case http.MethodGet:
+				page := newContactPage()
+				page.MustRender(w, r, user, company, conn)
+			default:
+				httplib.MethodNotAllowed(w, r, http.MethodGet)
+			}
+		default:
+			http.NotFound(w, r)
+		}
+	})
+}
+
+type contactPage struct {
+	*template.PublicPage
+	CompanyGeography *geographyPoint
+}
+
+func newContactPage() *contactPage {
+	page := &contactPage{
+		PublicPage: template.NewPublicPage(),
+	}
+	return page
+}
+
+func (p *contactPage) MustRender(w http.ResponseWriter, r *http.Request, user *auth.User, company *auth.Company, conn *database.Conn) {
+	p.Setup(r, user, company, conn)
+	row := conn.QueryRow(r.Context(), `select st_x(geog::geometry)::text, st_y(geog::geometry)::text from company_geography where company_id = $1`, company.ID)
+	geography := &geographyPoint{}
+	if err := row.Scan(&geography.Lng, &geography.Lat); err != nil {
+		if !database.ErrorIsNotFound(err) {
+			panic(err)
+		}
+	} else {
+		p.CompanyGeography = geography
+	}
+	template.MustRenderPublic(w, r, user, company, "contact.gohtml", p)
+}
+
+type geographyPoint struct {
+	Lat string
+	Lng string
+}

pkg/template/page.go

@@ -20,10 +20,13 @@ import (
 type PublicPage struct {
 	LocalizedAlternates []*LocalizedAlternate
 	Menu                *siteMenu
+	CompanyAddress      *address
 }
 
 func NewPublicPage() *PublicPage {
-	return &PublicPage{}
+	return &PublicPage{
+		CompanyAddress: &address{},
+	}
 }
 
 func (p *PublicPage) Setup(r *http.Request, user *auth.User, company *auth.Company, conn *database.Conn) {
@@ -49,6 +52,10 @@ func (p *PublicPage) Setup(r *http.Request, user *auth.User, company *auth.Compa
 			  and active
 		`, user.Locale.Language, company.ID),
 	}
+
+	if err := p.CompanyAddress.FillFromDatabase(r.Context(), conn, company); err != nil {
+		panic(err)
+	}
 }
 
 type LocalizedAlternate struct {
@@ -90,3 +97,39 @@ func mustCollectMenuItems(ctx context.Context, conn *database.Conn, loc *locale.
 
 	return items
 }
+
+type address struct {
+	TradeName  string
+	Address    string
+	PostalCode string
+	Province   string
+	City       string
+	Phone      string
+	PhoneURL   string
+	Email      string
+}
+
+func (addr *address) FillFromDatabase(ctx context.Context, conn *database.Conn, company *auth.Company) error {
+	row := conn.QueryRow(ctx, `
+		select trade_name
+		     , address
+		     , postal_code
+		     , province
+		     , city
+		     , phone::text
+		     , 'tel:' || replace(phone::text, ' ', '')
+			 , email::text
+		from company
+		where company_id = $1
+`, company.ID)
+	return row.Scan(
+		&addr.TradeName,
+		&addr.Address,
+		&addr.PostalCode,
+		&addr.Province,
+		&addr.City,
+		&addr.Phone,
+		&addr.PhoneURL,
+		&addr.Email,
+	)
+}

revert/company_geography.sql

@@ -0,0 +1,7 @@
+-- Revert camper:company_geography from pg
+
+begin;
+
+drop table if exists camper.company_geography;
+
+commit;

revert/extension_postgis.sql

@@ -0,0 +1,7 @@
+-- Revert camper:extension_postgis from pg
+
+begin;
+
+drop extension if exists postgis;
+
+commit;

sqitch.plan

@@ -97,3 +97,5 @@ campsite_type_option_cost [roles schema_camper campsite_type season campsite_typ
 set_campsite_type_option_cost [roles schema_camper campsite_type_option_cost parse_price] 2023-10-05T17:41:58Z jordi fita mas <jordi@tandem.blog> # Add function to set cost of campsite type option
 add_campsite_type_option [roles schema_camper campsite_type_option campsite_type] 2023-10-06T09:40:03Z jordi fita mas <jordi@tandem.blog> # Add function to create new campsite type options
 edit_campsite_type_option [roles schema_camper campsite_type_option] 2023-10-06T09:51:02Z jordi fita mas <jordi@tandem.blog> # Add function to edit campsite type options
+extension_postgis [schema_public] 2023-10-06T17:18:52Z jordi fita mas <jordi@tandem.blog> # Add PostGIS extension
+company_geography [roles schema_camper company user_profile extension_postgis] 2023-10-06T17:53:34Z jordi fita mas <jordi@tandem.blog> # Add the relation for the GPS coordinates of companies

test/company_geography.sql

@@ -0,0 +1,168 @@
+-- Test company_geography
+set client_min_messages to warning;
+create extension if not exists pgtap;
+reset client_min_messages;
+
+begin;
+
+select plan(30);
+
+set search_path to camper, public;
+
+select has_table('company_geography');
+select has_pk('company_geography');
+select table_privs_are('company_geography', 'guest', array['SELECT']);
+select table_privs_are('company_geography', 'employee', array['SELECT']);
+select table_privs_are('company_geography', 'admin', array['SELECT', 'INSERT', 'UPDATE', 'DELETE']);
+select table_privs_are('company_geography', 'authenticator', array[]::text[]);
+
+select has_column('company_geography', 'company_id');
+select col_is_pk('company_geography', 'company_id');
+select col_is_fk('company_geography', 'company_id');
+select fk_ok('company_geography', 'company_id', 'company', 'company_id');
+select col_type_is('company_geography', 'company_id', 'integer');
+select col_not_null('company_geography', 'company_id');
+select col_hasnt_default('company_geography', 'company_id');
+
+select has_column('company_geography', 'geog');
+select col_type_is('company_geography', 'geog', 'geography');
+select col_not_null('company_geography', 'geog');
+select col_hasnt_default('company_geography', 'geog');
+
+
+set client_min_messages to warning;
+truncate company_geography cascade;
+truncate company_host cascade;
+truncate company_user cascade;
+truncate company cascade;
+truncate auth."user" cascade;
+reset client_min_messages;
+
+insert into auth."user" (user_id, email, name, password, cookie, cookie_expires_at)
+values (1, 'demo@tandem.blog', 'Demo', 'test', '44facbb30d8a419dfd4bfbc44a4b5539d4970148dfc84bed0e', current_timestamp + interval '1 month')
+     , (5, 'admin@tandem.blog', 'Demo', 'test', '12af4c88b528c2ad4222e3740496ecbc58e76e26f087657524', current_timestamp + interval '1 month')
+;
+
+insert into company (company_id, business_name, vatin, trade_name, phone, email, web, address, city, province, postal_code, country_code, currency_code, default_lang_tag)
+values (2, 'Company 2', 'XX123', '', '555-555-555', 'a@a', '', '', '', '', '', 'ES', 'EUR', 'ca')
+     , (4, 'Company 4', 'XX234', '', '666-666-666', 'b@b', '', '', '', '', '', 'FR', 'USD', 'ca')
+     , (8, 'Company 8', 'XX345', '', '777-777-777', 'c@c', '', '', '', '', '', 'DE', 'USD', 'en')
+;
+
+insert into company_user (company_id, user_id, role)
+values (2, 1, 'admin')
+     , (4, 5, 'admin')
+;
+
+insert into company_host (company_id, host)
+values (2, 'co2')
+     , (4, 'co4')
+;
+
+insert into company_geography (company_id, geog)
+values (2, 'SRID=4326;POINT(-118.4079 33.9434)')
+     , (4, 'SRID=4326;POINT(2.5559 49.0083)')
+;
+
+prepare geog_data as
+select company_id, st_x(geog::geometry), st_y(geog::geometry)
+from company_geography
+;
+
+set role guest;
+select bag_eq(
+	'geog_data',
+	$$ values (2, -118.4079, 33.9434)
+	        , (4,    2.5559, 49.0083)
+	$$,
+	'Everyone should be able to list all geography across all companies'
+);
+reset role;
+
+select set_cookie('44facbb30d8a419dfd4bfbc44a4b5539d4970148dfc84bed0e/demo@tandem.blog', 'co2');
+
+select lives_ok(
+	$$ delete from company_geography where company_id = 2 $$,
+	'Admin from company 2 should be able to delete geography from that company.'
+);
+
+select bag_eq(
+	'geog_data',
+	$$ values (4, 2.5559, 49.0083)
+	$$,
+	'The row should have been deleted.'
+);
+
+select lives_ok(
+	$$ insert into company_geography(company_id, geog) values (2, 'SRID=4326;POINT(-22.6056 63.9850)') $$,
+	'Admin from company 2 should be able to insert a new geography to that company.'
+);
+
+select bag_eq(
+	'geog_data',
+	$$ values (2, -22.6056, 63.9850)
+	        , (4,   2.5559, 49.0083)
+	$$,
+	'The new row should have been added'
+);
+
+select lives_ok(
+	$$ update company_geography set geog = 'SRID=4326;POINT(139.7330 35.5670)' where company_id = 2 $$,
+	'Admin from company 2 should be able to update geography of that company.'
+);
+
+select bag_eq(
+	'geog_data',
+	$$ values (2, 139.7330, 35.5670)
+	        , (4,   2.5559, 49.0083)
+	$$,
+	'The row should have been updated.'
+);
+
+
+select throws_ok(
+	$$ insert into company_geography (company_id, geog) values (8, 'SRID=4326;POINT(2.5559 49.0083)') $$,
+	'42501', 'new row violates row-level security policy for table "company_geography"',
+	'Admin from company 2 should NOT be able to insert new geography to another company 8.'
+);
+
+select lives_ok(
+	$$ update company_geography set geog = 'SRID=4326;POINT(139.7330 35.5670)' where company_id = 4 $$,
+	'Admin from company 2 should not be able to update geography of company 4, but no error if company_id is not changed.'
+);
+
+select bag_eq(
+	'geog_data',
+	$$ values (2, 139.7330, 35.5670)
+	        , (4,   2.5559, 49.0083)
+	$$,
+	'No row should have been changed.'
+);
+
+select throws_ok(
+	$$ update company_geography set company_id = 4 where company_id = 2 $$,
+	'42501', 'new row violates row-level security policy for table "company_geography"',
+	'Admin from company 2 should NOT be able to move geography to company 4'
+);
+
+select lives_ok(
+	$$ delete from company_geography where company_id = 4 $$,
+	'Admin from company 2 should NOT be able to delete geography from company 4, but not error is thrown'
+);
+
+select bag_eq(
+	'geog_data',
+	$$ values (2, 139.7330, 35.5670)
+	        , (4,   2.5559, 49.0083)
+	$$,
+	'No row should have been changed'
+);
+
+reset role;
+
+
+select *
+from finish();
+
+rollback;
+

test/extensions.sql

@@ -10,10 +10,11 @@ select plan(1);
 select extensions_are(array [
 	  'btree_gist'
 	, 'citext'
-	, 'pgtap'
 	, 'pgcrypto'
 	, 'pg_libphonenumber'
+	, 'pgtap'
 	, 'plpgsql'
+	, 'postgis'
 	, 'uri'
 	, 'vat'
 ]);

verify/company_geography.sql

@@ -0,0 +1,16 @@
+-- Verify camper:company_geography on pg
+
+begin;
+
+select company_id
+     , geog
+from camper.company_geography
+where false;
+
+select 1 / count(*) from pg_class where oid = 'camper.company_geography'::regclass and relrowsecurity;
+select 1 / count(*) from pg_policy where polname = 'guest_ok' and polrelid = 'camper.company_geography'::regclass;
+select 1 / count(*) from pg_policy where polname = 'insert_to_company' and polrelid = 'camper.company_geography'::regclass;
+select 1 / count(*) from pg_policy where polname = 'update_company' and polrelid = 'camper.company_geography'::regclass;
+select 1 / count(*) from pg_policy where polname = 'delete_from_company' and polrelid = 'camper.company_geography'::regclass;
+
+rollback;

verify/extension_postgis.sql

@@ -0,0 +1,10 @@
+-- Verify camper:extension_postgis on pg
+
+begin;
+
+select 1 / count(*)
+from pg_extension
+where extname = 'postgis'
+;
+
+rollback;

web/static/leaflet@1.9.4/leaflet.css

@@ -0,0 +1,661 @@
+/* required styles */
+
+.leaflet-pane,
+.leaflet-tile,
+.leaflet-marker-icon,
+.leaflet-marker-shadow,
+.leaflet-tile-container,
+.leaflet-pane > svg,
+.leaflet-pane > canvas,
+.leaflet-zoom-box,
+.leaflet-image-layer,
+.leaflet-layer {
+	position: absolute;
+	left: 0;
+	top: 0;
+	}
+.leaflet-container {
+	overflow: hidden;
+	}
+.leaflet-tile,
+.leaflet-marker-icon,
+.leaflet-marker-shadow {
+	-webkit-user-select: none;
+	   -moz-user-select: none;
+	        user-select: none;
+	  -webkit-user-drag: none;
+	}
+/* Prevents IE11 from highlighting tiles in blue */
+.leaflet-tile::selection {
+	background: transparent;
+}
+/* Safari renders non-retina tile on retina better with this, but Chrome is worse */
+.leaflet-safari .leaflet-tile {
+	image-rendering: -webkit-optimize-contrast;
+	}
+/* hack that prevents hw layers "stretching" when loading new tiles */
+.leaflet-safari .leaflet-tile-container {
+	width: 1600px;
+	height: 1600px;
+	-webkit-transform-origin: 0 0;
+	}
+.leaflet-marker-icon,
+.leaflet-marker-shadow {
+	display: block;
+	}
+/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
+/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
+.leaflet-container .leaflet-overlay-pane svg {
+	max-width: none !important;
+	max-height: none !important;
+	}
+.leaflet-container .leaflet-marker-pane img,
+.leaflet-container .leaflet-shadow-pane img,
+.leaflet-container .leaflet-tile-pane img,
+.leaflet-container img.leaflet-image-layer,
+.leaflet-container .leaflet-tile {
+	max-width: none !important;
+	max-height: none !important;
+	width: auto;
+	padding: 0;
+	}
+
+.leaflet-container img.leaflet-tile {
+	/* See: https://bugs.chromium.org/p/chromium/issues/detail?id=600120 */
+	mix-blend-mode: plus-lighter;
+}
+
+.leaflet-container.leaflet-touch-zoom {
+	-ms-touch-action: pan-x pan-y;
+	touch-action: pan-x pan-y;
+	}
+.leaflet-container.leaflet-touch-drag {
+	-ms-touch-action: pinch-zoom;
+	/* Fallback for FF which doesn't support pinch-zoom */
+	touch-action: none;
+	touch-action: pinch-zoom;
+}
+.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
+	-ms-touch-action: none;
+	touch-action: none;
+}
+.leaflet-container {
+	-webkit-tap-highlight-color: transparent;
+}
+.leaflet-container a {
+	-webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
+}
+.leaflet-tile {
+	filter: inherit;
+	visibility: hidden;
+	}
+.leaflet-tile-loaded {
+	visibility: inherit;
+	}
+.leaflet-zoom-box {
+	width: 0;
+	height: 0;
+	-moz-box-sizing: border-box;
+	     box-sizing: border-box;
+	z-index: 800;
+	}
+/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
+.leaflet-overlay-pane svg {
+	-moz-user-select: none;
+	}
+
+.leaflet-pane         { z-index: 400; }
+
+.leaflet-tile-pane    { z-index: 200; }
+.leaflet-overlay-pane { z-index: 400; }
+.leaflet-shadow-pane  { z-index: 500; }
+.leaflet-marker-pane  { z-index: 600; }
+.leaflet-tooltip-pane   { z-index: 650; }
+.leaflet-popup-pane   { z-index: 700; }
+
+.leaflet-map-pane canvas { z-index: 100; }
+.leaflet-map-pane svg    { z-index: 200; }
+
+.leaflet-vml-shape {
+	width: 1px;
+	height: 1px;
+	}
+.lvml {
+	behavior: url(#default#VML);
+	display: inline-block;
+	position: absolute;
+	}
+
+
+/* control positioning */
+
+.leaflet-control {
+	position: relative;
+	z-index: 800;
+	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
+	pointer-events: auto;
+	}
+.leaflet-top,
+.leaflet-bottom {
+	position: absolute;
+	z-index: 1000;
+	pointer-events: none;
+	}
+.leaflet-top {
+	top: 0;
+	}
+.leaflet-right {
+	right: 0;
+	}
+.leaflet-bottom {
+	bottom: 0;
+	}
+.leaflet-left {
+	left: 0;
+	}
+.leaflet-control {
+	float: left;
+	clear: both;
+	}
+.leaflet-right .leaflet-control {
+	float: right;
+	}
+.leaflet-top .leaflet-control {
+	margin-top: 10px;
+	}
+.leaflet-bottom .leaflet-control {
+	margin-bottom: 10px;
+	}
+.leaflet-left .leaflet-control {
+	margin-left: 10px;
+	}
+.leaflet-right .leaflet-control {
+	margin-right: 10px;
+	}
+
+
+/* zoom and fade animations */
+
+.leaflet-fade-anim .leaflet-popup {
+	opacity: 0;
+	-webkit-transition: opacity 0.2s linear;
+	   -moz-transition: opacity 0.2s linear;
+	        transition: opacity 0.2s linear;
+	}
+.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
+	opacity: 1;
+	}
+.leaflet-zoom-animated {
+	-webkit-transform-origin: 0 0;
+	    -ms-transform-origin: 0 0;
+	        transform-origin: 0 0;
+	}
+svg.leaflet-zoom-animated {
+	will-change: transform;
+}
+
+.leaflet-zoom-anim .leaflet-zoom-animated {
+	-webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
+	   -moz-transition:    -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
+	        transition:         transform 0.25s cubic-bezier(0,0,0.25,1);
+	}
+.leaflet-zoom-anim .leaflet-tile,
+.leaflet-pan-anim .leaflet-tile {
+	-webkit-transition: none;
+	   -moz-transition: none;
+	        transition: none;
+	}
+
+.leaflet-zoom-anim .leaflet-zoom-hide {
+	visibility: hidden;
+	}
+
+
+/* cursors */
+
+.leaflet-interactive {
+	cursor: pointer;
+	}
+.leaflet-grab {
+	cursor: -webkit-grab;
+	cursor:    -moz-grab;
+	cursor:         grab;
+	}
+.leaflet-crosshair,
+.leaflet-crosshair .leaflet-interactive {
+	cursor: crosshair;
+	}
+.leaflet-popup-pane,
+.leaflet-control {
+	cursor: auto;
+	}
+.leaflet-dragging .leaflet-grab,
+.leaflet-dragging .leaflet-grab .leaflet-interactive,
+.leaflet-dragging .leaflet-marker-draggable {
+	cursor: move;
+	cursor: -webkit-grabbing;
+	cursor:    -moz-grabbing;
+	cursor:         grabbing;
+	}
+
+/* marker & overlays interactivity */
+.leaflet-marker-icon,
+.leaflet-marker-shadow,
+.leaflet-image-layer,
+.leaflet-pane > svg path,
+.leaflet-tile-container {
+	pointer-events: none;
+	}
+
+.leaflet-marker-icon.leaflet-interactive,
+.leaflet-image-layer.leaflet-interactive,
+.leaflet-pane > svg path.leaflet-interactive,
+svg.leaflet-image-layer.leaflet-interactive path {
+	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
+	pointer-events: auto;
+	}
+
+/* visual tweaks */
+
+.leaflet-container {
+	background: #ddd;
+	outline-offset: 1px;
+	}
+.leaflet-container a {
+	color: #0078A8;
+	}
+.leaflet-zoom-box {
+	border: 2px dotted #38f;
+	background: rgba(255,255,255,0.5);
+	}
+
+
+/* general typography */
+.leaflet-container {
+	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
+	font-size: 12px;
+	font-size: 0.75rem;
+	line-height: 1.5;
+	}
+
+
+/* general toolbar styles */
+
+.leaflet-bar {
+	box-shadow: 0 1px 5px rgba(0,0,0,0.65);
+	border-radius: 4px;
+	}
+.leaflet-bar a {
+	background-color: #fff;
+	border-bottom: 1px solid #ccc;
+	width: 26px;
+	height: 26px;
+	line-height: 26px;
+	display: block;
+	text-align: center;
+	text-decoration: none;
+	color: black;
+	}
+.leaflet-bar a,
+.leaflet-control-layers-toggle {
+	background-position: 50% 50%;
+	background-repeat: no-repeat;
+	display: block;
+	}
+.leaflet-bar a:hover,
+.leaflet-bar a:focus {
+	background-color: #f4f4f4;
+	}
+.leaflet-bar a:first-child {
+	border-top-left-radius: 4px;
+	border-top-right-radius: 4px;
+	}
+.leaflet-bar a:last-child {
+	border-bottom-left-radius: 4px;
+	border-bottom-right-radius: 4px;
+	border-bottom: none;
+	}
+.leaflet-bar a.leaflet-disabled {
+	cursor: default;
+	background-color: #f4f4f4;
+	color: #bbb;
+	}
+
+.leaflet-touch .leaflet-bar a {
+	width: 30px;
+	height: 30px;
+	line-height: 30px;
+	}
+.leaflet-touch .leaflet-bar a:first-child {
+	border-top-left-radius: 2px;
+	border-top-right-radius: 2px;
+	}
+.leaflet-touch .leaflet-bar a:last-child {
+	border-bottom-left-radius: 2px;
+	border-bottom-right-radius: 2px;
+	}
+
+/* zoom control */
+
+.leaflet-control-zoom-in,
+.leaflet-control-zoom-out {
+	font: bold 18px 'Lucida Console', Monaco, monospace;
+	text-indent: 1px;
+	}
+
+.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out  {
+	font-size: 22px;
+	}
+
+
+/* layers control */
+
+.leaflet-control-layers {
+	box-shadow: 0 1px 5px rgba(0,0,0,0.4);
+	background: #fff;
+	border-radius: 5px;
+	}
+.leaflet-control-layers-toggle {
+	background-image: url(images/layers.png);
+	width: 36px;
+	height: 36px;
+	}
+.leaflet-retina .leaflet-control-layers-toggle {
+	background-image: url(images/layers-2x.png);
+	background-size: 26px 26px;
+	}
+.leaflet-touch .leaflet-control-layers-toggle {
+	width: 44px;
+	height: 44px;
+	}
+.leaflet-control-layers .leaflet-control-layers-list,
+.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
+	display: none;
+	}
+.leaflet-control-layers-expanded .leaflet-control-layers-list {
+	display: block;
+	position: relative;
+	}
+.leaflet-control-layers-expanded {
+	padding: 6px 10px 6px 6px;
+	color: #333;
+	background: #fff;
+	}
+.leaflet-control-layers-scrollbar {
+	overflow-y: scroll;
+	overflow-x: hidden;
+	padding-right: 5px;
+	}
+.leaflet-control-layers-selector {
+	margin-top: 2px;
+	position: relative;
+	top: 1px;
+	}
+.leaflet-control-layers label {
+	display: block;
+	font-size: 13px;
+	font-size: 1.08333em;
+	}
+.leaflet-control-layers-separator {
+	height: 0;
+	border-top: 1px solid #ddd;
+	margin: 5px -10px 5px -6px;
+	}
+
+/* Default icon URLs */
+.leaflet-default-icon-path { /* used only in path-guessing heuristic, see L.Icon.Default */
+	background-image: url(images/marker-icon.png);
+	}
+
+
+/* attribution and scale controls */
+
+.leaflet-container .leaflet-control-attribution {
+	background: #fff;
+	background: rgba(255, 255, 255, 0.8);
+	margin: 0;
+	}
+.leaflet-control-attribution,
+.leaflet-control-scale-line {
+	padding: 0 5px;
+	color: #333;
+	line-height: 1.4;
+	}
+.leaflet-control-attribution a {
+	text-decoration: none;
+	}
+.leaflet-control-attribution a:hover,
+.leaflet-control-attribution a:focus {
+	text-decoration: underline;
+	}
+.leaflet-attribution-flag {
+	display: inline !important;
+	vertical-align: baseline !important;
+	width: 1em;
+	height: 0.6669em;
+	}
+.leaflet-left .leaflet-control-scale {
+	margin-left: 5px;
+	}
+.leaflet-bottom .leaflet-control-scale {
+	margin-bottom: 5px;
+	}
+.leaflet-control-scale-line {
+	border: 2px solid #777;
+	border-top: none;
+	line-height: 1.1;
+	padding: 2px 5px 1px;
+	white-space: nowrap;
+	-moz-box-sizing: border-box;
+	     box-sizing: border-box;
+	background: rgba(255, 255, 255, 0.8);
+	text-shadow: 1px 1px #fff;
+	}
+.leaflet-control-scale-line:not(:first-child) {
+	border-top: 2px solid #777;
+	border-bottom: none;
+	margin-top: -2px;
+	}
+.leaflet-control-scale-line:not(:first-child):not(:last-child) {
+	border-bottom: 2px solid #777;
+	}
+
+.leaflet-touch .leaflet-control-attribution,
+.leaflet-touch .leaflet-control-layers,
+.leaflet-touch .leaflet-bar {
+	box-shadow: none;
+	}
+.leaflet-touch .leaflet-control-layers,
+.leaflet-touch .leaflet-bar {
+	border: 2px solid rgba(0,0,0,0.2);
+	background-clip: padding-box;
+	}
+
+
+/* popup */
+
+.leaflet-popup {
+	position: absolute;
+	text-align: center;
+	margin-bottom: 20px;
+	}
+.leaflet-popup-content-wrapper {
+	padding: 1px;
+	text-align: left;
+	border-radius: 12px;
+	}
+.leaflet-popup-content {
+	margin: 13px 24px 13px 20px;
+	line-height: 1.3;
+	font-size: 13px;
+	font-size: 1.08333em;
+	min-height: 1px;
+	}
+.leaflet-popup-content p {
+	margin: 17px 0;
+	margin: 1.3em 0;
+	}
+.leaflet-popup-tip-container {
+	width: 40px;
+	height: 20px;
+	position: absolute;
+	left: 50%;
+	margin-top: -1px;
+	margin-left: -20px;
+	overflow: hidden;
+	pointer-events: none;
+	}
+.leaflet-popup-tip {
+	width: 17px;
+	height: 17px;
+	padding: 1px;
+
+	margin: -10px auto 0;
+	pointer-events: auto;
+
+	-webkit-transform: rotate(45deg);
+	   -moz-transform: rotate(45deg);
+	    -ms-transform: rotate(45deg);
+	        transform: rotate(45deg);
+	}
+.leaflet-popup-content-wrapper,
+.leaflet-popup-tip {
+	background: white;
+	color: #333;
+	box-shadow: 0 3px 14px rgba(0,0,0,0.4);
+	}
+.leaflet-container a.leaflet-popup-close-button {
+	position: absolute;
+	top: 0;
+	right: 0;
+	border: none;
+	text-align: center;
+	width: 24px;
+	height: 24px;
+	font: 16px/24px Tahoma, Verdana, sans-serif;
+	color: #757575;
+	text-decoration: none;
+	background: transparent;
+	}
+.leaflet-container a.leaflet-popup-close-button:hover,
+.leaflet-container a.leaflet-popup-close-button:focus {
+	color: #585858;
+	}
+.leaflet-popup-scrolled {
+	overflow: auto;
+	}
+
+.leaflet-oldie .leaflet-popup-content-wrapper {
+	-ms-zoom: 1;
+	}
+.leaflet-oldie .leaflet-popup-tip {
+	width: 24px;
+	margin: 0 auto;
+
+	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
+	filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
+	}
+
+.leaflet-oldie .leaflet-control-zoom,
+.leaflet-oldie .leaflet-control-layers,
+.leaflet-oldie .leaflet-popup-content-wrapper,
+.leaflet-oldie .leaflet-popup-tip {
+	border: 1px solid #999;
+	}
+
+
+/* div icon */
+
+.leaflet-div-icon {
+	background: #fff;
+	border: 1px solid #666;
+	}
+
+
+/* Tooltip */
+/* Base styles for the element that has a tooltip */
+.leaflet-tooltip {
+	position: absolute;
+	padding: 6px;
+	background-color: #fff;
+	border: 1px solid #fff;
+	border-radius: 3px;
+	color: #222;
+	white-space: nowrap;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+	pointer-events: none;
+	box-shadow: 0 1px 3px rgba(0,0,0,0.4);
+	}
+.leaflet-tooltip.leaflet-interactive {
+	cursor: pointer;
+	pointer-events: auto;
+	}
+.leaflet-tooltip-top:before,
+.leaflet-tooltip-bottom:before,
+.leaflet-tooltip-left:before,
+.leaflet-tooltip-right:before {
+	position: absolute;
+	pointer-events: none;
+	border: 6px solid transparent;
+	background: transparent;
+	content: "";
+	}
+
+/* Directions */
+
+.leaflet-tooltip-bottom {
+	margin-top: 6px;
+}
+.leaflet-tooltip-top {
+	margin-top: -6px;
+}
+.leaflet-tooltip-bottom:before,
+.leaflet-tooltip-top:before {
+	left: 50%;
+	margin-left: -6px;
+	}
+.leaflet-tooltip-top:before {
+	bottom: 0;
+	margin-bottom: -12px;
+	border-top-color: #fff;
+	}
+.leaflet-tooltip-bottom:before {
+	top: 0;
+	margin-top: -12px;
+	margin-left: -6px;
+	border-bottom-color: #fff;
+	}
+.leaflet-tooltip-left {
+	margin-left: -6px;
+}
+.leaflet-tooltip-right {
+	margin-left: 6px;
+}
+.leaflet-tooltip-left:before,
+.leaflet-tooltip-right:before {
+	top: 50%;
+	margin-top: -6px;
+	}
+.leaflet-tooltip-left:before {
+	right: 0;
+	margin-right: -12px;
+	border-left-color: #fff;
+	}
+.leaflet-tooltip-right:before {
+	left: 0;
+	margin-left: -12px;
+	border-right-color: #fff;
+	}
+
+/* Printing */
+
+@media print {
+	/* Prevent printers from removing background-images of controls. */
+	.leaflet-control {
+		-webkit-print-color-adjust: exact;
+		print-color-adjust: exact;
+		}
+	}

web/templates/public/contact.gohtml

@@ -0,0 +1,62 @@
+<!--
+ SPDX-FileCopyrightText: 2023 jordi fita mas <jordi@tandem.blog>
+ SPDX-License-Identifier: AGPL-3.0-only
+-->
+{{ define "title" -}}
+    {{( pgettext "Contact" "title" )}}
+{{- end }}
+
+{{ define "head" -}}
+    <link rel="stylesheet" href="/static/leaflet@1.9.4/leaflet.css">
+{{- end }}
+
+{{ define "content" -}}
+    {{- /*gotype: dev.tandem.ws/tandem/camper/pkg/app.contactPage*/ -}}
+    <h2>{{( pgettext "Contact" "title" )}}</h2>
+
+    {{ with .PublicPage.CompanyAddress }}
+        <address>
+            {{ .Address }}<br>
+            {{ .PostalCode}} · {{ .City }} · {{ .Province }}<br>
+            <abbr>T</abbr> <a href="{{ .PhoneURL }}">{{ .Phone }}</a><br>
+            <a href="mailto:{{ .Email }}">{{ .Email }}</a>
+        </address>
+    {{- end }}
+    <div id="map"></div>
+
+    {{ if .CompanyGeography -}}
+        <script src="/static/leaflet@1.9.4/leaflet.js"></script>
+        <script>
+            document.addEventListener('DOMContentLoaded', function () {
+                var container = document.getElementById("map");
+                container.style.height = '410px';
+                var map = L.map(container).setView(['{{ .CompanyGeography.Lat }}', '{{ .CompanyGeography.Lng }}'], '9');
+
+                L
+                    .tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png', {
+                        attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, © <a href="https://carto.com/attributions">CARTO</a>'
+                    })
+                    .addTo(map)
+                ;
+
+                map.scrollWheelZoom.disable();
+
+                var content =
+                        {{- with .PublicPage.CompanyAddress -}}
+                        '{{ .Address }}<br>{{ .City }} - {{ .PostalCode }}<br>{{ .Province }}'
+                        {{- end -}}
+                ;
+                L
+                    .marker(['{{ .CompanyGeography.Lat }}', '{{ .CompanyGeography.Lng }}'])
+                    .addTo(map)
+                    .bindPopup(content)
+                ;
+
+                var observer = ResizeObserver && new ResizeObserver(function () {
+                    map.invalidateSize(true);
+                });
+                observer && observer.observe(container);
+            });
+        </script>
+    {{- end }}
+{{- end }}

web/templates/public/layout.gohtml

@@ -41,6 +41,7 @@
             {{- end }}
             <li><a href="/{{ currentLocale }}/services">{{( pgettext "Services" "title" )}}</a></li>
             <li><a href="/{{ currentLocale }}/surroundings">{{( pgettext "Surroundings" "title" )}}</a></li>
+            <li><a href="/{{ currentLocale }}/contact">{{( pgettext "Contact" "title" )}}</a></li>
             {{ if .LocalizedAlternates -}}
                 <li class="has-submenu">{{ range .LocalizedAlternates -}}
                         {{ if eq .Lang currentLocale }}{{ template "alternateAnchor" . }}{{ end }}