Benface/Nextra

.github/workflows/ci-cd-pull-request.yml

@@ -18,6 +18,17 @@ jobs:
       - name: Checkout the repo
         uses: actions/checkout@v3
 
+      - name: Set up pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 7.28.0
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Lint
+        run: pnpm lint
+
       - name: Build Docker image
         uses: docker/build-push-action@v4
         with:

package.json

@@ -7,11 +7,11 @@
     "build": "pnpm -r build",
     "start": "pnpm --filter @graphprotocol/docs start",
     "export": "pnpm --filter @graphprotocol/docs export",
-    "lint": "eslint . --ext .js,.jsx,.ts,.tsx,.mjs && pnpm prettier:check && pnpm typecheck",
-    "lint:fix": "eslint . --fix --ext .js,.jsx,.ts,.tsx,.mjs && pnpm prettier && pnpm typecheck",
+    "lint": "eslint . --ext .js,.jsx,.ts,.tsx,.mjs; pnpm prettier:check; pnpm typecheck",
+    "lint:fix": "eslint . --fix --ext .js,.jsx,.ts,.tsx,.mjs; pnpm prettier; pnpm typecheck",
     "prettier": "prettier . --write",
     "prettier:check": "prettier . --check",
-    "typecheck": "tsc --noEmit",
+    "typecheck": "pnpm --filter @graphprotocol/docs typecheck",
     "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",

website/components/DocSearch.tsx

@@ -127,7 +127,8 @@ export function DocSearch(props: DocSearchProps) {
               content: `''`,
               zIndex: 100,
               position: 'absolute',
-              insetInline: Spacing['24px'],
+              left: Spacing['24px'],
+              right: Spacing['24px'],
               bottom: '-1px',
               borderBottom: buildBorder('White16')(theme),
               backgroundColor: 'var(--docsearch-modal-background)',
@@ -242,14 +243,18 @@ export function DocSearch(props: DocSearchProps) {
           '.DocSearch-Footer': {
             position: 'fixed',
             bottom: 0,
-            insetInline: 0,
+            left: 0,
+            right: 0,
             padding: Spacing['16px'],
             backgroundColor: 'transparent',
             boxShadow: 'none',
             '&::before': {
               content: `''`,
               position: 'absolute',
-              inset: 0,
+              left: 0,
+              right: 0,
+              top: 0,
+              bottom: 0,
               backgroundColor: 'var(--docsearch-modal-background)',
               opacity: Opacity['88%'],
               [`@media (min-width: ${BREAKPOINT})`]: {

website/components/EditPageLink.tsx

@@ -16,12 +16,12 @@ export const EditPageLink = ({ mobile = false, ...props }: EditPageLinkProps) =>
   // 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('/')
-  pagePathSegments[0] = ['en', '[locale]'].includes(pagePathSegments[0]) ? pagePathSegments[0] : 'en'
+  pagePathSegments[1] = ['en', '[locale]'].includes(pagePathSegments[1]) ? pagePathSegments[1] : 'en'
   const pagePath = pagePathSegments.join('/')
 
   return (
     <Link
-      href={`https://github.com/graphprotocol/docs/blob/main/pages/${pagePath}`}
+      href={`https://github.com/graphprotocol/docs/blob/main/website/${pagePath}`}
       target="_blank"
       sx={{
         display: 'block',

website/components/NavTree.tsx

@@ -90,7 +90,9 @@ const NavTreeItem = ({
             size="12px"
             sx={{
               position: 'absolute',
+              left: Spacing['4px'],
               insetInlineStart: Spacing['4px'],
+              insetInlineEnd: 'auto',
               top: 0,
               bottom: 0,
               my: 'auto',

website/components/_app.tsx

@@ -76,12 +76,13 @@ const MyApp = ({ Component, pageProps }: AppProps) => {
             token: process.env.MIXPANEL_TOKEN ?? null,
           }}
         >
-          <div sx={{ position: 'absolute', inset: 0, overflow: 'hidden' }}>
+          <div sx={{ position: 'absolute', left: 0, right: 0, top: 0, bottom: 0, overflow: 'hidden' }}>
             <div
               sx={{
                 position: 'absolute',
                 top: 0,
-                insetInline: 0,
+                left: 0,
+                right: 0,
                 minHeight: '768px',
                 backgroundImage: `url('${process.env.BASE_PATH}/img/page-background.png')`,
                 backgroundSize: 'cover',

website/layout/MDXLayoutNav.tsx

@@ -211,7 +211,7 @@ export const MDXLayoutNav = ({ mobile = false }: { mobile?: boolean }) => {
                   active={currentPage?.path === navItem.path}
                   sx={mobile ? { py: 0 } : {}}
                   linkProps={{ sx: mobile ? {} : { paddingInlineEnd: 0 } }}
-                  diamondProps={{ sx: mobile ? { insetInlineStart: '6px' } : {} }}
+                  diamondProps={{ sx: mobile ? { left: '6px', insetInlineStart: '6px', insetInlineEnd: 'auto' } : {} }}
                 >
                   {navItem.title}
                 </NavTree.Item>

website/next-sitemap.config.cjs

@@ -1,5 +1,5 @@
 /** @type {import('next-sitemap').IConfig} */
 module.exports = {
-  siteUrl: process.env.SITE_URL || 'https://thegraph.com/docs/',
+  siteUrl: process.env.SITE_URL,
   generateIndexSitemap: false,
 }

website/pages/[locale]/index.tsx

@@ -75,7 +75,7 @@ const Index: NextPage<IndexProps> = ({ navItems }: IndexProps) => {
     <MDXLayout
       // @ts-expect-error: we don't need another properties
       pageOpts={{
-        filePath: `[locale]/index.tsx`,
+        filePath: `pages/[locale]/index.tsx`,
         frontMatter: frontmatter(locale as AppLocale),
         headings,
       }}

website/pages/_app.mdx

@@ -1,5 +1,4 @@
-{/* _app.mdx is not typesafe but _app.tsx is.
-    _app.mdx is used in nextra for better performance and smallest bundle size.
-*/}
+{/* _app.mdx is not typesafe but _app.tsx is. */}  
+{/* _app.mdx is used in nextra for better performance and smallest bundle size. */}
 
 export { default } from '../components/_app'

website/scripts/sitemap-ci.mjs

@@ -15,7 +15,8 @@ async function main() {
 
   const d = parser.parse(await fs.readFile(sitemapPath, 'utf8'))
 
-  const routes = d.urlset.url.map((url) => url.loc.replace(process.env.SITE_URL || `https://thegraph.com/docs`, ``))
+  // TODO: `process.env.SITE_URL` never seems to be set here, so it always falls back to the default value
+  const routes = d.urlset.url.map((url) => url.loc.replace(process.env.SITE_URL || 'https://thegraph.com/docs', ''))
 
   const redirectsPointingToNonExistingStuff = []