ensure h1 # ... is a first heading on pages, fix 100vh height for 404 page on mobiles (graphql#1669)

* more

* more

* more

* more

* fix height for 404 page

* remove

* remove some spaces to keep height for all examples less for 2 lines

Author: dimaMachina

.eslintrc.cjs

@@ -59,6 +59,9 @@ module.exports = {
       settings: {
         "mdx/code-blocks": true,
       },
+      rules: {
+        "mdx/remark": "error",
+      },
     },
     {
       files: [`**/*.{${MARKDOWN_EXT}}/*.{${CODE_EXT}}`],
@@ -70,5 +73,15 @@ module.exports = {
         "no-prototype-builtins": "off",
       },
     },
+    {
+      files: [
+        `src/pages/blog/**/*.{${MARKDOWN_EXT}}`,
+        `src/code/**/*.{${MARKDOWN_EXT}}`,
+      ],
+      rules: {
+        // Disable `remark-lint-first-heading-level` since in blogs we don't want to enforce the first heading to be an `h1`
+        "mdx/remark": "off",
+      },
+    },
   ],
 }

.remarkrc.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: [
+    "frontmatter", // Required to parse frontmatter for linting
+    "remark-lint-first-heading-level",
+  ],
+}

package.json

@@ -72,6 +72,8 @@
     "eslint-plugin-mdx": "^3.1.5",
     "eslint-plugin-tailwindcss": "3.15.1",
     "prettier": "3.2.5",
