58b276539a
- The goal of this PR is:
- Consume the new service-definition format. (#2397)
- Make the frontend more readable.
- Behavior changes:
- I changed the **Image** field in the markup modal to show only the path.
- I added another click-to-select field below that shows the complete URL.
- This made it easier to suppress the live badge preview while it contains placeholders like `:user` or `:gem`, a minor tweak discussed at https://github.com/badges/shields/issues/2427#issuecomment-442972100.
- The search box now searches all categories, regardless of the current page. (This is an improvement, I would say.)
- I did not deliberately address performance, though I ripped out a bunch of anonymous functions and avoided re-filtering all the examples by category on every render, which I expect will not hurt. I haven't really tested this on a mobile connection and it'd be worth doing that.
- It would be great to have some tests of the components, though getting started with that seemed like a big project and I did not want to make this any larger than it already is.
It's a medium-sized refactor:
1. Replace `BadgeExamples`, `Category` and `Badge` component with a completely rewritten `BadgeExamples` component which renders a table of badges, and `CategoryHeading` and `CategoryHeadings` components.
2. Refactor `ExamplesPage` and `SearchResults` components into a new `Main` component.
3. Rewrite the data flow for `MarkupModal`. Rather than rely on unmounting and remounting the component to copy the badge URL into state, employ the `getDerivedStateFromProps` lifecycle method.
4. Remove `prepareExamples` and `all-badge-examples`.
5. Rewrite the `$suggest` schema to harmonize with the service definition format. It's not backward-compatible which means at deploy time there probably will be 10–20 minutes of downtime on that feature, between the first server deploy and the final gh-pages deploy. 🤷♂️ (We could leave the old version in place if it seems worth it.)
6. Added two new functions in `make-badge-url` with tests. I removed _most_ of the uses of the old functions, but there are some in parts of the frontend I didn't touch like the static and dynamic badge generators, and again I didn't want to make this any larger than it already is.
7. Fix a couple bugs in the service-definition export.
71 lines
1.8 KiB
JavaScript
71 lines
1.8 KiB
JavaScript
'use strict'
|
|
|
|
const { test, given } = require('sazerac')
|
|
const {
|
|
badgeUrlFromPath,
|
|
badgeUrlFromPattern,
|
|
encodeField,
|
|
staticBadgeUrl,
|
|
} = require('./make-badge-url')
|
|
|
|
describe('Badge URL generation functions', function() {
|
|
test(badgeUrlFromPath, () => {
|
|
given({
|
|
baseUrl: 'http://example.com',
|
|
path: '/npm/v/gh-badges',
|
|
style: 'flat-square',
|
|
longCache: true,
|
|
}).expect(
|
|
'http://example.com/npm/v/gh-badges.svg?maxAge=2592000&style=flat-square'
|
|
)
|
|
})
|
|
|
|
test(badgeUrlFromPattern, () => {
|
|
given({
|
|
baseUrl: 'http://example.com',
|
|
pattern: '/npm/v/:packageName',
|
|
namedParams: { packageName: 'gh-badges' },
|
|
style: 'flat-square',
|
|
longCache: true,
|
|
}).expect(
|
|
'http://example.com/npm/v/gh-badges.svg?maxAge=2592000&style=flat-square'
|
|
)
|
|
})
|
|
|
|
test(encodeField, () => {
|
|
given('foo').expect('foo')
|
|
given('').expect('')
|
|
given('happy go lucky').expect('happy%20go%20lucky')
|
|
given('do-right').expect('do--right')
|
|
given('it_is_a_snake').expect('it__is__a__snake')
|
|
})
|
|
|
|
test(staticBadgeUrl, () => {
|
|
given({
|
|
label: 'foo',
|
|
message: 'bar',
|
|
color: 'blue',
|
|
style: 'flat-square',
|
|
}).expect('/badge/foo-bar-blue.svg?style=flat-square')
|
|
given({
|
|
label: 'foo',
|
|
message: 'bar',
|
|
color: 'blue',
|
|
style: 'flat-square',
|
|
format: 'png',
|
|
}).expect('/badge/foo-bar-blue.png?style=flat-square')
|
|
given({
|
|
label: 'Hello World',
|
|
message: 'Привет Мир',
|
|
color: '#aabbcc',
|
|
}).expect(
|
|
'/badge/Hello%20World-%D0%9F%D1%80%D0%B8%D0%B2%D0%B5%D1%82%20%D0%9C%D0%B8%D1%80-%23aabbcc.svg'
|
|
)
|
|
given({
|
|
label: '123-123',
|
|
message: 'abc-abc',
|
|
color: 'blue',
|
|
}).expect('/badge/123--123-abc--abc-blue.svg')
|
|
})
|
|
})
|