https://jamesliaolab.org/page-history.js?v=9

1function HistoryTabs({
2  active
3}) {
4  const tabs = [{
5    slug: 'history-1990',
6    label: '1990'
7  }, {
8    slug: 'history-1991',
9    label: '1991–2000'
10  }, {
11    slug: 'history-2001',
12    label: '2001–2010'
13  }, {
14    slug: 'history-2011',
15    label: '2011–2020'
16  }, {
17    slug: 'history-2021',
18    label: '2021–'
19  }];
20  return React.createElement("div", {
21    style: {
22      display: 'flex',
23      padding: '0 48px',
24      borderBottom: '1px solid var(--rule)',
25      marginBottom: 48
26    }
27  }, tabs.map(t => React.createElement(Link, {
28    key: t.slug,
29    to: t.slug,
30    style: {
31      flex: 1,
32      padding: '18px 12px',
33      textAlign: 'center',
34      fontFamily: 'JetBrains Mono',
35      fontSize: 12,
36      letterSpacing: '0.14em',
37      color: active === t.slug ? 'var(--ink)' : 'var(--ink-soft)',
38      borderBottom: '2px solid ' + (active === t.slug ? 'var(--ink)' : 'transparent'),
39      marginBottom: -1,
40      transition: 'all 0.2s'
41    }
42  }, t.label)));
43}
44function HistoryPage({
45  slug,
46  dataKey
47}) {
48  const h = window.DATA.history[dataKey];
49  const order = ['1990', '1991-2000', '2001-2010', '2011-2020', '2021-present'];
50  const idx = order.indexOf(dataKey);
51  const prev = order[idx - 1];
52  const next = order[idx + 1];
53  const slugMap = {
54    '1990': 'history-1990',
55    '1991-2000': 'history-1991',
56    '2001-2010': 'history-2001',
57    '2011-2020': 'history-2011',
58    '2021-present': 'history-2021'
59  };
60  return React.createElement(PageShell, null, React.createElement(PageMast, {
61    eyebrow: `§ History — Chapter ${idx + 1} of 5 · ${h.span}`,
62    title: React.createElement(React.Fragment, null, h.title, React.createElement("span", {
63      style: {
64        color: 'var(--ink-soft)'
65      }
66    }, ".")),
67    subtitle: `The Liao Lab during ${h.span}. ${h.events.length} entries — papers, awards, hires, and the slow turn from biofuels toward carbon negative chemistry.`
68  }), React.createElement(HistoryTabs, {
69    active: slug
70  }), React.createElement("section", {
71    style: {
72      padding: '0 48px 80px'
73    }
74  }, React.createElement("div", {
75    style: {
76      display: 'grid',
77      gridTemplateColumns: '1fr 2fr',
78      gap: 64
79    }
80  }, React.createElement("div", {
81    style: {
82      position: 'sticky',
83      top: 96,
84      alignSelf: 'start'
85    }
86  }, React.createElement("div", {
87    className: "t-mono",
88    style: {
89      fontSize: 11,
90      color: 'var(--ink-soft)',
91      letterSpacing: '0.14em',
92      marginBottom: 14
93    }
94  }, "CHAPTER ", idx + 1, " / 5"), React.createElement("div", {
95    className: "t-serif",
96    style: {
97      fontSize: 140,
98      lineHeight: 0.9,
99      fontWeight: 300,
100      letterSpacing: '-0.04em'
101    }
102  }, h.span.split('–')[0]), h.span.includes('–') && React.createElement("div", {
103    className: "t-serif",
104    style: {
105      fontSize: 32,
106      lineHeight: 1,
107      fontWeight: 300,
108      fontStyle: 'italic',
109      color: 'var(--ink-soft)',
110      marginTop: 8
111    }
112  }, "\u2192 ", h.span.split('–')[1] || 'present'), React.createElement("p", {
113    className: "t-serif",
114    style: {
115      fontSize: 18,
116      fontWeight: 300,
117      lineHeight: 1.55,
118      marginTop: 32,
119      color: 'var(--ink-soft)'
120    }
121  }, h.events.length, " entries \xB7 ", h.title.toLowerCase())), React.createElement("div", {
122    style: {
123      position: 'relative'
124    }
125  }, React.createElement("div", {
126    style: {
127      position: 'absolute',
128      left: 11,
129      top: 12,
130      bottom: 12,
131      width: 1,
132      background: 'var(--rule)'
133    }
134  }), h.events.map((e, i) => React.createElement("div", {
135    key: i,
136    className: "fade-in",
137    style: {
138      position: 'relative',
139      paddingLeft: 40,
140      paddingBottom: 28,
141      borderBottom: i < h.events.length - 1 ? '1px solid var(--rule)' : 'none',
142      marginBottom: 8
143    }
144  }, React.createElement("div", {
145    style: {
146      position: 'absolute',
147      left: 0,
148      top: 6,
149      width: 22,
150      height: 22,
151      borderRadius: '50%',
152      background: 'var(--paper)',
153      border: '1.5px solid var(--ink)',
154      display: 'flex',
155      alignItems: 'center',
156      justifyContent: 'center'
157    }
158  }, React.createElement("div", {
159    style: {
160      width: 8,
161      height: 8,
162      borderRadius: '50%',
163      background: i === 0 ? 'var(--gfp)' : 'var(--ink-soft)'
164    }
165  })), React.createElement("div", {
166    className: "t-mono",
167    style: {
168      fontSize: 11,
169      letterSpacing: '0.14em',
170      color: 'var(--ink-soft)',
171      marginBottom: 6
172    }
173  }, e.year), React.createElement("p", {
174    className: "t-serif",
175    style: {
176      fontSize: 22,
177      lineHeight: 1.3,
178      fontWeight: 400
179    }
180  }, e.t)))))), React.createElement("section", {
181    style: {
182      padding: '0 48px 120px',
183      display: 'grid',
184      gridTemplateColumns: '1fr 1fr',
185      gap: 24
186    }
187  }, prev ? React.createElement(Link, {
188    to: slugMap[prev],
189    style: {
190      padding: 32,
191      border: '1px solid var(--ink)',
192      display: 'block',
193      transition: 'background 0.2s'
194    },
195    onMouseEnter: e => e.currentTarget.style.background = 'var(--paper-deep)',
196    onMouseLeave: e => e.currentTarget.style.background = 'transparent'
197  }, React.createElement("div", {
198    className: "t-mono",
199    style: {
200      fontSize: 10,
201      letterSpacing: '0.14em',
202      color: 'var(--ink-soft)',
203      marginBottom: 12
204    }
205  }, "\u2190 PREVIOUS CHAPTER"), React.createElement("div", {
206    className: "t-serif",
207    style: {
208      fontSize: 28,
209      fontWeight: 500,
210      lineHeight: 1.1
211    }
212  }, window.DATA.history[prev].title), React.createElement("div", {
213    className: "t-mono",
214    style: {
215      fontSize: 11,
216      color: 'var(--ink-soft)',
217      letterSpacing: '0.12em',
218      marginTop: 6
219    }
220  }, window.DATA.history[prev].span)) : React.createElement("div", null), next ? React.createElement(Link, {
221    to: slugMap[next],
222    style: {
223      padding: 32,
224      border: '1px solid var(--ink)',
225      display: 'block',
226      textAlign: 'right',
227      transition: 'background 0.2s'
228    },
229    onMouseEnter: e => e.currentTarget.style.background = 'var(--paper-deep)',
230    onMouseLeave: e => e.currentTarget.style.background = 'transparent'
231  }, React.createElement("div", {
232    className: "t-mono",
233    style: {
234      fontSize: 10,
235      letterSpacing: '0.14em',
236      color: 'var(--ink-soft)',
237      marginBottom: 12
238    }
239  }, "NEXT CHAPTER \u2192"), React.createElement("div", {
240    className: "t-serif",
241    style: {
242      fontSize: 28,
243      fontWeight: 500,
244      lineHeight: 1.1
245    }
246  }, window.DATA.history[next].title), React.createElement("div", {
247    className: "t-mono",
248    style: {
249      fontSize: 11,
250      color: 'var(--ink-soft)',
251      letterSpacing: '0.12em',
252      marginTop: 6
253    }
254  }, window.DATA.history[next].span)) : React.createElement("div", null)));
255}
256function Page_History1990() {
257  return React.createElement(HistoryPage, {
258    slug: "history-1990",
259    dataKey: "1990"
260  });
261}
262function Page_History1991() {
263  return React.createElement(HistoryPage, {
264    slug: "history-1991",
265    dataKey: "1991-2000"
266  });
267}
268function Page_History2001() {
269  return React.createElement(HistoryPage, {
270    slug: "history-2001",
271    dataKey: "2001-2010"
272  });
273}
274function Page_History2011() {
275  return React.createElement(HistoryPage, {
276    slug: "history-2011",
277    dataKey: "2011-2020"
278  });
279}
280function Page_History2021() {
281  return React.createElement(HistoryPage, {
282    slug: "history-2021",
283    dataKey: "2021-present"
284  });
285}
286window.Page_History1990 = Page_History1990;
287window.Page_History1991 = Page_History1991;
288window.Page_History2001 = Page_History2001;
289window.Page_History2011 = Page_History2011;
290window.Page_History2021 = Page_History2021;