Fix/typography quotes mirroring text

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",
     "lint:fix": "next lint --fix",

src/components/Layout/Page.tsx

@@ -144,11 +144,11 @@ export function Page({
       <div
         className={cn(
           hasColumns &&
-            'grid grid-cols-only-content lg:grid-cols-sidebar-content 2xl:grid-cols-sidebar-content-toc'
+            'grid grid-cols-only-content md:grid-cols-sidebar-content lg:grid-cols-sidebar-content 2xl:grid-cols-sidebar-content-toc'
         )}>
         {showSidebar && (
-          <div className="lg:-mt-16 z-10">
-            <div className="fixed top-0 py-0 shadow lg:pt-16 lg:sticky start-0 end-0 lg:shadow-none">
+          <div className="md:-mt-16 z-10">
+            <div className="fixed top-0 py-0 shadow md:pt-16 md:sticky start-0 end-0 md:shadow-none">
               <SidebarNav
                 key={section}
                 routeTree={routeTree}

src/components/Layout/SidebarNav/SidebarNav.tsx

@@ -31,21 +31,21 @@ export default function SidebarNav({
   return (
     <div
       className={cn(
-        'sticky top-0 lg:bottom-0 lg:h-[calc(100vh-4rem)] flex flex-col'
+        'sticky top-0 md:bottom-0 md:h-[calc(100vh-4rem)] flex flex-col'
       )}>
       <div
-        className="overflow-y-scroll no-bg-scrollbar lg:w-[342px] grow bg-wash dark:bg-wash-dark"
+        className="overflow-y-scroll no-bg-scrollbar md:w-full grow bg-wash dark:bg-wash-dark"
         style={{
           overscrollBehavior: 'contain',
         }}>
         <aside
           className={cn(
-            `lg:grow flex-col w-full pb-8 lg:pb-0 lg:max-w-custom-xs z-10 hidden lg:block`
+            `md:grow flex-col w-full pb-8 md:pb-0 md:max-w-none z-10 hidden md:block`
           )}>
           <nav
             role="navigation"
             style={{'--bg-opacity': '.2'} as React.CSSProperties} // Need to cast here because CSS vars aren't considered valid in TS types (cuz they could be anything)
-            className="w-full pt-6 scrolling-touch lg:h-auto grow pe-0 lg:pe-5 lg:pb-16 md:pt-4 lg:pt-4 scrolling-gpu">
+            className="w-full pt-6 scrolling-touch md:h-auto grow pe-0 md:pe-5 md:pb-16 md:pt-4 scrolling-gpu">
             {/* No fallback UI so need to be careful not to suspend directly inside. */}
             <Suspense fallback={null}>
               <SidebarRouteTree
@@ -56,7 +56,7 @@ export default function SidebarNav({
             </Suspense>
             <div className="h-20" />
           </nav>
-          <div className="fixed bottom-0 hidden lg:block">
+          <div className="fixed bottom-0 hidden md:block">
             <Feedback />
           </div>
         </aside>

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 }) {
@@ -2826,4 +2826,4 @@ Keep in mind that you [should not mutate objects in state](/learn/updating-objec
 
 </Solution>
 
-</Challenges>
+</Challenges>

src/utils/compileMDX.ts

@@ -3,7 +3,7 @@ import {MDXComponents} from 'components/MDX/MDXComponents';
 
 // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 // ~~~~ IMPORTANT: BUMP THIS IF YOU CHANGE ANY CODE BELOW ~~~
-const DISK_CACHE_BREAKER = 10;
+const DISK_CACHE_BREAKER = 11;
 // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 
 export default async function compileMDX(
@@ -99,6 +99,10 @@ export default async function compileMDX(
   const fakeRequire = (name: string) => {
     if (name === 'react/jsx-runtime') {
       return require('react/jsx-runtime');
+    } else if (name === 'react/jsx-dev-runtime') {
+      // In development builds Babel may compile to jsxDEV from 'react/jsx-dev-runtime'
+      // Ensure we return the correct dev runtime to avoid jsxDEV being undefined
+      return require('react/jsx-dev-runtime');
     } else {
       // For each fake MDX import, give back the string component name.
       // It will get serialized later.

tailwind.config.js

@@ -154,8 +154,8 @@ module.exports = {
       colors,
       gridTemplateColumns: {
         'only-content': 'auto',
-        'sidebar-content': '20rem auto',
-        'sidebar-content-toc': '20rem auto 20rem',
+        'sidebar-content': 'minmax(16rem, 20rem) auto',
+        'sidebar-content-toc': 'minmax(16rem, 20rem) auto minmax(16rem, 20rem)',
       },
     },
   },