Generate badge examples from data + code #1163

paulmelnikow · 2017-10-12T17:34:25Z

This pull request sets us up to generate the badge examples dynamically from data and code.

For this pass, I’ve put all the data into a single .js file, though in the future it could be split up into separate files by service. I used JS instead of JSON because it’s more user-friendly.

Right now, try.html is still checked in, mostly for the benefit of reading this diff, though it should be removed on the next pass to avoid unnecessary complexity at merge time.

There probably are a number of good HTML templating languages, including dot which the project is already using. I went with React though, for a few reasons. It sets us up well to build a more dynamic and interesting front-end experience – i.e. by actually using React on the front end. We can make it easy to support internal navigation, badge syntax display, fields to set different values of badges, and perhaps a more simple home page view. With React, we can also re-implement the current functionality in a more modern way. In addition to all this, it’s something two of the maintainers know really well – @Daniel15 and me. (Correct me if I’m wrong!) Not to mention it’s popular, widely supported, and easy to learn. There’s a short term disadvantage of a more complex dependency toolchain (i.e. babel, eslint-config-standard-jsx), though even that is worthwhile groundwork for a more modern frontend.

I wrote a script to extract the structured data from try.html. That's checked in at frontend/extract-badge-examples.js. It makes a JSON file which I reformatted by hand to create lib/all-badge-examples.js. I can automate that process if necessary while we're iterating on the PR.

During testing I ran badge-examples-old.html through pretty so I could ensure the output was the same. Basically the difference comes down to quoting and slight differences in the way nbsp is handled. I'll post a couple of those files so people can see for themselves.

The documentation needs to be updated, but that’s blocked / conflicting with #1129 which reorganizes all of the documentation.

To do before merging:

Remove frontend/fragments/badge-examples-for-diff.html
Move the hostname from exampleBadgeUri to the rendering code
Infer exampleBadgeUri from previewBadgeUri where possible, rather than duplicate it
Turn on linting for frontend/

Post merge

Update developer documentation
Look into describing examples using a URL pattern
Stop tracking try.html

This pull request sets us up to generate the badge examples dynamically from data and code. For this pass, I’ve put all the data into a single `.js` file, though in the future it could be split up into separate files by service. I used JS instead of JSON because it’s more user-friendly. Right now, try.html is still checked in, mostly for the benefit of reading this diff, though it should be removed on the next pass to avoid unnecessary complexity at merge time.

paulmelnikow · 2017-10-12T18:45:33Z

I deployed a review copy of this: https://shields-staging-pr-1163.herokuapp.com/try.html

paulmelnikow · 2017-10-12T19:28:33Z

See a7a1d5f which compares a normalized copy of the old HTML with the new HTML.

tooomm · 2017-10-12T21:18:45Z

I deployed a review copy of this: https://shields-staging-pr-1163.herokuapp.com/try.html

Hmm, I realized in the example in the heroku pr already the same...
In the "Download" section, all badges for GitHub download counts (All Releases, Releases, Pre-Releases, Release (by Asset) etc.) all have a download count of 0!? That's odd.
Other badges seem to work.

paulmelnikow · 2017-10-12T21:45:04Z

Since there are no Github credentials on the review app, most of the Github requests will fail.

paulmelnikow · 2017-10-12T22:05:51Z

This makes a giant leap toward #776.

Daniel15 · 2017-10-12T22:11:51Z

Thanks for working on this! I'll take a look soon. With my refactoring work, I'd like to move each provider to its own class, and include the examples directly in the provider class. I guess we could build that on top of this as we'd just need to change how it's loading the example data, right? Sent from my phone.

…

On Oct 13, 2017 9:05 AM, "Paul Melnikow" ***@***.***> wrote: This makes a giant leap toward #776 <#776>. — You are receiving this because your review was requested. Reply to this email directly, view it on GitHub <#1163 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAFnHaPSNpGIIGLFZHpuzuX9ok-huMRzks5sro1BgaJpZM4P3XOy> .

paulmelnikow · 2017-10-12T22:27:18Z

With my refactoring work, I'd like to move each provider to its own class, and include the examples directly in the provider class. I guess we could build that on top of this as we'd just need to change how it's loading the example data, right?

