Update LinkThumbnailWidgetParams.ts
This commit is contained in:
parent
b943ba02c9
commit
0ecba57dc8
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue