Skip to content

Commit 8ac78da

Browse files
panda-sandeeppanda-sandeep
authored
Merge pull request #41 from KRRISH96/sai/fallback-card-redesign
fallback embed card redesign
2 parents 9287e0f + 14bf917 commit 8ac78da

File tree

1 file changed

+12
-16
lines changed

1 file changed

+12
-16
lines changed

‎packages/webembeds-core/src/utils/html.utils.ts

+12-16
Original file line numberDiff line numberDiff line change
@@ -144,6 +144,7 @@ async function uploadImageByUrl(url: string) {
144144

145145
export const wrapFallbackHTML = async (data: urlMetadata.Result) => {
146146
let mainURL;
147+
let isGitHubLink = false;
147148

148149
const desc = data["og:description"] || data.description;
149150
let coverImage: any = data["og:image"] || data.image;
@@ -163,45 +164,40 @@ export const wrapFallbackHTML = async (data: urlMetadata.Result) => {
163164
desc.length > 150 ? "..." : ""
164165
}`;
165166

167+
if (mainURL.includes("github.com")) {
168+
isGitHubLink = true;
169+
}
170+
166171
return `
167172
<style>
168-
.webembed-fallback-card *,.webembed-fallback-card ::after,.webembed-fallback-card ::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}.webembed-fallback-card{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-feature-settings:normal}.webembed-fallback-card h1,.webembed-fallback-card h2,.webembed-fallback-card h3,.webembed-fallback-card h4,.webembed-fallback-card h5,.webembed-fallback-card h6{font-size:inherit;font-weight:inherit}.webembed-fallback-card blockquote,.webembed-fallback-card dd,.webembed-fallback-card dl,.webembed-fallback-card figure,.webembed-fallback-card h1,.webembed-fallback-card h2,.webembed-fallback-card h3,.webembed-fallback-card h4,.webembed-fallback-card h5,.webembed-fallback-card h6,.webembed-fallback-card hr,.webembed-fallback-card p{margin:0}.webembed-fallback-card a{color:inherit;text-decoration:none}.webembed-fallback-card button{font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}.webembed-fallback-card button{text-transform:none}.webembed-fallback-card [type=button],.webembed-fallback-card button{-webkit-appearance:button;background-color:transparent;background-image:none}.webembed-fallback-card [role=button],.webembed-fallback-card button{cursor:pointer}.webembed-fallback-card audio,.webembed-fallback-card canvas,.webembed-fallback-card embed,.webembed-fallback-card iframe,.webembed-fallback-card img,.webembed-fallback-card object,.webembed-fallback-card svg,.webembed-fallback-card video{display:block;vertical-align:middle}.webembed-fallback-card img,.webembed-fallback-card video{max-width:100%;height:auto}.webembed-fallback-card *,.webembed-fallback-card ::after,.webembed-fallback-card ::before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000}.webembed-fallback-card ::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000}.webembed-fallback-card.tw-we-container{width:100%}@media (min-width:640px){.webembed-fallback-card.tw-we-container{max-width:640px}}@media (min-width:768px){.webembed-fallback-card.tw-we-container{max-width:768px}}@media (min-width:1024px){.webembed-fallback-card.tw-we-container{max-width:1024px}}@media (min-width:1280px){.webembed-fallback-card.tw-we-container{max-width:1280px}}@media (min-width:1536px){.webembed-fallback-card.tw-we-container{max-width:1536px}}.webembed-fallback-card .tw-we-col-span-12{grid-column:span 12/span 12}.webembed-fallback-card.tw-we-mx-auto{margin-left:auto;margin-right:auto}.webembed-fallback-card .tw-we-mb-1{margin-bottom:.25rem}.webembed-fallback-card .tw-we-mb-2{margin-bottom:.5rem}.webembed-fallback-card .tw-we-mr-2{margin-right:.5rem}.webembed-fallback-card .tw-we-block{display:block}.webembed-fallback-card .tw-we-flex{display:flex}.webembed-fallback-card .tw-we-grid{display:grid}.webembed-fallback-card .tw-we-h-56{height:14rem}.webembed-fallback-card .tw-we-h-4{height:1rem}.webembed-fallback-card .tw-we-w-full{width:100%}.webembed-fallback-card .tw-we-w-4{width:1rem}.webembed-fallback-card .tw-we-grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.webembed-fallback-card .tw-we-flex-row{flex-direction:row}.webembed-fallback-card .tw-we-flex-col{flex-direction:column}.webembed-fallback-card .tw-we-items-start{align-items:flex-start}.webembed-fallback-card .tw-we-items-center{align-items:center}.webembed-fallback-card .tw-we-items-stretch{align-items:stretch}.webembed-fallback-card .tw-we-justify-between{justify-content:space-between}.webembed-fallback-card .tw-we-overflow-hidden{overflow:hidden}.webembed-fallback-card .tw-we-rounded{border-radius:.25rem}.webembed-fallback-card .tw-we-border{border-width:1px}.webembed-fallback-card .tw-we-border-r{border-right-width:1px}.webembed-fallback-card .tw-we-border-slate-200{--tw-border-opacity:1;border-color:rgb(226 232 240 / var(--tw-border-opacity))}.webembed-fallback-card .tw-we-bg-slate-50{--tw-bg-opacity:1;background-color:rgb(248 250 252 / var(--tw-bg-opacity))}.webembed-fallback-card .tw-we-bg-cover{background-size:cover}.webembed-fallback-card .tw-we-bg-center{background-position:center}.webembed-fallback-card .tw-we-fill-current{fill:currentColor}.webembed-fallback-card .tw-we-py-10,.webembed-fallback-card.tw-we-py-10{padding-top:2.5rem;padding-bottom:2.5rem}.webembed-fallback-card .tw-we-py-5{padding-top:1.25rem;padding-bottom:1.25rem}.webembed-fallback-card .tw-we-px-4{padding-left:1rem;padding-right:1rem}.webembed-fallback-card .tw-we-text-2xl{font-size:1.5rem;line-height:2rem}.webembed-fallback-card .tw-we-text-lg{font-size:1.125rem;line-height:1.75rem}.webembed-fallback-card .tw-we-font-bold{font-weight:700}.webembed-fallback-card .tw-we-text-slate-900{--tw-text-opacity:1;color:rgb(15 23 42 / var(--tw-text-opacity))}.webembed-fallback-card .tw-we-text-slate-500{--tw-text-opacity:1;color:rgb(100 116 139 / var(--tw-text-opacity))}.webembed-fallback-card .tw-we-shadow-md{--tw-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1),0 2px 4px -2px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.webembed-fallback-card .tw-we-transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:150ms}.webembed-fallback-card .hover-tw-we-border-slate-900:hover{--tw-border-opacity:1;border-color:rgb(15 23 42 / var(--tw-border-opacity))}.webembed-fallback-card .tw-we-group:hover .group-hover:tw-we-text-blue-600{--tw-text-opacity:1;color:rgb(37 99 235 / var(--tw-text-opacity))}.webembed-fallback-card .tw-we-group:hover .group-hover:tw-we-underline{text-decoration-line:underline}@media (min-width:768px){.webembed-fallback-card .md-tw-we-col-span-4{grid-column:span 4/span 4}.webembed-fallback-card .md-tw-we-col-span-8{grid-column:span 8/span 8}}
173+
.webembed-fallback-card *,.webembed-fallback-card ::after,.webembed-fallback-card ::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}.webembed-fallback-card{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-feature-settings:normal}.webembed-fallback-card h1,.webembed-fallback-card h2,.webembed-fallback-card h3,.webembed-fallback-card h4,.webembed-fallback-card h5,.webembed-fallback-card h6{font-size:inherit;font-weight:inherit}.webembed-fallback-card blockquote,.webembed-fallback-card dd,.webembed-fallback-card dl,.webembed-fallback-card figure,.webembed-fallback-card h1,.webembed-fallback-card h2,.webembed-fallback-card h3,.webembed-fallback-card h4,.webembed-fallback-card h5,.webembed-fallback-card h6,.webembed-fallback-card hr,.webembed-fallback-card p{margin:0}.webembed-fallback-card a{color:inherit;text-decoration:none}.webembed-fallback-card button{font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}.webembed-fallback-card button{text-transform:none}.webembed-fallback-card [type=button],.webembed-fallback-card button{-webkit-appearance:button;background-color:transparent;background-image:none}.webembed-fallback-card [role=button],.webembed-fallback-card button{cursor:pointer}.webembed-fallback-card audio,.webembed-fallback-card canvas,.webembed-fallback-card embed,.webembed-fallback-card iframe,.webembed-fallback-card img,.webembed-fallback-card object,.webembed-fallback-card svg,.webembed-fallback-card video{display:block;vertical-align:middle}.webembed-fallback-card img,.webembed-fallback-card video{max-width:100%;height:auto}.webembed-fallback-card *,.webembed-fallback-card ::after,.webembed-fallback-card ::before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000}.webembed-fallback-card ::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000}.webembed-fallback-card .tw-we-line-clamp-1 {overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;}.webembed-fallback-card .tw-we-line-clamp-2 {overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;}.webembed-fallback-card .tw-we-line-clamp-3 {overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;}.webembed-fallback-card.tw-we-container{width:100%}@media (min-width:640px){.webembed-fallback-card.tw-we-container{max-width:640px}}@media (min-width:768px){.webembed-fallback-card.tw-we-container{max-width:768px}}@media (min-width:1024px){.webembed-fallback-card.tw-we-container{max-width:1024px}}@media (min-width:1280px){.webembed-fallback-card.tw-we-container{max-width:1280px}}@media (min-width:1536px){.webembed-fallback-card.tw-we-container{max-width:1536px}}.webembed-fallback-card .tw-we-col-span-12{grid-column:span 12/span 12}.webembed-fallback-card.tw-we-mx-auto{margin-left:auto;margin-right:auto}.webembed-fallback-card .tw-we-mb-1{margin-bottom:.25rem}.webembed-fallback-card .tw-we-mb-2{margin-bottom:.5rem}.webembed-fallback-card .tw-we-mb-4{margin-bottom:1rem}.webembed-fallback-card .tw-we-mr-0{margin-right:0}.webembed-fallback-card .tw-we-block{display:block}.webembed-fallback-card .tw-we-flex{display:flex}.webembed-fallback-card .tw-we-grid{display:grid}.webembed-fallback-card .tw-we-gap-4{gap:1rem}.webembed-fallback-card .tw-we-h-52{height:13rem}.webembed-fallback-card .tw-we-h-4{height:1rem}.webembed-fallback-card .tw-we-w-full{width:100%}.webembed-fallback-card .tw-we-w-4{width:1rem}.webembed-fallback-card .tw-we-grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.webembed-fallback-card .tw-we-flex-row{flex-direction:row}.webembed-fallback-card .tw-we-flex-col{flex-direction:column}.webembed-fallback-card .tw-we-items-start{align-items:flex-start}.webembed-fallback-card .tw-we-items-center{align-items:center}.webembed-fallback-card .tw-we-items-stretch{align-items:stretch}.webembed-fallback-card .tw-we-justify-between{justify-content:space-between}.webembed-fallback-card .tw-we-overflow-hidden{overflow:hidden}.webembed-fallback-card .tw-we-rounded-xl{border-radius:.75rem}.webembed-fallback-card .tw-we-border{border-width:1px}.webembed-fallback-card .tw-we-border-slate-200{--tw-border-opacity:1;border-color:rgb(226 232 240 / var(--tw-border-opacity))}.webembed-fallback-card .tw-we-bg-cover{background-size:cover}.webembed-fallback-card .tw-we-bg-center{background-position:center}.webembed-fallback-card .tw-we-bg-left{background-position:left}.webembed-fallback-card .tw-we-fill-current{fill:currentColor}.webembed-fallback-card .tw-we-py-10,.webembed-fallback-card.tw-we-py-10{padding-top:2.5rem;padding-bottom:2.5rem;}.webembed-fallback-card .tw-we-py-10{padding-top:4rem;padding-bottom:4rem;}.webembed-fallback-card .tw-we-p-4{padding:1rem;}.webembed-fallback-card .tw-we-py-5{padding-top:1.25rem;padding-bottom:1.25rem}.webembed-fallback-card .tw-we-px-4{padding-left:1rem;padding-right:1rem}.webembed-fallback-card .tw-we-bg-white{background:white}.webembed-fallback-card .tw-we-text-base{font-size:1rem;line-height:1.5rem}.webembed-fallback-card .tw-we-text-lg{font-size:1.125rem;line-height:1.75rem}.webembed-fallback-card .tw-we-font-semibold{font-weight:600}.webembed-fallback-card .tw-we-text-slate-800{--tw-text-opacity:1;color:rgb(30 41 59 / var(--tw-text-opacity))}.webembed-fallback-card .tw-we-text-slate-600{--tw-text-opacity:1;color:rgb(71 85 105 / var(--tw-text-opacity))}.webembed-fallback-card .tw-we-transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:150ms}.webembed-fallback-card .hover-tw-we-border-slate-300:hover{--tw-border-opacity:1;border-color:rgb(203 213 225 / var(--tw-border-opacity))}.webembed-fallback-card .tw-we-group:hover .group-hover:tw-we-text-blue-600{--tw-text-opacity:1;color:rgb(37 99 235 / var(--tw-text-opacity))}.webembed-fallback-card .tw-we-group:hover .group-hover:tw-we-underline{text-decoration-line:underline}@media (min-width:768px){.webembed-fallback-card .md-tw-we-flex-row{flex-direction:row}.webembed-fallback-card .md-tw-we-line-clamp-2 {overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;}.webembed-fallback-card .md-tw-we-mr-4{margin-right:1rem}.webembed-fallback-card .md-tw-we-col-span-4{grid-column:span 4/span 4}.webembed-fallback-card .md-tw-we-col-span-8{grid-column:span 8/span 8}}.webembed-fallback-card .fallback-embed-image-container{height:211px;}@media (min-width:640px){.webembed-fallback-card .fallback-embed-image-container{width:100%;height:240px;}}@media (min-width:768px){.webembed-fallback-card .fallback-embed-image-container{min-width:295px;width:295px;height:199px;}}
169174
</style>
170175
171176
<div class="webembed-fallback-card tw-we-container tw-we-mx-auto tw-we-py-10">
172177
<a
173178
target="_blank"
174179
rel="noopener"
175180
href=${data["og:url"] || data.url}
176-
class="tw-we-w-full tw-we-group hover-tw-we-border-slate-900 tw-we-text-slate-900 tw-we-grid tw-we-border tw-we-border-slate-200 tw-we-grid-cols-12 tw-we-bg-slate-50 tw-we-shadow-md tw-we-rounded tw-we-overflow-hidden"
181+
class="tw-we-w-full tw-we-group hover-tw-we-border-slate-300 tw-we-bg-white tw-we-text-slate-800 tw-we-p-4 tw-we-flex tw-we-gap-4 tw-we-flex-col md-tw-we-flex-row tw-we-border tw-we-border-slate-200 tw-we-rounded-xl tw-we-overflow-hidden"
177182
>
178183
<div
179-
class="tw-we-col-span-12 md-tw-we-col-span-4 tw-we-border-r tw-we-bg-center tw-we-border-slate-200 tw-we-bg-cover tw-we-h-56"
184+
class="fallback-embed-image-container ${isGitHubLink ? "tw-we-bg-left" : "tw-we-bg-center"} tw-we-bg-cover tw-we-border tw-we-border-slate-200 tw-we-h-52 tw-we-rounded-xl tw-we-overflow-hidden"
180185
style="background-image: url('${coverImage}?w=1600&h=840&fit=crop&crop=entropy&auto=format,enhance&q=60')"
181186
></div>
182187
<div
183-
class="tw-we-col-span-12 md-tw-we-col-span-8 tw-we-py-5 tw-we-px-4 tw-we-flex tw-we-flex-col tw-we-items-start tw-we-items-stretch tw-we-justify-between"
188+
class="tw-we-py-1 tw-we-flex tw-we-flex-col tw-we-items-start tw-we-items-stretch tw-we-justify-between"
184189
>
185190
<div>
186-
<p class="tw-we-text-2xl tw-we-font-bold tw-we-mb-1">
191+
<p class="tw-we-text-lg tw-we-font-semibold tw-we-mb-4 tw-we-line-clamp-3">
187192
${data["og:title"] || data.title}
188193
</p>
189-
<p class="tw-we-text-lg tw-we-text-slate-500 tw-we-mb-2">
194+
<p class="tw-we-text-slate-600 tw-we-text-base tw-we-mb-4 tw-we-line-clamp-1 md-tw-we-line-clamp-2">
190195
${description}
191196
</p>
192197
</div>
193198
<div class="tw-we-flex tw-we-flex-row tw-we-items-center tw-we-w-full">
194-
<span
195-
class="tw-we-text-slate-500 tw-we-block tw-we-mr-2 group-hover:tw-we-text-blue-600 tw-we-transition tw-we-duraton-100"
196-
>
197-
<svg viewBox="0 0 512 512" class="tw-we-w-4 tw-we-h-4 tw-we-fill-current">
198-
<path
199-
d="M336 0c-8.8 0-16 7.2-16 16s7.2 16 16 16h121.4L212.7 276.7c-6.2 6.2-6.2 16.4 0 22.6s16.4 6.2 22.6 0L480 54.6V176c0 8.8 7.2 16 16 16s16-7.2 16-16V16c0-8.8-7.2-16-16-16H336zM64 64C28.7 64 0 92.7 0 128v320c0 35.3 28.7 64 64 64h320c35.3 0 64-28.7 64-64V304c0-8.8-7.2-16-16-16s-16 7.2-16 16v144c0 17.7-14.3 32-32 32H64c-17.7 0-32-14.3-32-32V128c0-17.7 14.3-32 32-32h144c8.8 0 16-7.2 16-16s-7.2-16-16-16H64z"
200-
/>
201-
</svg>
202-
</span>
203199
<p
204-
class="tw-we-text-lg tw-we-text-slate-500 group-hover:tw-we-text-blue-600 group-hover:tw-we-underline tw-we-transition tw-we-duraton-100"
200+
class="tw-we-text-slate-600 tw-we-text-base group-hover:tw-we-text-blue-600 group-hover:tw-we-underline tw-we-transition tw-we-duraton-100"
205201
>
206202
${mainURL !== "/" ? mainURL : ""}
207203
</p>

0 commit comments

Comments
 (0)