viewof ddg = fetchPage("https://duckduckgo.com", "ddg")
ddg.innerHTML
fetchPageContent = async (url) => {
const el = document.createElement("html");
el.innerHTML = await fetch(
"https://corsproxy.io/?" + encodeURIComponent(url)
).then((res) => res.text());
return el;
}
fetchPage = async (url, opts = {}) => {
if (typeof opts === "string") {
opts = { cellName: opts };
}
const { cellName } = opts;
const content = await fetchPageContent(url);
const view = html`
<span style="display: inline-flex; align-items: center">
${
cellName
? `<code style="margin-right: 0.75em;">${cellName} =</code>`
: ""
}
<img
height="14"
style="margin-right: 0.5em;"
onerror="this.remove()"
src="${new URL(
content
.querySelector('[rel="shortcut icon"], [rel="icon"]')
?.getAttribute("href") ?? "/favicon.ico",
url
)}"
/>
<a href="${url}" target="_blank" style="margin-right: 0.5em;">
${content.querySelector("title").textContent}
</a>
<code style="opacity: 0.75;">${url}</code>
</a>
`;
view.value = content;
return view;
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
