Merge pull request #2056 from hydephp/blade-based-colored-markdown-bl…

…ockquotes

[2.x] Blade-based colored Markdown blockquotes

RELEASE_NOTES.md

@@ -107,6 +107,7 @@ This serves two purposes:
 - Replaced HydeFront styles with Tailwind in https://github.com/hydephp/develop/pull/2024
 - Markdown headings are now compiled using our custom Blade-based heading renderer in https://github.com/hydephp/develop/pull/2047
   - The `id` attributes for heading permalinks have been moved from the anchor to the heading element in https://github.com/hydephp/develop/pull/2052
+- Colored Markdown blockquotes are now rendered using Blade and TailwindCSS, this change is not visible in the rendered result, but the HTML output has changed in https://github.com/hydephp/develop/pull/2056
 
 ### Deprecated
 
@@ -528,6 +529,7 @@ The likelihood of impact is low, but if any of the following are true, you may n
 - The `execute` method of the `GeneratesTableOfContents` class now returns an array of data, instead of a string of HTML. This data should be fed into the new component
 - Removed the `table-of-contents.css` file as styles are now made using Tailwind
 - Removed the `heading-permalinks.css` file as styles are now made using Tailwind
+- Removed the `blockquotes.css` file as styles are now made using Tailwind
 
 ## New features
 

docs/creating-content/blog-posts.md

@@ -228,9 +228,7 @@ image:
     authorName: "John Doe"
 ```
 
-> See [posts/introducing-images](https://hydephp.com/posts/introducing-images)
-> for a detailed blog post with examples and schema information!
-{ .info }
+>info See [posts/introducing-images](https://hydephp.com/posts/introducing-images) for a detailed blog post with examples and schema information!
 
 ## Using Images in Posts
 

docs/digging-deeper/advanced-markdown.md

@@ -67,29 +67,10 @@ coloured blockquotes. Simply append the desired colour after the initial `>` cha
 
 ### Customizations
 
-You can easily customize these styles too by adding and editing the following in your `resources/app.css` file, and then recompiling your site styles.
-The code examples here use the Tailwind `@apply` directives, but you could also use `border-color: something;` just as well.
+You can easily customize these styles by publishing and editing the `markdown-blockquote.blade.php` file.
 
-```css
-/* filepath resources/app.css
-
-/* Markdown Features */
-
-.prose blockquote.info {
-    @apply border-blue-500;
-}
-
-.prose blockquote.success {
-    @apply border-green-500;
-}
-
-.prose blockquote.warning {
-    @apply border-amber-500;
-}
-
-.prose blockquote.danger {
-    @apply border-red-600;
-}
+```bash
+php hyde publish:views components
 ```
 
 ### Markdown usage

packages/framework/resources/views/components/colored-blockquote.blade.php

@@ -0,0 +1,8 @@
+<blockquote @class([
+        'border-blue-500' => $class === 'info',
+        'border-green-500' => $class === 'success',
+        'border-amber-500' => $class === 'warning',
+        'border-red-600' => $class === 'danger',
+    ])>
+    {!! $contents !!}
+</blockquote>

packages/framework/src/Markdown/Processing/ColoredBlockquotes.php

@@ -9,7 +9,7 @@
 
 use function ltrim;
 use function explode;
-use function sprintf;
+use function view;
 use function str_starts_with;
 use function trim;
 
@@ -52,9 +52,10 @@ protected static function expand(string $input): string
         $class = ltrim($parts[0], '>');
         $contents = trim($parts[1] ?? '', ' ');
 
-        return sprintf('<blockquote class="%s">%s</blockquote>',
-            $class, trim(Markdown::render($contents))
-        );
+        return view('hyde::components.colored-blockquote', [
+            'class' => $class,
+            'contents' => trim(Markdown::render($contents)),
+        ])->render();
     }
 
     protected static function stringStartsWithSignature(string $input): bool

packages/framework/tests/Feature/IncludesFacadeTest.php

