ensure h1 # ... is a first heading on pages, fix 100vh height for 404 page on mobiles (#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