Dynamically set Tailwind blockquote colors in Blade

hydephp · Dec 6, 2024 · a99ee0a · a99ee0a
1 parent fcf5efa
commit a99ee0a
Show file tree

Hide file tree

Showing 7 changed files with 16 additions and 27 deletions.
diff --git a/packages/framework/resources/views/components/colored-blockquote.blade.php b/packages/framework/resources/views/components/colored-blockquote.blade.php
@@ -1,3 +1,8 @@
-<blockquote class="{{ $class }}">
+<blockquote @class([
+        'border-blue-500' => $class === 'info',
+        'border-green-500' => $class === 'success',
+        'border-amber-500' => $class === 'warning',
+        'border-red-600' => $class === 'danger',
+    ])>
     {!! $contents !!}
 </blockquote>
diff --git a/packages/framework/tests/Feature/IncludesFacadeTest.php b/packages/framework/tests/Feature/IncludesFacadeTest.php
@@ -163,7 +163,7 @@ 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">
+        <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!';

diff --git a/packages/framework/tests/Feature/Services/Markdown/ShortcodeProcessorTest.php b/packages/framework/tests/Feature/Services/Markdown/ShortcodeProcessorTest.php
@@ -38,7 +38,7 @@ public function testDiscoveredShortcodesAreUsedToProcessInput()
         $processor = new ShortcodeProcessor('>info foo');
 
         $this->assertSame(<<<'HTML'
-        <blockquote class="info">
+        <blockquote class="border-blue-500">
             <p>foo</p>
         </blockquote>
         HTML, $processor->run());
@@ -55,7 +55,7 @@ public function testProcessStaticShorthand()
     {
         $this->assertSame(
             <<<'HTML'
-            <blockquote class="info">
+            <blockquote class="border-blue-500">
                 <p>foo</p>
             </blockquote>
             HTML, ShortcodeProcessor::preprocess('>info foo')

diff --git a/packages/framework/tests/Unit/ColoredBlockquoteShortcodesTest.php b/packages/framework/tests/Unit/ColoredBlockquoteShortcodesTest.php
@@ -40,7 +40,7 @@ public function testSignatures()
     public function testResolveMethod()
     {
         $this->assertSame(<<<'HTML'
-            <blockquote class="info">
+            <blockquote class="border-blue-500">
                 <p>foo</p>
             </blockquote>
             HTML, ColoredBlockquotes::resolve('>info foo')
@@ -51,7 +51,7 @@ public function testCanUseMarkdownWithinBlockquote()
     {
         $this->assertSame(
             <<<'HTML'
-            <blockquote class="info">
+            <blockquote class="border-blue-500">
                 <p>foo <strong>bar</strong></p>
             </blockquote>
             HTML, ColoredBlockquotes::resolve('>info foo **bar**')
@@ -80,31 +80,31 @@ public static function blockquoteProvider(): array
             [
                 '>danger This is a danger blockquote',
                 <<<'HTML'
-                <blockquote class="danger">
+                <blockquote class="border-red-600">
                     <p>This is a danger blockquote</p>
                 </blockquote>
                 HTML,
             ],
             [
                 '>info This is an info blockquote',
                 <<<'HTML'
-                <blockquote class="info">
+                <blockquote class="border-blue-500">
                     <p>This is an info blockquote</p>
                 </blockquote>
                 HTML,
             ],
             [
                 '>success This is a success blockquote',
                 <<<'HTML'
-                <blockquote class="success">
+                <blockquote class="border-green-500">
                     <p>This is a success blockquote</p>
                 </blockquote>
                 HTML,
             ],
             [
                 '>warning This is a warning blockquote',
                 <<<'HTML'
-                <blockquote class="warning">
+                <blockquote class="border-amber-500">
                     <p>This is a warning blockquote</p>
                 </blockquote>
                 HTML,

diff --git a/packages/framework/tests/Unit/MarkdownHelpersTest.php b/packages/framework/tests/Unit/MarkdownHelpersTest.php
@@ -129,7 +129,7 @@ public function testRenderWithCustomHydeMarkdownFeatures()
 
         $this->assertSame(<<<'HTML'
         <h1>Hello World</h1>
-        <blockquote class="info">
+        <blockquote class="border-blue-500">
             <p>Colored blockquote</p>
         </blockquote>
         <p><a href="index.html">Home</a></p>

diff --git a/packages/hydefront/components/blockquotes.css b/packages/hydefront/components/blockquotes.css
diff --git a/resources/assets/app.css b/resources/assets/app.css
@@ -12,7 +12,6 @@
 */
 
 @import 'hydefront/components/torchlight.css';
-@import 'hydefront/components/blockquotes.css';
 
 @tailwind base;
 @tailwind components;