JSX vs HTML fixups

content/examples/alerts.mdx

@@ -12,12 +12,12 @@ lastUpdatedDate: 2022-04-06T12:00:00.000Z
               viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" height="20" width="20" class="ml-02em">
               <path fill-rule="evenodd"
                 d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
-                clipRule="evenodd"></path>
+                clip-rule="evenodd"></path>
             </svg></button></div>
         <h2 class="order-1 mb-15 md:mb-0 flex flex-shrink rs-mr-1 w-full md:w-max"><span class="mr-5 inline-block"><svg
               xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"
               height="20" width="20">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                 d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9">
               </path>
             </svg></span><span class="inline-block uppercase font-bold text-17 tracking-widest">Information:</span></h2>
@@ -75,7 +75,7 @@ lastUpdatedDate: 2022-04-06T12:00:00.000Z
               width="20" className="ml-02em">
               <path fill-rule="evenodd"
                 d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
-                clipRule="evenodd"></path>
+                clip-rule="evenodd"></path>
             </svg>
           </button>
         </div>
@@ -84,7 +84,7 @@ lastUpdatedDate: 2022-04-06T12:00:00.000Z
                 width="20" class="su-ml-02em">
                 <path fill-rule="evenodd"
                   d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
-                  clipRule="evenodd"></path>
+                  clip-rule="evenodd"></path>
               </svg></span><span class="inline-block uppercase font-bold text-17 tracking-widest">Info:</span></h2>
           <div class="order-2 flex-1 flex-grow w-full">
             <div class="text-normal">

content/examples/cards.mdx

