Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Change badges in README (shown at the top and in the example) to use markdown syntax #1670

Open
3 tasks done
FireIsGood opened this issue Jan 27, 2024 · 0 comments
Open
3 tasks done
Labels
discussion Discussions about the proposal of an emoji.

Comments

@FireIsGood
Copy link

Discussion

The badges in the current README have an underline between them as they use a tags and a p with center to center them.

I'm unsure to whether this is fixable in other ways, but I found that replacing them with markdown tags and a div with center makes the underline disappear, as noted in other repository READMEs like Astro or Bacon.

Example

Here is a picture of the issue:

image
Google Chrome
image
Firefox

You can note an underline between the links. This corresponds to the link on the left. I'm not sure why my Google Chrome doesn't render the emojis...

Here is what changing to inline markdown links looks like:

image
Google Chrome
image
Firefox

The underline is gone.

Technical Details

The exact changes are as follows:

- <p align="center">
-	<a href="https://github.com/carloscuesta/gitmoji/actions?query=workflow%3ACI+branch%3Amaster">
- 		<img src="https://img.shields.io/github/actions/workflow/status/carloscuesta/gitmoji/ci.yml?branch=master&style=flat-square"
- 			 alt="Build Status">
- 	</a>
- 	<a href="https://gitmoji.dev">
- 		<img src="https://img.shields.io/badge/gitmoji-%20😜%20😍-FFDD67.svg?style=flat-square"
- 			 alt="Gitmoji">
- 	</a>
- </p>
+ <div align="center">
+ 
+ [![Build Status](https://img.shields.io/github/actions/workflow/status/carloscuesta/gitmoji/ci.yml?branch=master&style=flat-square)](https://github.com/carloscuesta/gitmoji/actions?query=workflow%3ACI+branch%3Amaster)
+ [![Gitmoji](https://img.shields.io/badge/gitmoji-%20😜%20😍-FFDD67.svg?style=flat-square)](https://gitmoji.dev)
+ 
+ </div>

This change will not affect the accessibility of the HTML generated as the Alt properties are added through the markdown format. One possible issue is that the emoji in the second link are converted to percent-encoded.

There is also the slight concern that the new markdown will have required newlines between the HTML and markdown. I'm not sure if this is a good thing or a bad thing, but it's definitely a thing.

If these changes seem good, I have a fork of this repository with the updated top badges and example.

Additional Notes

I'm unsure if I should follow the local testing guideline if I make a commit just to fix the README as there would be no code changes. Would this be a 💄, or a 📝? I'm not sure.

Validations

@FireIsGood FireIsGood added the discussion Discussions about the proposal of an emoji. label Jan 27, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
discussion Discussions about the proposal of an emoji.
Projects
None yet
Development

No branches or pull requests

1 participant