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.
50 lines
1.2 KiB
JavaScript
50 lines
1.2 KiB
JavaScript
'use strict'
|
|
|
|
const envFlag = require('node-env-flag')
|
|
const webpack = require('webpack')
|
|
const shouldAnalyze = envFlag(process.env.ANALYZE)
|
|
const assetPrefix = process.env.NEXT_ASSET_PREFIX
|
|
|
|
module.exports = {
|
|
webpack: config => {
|
|
config.plugins.push(
|
|
new webpack.EnvironmentPlugin({ BASE_URL: null, LONG_CACHE: null })
|
|
)
|
|
|
|
if (shouldAnalyze) {
|
|
// We don't include webpack-bundle-analyzer in devDependencies, so load
|
|
// lazily.
|
|
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
|
|
config.plugins.push(
|
|
new BundleAnalyzerPlugin({
|
|
analyzerMode: 'server',
|
|
analyzerPort: 8888,
|
|
openAnalyzer: true,
|
|
})
|
|
)
|
|
}
|
|
|
|
config.module.rules.push({
|
|
test: /\.yml$/,
|
|
use: {
|
|
loader: 'js-yaml-loader',
|
|
},
|
|
})
|
|
|
|
if (assetPrefix) {
|
|
config.output.publicPath = `${assetPrefix}/${config.output.publicPath}`
|
|
}
|
|
|
|
return config
|
|
},
|
|
exportPathMap: () => ({
|
|
'/': { page: '/' },
|
|
}),
|
|
}
|
|
|
|
// Avoid setting an `undefined` value. This causes
|
|
// `TypeError: Cannot read property 'replace' of undefined` at build time.
|
|
if (assetPrefix) {
|
|
module.exports.assetPrefix = assetPrefix
|
|
}
|