Make website example nice on mobile again

packages/site/index.html

@@ -31,31 +31,34 @@
  </div>
  <div class="example">
  <pre><code class="language-javascript">import * as rose from "rose";
-import { Dual, Real, Vec, add, compile, div, fn, mul, opaque, vjp } from "rose";
+import { Real, Vec, fn } from "rose";
+import { pow } from "./pow.js";
 
-const log = opaque([Real], Real, Math.log);
-log.jvp = fn([Dual], Dual, ({ re: x, du: dx }) => {
- return { re: log(x), du: div(dx, x) };
-});
+const Vec2 = Vec(2, Real);
+const Mat2 = Vec(2, Vec2);
 
-const pow = opaque([Real, Real], Real, Math.pow);
-pow.jvp = fn([Dual, Dual], Dual, ({ re: x, du: dx }, { re: y, du: dy }) => {
- const z = pow(x, y);
- return { re: z, du: mul(add(mul(dx, div(y, x)), mul(dy, log(x))), z) };
+const f = fn([Vec2], Real, (v) => {
+ return pow(v[0], v[1]);
 });
 
-const Vec2 = Vec(2, Real);
-const Mat2 = Vec(2, Vec2);
+const g = fn([Vec2], Vec2, (v) => {
+ return rose.vjp(f)(v).grad(1);
+});
 
-const f = fn([Vec2], Real, (v) => pow(v[0], v[1]));
-const g = fn([Vec2], Vec2, (v) => vjp(f)(v).grad(1));
 const h = fn([Vec2], Mat2, (v) => {
- const { grad } = vjp(g)(v);
+ const { grad } = rose.vjp(g)(v);
  return [grad([1, 0]), grad([0, 1])];
 });
 
-const funcs = await Promise.all([compile(f), compile(g), compile(h)]);
-console.log(funcs.map((func) => func([2, 3])));</code></pre>
+const l = await Promise.all([
+ rose.compile(f),
+ rose.compile(g),
+ rose.compile(h),
+]);
+
+export default (x, y) => {
+ return l.map((func) => func([x, y]));
+};</code></pre>
  </div>
  <div class="bottom">
  <a href="https://github.com/rose-lang/rose-icons">icons</a> by