{"id":20372855,"url":"https://github.com/sidmishraw/gitlangcards","last_synced_at":"2025-03-04T20:43:12.256Z","repository":{"id":86400565,"uuid":"109654456","full_name":"sidmishraw/gitlangcards","owner":"sidmishraw","description":"GitHub language cards component using React.js and Materialized CSS – carousel :)","archived":false,"fork":false,"pushed_at":"2017-11-07T09:31:38.000Z","size":4376,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-15T06:48:38.478Z","etag":null,"topics":["github-language-statistics","gitlangcards","materialize-css","react-component"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sidmishraw.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-11-06T06:06:52.000Z","updated_at":"2017-11-06T06:09:24.000Z","dependencies_parsed_at":null,"dependency_job_id":"c32284b7-d1bd-4680-97f2-f478f8b25946","html_url":"https://github.com/sidmishraw/gitlangcards","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sidmishraw%2Fgitlangcards","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sidmishraw%2Fgitlangcards/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sidmishraw%2Fgitlangcards/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sidmishraw%2Fgitlangcards/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sidmishraw","download_url":"https://codeload.github.com/sidmishraw/gitlangcards/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241921836,"owners_count":20042763,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["github-language-statistics","gitlangcards","materialize-css","react-component"],"created_at":"2024-11-15T01:15:14.452Z","updated_at":"2025-03-04T20:43:12.251Z","avatar_url":"https://github.com/sidmishraw.png","language":"JavaScript","readme":"# git-lang-cards\n\n![](https://travis-ci.org/sidmishraw/gitlangcards.svg?branch=master)\n\nThis is a React.js component for providing a carousel of cards. The cards show the languages the consumer likes to dabble in on GitHub. There is a link in the cards to go the consumer's GitHub projects filtered for the particular language.\n\nBy using Materialize CSS the component gains touch compatibility :D\n\n### Motivation:\n\nI made this component for my personal website. Decided to make it available for everyone to use and enjoy :)\n\n### Demo:\n\nFollowing is the demo GIF of the component:\n\n![](./gitlangcards-demo.gif)\n\n### Usage:\n\n* Include the dependencies as script tags in the HTML file:\n\nInside `\u003chead\u003e`:\n\n```HTML\n\u003cscript src=\"https://code.jquery.com/jquery-3.2.1.min.js\" integrity=\"sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=\"\n    crossorigin=\"anonymous\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/react/16.0.0/umd/react.production.min.js\" crossorigin=\"anonymous\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.0.0/umd/react-dom.production.min.js\" crossorigin=\"anonymous\"\u003e\u003c/script\u003e\n```\n\nInside `\u003cbody\u003e`:\n\n```HTML\n\u003cdiv class=\"container\"\u003e\n  \u003cdiv id=\"root\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n\n\u003e Note: The library is exported as `gitlangcards` following the UMD convention — it can be consumed by all module systems in their native forms. For eg in CommonJS, consume as `require(\"gitlangcards\")`.\n\n\n* Library name: `gitlangcards`\n\n* In JS script:\n\n```javascript\n// `gitlangcards` is the library, since I've added the bundle as a script, I can consume the library freely\n// as a global variable\n// The `render()` of the `GitHubLanguageColors` object takes 3 parameters:\n// 1. The GitHub user name\n// 2. The elementId of the div the carousel needs to be rendered inside\n// 3. The callback function that needs to be called after the carousel(component) \n//    has been rendered on the screen\nnew gitlangcards.GitHubLanguageColors().renderOnScreen(\"sidmishraw\", \"root\", () =\u003e console.log(\"Done\"));\n```\n\n\u003e Note: I'd recommend add the bundled js after the body elements have rendered for faster processing.\n\n```HTML\n\u003c!-- towards the end of the \u003cbody\u003e tag --\u003e\n\u003cscript type=\"text/javascript\" src=\".././bin/materialize.bundle.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/javascript\" src=\".././bin/gitlangcards.bundle.js\"\u003e\u003c/script\u003e\n```\n\n\u003e Note: load the `materialize.bundle.js` before the `gitlangcards.bundle.js` since it satisfies the CSS and JS dependencies in `gitlangcards.bundle.js`. I believe this holds only in `root` or HTML script include method for JS files. CommonJS, CommonJS2, and AMD module systems follow their conventions.\n\n\n### Consumer dependencies:\n\n* \"jquery\"          : \"^3.2.1\"\n\n* \"materialize-css\" : \"^0.100.2\"\n\n* \"react\"           : \"^16.0.0\"\n\n* \"react-dom\"       : \"^16.0.0\"\n\n\n### Developer dependencies:\n\n* \"babel-core\"                  : \"^6.26.0\"\n\n* \"babel-loader\"                : \"^7.1.2\"\n\n* \"babel-preset-env\"            : \"^1.6.1\"\n\n* \"babel-preset-react\"          : \"^6.24.1\"\n\n* \"css-loader\"                  : \"^0.28.7\"\n\n* \"extract-text-webpack-plugin\" : \"^3.0.2\"\n\n* \"file-loader\"                 : \"^1.1.5\"\n\n* \"html-webpack-plugin\"         : \"^2.30.1\"\n\n* \"materialize-loader\"          : \"^2.0.2\"\n\n* \"path\"                        : \"^0.12.7\"\n\n* \"style-loader\"                : \"^0.19.0\"\n\n* \"url-loader\"                  : \"^0.6.2\"\n\n* \"webpack\"                     : \"^3.8.1\"\n\n* \"webpack-dev-server\"          : \"^2.9.4\"\n\n\n### Dev builds:\n\n```shell\nyarn install          # installs all the dependencies and sets up the project\n\nyarn build            # builds the distributables or bundles in the ${PROJECT_ROOT}/bin directory\n\nyarn clean            # cleans the distributables\n\nyarn rebuild          # cleans and builds -- fails of bin directory is not there\n\nyarn start --watch    # starts the webpack-dev-server for live feedback -- http://localhost:8080/bin/app.html\n```\n\n`-Sid`","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsidmishraw%2Fgitlangcards","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsidmishraw%2Fgitlangcards","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsidmishraw%2Fgitlangcards/lists"}