Show code examples on usage site

examples/array-based-subtraction.fixture.tsx

@@ -1,7 +1,10 @@
+import Example from "src/Example"
+import { designCodeArray } from "src/designCode"
 import { JsCadFixture } from "../lib/components/jscad-fixture"
-import { Colorize, Cuboid, Sphere, Subtract } from "../lib/jscad-fns"
+import { Cuboid, Subtract } from "../lib/jscad-fns"
 
 export default () => (
+  <Example designCode={designCodeArray}>
   <JsCadFixture zAxisUp showGrid>
     <Subtract>
       <Cuboid size={[10, 5, 2]} />
@@ -10,4 +13,5 @@ export default () => (
       ))}
     </Subtract>
   </JsCadFixture>
+  </Example>
 )

examples/circle.fixture.tsx

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

examples/colorize.fixture.tsx

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

examples/cone.fixture.tsx

@@ -1,7 +1,10 @@
-import { CylinderElliptic } from "../lib"
-import { JsCadFixture } from "../lib/components/jscad-fixture"
+import { designCodeCone } from "src/designCode";
+import Example from "src/Example";
+import { CylinderElliptic } from "../lib";
+import { JsCadFixture } from "../lib/components/jscad-fixture";
 
 export default () => (
+  <Example designCode={designCodeCone}>
   <JsCadFixture wireframe>
     <CylinderElliptic
       height={5}
@@ -14,4 +17,5 @@ export default () => (
       center={[0, 5, 5]}
     />
   </JsCadFixture>
+  </Example>
 )

examples/cube.fixture.tsx

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

examples/cuboid.fixture.tsx

@@ -1,8 +1,12 @@
-import { Cuboid } from "../lib"
-import { JsCadFixture } from "../lib/components/jscad-fixture"
+import { designCodeCuboid } from "src/designCode";
+import Example from "src/Example";
+import { Cuboid } from "../lib";
+import { JsCadFixture } from "../lib/components/jscad-fixture";
 
 export default () => (
+  <Example designCode={designCodeCuboid}>
   <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,12 @@
-import { Sphere } from "../lib"
-import { JsCadFixture } from "../lib/components/jscad-fixture"
+import { designCodeCustomSphere } from "src/designCode";
+import Example from "src/Example";
+import { Sphere } from "../lib";
+import { JsCadFixture } from "../lib/components/jscad-fixture";
 
 export default () => (
+  <Example designCode={designCodeCustomSphere}>
   <JsCadFixture wireframe>
     <Sphere radius={10} segments={64} />
   </JsCadFixture>
+  </Example>
 )

examples/custom-torus.fixture.tsx

@@ -1,7 +1,10 @@
-import { Torus } from "../lib"
-import { JsCadFixture } from "../lib/components/jscad-fixture"
+import { designCodeCustomTorus } from "src/designCode";
+import Example from "src/Example";
+import { Torus } from "../lib";
+import { JsCadFixture } from "../lib/components/jscad-fixture";
 
 export default () => (
+  <Example designCode={designCodeCustomTorus}>
   <JsCadFixture wireframe>
     <Torus
       innerRadius={15}
@@ -13,4 +16,5 @@ export default () => (
       startAngle={0}
     />
   </JsCadFixture>
+  </Example>
 )

examples/custom.fixture.tsx

@@ -1,14 +1,18 @@
-import { booleans, primitives } from "@jscad/modeling"
-import { Custom } from "../lib"
-import { JsCadFixture } from "../lib/components/jscad-fixture"
+import { booleans, primitives } from "@jscad/modeling";
+import { designCodeCustom } from "src/designCode";
+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 intersected = booleans.subtract(cube, sphere)
 
 export default () => (
+    <Example designCode={designCodeCustom}>
   <JsCadFixture>
     <Custom geometry={intersected} />
   </JsCadFixture>
+  </Example>
 )

examples/cylinder.fixture.tsx

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

examples/ellipsoid.fixture.tsx

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

examples/extrude-from-slices.fixture.tsx

@@ -1,6 +1,8 @@
-import { ExtrudeFromSlices } from "../lib"
-import { JsCadFixture } from "../lib/components/jscad-fixture"
-import jscad from "@jscad/modeling"
+import jscad from "@jscad/modeling";
+import { designCodeExtrudeFromSlices } from "src/designCode";
+import Example from "src/Example";
+import { ExtrudeFromSlices } from "../lib";
+import { JsCadFixture } from "../lib/components/jscad-fixture";
 
 const { bezier } = jscad.curves
 const { circle, line, polygon, rectangle, roundedRectangle, star } =
@@ -20,6 +22,7 @@ const xCurve = bezier.create([1, 1.8, 0.4, 1])
 const yCurve = bezier.create([1, 1.8, 0.5])
 
 export default () => (
+  <Example designCode={designCodeExtrudeFromSlices}>
   <JsCadFixture zAxisUp showGrid>
     <ExtrudeFromSlices
       numberOfSlices={10}
@@ -53,4 +56,5 @@ export default () => (
       }}
     />
   </JsCadFixture>
+  </Example>
 )

examples/extrude-linear.fixture.tsx

@@ -1,8 +1,12 @@
-import { JsCadFixture } from "../lib/components/jscad-fixture"
-import { ExtrudeLinear } from "../lib/jscad-fns"
-import { Polygon } from "../lib/jscad-fns/polygon"
+import { designCodeExtrudeLinear } from "src/designCode";
+import Example from "src/Example";
+import { JsCadFixture } from "../lib/components/jscad-fixture";
+import { ExtrudeLinear } from "../lib/jscad-fns";
+import { Polygon } from "../lib/jscad-fns/polygon";
 
 export default () => (
+    <Example designCode={designCodeExtrudeLinear}>
+
   <JsCadFixture>
     <ExtrudeLinear height={2} color="lightgreen" center={[0, 0, 4]}>
       <Polygon
@@ -18,4 +22,5 @@ export default () => (
       />
     </ExtrudeLinear>
   </JsCadFixture>
+  </Example>
 )

examples/extrude-rectangular.fixture.tsx

@@ -1,8 +1,11 @@
+import { designCodeExtrudeRectangular } from "src/designCode"
+import Example from "src/Example"
 import { JsCadFixture } from "../lib/components/jscad-fixture"
 import { ExtrudeRectangular } from "../lib/jscad-fns"
 import { Polygon } from "../lib/jscad-fns/polygon"
 
 export default () => (
+  <Example designCode={designCodeExtrudeRectangular}>
   <JsCadFixture>
     <ExtrudeRectangular
       size={10}
@@ -23,4 +26,5 @@ export default () => (
       />
     </ExtrudeRectangular>
   </JsCadFixture>
+  </Example>
 )

examples/high-geodesic-sphere.fixture.tsx

@@ -1,7 +1,10 @@
+import { designCodeHighGeodesicsphere } from "src/designCode"
+import Example from "src/Example"
 import { GeodesicSphere } from "../lib"
 import { JsCadFixture } from "../lib/components/jscad-fixture"
 
 export default () => (
+<Example designCode={designCodeHighGeodesicsphere}>
   <JsCadFixture wireframe>
     <GeodesicSphere
       radius={10}
@@ -10,4 +13,5 @@ export default () => (
       center={[10, 5, 0]}
     />
   </JsCadFixture>
+</Example>
 )

examples/hull-chain.fixture.tsx

@@ -1,12 +1,16 @@
+import { designCodeHullChain } from "src/designCode"
+import Example from "src/Example"
 import { Cuboid, Ellipsoid, HullChain } from "../lib"
 import { JsCadFixture } from "../lib/components/jscad-fixture"
 
 export default () => (
+  <Example designCode={designCodeHullChain}>
   <JsCadFixture>
     <HullChain color="lightgreen" center={[0, 0, -10]}>
       <Cuboid size={[10, 10, 10]} />
       <Ellipsoid radius={[10, 10, 12]} center={[0, 0, 10]} />
       <Cuboid size={[10, 10, 10]} center={[0, 0, 20]} />
     </HullChain>
   </JsCadFixture>
+  </Example>
 )

examples/hull.fixture.tsx

@@ -1,11 +1,15 @@
-import { Cuboid, Ellipsoid, Hull, Translate } from "../lib"
+import { designCodeHull } from "src/designCode"
+import Example from "src/Example"
+import { Cuboid, Ellipsoid, Hull } from "../lib"
 import { JsCadFixture } from "../lib/components/jscad-fixture"
 
 export default () => (
+  <Example designCode={designCodeHull}>
   <JsCadFixture>
     <Hull color="lightblue" center={[0, -5, -10]}>
       <Cuboid size={[10, 10, 10]} />
       <Ellipsoid radius={[10, 10, 10]} center={[0, 0, 15]} />
     </Hull>
   </JsCadFixture>
+  </Example>
 )

examples/low-geodesic-sphere.fixture.tsx

@@ -1,8 +1,12 @@
+import { designCodeGeodesicSphere } from "src/designCode"
+import Example from "src/Example"
 import { GeodesicSphere } from "../lib"
 import { JsCadFixture } from "../lib/components/jscad-fixture"
 
 export default () => (
+  <Example designCode={designCodeGeodesicSphere}>
   <JsCadFixture wireframe>
     <GeodesicSphere radius={10} frequency={6} />
   </JsCadFixture>
+  </Example>
 )

examples/partial-cylindrical-elliptic.fixture.tsx

@@ -1,8 +1,11 @@
+import { designCodeCylinderElliptic } from "src/designCode"
+import Example from "src/Example"
 import { CylinderElliptic } from "../lib"
 import { JsCadFixture } from "../lib/components/jscad-fixture"
 
 export default () => (
-  <JsCadFixture wireframe>
+<Example designCode={designCodeCylinderElliptic}>
+ <JsCadFixture wireframe>
     <CylinderElliptic
       height={6}
       startRadius={[1, 2]}
@@ -12,4 +15,5 @@ export default () => (
       endAngle={Math.PI / 2}
     />
   </JsCadFixture>
+</Example>
 )

examples/polygon.fixture.tsx

@@ -1,7 +1,10 @@
+import { designCodePolygon } from "src/designCode"
+import Example from "src/Example"
 import { JsCadFixture } from "../lib/components/jscad-fixture"
 import { Polygon } from "../lib/jscad-fns/polygon"
 
 export default () => (
+  <Example designCode={designCodePolygon}>
   <JsCadFixture>
     <Polygon
       points={[
@@ -15,4 +18,5 @@ export default () => (
       ]}
     />
   </JsCadFixture>
+  </Example>
 )

examples/project.fixture.tsx

@@ -1,8 +1,11 @@
+import { designCodeProject } from "src/designCode"
+import Example from "src/Example"
 import { JsCadFixture } from "../lib/components/jscad-fixture"
 import { Project } from "../lib/jscad-fns"
 import { Polygon } from "../lib/jscad-fns/polygon"
 
 export default () => (
+    <Example designCode={designCodeProject}>
   <JsCadFixture>
     <Project axis={[0, 0, 1]} origin={[0, 0, 0]}>
       <Polygon
@@ -18,4 +21,5 @@ export default () => (
       />
     </Project>
   </JsCadFixture>
+  </Example>
 )

examples/rectangle.fixture.tsx

@@ -1,8 +1,13 @@
+import { designCodeRectangle } from "src/designCode"
+import Example from "src/Example"
 import { Rectangle } from "../lib"
 import { JsCadFixture } from "../lib/components/jscad-fixture"
 
+
 export default () => (
+    <Example designCode={designCodeRectangle}>
   <JsCadFixture>
     <Rectangle size={[10, 20]} />
   </JsCadFixture>
+</Example>
 )