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

derberg commented 2 months ago

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 commented 2 weeks ago

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 commented 2 weeks ago

@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 commented 2 weeks ago

@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 commented 1 week ago

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

aeworxet commented 1 week ago

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

asyncapi / generator

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