Show code examples on usage site

examples/array-based-subtraction.fixture.tsx

@@ -1,13 +1,16 @@
-import { JsCadFixture } from "../lib/components/jscad-fixture"
-import { Colorize, Cuboid, Sphere, Subtract } from "../lib/jscad-fns"
+import Example from "src/Example";
+import { JsCadFixture } from "../lib/components/jscad-fixture";
+import { Cuboid, Subtract } from "../lib/jscad-fns";
 
 export default () => (
-  <JsCadFixture zAxisUp showGrid>
-    <Subtract>
-      <Cuboid size={[10, 5, 2]} />
-      {[-4, -2, 0, 2, 4].map((value, index) => (
-        <Cuboid key={index} center={[value, 0, 0]} size={[1, 1, 4]} />
-      ))}
-    </Subtract>
-  </JsCadFixture>
-)
+  <Example>
+    <JsCadFixture zAxisUp showGrid>
+      <Subtract>
+        <Cuboid size={[10, 5, 2]} />
+        {[-4, -2, 0, 2, 4].map((value, index) => (
+          <Cuboid key={index} center={[value, 0, 0]} size={[1, 1, 4]} />
+        ))}
+      </Subtract>
+    </JsCadFixture>
+  </Example>
+);

examples/circle.fixture.tsx

@@ -1,8 +1,11 @@
-import { Circle } from "../lib"
-import { JsCadFixture } from "../lib/components/jscad-fixture"
+import Example from "src/Example";
+import { Circle } from "../lib";
+import { JsCadFixture } from "../lib/components/jscad-fixture";
 
 export default () => (
-  <JsCadFixture>
-    <Circle radius={10} />
-  </JsCadFixture>
-)
+  <Example>
+    <JsCadFixture>
+      <Circle radius={10} />
+    </JsCadFixture>
+  </Example>
+);

examples/colorize.fixture.tsx

@@ -1,10 +1,13 @@
-import { JsCadFixture } from "../lib/components/jscad-fixture"
-import { Colorize, Cube } from "../lib/jscad-fns"
+import Example from "src/Example";
+import { JsCadFixture } from "../lib/components/jscad-fixture";
+import { Colorize, Cube } from "../lib/jscad-fns";
 
 export default () => (
-  <JsCadFixture>
-    <Colorize color={"red"}>
-      <Cube size={10} />
-    </Colorize>
-  </JsCadFixture>
-)
+  <Example>
+    <JsCadFixture>
+      <Colorize color={"red"}>
+        <Cube size={10} />
+      </Colorize>
+    </JsCadFixture>
+  </Example>
+);

examples/cone.fixture.tsx

@@ -1,17 +1,20 @@
-import { CylinderElliptic } from "../lib"
-import { JsCadFixture } from "../lib/components/jscad-fixture"
+import Example from "src/Example";
+import { CylinderElliptic } from "../lib";
+import { JsCadFixture } from "../lib/components/jscad-fixture";
 
 export default () => (
-  <JsCadFixture wireframe>
-    <CylinderElliptic
-      height={5}
-      startRadius={[2, 2]}
-      endRadius={[0, 0]}
-      segments={32}
-      startAngle={0}
-      endAngle={Math.PI * 2}
-      color="green"
-      center={[0, 5, 5]}
-    />
-  </JsCadFixture>
-)
+  <Example>
+    <JsCadFixture wireframe>
+      <CylinderElliptic
+        height={5}
+        startRadius={[2, 2]}
+        endRadius={[0, 0]}
+        segments={32}
+        startAngle={0}
+        endAngle={Math.PI * 2}
+        color="green"
+        center={[0, 5, 5]}
+      />
+    </JsCadFixture>
+  </Example>
+);

examples/cube.fixture.tsx

@@ -1,8 +1,11 @@
-import { Cube } from "../lib"
-import { JsCadFixture } from "../lib/components/jscad-fixture"
+import Example from "src/Example";
+import { Cube } from "../lib";
+import { JsCadFixture } from "../lib/components/jscad-fixture";
 
 export default () => (
-  <JsCadFixture>
-    <Cube size={10} color="orange" center={[0, 0, 10]} />
-  </JsCadFixture>
-)
+  <Example>
+    <JsCadFixture>
+      <Cube size={10} color="orange" center={[0, 0, 10]} />
+    </JsCadFixture>
+  </Example>
+);

examples/cuboid.fixture.tsx

