add API explorer page (under /api)

src/fetch-elem-images.ts

@@ -1,7 +1,7 @@
 /* eslint-disable no-console */
 import fs from 'node:fs'
 import sharp from 'sharp'
-import elements from './lib/element/data.js'
+import elements from './lib/element/data'
 
 // make sure the directory exists
 fs.mkdirSync(`./static/elements`, { recursive: true })

src/lib/api.ts

@@ -1,6 +1,4 @@
-export const summary_bucket = `https://materialsproject-build.s3.amazonaws.com/collections/2022-10-28/summary`
-export const task_bucket = `https://materialsproject-parsed.s3.amazonaws.com/tasks`
-export const bonds_bucket = `https://materialsproject-build.s3.amazonaws.com/collections/2022-10-28/bonds`
+export const aws_bucket = `https://materialsproject-build.s3.amazonaws.com/collections/2022-10-28`
 
 export async function decompress(blob: ReadableStream<Uint8Array> | null) {
   // @ts-expect-error - TS doesn't know about DecompressionStream yet
@@ -12,20 +10,15 @@ export async function decompress(blob: ReadableStream<Uint8Array> | null) {
 export async function fetch_zipped<T>(
   url: string,
   { unzip = true } = {}
-): Promise<T | Blob | undefined> {
-  try {
-    const response = await fetch(url)
-    if (!response.ok) {
-      throw new Error(
-        `${response.status} ${response.statusText} for ${response.url}`
-      )
-    }
-    if (!unzip) return await response.blob()
-    return JSON.parse(await decompress(response.body))
-  } catch (error) {
-    console.error(error)
-    alert(error.message)
+): Promise<T> {
+  const response = await fetch(url)
+  if (!response.ok) {
+    throw new Error(
+      `${response.status} ${response.statusText} for ${response.url}`
+    )
   }
+  if (!unzip) return await response.blob()
+  return JSON.parse(await decompress(response.body))
 }
 
 // Function to download data to a file

src/lib/index.ts

@@ -6,6 +6,7 @@ export { default as Nucleus } from './Nucleus.svelte'
 export * from './element'
 export { default as element_data } from './element/data'
 export * from './labels'
+export * from './material'
 export * from './periodic-table'
 export * from './plot'
 export * from './structure'

src/lib/material/index.ts

@@ -1,4 +1,6 @@
-import type { PymatgenStructure } from '..'
+import type { PymatgenStructure } from '$lib'
+
+export { default as MaterialCard } from './MaterialCard.svelte'
 
 export type BuilderMeta = {
   emmet_version: string

src/lib/structure/StructureCard.svelte

@@ -32,19 +32,19 @@
         {pretty_num(volume, `.1f`)} ų
         <small>
           &nbsp; ({pretty_num(volume / structure?.sites.length, `.1f`)} ų/atom)
-        </small></span
-      >
+        </small>
+      </span>
     </strong>
     <strong>
       Density:
       <span class="value">{density(structure)} g/cm³</span>
     </strong>
     <strong>
-      Lattice lengths (a, b, c):
-      <span class="value">{pretty_num(a)} Å, {pretty_num(b)} Å, {pretty_num(c)} Å</span>
+      Lattice lengths a, b, c:
+      <span class="value">{pretty_num(a)}, {pretty_num(b)}, {pretty_num(c)} Å</span>
     </strong>
     <strong>
-      Lattice angles (α, β, γ):
+      Lattice angles α, β, γ:
       <span class="value">
         {pretty_num(alpha)}°, {pretty_num(beta)}°, {pretty_num(gamma)}°
       </span>

src/routes/mp-[slug]/+page.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
   import { page } from '$app/stores'
-  import { Structure, StructureCard } from '$lib'
-  import { download, fetch_zipped, summary_bucket } from '$lib/api'
+  import { MaterialCard, Structure, StructureCard } from '$lib'
+  import { aws_bucket, download, fetch_zipped } from '$lib/api'
 
   export let data
 
   let mp_id: string = `mp-${$page.params.slug}`
   $: href = `https://materialsproject.org/materials/${mp_id}`
-  $: aws_url = `${summary_bucket}/${mp_id}.json.gz`
+  $: aws_url = `${aws_bucket}/summary/${mp_id}.json.gz`
 </script>
 
 <main>
@@ -48,6 +48,7 @@
   <StructureCard structure={data.summary.structure}>
     <a slot="title" {href}>{mp_id}</a>
   </StructureCard>
+  <MaterialCard material={data.summary} />
   <Structure structure={data.summary.structure} />
 </main>
 

src/routes/mp-[slug]/+page.ts

@@ -1,11 +1,11 @@
-import { fetch_zipped, summary_bucket } from '$lib/api.js'
-import type { SummaryDoc } from '$lib/material/index.js'
+import { aws_bucket, fetch_zipped } from '$lib/api.ts'
+import type { SummaryDoc } from '$lib/material/index.ts'
 
 export const prerender = false
 
 export const load = async ({ params }) => {
   const file = `mp-${params.slug}.json.gz`
-  const summary_url = `${summary_bucket}/${file}`
+  const summary_url = `${aws_bucket}/summary/${file}`
 
   return {
     summary: fetch_zipped<SummaryDoc>(summary_url),

tests/bohr-atoms.test.ts

@@ -1,5 +1,5 @@
 import { expect, test } from '@playwright/test'
-import element_data from '../src/lib/element/data.js'
+import element_data from '../src/lib/element/data'
 
 test.describe(`Bohr Atoms page`, () => {
   test(`lists all elements`, async ({ page }) => {

tests/element-detail-pages.test.ts

@@ -1,5 +1,5 @@
 import { expect, test } from '@playwright/test'
-import element_data from '../src/lib/element/data.js'
+import element_data from '../src/lib/element/data.ts'
 
 test.describe(`Element detail page`, async () => {
   test(`has periodicity plot`, async ({ page }) => {

tests/periodic-table.test.ts

@@ -1,5 +1,5 @@
 import { expect, test } from '@playwright/test'
-import element_data from '../src/lib/element/data.js'
+import element_data from '../src/lib/element/data.ts'
 import {
   categories,
   category_counts,