Updated metadata shown on hover in internal link lists (#20204)

closes https://linear.app/tryghost/issue/MOM-80

- updated internal linking search results items
  - removed visibility text from meta data
  - added additional icon for paid/specific tier visibility
  - added titles to icons
- bumped `@tryghost/koenig-lexical` to include support for meta icon titles
- bumped other Koenig packages due to sub-dependency updates
This commit is contained in:
Kevin Ansfield 2024-05-14 17:07:04 +01:00 committed by GitHub
parent 0beba6b605
commit d2da9d3c17
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 102 additions and 83 deletions

View File

@ -39,7 +39,7 @@
"dependencies": {
"@codemirror/lang-html": "^6.4.5",
"@tryghost/color-utils": "0.2.2",
"@tryghost/kg-unsplash-selector": "^0.1.11",
"@tryghost/kg-unsplash-selector": "^0.1.15",
"@tryghost/limit-service": "^1.2.10",
"@tryghost/nql": "0.12.3",
"@tryghost/timezone-data": "0.4.3",

View File

@ -51,29 +51,35 @@ function LockIcon({...props}) {
);
}
function DollarIcon({...props}) {
return (
<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24" {...props}>
<g fill="currentColor" class="nc-icon-wrapper">
<path
d="M13,10.265V5.013a9.722,9.722,0,0,1,2.6.722l1.342.662,1.327-2.69-1.345-.663A12.4,12.4,0,0,0,13,1.989V0H11V1.983c-3.537.306-5.773,2.3-5.773,5.264,0,3.726,3.174,4.85,5.773,5.577V18.09a15.77,15.77,0,0,1-4.24-.819l-1.411-.509L4.33,19.583l1.411.51A18.577,18.577,0,0,0,11,21.1V24h2V21.087c5.125-.431,5.708-3.776,5.708-5.264C18.708,12.129,15.587,10.993,13,10.265ZM8.227,7.247c0-1.6,1.6-2.1,2.773-2.249V9.69C9.1,9.092,8.227,8.523,8.227,7.247ZM13,18.072V13.4c1.857.591,2.708,1.161,2.708,2.422C15.708,16.382,15.7,17.769,13,18.072Z"
fill="currentColor"
></path>
</g>
</svg>
);
}
export function decoratePostSearchResult(item, settings) {
const date = moment.utc(item.publishedAt).tz(settings.timezone).format('D MMM YYYY');
item.metaText = date;
if (settings.membersEnabled && item.visibility) {
let accessText;
if (item.visibility === 'public') {
accessText = 'Public';
} else if (item.visibility === 'members') {
accessText = 'Members';
} else if (item.visibility === 'paid') {
accessText = 'Paid members';
} else if (item.visibility === 'tiers'){
accessText = 'Specific tiers';
}
if (accessText && accessText !== 'Public') {
if (item.visibility === 'members') {
item.MetaIcon = LockIcon;
item.metaIconTitle = 'Members only';
} else if (item.visibility === 'paid') {
item.MetaIcon = DollarIcon;
item.metaIconTitle = 'Paid-members only';
} else if (item.visibility === 'tiers') {
item.MetaIcon = DollarIcon;
item.metaIconTitle = 'Specific tiers only';
}
item.metaText = [accessText, date].filter(Boolean).join(' • ');
} else {
item.metaText = [date].join(' • ');
}
}

View File

@ -44,9 +44,9 @@
"@tryghost/color-utils": "0.2.2",
"@tryghost/ember-promise-modals": "2.0.1",
"@tryghost/helpers": "1.1.90",
"@tryghost/kg-clean-basic-html": "4.0.4",
"@tryghost/kg-clean-basic-html": "4.0.6",
"@tryghost/kg-converters": "1.0.1",
"@tryghost/koenig-lexical": "1.1.11",
"@tryghost/koenig-lexical": "1.1.13",
"@tryghost/limit-service": "1.2.14",
"@tryghost/members-csv": "0.0.0",
"@tryghost/nql": "0.12.3",
@ -203,4 +203,4 @@
}
}
}
}
}

