Fix/typography quotes mirroring text #8002

package.json

@@ -5,7 +5,7 @@
   "license": "CC",
   "scripts": {
     "analyze": "ANALYZE=true next build",
-    "dev": "next-remote-watch ./src/content",
+    "dev": "next-remote-watch ./src/content -p 5173",
     "build": "next build && node --experimental-modules ./scripts/downloadFonts.mjs",
     "lint": "next lint && eslint \"src/content/**/*.md\"",
     "lint:fix": "next lint --fix && eslint \"src/content/**/*.md\" --fix",
@@ -74,7 +74,7 @@
     "eslint-plugin-local-rules": "link:eslint-local-rules",
     "eslint-plugin-react": "7.x",
     "eslint-plugin-react-compiler": "^19.0.0-beta-e552027-20250112",
-    "eslint-plugin-react-hooks": "^0.0.0-experimental-fabef7a6b-20221215",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "fs-extra": "^9.0.1",
     "globby": "^11.0.1",
     "gray-matter": "^4.0.2",

src/content/learn/choosing-the-state-structure.md

@@ -355,7 +355,7 @@ function Message({ messageColor }) {
 
 Here, a `color` state variable is initialized to the `messageColor` prop. The problem is that **if the parent component passes a different value of `messageColor` later (for example, `'red'` instead of `'blue'`), the `color` *state variable* would not be updated!** The state is only initialized during the first render.
 
-This is why "mirroring" some prop in a state variable can lead to confusion. Instead, use the `messageColor` prop directly in your code. If you want to give it a shorter name, use a constant:
+This is why “mirroring” some prop in a state variable can lead to confusion. Instead, use the `messageColor` prop directly in your code. If you want to give it a shorter name, use a constant:
 
 ```js
 function Message({ messageColor }) {
@@ -364,7 +364,7 @@ function Message({ messageColor }) {
 
 This way it won't get out of sync with the prop passed from the parent component.
 
-"Mirroring" props into state only makes sense when you *want* to ignore all updates for a specific prop. By convention, start the prop name with `initial` or `default` to clarify that its new values are ignored:
+“Mirroring”  props into state only makes sense when you *want* to ignore all updates for a specific prop. By convention, start the prop name with `initial` or `default` to clarify that its new values are ignored:
 
 ```js
 function Message({ initialColor }) {

src/utils/compileMDX.ts

@@ -103,9 +103,13 @@ export default async function compileMDX(
 
   // Prepare environment for MDX.
   let fakeExports = {};
+  const jsxRuntime = require('react/jsx-runtime');
+  const jsxDevRuntime = require('react/jsx-dev-runtime');
   const fakeRequire = (name: string) => {
     if (name === 'react/jsx-runtime') {
-      return require('react/jsx-runtime');
+      return jsxRuntime;
+    } else if (name === 'react/jsx-dev-runtime') {
+      return jsxDevRuntime;
     } else {
       // For each fake MDX import, give back the string component name.
       // It will get serialized later.