extract theme as separate package @graphprotocol/theme (#336)

.gitignore

@@ -41,3 +41,4 @@ yarn-error.log*
 
 */public/sitemap*.xml
 .eslintcache
+dist/

.prettierignore

@@ -2,3 +2,4 @@
 .next
 /out/
 pnpm-lock.yaml
+dist/

package.json

@@ -3,28 +3,29 @@
   "private": true,
   "packageManager": "[email protected]",
   "scripts": {
-    "dev": "pnpm --filter @graphprotocol/docs dev",
     "build": "pnpm -r build",
-    "start": "pnpm --filter @graphprotocol/docs start",
-    "export": "pnpm --filter @graphprotocol/docs export",
-    "lint": "pnpm typecheck && eslint --cache --ext .js,.jsx,.ts,.tsx,.mjs --max-warnings 0 . && pnpm prettier:check",
-    "lint:fix": "pnpm typecheck && eslint --cache --ext .js,.jsx,.ts,.tsx,.mjs --fix . && pnpm prettier",
-    "typecheck": "pnpm --filter @graphprotocol/docs typecheck",
-    "prettier": "prettier . --loglevel warn --write",
-    "prettier:check": "prettier . --loglevel warn --check",
+    "dev": "pnpm --filter @graphprotocol/docs dev",
     "docker:build": "DOCKER_BUILDKIT=1 docker build . -t docs --no-cache",
-    "docker:up": "docker run --rm -it -p 3000:80 -v \"$(pwd)/nginx.conf:/etc/nginx/nginx.conf\" docs",
     "docker:clean": "docker builder prune",
-    "prepare": "husky install && chmod +x .husky/*",
+    "docker:up": "docker run --rm -it -p 3000:80 -v \"$(pwd)/nginx.conf:/etc/nginx/nginx.conf\" docs",
+    "export": "pnpm --filter @graphprotocol/docs export",
+    "lint": "pnpm typecheck && eslint --ignore-path .gitignore --cache --ext .js,.jsx,.ts,.tsx,.mjs --max-warnings 0 . && pnpm prettier:check",
+    "lint:fix": "pnpm typecheck && eslint --ignore-path .gitignore --cache --ext .js,.jsx,.ts,.tsx,.mjs --fix . && pnpm prettier",
     "pre-commit": "lint-staged --concurrent false",
-    "pre-push": "pnpm build"
+    "pre-push": "pnpm build",
+    "prepare": "husky install && chmod +x .husky/*",
+    "prettier": "prettier . --loglevel warn --write",
+    "prettier:check": "prettier . --loglevel warn --check",
+    "start": "pnpm --filter @graphprotocol/docs start",
+    "typecheck": "pnpm --filter @graphprotocol/docs typecheck"
   },
   "devDependencies": {
     "@edgeandnode/eslint-config": "^1.3.1",
     "eslint": "^8.36.0",
     "husky": "^8.0.3",
     "lint-staged": "^13.2.0",
     "prettier": "^2.8.6",
+    "prettier-plugin-pkg": "^0.17.1",
     "typescript": "5.0.2"
   },
   "lint-staged": {

packages/nextra-theme/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@graphprotocol/nextra-theme",
+  "version": "0.0.0",
+  "description": "A Nextra theme for The Graph documentation sites.",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "types": "./dist/index.d.ts",
+  "typesVersions": {
+    "*": {
+      ".": [
+        "./dist/index.d.ts"
+      ]
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup"
+  },
+  "peerDependencies": {
+    "@edgeandnode/components": "^27.4.1",
+    "@emotion/react": "^11.10.6",
+    "next": "^13.2.4",
+    "next-seo": "^5.15.0",
+    "nextra": "^2.3.0",
+    "react-dom": "^18.2.0",
+    "theme-ui": "^0.15.5"
+  },
+  "dependencies": {
+    "@docsearch/react": "^3.3.3",
+    "@radix-ui/react-collapsible": "1.0.2",
+    "@radix-ui/react-visually-hidden": "^1.0.2",
+    "lodash": "^4.17.21",
+    "prism-react-renderer": "^1.3.5",
+    "react-intersection-observer": "^9.4.3",
+    "react-use": "^17.4.0"
+  },
+  "devDependencies": {
+    "@edgeandnode/components": "^27.4.1",
+    "@emotion/react": "^11.10.6",
+    "@types/lodash": "^4.14.191",
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "next": "^13.2.4",
+    "next-seo": "^5.15.0",
+    "nextra": "2.3.0",
+    "react": "18.2.0",
+    "react-dom": "^18.2.0",
+    "theme-ui": "^0.15.5",
+    "tsup": "6.7.0"
+  },
+  "sideEffects": false
+}

website/components/Difficulty.tsx → packages/nextra-theme/src/components/Difficulty.tsx

@@ -1,8 +1,8 @@
-import { useI18n } from '@/i18n'
+import { useI18n } from '@edgeandnode/components'
 
 // TODO: Refactor this component
 export const Difficulty = ({ level }: { level: string }) => {
-  const { t } = useI18n()
+  const { t } = useI18n<any>()
 
   return (
     <div

website/components/EditPageLink.tsx → packages/nextra-theme/src/components/EditPageLink.tsx

@@ -1,17 +1,26 @@
 import { HTMLAttributes, useContext } from 'react'
 
-import { BorderRadius, buildShadow, buildTransition, Flex, Icon, Opacity, Spacing, Text } from '@edgeandnode/components'
+import {
+  BorderRadius,
+  buildShadow,
+  buildTransition,
+  Flex,
+  Icon,
+  Opacity,
+  Spacing,
+  Text,
+  useI18n,
+} from '@edgeandnode/components'
 
 import { Link } from '@/components'
-import { useI18n } from '@/i18n'
 import { NavContext } from '@/layout/NavContext'
 
 export type EditPageLinkProps = {
   mobile?: boolean
 } & Omit<HTMLAttributes<HTMLElement>, 'children'>
 
 export const EditPageLink = ({ mobile = false, ...props }: EditPageLinkProps) => {
-  const { t } = useI18n()
+  const { t } = useI18n<any>()
 
   // If the current page is in a language other than English, link to the English version, as translations are handled by Crowdin
   const { filePath } = useContext(NavContext)!

website/components/Heading.tsx → packages/nextra-theme/src/components/Heading.tsx

@@ -3,10 +3,9 @@ import { HTMLAttributes, useContext } from 'react'
 import { useInView } from 'react-intersection-observer'
 import { useDebounce } from 'react-use'
 
-import { buildShadow, buildTransition, Opacity, Spacing, Text, TextProps } from '@edgeandnode/components'
+import { buildShadow, buildTransition, Opacity, Spacing, Text, TextProps, useI18n } from '@edgeandnode/components'
 
 import { LinkInline } from '@/components'
-import { useI18n } from '@/i18n'
 import { DocumentContext } from '@/layout/DocumentContext'
 
 export type HeadingProps = TextProps & {
@@ -29,7 +28,7 @@ const BaseHeading = ({ level, id, children, ...props }: HeadingProps) => {
     100,
     [id, inOrAboveView, markOutlineItem]
   )
-  const { t } = useI18n()
+  const { t } = useI18n<any>()
 
   return (
     <Text ref={ref} as={`h${level}`} id={id} weight="SEMIBOLD" color="White" sx={{ whiteSpace: 'nowrap' }} {...props}>

website/components/Link.tsx → packages/nextra-theme/src/components/Link.tsx

@@ -1,14 +1,12 @@
 import NextLink, { LinkProps as NextLinkProps } from 'next/link'
 import { AnchorHTMLAttributes } from 'react'
 
-import { buildShadow, buildTransition, useTheme } from '@edgeandnode/components'
-
-import { AppLocale, useI18n } from '@/i18n'
+import { buildShadow, buildTransition, useI18n, useTheme } from '@edgeandnode/components'
 
 export type LinkProps = Pick<NextLinkProps, 'replace' | 'scroll' | 'shallow' | 'prefetch'> &
   Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href'> & {
     href?: NextLinkProps['href']
-    locale?: AppLocale
+    locale?: string
   }
 
 export const Link = ({

website/components/NavTree.tsx → packages/nextra-theme/src/components/NavTree.tsx

@@ -9,14 +9,13 @@ import {
   Flex,
   Icon,
   IconProps,
-  Locale,
   Spacing,
   Text,
   TextProps,
+  useI18n,
 } from '@edgeandnode/components'
 
 import { Link, LinkProps } from '@/components'
-import { useI18n } from '@/i18n'
 
 const animationExpand = keyframes({
   from: { height: 0 },
@@ -127,7 +126,7 @@ const NavTreeGroup = ({ active = false, children, ...props }: NavTreeGroupProps)
 const NavTreeGroupHeading = ({ children, buttonProps = {}, ...props }: NavTreeGroupHeadingProps) => {
   const { sx: buttonSx, ...buttonOtherProps } = buttonProps
   const context = useContext(NavTreeGroupContext)
-  const { t } = useI18n()
+  const { t } = useI18n<any>()
 
   return (
     <div {...props}>
@@ -189,7 +188,14 @@ const NavTreeDivider = (props: NavTreeDividerProps) => {
 
 const NavTreeHeading = ({ children, ...props }: NavTreeHeadingProps) => {
   return (
-    <li sx={{ mt: Spacing['24px'], mb: Spacing['12px'], paddingInlineStart: Spacing['24px'] }} {...props}>
+    <li
+      sx={{
+        mt: Spacing['24px'],
+        mb: Spacing['12px'],
+        paddingInlineStart: Spacing['24px'],
+      }}
+      {...props}
+    >
       <Text.C12 color="White48">{children}</Text.C12>
     </li>
   )

website/components/VideoEmbed.tsx → packages/nextra-theme/src/components/VideoEmbed.tsx

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react'
 
-import { useI18n } from '@/i18n'
+import { useI18n } from '@edgeandnode/components'
 
 export type VideoProps = (
   | {
@@ -19,7 +19,7 @@ export type VideoProps = (
 } & HTMLAttributes<HTMLElement>
 
 export const VideoEmbed = ({ src, youtube, title, ...props }: VideoProps) => {
-  const { t } = useI18n()
+  const { t } = useI18n<any>()
 
   return (
     <figure sx={{ paddingBottom: `${100 / (16 / 9)}%` }} {...props}>

website/layout/MDXLayout.tsx → packages/nextra-theme/src/index.tsx

@@ -1,14 +1,14 @@
 import merge from 'lodash/merge'
 import { NextSeo, NextSeoProps } from 'next-seo'
-import { Folder, Heading as NextraHeading, MetaJsonFile, NextraThemeLayoutProps } from 'nextra'
+import { NextraThemeLayoutProps } from 'nextra'
 import { useFSRoute } from 'nextra/hooks'
 import { MDXProvider } from 'nextra/mdx'
 import { Item, normalizePages } from 'nextra/normalize-pages'
-import { useCallback, useMemo } from 'react'
+import { ReactElement, useCallback, useMemo } from 'react'
 import { useSet } from 'react-use'
 import { ThemeUIStyleObject } from 'theme-ui'
 
-import { Divider, DividerProps, Flex, Spacing } from '@edgeandnode/components'
+import { Divider, DividerProps, Flex, Spacing, useI18n } from '@edgeandnode/components'
 
 import {
   Blockquote,
@@ -18,14 +18,14 @@ import {
   EditPageLink,
   Heading,
   Image,
+  Link,
   LinkInline,
   ListOrdered,
   ListUnordered,
   Paragraph,
   Table,
   VideoEmbed,
 } from '@/components'
-import { useI18n } from '@/i18n'
 import { DocumentContext, MDXLayoutNav, MDXLayoutOutline, MDXLayoutPagination, NavContext } from '@/layout'
 
 const mdxComponents = {
@@ -58,45 +58,16 @@ const mdxStyles: ThemeUIStyleObject = {
   },
 }
 
-export function MDXLayout({ children, pageOpts }: NextraThemeLayoutProps) {
-  const { frontMatter, filePath, pageMap } = pageOpts
+export { Heading, Image, Link, LinkInline, Paragraph }
+
+export default function NextraLayout({ children, pageOpts }: NextraThemeLayoutProps): ReactElement {
+  const { frontMatter, filePath, pageMap, headings } = pageOpts
   const { locale, defaultLocale } = useI18n()
   const fsPath = useFSRoute()
-  const { t } = useI18n()
-
-  const headings: NextraHeading[] = useMemo(
-    () =>
-      filePath === 'pages/[locale]/index.mdx'
-        ? [
-            {
-              id: 'network-roles',
-              value: t('index.networkRoles.title'),
-              depth: 2,
-            },
-            {
-              id: 'products',
-              value: t('index.products.title'),
-              depth: 2,
-            },
-            {
-              id: 'supported-networks',
-              value: t('index.supportedNetworks.title'),
-              depth: 2,
-            },
-          ]
-        : pageOpts.headings,
-    [pageOpts.headings, filePath, t]
-  )
 
   const args = useMemo(() => {
-    const filteredPageMap = pageMap.find(
-      (pageItem): pageItem is Folder => pageItem.kind === 'Folder' && pageItem.name === locale
-    )!.children
-    filteredPageMap.find((pageItem): pageItem is MetaJsonFile => pageItem.kind === 'Meta')!.data.index =
-      t('index.title')
-
     const result = normalizePages({
-      list: filteredPageMap,
+      list: pageMap,
       locale,
       defaultLocale: defaultLocale,
       route: fsPath,
@@ -122,7 +93,7 @@ export function MDXLayout({ children, pageOpts }: NextraThemeLayoutProps) {
         (item) => item.type !== 'separator' && item.type !== 'heading' && item.route !== ''
       ),
     }
-  }, [defaultLocale, fsPath, locale, pageMap, t])
+  }, [defaultLocale, fsPath, locale, pageMap])
 
   // Provide `markOutlineItem` to the `DocumentContext` so child `Heading` components can mark outline items as "in or above view" or not
   const [