use Nextra's _meta.js for declaring sidebar titles and order (#314)

* just refactoring

refactor

refactor getNavItems from async to sync

fixes for [locale]

* I forget to remove these pages

* rollback

* try fix docker

* rollback

* prettier

* pin pnpm in docker to v7

* apply review changes

* Update website/pages/es/cookbook/migrating-a-subgraph.mdx

Co-authored-by: Benoît Rouleau <[email protected]>

---------

Co-authored-by: Benoît Rouleau <[email protected]>

Author: Dimitri POSTOLOV

Dockerfile

@@ -3,7 +3,7 @@ FROM node:18-alpine as builder
 ENV PNPM_HOME="/usr/bin"
 
 RUN apk add --no-cache git
-RUN npm install -g pnpm
+RUN npm install -g pnpm@7
 
 WORKDIR /app
 

package.json

@@ -7,8 +7,8 @@
     "build": "pnpm -r build",
     "start": "pnpm --filter @graphprotocol/docs start",
     "export": "pnpm --filter @graphprotocol/docs export",
-    "lint": "pnpm typecheck && eslint . --ext .js,.jsx,.ts,.tsx,.mjs --cache --max-warnings 0 && pnpm prettier:check",
-    "lint:fix": "pnpm typecheck; eslint . --ext .js,.jsx,.ts,.tsx,.mjs --fix; pnpm prettier; exit 0",
+    "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",
@@ -28,7 +28,7 @@
     "typescript": "5.0.2"
   },
   "lint-staged": {
-    "**/*.{js,jsx,ts,tsx,mjs}": "eslint --fix",
-    "**/*.{js,jsx,ts,tsx,mjs,mdx,json}": "prettier --write"
+    "**/*.{js,jsx,ts,tsx,mjs,cjs}": "eslint --fix",
+    "**/*.{js,jsx,ts,tsx,mjs,cjs,md,mdx,yml,yaml,json}": "prettier --write"
   }
 }

pnpm-lock.yaml

@@ -14,8 +14,8 @@ export const EditPageLink = ({ mobile = false, ...props }: EditPageLinkProps) =>
   const { t } = useI18n()
 
   // If the current page is in a language other than English, link to the English version, as translations are handled by Crowdin
-  const { pagePath: _pagePath } = useContext(NavContext)!
-  const pagePathSegments = _pagePath.split('/')
+  const { filePath } = useContext(NavContext)!
+  const pagePathSegments = filePath.split('/')
   pagePathSegments[1] = ['en', '[locale]'].includes(pagePathSegments[1]) ? pagePathSegments[1] : 'en'
   const pagePath = pagePathSegments.join('/')
 

website/components/EditPageLink.tsx

@@ -1,29 +1,11 @@
-import { GetStaticPaths, GetStaticProps, NextPage } from 'next'
-import { Heading as NextraHeading } from 'nextra'
-import { useMemo } from 'react'
+import { GetStaticPaths, GetStaticProps } from 'next'
 
-import {
-  BorderRadius,
-  buildBorder,
-  buildShadow,
-  buildTransition,
-  Flex,
-  Spacing,
-  Text,
-  translate,
-} from '@edgeandnode/components'
+import { BorderRadius, buildBorder, buildShadow, buildTransition, Flex, Spacing, Text } from '@edgeandnode/components'
 
 import { Heading, Image, Link, LinkInline, Paragraph } from '@/components'
-import { AppLocale, supportedLocales, translations, useI18n } from '@/i18n'
-import MDXLayout, { Frontmatter } from '@/layout'
-import { getNavItems, NavItem } from '@/navigation'
+import { supportedLocales, useI18n } from '@/i18n'
 
