tpl
/
obsidian-sample-plugin
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

이미지링크가 상대경로일시의 오류 수정

This commit is contained in:
kim365my 2024-04-06 01:23:18 +09:00
parent 374e201c86
commit e3b43a6809
2 changed files with 21 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
src/LinkThumbnailWidgetParams.ts
View File

@ -4,7 +4,8 @@ import { requestUrl } from "obsidian";
const urlRegex = new RegExp("^(http:\\/\\/www\\.|https:\\/\\/www\\.|http:\\/\\/|https:\\/\\/)?[a-z0-9]+([\\-.]{1}[a-z0-9]+)*\\.[a-z]{2,5}(:[0-9]{1,5})?(\\/.*)?$");
export async function LinkThumbnailWidgetParams(url: string) {
if (urlRegex.test(url)) {
const urlArr = urlRegex.exec(url);
if (urlArr) {
try {
const response = await requestUrl(url);
const contextType = response.headers["content-type"];
@ -18,35 +19,24 @@ export async function LinkThumbnailWidgetParams(url: string) {
const ogTitle = document.querySelector("meta[property='og:title']")?.getAttribute("content") || document.querySelector("title")?.textContent || "";
const ogDescription = document.querySelector("meta[property='og:description']")?.getAttribute("content") || "";
const ogImage = document.querySelector("meta[property='og:image']")?.getAttribute("content") || "";
let ogImage = document.querySelector("meta[property='og:image']")?.getAttribute("content") || "";
if (ogImage.startsWith("/")) {
const baseUrl = url.replace(urlArr[4], "");
ogImage = baseUrl + ogImage;
}
const ogImageAlt = document.querySelector("meta[property='og:image:alt']")?.getAttribute("content") || "";
const ogUrl = document.querySelector("meta[property='og:url']")?.getAttribute("content") || url;
let result = "";
if (ogImage === "") {
result = `
<div class="openGraphPreview">
<div class="se-oglink-info-container">
<strong class="se-oglink-info">${ogTitle}</strong>
<description class="se-oglink-summary">${ogDescription}</description>
<p class="se-oglink-url"> ${ogUrl}</p>
</div>
</div>
`
} else {
result = `
<div class="openGraphPreview">
<div class="se-oglink-thumbnail">
<img src="${ogImage}" alt="${ogImageAlt}" class="se-oglink-thumbnail-resource"></img>
</div>
<div class="se-oglink-info-container">
<strong class="se-oglink-info">${ogTitle}</strong>
<description class="se-oglink-summary">${ogDescription}</description>
<p class="se-oglink-url"> ${ogUrl}</p>
</div>
</div>
`
}
const result = `
<div class="openGraphPreview">
${(ogImage === "")? "" : `<div class="se-oglink-thumbnail"><img src="${ogImage}" alt="${ogImageAlt}" class="se-oglink-thumbnail-resource"></img></div>`}
<div class="se-oglink-info-container">
<strong class="se-oglink-info">${ogTitle}</strong>
<description class="se-oglink-summary">${ogDescription}</description>
<p class="se-oglink-url">${ogUrl}</p>
</div>
</div>
`
return result;
} catch (error) {
console.error(error);

11
styles.css
View File

@ -44,14 +44,13 @@ a:has(.openGraphPreview):hover {
border-radius: 0 !important;
}
.openGraphPreview .se-oglink-info-container {
display: flex;
flex-direction: column;
justify-content: center;
gap: 4px;
overflow: auto;
padding: var(--size-4-3) var(--size-4-2);
}
.openGraphPreview .se-oglink-info {
display: block;
text-decoration: none;
color: var(--text-normal);
}
.openGraphPreview .se-oglink-summary {
font-size: 0.8rem;
overflow: hidden;
@ -61,14 +60,12 @@ a:has(.openGraphPreview):hover {
-webkit-box-orient: vertical;
text-overflow: ellipsis;
white-space: normal;
text-decoration: none;
color: var(--text-normal);
}
.openGraphPreview .se-oglink-url {
font-size: 0.8rem;
margin-block: 0 !important;
color: var(--link-color);
text-decoration: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;