More TypeScript in the frontend (#3742)

.eslintrc.yml

@@ -49,6 +49,11 @@ overrides:
       '@typescript-eslint/explicit-function-return-type': 'off'
       '@typescript-eslint/no-object-literal-type-assertion': 'off'
 
+  - files:
+      - core/**/*.ts
+    parserOptions:
+      sourceType: 'module'
+    parser: '@typescript-eslint/parser'
   - files:
       - gatsby-browser.js
       - 'frontend/**/*.@(js|ts|tsx)'

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

@@ -0,0 +1,108 @@
+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 badgeUrlFromPattern({
+  baseUrl,
+  pattern,
+  namedParams,
+  queryParams,
+  style,
+  format,
+  longCache,
+}: {
+  baseUrl?: string
+  pattern: string
+  namedParams: { [k: string]: 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,
+  color,
+  style,
+  namedLogo,
+  format,
+}: {
+  baseUrl?: string
+  label: string
+  message: string
+  color?: string
+  style?: string
+  namedLogo?: string
+  format?: 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

frontend/components/category-headings.js → frontend/components/category-headings.tsx

@@ -1,24 +1,26 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import { Link } from 'gatsby'
 import { H3 } from './common'
 
-export function CategoryHeading({ category: { id, name } }) {
+export interface Category {
+  id: string
+  name: string
+}
+
+export function CategoryHeading({
+  category: { id, name },
+}: {
+  category: Category
+}) {
   return (
     <Link to={`/category/${id}`}>
       <H3 id={id}>{name}</H3>
     </Link>
   )
 }
-CategoryHeading.propTypes = {
-  category: PropTypes.shape({
-    id: PropTypes.string.isRequired,
-    name: PropTypes.string.isRequired,
-  }).isRequired,
-}
 
-export function CategoryHeadings({ categories }) {
+export function CategoryHeadings({ categories }: { categories: Category[] }) {
   return (
     <div>
       {categories.map(category => (
@@ -27,9 +29,6 @@ export function CategoryHeadings({ categories }) {
     </div>
   )
 }
-CategoryHeadings.propTypes = {
-  categories: PropTypes.arrayOf(CategoryHeading.propTypes.category).isRequired,
-}
 
 const StyledNav = styled.nav`
   ul {
@@ -62,7 +61,7 @@ const StyledNav = styled.nav`
   }
 `
 
-export function CategoryNav({ categories }) {
+export function CategoryNav({ categories }: { categories: Category[] }) {
   return (
     <StyledNav>
       <ul>
@@ -75,6 +74,3 @@ export function CategoryNav({ categories }) {
     </StyledNav>
   )
 }
-CategoryNav.propTypes = {
-  categories: PropTypes.arrayOf(CategoryHeading.propTypes.category).isRequired,
-}