129 lines
5.0 KiB
TypeScript
129 lines
5.0 KiB
TypeScript
import { requestUrl } from "obsidian";
|
|
import { decode } from 'iconv-lite';
|
|
|
|
interface ogData {
|
|
"ogTitle": string,
|
|
"ogDescription": string,
|
|
"ogImage": string,
|
|
"ogImageAlt": string,
|
|
"ogUrl": string
|
|
}
|
|
|
|
const OGDATACHACHE = "ogDataCache"
|
|
// 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})?(\\/.*)?$");
|
|
|
|
// 로컬데이터 접근
|
|
function getLocalOgData(url: string) {
|
|
const data = localStorage.getItem(OGDATACHACHE + url);
|
|
if (data) {
|
|
const ogData: ogData = JSON.parse(data);
|
|
return ogData;
|
|
}
|
|
}
|
|
|
|
async function saveLocalOgData(url:string, ogData: ogData) {
|
|
const imgUrl = ogData.ogImage;
|
|
if (imgUrl !== "") {
|
|
const lastDot = imgUrl.lastIndexOf(".");
|
|
let imgType = imgUrl.substring(lastDot + 1, imgUrl.length).toLowerCase();
|
|
|
|
const file = await requestUrl({url:imgUrl, contentType: `image/${imgType}`});
|
|
const fileArrayBuffer = file.arrayBuffer;
|
|
// 방법 1) blob 변환
|
|
// const fileBlob = new Blob([fileArrayBuffer], { type: `image/${imgType}`});
|
|
|
|
// // 파일 리더 생성
|
|
// const reader = new FileReader();
|
|
// reader.readAsDataURL(fileBlob);
|
|
// let base64String = "";
|
|
// reader.onloadend = () => {
|
|
// const base64 = reader.result;
|
|
// if (typeof base64 === "string") base64String = base64;
|
|
// };
|
|
|
|
// 방법 2) ArrayBuffer 자체를 base64로 변환
|
|
const uint8 = new Uint8Array(fileArrayBuffer);
|
|
const base64String = btoa(uint8.reduce((data, byte)=> {
|
|
return data + String.fromCharCode(byte);
|
|
}, ''));
|
|
if (imgType.includes("svg")) imgType += "+xml";
|
|
ogData.ogImage = `data:image/${imgType};charset=utf-8;base64,` + base64String;
|
|
}
|
|
|
|
// 저장하기 전에 img 데이터를 url-> blob -> base64로 변환 후 저장
|
|
localStorage.setItem(OGDATACHACHE + url, JSON.stringify(ogData));
|
|
}
|
|
|
|
|
|
async function getOgData(url: string) {
|
|
const urlArr = urlRegex.exec(url);
|
|
if (urlArr) {
|
|
try {
|
|
const response = await requestUrl(url);
|
|
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/');
|
|
}
|
|
|
|
// 인코딩 문제 해결
|
|
const bodyArrayBuffer = response.arrayBuffer;
|
|
const contentType = response.headers["content-type"].toLowerCase().trim();
|
|
const charset = contentType.substring(contentType.indexOf("charset=") + 8, contentType.length);
|
|
let body;
|
|
if (charset === "utf-8") {
|
|
body = Buffer.from(bodyArrayBuffer).toString('utf-8');
|
|
} else {
|
|
body = decode(Buffer.from(bodyArrayBuffer), charset);
|
|
}
|
|
|
|
const parser = new DOMParser();
|
|
const document = parser.parseFromString(body, 'text/html');
|
|
|
|
const ogTitle = document.querySelector("meta[property='og:title']")?.getAttribute("content") || document.querySelector("title")?.textContent || "";
|
|
const ogDescription = document.querySelector("meta[property='og:description']")?.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;
|
|
|
|
const data: ogData = {
|
|
"ogTitle": ogTitle,
|
|
"ogDescription": ogDescription,
|
|
"ogImage": ogImage,
|
|
"ogImageAlt": ogImageAlt,
|
|
"ogUrl": ogUrl
|
|
}
|
|
|
|
await saveLocalOgData(url, data);
|
|
return data;
|
|
} catch (error) {
|
|
console.error(error);
|
|
}
|
|
}
|
|
}
|
|
|
|
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 = getLocalOgData(url) || await getOgData(url);
|
|
if (data) {
|
|
const result = renderOgData(data);
|
|
return result;
|
|
}
|
|
return null;
|
|
}
|