From 71758af336e50d3fc6b1fddc9a728456ca9c497e Mon Sep 17 00:00:00 2001 From: Dindonneau Date: Thu, 21 Dec 2023 10:27:47 +0100 Subject: [PATCH 1/3] chore(embedLink): new Layout --- src/index.css | 65 ++++++++++++++++++++++++++++++++++++++++++--------- src/index.js | 41 ++++++++++++++++++++++++++++++-- 2 files changed, 93 insertions(+), 13 deletions(-) diff --git a/src/index.css b/src/index.css index 01a0b57..da3b92b 100644 --- a/src/index.css +++ b/src/index.css @@ -63,7 +63,14 @@ } &__content { - display: block; + display: flex; + column-gap: 10px; + padding: 10px; + border-radius: 5px; + color: initial !important; + text-decoration: none !important; + + /* display: block; padding: 25px; border-radius: 2px; box-shadow: 0 0 0 2px #fff; @@ -74,15 +81,21 @@ content: ""; clear: both; display: table; - } + } */ &--rendered { background: #fff; + border: 1px solid #E9E9E9; + border-radius: 5px; + will-change: filter; + animation: link-in 450ms 1 cubic-bezier(0.215, 0.61, 0.355, 1); + + /* background: #fff; border: 1px solid rgba(201, 201, 204, 0.48); box-shadow: 0 1px 3px rgba(0,0,0, .1); border-radius: 6px; will-change: filter; - animation: link-in 450ms 1 cubic-bezier(0.215, 0.61, 0.355, 1); + animation: link-in 450ms 1 cubic-bezier(0.215, 0.61, 0.355, 1); */ &:hover { box-shadow: 0 0 3px rgba(0,0,0, .16); @@ -94,41 +107,71 @@ background-position: center center; background-repeat: no-repeat; background-size: cover; - margin: 0 0 0 30px; + min-width: 80px; + height: 80px; + aspect-ratio: 1/1; + border-radius: 5px; + + /* margin: 0 0 0 30px; width: 65px; height: 65px; border-radius: 3px; - float: right; + float: right; */ + } + + &__infos { + overflow: hidden; + flex: 1; } &__title { - font-size: 17px; + font-size: 15px; + font-weight: 600; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + + /* font-size: 17px; font-weight: 600; line-height: 1.5em; margin: 0 0 10px 0; + ^&__anchor { margin-top: 25px; - } + } */ } &__description { - margin: 0 0 20px 0; + font-size: 13px; + line-height: 1.25; + height:2rem; + overflow: hidden; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + + /* margin: 0 0 20px 0; font-size: 15px; line-height: 1.55em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; - overflow: hidden; + overflow: hidden; */ } &__anchor { - display: block; + font-size: 13px; + color: #F44545; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + + /* display: block; font-size: 15px; line-height: 1em; color: #888 !important; border: 0 !important; - padding: 0 !important; + padding: 0 !important; */ } } diff --git a/src/index.js b/src/index.js index 63013ea..a597a27 100644 --- a/src/index.js +++ b/src/index.js @@ -116,6 +116,7 @@ export default class LinkTool { inputHolder: null, linkContent: null, linkImage: null, + linkInfos: null, linkTitle: null, linkDescription: null, linkText: null, @@ -155,6 +156,7 @@ export default class LinkTool { render() { this.nodes.wrapper = this.make('div', this.CSS.baseClass); this.nodes.container = this.make('div', this.CSS.container); + this.nodes.container = this.make('div', [this.CSS.container, 'not-prose']); this.nodes.inputHolder = this.makeInputHolder(); this.nodes.linkContent = this.prepareLinkPreview(); @@ -164,7 +166,8 @@ export default class LinkTool { */ if (Object.keys(this.data.meta).length) { this.nodes.container.appendChild(this.nodes.linkContent); - this.showLinkPreview(this.data.meta); + this.showLinkPreviewOverridden(this.data.meta); + // this.showLinkPreview(this.data.meta); } else { this.nodes.container.appendChild(this.nodes.inputHolder); } @@ -239,6 +242,7 @@ export default class LinkTool { linkContent: 'link-tool__content', linkContentRendered: 'link-tool__content--rendered', linkImage: 'link-tool__image', + linkInfos: 'link-tool__infos', linkTitle: 'link-tool__title', linkDescription: 'link-tool__description', linkText: 'link-tool__anchor', @@ -353,6 +357,7 @@ export default class LinkTool { }); this.nodes.linkImage = this.make('div', this.CSS.linkImage); + this.nodes.linkInfos = this.make('div', this.CSS.linkInfos); this.nodes.linkTitle = this.make('div', this.CSS.linkTitle); this.nodes.linkDescription = this.make('p', this.CSS.linkDescription); this.nodes.linkText = this.make('span', this.CSS.linkText); @@ -394,6 +399,37 @@ export default class LinkTool { } } + /** + * Compose link preview from fetched data + * + * @param {metaData} meta - link meta data + */ + showLinkPreviewOverridden({ image, title, description }) { + this.nodes.container.appendChild(this.nodes.linkContent); + + if (image && image.url) { + this.nodes.linkImage.style.backgroundImage = 'url(' + image.url + ')'; + this.nodes.linkContent.appendChild(this.nodes.linkImage); + } + + if (title) { + this.nodes.linkTitle.textContent = title; + this.nodes.linkInfos.appendChild(this.nodes.linkTitle); + } + + if (description) { + this.nodes.linkDescription.textContent = description; + this.nodes.linkInfos.appendChild(this.nodes.linkDescription); + } + + this.nodes.linkText.textContent = this.data.link; + this.nodes.linkInfos.appendChild(this.nodes.linkText); + + this.nodes.linkContent.classList.add(this.CSS.linkContentRendered); + this.nodes.linkContent.setAttribute('href', this.data.link); + this.nodes.linkContent.appendChild(this.nodes.linkInfos); + } + /** * Show loading progress bar */ @@ -502,7 +538,8 @@ export default class LinkTool { this.hideProgress().then(() => { this.nodes.inputHolder.remove(); - this.showLinkPreview(metaData); + this.showLinkPreviewOverridden(metaData); + // this.showLinkPreview(metaData); }); } From 5756d89c79080fff3f0ede8ccdf04d98f22e61a7 Mon Sep 17 00:00:00 2001 From: Dindonneau Date: Thu, 21 Dec 2023 17:22:19 +0100 Subject: [PATCH 2/3] chore(description): grey color fro description --- src/index.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/index.css b/src/index.css index da3b92b..9f4f49f 100644 --- a/src/index.css +++ b/src/index.css @@ -143,6 +143,7 @@ &__description { font-size: 13px; + color: #595959; line-height: 1.25; height:2rem; overflow: hidden; From 28cbda1032e39c6d54d0bcc1808d4ed3b1a0a4ee Mon Sep 17 00:00:00 2001 From: Dindonneau Date: Thu, 21 Dec 2023 18:15:03 +0100 Subject: [PATCH 3/3] chore(comments): remove commented code --- src/index.css | 50 -------------------------------------------------- src/index.js | 40 ++-------------------------------------- 2 files changed, 2 insertions(+), 88 deletions(-) diff --git a/src/index.css b/src/index.css index 9f4f49f..bdbbd9c 100644 --- a/src/index.css +++ b/src/index.css @@ -70,19 +70,6 @@ color: initial !important; text-decoration: none !important; - /* display: block; - padding: 25px; - border-radius: 2px; - box-shadow: 0 0 0 2px #fff; - color: initial !important; - text-decoration: none !important; - - &::after { - content: ""; - clear: both; - display: table; - } */ - &--rendered { background: #fff; border: 1px solid #E9E9E9; @@ -90,13 +77,6 @@ will-change: filter; animation: link-in 450ms 1 cubic-bezier(0.215, 0.61, 0.355, 1); - /* background: #fff; - border: 1px solid rgba(201, 201, 204, 0.48); - box-shadow: 0 1px 3px rgba(0,0,0, .1); - border-radius: 6px; - will-change: filter; - animation: link-in 450ms 1 cubic-bezier(0.215, 0.61, 0.355, 1); */ - &:hover { box-shadow: 0 0 3px rgba(0,0,0, .16); } @@ -111,12 +91,6 @@ height: 80px; aspect-ratio: 1/1; border-radius: 5px; - - /* margin: 0 0 0 30px; - width: 65px; - height: 65px; - border-radius: 3px; - float: right; */ } &__infos { @@ -130,15 +104,6 @@ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; - - /* font-size: 17px; - font-weight: 600; - line-height: 1.5em; - margin: 0 0 10px 0; - - + ^&__anchor { - margin-top: 25px; - } */ } &__description { @@ -150,14 +115,6 @@ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; - - /* margin: 0 0 20px 0; - font-size: 15px; - line-height: 1.55em; - display: -webkit-box; - -webkit-line-clamp: 3; - -webkit-box-orient: vertical; - overflow: hidden; */ } &__anchor { @@ -166,13 +123,6 @@ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; - - /* display: block; - font-size: 15px; - line-height: 1em; - color: #888 !important; - border: 0 !important; - padding: 0 !important; */ } } diff --git a/src/index.js b/src/index.js index a597a27..4a516dd 100644 --- a/src/index.js +++ b/src/index.js @@ -166,8 +166,7 @@ export default class LinkTool { */ if (Object.keys(this.data.meta).length) { this.nodes.container.appendChild(this.nodes.linkContent); - this.showLinkPreviewOverridden(this.data.meta); - // this.showLinkPreview(this.data.meta); + this.showLinkPreview(this.data.meta); } else { this.nodes.container.appendChild(this.nodes.inputHolder); } @@ -378,40 +377,6 @@ export default class LinkTool { this.nodes.linkContent.appendChild(this.nodes.linkImage); } - if (title) { - this.nodes.linkTitle.textContent = title; - this.nodes.linkContent.appendChild(this.nodes.linkTitle); - } - - if (description) { - this.nodes.linkDescription.textContent = description; - this.nodes.linkContent.appendChild(this.nodes.linkDescription); - } - - this.nodes.linkContent.classList.add(this.CSS.linkContentRendered); - this.nodes.linkContent.setAttribute('href', this.data.link); - this.nodes.linkContent.appendChild(this.nodes.linkText); - - try { - this.nodes.linkText.textContent = new URL(this.data.link).hostname; - } catch (e) { - this.nodes.linkText.textContent = this.data.link; - } - } - - /** - * Compose link preview from fetched data - * - * @param {metaData} meta - link meta data - */ - showLinkPreviewOverridden({ image, title, description }) { - this.nodes.container.appendChild(this.nodes.linkContent); - - if (image && image.url) { - this.nodes.linkImage.style.backgroundImage = 'url(' + image.url + ')'; - this.nodes.linkContent.appendChild(this.nodes.linkImage); - } - if (title) { this.nodes.linkTitle.textContent = title; this.nodes.linkInfos.appendChild(this.nodes.linkTitle); @@ -538,8 +503,7 @@ export default class LinkTool { this.hideProgress().then(() => { this.nodes.inputHolder.remove(); - this.showLinkPreviewOverridden(metaData); - // this.showLinkPreview(metaData); + this.showLinkPreview(metaData); }); }