[📑 Docs]: Improve documentation related to `File templates` feature

[derberg]

What Dev Docs changes are you proposing?

• we need to make it clear that https://github.com/asyncapi/generator/blob/master/docs/file-templates.md is a feature for Nunjucks render engine only
• we need a new document, or refactor the one about File templates and explain how to do the same in react

we have at least comparizon from the perspective of "template for templates". So we see file templates in use in https://github.com/asyncapi/template-for-generator-templates/tree/nunjucks/template/schemas in times of nunjucks and then after conversion to react https://github.com/asyncapi/template-for-generator-templates/blob/master/template/schemas/schema.js

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

[aeworxet]

Bounty Issue's service comment

Text labels: bounty/2024-Q3, bounty/medium, bounty/docs First assignment to third-party contributors: 2024-06-21 00:00:00 UTC+12:00 End Of Life after: 2024-07-31 23:59:59 UTC-12:00

@asyncapi/bounty_team

The Bounty Program is not a Mentorship Program. The accepted level of Bounty Program Participants is Middle/Senior.

Third-party contributors should coherently articulate how they are going to approach the resolution process when expressing a desire to work on this Bounty Issue.

[AayushSaini101]

@aeworxet @derberg I would like to work on this issue, Past doc PR: https://github.com/asyncapi/generator/pull/1061/files https://github.com/asyncapi/community/pull/1155/files Solution Step for the above issue:

• Split the File template into two parts Nonjuck and React Engine.
• Show different structure of component using React Engine.

To show List Channels of asyncapi document;

/* 
 * Here you can see example of complex operations. 
 * You can actually do whatever you want. It is important that the value returned from the function must be a string or a component.
 */
export function ListChannels({ channels, operationType = 'publish' }) {
  const namesList = Object.entries(channels)
    .map(([channelName, channel]) => {
      if (
        (operationType === 'publish' && channel.hasPublish()) || 
        (operationType === 'subscribe' && channel.hasSubscribe())
      ) {
        return  `<li><strong>${channelName}</strong></li>`;
      }
    })
    .filter(Boolean);

  return `
<h2>
  Channels that you can ${operationType} to
</h2>
<hr />
<br />
<div class="container mx-auto px-8">
  <ul class="list-disc">${namesList.join('')}</ul>
</div>
`;
}

To show info, server of asyncapi document:

const ReadmeTemplate = ({ asyncapi }) => {
  const { info, servers, } = asyncapi;

  return (
    <div>
      <h1>{info.title}</h1>
      <p>{info.description}</p>
      
      <h2>Servers</h2>
      <ul>
        {Object.entries(servers).map(([name, server]) => (
          <li key={name}>
            <strong>{name}</strong>: {server.url} ({server.protocol})
          </li>
        ))}
      </ul>


    </div>
  );
};

This would be structure to show rendering of different component in React Engine thanks

[aeworxet]

@AayushSaini101 You are already assigned to https://github.com/asyncapi/community/issues/1268 and expected to work on https://github.com/asyncapi/cli/issues/337 (@Amzani will assign you when he comes back from vacation,) so the limit or two simultaneous issues is reached.

[derberg]

@Florence-Njeri as maintainer of docs in this repo will work on this issue

[aeworxet]

Bounty Issue's Timeline

Complexity Level	Assignment Date (by GitHub)	Start Date (by BP Rules)	End Date (by BP Rules)	Draft PR Submission	Final PR Merge Start	Final PR Merge End
Medium	2024-06-21	2024-07-01	2024-08-11	2024-07-14	2024-07-28	2024-08-11

Please note that the dates given represent deadlines, not specific dates, so if the goal is reached sooner, it's better.

Keep in mind the responsibility for violations of the Timeline.

[derberg]

@Florence-Njeri yo, so how is it going, you need help?

[aeworxet]

Review for PR https://github.com/asyncapi/generator/pull/1230 was requested on 2024-08-06, and it is still in progress.

[aeworxet]

Response, critical for technical resolution of this Bounty Issue (review of the PR) was delayed for two periods of three consecutive working days https://github.com/asyncapi/generator/pull/1230#event-13774088750 https://github.com/asyncapi/generator/pull/1230#pullrequestreview-2236478397

so all remaining target dates of the Bounty Issue's Timeline are extended by three calendar weeks.

Bounty Issue's Timeline Extended

Complexity Level	Assignment Date (by GitHub)	Start Date (by BP Rules)	End Date (by BP Rules)	Draft PR Submission	Final PR Merge Start	Final PR Merge End
Medium	2024-06-21	2024-07-01	2024-09-01	2024-08-04	2024-08-18	2024-09-01

Please note that the dates given represent deadlines, not specific dates, so if the goal is reached sooner, it's better.

Keep in mind the responsibility for violations of the Timeline.

[derberg]

work completed with https://github.com/asyncapi/generator/pull/1230

[aeworxet]

Bounty Issue Is Completed 🎉

@Florence-Njeri, please go to the AsyncAPI page on Open Collective and submit an invoice for USD 200.00 with the expense title Bounty generator#1199, tag bounty, and full URL of this Bounty Issue in the description.