From bccfcf6c0d2ecf9c29818663bcea8e93d3ff1f15 Mon Sep 17 00:00:00 2001
From: Sarah Hoffmann <lonvia@denofr.de>
Date: Thu, 28 Aug 2025 01:36:48 +0200
Subject: [PATCH] Convert some link functions to Svelte components (#296)

* convert wikipedia link to component

* convert osm link to component
---
 src/components/DetailsOneRow.svelte |  6 +++---
 src/components/OsmLink.svelte       | 14 ++++++++++++++
 src/components/WikipediaLink.svelte | 13 +++++++++++++
 src/lib/helpers.js                  | 21 ---------------------
 src/pages/DeletablePage.svelte      |  5 ++---
 src/pages/DetailsPage.svelte        | 12 +++++++-----
 src/pages/PolygonsPage.svelte       |  6 +++---
 test/unit/helpers.js                | 20 +-------------------
 8 files changed, 43 insertions(+), 54 deletions(-)
 create mode 100644 src/components/OsmLink.svelte
 create mode 100644 src/components/WikipediaLink.svelte

diff --git a/src/components/DetailsOneRow.svelte b/src/components/DetailsOneRow.svelte
index ce7f145..b7e8e3b 100644
--- a/src/components/DetailsOneRow.svelte
+++ b/src/components/DetailsOneRow.svelte
@@ -1,8 +1,9 @@
 <script>
   import DetailsLink from '../components/DetailsLink.svelte';
   import PageLink from '../components/PageLink.svelte';
+  import OsmLink from '../components/OsmLink.svelte';
   import {
-    formatPlaceType, osmLink, formatAdminLevel, formatDistance
+    formatPlaceType, formatAdminLevel, formatDistance
   } from '../lib/helpers.js';
 
   let {
@@ -25,8 +26,7 @@
     {/if}
   </td>
   <td>{formatPlaceType(addressLine)}</td>
-  <!-- eslint-disable-next-line svelte/no-at-html-tags -->
-  <td>{@html osmLink(addressLine)}</td>
+  <td><OsmLink osmType={addressLine.osm_type} osmId={addressLine.osm_id} /></td>
   <td>{addressLine.rank_address}</td>
   <td>{formatAdminLevel(addressLine.admin_level)}</td>
   <!-- eslint-disable-next-line svelte/no-at-html-tags -->
diff --git a/src/components/OsmLink.svelte b/src/components/OsmLink.svelte
new file mode 100644
index 0000000..1a7c9ae
--- /dev/null
+++ b/src/components/OsmLink.svelte
@@ -0,0 +1,14 @@
+<script>
+import { formatOSMType } from '../lib/helpers.js';
+
+let { osmType, osmId } = $props();
+
+const osmTypeString = $derived(formatOSMType(osmType, false));
+
+const href = $derived(`https://www.openstreetmap.org/${osmTypeString}/${osmId}`);
+
+</script>
+
+{#if osmTypeString}
+<a {href}>{osmTypeString} {osmId}</a>
+{/if}
diff --git a/src/components/WikipediaLink.svelte b/src/components/WikipediaLink.svelte
new file mode 100644
index 0000000..3601499
--- /dev/null
+++ b/src/components/WikipediaLink.svelte
@@ -0,0 +1,13 @@
+<script>
+  import escapeHtml from 'escape-html';
+
+  let { wikipedia } = $props();
+
+  const linkParts = $derived(wikipedia ? wikipedia.split(':', 2) : null);
+  const href= $derived(
+    `https://${escapeHtml(linkParts[0])}.wikipedia.org/wiki/${escapeHtml(linkParts[1])}`);
+</script>
+
+{#if wikipedia}
+<a {href} target="_blank">{wikipedia}</a>
+{/if}
diff --git a/src/lib/helpers.js b/src/lib/helpers.js
index 0099d83..35a025b 100644
--- a/src/lib/helpers.js
+++ b/src/lib/helpers.js
@@ -22,14 +22,6 @@ export function identifyLinkInQuery(query) {
   return [m[1][0].toUpperCase(), Number(m[2])];
 }
 
-export function osmLink(aPlace) {
-  if (!aPlace.osm_type) return '';
-  var sOSMType = formatOSMType(aPlace.osm_type, false);
-  if (!sOSMType) return '';
-
-  return '<a href="https://www.openstreetmap.org/' + sOSMType + '/' + aPlace.osm_id + '">' + sOSMType + ' ' + aPlace.osm_id + '</a>';
-}
-
 export function formatLabel(aPlace) {
   if (aPlace.label) return aPlace.label;
 
@@ -46,19 +38,6 @@ export function formatLabel(aPlace) {
   return '';
 }
 
-/* en:London_Borough_of_Redbridge => https://en.wikipedia.org/wiki/London_Borough_of_Redbridge */
-export function wikipediaLink(aPlace) {
-  if (!aPlace.calculated_wikipedia) return '';
-
-  var parts = aPlace.calculated_wikipedia.split(':', 2);
-
-  var sTitle = escapeHtml(aPlace.calculated_wikipedia);
-  var sLanguage = escapeHtml(parts[0]);
-  var sArticle = escapeHtml(parts[1]);
-
-  return '<a href="https://' + sLanguage + '.wikipedia.org/wiki/' + sArticle + '" target="_blank">' + sTitle + '</a>';
-}
-
 export function coverageType(aPlace) {
   return (aPlace.isarea ? 'Polygon' : 'Point');
 }
diff --git a/src/pages/DeletablePage.svelte b/src/pages/DeletablePage.svelte
index 7184433..3f1ec45 100644
--- a/src/pages/DeletablePage.svelte
+++ b/src/pages/DeletablePage.svelte
@@ -1,11 +1,11 @@
 <script>
   import { onMount } from 'svelte';
   import { update_html_title } from '../lib/api_utils.js';
-  import { osmLink } from '../lib/helpers.js';
   import { appState } from '../state/AppState.svelte.js';
 
   import Header from '../components/Header.svelte';
   import DetailsLink from '../components/DetailsLink.svelte';
+  import OsmLink from '../components/OsmLink.svelte';
 
   let aPolygons = $state([]);
 
@@ -46,8 +46,7 @@
             <td><DetailsLink feature={polygon} text={polygon.place_id} /></td>
             <td>{polygon.country_code}</td>
             <td>{polygon.name}</td>
-            <!-- eslint-disable-next-line svelte/no-at-html-tags -->
-            <td>{@html osmLink(polygon)}</td>
+            <td><OsmLink osmType={polygon.osm_type} osmId={polygon.osm_id} /></td>
             <td>{polygon.class}</td>
             <td>{polygon.type}</td>
           </tr>
diff --git a/src/pages/DetailsPage.svelte b/src/pages/DetailsPage.svelte
index 2e51d3f..4303ce3 100644
--- a/src/pages/DetailsPage.svelte
+++ b/src/pages/DetailsPage.svelte
@@ -4,7 +4,7 @@
   import { appState } from '../state/AppState.svelte.js';
 
   import {
-    osmLink, wikipediaLink, coverageType, isAdminBoundary,
+    coverageType, isAdminBoundary,
     formatAddressRank, formatKeywordToken, formatOSMType
   } from '../lib/helpers.js';
   import Header from '../components/Header.svelte';
@@ -14,6 +14,8 @@
   import DetailsLink from '../components/DetailsLink.svelte';
   import DetailsPostcodeHint from '../components/DetailsPostcodeHint.svelte';
   import InfoRowList from '../components/DetailsInfoRowList.svelte';
+  import WikipediaLink from '../components/WikipediaLink.svelte';
+  import OsmLink from '../components/OsmLink.svelte';
   import Map from '../components/Map.svelte';
 
   let aPlace = $state();
@@ -130,8 +132,9 @@
             <tr class="info-row"><td>Centre Point (lat,lon)</td><td>
                 {aPlace.centroid.coordinates[1]},{aPlace.centroid.coordinates[0]}
             </td></tr>
-            <!-- eslint-disable-next-line svelte/no-at-html-tags -->
-            <tr class="info-row"><td>OSM</td><td>{@html osmLink(aPlace)}</td></tr>
+            <tr class="info-row"><td>OSM</td><td>
+              <OsmLink osmType={aPlace.osm_type} osmId={aPlace.osm_id}/>
+            </td></tr>
             <tr class="info-row"><td>Place Id</td><td>
                {aPlace.place_id}
                (<a href="https://nominatim.org/release-docs/develop/api/Output/#place_id-is-not-a-persistent-id">
@@ -140,8 +143,7 @@
             </td></tr>
             {#if aPlace.calculated_wikipedia}
               <tr class="info-row"><td>Wikipedia Calculated</td><td>
-              <!-- eslint-disable-next-line svelte/no-at-html-tags -->
-                {@html wikipediaLink(aPlace)}
+              <WikipediaLink wikipedia={aPlace.calculated_wikipedia} />
               </td></tr>
             {/if}
             <tr class="info-row"><td>Computed Postcode</td><td>
diff --git a/src/pages/PolygonsPage.svelte b/src/pages/PolygonsPage.svelte
index 5c6115f..0d66bec 100644
--- a/src/pages/PolygonsPage.svelte
+++ b/src/pages/PolygonsPage.svelte
@@ -1,10 +1,11 @@
 <script>
   import { onMount } from 'svelte';
   import { update_html_title } from '../lib/api_utils.js';
-  import { formatOSMType, osmLink } from '../lib/helpers.js';
+  import { formatOSMType } from '../lib/helpers.js';
   import { appState } from '../state/AppState.svelte.js';
 
   import Header from '../components/Header.svelte';
+  import OsmLink from '../components/OsmLink.svelte';
 
   let aPolygons = $state([]);
 
@@ -43,8 +44,7 @@
         <tbody>
           {#each aPolygons as polygon}
             <tr>
-              <!-- eslint-disable-next-line svelte/no-at-html-tags -->
-              <td>{@html osmLink(polygon)}</td>
+              <td><OsmLink osmType=(polygon.osm_type} osmId={polygon.osm_id} /></td>
               <td>{polygon.class}</td>
               <td>{polygon.type}</td>
               <td>{polygon.name}</td>
diff --git a/test/unit/helpers.js b/test/unit/helpers.js
index 103f221..165fd7e 100644
--- a/test/unit/helpers.js
+++ b/test/unit/helpers.js
@@ -1,5 +1,5 @@
 import assert from 'assert';
-import { identifyLinkInQuery, formatLabel, wikipediaLink } from '../../src/lib/helpers.js';
+import { identifyLinkInQuery, formatLabel } from '../../src/lib/helpers.js';
 
 describe('Helpers', function () {
 
@@ -26,22 +26,4 @@ describe('Helpers', function () {
     // type=yes, so we use the category
     assert.equal(formatLabel({ category: 'building', type: 'yes' }), 'Building');
   });
-
-  it('.wikipediaLink', function () {
-    assert.equal(
-      wikipediaLink({}),
-      ''
-    );
-
-    assert.equal(
-      wikipediaLink({ calculated_wikipedia: 'de:Brandenburg Gate' }),
-      '<a href="https://de.wikipedia.org/wiki/Brandenburg Gate" target="_blank">de:Brandenburg Gate</a>'
-    );
-
-    // title includes HTML
-    assert.equal(
-      wikipediaLink({ calculated_wikipedia: 'en:Slug & Lattuce' }),
-      '<a href="https://en.wikipedia.org/wiki/Slug &amp; Lattuce" target="_blank">en:Slug &amp; Lattuce</a>'
-    );
-  });
 });
-- 
2.39.5