Endpoint customizer (#2908)

* Endpoint page: improve formatting

Cherry-picked from #2906 (conflicts with that)

Partly addresses #2837 but does not resolve it

* Add badge customizer to the endpoint page

* Clean lint

frontend/pages/endpoint.js

@@ -8,6 +8,7 @@ import Header from '../components/header'
 import Footer from '../components/footer'
 import { BaseFont, GlobalStyle, H3, Badge } from '../components/common'
 import { Snippet } from '../components/snippet'
+import Customizer from '../components/customizer/customizer'
 
 const MainContainer = styled(BaseFont)`
   text-align: center;
@@ -221,6 +222,14 @@ const EndpointPage = () => (
         overridden by the user via the query string, but only to a longer value.
       </dd>
     </Schema>
+    <h4>Customize and test</h4>
+    <Customizer
+      baseUrl={baseUrl}
+      title="Custom badge"
+      pattern="/badge/endpoint"
+      exampleNamedParams={{}}
+      exampleQueryParams={{ url: 'https://shields.redsparr0w.com/2473/monday' }}
+    />
     <Footer baseUrl={baseUrl} />
   </MainContainer>
 )