jimniels · April 22, 2022 21:38
diff --git a/ephmeralist.html b/ephmeralist.html
 <!DOCTYPE html>
 <title>Ephemeralist</title>
 <style>
  body {
    max-width: 800px;
    font-family: sans-serif;
  }
  img {
    max-width: 100%;
    height: auto;
  }
 </style>
 <h1>Ephemeralist</h1>
 <form action="./ephemeralist.html">
  <input type="text" name="q" placeholder="search..." />
  <button type="submit">Go</button>
 </form>
 <output></output>

 <script type="module">
  const render = (html) => {
    document.querySelector("output").innerHTML = html;
  };

  const params = new URLSearchParams(window.location.search);
  const q = params.get("q");

  if (q) {
    document.querySelector("input").value = q;

    // http://edan.si.edu/openaccess/apidocs/#api-_footer
    fetch(
      `https://api.si.edu/openaccess/api/v1.0/category/science_technology/search?q=${encodeURIComponent(
        q
      )}&api_key=NJBkMwgTSqtCYC8gn9ZojCeXCJWMqS8a8WHaqnai`
    )
      .then((res) => res.json())
      .then((json) => {
        const data = json.response.rows;
        render(`
          <h2>${data.length} results</h2>
          ${data
            .map((item) => {
              try {
                const title = item.title;
                const src =
                  item.content.descriptiveNonRepeating.online_media.media[0]
                    .thumbnail;
                const content = item.content.freetext.notes[0].content;
                return {
                  title,
                  src,
                  content,
                };
              } catch (e) {
                return undefined;
              }
            })
            .filter((item) => item)
            .map(
              ({ content, title, src }) => `
              <div>
                <h3>${title}</h3>
                <img src="${src}" />
                ${content ? `<p>${content}</p>` : ""}
              </div>
              <hr />
            `
            )
            .join("")}
      `);
      })
      .catch((e) => {
        console.error(e);
        render(`<h2>Error retrieving and publishing results</h2>`);
      });
  }
 </script>
	<!DOCTYPE html>
	<title>Ephemeralist</title>
	<style>
	body {
	max-width: 800px;
	font-family: sans-serif;
	}
	img {
	max-width: 100%;
	height: auto;
	}
	</style>
	<h1>Ephemeralist</h1>
	<form action="./ephemeralist.html">
	<input type="text" name="q" placeholder="search..." />
	<button type="submit">Go</button>
	</form>
	<output></output>

	<script type="module">
	const render = (html) => {
	document.querySelector("output").innerHTML = html;
	};

	const params = new URLSearchParams(window.location.search);
	const q = params.get("q");

	if (q) {
	document.querySelector("input").value = q;

	// http://edan.si.edu/openaccess/apidocs/#api-_footer
	fetch(
	`https://api.si.edu/openaccess/api/v1.0/category/science_technology/search?q=${encodeURIComponent(
	q
	)}&api_key=NJBkMwgTSqtCYC8gn9ZojCeXCJWMqS8a8WHaqnai`
	)
	.then((res) => res.json())
	.then((json) => {
	const data = json.response.rows;
	render(`
	<h2>${data.length} results</h2>
	${data
	.map((item) => {
	try {
	const title = item.title;
	const src =
	item.content.descriptiveNonRepeating.online_media.media[0]
	.thumbnail;
	const content = item.content.freetext.notes[0].content;
	return {
	title,
	src,
	content,
	};
	} catch (e) {
	return undefined;
	}
	})
	.filter((item) => item)
	.map(
	({ content, title, src }) => `
	<div>
	<h3>${title}</h3>
	<img src="${src}" />
	${content ? `<p>${content}</p>` : ""}
	</div>
	<hr />
	`
	)
	.join("")}
	`);
	})
	.catch((e) => {
	console.error(e);
	render(`<h2>Error retrieving and publishing results</h2>`);
	});
	}
	</script>