@@ -6,38 +6,38 @@ lastUpdatedDate: 2023-05-25T12:00:00.000Z
 <div className="lg:max-w-600 xl:max-w-800 2xl:max-w-1000">
   <Section heading="Alumni Travel/Study Card" width="full">
     ```html
-      <article className="flex flex-col group relative overflow-hidden bg-black-true break-words border-black w-full sm:max-w-[42rem] md:max-w-500">
-        <div className="aspect-w-3 aspect-h-2 overflow-hidden">
-          <img src="https://assets.stanford.edu/i/600x400/smart/filters:quality(60)/f/103430/4928x3264/b7a5d20844/giant-tortoise-san-cristobal-island-galapagos.jpg" className="object-cover w-full h-full transition-transform transform-gpu group-hover:scale-[1.03] group-focus-within:scale-[1.03] object-center" alt="" loading="lazy" width="600" height="400" />
+      <article class="flex flex-col group relative overflow-hidden bg-black-true break-words border-black w-full sm:max-w-[42rem] md:max-w-500">
+        <div class="aspect-w-3 aspect-h-2 overflow-hidden">
+          <img src="https://assets.stanford.edu/i/600x400/smart/filters:quality(60)/f/103430/4928x3264/b7a5d20844/giant-tortoise-san-cristobal-island-galapagos.jpg" class="object-cover w-full h-full transition-transform transform-gpu group-hover:scale-[1.03] group-focus-within:scale-[1.03] object-center" alt="" loading="lazy" width="600" height="400" />
         </div>
         <div>
-          <div className="rs-ml-1 relative mt-[-5.1rem] z-1">
-            <div className="rounded-full w-fit p-6 bg-gradient-to-tr from-black to-black group-hover:from-black-90 group-hover:to-black-90 group-focus-within:from-black-90 group-focus-within:to-black-90">
-              <div className="justify-center w-fit rounded-full flex flex-row items-center bg-black-true text-white px-20 min-w-[9rem] h-90">
-                <time dateTime="2023-06-24 00:00Z" className="flex flex-col">
-                  <span className="mb-8 ml-2 uppercase leading-none text-20 lg:text-22"> Jun</span>
-                  <span className="font-bold font-serif leading-trim text-[4.1rem]">24</span>
+          <div class="rs-ml-1 relative mt-[-5.1rem] z-1">
+            <div class="rounded-full w-fit p-6 bg-gradient-to-tr from-black to-black group-hover:from-black-90 group-hover:to-black-90 group-focus-within:from-black-90 group-focus-within:to-black-90">
+              <div class="justify-center w-fit rounded-full flex flex-row items-center bg-black-true text-white px-20 min-w-[9rem] h-90">
+                <time dateTime="2023-06-24 00:00Z" class="flex flex-col">
+                  <span class="mb-8 ml-2 uppercase leading-none text-20 lg:text-22"> Jun</span>
+                  <span class="font-bold font-serif leading-trim text-[4.1rem]">24</span>
                 </time>
-                <span className="relative font-bold leading-trim top-11 text-m2 px-03em" aria-hidden="true">–</span>
-                <span className="sr-only">to</span>
-                <time dateTime="2023-07-03 00:00Z" className="flex flex-col">
-                  <span className="mb-8 ml-2 uppercase leading-none text-20 lg:text-22">Jul</span>
-                  <span className="font-bold font-serif leading-trim text-[4.1rem]">03</span>
+                <span class="relative font-bold leading-trim top-11 text-m2 px-03em" aria-hidden="true">–</span>
+                <span class="sr-only">to</span>
+                <time dateTime="2023-07-03 00:00Z" class="flex flex-col">
+                  <span class="mb-8 ml-2 uppercase leading-none text-20 lg:text-22">Jul</span>
+                  <span class="font-bold font-serif leading-trim text-[4.1rem]">03</span>
                 </time>
               </div>
             </div>
           </div>
-          <div className="rs-pt-1 rs-px-2 rs-pb-3">
-            <a href="/travel-study/destinations/galapagos-family-2023/" className="stretched-link group z-20 mb-08em type-2 no-underline hocus:underline underline-offset-[3px] decoration-[0.12em] decoration-digital-red-light focus:outline-none text-white">
-              <h3 className="font-serif font-bold leading-display tracking-normal type-0 mt-0 relative inline text-white">Galápagos Islands</h3>
+          <div class="rs-pt-1 rs-px-2 rs-pb-3">
+            <a href="/travel-study/destinations/galapagos-family-2023/" class="stretched-link group z-20 mb-08em type-2 no-underline hocus:underline underline-offset-[3px] decoration-[0.12em] decoration-digital-red-light focus:outline-none text-white">
+              <h3 class="font-serif font-bold leading-display tracking-normal type-0 mt-0 relative inline text-white">Galápagos Islands</h3>
               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"
-                    className="transition w-08em ml-03em -mt-02em transform-gpu group-hover:translate-x-02em group-focus:translate-x-02em relative inline-block group-hover:text-white group-focus:text-white">
+                    class="transition w-08em ml-03em -mt-02em transform-gpu group-hover:translate-x-02em group-focus:translate-x-02em relative inline-block group-hover:text-white group-focus:text-white">
                 <path fillRule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clipRule="evenodd">
                 </path>
               </svg>
             </a>
-            <p className="mt-4 mb-0 font-semibold text-white leading-display">With Young Explorer Program for kids ages 6+</p>
-            <p className="rs-mt-0 mb-0 card-paragraph text-black-20">Enjoy a family cruise through the remote island chain and encounter unique wildlife up close, including playful sea lions, giant tortoises and blue footed boobies.</p>
+            <p class="mt-4 mb-0 font-semibold text-white leading-display">With Young Explorer Program for kids ages 6+</p>
+            <p class="rs-mt-0 mb-0 card-paragraph text-black-20">Enjoy a family cruise through the remote island chain and encounter unique wildlife up close, including playful sea lions, giant tortoises and blue footed boobies.</p>
           </div>
         </div>
       </article>
@@ -80,34 +80,34 @@ lastUpdatedDate: 2023-05-25T12:00:00.000Z
   </Section>
   <Section heading="Alumni Story Card" width="full">
     ```html
-    <article className="flex flex-col story-card group relative overflow-hidden break-words basefont-23 w-full sm:max-w-[42rem] md:max-w-500 border border-solid bg-clip-padding shadow-sm focus-within:shadow-md hover:shadow-md backface-hidden border-black-20 text-black">
-      <div className="story-card-image-wrapper relative aspect-w-3 aspect-h-2" aria-hidden="true">
-        <figure className="overflow-hidden w-full h-full">
+    <article class="flex flex-col story-card group relative overflow-hidden break-words basefont-23 w-full sm:max-w-[42rem] md:max-w-500 border border-solid bg-clip-padding shadow-sm focus-within:shadow-md hover:shadow-md backface-hidden border-black-20 text-black">
+      <div class="story-card-image-wrapper relative aspect-w-3 aspect-h-2" aria-hidden="true">
+        <figure class="overflow-hidden w-full h-full">
           <img
             src="https://img2.storyblok.com/f/103430/532x353/1e9c786a10/aapi_month.PNG"
-            className="object-cover w-full h-full transition-transform transform-gpu group-hover:scale-[1.03] group-focus-within:scale-[1.03] object-center"
+            class="object-cover w-full h-full transition-transform transform-gpu group-hover:scale-[1.03] group-focus-within:scale-[1.03] object-center"
             alt="" loading="lazy" width="600" height="400" />
         </figure>
       </div>