View File

@ -20,37 +20,42 @@ describe('Unit: Component: koenig-lexical-editor', function () {
expect(result.metaText).to.equal('8 May 2024');
expect(result.MetaIcon).to.be.undefined;
expect(result.metaIconTitle).to.be.undefined;
});
it('handles public content', function () {
decoratePostSearchResult(result, {membersEnabled: true, timezone: 'Etc/UTC'});
expect(result.metaText).to.equal('Public • 8 May 2024');
expect(result.metaText).to.equal('8 May 2024');
expect(result.MetaIcon).to.be.undefined;
expect(result.metaIconTitle).to.be.undefined;
});
it('handles members content', function () {
result.visibility = 'members';
decoratePostSearchResult(result, {membersEnabled: true, timezone: 'Etc/UTC'});
expect(result.metaText).to.equal('Members • 8 May 2024');
expect(result.metaText).to.equal('8 May 2024');
expect(result.MetaIcon).to.exist;
expect(result.metaIconTitle).to.equal('Members only');
});
it('handles paid members content', function () {
result.visibility = 'paid';
decoratePostSearchResult(result, {membersEnabled: true, timezone: 'Etc/UTC'});
expect(result.metaText).to.equal('Paid members • 8 May 2024');
expect(result.metaText).to.equal('8 May 2024');
expect(result.MetaIcon).to.exist;
expect(result.metaIconTitle).to.equal('Paid-members only');
});
it('handles specific tiers content', function () {
result.visibility = 'tiers';
decoratePostSearchResult(result, {membersEnabled: true, timezone: 'Etc/UTC'});
expect(result.metaText).to.equal('Specific tiers • 8 May 2024');
expect(result.metaText).to.equal('8 May 2024');
expect(result.MetaIcon).to.exist;
expect(result.metaIconTitle).to.equal('Specific tiers only');
});
it('handles unknown visibility', function () {
@ -59,6 +64,7 @@ describe('Unit: Component: koenig-lexical-editor', function () {
expect(result.metaText).to.equal('8 May 2024');
expect(result.MetaIcon).to.be.undefined;
expect(result.metaIconTitle).to.be.undefined;
});
});
});

View File

