diff --git a/.eslintrc.js b/.eslintrc.js new file mode 100644 index 000000000000..ada2548b86af --- /dev/null +++ b/.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'), + }, + }, + ], +} diff --git a/.eslintrc.json b/.eslintrc.json deleted file mode 100644 index 0102d6f6dcde..000000000000 --- a/.eslintrc.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "extends": "next/core-web-vitals", - "rules": { - "react/self-closing-comp": "error", - "@next/next/no-img-element": "off" - } -} diff --git a/.husky/pre-commit b/.husky/pre-commit new file mode 100755 index 000000000000..025779ed2bae --- /dev/null +++ b/.husky/pre-commit @@ -0,0 +1,4 @@ +#!/bin/sh +. "$(dirname "$0")/_/husky.sh" + +yarn pre-commit diff --git a/.husky/pre-push b/.husky/pre-push new file mode 100755 index 000000000000..e57c4b5eb3ea --- /dev/null +++ b/.husky/pre-push @@ -0,0 +1,4 @@ +#!/bin/sh +. "$(dirname "$0")/_/husky.sh" + +yarn pre-push diff --git a/Dockerfile b/Dockerfile index 78d9c420d01a..0fb10586d526 100644 --- a/Dockerfile +++ b/Dockerfile @@ -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 . . diff --git a/algolia-crawler.config.js b/algolia-crawler.config.js index b50b5ed163cf..628a81386371 100644 --- a/algolia-crawler.config.js +++ b/algolia-crawler.config.js @@ -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'], diff --git a/components/Blockquote.tsx b/components/Blockquote.tsx index 34fa562a4257..a32289597631 100644 --- a/components/Blockquote.tsx +++ b/components/Blockquote.tsx @@ -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, 'color'> @@ -8,8 +9,8 @@ export const Blockquote = ({ children, ...props }: BlockquoteProps) => { export type CodeInlineProps = HTMLAttributes @@ -120,17 +121,18 @@ export const CodeBlock = ({ children, ...props }: CodeBlockProps) => { } return ( -
+
{({ className, tokens, getLineProps, getTokenProps }) => ( 
 {
   return (
     (null)
   const [isOpen, setIsOpen] = useState(false)
   const [initialQuery, setInitialQuery] = useState(props?.initialQuery || undefined)
-  const { t } = useI18n()
 
   const onOpen = useCallback(() => {
     setIsOpen(true)
@@ -55,15 +55,15 @@ export function DocSearch(props: DocSearchProps) {
   })
 
   return (
-    

+    

       {/* TODO: Replace by `Chip` component when it's ready in the new GDS */}
       
@@ -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',
           },
         })}
diff --git a/components/EditPageLink.tsx b/components/EditPageLink.tsx
index 2ee511282011..ff239692b223 100644
--- a/components/EditPageLink.tsx
+++ b/components/EditPageLink.tsx
@@ -1,19 +1,10 @@
 import { HTMLAttributes, useContext } from 'react'
-import {
-  Text,
-  Flex,
-  Icon,
-  Spacing,
-  BorderRadius,
-  Opacity,
-  buildShadow,
-  buildTransition,
-  useUniqueId,
-} from '@edgeandnode/components'
 
-import { NavContext } from '@/layout/NavContext'
+import { BorderRadius, buildShadow, buildTransition, Flex, Icon, Opacity, Spacing, Text } from '@edgeandnode/components'
+
 import { Link } from '@/components'
 import { useI18n } from '@/i18n'
+import { NavContext } from '@/layout/NavContext'
 
 export type EditPageLinkProps = {
   mobile?: boolean
@@ -22,31 +13,29 @@ export type EditPageLinkProps = {
 export const EditPageLink = ({ mobile = false, ...props }: EditPageLinkProps) => {
   const { pagePath } = useContext(NavContext)!
   const { t } = useI18n()
-  const linkClass = useUniqueId('class')
 
   return (
     
-      
+      
         
-        
+        
           {t('global.editPage')}
         
         
diff --git a/components/Heading.tsx b/components/Heading.tsx
index 6b1e92ff57cf..29fd0f45bc4e 100644
--- a/components/Heading.tsx
+++ b/components/Heading.tsx
@@ -1,12 +1,13 @@
-import { HTMLAttributes, useContext } from 'react'
-import { Text, TextProps, Spacing, Opacity, buildShadow, buildTransition, useUniqueId } from '@edgeandnode/components'
 import * as VisuallyHidden from '@radix-ui/react-visually-hidden'
+import { HTMLAttributes, useContext } from 'react'
 import { useInView } from 'react-intersection-observer'
 import { useDebounce } from 'react-use'
 
-import { DocumentContext } from '@/layout/DocumentContext'
+import { buildShadow, buildTransition, Opacity, Spacing, Text, TextProps } from '@edgeandnode/components'
+
 import { LinkInline } from '@/components'
 import { useI18n } from '@/i18n'
+import { DocumentContext } from '@/layout/DocumentContext'
 
 export type HeadingProps = TextProps & {
   level: 1 | 2 | 3 | 4 | 5 | 6
@@ -14,8 +15,7 @@ export type HeadingProps = TextProps & {
 
 export type HeadingSpecificProps = Omit
 
-const BaseHeading = ({ level, id, className, children, ...props }: HeadingProps) => {
-  const rootClass = useUniqueId('class')
+const BaseHeading = ({ level, id, children, ...props }: HeadingProps) => {
   const { markOutlineItem } = useContext(DocumentContext)!
   const { ref, inView: inOrAboveView } = useInView({
     rootMargin: '99999px 0px -90% 0px', // consider it "in or above view" if it's anywhere above 10% from the top of the viewport
@@ -32,23 +32,14 @@ const BaseHeading = ({ level, id, className, children, ...props }: HeadingProps)
   const { t } = useI18n()
 
   return (
-    
+    
       {children}
       {id ? (
         
@@ -63,7 +54,7 @@ const BaseHeading = ({ level, id, className, children, ...props }: HeadingProps)
 }
 
 const H1 = (props: HeadingSpecificProps) => {
-  return 
+  return 
 }
 
 const H2 = (props: HeadingSpecificProps) => {
@@ -72,8 +63,8 @@ const H2 = (props: HeadingSpecificProps) => {
       level={2}
       size="32px"
       sx={{
-        mt: Spacing.XL_XXL,
-        mb: Spacing.L_XL,
+        mt: Spacing['48px'],
+        mb: Spacing['24px'],
         textShadow: buildShadow('M'),
       }}
       {...props}
@@ -86,7 +77,7 @@ const H3 = (props: HeadingSpecificProps) => {
     
   )
@@ -97,7 +88,7 @@ const H4 = (props: HeadingSpecificProps) => {
     
   )
@@ -108,7 +99,7 @@ const H5 = (props: HeadingSpecificProps) => {
     
   )
@@ -119,7 +110,7 @@ const H6 = (props: HeadingSpecificProps) => {
     
   )
diff --git a/components/Link.tsx b/components/Link.tsx
index 037ea95c1703..9e0dfb6107f9 100644
--- a/components/Link.tsx
+++ b/components/Link.tsx
@@ -1,6 +1,7 @@
-import { AnchorHTMLAttributes } from 'react'
 import NextLink, { LinkProps as NextLinkProps } from 'next/link'
-import { useTheme, buildShadow, buildTransition } from '@edgeandnode/components'
+import { AnchorHTMLAttributes } from 'react'
+
+import { buildShadow, buildTransition, useTheme } from '@edgeandnode/components'
 
 import { AppLocale, useI18n } from '@/i18n'
 
diff --git a/components/List.tsx b/components/List.tsx
index 194752dcc251..7a82d05e36e9 100644
--- a/components/List.tsx
+++ b/components/List.tsx
@@ -1,5 +1,6 @@
 import { HTMLAttributes } from 'react'
-import { Text, TextProps, Spacing } from '@edgeandnode/components'
+
+import { Spacing, Text, TextProps } from '@edgeandnode/components'
 
 export type ListProps = Omit<
   Omit & {
@@ -16,13 +17,13 @@ export const List = ({ as, children, ...props }: ListProps) => {
       as={as}
       size="18px"
       sx={{
-        mt: Spacing.L,
-        mb: Spacing.L_XL,
-        paddingInlineStat: Spacing.XL,
+        mt: Spacing['16px'],
+        mb: Spacing['24px'],
+        paddingInlineStart: Spacing['32px'],
         listStyleType: as === 'ol' ? 'decimal' : 'disc',
         '& > li': {
           display: 'list-item',
-          my: Spacing.L,
+          my: Spacing['16px'],
         },
       }}
       {...props}
diff --git a/components/NavTree.tsx b/components/NavTree.tsx
index 97c5a5a86e1a..e9ee6b6eaac2 100644
--- a/components/NavTree.tsx
+++ b/components/NavTree.tsx
@@ -1,18 +1,19 @@
-import { HTMLAttributes, createContext, Context, useState, useContext } from 'react'
+import { keyframes } from '@emotion/react'
 import * as Collapsible from '@radix-ui/react-collapsible'
+import { Context, createContext, HTMLAttributes, useContext, useState } from 'react'
+import { SxProp } from 'theme-ui'
+
 import {
-  NewGDSDivider,
-  Text,
-  TextProps,
+  buildTransition,
   Flex,
   Icon,
   IconProps,
-  Spacing,
-  buildTransition,
   Locale,
+  NewGDSDivider,
+  Spacing,
+  Text,
+  TextProps,
 } from '@edgeandnode/components'
-import { keyframes } from '@emotion/react'
-import { SxProp } from 'theme-ui'
 
 import { Link, LinkProps } from '@/components'
 import { useI18n } from '@/i18n'
@@ -49,7 +50,7 @@ export type NavTreeHeadingProps = HTMLAttributes
 const NavTree = ({ children, textProps, ...props }: NavTreeProps) => {
   return (
     
-      
+      
         {children}
       
     
@@ -74,8 +75,8 @@ const NavTreeItem = ({
         target={target}
         sx={{
           display: 'block',
-          px: Spacing.L_XL,
-          py: Spacing.M_L,
+          px: Spacing['24px'],
+          py: Spacing['12px'],
           color: active ? 'White88' : 'White64',
           '&:hover': { color: 'White' },
           transition: buildTransition('COLORS'),
@@ -89,7 +90,7 @@ const NavTreeItem = ({
             size="12px"
             sx={{
               position: 'absolute',
-              insetInlineStart: Spacing.S,
+              insetInlineStart: Spacing['4px'],
               top: 0,
               bottom: 0,
               my: 'auto',
@@ -131,8 +132,8 @@ const NavTreeGroupHeading = ({ children, buttonProps = {}, ...props }: NavTreeGr
       
-        
+        
           {children}
           
-      
    {children}

+      
    {children}

     
   )
 }
 
 const NavTreeDivider = (props: NavTreeDividerProps) => {
   return (
-    
   )
@@ -186,7 +187,7 @@ const NavTreeDivider = (props: NavTreeDividerProps) => {
 
 const NavTreeHeading = ({ children, ...props }: NavTreeHeadingProps) => {
   return (
-    
  • 
+    
  • 
       {children}
     
    • 
   )
diff --git a/components/Paragraph.tsx b/components/Paragraph.tsx
index 62c47cbbdcac..3349c274b415 100644
--- a/components/Paragraph.tsx
+++ b/components/Paragraph.tsx
@@ -1,5 +1,6 @@
 import { HTMLAttributes } from 'react'
-import { Text, TextProps, Spacing } from '@edgeandnode/components'
+
+import { Spacing, Text, TextProps } from '@edgeandnode/components'
 
 export type ParagraphProps = Omit, 'color'>
 
@@ -7,8 +8,8 @@ export const Paragraph = ({ children, ...props }: ParagraphProps) => {
   return (
     , 'color'>
 
 export const Table = ({ children, ...props }: TableProps) => {
   return (
-    
+    
       
+) & {
+  /** Video title */
+  title?: string
+} & HTMLAttributes
+
+export const VideoEmbed = ({ src, youtube, title, ...props }: VideoProps) => {
+  const { t } = useI18n()
 
-export const VideoEmbed = ({ src, youtube, ...props }: VideoProps) => {
   return (