Show code examples on usage site

[DevGajjar28]

#89
/claim #89
This PR adds a feature to the jscad-fiber usage site that allows users to view the code for each example.

I have created a user-friendly interface that is easy to use and understand. After reviewing the [Quickstart guide]
(https://docs.tscircuit.com/quickstart), I decided to adopt the same theme and organization to ensure better performance and consistency. Also I followed best practices for code quality, ensuring that it is easy to use, understand, reusable, and easily extendable for future additions.

Preview :


Uploading jscad-fiber - Google Chrome 2024-11-06 13-57-57.mp4…

[seveibar]

this will be impossible to maintain. The user should not have to add their code as a string to a file. The code should be loaded automatically

[DevGajjar28]

this will be impossible to maintain. The user should not have to add their code as a string to a file. The code should be loaded automatically

hey @seveibar just to clarify, do you need only the main code, like this:

Or would you like me to include the imports as well?
If a complete code example with imports is needed, I could add the code as a string in each example file. Here’s what that would look like:

import React from 'react';
import { Circle } from '../lib';
import { JsCadFixture } from '../lib/components/jscad-fixture';
import Example from './Example';

const CircleExample = () => {
const designCode = `
import { Circle } from "../lib";
import { JsCadFixture } from "../lib/components/jscad-fixture";

export default () => (



);
`;

return (

{/* JSX part (the design) */}




);
};

export default CircleExample;

Could you let me know which approach you’d prefer?"

[DevGajjar28]

@seveibar I have changed as you said to maintain a code and user should be able to easy to add, code is automatically loaded from Examples.

[seveibar]

It is not acceptable to adapt JSX to convert it to code. Use a cosmos or vite plugin

#91 (comment)

[seveibar]

@DevGajjar28 your solution looks similar to @anas-sarkez , you may want to have a quick chat on the discord. @anas-sarkez has been DM'ing me regarding his designs so I'm more inclined to accept his solution if you both PR at the same time. You both have the same issue where you're not actually loading source file content.