Enhance looks

[jangerhard]

• Vertical-align ProfileInfo (?)
• Do something with commit tag
• Dim "commit date" to light grey or similar (?)

[AlexErling]

Hi, I am new to open source and am interested in helping. I was wondering if I could take this on and if you have any idea the best way to get started?

[jangerhard]

Hi Alex!

Yeah, I'm always open to ideas. Feel free to clone the repo! 👍

As a start, create a sample react project, or use an existing one, and use 'npm link' to add this component as a dependancy. That way you can see changes in real-time. Do you have any experience with React?
I'll add a "how to contribute" section later this week.

[AlexErling]

Okay. Yes, I've had some limited experience but I'm definitely interested in learning more! I noticed you have some other issues as well. Maybe I could try and work on some other ones after I complete this one as well. I will get started on this right away.

[jangerhard]

Great! Yeah, I made some issues to keep track of enhancements I'd like to get done, as a reminder to myself, but I'd appreciate some input. 👍 Let me know if you have any questions!

[jangerhard]

@AlexErling I added a small guide to get you started. Let me know if you have any questions!

[AlexErling]

I'm having a little trouble using npm link. So far I used npm link in the react-github-showcase, and then npm link react-github-showcase in my sample app. But I'm still having issues getting it to work.
I tried using

require GithubShowcase from "react-github-showcase"

but that doesn't work.

This is what I've put this in the app.js on my sample project.

 <GithubShowcase
         username={"AlexErling"}
         api_key={"api"}/>

Any suggestions?

[AlexErling]

Okay, I figured out what I was doing wrong. I needed to do npm start after the link. But now I am getting this error.

GithubShowcase.componentDidMount
/Users/coding/Projects/open_source/react-github-showcase/build/index.js:16751
  16748 |                 avatarUrl: user.avatarUrl,
  16749 |                 repos: user.repositories.edges
  16750 |             });
> 16751 |         }).bind(this);
  16752 |     }
  16753 | }, {
  16754 |     key: 'render',

[jangerhard]

Yes, that was an error that should be fixed now if you do a pull from the master branch.

Also, you can get your api-key from here

[AlexErling]

Okay, it's up now. Although it looks like this? Is there supposed to be a border around it off the start like I see in your website? Anyway I will start working on those changes now.

[jangerhard]

Nice! Glad you got it to work.

In my project, I have it wrapped in another component that provides styling, as well as having defined styles in general. The Github Showcase component does not come with any inherent styles by itself.

The component I defined in my project was called CardPage which had it's own stylesheet. Feel free to have a look through my code!
Try building something similar! We made this component without styles as a consious choice to make sure it was styled correctly with other themes.

I build my project using Gatsby and used Typography to define some basic styling.

[AlexErling]

Okay thanks for the info, so you're trying to keep the styling on the showcase component to a minimum? Just curious how much I should change. I changed the commit date to appear grey. What else would you like me to do then? Any ideas on what you would want to do to the commit id tag.

[jangerhard]

Yeah, that was the idea. If a theme changes the fonts and colors of text depending on background color, then we want this component to respond. So ideally it's a matter of changing the opacity of the commit-date instead of changing color, if that makes sense.

Still unsure of commit tag. Could be cool to have a mini-photo or name to indicate who made the change!