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.

Sign up for GitHub

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

tweaks to social images #910

Merged
merged 3 commits into from
Jul 30, 2019
Merged

tweaks to social images #910

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c54c621
tweaks to social images
choldgraf Jul 29, 2019
164d920
updates to the social media description
choldgraf Jul 29, 2019
e7748ad
fixing language
choldgraf Jul 30, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions binderhub/main.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,13 @@

from .base import BaseHandler

SPEC_NAMES = {
"gh": "GitHub repository",
"gist": "GitHub Gist",
"gl": "GitLab repository",
"git": "Git repository: ",
"zenodo": "Zenodo DOI"
}

class MainHandler(BaseHandler):
"""Main handler for requests"""
Expand Down Expand Up @@ -46,6 +53,7 @@ def get(self, provider_prefix, _unescaped_spec):
raise HTTPError(400, str(e))

provider_spec = f'{provider_prefix}/{spec}'
social_desc = f"{SPEC_NAMES[provider_prefix]}: {spec}"
betatim marked this conversation as resolved.
Show resolved Hide resolved
nbviewer_url = None
if provider_prefix == "gh":
# we can only produce an nbviewer URL for github right now
Expand All @@ -60,6 +68,7 @@ def get(self, provider_prefix, _unescaped_spec):
base_url=self.settings['base_url'],
badge_base_url=self.settings['badge_base_url'],
provider_spec=provider_spec,
social_desc=social_desc,
nbviewer_url=nbviewer_url,
# urlpath=self.get_argument('urlpath', None),
submit=True,
Expand Down
Binary file modified binderhub/static/images/logo_social.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions binderhub/templates/about.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
{% extends "page.html" %}

{% block head %}
<meta property="og:description" content="Reproducible, sharable, open, interactive computing environments.">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not a huge fan of the "open" here. Do we need it? The previous version had a better "feel" or rhythm to it when reading. Because the rhythm isn't so nice it makes me as a reader think we are just stuffing adjectives in for SEO purposes or so we can tick of buzzwords.

Another point is that I think outside of the bubble of open science not soo many people know what to do with "open" as a description. What is an open computing environment? Anyone can see what I am doing? I think a word that is better is "public" (as in only public repos) but that is confusing too because the env you get isn't public, it is sourced from a public repo.

IMHO the goal should be to let the user know what will happen to them if they click the link (where will I get taken?) and entice them to click it. We don't need to explain what Binder is, people will look that up if they care to know.

This is why I'd go with the three adjectives version.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think three adjectives sounds better too. The reason I'm trying to add "open" is because I see it as one of the main distinguishing factors compared w/ other cloud services. E.g., it'd be somewhat trivial for Colab to add some kind of "share an environment" feature. Where does that leave Binder? I was trying to highlight things that are uniquely Binder Project.

That said, I think it's awkward enough and we don't have consensus enough that it shouldn't be in this PR

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

While "open" is a convenient term, it can have multiple interpretations: open, pseudo-open, open requirements, etc. Some of the distinguishing factors are transparency and inspection/introspection of builds and dependencies. It would be great to at some point break down a reproducible build into the key blocks where inspection is important (requirements, container build, versions).

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Which is my long winded way of saying that we need to capture and publicize the distinguishing factors. Perhaps not in the title but yes keeping focus on it for those who will care.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@willingc I think that's a good point - it actually reminds me of a recent blog post from tal yarkoni that you might like if you haven't seen it yet. I agree that we can and should try to dig down to the specifics and why they're useful in BinderHub! Happy to iterate on that in another PR

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good points. Investing effort into explaining why Binder is the way it is, why we think that this is a good trade off, etc is a good idea. I keep thinking back to "Binder, so advanced it might contain magic" (advance tech being indistinguishable from magic) and the fact that most magic tricks are actually very simple to understand once they are explained to you. So I am pondering how we can explain Binder like that :) "Binder performs a magic trick" (building your env from nothing), let me show you how it does it. See, there is no magic here, you could do it yourself! ramblingrambling

{{ super() }}
{% endblock head %}

{% block main %}
<div id="main" class="container">
Expand Down
3 changes: 3 additions & 0 deletions binderhub/templates/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,9 @@
<meta id="base-url" data-url="{{base_url}}">
<meta id="badge-base-url" data-url="{{badge_base_url}}">
<script src="{{static_url("dist/bundle.js")}}"></script>
<!-- Other OG information in page.html -->
<meta property="og:description" content="Reproducible, sharable, interactive computing environments.">

{{ super() }}
{% endblock head %}

Expand Down
3 changes: 3 additions & 0 deletions binderhub/templates/loading.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,9 @@
{% block head %}
<meta id="base-url" data-url="{{base_url}}">
<meta id="badge-base-url" data-url="{{badge_base_url}}">
<!-- Other OG information in page.html -->
<meta property="og:description" content="{{social_desc}}">

{{ super() }}
<script src="{{static_url("dist/bundle.js")}}"></script>
<link href="{{static_url("dist/styles.css")}}" rel="stylesheet">
Expand Down
2 changes: 0 additions & 2 deletions binderhub/templates/page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,10 @@

<!-- Social media previews -->
<meta property="og:title" content="The Binder Project">
<meta property="og:description" content="Reproducible, sharable, interactive computing environments.">
<meta property="og:image" content="https://mybinder.org/static/images/logo_social.png">
<meta property="og:image:width" content="1334">
<meta property="og:image:height" content="700">
<meta property="og:image:alt" content="The Binder Project Logo" />

<meta name="twitter:card" content="summary_large_image">
{% endblock head %}
</head>
Expand Down