/ tutorials / laplace-dirichlet
Sign in
tutorials / laplace-dirichlet
laplace-dirichlet / src / ui / LibraryView.tsx
39 lines · 1.5 KBCodeBlameHistory
088be4cAn interactive tutorial on the Dirichlet problem, accuracy against costJeremy Magland 1// The shared .m files, shown read-only. The editable script in each lab is
2// the method itself; these are the pieces every lab is allowed to assume.
3import { useState } from 'react'
5const raw = import.meta.glob('../matlab/*.m', { query: '?raw', import: 'default', eager: true }) as Record<
6 string,
7 string
8>
10const FILES = Object.entries(raw)
11 .map(([path, content]) => ({ name: path.slice(path.lastIndexOf('/') + 1), content }))
12 .sort((a, b) => a.name.localeCompare(b.name))
14export default function LibraryView() {
15 const [open, setOpen] = useState<string | null>(FILES[0]?.name ?? null)
16 return (
17 <article className="chapter">
18 <header className="chapter-head">
19 <div className="chapter-part">Reference</div>
20 <h2>The shared MATLAB library</h2>
21 <p className="chapter-blurb">
22 Every lab boots with these function files in its session, alongside the editable script and a driver that
23 reads the controls and writes the figures. They are the small pieces that would otherwise be repeated in
24 every chapter.
25 </p>
26 </header>
27 <div className="lib-list">
28 {FILES.map((f) => (
29 <div className="lib-file" key={f.name}>
30 <button className="lib-name" onClick={() => setOpen(open === f.name ? null : f.name)}>
31 {open === f.name ? '▾' : '▸'} {f.name}
32 </button>
33 {open === f.name && <pre className="lib-src">{f.content}</pre>}
34 </div>
35 ))}
36 </div>
37 </article>
38 )
↑↓ move↵openescclose