@@ -1,8 +1,11 @@
-import { Cuboid } from "../lib"
-import { JsCadFixture } from "../lib/components/jscad-fixture"
+import Example from "src/Example";
+import { Cuboid } from "../lib";
+import { JsCadFixture } from "../lib/components/jscad-fixture";
 
 export default () => (
-  <JsCadFixture zAxisUp showGrid>
-    <Cuboid color="blue" offset={{ x: 0, y: 0, z: 0 }} size={[15, 10, 10]} />
-  </JsCadFixture>
-)
+  <Example>
+    <JsCadFixture zAxisUp showGrid>
+      <Cuboid color="blue" offset={{ x: 0, y: 0, z: 0 }} size={[15, 10, 10]} />
+    </JsCadFixture>
+  </Example>
+);

examples/custom-sphere.fixture.tsx

@@ -1,8 +1,11 @@
-import { Sphere } from "../lib"
-import { JsCadFixture } from "../lib/components/jscad-fixture"
+import Example from "src/Example";
+import { Sphere } from "../lib";
+import { JsCadFixture } from "../lib/components/jscad-fixture";
 
 export default () => (
-  <JsCadFixture wireframe>
-    <Sphere radius={10} segments={64} />
-  </JsCadFixture>
-)
+  <Example>
+    <JsCadFixture wireframe>
+      <Sphere radius={10} segments={64} />
+    </JsCadFixture>
+  </Example>
+);

examples/custom-torus.fixture.tsx

@@ -1,16 +1,19 @@
-import { Torus } from "../lib"
-import { JsCadFixture } from "../lib/components/jscad-fixture"
+import Example from "src/Example";
+import { Torus } from "../lib";
+import { JsCadFixture } from "../lib/components/jscad-fixture";
 
 export default () => (
-  <JsCadFixture wireframe>
-    <Torus
-      innerRadius={15}
-      outerRadius={20}
-      innerSegments={64}
-      outerSegments={96}
-      innerRotation={Math.PI}
-      outerRotation={Math.PI / 2}
-      startAngle={0}
-    />
-  </JsCadFixture>
-)
+  <Example>
+    <JsCadFixture wireframe>
+      <Torus
+        innerRadius={15}
+        outerRadius={20}
+        innerSegments={64}
+        outerSegments={96}
+        innerRotation={Math.PI}
+        outerRotation={Math.PI / 2}
+        startAngle={0}
+      />
+    </JsCadFixture>
+  </Example>
+);

examples/custom.fixture.tsx

@@ -1,14 +1,17 @@
-import { booleans, primitives } from "@jscad/modeling"
-import { Custom } from "../lib"
-import { JsCadFixture } from "../lib/components/jscad-fixture"
+import { booleans, primitives } from "@jscad/modeling";
+import Example from "src/Example";
+import { Custom } from "../lib";
+import { JsCadFixture } from "../lib/components/jscad-fixture";
 
-const cube = primitives.cube({ size: 10 })
-const sphere = primitives.sphere({ radius: 6, segments: 32 })
+const cube = primitives.cube({ size: 10 });
+const sphere = primitives.sphere({ radius: 6, segments: 32 });
 
-const intersected = booleans.subtract(cube, sphere)
+const intersected = booleans.subtract(cube, sphere);
 
 export default () => (
-  <JsCadFixture>
-    <Custom geometry={intersected} />
-  </JsCadFixture>
-)
+  <Example>
+    <JsCadFixture>
+      <Custom geometry={intersected} />
+    </JsCadFixture>
+  </Example>
+);

examples/cylinder.fixture.tsx

@@ -1,15 +1,18 @@
-import { Cylinder } from "../lib"
-import { JsCadFixture } from "../lib/components/jscad-fixture"
+import Example from "src/Example";
+import { Cylinder } from "../lib";
+import { JsCadFixture } from "../lib/components/jscad-fixture";
 
 export default () => (
-  <JsCadFixture showGrid zAxisUp>
-    <Cylinder
-      radius={5}
-      height={10}
-      color="#F7E8AA"
-      center={[-20, 0, 0]}
-      rotation={["90deg", 0, 0]}
-    />
-    <Cylinder radius={5} height={10} color="#F7E8AA" center={[20, 0, 0]} />
-  </JsCadFixture>
-)
+  <Example>
+    <JsCadFixture showGrid zAxisUp>
+      <Cylinder
+        radius={5}
+        height={10}
+        color="#F7E8AA"
+        center={[-20, 0, 0]}
+        rotation={["90deg", 0, 0]}
+      />
+      <Cylinder radius={5} height={10} color="#F7E8AA" center={[20, 0, 0]} />
+    </JsCadFixture>
+  </Example>
+);