-export const frontmatter = (locale: AppLocale): Frontmatter => ({
-  title: translate(translations, locale, 'index.title'),
-})
-
-// TODO: Make DRY
-export const getStaticPaths: GetStaticPaths = async () => {
+export const getStaticPaths: GetStaticPaths = () => {
   return {
     paths: supportedLocales.map((locale) => ({
       params: { locale },
@@ -32,55 +14,16 @@ export const getStaticPaths: GetStaticPaths = async () => {
   }
 }
 
-// TODO: Make DRY
-export const getStaticProps: GetStaticProps = async (context) => {
-  const locale = context.params!.locale as AppLocale
-  const navItems = await getNavItems(locale)
-
-  return {
-    props: {
-      locale,
-      navItems,
-    },
-  }
+export const getStaticProps: GetStaticProps = () => {
+  return { props: {} }
 }
 
-type IndexProps = { navItems: NavItem[] }
-
-const Index: NextPage<IndexProps> = ({ navItems }: IndexProps) => {
-  const { t, locale } = useI18n()
-
-  const headings: NextraHeading[] = useMemo(
-    () => [
-      {
-        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,
-      },
-    ],
-    [t]
-  )
+export default function IndexPage() {
+  const { t } = useI18n()
 
   return (
-    <MDXLayout
-      // @ts-expect-error: we don't need another properties
-      pageOpts={{
-        filePath: `pages/[locale]/index.tsx`,
-        frontMatter: frontmatter(locale as AppLocale),
-        headings,
-      }}
-      pageProps={{ navItems }}
-    >
+    <>
+      <Heading.H1>{t('index.title')}</Heading.H1>
       <Paragraph>{t('index.intro')}</Paragraph>
       <ul
         sx={{
@@ -123,8 +66,8 @@ const Index: NextPage<IndexProps> = ({ navItems }: IndexProps) => {
             description: t('index.shortcuts.migrateFromHostedService.description'),
             href: '/cookbook/migrating-a-subgraph',
           },
-        ].map((card, index) => (
-          <li key={index} sx={{ aspectRatio: '258/136' }}>
+        ].map((card) => (
+          <li key={card.href} sx={{ aspectRatio: '258/136' }}>
             <Link
               href={card.href}
               sx={{
@@ -237,8 +180,8 @@ const Index: NextPage<IndexProps> = ({ navItems }: IndexProps) => {
             description: t('index.products.products.hostedService.description'),
             href: '/deploying/hosted-service',
           },
-        ].map((product, index) => (
-          <Flex.Column as="li" key={index}>
+        ].map((product) => (
+          <Flex.Column as="li" key={product.href}>
             <div sx={{ mb: Spacing['16px'] }}>
               <Text as="h3" weight="SEMIBOLD" size="20px" sx={{ textShadow: buildShadow('S') }}>
                 {product.title}
@@ -315,7 +258,12 @@ const Index: NextPage<IndexProps> = ({ navItems }: IndexProps) => {
                   <Image
                     src={network.image}
                     alt=""
-                    sx={{ mb: Spacing['8px'], width: '40px', height: '40px', transition: buildTransition('TRANSFORM') }}
+                    sx={{
+                      mb: Spacing['8px'],
+                      width: '40px',
+                      height: '40px',
+                      transition: buildTransition('TRANSFORM'),
+                    }}
                   />
                   {network.title}
                   {network.beta ? '*' : ''}
@@ -428,8 +376,8 @@ const Index: NextPage<IndexProps> = ({ navItems }: IndexProps) => {
               href: 'https://base.org/',
               beta: true,
             },
-          ].map((network, index) => (
-            <Flex.Column as="li" key={index}>
+          ].map((network) => (
+            <Flex.Column as="li" key={network.href}>
               <Text as="div" size="14px" color="White48" sx={{ textAlign: 'center' }}>
                 <Link
                   href={network.href}
@@ -446,7 +394,12 @@ const Index: NextPage<IndexProps> = ({ navItems }: IndexProps) => {
                   <Image
                     src={network.image}
                     alt=""
-                    sx={{ mb: Spacing['8px'], width: '40px', height: '40px', transition: buildTransition('TRANSFORM') }}
+                    sx={{
+                      mb: Spacing['8px'],
+                      width: '40px',
+                      height: '40px',
+                      transition: buildTransition('TRANSFORM'),
+                    }}
                   />
                   {network.title}
                   {network.beta ? '*' : ''}
@@ -459,8 +412,6 @@ const Index: NextPage<IndexProps> = ({ navItems }: IndexProps) => {
           *{t('index.supportedNetworks.betaWarning')}
         </Text.P14>
       </div>
-    </MDXLayout>
+    </>
   )
 }
-
-export default Index

website/pages/[locale]/index.tsx renamed to website/components/IndexPage.tsx

@@ -2,7 +2,6 @@ import merge from 'lodash/merge'
 import mixpanel from 'mixpanel-browser'
 import { AppProps } from 'next/app'
 import NextLink from 'next/link'
-import { useRouter } from 'next/router'
 import { DefaultSeo, DefaultSeoProps } from 'next-seo'
 import { useMemo } from 'react'
 
@@ -60,8 +59,7 @@ const DefaultSeoWithLocale = () => {
   return <DefaultSeo {...seoProps} />
 }
 
-const MyApp = ({ Component, pageProps }: AppProps) => {
-  const router = useRouter()
+const MyApp = ({ Component, pageProps, router }: AppProps) => {
   const localeSwitcher = useMemo(() => <LocaleSwitcher key="localeSwitcher" />, [])
 
   return (

website/components/_app.tsx

@@ -1,25 +1,19 @@
 import { NextSeoProps } from 'next-seo'
-import { Context, createContext } from 'react'
+import { Heading } from 'nextra'
+import { createContext } from 'react'
 
 export type Frontmatter = {
   title?: string
-  navTitle?: string
   description?: string
   socialImage?: string
   seo?: NextSeoProps
 }
 
-export type OutlineItem = {
-  id: string
-  title: string
-  level: 1 | 2 | 3 | 4 | 5 | 6
-}
-
 export type DocumentContextProps = {
-  frontmatter?: Frontmatter
-  outline: OutlineItem[]
+  frontMatter: Frontmatter
+  headings: Heading[]
   markOutlineItem: (id: string, inOrAboveView: boolean) => void
   highlightedOutlineItemId: string | null
 }
 
-export const DocumentContext = createContext(null) as Context<DocumentContextProps | null>
+export const DocumentContext = createContext<DocumentContextProps | null>(null)