@ -102,9 +102,9 @@
"@tryghost/kg-converters": "1.0.1",
"@tryghost/kg-default-atoms": "5.0.2",
"@tryghost/kg-default-cards": "10.0.3",
"@tryghost/kg-default-nodes": "1.0.11",
"@tryghost/kg-html-to-lexical": "1.0.12",
"@tryghost/kg-lexical-html-renderer": "1.0.11",
"@tryghost/kg-default-nodes": "1.0.13",
"@tryghost/kg-html-to-lexical": "1.0.14",
"@tryghost/kg-lexical-html-renderer": "1.0.13",
"@tryghost/kg-mobiledoc-html-renderer": "7.0.2",
"@tryghost/limit-service": "1.2.14",
"@tryghost/link-redirects": "0.0.0",
@ -226,7 +226,7 @@
},
"optionalDependencies": {
"@sentry/profiling-node": "7.114.0",
"@tryghost/html-to-mobiledoc": "3.0.5",
"@tryghost/html-to-mobiledoc": "3.0.7",
"sqlite3": "5.1.7"
},
"devDependencies": {

115
yarn.lock
View File

@ -6924,14 +6924,14 @@
dependencies:
lodash-es "^4.17.11"
"@tryghost/html-to-mobiledoc@3.0.5":
version "3.0.5"
resolved "https://registry.yarnpkg.com/@tryghost/html-to-mobiledoc/-/html-to-mobiledoc-3.0.5.tgz#f43da12bfd0e1473089221cdc0c562370fa21cb0"
integrity sha512-NfOctkASG9ArB6R3Yb9c+eSuQBupWyTiErkGTUVxg2X3ZOAxvx5sp1YiHtCoSv9aabrOYTXDgqJOlT0SaGbT3A==
"@tryghost/html-to-mobiledoc@3.0.7":
version "3.0.7"
resolved "https://registry.yarnpkg.com/@tryghost/html-to-mobiledoc/-/html-to-mobiledoc-3.0.7.tgz#e164e314eab286fceadc806109860264166f7064"
integrity sha512-4l3fY6FuMeciNDarc2aqAHlOsDcsxMr708dMHIHilKmlVC8dwiu5Aj88tO+Kn2vTDyoA/LRxFBVsS/uP6f9+8w==
dependencies:
"@tryghost/kg-parser-plugins" "^4.0.4"
"@tryghost/kg-parser-plugins" "^4.0.6"
"@tryghost/mobiledoc-kit" "^0.12.4-ghost.1"
jsdom "^23.0.0"
jsdom "^24.0.0"
"@tryghost/http-cache-utils@0.1.14":
version "0.1.14"
@ -6971,10 +6971,10 @@
resolved "https://registry.yarnpkg.com/@tryghost/kg-card-factory/-/kg-card-factory-5.0.2.tgz#c5a5800b5b49c5b0be9e0dafffb8f379b6d833ec"
integrity sha512-CBPH2DreDaP4C0u8lTQB5g9R7EfYecPaO6A/SsqFatP+CvTwdtghuv2WwIOo/ogTWbmmJBYvZlwAizFzsGs8Pw==
"@tryghost/kg-clean-basic-html@4.0.4", "@tryghost/kg-clean-basic-html@^4.0.4":
version "4.0.4"
resolved "https://registry.yarnpkg.com/@tryghost/kg-clean-basic-html/-/kg-clean-basic-html-4.0.4.tgz#7128ab60571d3b7b48ae0ea261ea7272c4fdd4b5"
integrity sha512-5Mz6oUxFQ969WAe4Iohza1mq/gvFPZk5LTvtYs0N7+ccwl7QGRLpzIAp5BUPLPE8CVISn/mHNSjGgOcyafFLpw==
"@tryghost/kg-clean-basic-html@4.0.6", "@tryghost/kg-clean-basic-html@^4.0.6":
version "4.0.6"
resolved "https://registry.yarnpkg.com/@tryghost/kg-clean-basic-html/-/kg-clean-basic-html-4.0.6.tgz#b69f319a29f5dd4f6dcdf85e9f06ac212c27d87f"
integrity sha512-8TUuTQiuExV8CG+y8J9jmepI5LY38WN4aceponfLmLV4hluV2Ag7Xoj8Fa5kwfpLGcPDoG/itCyMgysMr81B7A==
"@tryghost/kg-converters@1.0.1":
version "1.0.1"
@ -7001,38 +7001,38 @@
lodash "^4.17.21"
luxon "^3.0.0"
"@tryghost/kg-default-nodes@1.0.11", "@tryghost/kg-default-nodes@^1.0.11":
version "1.0.11"
resolved "https://registry.yarnpkg.com/@tryghost/kg-default-nodes/-/kg-default-nodes-1.0.11.tgz#2e36ed733d337743d6019c5953fcc240da65d94e"
integrity sha512-qG2C0rFlrPr6oWEbikcyH55ASrenTvp/WoDOjtohSA0gm1gHL0LqyrZaMBYJpYNGdJJpKON6rvT1h2UKj2zk3g==
"@tryghost/kg-default-nodes@1.0.13", "@tryghost/kg-default-nodes@^1.0.13":
version "1.0.13"
resolved "https://registry.yarnpkg.com/@tryghost/kg-default-nodes/-/kg-default-nodes-1.0.13.tgz#993657d2f766ac36053ccedf0bb5f006b9f8e442"
integrity sha512-71qUp+rYW7CpZOsW8Rer5ee57ra/WPELFyXO7ZDBqvb++mhRLxs9tvHXE04fAuBZkK6Kqs094+URmNjzyXdvtQ==
dependencies:
"@lexical/clipboard" "0.13.1"
"@lexical/rich-text" "0.13.1"
"@lexical/selection" "0.13.1"
"@lexical/utils" "0.13.1"
"@tryghost/kg-clean-basic-html" "^4.0.4"
"@tryghost/kg-clean-basic-html" "^4.0.6"
"@tryghost/kg-markdown-html-renderer" "^7.0.3"
html-minifier "^4.0.0"
jsdom "^23.0.0"
jsdom "^24.0.0"
lexical "0.13.1"
lodash "^4.17.21"
luxon "^3.3.0"
"@tryghost/kg-default-transforms@^1.0.12":
version "1.0.12"
resolved "https://registry.yarnpkg.com/@tryghost/kg-default-transforms/-/kg-default-transforms-1.0.12.tgz#be8fe54a53432c1a9033d59e631cc23edd37a2e5"
integrity sha512-gQtkunpu+1pmJWZEaIIcuWeXNF8R5L6R39k8GtmiX33QtQyvVLgB4yk79sYPVPCLIq2WT++3YTbEjm0QJe8qNw==
"@tryghost/kg-default-transforms@^1.0.14":
version "1.0.14"
resolved "https://registry.yarnpkg.com/@tryghost/kg-default-transforms/-/kg-default-transforms-1.0.14.tgz#9e441e06a87317155e12197f83d88d2b5c0512de"
integrity sha512-1SMHkCiVaBdUyXah1WAJ0k7cMTrzPQKzyAa4s5hpsoF86rj+8CC+t2SJdQmOQnY5FzMdmMgq8AJHkex1aOjdSA==
dependencies:
"@lexical/list" "0.13.1"
"@lexical/rich-text" "0.13.1"
"@lexical/utils" "0.13.1"
"@tryghost/kg-default-nodes" "^1.0.11"
"@tryghost/kg-default-nodes" "^1.0.13"
lexical "0.13.1"
"@tryghost/kg-html-to-lexical@1.0.12":
version "1.0.12"
resolved "https://registry.yarnpkg.com/@tryghost/kg-html-to-lexical/-/kg-html-to-lexical-1.0.12.tgz#8ecf08bd6c60351f0bd7e4e97c6ac1311ce0e578"
integrity sha512-bowtjsO736LjrimaaZpN7BoJGhhKIg0AT2ROmCA1snB4IReUUF8gvRVbrYH5K9F1XqaidYxqQlXsGEak2ehXRA==
"@tryghost/kg-html-to-lexical@1.0.14":
version "1.0.14"
resolved "https://registry.yarnpkg.com/@tryghost/kg-html-to-lexical/-/kg-html-to-lexical-1.0.14.tgz#79a243d46a79b72add7e737c3313647c7ac8e335"
integrity sha512-gAmIXLil7b5mDoZ9lw9teJPMI5o2He5cAVJ4CKwcmjdavUAkjhphT89GIQIYgOARI8HEHhm1O1aVW3i2M04Hpg==
dependencies:
"@lexical/clipboard" "0.13.1"
"@lexical/headless" "0.13.1"
@ -7040,15 +7040,15 @@
"@lexical/link" "0.13.1"
"@lexical/list" "0.13.1"
"@lexical/rich-text" "0.13.1"
"@tryghost/kg-default-nodes" "^1.0.11"
"@tryghost/kg-default-transforms" "^1.0.12"
jsdom "^23.0.0"
"@tryghost/kg-default-nodes" "^1.0.13"
"@tryghost/kg-default-transforms" "^1.0.14"
jsdom "^24.0.0"
lexical "0.13.1"
"@tryghost/kg-lexical-html-renderer@1.0.11":
version "1.0.11"
resolved "https://registry.yarnpkg.com/@tryghost/kg-lexical-html-renderer/-/kg-lexical-html-renderer-1.0.11.tgz#f537d2d52fe299a0035fa5b13a793a43a1b287e0"
integrity sha512-5nw5LbgQp/Z9hpR+mWr9VRUgclMPinrBvW0mfdQNQxr4Ek5xBWGp1zG0kj3RzjBQ/py9+iN0fMjjERKDEnGZug==
"@tryghost/kg-lexical-html-renderer@1.0.13":
version "1.0.13"
resolved "https://registry.yarnpkg.com/@tryghost/kg-lexical-html-renderer/-/kg-lexical-html-renderer-1.0.13.tgz#0642f79c0434bfb64430033f05256dc6c77adc70"
integrity sha512-QU/EYxREMyF+MTt0T730eyfsFI9QISFS68oYYDw5GOz1CgZQdwH24viEk9ZDmJmFi6T646cciKs0DrK/sUsaTA==
dependencies:
"@lexical/clipboard" "0.13.1"
"@lexical/code" "0.13.1"
@ -7056,8 +7056,8 @@
"@lexical/link" "0.13.1"
"@lexical/list" "0.13.1"
"@lexical/rich-text" "0.13.1"
"@tryghost/kg-default-nodes" "^1.0.11"
jsdom "^23.0.0"
"@tryghost/kg-default-nodes" "^1.0.13"
jsdom "^24.0.0"
lexical "0.13.1"
prettier "^3.0.0"
@ -7085,17 +7085,17 @@
mobiledoc-dom-renderer "^0.7.0"
simple-dom "^1.4.0"
"@tryghost/kg-parser-plugins@^4.0.4":
version "4.0.4"
resolved "https://registry.yarnpkg.com/@tryghost/kg-parser-plugins/-/kg-parser-plugins-4.0.4.tgz#79304ee3d6067f4b9e20b0eed6ac99f25c5034a0"
integrity sha512-uuMKW941OYaEag0JufAjnX3VdemHrstVsbOkY9Q7B6LsFC9fMZJk67Hx8BjpLX4jJnqOL6aPxJipaHXV0ywgSw==
"@tryghost/kg-parser-plugins@^4.0.6":
version "4.0.6"
resolved "https://registry.yarnpkg.com/@tryghost/kg-parser-plugins/-/kg-parser-plugins-4.0.6.tgz#28f62cae0aeb771e68dd537c14d931dc526c1b27"
integrity sha512-qBJNmyWBo48lopwemTI1gpMkSA4bYHAnvxUFsc1M5SsrjeHSUUjQXPX/OoZVRq0wO5gccmcO+P/aNiwKNTGBlg==
dependencies:
"@tryghost/kg-clean-basic-html" "^4.0.4"
"@tryghost/kg-clean-basic-html" "^4.0.6"
"@tryghost/kg-unsplash-selector@^0.1.11":
version "0.1.13"
resolved "https://registry.yarnpkg.com/@tryghost/kg-unsplash-selector/-/kg-unsplash-selector-0.1.13.tgz#b34734fb88cf89624233868c5191de416368c1c5"
integrity sha512-l9N2CxkgWFDaFdXqAt0jAuXkttsLohJsD/KUo/EzlxNs9JmurgeNtvuKYU/ciJ2LXKR7iq6j7LUu3e1OoBpjBw==
"@tryghost/kg-unsplash-selector@^0.1.15":
version "0.1.15"
resolved "https://registry.yarnpkg.com/@tryghost/kg-unsplash-selector/-/kg-unsplash-selector-0.1.15.tgz#4f3411e2239411244be30d62efb8014fcbf30174"
integrity sha512-JBSNr+MTzhYeBR+EmtICCu/iWYH+VGOKb9K3+KwylMZfHqWiemEYXw0dXDURDuOKr7Ft9ZoMv+NQ0XYPX380eg==
"@tryghost/kg-utils@^1.0.24":
version "1.0.24"
@ -7104,10 +7104,10 @@
dependencies:
semver "^7.3.5"
"@tryghost/koenig-lexical@1.1.11":
version "1.1.11"
resolved "https://registry.yarnpkg.com/@tryghost/koenig-lexical/-/koenig-lexical-1.1.11.tgz#f630a1a6d2ec78cf3973ddd115ece64614ab2aca"
integrity sha512-jd1cUB4S4fNji4zRVgiE4qMXBAVnqJDxTEzg9MizgaiEj0Vc6S/o8pbExke0Li4aOJKNMGeB6/3MFhyx41Q0Mg==
"@tryghost/koenig-lexical@1.1.13":
version "1.1.13"
resolved "https://registry.yarnpkg.com/@tryghost/koenig-lexical/-/koenig-lexical-1.1.13.tgz#b9a00573ad5aec33bb3c0183728c01f91f5583a7"
integrity sha512-3uDo/ixn53+Du2r7F1sqI6tqGmh8yOiOFNZytANjf8Hiz9u5aAmV18Bw/3TlOKvfPBdOGGWj2IMvA3wrxEv9zQ==
"@tryghost/limit-service@1.2.14", "@tryghost/limit-service@^1.2.10":
version "1.2.14"
@ -13186,6 +13186,13 @@ cssstyle@^3.0.0:
dependencies:
rrweb-cssom "^0.6.0"
cssstyle@^4.0.1:
version "4.0.1"
resolved "https://registry.yarnpkg.com/cssstyle/-/cssstyle-4.0.1.tgz#ef29c598a1e90125c870525490ea4f354db0660a"
integrity sha512-8ZYiJ3A/3OkDd093CBT/0UKDWry7ak4BdPTFP2+QEP7cmhouyq/Up709ASSj2cK02BbZiMgk7kYjZNS4QP5qrQ==
dependencies:
rrweb-cssom "^0.6.0"
csstype@^3.0.2:
version "3.1.1"
resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.1.tgz#841b532c45c758ee546a11d5bd7b7b473c8c30b9"
@ -20290,12 +20297,12 @@ jsdom@^16.4.0:
ws "^7.4.6"
xml-name-validator "^3.0.0"
jsdom@^23.0.0:
version "23.0.1"
resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-23.0.1.tgz#ede7ff76e89ca035b11178d200710d8982ebfee0"
integrity sha512-2i27vgvlUsGEBO9+/kJQRbtqtm+191b5zAZrU/UezVmnC2dlDAFLgDYJvAEi94T4kjsRKkezEtLQTgsNEsW2lQ==
jsdom@^24.0.0:
version "24.0.0"
resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-24.0.0.tgz#e2dc04e4c79da368481659818ee2b0cd7c39007c"
integrity sha512-UDS2NayCvmXSXVP6mpTj+73JnNQadZlr9N68189xib2tx5Mls7swlTNao26IoHv46BZJFvXygyRtyXd1feAk1A==
dependencies:
cssstyle "^3.0.0"
cssstyle "^4.0.1"
data-urls "^5.0.0"
decimal.js "^10.4.3"
form-data "^4.0.0"
@ -20314,7 +20321,7 @@ jsdom@^23.0.0:
whatwg-encoding "^3.1.1"
whatwg-mimetype "^4.0.0"
whatwg-url "^14.0.0"
ws "^8.14.2"
ws "^8.16.0"
xml-name-validator "^5.0.0"
jsesc@^1.3.0:
@ -30781,7 +30788,7 @@ write-file-atomic@^5.0.1:
imurmurhash "^0.1.4"
signal-exit "^4.0.1"
ws@8.17.0, ws@^8.13.0, ws@^8.14.2, ws@^8.2.3:
ws@8.17.0, ws@^8.13.0, ws@^8.16.0, ws@^8.2.3:
version "8.17.0"
resolved "https://registry.yarnpkg.com/ws/-/ws-8.17.0.tgz#d145d18eca2ed25aaf791a183903f7be5e295fea"
integrity sha512-uJq6108EgZMAl20KagGkzCKfMEjxmKvZHG7Tlq0Z6nOky7YF7aq4mOx6xK8TJ/i1LeK4Qus7INktacctDgY8Ow==