Add option to display footer specified by user

[arifszn]

Add an option in the gitprofile.config.js titled footer.

const config = {
  // ..............
  footer: 'Custom footer'
};

Use this new config in src/components/GitProfile.jsx to display the footer.

Please follow the checklist:

• The footer should be optional
• Update Readme
• Update prop definition
• Update type definition in types/index.d.ts

[RachitGarg-12]

@arifszn i would like to contribute to this issue.

[arifszn]

@RachitGarg-12 any update?

[csarnataro]

Hi, I can have a look at this issue, if @RachitGarg-12 is ok with it.

I have one question about the functionality to implement.

Do you think it's ok to have a simple text-only footer (like the one in the example above, footer: 'Custom footer') or we should support markdown as well? So that we can add links in the footer and mix text and footer.

Moreover, if we go with the text-only solution, should we wrap the footer in a link? Like the current footer?
In that case, I think we should add another configuration like:

footer: 'Custom footer'
footerLink: 'https://github.com/username/`

Thoughts?

[arifszn]

It should accept HTML. So that user can have more control over what to display. Something like:

<React.Fragment>
  <a
    className="card-body"
    href="https://github.com/arifszn/gitprofile"
    target="_blank"
    rel="noreferrer"
  >
    <div>
      {loading ? (
        skeleton({ width: 'w-52', height: 'h-6' })
      ) : (
        <p className="font-mono text-sm">
          Made with <span className="text-primary">GitProfile</span> and ❤️
        </p>
      )}
    </div>
  </a>
</React.Fragment>;

[csarnataro]

Do you mean also JSX would be acceptable? I mean, also with {loading ? (..)} and JavaScript expressions?
To be honest, it seems a little bit "overkill" for me.

I think that probably regular HTML would give users enough power to add and format whatever they want. Like:

const config = {
  // ..............
  footer: `<a href="https://www.example.com" target="_blank" rel="noreferrer">
    <p class="font-mono text-sm">
      Custom footer added by <span class="text-primary">me</span> in <strong>2023</strong>
    </p>                   
  </a>`
};

Please notice use of class instead of className. The <div className="card-body"> is outside of the custom footer.

I did a quick experiment parsing a HTML text with html-react-parser (https://www.npmjs.com/package/html-react-parser) and I came up with this:

What do you think? If HTML is enough, I have a PR almost ready.

[arifszn]

Ignore the loading and jsx. But the loading skeleton should be handled too from the app side.

Do we need a library for it? How about using dangerouslySetInnerHTML? Any downside?

[csarnataro]

In general I don't love dangerouslySetInnerHTML but in this case I think it can be used safely, as long as the content of the footer is coming from the user.

[csarnataro]

This is what I achieved with dangerouslySetInnerHTML

A text-only footer looks like this:

And the loading skeleton looks like this:

I'm opening a PR in a few minutes.