0l1v3rr / github-readme-tech-stack Goto Github PK

We'd love to expand our themes with new, cool ones! If you have a fancy theme in mind or would like to see and design new themes, here are simple instructions on how to get started. (Here are the currently available themes.)

Requesting a theme

1. Open an issue describing your new theme. If possible, include an image. It can be a theme from another README card project.
2. Indicate in the issue if you want someone else to add the theme.

Adding the theme

1. Fork the repository
2. Clone your fork
3. Locate the themes.ts file
4. Set your theme colors using the themes.set() function
5. Add your new theme to the THEMES.md file
6. Commit and push your changes
7. Open a Pull Request containing your changes. Please also include a screenshot of your new theme in the PR.

themes.set() example:

// the theme name should be snake_case
themes.set("theme_name", {
  backgroundColor: "#ffffff", // the background color of the card
  borderColor: "#ffffff",     // the border color of the card
  titleColor: "#ffffff",      // the title color
  badgeColor: "#ffffff",      // the background color of the badges
});

Additional context

• Please follow the structure of the code and make sure the spacing and formatting is consistent.
• The theme will not display correctly in THEMES.md until it is deployed, but you can test it locally. Your added theme will be available when your PR is merged.
• Be sure to check the previously added themes to see if a similar (or identical) theme already exists.
• This issue should remain open, please do not mark it as fixed.

Describe the feature
In the project's README, we have a screenshot of the project's website. It would be great to replace it with a short GIF, so everyone could see a better preview of the project.

What should happen while playing the GIF:

1. Change the title to Demo Website
2. Select a good-looking dark theme from the dropdown
3. Add one or two badges (it's the little + under the Line 1 )
4. Click on the Generate button and wait until the preview changes

Here's a little checklist:

• In the README, the screenshot is replaced with the GIF and is exactly in the same position
• The GIF is uploaded in the docs/ folder and referred from there in the README
• The GIF is cropped, so only the site's main content is visible

Additional context
We are open to every idea. Feel free to give us any suggestions in the comment section, or by opening a new issue.

Complete the fetchBadge function. The function should do the following things:

• Using an axios request, fetch the SVG card from the URL. The URL is the one and only parameter of the function.
• Return back the SVG string using the return statement. (<svg>...</svg>)

Additional information:

• The URL is a shields.io badge, it's guaranteed
• If possible, avoid the async/await, use .then() instead

Describe the bug
The save button remains disabled until the text for the label and icon surpasses 4 characters. This behavior prohibits technologies like Git, Lit, etc. from being added as badges.

To Reproduce
Steps to reproduce the behavior:

1. Go to 'Line 1'
2. Click on '+' to add badge
3. Type 'Lit' on Icon and Badge label, and add any color (#324FFF for the Lit logo, for example)
4. Save button remains disabled

Expected behavior
Save button is enabled, able to save the badge

Screenshots

Additional context

We would like to expand our themes with new, cool ones! Here are the currently available themes.

If you would like to help us, here is a simple guide:

1. Fork the repository
2. Clone your fork
3. Search for the themes.ts file
4. Specify your theme colors using the themes.set() function
5. Display your new theme in the THEMES.md file
6. Commit and push your changes
7. Open a Pull Request that contains your changes

themes.set() example:

// the theme name should be snake_case
themes.set("theme_name", {
  backgroundColor: "#ffffff", // the background color of the card
  borderColor: "#ffffff",     // the border color of the card
  titleColor: "#ffffff",      // the title color
  badgeColor: "#ffffff",      // the background color of the badges
});

Additional context:

• If possible, include a screenshot from your theme when you open the PR to make the reviewer's job easier.
• Please follow the structure of the code.

Note
The theme won't show up correctly in the README until it's deployed, but you can test it locally. There is a shell script under the scripts/ folder, which helps you test it. Make sure you run it from the root folder.

Looks like the 'line' config is not persisting

Describe the feature

In our README, there is a GIF of the project's website. We would like to replace this GIF with a better-quality one. Also, the website has been updated with minor changes and we would like to show it off as well.

What should happen while recording the GIF

1. Change the title to Demo Website
2. Choose a nice dark theme from the drop-down menu
3. Add one or two badges (it's the little + below the Line 1 )
4. Click on the Generate button and wait until the preview changes. Make sure you wait 0.5-1 second after the card has generated itself so we can see the result.

Of course, you can include more actions to show off the site's features.

Checklist

• In the README, the old GIF is replaced with the new one and is exactly in the same position.
• The GIF is uploaded to the docs/ folder and referenced from there in the README.
• The GIF is cropped so that only the main content of the page is visible.
• The GIF is high quality and everything is clearly readable.

Additional context

• We are open to any ideas. Feel free to make suggestions in the comments section or by opening a new topic.
• If you want to start working on this task, please write a comment so I can assign you this issue.

Hey,

thank you for building this project. I was really enthusiastic when I saw this project and I would like to create a tech-stack-card for my profile. Unfortunatly, simple icons does not include all icons I would like to add (e.g. Seaborn). To handle this, I used custom .svg files from their website and added them to the card.

Depending on the file, the whole card did not show.

SVG that did not work: https://seaborn.pydata.org/_static/logo-wide-lightbg.svg

SVG that did work: https://docs.dask.org/en/stable/_images/dask_icon.svg

From my limited experience with the .svg format, I could not see any problems.

Any idea what might cause the problem?