github-readme-stats | : zap : Dynamically generated stats for your github readmes | Generator Utils library
kandi X-RAY | github-readme-stats Summary
Support
Quality
Security
License
Reuse
- Run a pull request .
- Calculate the rank of a score .
- Helper function to return a stats object .
- Retrieves the top - level languages for a repository .
- Fetches a repository from a repository .
- Returns icon colors for the given card .
- Measures the given text .
- Wrap text with multiline characters
- Find a comment in an octet
- normal distribution function
github-readme-stats Key Features
github-readme-stats Examples and Code Snippets
Trending Discussions on github-readme-stats
Trending Discussions on github-readme-stats
QUESTION
I want to create a badge for Github README (like this for example). I created a function to get the GET value from URL using JavaScript and put it in the SVG, that works when I tried it in local but if I put it in a Markdown file it doesn't change the number.
index.svg:
I started
programming
5
years ago
script.js:
function changeNumber() {
document.getElementById("years-number").textContent = getValue;
}
let getValue;
window.addEventListener("load", function () {
let name="years";
if(name=(new RegExp('[?&]'+encodeURIComponent(name)+'=([^&]*)')).exec(location.search))
getValue = decodeURIComponent(name[1]);
changeNumber();
});
Output in the browser: correct output
Output in markdown (correct one): wrong output
How can I fix it?
ANSWER
Answered 2021-Sep-14 at 18:21You can create a serverless function using template svg and pupa.
Svg file:
...svg
{years}
...svg
Server side code:
// https://stackoverflow.com/questions/69164294/create-a-github-badge
import pupa from 'pupa'
import { readFileSync } from 'fs'
import { join } from 'path'
import { dirname } from 'dirname-filename-esm'
const __dirname = dirname(import.meta)
const template = readFileSync(join(__dirname, '../badge.svg'), 'utf8')
export default (req, res) => {
let { years } = req.query
if (typeof years !== 'string') return res.status(400).end()
res.setHeader('Content-Type', 'text/xml')
res.end(pupa(template, { years }))
}
I used Vercel to deploy the serverless function. There are ways other than Vercel too.
Link to repl: https://replit.com/@Programmerraj/serverless-api#api/index.js
Link to live example: https://serverless-api-ebon.vercel.app/api?years=6 (change years to be anything).
Link to GitHub repo: https://github.com/ChocolateLoverRaj/serverless-api.
Preview written in markdown in this answer:
QUESTION
How would I go about creating PNG templates that I could pass data or information to so that it would show in the Image? For clarification, I'm thinking of something similar to how GitHub README Stats works, but with PNGs instead of SVGs. Or how widgets work for Discord's Widget Images (e.g. https://discordapp.com/api/guilds/guildID/widget.png?style=banner1).
If there isn't a library for this kind of thing what would it take to make one? (I need a time sink, so I'm pretty keen on making something, even if it only fits my needs).
ANSWER
Answered 2021-Jan-29 at 05:33You can use PIL
from PIL import Image, ImageDraw, ImageFont #Import PIL functions
class myTemplate(): #Your template
def __init__(self, name, description, image):
self.name=name #Saves Name input as a self object
self.description=description #Saves Description input as a self object
self.image=image #Saves Image input as a self object
def draw(self):
"""
Draw Function
------------------
Draws the template
"""
img = Image.open(r'C:\foo\...\template.png', 'r').convert('RGB') #Opens Template Image
if self.image != '':
pasted = Image.open(self.image).convert("RGBA") #Opens Selected Image
pasted=pasted.resize((278, int(pasted.size[1]*(278/pasted.size[0])))) #Resize image to width fit black area's width
pasted=pasted.crop((0, 0, 278, 322)) #Crop height
img.paste(pasted, (31, 141)) #Pastes image into template
imgdraw=ImageDraw.Draw(img) #Create a canvas
font=ImageFont.truetype("C:/Windows/Fonts/Calibril.ttf", 48) #Loads font
imgdraw.text((515,152), self.name, (0,0,0), font=font) #Draws name
imgdraw.text((654,231), self.description, (0,0,0), font=font) #Draws description
img.save(r'C:\foo\...\out.png') #Saves output
amaztemp=myTemplate('Hello, world!', 'Hi there', r'C:\foo\...\images.jfif')
amaztemp.draw()
PIL is an Image Manipulation library, it can edit images like GIMP with Python (but its more limited).
In this code we declare a class called myTemplate, that will be our template, inside this class we have two functions, one will initialize the class, and request name, description and image, and the other will draw.
Well, from line 13 to 15, the program imports and verifies if there is a selected image, if yes it crops and resizes the selected image (16 and 17), then pastes the selected image in the template.
After this, name and description are drawn, then the program saves the file.
You can customize teh class and the line 26 for your needs
QUESTION
I was just updating my profile readme on Github, but i had a issue. I need to align two elements side by side vertically, but, when I tried to use CSS, I just found out that it's impossible to use style attr on Github's Markdown files. So, how can I align two elements side by side, vertically, without CSS? My code:
Minhas Estátisticas no Github
I want align these two p tags
ANSWER
Answered 2021-Jan-03 at 20:49You use p tags which are block element by default if want to make these two images align side by side remove p tags from your code
Minhas Estátisticas no Github
Note: I used the p tag to make more space between the summary title and the details
You can also use tables if want but it's not very useful in this situation. Here a good guide to using tables in markdown
QUESTION
Hi I am working on a StackApp called Stack Exchange Readme Stats
It works as the following:
The markdown:
The codebase
However using the markdown above will only output the alt texts.
I was wondering why something like below does render the svg
This is made by anuraghazra
ANSWER
Answered 2020-Nov-04 at 10:44So I had the idea that the issue might be the image in the SVG. This idea came from the fact that the GitHub stats made by anuraghazra do not contain any images. So I worked on a feature that you can turn off the image and that it will show your user name:
Only finding out with testing on GitHub that I forgot the s in the https. Now my SVG worked with http. I noticed it because the other 2 SVGs I wanted to add had https in the link. Those with https only showed the alt text unregarded that I requested the SVGs without the image.
SVGs won't always work with https in the request link on GitHub. As user @bk2204 commented that it was a certificate issue. Is true since they do work with http.
QUESTION
I wish the two images on the readme file were vertically aligned, but I don't understand why on Github it is not succeeding.
How can I do it through markup languages?
Result:
Link: Github
ANSWER
Answered 2020-Jul-27 at 17:48Let flexbox do the work for you. No need for the alignment on the images themselves; use align-items: flex-start on the container to align both images to the top.
Community Discussions, Code Snippets contain sources that include Stack Exchange Network
Vulnerabilities
No vulnerabilities reported
Install github-readme-stats
Support
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items
Find more librariesExplore Kits - Develop, implement, customize Projects, Custom Functions and Applications with kandi kits
Save this library and start creating your kit
Share this Page