+    "remark-frontmatter": "5.0.0",
+    "remark-lint-first-heading-level": "3.1.2",
     "typescript": "^5.4.3"
   },
   "pnpm": {

pnpm-lock.yaml

@@ -21,7 +21,7 @@ export default function Page() {
   }/issues/new?title=${encodeURIComponent(title)}&labels=${labels}`
 
   return (
-    <div className="flex h-screen items-center justify-center flex-col">
+    <div className="flex h-dvh items-center justify-center flex-col">
       <h1 className="text-white text-4xl">404: Page Not Found</h1>
       <a
         href={url}

src/app/not-found.tsx

@@ -5,12 +5,10 @@ class Character {
   getName() {
     return this._name
   }
-
   // homeWorld: Planet
   getHomeWorld() {
     return fetchHomeworld(this._homeworldID)
   }
-
   // friends: [Character]
   getFriends() {
     return this._friendIDs.map(fetchCharacter)

src/components/code-blocks/code2.mdx

@@ -1,8 +1,11 @@
 ---
 title: Events & Meetups
-description:
 ---
 
+{/* title can be removed in Nextra 4, since sidebar title will take from first h1 */}
+
+# Events & Meetups
+
 import { LocationIcon, ClockIcon } from "../../icons"
 import { clsx } from "clsx"
 import { useEffect } from "react"
@@ -90,7 +93,7 @@ export function Events({ events }) {
   )
 }
 
-## Upcoming Events
+## Events
 
 <Events events={upcomingEvents} />
 

src/pages/community/events.mdx

@@ -2,6 +2,10 @@
 title: graphql/error
 ---
 
+{/* title can be removed in Nextra 4, since sidebar title will take from first h1 */}
+
+# `graphql/error`
+
 The `graphql/error` module is responsible for creating and formatting
 GraphQL errors. You can import either from the `graphql/error` module, or from the root `graphql` module. For example:
 

src/pages/graphql-js/error.mdx

@@ -2,6 +2,10 @@
 title: graphql/execution
 ---
 
+{/* title can be removed in Nextra 4, since sidebar title will take from first h1 */}
+
+# `graphql/execution`
+
 The `graphql/execution` module is responsible for the execution phase of
 fulfilling a GraphQL request. You can import either from the `graphql/execution` module, or from the root `graphql` module. For example:
 

src/pages/graphql-js/execution.mdx

@@ -2,6 +2,10 @@
 title: graphql-http
 ---
 
+{/* title can be removed in Nextra 4, since sidebar title will take from first h1 */}
+
+# `graphql-http`
+
 The [official `graphql-http` package](https://github.com/graphql/graphql-http) provides a simple way to create a fully compliant GraphQL server. It has a handler for Node.js native [`http`](https://nodejs.org/api/http.html), together with handlers for well-known frameworks like [Express](https://expressjs.com/), [Fastify](https://www.fastify.io/) and [Koa](https://koajs.com/); as well as handlers for different runtimes like [Deno](https://deno.land/) and [Bun](https://bun.sh/).
 
 ## Express

src/pages/graphql-js/graphql-http.mdx

@@ -2,6 +2,10 @@
 title: graphql
 ---
 
+{/* title can be removed in Nextra 4, since sidebar title will take from first h1 */}
+
+# `graphql`
+
 The `graphql` module exports a core subset of GraphQL functionality for creation
 of GraphQL type systems and servers.
 

src/pages/graphql-js/graphql.mdx

@@ -3,6 +3,10 @@ title: Getting Started With GraphQL.js
 sidebarTitle: Getting Started
 ---
 
+{/* title can be removed in Nextra 4, since sidebar title will take from first h1 */}
+
+# Getting Started With GraphQL.js
+
 ## Prerequisites
 
 Before getting started, you should have Node v6 installed, although the examples should mostly work in previous versions of Node as well. For this guide, we won't use any language features that require transpilation, but we will use some ES6 features like [Promises](http://www.html5rocks.com/en/tutorials/es6/promises/), [classes](http://javascriptplayground.com/blog/2014/07/introduction-to-es6-classes-tutorial/), and [fat arrow functions](https://strongloop.com/strongblog/an-introduction-to-javascript-es6-arrow-functions/), so if you aren't familiar with them you might want to read up on them first.

src/pages/graphql-js/index.mdx

@@ -2,6 +2,10 @@
 title: graphql/language
 ---
 
+{/* title can be removed in Nextra 4, since sidebar title will take from first h1 */}
+
+# `graphql/language`
+
 The `graphql/language` module is responsible for parsing and operating on the GraphQL language. You can import either from the `graphql/language` module, or from the root `graphql` module. For example:
 
 ```js

src/pages/graphql-js/language.mdx

@@ -2,6 +2,10 @@
 title: graphql/type
 ---
 
+{/* title can be removed in Nextra 4, since sidebar title will take from first h1 */}
+
+# `graphql/type`
+
 The `graphql/type` module is responsible for defining GraphQL types and schema. You can import either from the `graphql/type` module, or from the root `graphql` module. For example:
 
 ```js

src/pages/graphql-js/type.mdx

@@ -2,6 +2,10 @@
 title: graphql/utilities
 ---
 
+{/* title can be removed in Nextra 4, since sidebar title will take from first h1 */}
+
+# `graphql/utilities`
+
 The `graphql/utilities` module contains common useful computations to use with
 the GraphQL language and type objects. You can import either from the `graphql/utilities` module, or from the root `graphql` module. For example:
 

src/pages/graphql-js/utilities.mdx

@@ -2,6 +2,10 @@
 title: graphql/validation
 ---
 
+{/* title can be removed in Nextra 4, since sidebar title will take from first h1 */}
+
+# `graphql/validation`
+
 The `graphql/validation` module fulfills the Validation phase of fulfilling a
 GraphQL result. You can import either from the `graphql/validation` module, or from the root `graphql` module. For example:
 
@@ -12,17 +16,15 @@ var { validate } = require("graphql/validation") // CommonJS
 
 ## Overview
 
-<ul class="apiIndex">
+<ul className="apiIndex">
   <li>
     <a href="#validate">
-      <pre>function validate</pre>
-      Validates an AST against a provided Schema.
+      `function validate` Validates an AST against a provided Schema.
     </a>
   </li>
   <li>
     <a href="#specifiedrules">
-      <pre>var specifiedRules</pre>
-      A list of standard validation rules described in the GraphQL specification.
+      `var specifiedRules` A list of standard validation rules described in the GraphQL specification.
     </a>
   </li>
 </ul>