-      <div className="story-card-content flex-1 bg-white rs-pt-2 rs-px-2 rs-pb-3">
+      <div class="story-card-content flex-1 bg-white rs-pt-2 rs-px-2 rs-pb-3">
         <a href="https://news.stanford.edu/report/2023/05/02/asian-american-pacific-islander-month-stanford/"
-            className="stretched-link group z-20 rs-mt-2 mb-02em no-underline hocus:underline underline-offset-[3px] decoration-[0.12em] decoration-digital-red-light focus:outline-none type-1 text-black hocus:text-black">
-          <h3 className="font-serif font-bold leading-display tracking-normal relative inline type-0">
+            class="stretched-link group z-20 rs-mt-2 mb-02em no-underline hocus:underline underline-offset-[3px] decoration-[0.12em] decoration-digital-red-light focus:outline-none type-1 text-black hocus:text-black">
+          <h3 class="font-serif font-bold leading-display tracking-normal relative inline type-0">
             <span>Asian American and Pacific Islander Heritage Month at Stanford</span>
           </h3>
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"
-                className="transition w-08em ml-02em -rotate-45 group-hover:-rotate-45 group-focus:-rotate-45 transform-gpu group-hover:translate-x-01em group-focus:translate-x-01em group-hover:-translate-y-01em group-focus:-translate-y-01em relative inline-block text-digital-red-light">
+                class="transition w-08em ml-02em -rotate-45 group-hover:-rotate-45 group-focus:-rotate-45 transform-gpu group-hover:translate-x-01em group-focus:translate-x-01em group-hover:-translate-y-01em group-focus:-translate-y-01em relative inline-block text-digital-red-light">
             <path fillRule="evenodd"
                   d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
                   clipRule="evenodd"></path>
           </svg>
-          <span className="sr-only"> (external link)</span>
+          <span class="sr-only"> (external link)</span>
         </a>
-        <p className="card-paragraph leading-display font-serif rs-mb-0">
-          <span className="italic">from</span>
+        <p class="card-paragraph leading-display font-serif rs-mb-0">
+          <span class="italic">from</span>
           <span>Stanford Report</span>
         </p>
-        <p className="mb-0 leading-snug card-paragraph">
+        <p class="mb-0 leading-snug card-paragraph">
           Explore a variety of campus offerings that include art, music, and lectures recognize and celebrate the contributions of Asians, Asian Americans, and Pacific Islanders.
         </p>
       </div>
@@ -146,22 +146,22 @@ lastUpdatedDate: 2023-05-25T12:00:00.000Z
   </Section>
   <Section heading="Alumni Basic Card" width="full">
     ```html
-    <div className="basic-card w-full basefont-23 break-words rs-pt-3 bg-white text-black border border-solid border-black-20 bg-clip-padding shadow-sm md:max-w-30">
-      <div className="w-[12rem] h-[12rem] md:w-[14rem] md:h-[14rem] rounded-full border-[7px] border-solid overflow-hidden print:hidden border-lagunita-light bg-lagunita-light rs-ml-2" aria-hidden="true">
+    <div class="basic-card w-full basefont-23 break-words rs-pt-3 bg-white text-black border border-solid border-black-20 bg-clip-padding shadow-sm md:max-w-30">
+      <div class="w-[12rem] h-[12rem] md:w-[14rem] md:h-[14rem] rounded-full border-[7px] border-solid overflow-hidden print:hidden border-lagunita-light bg-lagunita-light rs-ml-2" aria-hidden="true">
         <img src="https://assets.stanford.edu/i/200x200/smart/filters:quality(60)/f/103430/2700x1013/f134a087bb/career-mid-career.jpg"
-              className="object-cover w-full h-full object-center" alt="" loading="lazy" width="126" height="126" />
+              class="object-cover w-full h-full object-center" alt="" loading="lazy" width="126" height="126" />
       </div>
-      <div className="flex flex-col card-body rs-px-2 rs-pt-2 rs-pb-4 items-start">
-        <h3 className="font-serif type-2 font-bold leading-display mb-0">Career Connections</h3>
-        <div className="wysiwyg text-current card-paragraph children:leading-snug children:!mb-06em last:children:!mb-0 rs-mt-neg1">
+      <div class="flex flex-col card-body rs-px-2 rs-pt-2 rs-pb-4 items-start">
+        <h3 class="font-serif type-2 font-bold leading-display mb-0">Career Connections</h3>
+        <div class="wysiwyg text-current card-paragraph children:leading-snug children:!mb-06em last:children:!mb-0 rs-mt-neg1">
           <p>Looking to make a career change or network with other alumni? Don’t miss out on our career resources.</p>
         </div>
-        <div className="rs-mt-2">
-          <div className="block print:hidden text-left text-19 md:text-21 xl:text-23">
-            <a className="flex w-fit group transition-colors no-underline underline-offset-[3px] hocus:underline text-digital-red-light hocus:text-digital-red" href="/career-connections/">
+        <div class="rs-mt-2">
+          <div class="block print:hidden text-left text-19 md:text-21 xl:text-23">
+            <a class="flex w-fit group transition-colors no-underline underline-offset-[3px] hocus:underline text-digital-red-light hocus:text-digital-red" href="/career-connections/">
               <span>See career resources</span>
               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"
-                    className="transition w-08em ml-03em -mt-02em transform-gpu group-hover:translate-x-02em group-focus:translate-x-02em inline-block text-digital-red-light group-hover:text-digital-red group-focus:text-digital-red">
+                    class="transition w-08em ml-03em -mt-02em transform-gpu group-hover:translate-x-02em group-focus:translate-x-02em inline-block text-digital-red-light group-hover:text-digital-red group-focus:text-digital-red">
                 <path fillRule="evenodd"
                       d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
                       clipRule="evenodd"></path>
@@ -200,16 +200,16 @@ lastUpdatedDate: 2023-05-25T12:00:00.000Z
   </Section>
   <Section heading="Library Card" width="full">
   ```html
