viewof page = fetchPage('Wikipedia', /* cell name: */ 'page')
page.meta
fetchPageContent = async name => {
const el = parser.parseFromString(
await fetch(
'https://cors-anywhere.herokuapp.com/https://en.wikipedia.org/wiki/' +
name
).then(res => res.text()),
'text/html'
);
const article = el.querySelector('.mw-parser-output');
return article;
}
fetchPage = async (name, opts = {}) => {
if (typeof opts === 'string') {
opts = { cellName: opts };
}
const { cellName, lang = 'en' } = opts;
const [status, meta] = await fetch(
`https://${lang}.wikipedia.org/api/rest_v1/page/summary/${name}`
).then(async res => [res.status, await res.json()]);
if (status === 404) {
throw new Error(meta.detail);
}
return card({
cellName,
href: `https://${lang}.wikipedia.org/wiki/${name}`,
image: meta.originalimage ? meta.originalimage.source : null,
title: meta.displaytitle,
description:
meta.extract_html ||
html`
<em>${meta.description || 'No description provided'}</em>
`,
meta: html`
${userMeta({
avatar: 'https://www.wikipedia.org/static/favicon/wikipedia.ico',
name: wikipedias.find(({ code }) => lang === code).name,
href: 'https://en.wikipedia.org/'
})} • Updated ${dateMeta(meta.timestamp)}
`,
value: fetchPageContent(name).then(content =>
Object.assign(content, { meta })
),
maxWidth: Math.min(
350,
meta.thumbnail ? meta.thumbnail.width * 1.5 : Infinity,
width
),
imageFit:
meta.originalimage &&
(meta.originalimage.width / meta.originalimage.height < 4 / 3
? 'contain'
: 'cover')
});
}
parser = new DOMParser()
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.
