I rewrote the frontend in React using a module bundler. It's matched feature-for-feature with the current frontend, with only slight changes in the styling. I did not fuss about making the styling identical; the badge popup looks particularly different. This makes the front end much easier to develop. I'm really looking forward to implementing #701, to which this paves the way. This makes light use of Next.js, which provides webpack config and dev/build tooling. We’ll probably replace it with create-react-app or our own webpack setup because unfortunately it comes with a lot of runtime overhead (the build is 400k). Let’s open new issues for bugs and features, and track other follow-ups here: https://github.com/badges/shields/projects/1
22 lines
585 B
JavaScript
22 lines
585 B
JavaScript
function exampleMatchesRegex(example, regex) {
|
|
const { title, keywords } = example;
|
|
const haystack = [title].concat(keywords).join(' ');
|
|
return regex.test(haystack);
|
|
}
|
|
|
|
export default function filterExamples(examples, query) {
|
|
if (! query) {
|
|
return examples;
|
|
}
|
|
|
|
const regex = new RegExp(query, 'i'); // Case-insensitive.
|
|
|
|
return examples
|
|
.map(({ category, examples }) => ({
|
|
category,
|
|
examples: examples.filter(ex => exampleMatchesRegex(ex, regex)),
|
|
}))
|
|
// Remove empty sections.
|
|
.filter(({ category, examples }) => examples.length > 0);
|
|
}
|