Definitely! When the providers are collected, they could be run through some code that populates a data structure like this. That code could merge the "old style" examples with the "new style" examples, since we'll want to migrate those providers gradually.

Daniel15 · 2017-10-12T22:49:27Z

lib/all-badge-examples.js

+      {
+        title: 'Travis',
+        previewBadgeUri: '/travis/rust-lang/rust.svg',
+        exampleBadgeUri: 'https://img.shields.io/travis/USER/REPO.svg'


Maybe omit the hostname from here? We can prepend it in the rendering code (which would also avoid showing prod URLs in dev environments)

I wonder if it'd be better to have a URL pattern to remove the repetition... Something like:

uriFormat: '/travis/{USER}/{REPO}.svg`, previewParams: { USER: 'rust-lang', REPO: 'rust', }

Maybe omit the hostname from here?

This makes sense. Though we'll need to sort out more clearly what's happening with sed in the Makefile. It depends on the hostname being there.

uriFormat: '/travis/{USER}/{REPO}.svg`, previewParams: { USER: 'rust-lang', REPO: 'rust', }

That looks amazing! The Sinatra format could be nice too (i.e. /travis/:user/:repo.svg. It's going to take some care. Let's do that in the next pass.

I started a checklist in the top comment to make sure I don't miss anything.

Daniel15 · 2017-10-12T22:50:33Z

lib/all-badge-examples.js

+      {
+        title: 'CircleCI',
+        previewBadgeUri: '/circleci/project/github/RedSparr0w/node-csgo-parser.svg',
+        exampleBadgeUri: 'https://img.shields.io/circleci/project/github/RedSparr0w/node-csgo-parser.svg'


For a lot of these, previewBadgeUri and exampleBadgeUri are identical. Could we infer one of them if the other one is set?

Yea, that's a great idea. I'm happy to go through and make that change before this is merged.

I'm going to stall for the moment because try.html keeps changing in master so there is a lot of moving data. I'm hoping my next pass through will be the last. 😄

Daniel15 · 2017-10-12T22:51:23Z

lib/all-badge-examples.js

+        previewBadgeUri: '/travis/rust-lang/rust.svg',
+        exampleBadgeUri: 'https://img.shields.io/travis/USER/REPO.svg'
+      },
+      {


Maybe we should add "category" too (ie. the heading it's currently under on try.html)? We could likely extract that from the current try.html too.

Yea, for sure, it's in there now. They're called "sections" in this version.

When we break these out by service we can invert that, labeling each one with its category.

paulmelnikow · 2017-10-18T03:42:42Z

@Daniel15 how are you feeling about this? I've got a checklist in the top comment but wanna make sure I only need to regenerate this stuff once!

Daniel15 · 2017-10-18T04:13:02Z

Your checklist looks great, @paulmelnikow! :)

# Conflicts: # package.json # try.html

- Followup from #1163 - Retire try.html - Separate build config for dev and production - Move config for badge examples into the JS build - Move the prod transform into npm scripts - In the future this could be handled using a bundler plugin - make website builds production build as before - Run the production build in CI to make sure it’s working - Build the frontend on Heroku

Looks like this was added way back in #1163 and is definitely not the way things are happening now. I don't see anywhere else it's being used.

paulmelnikow added the developer-experience Dev tooling, test framework, and CI label Oct 12, 2017

paulmelnikow requested a review from Daniel15 October 12, 2017 17:34

paulmelnikow added the frontend The Docusaurus app serving the docs site label Oct 12, 2017

Merge branch 'master' into generate-frontend

8454073

paulmelnikow temporarily deployed to shields-staging-pr-1163 October 12, 2017 18:44 Inactive

paulmelnikow added 3 commits October 12, 2017 15:18

Clean diff

f09cd41

Run old fragment through pretty for diff purposes

5fbaf55

Commit the new version

a7a1d5f

paulmelnikow mentioned this pull request Oct 12, 2017

Shields data format? #776

Closed

Daniel15 reviewed Oct 12, 2017

View reviewed changes

This was referenced Oct 13, 2017

Website revamp/redesign #1070

Closed

Modernization + code cleanup ideas #948

Closed

paulmelnikow mentioned this pull request Oct 18, 2017

[Question] Acceptable types of badges #1169

Closed

Merge branch 'master' into generate-frontend

f57676d

# Conflicts: # package.json # try.html

paulmelnikow mentioned this pull request Oct 20, 2017

[badge/dynamic/json] User defined JSON source badge #820

Merged

paulmelnikow added 3 commits October 20, 2017 17:19

Renames + updates from master

21c72a6

Clean up

84f151f

Fix URIs

4538e48

Quiet up output

35d38ec

paulmelnikow merged commit b411f08 into badges:master Oct 20, 2017

paulmelnikow deleted the generate-frontend branch October 20, 2017 21:33

paulmelnikow mentioned this pull request Nov 13, 2017

Document the web-content features for badges #953

Closed

paulmelnikow mentioned this pull request Aug 22, 2018

Allow migrating legacy services to services/ affects [continuousphp shippable] #1931

Merged

4 tasks

dependabot-preview bot mentioned this pull request Jan 23, 2019

Bump eslint-plugin-import from 2.14.0 to 2.15.0 #2852

Merged

paulmelnikow added a commit that referenced this pull request May 6, 2019

Remove unused pretty dependency

5d80cef

Looks like this was added way back in #1163 and is definitely not the way things are happening now. I don't see anywhere else it's being used.

paulmelnikow mentioned this pull request May 6, 2019

Remove unused pretty dependency #3416

Merged

PyvesB pushed a commit that referenced this pull request May 6, 2019

Remove unused pretty dependency (#3416)

4d5acd5

Looks like this was added way back in #1163 and is definitely not the way things are happening now. I don't see anywhere else it's being used.

kohasummons mentioned this pull request Apr 5, 2022

User Experience Design #7815

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Generate badge examples from data + code #1163

Generate badge examples from data + code #1163

paulmelnikow commented Oct 12, 2017 •

edited

Loading

paulmelnikow commented Oct 12, 2017

paulmelnikow commented Oct 12, 2017

tooomm commented Oct 12, 2017

paulmelnikow commented Oct 12, 2017

paulmelnikow commented Oct 12, 2017

Daniel15 commented Oct 12, 2017 via email

paulmelnikow commented Oct 12, 2017

Daniel15 Oct 12, 2017 •

edited

Loading

paulmelnikow Oct 12, 2017 •

edited

Loading

paulmelnikow Oct 13, 2017

Daniel15 Oct 12, 2017

paulmelnikow Oct 12, 2017

Daniel15 Oct 12, 2017

paulmelnikow Oct 12, 2017

paulmelnikow commented Oct 18, 2017

Daniel15 commented Oct 18, 2017

Generate badge examples from data + code #1163

Generate badge examples from data + code #1163

Conversation

paulmelnikow commented Oct 12, 2017 • edited Loading

paulmelnikow commented Oct 12, 2017

paulmelnikow commented Oct 12, 2017

tooomm commented Oct 12, 2017

paulmelnikow commented Oct 12, 2017

paulmelnikow commented Oct 12, 2017

Daniel15 commented Oct 12, 2017 via email

paulmelnikow commented Oct 12, 2017

Daniel15 Oct 12, 2017 • edited Loading

Choose a reason for hiding this comment

paulmelnikow Oct 12, 2017 • edited Loading

Choose a reason for hiding this comment

paulmelnikow Oct 13, 2017

Choose a reason for hiding this comment

Daniel15 Oct 12, 2017

Choose a reason for hiding this comment

paulmelnikow Oct 12, 2017

Choose a reason for hiding this comment

Daniel15 Oct 12, 2017

Choose a reason for hiding this comment

paulmelnikow Oct 12, 2017

Choose a reason for hiding this comment

paulmelnikow commented Oct 18, 2017

Daniel15 commented Oct 18, 2017

paulmelnikow commented Oct 12, 2017 •

edited

Loading

Daniel15 Oct 12, 2017 •

edited

Loading

paulmelnikow Oct 12, 2017 •

edited

Loading