Update LinkThumbnailWidgetParams.ts

This commit is contained in:
kim365my 2024-04-08 16:42:34 +09:00
parent b943ba02c9
commit 0ecba57dc8
1 changed files with 46 additions and 23 deletions

View File

@ -1,28 +1,32 @@
import { requestUrl } from "obsidian"; import { requestUrl } from "obsidian";
import { decode } from 'iconv-lite'; import { decode } from 'iconv-lite';
interface ogData {
"ogTitle": string,
"ogDescription": string,
"ogImage": string,
"ogImageAlt": string,
"ogUrl": string
}
// url 정규식 // url 정규식
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) { async function getOgData(url: string) {
const urlArr = urlRegex.exec(url); const urlArr = urlRegex.exec(url);
if (urlArr) { if (urlArr) {
try { try {
const response = await requestUrl(url);
const response = await requestUrl({
url:url,
throw: true
});
if (response && response.headers && response.headers['content-type'] && !response.headers['content-type']?.includes('text/')) { if (response && response.headers && response.headers['content-type'] && !response.headers['content-type']?.includes('text/')) {
throw new Error('Page must return a header content-type with text/'); throw new Error('Page must return a header content-type with text/');
} }
// 인코딩 문제 해결 // 인코딩 문제 해결
const bodyArrayBuffer = response.arrayBuffer; const bodyArrayBuffer = response.arrayBuffer;
const charset = response.headers["content-type"].replace("text/html;charset=","").toLowerCase(); const contentType = response.headers["content-type"].toLowerCase().trim();
const charset = contentType.substring(contentType.indexOf("charset=") + 8, contentType.length);
let body; let body;
if (charset.trim() === "utf-8") { if (charset === "utf-8") {
body = Buffer.from(bodyArrayBuffer).toString('utf-8'); body = Buffer.from(bodyArrayBuffer).toString('utf-8');
} else { } else {
body = decode(Buffer.from(bodyArrayBuffer), charset); body = decode(Buffer.from(bodyArrayBuffer), charset);
@ -41,20 +45,39 @@ export async function LinkThumbnailWidgetParams(url: string) {
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;
const result = ` const data: ogData = {
<div class="openGraphPreview"> "ogTitle": ogTitle,
${(ogImage === "")? "" : `<div class="se-oglink-thumbnail"><img src="${ogImage}" alt="${ogImageAlt}" class="se-oglink-thumbnail-resource"></img></div>`} "ogDescription": ogDescription,
<div class="se-oglink-info-container"> "ogImage": ogImage,
<strong class="se-oglink-info">${ogTitle}</strong> "ogImageAlt": ogImageAlt,
<description class="se-oglink-summary">${ogDescription}</description> "ogUrl": ogUrl
<p class="se-oglink-url">${ogUrl}</p> }
</div>
</div> return data;
`
return result;
} catch (error) { } catch (error) {
throw new Error(error); console.error(error);
} }
} }
return null }
function renderOgData(data:ogData) {
return `
<div class="openGraphPreview">
${(data?.ogImage === "")? "" : `<div class="se-oglink-thumbnail"><img src="${data?.ogImage}" alt="${data?.ogImageAlt}" class="se-oglink-thumbnail-resource"></img></div>`}
<div class="se-oglink-info-container">
<strong class="se-oglink-info">${data?.ogTitle}</strong>
<description class="se-oglink-summary">${data?.ogDescription}</description>
<p class="se-oglink-url">${data?.ogUrl}</p>
</div>
</div>
`;
}
export async function LinkThumbnailWidgetParams(url: string) {
const data = await getOgData(url);
if (data) {
const result = renderOgData(data);
return result;
}
return null;
} }