Update dependencies, package.json scripts, ESLint config, and Algolia Crawler config (#187)

* Update Algolia Crawler config

* Update dependencies

* Add `@edgeandnode/eslint-config` + update `package.json` scripts and Husky hooks

* Tweak

* Add `frozen-lockfile` and `ignore-scripts` flags to `yarn install` in Dockerfile

Author: benface

.eslintrc.js

@@ -0,0 +1,11 @@
+module.exports = {
+  extends: ['@edgeandnode/eslint-config', '@edgeandnode/eslint-config/next'],
+  overrides: [
+    {
+      files: ['*.ts', '*.tsx'],
+      parserOptions: {
+        project: require.resolve('./tsconfig.json'),
+      },
+    },
+  ],
+}

.eslintrc.json

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+yarn pre-commit

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+yarn pre-push

.husky/pre-push

@@ -9,7 +9,7 @@ COPY ./package.json /app/package.json
 COPY ./yarn.lock /app/yarn.lock
 
 # install the packages
-RUN yarn install
+RUN yarn install --frozen-lockfile --ignore-scripts
 
 # copy the rest
 COPY . .

Dockerfile

@@ -1,7 +1,8 @@
 new Crawler({
   appId: 'WQ5FYJCL00',
   apiKey: '[SECRET]',
-  schedule: 'every 1 week',
+  schedule: 'every 7 days',
+  indexPrefix: '',
   rateLimit: 8,
   startUrls: [
     'https://thegraph.com/docs/en/',
@@ -12,10 +13,10 @@ new Crawler({
     'https://thegraph.com/docs/vi/',
     'https://thegraph.com/docs/zh/',
   ],
-  ignoreQueryParams: ['utm_medium', 'utm_source', 'utm_campaign', 'utm_term'],
+  ignoreQueryParams: ['source', 'utm_*'],
   actions: [
     {
-      indexName: 'thegraph',
+      indexName: 'thegraph-docs',
       pathsToMatch: ['https://thegraph.com/docs/**'],
       recordExtractor: ({ helpers }) => {
         return helpers.docsearch({
@@ -37,7 +38,7 @@ new Crawler({
     },
   ],
   initialIndexSettings: {
-    thegraph: {
+    'thegraph-docs': {
       attributesForFaceting: ['type', 'language'],
       attributesToRetrieve: ['hierarchy', 'content', 'anchor', 'url', 'url_without_anchor'],
       attributesToHighlight: ['hierarchy', 'hierarchy_camel', 'content'],

algolia-crawler.config.js

@@ -1,5 +1,6 @@
 import { HTMLAttributes } from 'react'
-import { Text, TextProps, Spacing, buildBorder } from '@edgeandnode/components'
+
+import { buildBorder, Spacing, Text, TextProps } from '@edgeandnode/components'
 
 export type BlockquoteProps = Omit<TextProps & HTMLAttributes<HTMLQuoteElement>, 'color'>
 
@@ -8,8 +9,8 @@ export const Blockquote = ({ children, ...props }: BlockquoteProps) => {
     <Text
       as="blockquote"
       sx={{
-        my: Spacing.XL,
-        p: Spacing.L_XL,
+        my: Spacing['32px'],
+        p: Spacing['24px'],
         borderInlineStart: buildBorder('Purple', '4px'),
         bg: 'Purple8',
       }}

components/Blockquote.tsx

@@ -1,6 +1,7 @@
-import { HTMLAttributes } from 'react'
 import Highlight, { defaultProps, Language, PrismTheme } from 'prism-react-renderer'
-import { Spacing, BorderRadius } from '@edgeandnode/components'
+import { HTMLAttributes } from 'react'
+
+import { BorderRadius, FontFamily, Spacing } from '@edgeandnode/components'
 
 export type CodeBlockProps = HTMLAttributes<HTMLPreElement>
 export type CodeInlineProps = HTMLAttributes<HTMLElement>
@@ -120,17 +121,18 @@ export const CodeBlock = ({ children, ...props }: CodeBlockProps) => {
   }
 
   return (
-    <div sx={{ my: Spacing.L_XL }}>
+    <div sx={{ my: Spacing['24px'] }}>
       <Highlight {...defaultProps} code={code} language={language as Language} theme={theme}>
         {({ className, tokens, getLineProps, getTokenProps }) => (
           <pre
             className={className}
             sx={{
               overflowX: 'auto',
-              p: Spacing.L,
+              p: Spacing['16px'],
               borderRadius: BorderRadius.M,
               border: 'White4',
               bg: 'White4',
+              fontFamily: FontFamily.MONOSPACE,
               fontSize: '16px',
               lineHeight: '24px',
             }}
@@ -156,11 +158,12 @@ export const CodeInline = ({ children, ...props }: CodeInlineProps) => {
   return (
     <code
       sx={{
-        px: '6px',
-        py: Spacing.S,
+        px: Spacing['4px'],
+        py: Spacing['2px'],
         borderRadius: BorderRadius.S,
         border: 'White4',
         bg: 'White4',
+        fontFamily: FontFamily.MONOSPACE,
         fontSize: '0.75em',
       }}
       {...props}

components/Code.tsx

@@ -1,21 +1,22 @@
-import { useRef, useState, useCallback } from 'react'
-import { createPortal } from 'react-dom'
-import { Global } from '@emotion/react'
 import { DocSearchModal, DocSearchProps, useDocSearchKeyboardEvents } from '@docsearch/react'
+import { Global } from '@emotion/react'
+import { useCallback, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
+import { dispatch } from 'use-bus'
+
 import {
-  Text,
-  Flex,
-  Icon,
-  Spacing,
   BorderRadius,
-  Opacity,
-  FontWeight,
-  FontSize,
-  buildTransition,
   buildBorder,
+  buildTransition,
+  Flex,
+  FontSize,
+  FontWeight,
   GlobalTheme,
+  Icon,
+  Opacity,
+  Spacing,
+  Text,
 } from '@edgeandnode/components'
-import { dispatch } from 'use-bus'
 
 import { useI18n } from '../i18n'
 import { EventType } from '../types'
@@ -26,7 +27,6 @@ export function DocSearch(props: DocSearchProps) {
   const searchButtonRef = useRef<HTMLButtonElement>(null)
   const [isOpen, setIsOpen] = useState(false)
   const [initialQuery, setInitialQuery] = useState<string | undefined>(props?.initialQuery || undefined)
-  const { t } = useI18n()
 
   const onOpen = useCallback(() => {
     setIsOpen(true)
@@ -55,15 +55,15 @@ export function DocSearch(props: DocSearchProps) {
   })
 
   return (
-    <div sx={{ px: [Spacing.L, null, null, 0] }}>
+    <div sx={{ px: [Spacing['16px'], null, null, 0] }}>
       {/* TODO: Replace by `Chip` component when it's ready in the new GDS */}
       <button type="button" ref={searchButtonRef} onClick={onOpen} sx={{ width: '100%' }}>
         <Flex.Row
           align="center"
-          gap={Spacing.M}
+          gap={Spacing['8px']}
           sx={{
             height: '32px',
-            px: Spacing.M,
+            px: Spacing['8px'],
             borderRadius: BorderRadius.FULL,
             border: 'White4',
             bg: 'White4',
@@ -80,12 +80,12 @@ export function DocSearch(props: DocSearchProps) {
             as="kbd"
             size="14px"
             color="White48"
-            sx={{ marginInlineStart: 'auto', px: Spacing.M, fontFamily: 'inherit' }}
+            sx={{ marginInlineStart: 'auto', px: Spacing['8px'], fontFamily: 'inherit' }}
           >
             <abbr title="Command" sx={{ textDecoration: 'none' }}>
               ⌘
             </abbr>
-            <span sx={{ marginInlineStart: Spacing.S }}>K</span>
+            <span sx={{ marginInlineStart: Spacing['4px'] }}>K</span>
           </Text.P14>
         </Flex.Row>
       </button>
@@ -128,12 +128,12 @@ export function DocSearch(props: DocSearchProps) {
             },
           },
           '.DocSearch-SearchBar': {
-            padding: `0 ${Spacing.L_XL}`,
+            padding: `0 ${Spacing['24px']}`,
             '&::after': {
               content: `''`,
               zIndex: 100,
               position: 'absolute',
-              insetInline: Spacing.L_XL,
+              insetInline: Spacing['24px'],
               bottom: '-1px',
               borderBottom: buildBorder('White16')(theme),
               backgroundColor: 'var(--docsearch-modal-background)',
@@ -150,7 +150,7 @@ export function DocSearch(props: DocSearchProps) {
             },
           },
           '.DocSearch-Input': {
-            padding: `${Spacing.XL} ${Spacing.L}`,
+            padding: `${Spacing['32px']} ${Spacing['16px']}`,
             outline: 'none',
             fontSize: FontSize['18px'],
           },
@@ -163,8 +163,8 @@ export function DocSearch(props: DocSearchProps) {
             },
           },
           '.DocSearch-Cancel': {
-            marginInlineStart: Spacing.L,
-            marginInlineEnd: Spacing.S,
+            marginInlineStart: Spacing['16px'],
+            marginInlineEnd: Spacing['4px'],
             color: 'inherit',
           },
           '.DocSearch-Dropdown': {
@@ -175,16 +175,16 @@ export function DocSearch(props: DocSearchProps) {
             scrollPaddingTop: '32px',
           },
           '.DocSearch-Dropdown-Container': {
-            padding: `${Spacing.L_XL} ${Spacing.L}`,
-            paddingBottom: Spacing.XXL,
+            padding: `${Spacing['24px']} ${Spacing['16px']}`,
+            paddingBottom: Spacing['64px'],
             [`@media (min-width: ${BREAKPOINT})`]: {
-              padding: `${Spacing.L_XL} ${Spacing.XL}`,
+              padding: `${Spacing['24px']} ${Spacing['32px']}`,
             },
           },
           '.DocSearch-Hits': {
             width: 'auto',
             '& + .DocSearch-Hits': {
-              marginTop: Spacing.L,
+              marginTop: Spacing['16px'],
             },
             mark: {
               color: 'inherit',
@@ -193,9 +193,9 @@ export function DocSearch(props: DocSearchProps) {
           },
           '.DocSearch-Hit-source': {
             margin: 0,
-            marginBottom: Spacing.XS,
-            padding: `0 ${Spacing.L}`,
-            fontWeight: FontWeight.Medium,
+            marginBottom: Spacing['2px'],
+            padding: `0 ${Spacing['16px']}`,
+            fontWeight: FontWeight.MEDIUM,
             fontSize: FontSize['12px'],
             textTransform: 'uppercase',
             letterSpacing: '0.15em',
@@ -204,7 +204,7 @@ export function DocSearch(props: DocSearchProps) {
           '.DocSearch-Hit': {
             padding: 0,
             a: {
-              padding: `0 ${Spacing.L}`,
+              padding: `0 ${Spacing['16px']}`,
               borderRadius: BorderRadius.S,
             },
             '&[aria-selected=true] a': {
@@ -213,10 +213,10 @@ export function DocSearch(props: DocSearchProps) {
           },
           '.DocSearch-Hit-Container': {
             height: 'auto',
-            padding: `${Spacing.M_L} 0`,
+            padding: `${Spacing['12px']} 0`,
           },
           '.DocSearch-Hit-Tree': {
-            width: Spacing.L,
+            width: Spacing['16px'],
             height: 0,
             opacity: 0,
           },
@@ -228,19 +228,19 @@ export function DocSearch(props: DocSearchProps) {
           },
           '.DocSearch-Hit-title': {
             fontSize: FontSize['16px'],
-            fontWeight: FontWeight.Semibold,
+            fontWeight: FontWeight.SEMIBOLD,
             overflow: 'hidden',
             textOverflow: 'ellipsis',
           },
           '.DocSearch-Hit-path': {
-            marginTop: Spacing.S,
+            marginTop: Spacing['4px'],
             fontSize: FontSize['16px'],
-            fontWeight: FontWeight.Normal,
+            fontWeight: FontWeight.REGULAR,
             overflow: 'hidden',
             textOverflow: 'ellipsis',
           },
           '.DocSearch-Hit-action': {
-            marginInlineStart: Spacing.L,
+            marginInlineStart: Spacing['16px'],
           },
           '.DocSearch-HitsFooter': {
             display: 'none',
@@ -249,7 +249,7 @@ export function DocSearch(props: DocSearchProps) {
             position: 'fixed',
             bottom: 0,
             insetInline: 0,
-            padding: Spacing.L,
+            padding: Spacing['16px'],
             backgroundColor: 'transparent',
             boxShadow: 'none',
             '&::before': {
@@ -278,16 +278,16 @@ export function DocSearch(props: DocSearchProps) {
           },
           '.DocSearch-Screen-Icon': {
             padding: 0,
-            marginBottom: Spacing.L,
+            marginBottom: Spacing['16px'],
             display: 'flex',
             justifyContent: 'center',
           },
           '.DocSearch-NoResults': {
-            padding: `${Spacing.XXL} 0`,
+            padding: `${Spacing['64px']} 0`,
           },
           '.DocSearch-NoResults-Prefill-List': {
             padding: 0,
-            marginTop: Spacing.XL,
+            marginTop: Spacing['32px'],
             textAlign: 'center',
           },
         })}