examples/ellipsoid.fixture.tsx

@@ -1,8 +1,11 @@
-import { Ellipsoid } from "../lib"
-import { JsCadFixture } from "../lib/components/jscad-fixture"
+import Example from "src/Example";
+import { Ellipsoid } from "../lib";
+import { JsCadFixture } from "../lib/components/jscad-fixture";
 
 export default () => (
-  <JsCadFixture wireframe>
-    <Ellipsoid radius={[15, 10, 10]} color="brown" center={[0, 0, 10]} />
-  </JsCadFixture>
-)
+  <Example>
+    <JsCadFixture wireframe>
+      <Ellipsoid radius={[15, 10, 10]} color="brown" center={[0, 0, 10]} />
+    </JsCadFixture>
+  </Example>
+);

examples/extrude-from-slices.fixture.tsx

@@ -1,56 +1,59 @@
-import { ExtrudeFromSlices } from "../lib"
-import { JsCadFixture } from "../lib/components/jscad-fixture"
-import jscad from "@jscad/modeling"
+import jscad from "@jscad/modeling";
+import Example from "src/Example";
+import { ExtrudeFromSlices } from "../lib";
+import { JsCadFixture } from "../lib/components/jscad-fixture";
 
-const { bezier } = jscad.curves
+const { bezier } = jscad.curves;
 const { circle, line, polygon, rectangle, roundedRectangle, star } =
-  jscad.primitives
+  jscad.primitives;
 const { extrudeLinear, extrudeRotate, extrudeFromSlices, slice } =
-  jscad.extrusions
-const { mat4 } = jscad.maths
+  jscad.extrusions;
+const { mat4 } = jscad.maths;
 
 const baseSlice = slice.fromPoints([
   [2, 2],
   [-2, 2],
   [-2, -2],
   [2, -2],
-])
+]);
 
-const xCurve = bezier.create([1, 1.8, 0.4, 1])
-const yCurve = bezier.create([1, 1.8, 0.5])
+const xCurve = bezier.create([1, 1.8, 0.4, 1]);
+const yCurve = bezier.create([1, 1.8, 0.5]);
 
 export default () => (
-  <JsCadFixture zAxisUp showGrid>
-    <ExtrudeFromSlices
-      numberOfSlices={10}
-      capStart={true}
-      capEnd={true}
-      close={true}
-      repair={true}
-      baseSlice={baseSlice}
-      callback={function (progress, count, base) {
-        let newslice = slice.transform(
-          mat4.fromTranslation(mat4.create(), [0, 0, 10 * progress]),
-          baseSlice,
-        )
-        newslice = slice.transform(
-          mat4.fromScaling(mat4.create(), [
-            bezier.valueAt(progress, xCurve) as any,
-            bezier.valueAt(progress, yCurve) as any,
-            1,
-          ]),
-          newslice,
-        )
+  <Example>
+    <JsCadFixture zAxisUp showGrid>
+      <ExtrudeFromSlices
+        numberOfSlices={10}
+        capStart={true}
+        capEnd={true}
+        close={true}
+        repair={true}
+        baseSlice={baseSlice}
+        callback={function (progress, count, base) {
+          let newslice = slice.transform(
+            mat4.fromTranslation(mat4.create(), [0, 0, 10 * progress]),
+            baseSlice
+          );
+          newslice = slice.transform(
+            mat4.fromScaling(mat4.create(), [
+              bezier.valueAt(progress, xCurve) as any,
+              bezier.valueAt(progress, yCurve) as any,
+              1,
+            ]),
+            newslice
+          );
 
-        // Rotate the slice 90 degrees along the path
-        const rotationAngle = (Math.PI / 2) * progress // 90 degrees in radians
-        newslice = slice.transform(
-          mat4.fromXRotation(mat4.create(), rotationAngle),
-          newslice,
-        )
+          // Rotate the slice 90 degrees along the path
+          const rotationAngle = (Math.PI / 2) * progress; // 90 degrees in radians
+          newslice = slice.transform(
+            mat4.fromXRotation(mat4.create(), rotationAngle),
+            newslice
+          );
 
-        return newslice
-      }}
-    />
-  </JsCadFixture>
-)
+          return newslice;
+        }}
+      />
+    </JsCadFixture>
+  </Example>
+);