migrate frontend to docusaurus (#9014)

* delete loads of really important stuff that we definitely need

* v basic MVP smoosh docusaurus PoC into repo

* TODO

* delete more really important stuff

* TODO

* tidyup: use run-s

* don't redirect images used in frontend to raster proxy

* fix routing

* preserve the /endpoint link

* delete the blog (for now)

I would quite like to re-add this at some point
but its not really the top priority thing right now

* content edits

* appease the lint gods

* update danger rules

* remove placeholder

* cypress tests

* dockerhub --> ghcr

* Revert "dockerhub --> ghcr"

This reverts commit ef74cbb26b.

* downgrade lockfile format

* implement defs/BASE_URL

* fix e2e build

* actually fix cypress tests

* always run cypress tests on build

* this never worked

* add command for docusaurus:clear

* delete more code we don't need any more

* update ESLint/prettier config

* delete unsused exports

* documentation updates

* delete a fairly large chunk of our dependency tree

* allow base_url as build arg to Dockerfile

* fixup dockerfile

* work out base url at runtime if not set

doing this at image build time is not the right approach

* remove gatsby monorepo from closebot

* rename HomepageFeatures to homepage-features

core/badge-urls/make-badge-url.d.ts

@@ -1,94 +0,0 @@
-export function badgeUrlFromPath({
-  baseUrl,
-  path,
-  queryParams,
-  style,
-  format,
-  longCache,
-}: {
-  baseUrl?: string
-  path: string
-  queryParams: { [k: string]: string | number | boolean }
-  style?: string
-  format?: string
-  longCache?: boolean
-}): string
-
-export function encodeField(s: string): string
-
-export function staticBadgeUrl({
-  baseUrl,
-  label,
-  message,
-  labelColor,
-  color,
-  style,
-  namedLogo,
-  format,
-  links,
-}: {
-  baseUrl?: string
-  label: string
-  message: string
-  labelColor?: string
-  color?: string
-  style?: string
-  namedLogo?: string
-  format?: string
-  links?: string[]
-}): string
-
-export function queryStringStaticBadgeUrl({
-  baseUrl,
-  label,
-  message,
-  color,
-  labelColor,
-  style,
-  namedLogo,
-  logoColor,
-  logoWidth,
-  logoPosition,
-  format,
-}: {
-  baseUrl?: string
-  label: string
-  message: string
-  color?: string
-  labelColor?: string
-  style?: string
-  namedLogo?: string
-  logoColor?: string
-  logoWidth?: number
-  logoPosition?: number
-  format?: string
-}): string
-
-export function dynamicBadgeUrl({
-  baseUrl,
-  datatype,
-  label,
-  dataUrl,
-  query,
-  prefix,
-  suffix,
-  color,
-  style,
-  format,
-}: {
-  baseUrl?: string
-  datatype: string
-  label: string
-  dataUrl: string
-  query: string
-  prefix: string
-  suffix: string
-  color?: string
-  style?: string
-  format?: string
-}): string
-
-export function rasterRedirectUrl(
-  { rasterUrl }: { rasterUrl: string },
-  badgeUrl: string
-): string

core/badge-urls/make-badge-url.js

@@ -1,119 +1,5 @@
 // Avoid "Attempted import error: 'URL' is not exported from 'url'" in frontend.
 import url from 'url'
-import queryString from 'query-string'
-
-function badgeUrlFromPath({
-  baseUrl = '',
-  path,
-  queryParams,
-  style,
-  format = '',
-  longCache = false,
-}) {
-  const outExt = format.length ? `.${format}` : ''
-
-  const outQueryString = queryString.stringify({
-    cacheSeconds: longCache ? '2592000' : undefined,
-    style,
-    ...queryParams,
-  })
-  const suffix = outQueryString ? `?${outQueryString}` : ''
-
-  return `${baseUrl}${path}${outExt}${suffix}`
-}
-
-function encodeField(s) {
-  return encodeURIComponent(s.replace(/-/g, '--').replace(/_/g, '__'))
-}
-
-function staticBadgeUrl({
-  baseUrl = '',
-  label,
-  message,
-  labelColor,
-  color = 'lightgray',
-  style,
-  namedLogo,
-  format = '',
-  links = [],
-}) {
-  const path = [label, message, color].map(encodeField).join('-')
-  const outQueryString = queryString.stringify({
-    labelColor,
-    style,
-    logo: namedLogo,
-    link: links,
-  })
-  const outExt = format.length ? `.${format}` : ''
-  const suffix = outQueryString ? `?${outQueryString}` : ''
-  return `${baseUrl}/badge/${path}${outExt}${suffix}`
-}
-
-function queryStringStaticBadgeUrl({
-  baseUrl = '',
-  label,
-  message,
-  color,
-  labelColor,
-  style,
-  namedLogo,
-  logoColor,
-  logoWidth,
-  logoPosition,
-  format = '',
-}) {
-  // schemaVersion could be a parameter if we iterate on it,
-  // for now it's hardcoded to the only supported version.
-  const schemaVersion = '1'
-  const suffix = `?${queryString.stringify({
-    label,
-    message,
-    color,
-    labelColor,
-    style,
-    logo: namedLogo,
-    logoColor,
-    logoWidth,
-    logoPosition,
-  })}`
-  const outExt = format.length ? `.${format}` : ''
-  return `${baseUrl}/static/v${schemaVersion}${outExt}${suffix}`
-}
-
-function dynamicBadgeUrl({
-  baseUrl,
-  datatype,
-  label,
-  dataUrl,
-  query,
-  prefix,
-  suffix,
-  color,
-  style,
-  format = '',
-}) {
-  const outExt = format.length ? `.${format}` : ''
-
-  const queryParams = {
-    label,
-    url: dataUrl,
-    query,
-    style,
-  }
-
-  if (color) {
-    queryParams.color = color
-  }
-  if (prefix) {
-    queryParams.prefix = prefix
-  }
-  if (suffix) {
-    queryParams.suffix = suffix
-  }
-
-  const outQueryString = queryString.stringify(queryParams)
-  return `${baseUrl}/badge/dynamic/${datatype}${outExt}?${outQueryString}`
-}
 
 function rasterRedirectUrl({ rasterUrl }, badgeUrl) {
   // Ensure we're always using the `rasterUrl` by using just the path from
@@ -124,11 +10,4 @@ function rasterRedirectUrl({ rasterUrl }, badgeUrl) {
   return result
 }
 
-export {
-  badgeUrlFromPath,
-  encodeField,
-  staticBadgeUrl,
-  queryStringStaticBadgeUrl,
-  dynamicBadgeUrl,
-  rasterRedirectUrl,
-}
+export { rasterRedirectUrl }

core/badge-urls/make-badge-url.spec.js

@@ -1,142 +0,0 @@
-import { test, given } from 'sazerac'
-import {
-  badgeUrlFromPath,
-  encodeField,
-  staticBadgeUrl,
-  queryStringStaticBadgeUrl,
-  dynamicBadgeUrl,
-} from './make-badge-url.js'
-
-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?cacheSeconds=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?style=flat-square')
-    given({
-      label: 'foo',
-      message: 'bar',
-      color: 'blue',
-      style: 'flat-square',
-      format: 'png',
-      namedLogo: 'github',
-    }).expect('/badge/foo-bar-blue.png?logo=github&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'
-    )
-    given({
-      label: '123-123',
-      message: 'abc-abc',
-      color: 'blue',
-    }).expect('/badge/123--123-abc--abc-blue')
-    given({
-      label: '123-123',
-      message: '',
-      color: 'blue',
-      style: 'social',
-    }).expect('/badge/123--123--blue?style=social')
-    given({
-      label: '',
-      message: 'blue',
-      color: 'blue',
-    }).expect('/badge/-blue-blue')
-  })
-
-  test(queryStringStaticBadgeUrl, () => {
-    // the query-string library sorts parameters by name
-    given({
-      label: 'foo',
-      message: 'bar',
-      color: 'blue',
-      style: 'flat-square',
-    }).expect('/static/v1?color=blue&label=foo&message=bar&style=flat-square')
-    given({
-      label: 'foo Bar',
-      message: 'bar Baz',
-      color: 'blue',
-      style: 'flat-square',
-      format: 'png',
-      namedLogo: 'github',
-    }).expect(
-      '/static/v1.png?color=blue&label=foo%20Bar&logo=github&message=bar%20Baz&style=flat-square'
-    )
-    given({
-      label: 'Hello World',
-      message: 'Привет Мир',
-      color: '#aabbcc',
-    }).expect(
-      '/static/v1?color=%23aabbcc&label=Hello%20World&message=%D0%9F%D1%80%D0%B8%D0%B2%D0%B5%D1%82%20%D0%9C%D0%B8%D1%80'
-    )
-  })
-
-  test(dynamicBadgeUrl, () => {
-    const dataUrl = 'http://example.com/foo.json'
-    const query = '$.bar'
-    const prefix = 'value: '
-    given({
-      baseUrl: 'http://img.example.com',
-      datatype: 'json',
-      label: 'foo',
-      dataUrl,
-      query,
-      prefix,
-      style: 'plastic',
-    }).expect(
-      [
-        'http://img.example.com/badge/dynamic/json',
-        '?label=foo',
-        `&prefix=${encodeURIComponent(prefix)}`,
-        `&query=${encodeURIComponent(query)}`,
-        '&style=plastic',
-        `&url=${encodeURIComponent(dataUrl)}`,
-      ].join('')
-    )
-    const suffix = '<- value'
-    const color = 'blue'
-    given({
-      baseUrl: 'http://img.example.com',
-      datatype: 'json',
-      label: 'foo',
-      dataUrl,
-      query,
-      suffix,
-      color,
-      style: 'plastic',
-    }).expect(
-      [
-        'http://img.example.com/badge/dynamic/json',
-        '?color=blue',
-        '&label=foo',
-        `&query=${encodeURIComponent(query)}`,
-        '&style=plastic',
-        `&suffix=${encodeURIComponent(suffix)}`,
-        `&url=${encodeURIComponent(dataUrl)}`,
-      ].join('')
-    )
-  })
-})

