github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-22 15:16:08 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

FIX: mobile share canonical URL (#22370)

Browse Source 
* FIX: mobile share canonical url

* FIX: test

* DEV: address PR comments
This commit is contained in:
Renato Atilio 2023-07-04 15:02:52 -03:00 committed by GitHub
parent 8f21d2cf40
commit ce0ddfba8c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 43 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
app/assets/javascripts/discourse/app/instance-initializers/meta-tag-updater.js Normal file
View File

@ -0,0 +1,27 @@
import { getAbsoluteURL } from "discourse-common/lib/get-url";
export default {
initialize(owner) {
// workaround for Safari on iOS 14.3
// seems it has started using opengraph tags when sharing
const ogTitle = document.querySelector("meta[property='og:title']");
const ogUrl = document.querySelector("meta[property='og:url']");
const twitterTitle = document.querySelector("meta[name='twitter:title']");
const twitterUrl = document.querySelector("meta[name='twitter:url']");
// workaround for mobile Chrome, which uses the canonical url when sharing
const canonicalUrl = document.querySelector("link[rel='canonical']");
const appEvents = owner.lookup("service:app-events");
appEvents.on("page:changed", ({ title, url }) => {
const absoluteUrl = getAbsoluteURL(url);
ogTitle?.setAttribute("content", title);
ogUrl?.setAttribute("content", absoluteUrl);
twitterTitle?.setAttribute("content", title);
twitterUrl?.setAttribute("content", absoluteUrl);
canonicalUrl?.setAttribute("href", absoluteUrl);
});
},
};

26
app/assets/javascripts/discourse/app/instance-initializers/opengraph-tag-updater.js
View File

@ -1,26 +0,0 @@
import { getAbsoluteURL } from "discourse-common/lib/get-url";
export default {
initialize(owner) {
// workaround for Safari on iOS 14.3
// seems it has started using opengraph tags when sharing
const ogTitle = document.querySelector("meta[property='og:title']");
const ogUrl = document.querySelector("meta[property='og:url']");
const twitterTitle = document.querySelector(
"meta[property='twitter:title']"
);
const twitterUrl = document.querySelector("meta[property='twitter:url']");
if (!ogTitle || !ogUrl || !twitterTitle || !twitterUrl) {
return;
}
const appEvents = owner.lookup("service:app-events");
appEvents.on("page:changed", ({ title, url }) => {
ogTitle.setAttribute("content", title);
ogUrl.setAttribute("content", getAbsoluteURL(url));
twitterTitle.setAttribute("content", title);
twitterUrl.setAttribute("content", getAbsoluteURL(url));
});
},
};

17
app/assets/javascripts/discourse/tests/acceptance/opengraph-tag-updater-test.js → app/assets/javascripts/discourse/tests/acceptance/meta-tag-updater-test.js
View File

@ -2,7 +2,7 @@ import { click, visit } from "@ember/test-helpers";
import { acceptance } from "discourse/tests/helpers/qunit-helpers";
import { test } from "qunit";
acceptance("Opengraph Tag Updater", function (needs) {
acceptance("Meta Tag Updater", function (needs) {
needs.pretender((server, helper) => {
server.get("/about", () => {
return helper.response({});
@ -33,17 +33,24 @@ acceptance("Opengraph Tag Updater", function (needs) {
);
assert.strictEqual(
document
.querySelector("meta[property='twitter:title']")
.querySelector("meta[name='twitter:title']")
.getAttribute("content"),
document.title,
"it should update OG title"
"it should update Twitter title"
);
assert.ok(
document
.querySelector("meta[property='twitter:url']")
.querySelector("meta[name='twitter:url']")
.getAttribute("content")
.endsWith("/about"),
"it should update OG URL"
"it should update Twitter URL"
);
assert.ok(
document
.querySelector("link[rel='canonical']")
.getAttribute("href")
.endsWith("/about"),
"it should update the canonical URL"
);
});
});

6
app/assets/javascripts/discourse/tests/index.html
View File

@ -7,8 +7,10 @@
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta property="og:title" content="Discourse Tests" />
<meta property="og:url" content="{{rootURL}}" />
<meta property="twitter:title" content="Discourse Tests" />
<meta property="twitter:url" content="{{rootURL}}" />
<meta name="twitter:title" content="Discourse Tests" />
<meta name="twitter:url" content="{{rootURL}}" />
<link rel="canonical" href="{{rootURL}}" />
<meta name="color-scheme" content="light dark">