Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat:add custom config for social widgets #159

Merged
merged 3 commits into from Dec 6, 2019
Merged

Conversation

@yuqingc
Copy link
Contributor

yuqingc commented Dec 3, 2019

Hi,
I have implemented config for custom sicial widgets. (#151 (comment))

Add the following to config.toml

[[Params.widgets.social.custom]]
  title = "Youtube"
  url = "https://youtube.com"
  icon = "youtube.svg" # Optional. Path relative to "layouts/partials"

[[Params.widgets.social.custom]]
  title = "Steam"
  url = "https://store.steampowered.com/"
  icon = "steam.svg"

[[Params.widgets.social.custom]]
  title = "My Home Page"
  url = "http://example.com"

and it will render this:
image

@Vimux

@yuqingc yuqingc force-pushed the yuqingc:custom-social-feat branch from d51cf18 to d3650fb Dec 3, 2019
Copy link
Owner

Vimux left a comment

Thank you.

Good job, but some modifications need to be made.

Shortly:

  • Make icon param really optional
  • Add README section about custom social links
  • Other improvements, see my comments below
README.md Outdated
@@ -115,6 +115,21 @@ googleAnalytics = "" # Enable Google Analytics by entering your tracking id
gitlab = "username"
bitbucket = "username"
email = "example@example.com"
# Your custom social links

This comment has been minimized.

Copy link
@Vimux

Vimux Dec 3, 2019

Owner
Suggested change
# Your custom social links
# Custom social links
README.md Outdated
[[Params.widgets.social.custom]]
title = "Steam"
url = "https://store.steampowered.com/"
icon = "steam.svg"
Comment on lines 125 to 128

This comment has been minimized.

Copy link
@Vimux

Vimux Dec 3, 2019

Owner

The first and third examples ("YouTube" and "My Home Page") are good enough. The second one is superfluous because of identical meaning to the first. Remove "Steam" example.

README.md Outdated
# Your custom social links
[[Params.widgets.social.custom]]
title = "Youtube"
url = "https://youtube.com"

This comment has been minimized.

Copy link
@Vimux

Vimux Dec 3, 2019

Owner
Suggested change
url = "https://youtube.com"
url = "https://youtube.com/user/username"

Looks more consistent. What do you think?

@@ -0,0 +1 @@
<svg class="{{ with .class }}{{ . }} {{ end }}icon icon-default-link" viewBox="0 0 1024 1024" width="24" height="24"><defs><style type="text/css"></style></defs><path d="M361.173333 481.834667c48.341333-48.341333 132.650667-48.341333 180.992 0l30.165334 30.165333 60.330666-60.330667-30.165333-30.165333c-40.234667-40.277333-93.824-62.506667-150.826667-62.506667s-110.592 22.229333-150.826666 62.506667L210.304 512a213.674667 213.674667 0 0 0 0 301.696 212.608 212.608 0 0 0 150.826667 62.378667A212.565333 212.565333 0 0 0 512 813.696l30.165333-30.165333-60.330666-60.330667-30.165334 30.165333a128.298667 128.298667 0 0 1-181.034666 0 128.213333 128.213333 0 0 1 0-181.034666l90.538666-90.496z" fill="" p-id="3862"></path><path d="M723.157333 602.496L813.696 512a213.674667 213.674667 0 0 0 0-301.696 213.589333 213.589333 0 0 0-301.696 0l-30.165333 30.165333 60.330666 60.330667 30.165334-30.165333a128.298667 128.298667 0 0 1 181.034666 0 128.213333 128.213333 0 0 1 0 181.034666l-90.538666 90.496c-48.341333 48.341333-132.650667 48.341333-180.992 0L451.669333 512l-60.330666 60.330667 30.165333 30.165333c40.234667 40.277333 93.824 62.506667 150.826667 62.506667s110.592-22.229333 150.826666-62.506667z"></path></svg>

This comment has been minimized.

Copy link
@Vimux

Vimux Dec 3, 2019

Owner

See comment about icon param.

{{ range .Site.Params.widgets.social.custom }}
<div class="widget-social__item widget__item">
<a class="widget-social__link widget__link btn" title="{{ .title }}" rel="noopener noreferrer" href="{{ .url }}" target="_blank">
{{ partial (.icon | default "svg/default-link.svg") (dict "class" "widget-social__link-icon") }}

This comment has been minimized.

Copy link
@Vimux

Vimux Dec 3, 2019

Owner

Icon param should be optional literally, without any default icon. That's exactly what users expect from optional icon param.

README.md Show resolved Hide resolved
@yuqingc

This comment has been minimized.

Copy link
Contributor Author

yuqingc commented Dec 4, 2019

@Vimux PR is updated :)

- add custom social link quick guide in README
- remove 'steam' example in README
- remove default social icon
@yuqingc yuqingc force-pushed the yuqingc:custom-social-feat branch from 7c91ad5 to 3cff051 Dec 4, 2019
Copy link
Owner

Vimux left a comment

One more thing.

Image file format not described properly in the current version. Need to describe this limitations. Otherwise, users can get an error message from Hugo.

Not every SVG icon can be used. For better results, it should be one-color SVG file with a special class attribute {{ with .class }}{{ . }} {{ end }} and 28x28 size. At a minimum, custom SVG icon needs these attributes:

<svg class="{{ with .class }}{{ . }} {{ end }} icon" width="28" height="28">...</svg>
@yuqingc

This comment has been minimized.

Copy link
Contributor Author

yuqingc commented Dec 6, 2019

@Vimux I updated README. By the way, I have checkout the current svg file size, which turns out to be 24x24. I fixed that.

@Vimux Vimux merged commit 277f998 into Vimux:master Dec 6, 2019
2 checks passed
2 checks passed
Travis CI - Pull Request Build Passed
Details
netlify/mainroad/deploy-preview Deploy preview ready!
Details
@Vimux
Vimux approved these changes Dec 6, 2019
@Vimux

This comment has been minimized.

Copy link
Owner

Vimux commented Dec 6, 2019

LGTM, thanks.

@contributorpw

This comment has been minimized.

Copy link
Contributor

contributorpw commented Dec 8, 2019

Many thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
3 participants
You can’t perform that action at this time.