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

30
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})?(\\/.*)?$"); 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) { export async function LinkThumbnailWidgetParams(url: string) {
if (urlRegex.test(url)) { const urlArr = urlRegex.exec(url);
if (urlArr) {
try { try {
const response = await requestUrl(url); const response = await requestUrl(url);
const contextType = response.headers["content-type"]; 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 ogTitle = document.querySelector("meta[property='og:title']")?.getAttribute("content") || document.querySelector("title")?.textContent || "";
const ogDescription = document.querySelector("meta[property='og:description']")?.getAttribute("content") || ""; 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 ogImageAlt = document.querySelector("meta[property='og:image:alt']")?.getAttribute("content") || "";
const ogUrl = document.querySelector("meta[property='og:url']")?.getAttribute("content") || url; const ogUrl = document.querySelector("meta[property='og:url']")?.getAttribute("content") || url;
let result = ""; const result = `
if (ogImage === "") {
result = `
<div class="openGraphPreview"> <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"> <div class="se-oglink-info-container">
<strong class="se-oglink-info">${ogTitle}</strong> <strong class="se-oglink-info">${ogTitle}</strong>
<description class="se-oglink-summary">${ogDescription}</description> <description class="se-oglink-summary">${ogDescription}</description>
<p class="se-oglink-url"> ${ogUrl}</p> <p class="se-oglink-url">${ogUrl}</p>
</div> </div>
</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>
`
}
return result; return result;
} catch (error) { } catch (error) {
console.error(error); console.error(error);

11
styles.css
View File

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