Merge pull request #434 from inertiajs/llsm-txt

joetannenbaum · web-flow · commit 52d0b0dbab14 · 2025-07-10T09:57:49.000-04:00
md fixes
diff --git a/app/Support/Markdown.php b/app/Support/Markdown.php
@@ -32,6 +32,7 @@ public static function fromJsx(string $jsx): string
             ->beforeLast(')')
             ->replace(array_keys($replace), array_values($replace))
             ->replaceMatches('/className=\{[^}]*\}/', '')
+            ->replaceMatches('/style=\{\{[^}]*\}\}/', '')
             ->explode(PHP_EOL)
             ->map(function ($line) use (&$codeBlockType, &$inFencedCodeBlock, &$currentCodeBlockId, &$tabbedCodeBlocks, &$codeBlocks) {
                 if (str_contains($line, '<TabbedCode')) {
@@ -56,7 +57,7 @@ public static function fromJsx(string $jsx): string
                     return str($line)->replaceMatches('/\s+/', ' ')->replaceMatches('/\{\'<(.+)>\'\}/', '&lt;$1&gt;')->trim()->toString();
                 }
 
-                if (str_contains($line, '`')) {
+                if (str_contains($line, '`') && !str_contains($line, '\\`')) {
                     $inFencedCodeBlock = !$inFencedCodeBlock;
                 }
 
@@ -89,36 +90,36 @@ public function __construct(protected array $tabbedBlocks, protected array $code
 
             public function convert(ElementInterface $node): string
             {
-                if ($node->getTagName() === 'tabbedcode') {
-                    $content = $this->tabbedBlocks[$node->getValue()];
-
-                    return str($content)->after('examples={')->beforeLast('}')->explode('`,')->map(function ($example) {
-                        if (!str_contains($example, 'code:')) {
-                            return null;
-                        }
+                if ($node->getTagName() === 'codeblock') {
+                    $content = $this->codeBlocks[$node->getValue()];
+                    preg_match('/language="([^"]+)"/', $content, $matches);
+                    $language = $matches[1];
+                    preg_match('/dedent`([^`]+)`/', $content, $matches);
+                    $code = str($matches[1])->trim()->replaceMatches('/\s{7,}/', PHP_EOL)->toString();
+
+                    return sprintf("```%s\n%s\n```", $language, $code);
+                }
 
-                        preg_match("/language: '([^']+)'/", $example, $matches);
-                        $language = $matches[1];
+                $content = $this->tabbedBlocks[$node->getValue()];
 
-                        preg_match("/name: '([^']+)'/", $example, $matches);
-                        $name = $matches[1];
+                return str($content)->after('examples={')->beforeLast('}')->explode('`,')->map(function ($example) {
+                    if (!str_contains($example, 'code:')) {
+                        return null;
+                    }
 
-                        preg_match("/description: '([^']+)'/m", $example, $matches);
-                        $description = $matches[1] ?? null;
+                    preg_match("/language: '([^']+)'/", $example, $matches);
+                    $language = $matches[1];
 
-                        $code = str($example)->after('dedent`')->beforeLast('`,')->trim()->replaceMatches('/\s{7,}/', PHP_EOL)->toString();
+                    preg_match("/name: '([^']+)'/", $example, $matches);
+                    $name = $matches[1];
 
-                        return sprintf("%s%s:\n\n```%s\n%s\n```", $name, $description ? ' (' . $description . ')' : '', $language, $code);
-                    })->filter()->implode(PHP_EOL . PHP_EOL);
-                }
+                    preg_match("/description: '([^']+)'/m", $example, $matches);
+                    $description = $matches[1] ?? null;
 
-                $content = $this->codeBlocks[$node->getValue()];
-                preg_match('/language="([^"]+)"/', $content, $matches);
-                $language = $matches[1];
-                preg_match('/dedent`([^`]+)`/', $content, $matches);
-                $code = str($matches[1])->trim()->replaceMatches('/\s{7,}/', PHP_EOL)->toString();
+                    $code = str($example)->after('dedent`')->beforeLast('`,')->trim()->replaceMatches('/\s{7,}/', PHP_EOL)->toString();
 
-                return sprintf("```%s\n%s\n```", $language, $code);
+                    return sprintf("%s%s:\n\n```%s\n%s\n```", $name, $description ? ' (' . $description . ')' : '', $language, $code);
+                })->filter()->implode(PHP_EOL . PHP_EOL);
             }
 
             public function getSupportedTags(): array
diff --git a/resources/js/Components/Layout.jsx b/resources/js/Components/Layout.jsx
@@ -239,7 +239,7 @@ export default function Layout({ meta, children }) {
           <div className="relative -mt-8 hidden w-44 flex-shrink-0 xl:block">
             <div className="sticky top-0 pt-8">
               {meta.links && (
-                <div className="mb-12">
+                <div className="mb-8">
                   <div className="text-xs font-bold uppercase tracking-widest text-gray-500">On this page</div>
                   <ul>
                     {meta.links.map((link, index) => (
@@ -252,6 +252,13 @@ export default function Layout({ meta, children }) {
                   </ul>
                 </div>
               )}
+              <a
+                href={window.location.pathname + '.md'}
+                target="_blank"
+                class="mb-12 inline-block rounded border border-gray-400 px-2 py-1 text-xs font-medium uppercase hover:border-gray-500"
+              >
+                View as Markdown
+              </a>
               <div className="mb-6 text-xs font-bold uppercase tracking-widest text-gray-500">Our partners</div>
               <a className="block w-3/4" href="https://forge.laravel.com" title="Laravel Forge">
                 <svg className="h-auto w-full" viewBox="0 0 217.38 39.97">
diff --git a/resources/js/Pages/the-protocol.jsx b/resources/js/Pages/the-protocol.jsx
@@ -31,8 +31,8 @@ export default function () {
         <Code>data-page</Code> attribute with a JSON encoded <A href="#the-page-object">page object</A> for the initial
         page. Inertia uses this information to boot your client-side framework and display the initial page component.
       </P>
-      <div className="overflow-hidden rounded" style={{ background: '#202e59' }}>
-        <div className="px-6 pt-6 font-mono text-sm text-white">
+      <div className="mb-6 overflow-hidden rounded" style={{ background: '#202e59' }}>
+        <div className="p-6 font-mono text-sm text-white">
           <div className="text-xs font-bold uppercase text-gray-600">Request</div>
           <div className="mt-1">
             <span className="text-blue-400">GET:</span> http://example.com/events/80
@@ -46,8 +46,11 @@ export default function () {
             <span className="text-blue-400">Content-Type:</span> text/html; charset=utf-8
           </div>
         </div>
-        <CodeBlock className="p-6 leading-normal" language="html">
-          {dedent`
+      </div>
+      <CodeBlock
+        className="p-6 leading-normal"
+        language="html"
+        children={dedent`
             <html>
             <head>
                 <title>My app</title>
@@ -61,8 +64,7 @@ export default function () {
             </body>
             </html>
           `}
-        </CodeBlock>
-      </div>
+      />
       <Notice>
         While the initial response is HTML, Inertia does not server-side render the JavaScript page components.
       </Notice>
@@ -76,8 +78,8 @@ export default function () {
         When the server detects the <Code>X-Inertia</Code> header, instead of responding with a full HTML document, it
         returns a JSON response with an encoded <A href="#the-page-object">page object</A>.
       </P>
-      <div className="overflow-hidden rounded" style={{ background: '#202e59' }}>
-        <div className="px-6 pt-6 font-mono text-sm text-white">
+      <div className="mb-6 overflow-hidden rounded" style={{ background: '#202e59' }}>
+        <div className="p-6 font-mono text-sm text-white">
           <div className="text-xs font-bold uppercase text-gray-600">Request</div>
           <div className="mt-1">
             <span className="text-blue-400">GET:</span> http://example.com/events/80
@@ -106,8 +108,11 @@ export default function () {
             <span className="text-blue-400">X-Inertia:</span> true
           </div>
         </div>
-        <CodeBlock className="p-6 leading-normal" language="json">
-          {dedent`
+      </div>
+      <CodeBlock
+        className="p-6 leading-normal"
+        language="json"
+        children={dedent`
             {
               "component": "Event",
               "props": {
@@ -124,8 +129,7 @@ export default function () {
               "clearHistory": false
             }
           `}
-        </CodeBlock>
-      </div>
+      />
       <H2>The page object</H2>
       <P>
         Inertia shares data between the server and client via a page object. This object includes the necessary
@@ -188,7 +192,7 @@ export default function () {
         If "flash" session data exists when a <Code>409 Conflict</Code> response occurs, Inertia's server-side framework
         adapters will automatically reflash this data.
       </P>
-      <div className="overflow-hidden rounded" style={{ background: '#202e59' }}>
+      <div className="mb-6 overflow-hidden rounded" style={{ background: '#202e59' }}>
         <div className="p-6 font-mono text-sm text-white">
           <div className="text-xs font-bold uppercase text-gray-600">Request</div>
           <div className="mt-1">
@@ -236,8 +240,8 @@ export default function () {
         the final destination is different for some reason (eg. the user was logged out and is now on the login page),
         then no partial reloading will occur.
       </P>
-      <div className="overflow-hidden rounded" style={{ background: '#202e59' }}>
-        <div className="px-6 pt-6 font-mono text-sm text-white">
+      <div className="mb-6 overflow-hidden rounded" style={{ background: '#202e59' }}>
+        <div className="p-6 font-mono text-sm text-white">
           <div className="text-xs font-bold uppercase text-gray-600">Request</div>
           <div className="mt-1">
             <span className="text-blue-400">GET:</span> http://example.com/events
@@ -266,8 +270,11 @@ export default function () {
             <span className="text-blue-400">Content-Type:</span> application/json
           </div>
         </div>
-        <CodeBlock className="p-6 leading-normal" language="json">
-          {dedent`
+      </div>
+      <CodeBlock
+        className="p-6 leading-normal"
+        language="json"
+        children={dedent`
             {
               "component": "Events",
               "props": {
@@ -279,8 +286,7 @@ export default function () {
               "version": "6b16b94d7c51cbe5b1fa42aac98241d5"
             }
           `}
-        </CodeBlock>
-      </div>
+      />
     </>
   )
 }
diff --git a/routes/web.php b/routes/web.php
@@ -17,6 +17,10 @@
 */
 
 Route::get('{page?}', function ($page = 'index') {
+    if ($page === '.md') {
+        $page = 'index.md';
+    }
+
     $template = str($page)->before('.md')->toString();
     $templatePath = resource_path("js/Pages/$template.jsx");
 
