https://github.com/sidmishraw/gitlangcards
GitHub language cards component using React.js and Materialized CSS – carousel :)
https://github.com/sidmishraw/gitlangcards
github-language-statistics gitlangcards materialize-css react-component
Last synced: 11 months ago
JSON representation
GitHub language cards component using React.js and Materialized CSS – carousel :)
- Host: GitHub
- URL: https://github.com/sidmishraw/gitlangcards
- Owner: sidmishraw
- License: mit
- Created: 2017-11-06T06:06:52.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-11-07T09:31:38.000Z (over 8 years ago)
- Last Synced: 2025-01-15T06:48:38.478Z (about 1 year ago)
- Topics: github-language-statistics, gitlangcards, materialize-css, react-component
- Language: JavaScript
- Size: 4.17 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# git-lang-cards
This 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.
By using Materialize CSS the component gains touch compatibility :D
### Motivation:
I made this component for my personal website. Decided to make it available for everyone to use and enjoy :)
### Demo:
Following is the demo GIF of the component:
### Usage:
* Include the dependencies as script tags in the HTML file:
Inside ``:
```HTML
```
Inside ``:
```HTML
```
> 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")`.
* Library name: `gitlangcards`
* In JS script:
```javascript
// `gitlangcards` is the library, since I've added the bundle as a script, I can consume the library freely
// as a global variable
// The `render()` of the `GitHubLanguageColors` object takes 3 parameters:
// 1. The GitHub user name
// 2. The elementId of the div the carousel needs to be rendered inside
// 3. The callback function that needs to be called after the carousel(component)
// has been rendered on the screen
new gitlangcards.GitHubLanguageColors().renderOnScreen("sidmishraw", "root", () => console.log("Done"));
```
> Note: I'd recommend add the bundled js after the body elements have rendered for faster processing.
```HTML
```
> 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.
### Consumer dependencies:
* "jquery" : "^3.2.1"
* "materialize-css" : "^0.100.2"
* "react" : "^16.0.0"
* "react-dom" : "^16.0.0"
### Developer dependencies:
* "babel-core" : "^6.26.0"
* "babel-loader" : "^7.1.2"
* "babel-preset-env" : "^1.6.1"
* "babel-preset-react" : "^6.24.1"
* "css-loader" : "^0.28.7"
* "extract-text-webpack-plugin" : "^3.0.2"
* "file-loader" : "^1.1.5"
* "html-webpack-plugin" : "^2.30.1"
* "materialize-loader" : "^2.0.2"
* "path" : "^0.12.7"
* "style-loader" : "^0.19.0"
* "url-loader" : "^0.6.2"
* "webpack" : "^3.8.1"
* "webpack-dev-server" : "^2.9.4"
### Dev builds:
```shell
yarn install # installs all the dependencies and sets up the project
yarn build # builds the distributables or bundles in the ${PROJECT_ROOT}/bin directory
yarn clean # cleans the distributables
yarn rebuild # cleans and builds -- fails of bin directory is not there
yarn start --watch # starts the webpack-dev-server for live feedback -- http://localhost:8080/bin/app.html
```
`-Sid`