bloggify / github-calendar Goto Github PK
View Code? Open in Web Editor NEW:bar_chart: Embed your GitHub calendar everywhere.
Home Page: https://bloggify.github.io/github-calendar/example/
License: MIT License
:bar_chart: Embed your GitHub calendar everywhere.
Home Page: https://bloggify.github.io/github-calendar/example/
License: MIT License
The provided link is not loading. Please help. Thank you.
Could you make a gitlab version?
I've tried
GitHubCalendar(".calendar", "wit03", { responsive: true });
it still doesn't work
I tried running npm run release
, but uglify-js
was throwing a syntax error. I realized that I also needed babel-preset-es2015
for it to work. Then adding the preset in the release command works:
browserify lib/index.js -o dist/github-calendar.min.js -s GitHubCalendar && babel --presets es2015 dist/github-calendar.min.js | uglifyjs -c -m -o dist/github-calendar.min.js
Or, adding babel config to package.json:
"babel": {
"presets": ["es2015"]
}
I think it would be a good idea to have everything that the release command uses be declared in devDependencies in the package.json, something like:
"devDependencies": {
"babel-cli": "^6.8.0",
"babel-preset-es2015": "^6.6.0",
"browserify": "^13.0.0",
"uglify-js": "^2.6.2"
}
There could also be a note in the CONTRIBUTING.md
about this. 📝
Hi.
First comment in the source code example is
<!-- Prepare a container for your calendar. -->
and then script tag. Container itself is placed few lines lower, with the same comment.
And this is definely an erratum :)
The summary more or less says it all. I am using a code snippet I saw you provide against a Stackoverflow answer which I will show below;
<script src="https://cdn.rawgit.com/IonicaBizau/github-calendar/gh-pages/dist/github-calendar.min.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/IonicaBizau/github-calendar/gh-pages/dist/github-calendar.css"/>
<div class="calendar">Loading Github contributions.</div>
<script> new GitHubCalendar(".calendar", "rudikershaw");</script>
After the script finishes running on the page, the page tab ico is swapped out for the github logo. I'm going to look into this, but I am not holding up hope of finding a solution myself.
Browser: Firefox 70.0.1 (64-bit) for Ubuntu canonical - 1.0
OS: Ubuntu 18.04
Not sure if its just my setup, but all the urls are relative, so the links to repos actually go to (in my case) http://localhost:4567/jguthrie100/xyz instead of www.github.com/jguthrie100/xyz
Is it possible to color the colors for each contribution square? I tried modifying t.exports
(line 164) but that didn't work. I also updated where we grab the original code to return a new fill
value (line 175...), but that didn't work.
I'd like to request an unminified version of the script in the dist
directory for use with the rawgit cdn.
this can be fixed with a function or something similar:
function mydays(a) { return (a === 1) ? 'day' : 'days'; }
followed by
${mydays(parsed.longest_streak)
and ${mydays(parsed.current_streak)
instead of "days" inside the .
Developer console reports the next errors:
Browsers: Chrome 80.0.3987.87 (Official Build) (64-bit)
and Firefox 72.0.2 (64-bit)
all on macOs 11.15.3
https://cdn.rawgit.com/IonicaBizau/github-calendar/master/dist/github-calendar.min.js
to https://cdn.rawgit.com/IonicaBizau/github-calendar/gh-pages/dist/github-calendar.min.js
fixes the problem.Access to fetch at 'https://urlreq.appspot.com/req?method=GET&url=https://github.com/users/IonicaBizau/contributions' from origin 'https://ionicabizau.github.io' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
Getting the above error message from a couple of days. Could you please look into this?
It doesn't load in the script. It keeps the "Loading the data just for you.". This is on the codePen as well. It doesn't render properly.
Hi, I am building a GitHub page for myself with embedding this calendar into my source code, and I am customizing the styling definitions for the calendar elements.
The image bellow shows what it actually looks like in browser developing tool,
while this is the source code given to embed this GitHub calendar into the webpage,
Does anyone know how can I find the source code in the black rectangle, so I can redefine the styling definition for those elements ?
I know there are some of the styling attribute declaration can be found in the JavaScript code, while it is only partial are found by me. For example, how can I remove the styling attribute mx-3
in <div class="contrib-footer ...">
element?
Hi!
Is there a way to configure the initial date, finished date, instead of just 1 year?
Thank you
I think this three lines should also be added to github-calendar-responsive.css
because otherwise the contribution chart would display badly using the responsive stylesheet.
It shows Dec 1, 2018 – Dec 1, 2019 instead of Dec 2, 2018 – Dec 1, 2019.
The snippet won't show.
Line error: github-calendar.min.js:1:1667
TypeError: null is not an object (evaluating 'c.querySelector')
Tested in Safari and Firefox
Kind of key to have this listed in deps since it's the sole component responsible for releasing. I'd also highly recommend leveraging david
to keep your deps up to date.
On Chrome (v47.0.2526.106) I get a Mixed Content error preventing the Calendar from being loaded.
This can be fixed by clicking the 'Load Unsafe Scripts' button in the url bar.
I know you mentioned the proxy (urlreq) only supports HTTP, but is there a work-around for getting this to work on secure pages?
I would like to see a fully responsive tooltip for each day just like it does github where it shows you the amount of commits per day.
GitHub update interface of the contributions calendar on May 20, 2016. As part of this update, code streaks are no longer featured on the contributions calendar.
https://github.com/blog/2173-more-contributions-on-your-profile
But some codes related to code streaks are still existing in this project. Due to this, empty space is shown.
OS: OSX El Capitan 10.11.5, Browser: Safari 9.1.1
Hi All,
I'd like to add an option field for changing the rectangle colors.
GitHubCalendar(domObject, uName, { summary_text: 'blah', global_stats: true, responsive: true, base_color: '#FF5733' });
Base color would correspond to the current #239a3b slot (2nd to last). It would overwrite the last three values, leaving the base gray (#ebedf0) in place. Other colors would be calculated from the base color (darker, lighter).
The legend would also be changed to correspond.
I am loading the calendar using the example code in the README:
<!-- Prepare a container for your calendar. -->
<script
src="https://cdn.rawgit.com/IonicaBizau/github-calendar/gh-pages/dist/github-calendar.min.js"
</script>
<!-- Optionally, include the theme (if you don't want to struggle to write the CSS) -->
<link
rel="stylesheet"
href="https://cdn.rawgit.com/IonicaBizau/github-calendar/gh-pages/dist/github-calendar.css"
/>
<!-- Prepare a container for your calendar. -->
<div class="calendar">
<!-- Loading stuff -->
Loading the data just for you.
</div>
<script>
GitHubCalendar(".calendar", "palmerev");
</script>
When I first load the page, the basic contribution data loads into the calendar, but the grid doesn't load. I waited about 10 minutes, but the spinner just keeps spinning. If I refresh the page, then it loads immediately. If I visit the page again for the same user, then it always loads immediately.
The first page visit:
After refreshing, or visiting the page again:
I am running a local Python/Django development server.
The same thing happens when I visit this site, which has the calendar embedded. The first time I visited, no grid, and the spinner just spins. Refresh or visit again, and it loads correctly:
http://themes.3rdwavemedia.com/demo/developer/tom-najdek/
I can do this for any username and it's the same. The grid doesn't load the first time.
I've tested in Chrome and Firefox with 4 different usernames. Clearing browsing data has no effect.
UPDATE: It turns out that this also happens whenever a new contribution is made. If the response returns the spinner image instead of the grid SVG, then it won't change unless the request is made again. To fix this, it should test if the response contains the spinner image and if it does, make the request again. I can submit a pull request soon.
I'm trying to implement this module in my react.js application.
Here is my code.
It gives me error, can you help me resolving it?
It would be really nice if we can also provide color customization where we can generate graphs of different shades.
I think this project will be more awesome if it supports TypeScript. Actually, I wrote a type declaration file already, but I faced a little problem.
new
keyword can't use for function, so GitHubCalendar
function must be called like GithubCalendar(...)
not new GitHubCalendar(...)
.GitHubCalendar(...)
can't return the promise.What do you think about this issue?
It looks like this script growth very fast. Couldn't bare with 1GB AppSpot quote per day. It works most of hours in a day still.
When I try responsive : true, it doesn't work. The graph also does not load
The GitHub calendar is not loading and I have the following error:
TypeError: f.querySelector(...) is null
in the github-calendar.min.js file. When I unminify the file it shows the error is on line 56.
I think the problem is with the querySelector() function not matching any CSS selector for the class .left.text-muted:
if (f.querySelector(".left.text-muted").innerHTML = c.summary_text, f.querySelector("include-fragment")) setTimeout(l, 500);
This url, https://urlreq.appspot.com/req?method=GET&url=
, was marked as unsafe by chrome cause it https certificate, so this extension can not work anymore on chrome browser (but still worked well on safari).
I don't think the responsive layout is actually implemented?
Hi Ionica. I asked you on stackoverflow about adding your github-calendar to Jekyll. I am writing up a guide now. Before I do so, can you perhaps give a few examples of how to use the "options object" in the GitHubCalendar (main.js) function? I think that a lot of people using Jekyll are using a theme, and e.g. the theme I am using squeezes the information in the calendar slightly. So it would be nice to be able to see a minimal representation.
It does not seem to work when calling <options "global_stats=false"> in GitHubCalendar. Perhaps I am doing it wrong?
Thanks!
Hey.
Not sure if the intended behavior of your example was what it's actually doing ( only displaying "Loading the data just for you." and not the actual calendar.
I did manage to embed it so no big deal really, just pointing this out.
I just wanted to start by saying your script is awesome and thank you for sharing your work with the world. I wanted to use your script for showing details of repositories instead of based on a person. Is it possible to use your script so I can display the stats on just one of my public repositories instead of all of my activity on all repositories? I hope that makes sense.
Ideally you would pass your repository url
example: IonicaBizau/github-calendar
Would display the activity calendar on only that repository.
Again wonderful script =)
The border of the calendar diverges from the border of the global stats, as the prior is looking thicker and not very nice.
From my tests, by removing the class border
from the inner div that contains the classes border border-gray-dark py-2 graph-before-activity-overview
the border looks good again.
Please, can you check? (Tested with Firefox and Safari)
Title says it all. This isn't very compatible with a responsible layout at the moment.
---
layout: default
---
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>GitHub Calendar</title>
<link rel="stylesheet" href="assets/dist/style.css">
</head>
<body>
<div class="bag fixed">
<div class="calendar">
<img src="https://assets-cdn.github.com/images/spinners/octocat-spinner-128.gif" class="spinner"/>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-promise/3.0.2/es6-promise.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/0.10.1/fetch.min.js"></script>
<script src="assets/dist/github-calendar.min.js"></script>
<script src="assets/dist/main.js"></script>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.0.0/highlight.min.js"></script>
<script>hljs.highlightBlock(document.querySelector("pre"))</script>
</body>
</html>
<script src="assets/dist/main.js"></script>.
This (and a bit of tweaking the main.js and style.css) will generate the result as seen on my site.
GitHub had again some style changes and the github-calendar widget won't load:
Div containing the calendar graph has changed from
div id="contributions-calendar"
to
div class="js-contribution-graph"
Hi!
I was just in class and an issue came up about this lib but we couldnt find this example page anywhere: http://ionicabizau.github.io/github-calendar/example/
So, Im proposing that it should be linked in the README.md so that we can quickly reach it.
After Installation
and before Documentation
?
I can send a PR right away.
Purposed change:
Looks like it's in conflict with requirejs
Hi, if you enable 'activity overview' from contribution settings, github-calendar shows wrong repository links, but not GitHub links. Thank you.
hi,
I'm trying to integrate this with my Vue project. but it doesn't work.
main.js
import GitHubCalendar from "github-calendar" import "github-calendar/dist/github-calendar-responsive.css" Vue.use(GitHubCalendar(".calendar", "SaadKhanMalik"))
my console spits out
index.js?02ed:99 TypeError: Cannot set property 'innerHTML' of null at eval (index.js?02ed:96) (anonymous) @ index.js?02ed:99
would really love to intergrate this.
thanks
I found that the main chart would overflow on small screens so maybe we should hide it on small screens. It takes at least a standard middle screen to fit the whole svg.
An example of the changes I intended:
https://gitlab.com/eternal-flame-AD/eternalflame-cn/blob/cdfc652764b37658d52d427c8413fe48dbe0e2d5/layouts/shortcodes/github-calendar.html#L12-16
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.