https://github.com/alienkevin/elm-github-cards
Card for your GitHub profile and GitHub repositories in Elm Applications
https://github.com/alienkevin/elm-github-cards
Last synced: 4 months ago
JSON representation
Card for your GitHub profile and GitHub repositories in Elm Applications
- Host: GitHub
- URL: https://github.com/alienkevin/elm-github-cards
- Owner: AlienKevin
- License: bsd-3-clause
- Created: 2020-04-30T23:20:59.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2022-07-21T01:19:45.000Z (over 3 years ago)
- Last Synced: 2025-10-13T04:07:08.165Z (4 months ago)
- Language: HTML
- Homepage: https://alienkevin.github.io/elm-github-cards
- Size: 264 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# elm-github-cards
Show cards of Github repos and users
Also supports Medium theme:
This project is based on lepture's [github-cards](https://github.com/lepture/github-cards)
# Usage
Adapt `public/index.html` and `src/Main.elm` to your Elm project.
If you encounter CORS policy restriction or GitHub API rate limits, try registering your app on GitHub following instructions [here](https://developer.github.com/v3/guides/basics-of-authentication/#implementing-persistent-authentication)
The followings are sample `client-id` and `client-secret`, you should generate your own.
```html
```
# Customization
Data parameters:
* user: GitHub username
* repo: GitHub repository name
* width: Embed width you want, default is 400
* height: Embed height you want, default is 200
* theme: GitHub card theme, default is default
* target: If you want to open links in new tab, set it to blank
* client_id: Your app client_id, optional
* client_secret: Your app client_secret, optional
Add or modify data attributes using `Html.Attributes.attribute` in the `viewGithubCard` function:
```elm
viewGithubCard : List (Html.Attribute Msg) -> Html Msg
viewGithubCard attributes =
Html.div
([ Html.Attributes.class "github-card"
, Html.Attributes.attribute "data-width" "300"
, Html.Attributes.attribute "data-height" ""
, Html.Attributes.attribute "data-theme" "default"
, Html.Attributes.attribute "data-target" "blank"
] ++ attributes)
[]
```
# Ad Blockers
Some Ad Blockers like [Privacy Badger](https://chrome.google.com/webstore/detail/privacy-badger/pkehgijcmpdhfbdbbnkijodmdjhbjlgp) might block the api requests, make sure to unblock them to see the cards.
# Development
Run the example with [`elm-live`](https://github.com/wking-io/elm-live)
```
sed -i 's+src="elm.js"+src="/public/elm.js"+' public/index.html
elm-live src/Main.elm --start-page public/index.html -- --output=public/elm.js
```
# Deployment
Run the build script
```
./build.sh
```
> Note: you may have to enable execution permission for the build script using `chmod +x ./build.sh` before you can run it.