@@ -163,7 +163,9 @@ public function testAdvancedMarkdownDocumentIsCompiledToHtml()
         $expected = <<<'HTML'
         <h1>Heading</h1>
         <p>This is a paragraph. It has some <strong>bold</strong> and <em>italic</em> text.</p>
-        <blockquote class="info"><p>Info Blockquote</p></blockquote>
+        <blockquote class="border-blue-500">
+            <p>Info Blockquote</p>
+        </blockquote>
         <pre><code class="language-php"><small class="relative float-right opacity-50 hover:opacity-100 transition-opacity duration-250 not-prose hidden md:block top-0 right-0"><span class="sr-only">Filepath: </span>hello.php</small>echo 'Hello, World!';
         </code></pre>
         <h2>Subheading</h2>

packages/framework/tests/Feature/Services/Markdown/ShortcodeProcessorTest.php

@@ -7,18 +7,22 @@
 use Hyde\Markdown\Contracts\MarkdownShortcodeContract;
 use Hyde\Markdown\Processing\ShortcodeProcessor;
 use Hyde\Testing\UnitTestCase;
+use Hyde\Testing\UsesRealBladeInUnitTests;
 
 /**
  * @covers \Hyde\Markdown\Processing\ShortcodeProcessor
  */
 class ShortcodeProcessorTest extends UnitTestCase
 {
+    use UsesRealBladeInUnitTests;
+
     protected static bool $needsKernel = true;
     protected static bool $needsConfig = true;
 
     protected function setUp(): void
     {
         self::mockCurrentRouteKey('foo');
+        $this->createRealBladeCompilerEnvironment();
     }
 
     public function testConstructorDiscoversDefaultShortcodes()
@@ -33,7 +37,11 @@ public function testDiscoveredShortcodesAreUsedToProcessInput()
     {
         $processor = new ShortcodeProcessor('>info foo');
 
-        $this->assertSame('<blockquote class="info"><p>foo</p></blockquote>', $processor->run());
+        $this->assertSame(<<<'HTML'
+        <blockquote class="border-blue-500">
+            <p>foo</p>
+        </blockquote>
+        HTML, $processor->run());
     }
 
     public function testStringWithoutShortcodeIsNotModified()
@@ -46,8 +54,11 @@ public function testStringWithoutShortcodeIsNotModified()
     public function testProcessStaticShorthand()
     {
         $this->assertSame(
-            '<blockquote class="info"><p>foo</p></blockquote>',
-            ShortcodeProcessor::preprocess('>info foo')
+            <<<'HTML'
+            <blockquote class="border-blue-500">
+                <p>foo</p>
+            </blockquote>
+            HTML, ShortcodeProcessor::preprocess('>info foo')
         );
     }
 

packages/framework/tests/Unit/ColoredBlockquoteShortcodesTest.php

@@ -0,0 +1,114 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Hyde\Framework\Testing\Unit;
+
+use Hyde\Markdown\Processing\ColoredBlockquotes;
+use Hyde\Testing\UnitTestCase;
+use Hyde\Testing\UsesRealBladeInUnitTests;
+
+/**
+ * @covers \Hyde\Markdown\Processing\ColoredBlockquotes
+ */
+class ColoredBlockquoteShortcodesTest extends UnitTestCase
+{
+    use UsesRealBladeInUnitTests;
+
+    protected static bool $needsKernel = true;
+    protected static bool $needsConfig = true;
+
+    protected function setUp(): void
+    {
+        $this->mockRender();
+        $this->createRealBladeCompilerEnvironment();
+    }
+
+    public function testSignature()
+    {
+        $this->assertSame('>', ColoredBlockquotes::signature());
+    }
+
+    public function testSignatures()
+    {
+        $this->assertSame(
+            ['>danger', '>info', '>success', '>warning'],
+            ColoredBlockquotes::getSignatures()
+        );
+    }
+
+    public function testResolveMethod()
+    {
+        $this->assertSame(<<<'HTML'
+            <blockquote class="border-blue-500">
+                <p>foo</p>
+            </blockquote>
+            HTML, ColoredBlockquotes::resolve('>info foo')
+        );
+    }
+
+    public function testCanUseMarkdownWithinBlockquote()
+    {
+        $this->assertSame(
+            <<<'HTML'
+            <blockquote class="border-blue-500">
+                <p>foo <strong>bar</strong></p>
+            </blockquote>
+            HTML, ColoredBlockquotes::resolve('>info foo **bar**')
+        );
+    }
+
+    public function testWithUnrelatedClass()
+    {
+        $this->assertSame(
+            '>foo foo',
+            ColoredBlockquotes::resolve('>foo foo')
+        );
+    }
+
+    /**
+     * @dataProvider blockquoteProvider
+     */
+    public function testItResolvesAllShortcodes(string $input, string $expectedOutput)
+    {
+        $this->assertSame($expectedOutput, ColoredBlockquotes::resolve($input));
+    }
+
+    public static function blockquoteProvider(): array
+    {
+        return [
+            [
+                '>danger This is a danger blockquote',
+                <<<'HTML'
+                <blockquote class="border-red-600">
+                    <p>This is a danger blockquote</p>
+                </blockquote>
+                HTML,
+            ],
+            [
+                '>info This is an info blockquote',
+                <<<'HTML'
+                <blockquote class="border-blue-500">
+                    <p>This is an info blockquote</p>
+                </blockquote>
+                HTML,
+            ],
+            [
+                '>success This is a success blockquote',
+                <<<'HTML'
+                <blockquote class="border-green-500">
+                    <p>This is a success blockquote</p>
+                </blockquote>
+                HTML,
+            ],
+            [
+                '>warning This is a warning blockquote',
+                <<<'HTML'
+                <blockquote class="border-amber-500">
+                    <p>This is a warning blockquote</p>
+                </blockquote>
+                HTML,
+            ],
+        ];
+    }
+}

packages/framework/tests/Unit/HeadingRendererUnitTest.php

@@ -8,14 +8,7 @@
 use Hyde\Pages\DocumentationPage;
 use Hyde\Pages\MarkdownPage;
 use Hyde\Testing\UnitTestCase;
-use Illuminate\Contracts\View\Factory as FactoryContract;
-use Illuminate\Events\Dispatcher;
-use Illuminate\Filesystem\Filesystem;
-use Illuminate\View\Compilers\BladeCompiler;
-use Illuminate\View\Engines\CompilerEngine;
-use Illuminate\View\Engines\EngineResolver;
-use Illuminate\View\Factory;
-use Illuminate\View\FileViewFinder;
+use Hyde\Testing\UsesRealBladeInUnitTests;
 use InvalidArgumentException;
 use League\CommonMark\Extension\CommonMark\Node\Block\Heading;
 use League\CommonMark\Node\Node;
@@ -29,6 +22,8 @@
  */
 class HeadingRendererUnitTest extends UnitTestCase
 {
+    use UsesRealBladeInUnitTests;
+
     protected static bool $needsConfig = true;
     protected static ?array $cachedConfig = null;
 
@@ -238,26 +233,6 @@ public function testPostProcessHandlesNoHeadingTags()
         $this->assertSame('<p>Paragraph</p>', (new HeadingRenderer())->postProcess($html));
     }
 
-    protected function createRealBladeCompilerEnvironment(): void
-    {
-        $resolver = new EngineResolver();
-        $filesystem = new Filesystem();
-
-        $resolver->register('blade', function () use ($filesystem) {
-            return new CompilerEngine(
-                new BladeCompiler($filesystem, sys_get_temp_dir())
-            );
-        });
-
-        $finder = new FileViewFinder($filesystem, [realpath(__DIR__.'/../../resources/views')]);
-        $finder->addNamespace('hyde', realpath(__DIR__.'/../../resources/views'));
-
-        $view = new Factory($resolver, $finder, new Dispatcher());
-
-        app()->instance('view', $view);
-        app()->instance(FactoryContract::class, $view);
-    }
-
     protected function mockChildNodeRenderer(string $contents = 'Test Heading'): ChildNodeRendererInterface
     {
         $childRenderer = Mockery::mock(ChildNodeRendererInterface::class);