docs: add Bandada repository link to the API docs (closes #403)

[intldds]

Description

The idea is to add the Bandada GitHub repository link to the API Docs: https://api.bandada.pse.dev/

I've added it on the top right of the page, just like in the Bandada Dashboard: https://bandada.pse.dev/

Related Issue

#403

Does this introduce a breaking change?

• Yes
• No

Other information

Before:

After:

Note: I have only added a customJsStr attribute including the word "Github" and the hyperlink to the repository. Additionally, I've added the GitHub icon (just like in https://bandada.pse.dev/). To render the icon, it was tricky to use React components directly to the DOM using vanilla JavaScript. Therefore, I've create the icon using an inline SVG representation of the GitHub icon ("GitHub Octicons"). For future reference, it should be easier to change font-size, color, or any other attribute since everything is inside customJsStr

[0xjei]

Hello @intldds and thank you for working on this.

Can you check colors, size and position of the icon? Looks weird on my browser

ps. remember to run yarn lint && yarn prettier:write before pushing the code.

[vplasencia]

Hey! Great work! Thank you so much! To add it to the top right in the header and in a way that the page is still responsive, and the link will open a new window, you could do something like this:

const configUI = {
        swaggerOptions: { defaultModelsExpandDepth: -1 },
        customfavIcon:
            "https://raw.githubusercontent.com/privacy-scaling-explorations/bandada/main/apps/dashboard/src/assets/favicon.ico",
        customSiteTitle: "Bandada API Docs",
        customCss: `.topbar-wrapper img {content:url('https://raw.githubusercontent.com/privacy-scaling-explorations/bandada/d5268274cbb93f73a1960e131bff0d2bf1eacea9/apps/dashboard/src/assets/icon1.svg'); width:60px; height:auto;}
        .swagger-ui .topbar { background-color: transparent; } small.version-stamp { display: none !important; }`,
        customJsStr: `
    // Add a custom title to the right side of the Swagger UI page
    document.addEventListener('DOMContentLoaded', function() {
        const customTitle = document.createElement('div');
        customTitle.style.position = 'absolute';
        customTitle.style.top = '27px';
        customTitle.style.padding = '10px';
        customTitle.style.color = 'black';
        customTitle.style.fontSize = '18px';
        customTitle.style.padding = '0 20px';
        customTitle.style.maxWidth = '1460px';
        customTitle.style.display = 'flex';
        customTitle.style.justifyContent = 'end';
        customTitle.style.width = '100%';
        

        // Create a hyperlink element
        const link = document.createElement('a');
        link.href = 'https://github.com/privacy-scaling-explorations/bandada';
        link.rel = 'noreferrer noopener nofollow';
        link.target = '_blank'
        link.style.color = 'grey';
        link.style.display = 'flex';

        // Create a text node for the link text
        const linkText = document.createTextNode('Github');

        // Append the text node to the link
        link.appendChild(linkText);

        // Create an SVG element for the GitHub icon
        const githubIcon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
        githubIcon.setAttribute('width', '24');
        githubIcon.setAttribute('height', '24');
        githubIcon.setAttribute('viewBox', '0 0 20 20');
        githubIcon.setAttribute('fill', 'currentColor');

        const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
        path.setAttribute('d', 'M8 .153C3.589.153 0 3.742 0 8.153c0 3.436 2.223 6.358 5.307 7.408.387.071.53-.168.53-.374 0-.185-.007-.674-.01-1.322-2.039.445-2.47-.979-2.47-.979-.334-.849-.815-1.075-.815-1.075-.667-.457.05-.448.05-.448.739.052 1.13.76 1.13.76.656 1.124 1.719.799 2.134.61.067-.478.256-.8.466-.98-1.63-.184-3.34-.815-3.34-3.627 0-.8.287-1.457.754-1.969-.076-.185-.327-.932.072-1.943 0 0 .618-.198 2.03.752a6.74 6.74 0 0 1 1.8-.245c.61.003 1.226.082 1.8.245 1.41-.95 2.027-.752 2.027-.752.4 1.011.148 1.758.073 1.943.47.512.754 1.17.754 1.969 0 2.82-1.712 3.44-3.35 3.623.264.227.497.672.497 1.356 0 .977-.009 1.764-.009 2.004 0 .207.141.449.544.373C13.775 14.511 16 11.59 16 8.154 16 3.743 12.411 .154 8 .154z');

        // Append the path to the GitHub icon
        githubIcon.appendChild(path);

        // Append the GitHub icon to the link
        link.insertBefore(githubIcon, link.firstChild);

        // Apply some padding to create space between the icon and the text
        link.style.paddingLeft = '8px';

        // Append the link to the custom title
        customTitle.appendChild(link);

        const parentDiv = document.createElement('div');
        parentDiv.style.display = 'flex';
        parentDiv.style.justifyContent = 'center';
        parentDiv.style.width = 'auto';


        parentDiv.appendChild(customTitle)

        document.body.appendChild(parentDiv);
    });
`
    };

[intldds]

I've pushed a new commit based on @vplasencia code -- it should be responsive by now :)

@0xjei I've ran yarn lint && yarn prettier:write and I didn't get any warning coming from the file I've modified, let me know if it looks good on your browser now (hopefully it does!)

[vplasencia]

It looks great! Thank you so much ✨

[aguzmant103]

Thanks for the contribution! @gitpoap-bot @intldds

[gitpoap-bot]

Congrats, @intldds ! You've earned a GitPOAP for your contribution!

GitPOAP: 2024 Bandada Contributor:

Head to gitpoap.io & connect your GitHub account to mint!

Learn more about GitPOAPs here.