<p></p>
<p><b>@1ec5</b> commented on this pull request.</p>
<hr>
<p>In <a href="https://github.com/openstreetmap/openstreetmap-website/pull/6127#discussion_r2183468613">app/assets/javascripts/index/element.js</a>:</p>
<pre style='color:#555'>> + $("<a>")
+ .attr("href", OSM.WIKIMEDIA_COMMONS_URL + "File:" + data.icon)
+ .append($("<img>").attr({ src: OSM.WIKIMEDIA_COMMONS_URL + "Special:FilePath/" + data.icon, height: "32" }))
+ .addClass("float-end mb-1 ms-2")
+ .appendTo(cell);
+ }
+ if (data.label) {
+ $btn
+ .siblings(`a[href*="wikidata.org/entity/${data.qid}"]`)
+ .clone()
+ .text(data.label)
+ .addClass("me-1")
+ .appendTo(cell);
+ }
+ if (data.article) {
+ $(`<${data.label ? "sup" : "div"}>`)
</pre>
<p dir="auto">The <sup>superscript</sup> suffix style probably comes from Wikidata’s former practice of glossing any fallback label with its fallback language, for example, “openstreetmap-website <sup>English</sup>” when you view <a href="https://www.wikidata.org/wiki/Q115259353" rel="nofollow">Q115259353</a> in a language other than English. Otherwise, a user might not easily intuit that a suffix like “enwiki” means the title came from the English Wikipedia.</p>
<hr>
<p>In <a href="https://github.com/openstreetmap/openstreetmap-website/pull/6127#discussion_r2183472132">app/assets/javascripts/index/element.js</a>:</p>
<pre style='color:#555'>> + .append($("<img>").attr({ src: OSM.WIKIMEDIA_COMMONS_URL + "Special:FilePath/" + data.icon, height: "32" }))
+ .addClass("float-end mb-1 ms-2")
+ .appendTo(cell);
+ }
+ if (data.label) {
+ $btn
+ .siblings(`a[href*="wikidata.org/entity/${data.qid}"]`)
+ .clone()
+ .text(data.label)
+ .addClass("me-1")
+ .appendTo(cell);
+ }
+ if (data.article) {
+ $(`<${data.label ? "sup" : "div"}>`)
+ .append($("<a>")
+ .attr("href", `https://${data.article.site.slice(0, -4)}.wikipedia.org/wiki/` + encodeURIComponent(data.article.title))
</pre>
<p dir="auto">The Wikidata API can return the item’s label in the relevant language. I think the label would be more relevant to OSM than the Wikipedia article, which often contains disambiguators and substitute characters for technical reasons. The label is designed to pair well with the description, which we’re using below. (Ideally, we’d fall back to the <code class="notranslate">mul</code> code to improve language coverage: <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="3089142616" data-permission-text="Title is private" data-url="https://github.com/ZeLonewolf/osm-wikidata-greasemonkey/issues/9" data-hovercard-type="issue" data-hovercard-url="/ZeLonewolf/osm-wikidata-greasemonkey/issues/9/hovercard" href="https://github.com/ZeLonewolf/osm-wikidata-greasemonkey/issues/9">ZeLonewolf/osm-wikidata-greasemonkey#9</a>.)</p>
<p dir="auto">If the idea is that the Wikidata item is already linked above, maybe we could link the label to the Wikidata item redundantly, then have a separate Wikipedia link right after it, reusing app/assets/images/social_link_icons/wikipedia.svg.</p>
<hr>
<p>In <a href="https://github.com/openstreetmap/openstreetmap-website/pull/6127#discussion_r2183474176">app/assets/javascripts/index/element.js</a>:</p>
<pre style='color:#555'>> + items
+ .filter(qid => entities[qid])
+ .map(qid => getLocalizedResponse(entities[qid]))
+ .filter(data => data.label || data.icon || data.description || data.article)
+ .map(data => renderWikidataResponse(data, $btn))
+ );
+ })
+ .catch(() => $btn.removeClass("disabled").addClass("wdt-preview"));
+ }
+
+ function getLocalizedResponse(entity) {
+ const localizedProperty = (property, langs) => langs.reduce((out, lang) => out ?? entity[property][lang], null);
+ const data = {
+ qid: entity.id,
+ label: localizedProperty("labels", langs)?.value,
+ icon: ["P8972", "P154", "P14"].reduce((out, prop) => out ?? entity.claims[prop]?.[0]?.mainsnak?.datavalue?.value, null),
</pre>
<p dir="auto">For reference:</p>
<ul dir="auto">
<li><a href="https://www.wikidata.org/wiki/Property:P8972" rel="nofollow">small logo or icon (P8972)</a></li>
<li><a href="https://www.wikidata.org/wiki/Property:P154" rel="nofollow">logo image (P154)</a></li>
<li><a href="https://www.wikidata.org/wiki/Property:P14" rel="nofollow">traffic sign (P14)</a></li>
</ul>
<p dir="auto">P14 surprised me at first, but then I remembered that this would probably result in displaying a route marker alongside a <code class="notranslate">wikidata=*</code> tag when viewing a route relation. That does make some sense to me.</p>
<hr>
<p>In <a href="https://github.com/openstreetmap/openstreetmap-website/pull/6127#discussion_r2183487321">app/assets/javascripts/index/element.js</a>:</p>
<pre style='color:#555'>> + items
+ .filter(qid => entities[qid])
+ .map(qid => getLocalizedResponse(entities[qid]))
+ .filter(data => data.label || data.icon || data.description || data.article)
+ .map(data => renderWikidataResponse(data, $btn))
+ );
+ })
+ .catch(() => $btn.removeClass("disabled").addClass("wdt-preview"));
+ }
+
+ function getLocalizedResponse(entity) {
+ const localizedProperty = (property, langs) => langs.reduce((out, lang) => out ?? entity[property][lang], null);
+ const data = {
+ qid: entity.id,
+ label: localizedProperty("labels", langs)?.value,
+ icon: ["P8972", "P154", "P14"].reduce((out, prop) => out ?? entity.claims[prop]?.[0]?.mainsnak?.datavalue?.value, null),
</pre>
<p dir="auto">In case the item has multiple statements associated with one of these properties, the <code class="notranslate">claims[prop]</code> array will contain multiple items, but the first one isn’t guaranteed to be the best. For example, <a href="https://www.wikidata.org/wiki/Q157645#P154" rel="nofollow">Deutsche Post (Q157645)</a> has four different P154 statements. The last is the most current, so the <code class="notranslate">mainsnak</code> has a <code class="notranslate">rank</code> of <code class="notranslate">preferred</code> rather than <code class="notranslate">normal</code>.</p>
<hr>
<p>In <a href="https://github.com/openstreetmap/openstreetmap-website/pull/6127#discussion_r2183511570">app/assets/javascripts/index/element.js</a>:</p>
<pre style='color:#555'>> + label: localizedProperty("labels", langs)?.value,
+ icon: ["P8972", "P154", "P14"].reduce((out, prop) => out ?? entity.claims[prop]?.[0]?.mainsnak?.datavalue?.value, null),
+ description: localizedProperty("descriptions", langs)?.value,
+ article: localizedProperty("sitelinks", wikis)
+ };
+ return data;
+ }
+
+ function renderWikidataResponse(data, $btn) {
+ const cell = $("<td>")
+ .attr("colspan", 2)
+ .addClass("bg-body-tertiary");
+
+ if (data.icon && OSM.WIKIMEDIA_COMMONS_URL) {
+ $("<a>")
+ .attr("href", OSM.WIKIMEDIA_COMMONS_URL + "File:" + data.icon)
</pre>
<p dir="auto">Do we need to escape the <code class="notranslate">icon</code> in any way?</p>
<hr>
<p>In <a href="https://github.com/openstreetmap/openstreetmap-website/pull/6127#discussion_r2183514508">app/assets/javascripts/index/element.js</a>:</p>
<pre style='color:#555'>> + icon: ["P8972", "P154", "P14"].reduce((out, prop) => out ?? entity.claims[prop]?.[0]?.mainsnak?.datavalue?.value, null),
+ description: localizedProperty("descriptions", langs)?.value,
+ article: localizedProperty("sitelinks", wikis)
+ };
+ return data;
+ }
+
+ function renderWikidataResponse(data, $btn) {
+ const cell = $("<td>")
+ .attr("colspan", 2)
+ .addClass("bg-body-tertiary");
+
+ if (data.icon && OSM.WIKIMEDIA_COMMONS_URL) {
+ $("<a>")
+ .attr("href", OSM.WIKIMEDIA_COMMONS_URL + "File:" + data.icon)
+ .append($("<img>").attr({ src: OSM.WIKIMEDIA_COMMONS_URL + "Special:FilePath/" + data.icon, height: "32" }))
</pre>
<p dir="auto">Special:FilePath is now an alias for Special:Redirect:</p>
⬇️ Suggested change
<pre style="color: #555">- .append($("<img>").attr({ src: OSM.WIKIMEDIA_COMMONS_URL + "Special:FilePath/" + data.icon, height: "32" }))
+ .append($("<img>").attr({ src: OSM.WIKIMEDIA_COMMONS_URL + "Special:Redirect/file/" + data.icon, height: "32" }))
</pre>
<hr>
<p>In <a href="https://github.com/openstreetmap/openstreetmap-website/pull/6127#discussion_r2183521985">app/assets/javascripts/index/element.js</a>:</p>
<pre style='color:#555'>> + icon: ["P8972", "P154", "P14"].reduce((out, prop) => out ?? entity.claims[prop]?.[0]?.mainsnak?.datavalue?.value, null),
+ description: localizedProperty("descriptions", langs)?.value,
+ article: localizedProperty("sitelinks", wikis)
+ };
+ return data;
+ }
+
+ function renderWikidataResponse(data, $btn) {
+ const cell = $("<td>")
+ .attr("colspan", 2)
+ .addClass("bg-body-tertiary");
+
+ if (data.icon && OSM.WIKIMEDIA_COMMONS_URL) {
+ $("<a>")
+ .attr("href", OSM.WIKIMEDIA_COMMONS_URL + "File:" + data.icon)
+ .append($("<img>").attr({ src: OSM.WIKIMEDIA_COMMONS_URL + "Special:FilePath/" + data.icon, height: "32" }))
</pre>
<blockquote>
<p dir="auto">I'm not sure if it's allowed according to <a href="https://commons.wikimedia.org/w/index.php?title=Commons:HOTLINK" rel="nofollow">their policy</a>, but we're already doing it in iD.</p>
</blockquote>
<p dir="auto">As far as I know, Wikimedia would prefer that we use the Wikimedia Commons API to get the image thumbnail. For example, <a href="https://commons.wikimedia.org/wiki/Special:ApiSandbox#action=query&format=json&prop=imageinfo&titles=File%3ADHL%20Group%2006.2023.svg&formatversion=2&iiprop=url%7Csize&iiurlwidth=32" rel="nofollow">this API call</a> gets a thumbnail of <a href="https://commons.wikimedia.org/wiki/File:DHL_Group_06.2023.svg" rel="nofollow">this image</a> scaled to 32 pixels wide, along with responsive images at 1.5× and 2×. The API allows batching up to 50 images at a time.</p>
<p style="font-size:small;-webkit-text-size-adjust:none;color:#666;">—<br />Reply to this email directly, <a href="https://github.com/openstreetmap/openstreetmap-website/pull/6127#pullrequestreview-2984219344">view it on GitHub</a>, or <a href="https://github.com/notifications/unsubscribe-auth/AAK2OLIGQPOOOZHNXRIXMZ33GV3N7AVCNFSM6AAAAAB75WISWSVHI2DSMVQWIX3LMV43YUDVNRWFEZLROVSXG5CSMV3GSZLXHMZDSOBUGIYTSMZUGQ">unsubscribe</a>.<br />You are receiving this because you are subscribed to this thread.<img src="https://github.com/notifications/beacon/AAK2OLIY2MNMRXB5Y5C4OUL3GV3N7A5CNFSM6AAAAAB75WISWSWGG33NNVSW45C7OR4XAZNRKB2WY3CSMVYXKZLTORJGK5TJMV32UY3PNVWWK3TUL5UWJTVR36JNA.gif" height="1" width="1" alt="" /><span style="color: transparent; font-size: 0; display: none; visibility: hidden; overflow: hidden; opacity: 0; width: 0; height: 0; max-width: 0; max-height: 0; mso-hide: all">Message ID: <span><openstreetmap/openstreetmap-website/pull/6127/review/2984219344</span><span>@</span><span>github</span><span>.</span><span>com></span></span></p>
<script type="application/ld+json">[
{
"@context": "http://schema.org",
"@type": "EmailMessage",
"potentialAction": {
"@type": "ViewAction",
"target": "https://github.com/openstreetmap/openstreetmap-website/pull/6127#pullrequestreview-2984219344",
"url": "https://github.com/openstreetmap/openstreetmap-website/pull/6127#pullrequestreview-2984219344",
"name": "View Pull Request"
},
"description": "View this Pull Request on GitHub",
"publisher": {
"@type": "Organization",
"name": "GitHub",
"url": "https://github.com"
}
}
]</script>