Refactor code block file path labels to Tailwind

hydephp · Nov 17, 2024 · da7ad01 · da7ad01
1 parent baaf8de
commit da7ad01
Show file tree

Hide file tree

Showing 7 changed files with 8 additions and 30 deletions.
diff --git a/_media/app.css b/_media/app.css
diff --git a/packages/framework/resources/views/components/filepath-label.blade.php b/packages/framework/resources/views/components/filepath-label.blade.php
@@ -1 +1 @@
-<small class="filepath not-prose"><span class="sr-only">Filepath: </span>{{ $path }}</small>
+<small class="relative top-0 right-0 float-right opacity-50 hover:opacity-100 transition-opacity duration-250 not-prose hidden md:block"><span class="sr-only">Filepath: </span>{{ $path }}</small>
diff --git a/packages/framework/tests/Feature/Services/Markdown/CodeblockFilepathProcessorTest.php b/packages/framework/tests/Feature/Services/Markdown/CodeblockFilepathProcessorTest.php
@@ -201,7 +201,7 @@ public function testProcessorExpandsFilepathDirectiveInStandardCodeblock()
         HTML;
 
         $expected = <<<'HTML'
-        <pre><code class="language-html"><small class="filepath not-prose"><span class="sr-only">Filepath: </span>foo.html</small></code></pre>
+        <pre><code class="language-html"><small class="relative top-0 right-0 float-right opacity-50 hover:opacity-100 transition-opacity duration-250 not-prose hidden md:block"><span class="sr-only">Filepath: </span>foo.html</small></code></pre>
         HTML;
 
         $this->assertSame($expected, CodeblockFilepathProcessor::postprocess($html));
@@ -215,7 +215,7 @@ public function testProcessorExpandsFilepathDirectiveInTorchlightCodeblock()
         HTML;
 
         $expected = <<<'HTML'
-        <pre><code class="torchlight"><!-- Syntax highlighted by torchlight.dev --><small class="filepath not-prose"><span class="sr-only">Filepath: </span>foo.html</small><div class="line"><span class="line-number">1</span>&nbsp;</div></code></pre>
+        <pre><code class="torchlight"><!-- Syntax highlighted by torchlight.dev --><small class="relative top-0 right-0 float-right opacity-50 hover:opacity-100 transition-opacity duration-250 not-prose hidden md:block"><span class="sr-only">Filepath: </span>foo.html</small><div class="line"><span class="line-number">1</span>&nbsp;</div></code></pre>
         HTML;
 
         $this->assertSame($expected, CodeblockFilepathProcessor::postprocess($html));
@@ -230,7 +230,7 @@ public function testProcessorEscapesHtmlByDefault()
 
         $escaped = e('<a href="">Link</a>');
         $expected = <<<HTML
-        <pre><code class="language-html"><small class="filepath not-prose"><span class="sr-only">Filepath: </span>$escaped</small></code></pre>
+        <pre><code class="language-html"><small class="relative top-0 right-0 float-right opacity-50 hover:opacity-100 transition-opacity duration-250 not-prose hidden md:block"><span class="sr-only">Filepath: </span>$escaped</small></code></pre>
         HTML;
 
         $this->assertSame($expected, CodeblockFilepathProcessor::postprocess($html));
@@ -246,7 +246,7 @@ public function testProcessorDoesNotEscapeHtmlIfConfigured()
         HTML;
 
         $expected = <<<'HTML'
-        <pre><code class="language-html"><small class="filepath not-prose"><span class="sr-only">Filepath: </span><a href="">Link</a></small></code></pre>
+        <pre><code class="language-html"><small class="relative top-0 right-0 float-right opacity-50 hover:opacity-100 transition-opacity duration-250 not-prose hidden md:block"><span class="sr-only">Filepath: </span><a href="">Link</a></small></code></pre>
         HTML;
 
         $this->assertSame($expected, CodeblockFilepathProcessor::postprocess($html));

diff --git a/packages/hydefront/dist/hyde.css b/packages/hydefront/dist/hyde.css
@@ -1,2 +1,2 @@
 /*! HydeFront v3.4.1 | MIT License | https://hydephp.com*/
-.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}pre>code>.filepath{position:relative;top:-0.25rem;right:.25rem;float:right;opacity:.5;transition:opacity .25s}pre>code>.filepath:hover{opacity:1}@media screen and (max-width: 767px){pre>code>.filepath{display:none}}/*# sourceMappingURL=hyde.css.map */
+.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}/*# sourceMappingURL=hyde.css.map */
diff --git a/packages/hydefront/dist/hyde.css.map b/packages/hydefront/dist/hyde.css.map
diff --git a/packages/hydefront/hyde.scss b/packages/hydefront/hyde.scss
@@ -7,4 +7,3 @@
  */
 
 @use 'sass/markdown/blockquotes';
-@use 'sass/markdown/codeblocks';
diff --git a/packages/hydefront/sass/markdown/codeblocks.scss b/packages/hydefront/sass/markdown/codeblocks.scss
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<small class="filepath not-prose"><span class="sr-only">Filepath: </span>{{ $path }}</small>
		<small class="relative top-0 right-0 float-right opacity-50 hover:opacity-100 transition-opacity duration-250 not-prose hidden md:block"><span class="sr-only">Filepath: </span>{{ $path }}</small>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -7,4 +7,3 @@
		*/

		@use 'sass/markdown/blockquotes';
		@use 'sass/markdown/codeblocks';