core/base-service/legacy-request-handler.js

@@ -65,7 +65,7 @@ function handleRequest(cacheHeaderConfig, handlerOptions) {
     */
     if (match[0] === '/endpoint' && Object.keys(queryParams).length === 0) {
       ask.res.statusCode = 301
-      ask.res.setHeader('Location', '/endpoint/')
+      ask.res.setHeader('Location', '/badges/endpoint-badge')
       ask.res.end()
       return
     }

core/base-service/openapi.js

@@ -1,4 +1,4 @@
-const baseUrl = process.env.BASE_URL || 'https://img.shields.io'
+const baseUrl = process.env.BASE_URL
 const globalParamRefs = [
   { $ref: '#/components/parameters/style' },
   { $ref: '#/components/parameters/logo' },
@@ -228,7 +228,7 @@ function category2openapi(category, services) {
         name: 'CC0',
       },
     },
-    servers: [{ url: baseUrl }],
+    servers: baseUrl ? [{ url: baseUrl }] : undefined,
     components: {
       parameters: {
         style: {

core/base-service/openapi.spec.js

@@ -76,7 +76,6 @@ class LegacyService extends BaseJsonService {
 const expected = {
   openapi: '3.0.0',
   info: { version: '1.0.0', title: 'build', license: { name: 'CC0' } },
-  servers: [{ url: 'https://img.shields.io' }],
   components: {
     parameters: {
       style: {

core/base-service/service-definitions.js

@@ -1,8 +1,5 @@
 import Joi from 'joi'
 
-// This should be kept in sync with the schema in
-// `frontend/lib/service-definitions/index.ts`.
-
 const arrayOfStrings = Joi.array().items(Joi.string()).min(0).required()
 
 const objectOfKeyValues = Joi.object()
@@ -92,9 +89,4 @@ function assertValidServiceDefinitionExport(examples, message = undefined) {
   Joi.assert(examples, serviceDefinitionExport, message)
 }
 
-export {
-  serviceDefinition,
-  assertValidServiceDefinition,
-  serviceDefinitionExport,
-  assertValidServiceDefinitionExport,
-}
+export { assertValidServiceDefinition, assertValidServiceDefinitionExport }

core/server/server.js

@@ -362,7 +362,7 @@ class Server {
     })
 
     if (!rasterUrl) {
-      camp.route(/\.png$/, (query, match, end, request) => {
+      camp.route(/^\/((?!img\/)).*\.png$/, (query, match, end, request) => {
         makeSend(
           'svg',
           request.res,
@@ -412,7 +412,7 @@ class Server {
 
     if (rasterUrl) {
       // Redirect to the raster server for raster versions of modern badges.
-      camp.route(/\.png$/, (queryParams, match, end, ask) => {
+      camp.route(/^\/((?!img\/)).*\.png$/, (queryParams, match, end, ask) => {
         ask.res.statusCode = 301
         ask.res.setHeader(
           'Location',

core/server/server.spec.js

@@ -98,6 +98,11 @@ describe('The server', function () {
       )
     })
 
+    it('should not redirect for PNG requests in /img', async function () {
+      const { statusCode } = await got(`${baseUrl}img/frontend-image.png`)
+      expect(statusCode).to.equal(200)
+    })
+
     it('should produce SVG badges with expected headers', async function () {
       const { statusCode, headers } = await got(
         `${baseUrl}:fruit-apple-green.svg`