Icon refactor #4049

Merged
merged 4 commits into from Oct 21, 2015

Conversation

Projects
None yet
6 participants
@BigBlueHat
Contributor

BigBlueHat commented Oct 20, 2015

While working on https://github.com/hypothesis/developers.hypothes.is I wanted to use the GitHub icons inline in some content. This is essentially the same refactoring I did there, but on the default Jekyll theme--in hopes that it helps others.

The footer has been refactored to use these new icon includes, and about.md shows an example of using them inline.

Example:

{% include icon-github.html username="bigbluehat" %}

These could also be handy on author pages and the like.

Hope it's useful!
馃帺

BigBlueHat added some commits Oct 20, 2015

Make HTML includes for GitHub & Twitter icons
Made one for each to avoid over paramaterizing
the includes. Also allows for various icon formats.
Use GitHub icon inline in about.md
Had to remove whitespace from icon includes
because Markdown...
@envygeeks

This comment has been minimized.

Show comment
Hide comment
@envygeeks

envygeeks Oct 20, 2015

Contributor

I am absolutely 馃憤 on this because it demonstrates to a further extend how some of our software works and it also makes it cleaner to read the source. 鉂わ笍

Contributor

envygeeks commented Oct 20, 2015

I am absolutely 馃憤 on this because it demonstrates to a further extend how some of our software works and it also makes it cleaner to read the source. 鉂わ笍

-You can find the source code for Jekyll at [github.com/jekyll/jekyll](https://github.com/jekyll/jekyll)
+You can find the source code for Jekyll at
+{% include icon-github.html username="jekyll" %} /
+[jekyll](https://github.com/jekyll/jekyll)

This comment has been minimized.

@parkr

parkr Oct 20, 2015

Member

What is this addition about? Can you explain this?

@parkr

parkr Oct 20, 2015

Member

What is this addition about? Can you explain this?

This comment has been minimized.

@BigBlueHat

BigBlueHat Oct 21, 2015

Contributor

It's meant to be an example of in using the icons inline.

It looks like this:

2015-10-20 20_07_43-store

@BigBlueHat

BigBlueHat Oct 21, 2015

Contributor

It's meant to be an example of in using the icons inline.

It looks like this:

2015-10-20 20_07_43-store

@parkr

This comment has been minimized.

Show comment
Hide comment
@parkr

parkr Oct 20, 2015

Member

Where are the SVG's used?

Member

parkr commented Oct 20, 2015

Where are the SVG's used?

@envygeeks

This comment has been minimized.

Show comment
Hide comment
@envygeeks

envygeeks Oct 21, 2015

Contributor

I believe the only place we had them previously was in the footer? /cc @jglovier who would know more if I recall right yeah?

Contributor

envygeeks commented Oct 21, 2015

I believe the only place we had them previously was in the footer? /cc @jglovier who would know more if I recall right yeah?

@BigBlueHat

This comment has been minimized.

Show comment
Hide comment
@BigBlueHat

BigBlueHat Oct 21, 2015

Contributor

@parkr @envygeeks previously they were only used in the footer. This allows them to also be used within page content--which can be pretty handy when generating author or code project pages.

See the screenshot here: #4049 (comment)

Contributor

BigBlueHat commented Oct 21, 2015

@parkr @envygeeks previously they were only used in the footer. This allows them to also be used within page content--which can be pretty handy when generating author or code project pages.

See the screenshot here: #4049 (comment)

@jglovier

This comment has been minimized.

Show comment
Hide comment
@jglovier

jglovier Oct 21, 2015

Member

I believe the only place we had them previously was in the footer?

Yup, that's correct.

Also, 馃憤 馃憤 !

Member

jglovier commented Oct 21, 2015

I believe the only place we had them previously was in the footer?

Yup, that's correct.

Also, 馃憤 馃憤 !

@jglovier

This comment has been minimized.

Show comment
Hide comment
@jglovier

jglovier Oct 21, 2015

Member

Sorry, I lied. There is also a hamburger menu bar which is used for collapsing the navigation on mobile.

Member

jglovier commented Oct 21, 2015

Sorry, I lied. There is also a hamburger menu bar which is used for collapsing the navigation on mobile.

@gynter

This comment has been minimized.

Show comment
Hide comment
@gynter

gynter Oct 21, 2015

Contributor

馃憤 Why did You create separate SVG files for SVG content only? I'd probably recommend putting SVG data directly to the icon includes. One include less to make could mean smaller generation time for webs with hundreds of pages.

Contributor

gynter commented Oct 21, 2015

馃憤 Why did You create separate SVG files for SVG content only? I'd probably recommend putting SVG data directly to the icon includes. One include less to make could mean smaller generation time for webs with hundreds of pages.

parkr added a commit that referenced this pull request Oct 21, 2015

@parkr parkr merged commit 36f35bf into jekyll:master Oct 21, 2015

1 check passed

continuous-integration/travis-ci/pr The Travis CI build passed
Details

parkr added a commit that referenced this pull request Oct 21, 2015

@parkr

This comment has been minimized.

Show comment
Hide comment
@parkr

parkr Oct 21, 2015

Member

Thanks!

Member

parkr commented Oct 21, 2015

Thanks!

@envygeeks

This comment has been minimized.

Show comment
Hide comment
@envygeeks

envygeeks Oct 21, 2015

Contributor

鉂わ笍

Contributor

envygeeks commented Oct 21, 2015

鉂わ笍

@BigBlueHat

This comment has been minimized.

Show comment
Hide comment
@BigBlueHat

BigBlueHat Oct 21, 2015

Contributor

@gynter the reason for the separate .svg files is that they're actually .svg files now. 馃槃 They can be edited directly in Inkscape or whatever if needed. I like my files raw. 馃嵈 馃槈

Thanks for the merge @parkr!

Contributor

BigBlueHat commented Oct 21, 2015

@gynter the reason for the separate .svg files is that they're actually .svg files now. 馃槃 They can be edited directly in Inkscape or whatever if needed. I like my files raw. 馃嵈 馃槈

Thanks for the merge @parkr!

@jglovier

This comment has been minimized.

Show comment
Hide comment
Member

jglovier commented Oct 23, 2015

shaggy-guy-thumbsup

@jekyll jekyll locked and limited conversation to collaborators Feb 27, 2017

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.