On the path to get this module ready for Drupal.org, we'll need to support their styling efforts and needs.

The goal of this issue is to determine: "What does that look like on a Drupal.org page"?

Several examples of what project maintainers are currently doing with HTML have been added to this documentation page:

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

liberatr created an issue. See original summary.

liberatr’s picture

For reference, here is what @jrockowitz has put together for the excellent Webform module page: screnshot of contributor avatars on current webform project page

Interestingly, I don't think there's a way to show the code maintainers from OpenCollective right now - I do believe Jacob's choice to put a human face on the code is an excellent one.

Second, there is something like the UX for "Github Sponsors" - to open this popup you have to click a button with a pink heart that says "Sponsor" and this popup appears. Here is a sample from Parcel JS, an early adopter of Github Sponsors who use Open Collective:
screenshot of github sponsors modal dialog for parcel.js project

I want to return to a small thing Jacob did on the webform page, just below the photos of the contributors:
screenshot of webform page with text that reads If you enjoy and value the webform module, get involved, consider joining the Drupal Association, and backing the module's Open Collective.
I feel like this block is something that is generic enough to be included but still able to be customized on different sites that want to use this project (other than Drupal.org).

We could have some configuration in the field widget that allows an administrator to have some text (maybe with token replacement) that allows the webmaster to configure a string similar to this, and the icon here can come from the theme or maybe create a default graphic that can be included in a GPL manner.

Next comment will have some of my ideas on what this might actually look like.

liberatr’s picture

FileSize
219.99 KB
145.67 KB

NOTE: the screenshots in this comment are mockups. Above are actual pages.

If we look at what is available from OpenCollective today, it leaves something to be desired. A module maintainer could list each of their backer teirs as SVGs, like so:
example of a project with lists of avatars, separated by their backing teir

But a more practical and universal example would look more like the green box from the webform page. One possible location is under the "Project Information" heading:
example of Project information heading with text that reads This project is supported by a community of contributors. Visit their page on Open Collective to learn more.

liberatr’s picture

Title: Funding: Design User-facing UX (e.g. for Drupal.org) » Funding: User Experience (e.g. for Drupal.org)
gusaus’s picture

Would it be possible to display a sponsor button and flow similar to projects on Github? Github sponsors button

Where the pop up provides a link to the sponsor page (https://github.com/sponsors/babel) as well as external links: Github sponsors popup

On the sponsor page, the donate tiers is generated automatically via integration with Open Collective - Github sponsors page

Considering this project has been a catalyst for improvements to widgets and API on the Open Collective side, possibly we should ramp up collaboration with their team?
https://github.com/opencollective/opencollective/issues/3003
https://github.com/opencollective/opencollective/issues/2230

liberatr’s picture

I'm suggesting my screenshot from #3 as a Minimum Viable Product. Since a custom field type can have many formatters, we can configure different formatters for users who want to do something like an embedded donation flow. If D.o wants this flow, so be it. I'd like to build the text-only version.

hestenet’s picture

I'm definitely digging Comment #2.

I think if we effectively emulate the Webform modules green box on project pages, and then emulate the GitHub modal when mousing over the 'sponsor this project' part of that text. And/or just make it a collapsible section on the page, that shows that short info when collapsed, and the sponsorship details when expanded.

In fact, by using a collapsible display, we could potentially add to the sponsor information as things get more feature rich without totally redesigning the page each time.

I do like the suggestion of putting it under the project information heading, but I worry it will visually disappear a bit.

As far as maintainer display goes - I think that should be handled separately from this module - we should emulate the maintainer display we do on the Documentation Guides as a first step.

As a general rule for this, we do want it to be an implementation that can be used on a couple of content types to start:

  • Projects
  • Sections (like sub-sections within /community or /strategic-initiatves)
  • Documentation guides, perhaps?
liberatr’s picture

Version: » 7.x-1.x-dev
Issue summary: View changes
FileSize
122.17 KB

@hestenet I have completed the initial code for the funding "text box" variant - currently no modal dialogs or expandable areas, etc. I feel like to finish the D.o experience you said we would need to create some configs, features, maybe styles. We should cover the next steps.

Composer support is real via the `composer fund` command and packagist.org:
example of funding info on Composer packagist website

See https://packagist.org/packages/symfony/symfony for an example.

liberatr’s picture

Issue summary: View changes

I am looking for examples of projects that are currently listing their funding profiles - adding to the issue description.

liberatr’s picture

Some new developments from OpenCollective:
https://docs.opencollective.com/help/collectives/embed-contribution-flow

They developed an embeddable widget, and there is a default funding level, simply called "Donate" which simplifies the membership types greatly.

gusaus’s picture

Was great to see this https://docs.opencollective.com/help/collectives/embed-contribution-flow

Seems like the MVP could be the first step in providing what @hestenet suggested in https://github.com/opencollective/opencollective/issues/2230

How could/should Drupal collectives use this? Could they embed on their d.o. project page?

rachel_norfolk’s picture

Just dropping in an example seen in the wild that I rather like: https://www.drupal.org/project/gin_login

liberatr’s picture

FileSize
184.82 KB
89.81 KB

Updated Screenshot for Webform:
screenshot of OpenCollective logos separated by level on the Webform project page

and Gin, as mentioned by Rachel:
screenshot of Gin Login project page, showing github and opencollective donation buttons

liberatr’s picture

Issue summary: View changes
liberatr’s picture

Issue summary: View changes
liberatr’s picture

Version: 7.x-1.x-dev » 1.x-dev

Updating planning issue versions to the Drupal 9+ branch.

liberatr’s picture

Issue summary: View changes
daggerhart’s picture

Title: Funding: User Experience (e.g. for Drupal.org) » Styling support for Drupal.org
Component: User interface » Planning
Issue summary: View changes