-  <div className="card block w-full basefont-23 leading-display bg-white text-black border border-solid border-black-10 shadow-md md:max-w-500">
-    <div className="overflow-hidden aspect-[16/9] relative" aria-hidden="true">
+  <div class="card block w-full basefont-23 leading-display bg-white text-black border border-solid border-black-10 shadow-md md:max-w-500">
+    <div class="overflow-hidden aspect-[16/9] relative" aria-hidden="true">
       <img src="https://library.stanford.edu/_next/image?url=https%3A%2F%2Flibrary.sites-pro.stanford.edu%2Fsites%2Flibrary%2Ffiles%2Fstyles%2Fbreakpoint_2xl_2x%2Fpublic%2Fmedia%2Fimage%2Fmain-board-computer-chips-electronics_0.jpg%3Fitok%3D6L7_jfYo&w=1920&q=75" />
     </div>
-    <div className="card-body items-start rs-px-2 rs-pt-2 rs-pb-4">
-      <h3 className="leading-tight font-bold type-2 mb-03em">Gordon Moore papers, 1958–2005</h3>
+    <div class="card-body items-start rs-px-2 rs-pt-2 rs-pb-4">
+      <h3 class="leading-tight font-bold type-2 mb-03em">Gordon Moore papers, 1958–2005</h3>
       <div>
-        <p className=" max-w-[100ch]">This collection contains Moore’s Intel lab notebooks, personal and business correspondence, Intel presentations, memos and white papers, personal notes from meetings, greeting cards, photographs, cassette tapes and videos. The materials date from 1958 to 2005, but the majority dates from 1968 to 1999.</p>
+        <p class=" max-w-[100ch]">This collection contains Moore’s Intel lab notebooks, personal and business correspondence, Intel presentations, memos and white papers, personal notes from meetings, greeting cards, photographs, cassette tapes and videos. The materials date from 1958 to 2005, but the majority dates from 1968 to 1999.</p>
       </div>
-      <a rel="nofollow" aria-label="View the collection of Gordon Moore's papers, 1958 - 2005" className="rounded-full cta-button font-semibold leading-display block w-fit no-underline hocus:underline group transition-colors px-26 pt-10 pb-11 text-16 md:text-20 bg-digital-red hover:bg-cardinal-red-dark focus:bg-black-true active:bg-black-true text-white hocus:text-white rs-mt-neg1" href="https://searchworks.stanford.edu/view/10626780">View the collection</a>
+      <a rel="nofollow" aria-label="View the collection of Gordon Moore's papers, 1958 - 2005" class="rounded-full cta-button font-semibold leading-display block w-fit no-underline hocus:underline group transition-colors px-26 pt-10 pb-11 text-16 md:text-20 bg-digital-red hover:bg-cardinal-red-dark focus:bg-black-true active:bg-black-true text-white hocus:text-white rs-mt-neg1" href="https://searchworks.stanford.edu/view/10626780">View the collection</a>
     </div>
   </div>
   ```