Merge pull request #2038 from hydephp/extract-hydefront-partials-for-tailwind-components

[2.x] Extract HydeFront partials for Tailwind component templates

Author: emmadesilva

RELEASE_NOTES.md

@@ -102,6 +102,7 @@ This serves two purposes:
   - Renamed Blade component `hyde::components.docs.search-widget` to `hyde::components.docs.search-modal` in https://github.com/hydephp/develop/pull/2029
   - Added support for customizing the search implementation by creating a `resources/js/HydeSearch.js` file in https://github.com/hydephp/develop/pull/2031
 - Normalized default Tailwind Typography Prose code block styles to match Torchlight's theme, ensuring consistent styling across Markdown and Torchlight code blocks in https://github.com/hydephp/develop/pull/2036.
+- Extracted CSS component partials in HydeFront in https://github.com/hydephp/develop/pull/2038
 
 ### Deprecated
 
@@ -149,6 +150,7 @@ This serves two purposes:
 #### HydeFront
 
 - Removed the `hyde.css` file in https://github.com/hydephp/develop/pull/2037 as all its styles were refactored to Tailwind in https://github.com/hydephp/develop/pull/2024
+- Extracted CSS component partials in https://github.com/hydephp/develop/pull/2038
 
 ### Upgrade Guide
 

_media/app.css

@@ -13,7 +13,7 @@ With Hyde, **you don't have to do it**, in fact, you can skip this entire page i
 But as always with Hyde, you can customize everything if you want to.
 
 Hyde ships with a complete frontend using Blade views, TailwindCSS styles, and Alpine.js interactions.
-Some extra custom styles are made in the HydeFront package, which is pre-installed and bundled in the pre-configured Tailwind and Vite setup.
+Some extra component styles are organized into modular files in the HydeFront package, which is pre-installed and bundled in the pre-configured Tailwind and Vite setup.
 
 To get you started quickly, all the styles are already compiled and minified into `_media/app.css`,
 which will be copied to the `_site/media/app.css` directory when you run `php hyde build`.
@@ -26,7 +26,7 @@ No, it is optional. All the compiled styles that you need are already installed,
 
 ### When Should Assets be Compiled?
 
-The `_media/app.css` file that comes with Hyde contains TailwindCSS for all classes that are used in the default Blade views, as well as the HydeFront custom styles.
+The `_media/app.css` file that comes with Hyde contains TailwindCSS for all classes that are used in the default Blade views, as well as the HydeFront component styles.
 If you want to customize the Tailwind settings or add custom styles, you will need to recompile the styles yourself.
 
 For example, if you customize the Blade views and add new classes or add new classes in Blade-based pages, you may need to compile the assets yourself to get the new styles.
@@ -66,6 +66,12 @@ When running the `npm run dev/prod` command, Vite will compile the `resources/as
 
 The compiled assets will then be automatically copied to `_site/media` when you run `php hyde build`.
 
+### Customizing HydeFront Components
+
+HydeFront components are modular and can be easily customized to fit your needs.
+
+You can either remove the import of the component you want to customize and replace it with your own styles, or keep the import and add overriding styles after it (since CSS cascade order matters).
+
 ## Telling Hyde where to find assets
 
 ### Customizing the Blade templates

docs/creating-content/managing-assets.md

@@ -1,5 +1,5 @@
 <small @class([
     'relative float-right opacity-50 hover:opacity-100 transition-opacity duration-250 not-prose hidden md:block',
-    '-top-1 right-3' => $torchlight,
+    '-top-1 right-1' => $torchlight,
     'top-0 right-0' => ! $torchlight,
 ])><span class="sr-only">Filepath: </span>{{ $path }}</small>

packages/framework/resources/views/components/filepath-label.blade.php

@@ -215,7 +215,7 @@ public function testProcessorExpandsFilepathDirectiveInTorchlightCodeblock()
         HTML;
 
         $expected = <<<'HTML'
-        <pre><code class="torchlight"><!-- Syntax highlighted by torchlight.dev --><small class="relative float-right opacity-50 hover:opacity-100 transition-opacity duration-250 not-prose hidden md:block -top-1 right-3"><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 float-right opacity-50 hover:opacity-100 transition-opacity duration-250 not-prose hidden md:block -top-1 right-1"><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));

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

@@ -0,0 +1,15 @@
+.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;
+}

packages/hydefront/components/blockquotes.css

@@ -0,0 +1,20 @@
+.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
+    @apply w-fit;
+}
+
+.prose :is(h1,h2,h3,h4,h5,h6):hover .heading-permalink,
+.prose :is(h1,h2,h3,h4,h5,h6):focus .heading-permalink {
+    @apply opacity-75 grayscale transition-opacity duration-100 ease-out;
+}
+
+.heading-permalink {
+    @apply opacity-0 ml-1 transition-opacity duration-300 ease-linear px-1 scroll-m-4;
+}
+
+.heading-permalink::before {
+    @apply content-['#'];
+}
+
+.heading-permalink:hover, .heading-permalink:focus {
+    @apply opacity-100 grayscale-0;
+}

packages/hydefront/components/heading-permalinks.css

@@ -0,0 +1,23 @@
+.table-of-contents {
+    @apply pb-3;
+}
+
+.table-of-contents > li {
+    @apply my-[0.35rem];
+}
+
+.table-of-contents ul {
+    @apply pl-2;
+}
+
+.table-of-contents a {
+    @apply block -ml-8 pl-8 opacity-80 hover:opacity-100 hover:bg-gray-200/20 transition-all duration-300 relative;
+}
+
+.table-of-contents a::before {
+    @apply content-['#'] text-[75%] opacity-50 mr-1 transition-opacity duration-300;
+}
+
+.table-of-contents a:hover::before {
+    @apply opacity-100;
+}

packages/hydefront/components/table-of-contents.css

@@ -0,0 +1,3 @@
+pre code.torchlight .line-number, pre code.torchlight .summary-caret {
+    @apply mr-4;
+}

packages/hydefront/components/torchlight.css

@@ -5,101 +5,17 @@
 * The HydeFront package contains some base styles to make your site look even more amazing.
 *
 * The compiled result of this file is shipped with HydePHP and is found at _media/app.css,
-* so you don't need to compile this file unless you're making changes.
+* so you don't need to compile this file unless you're making changes to Tailwind styles.
 *
 * If you want, you can load the compiled file with minified styles for a base install from the CDN.
 * See https://hydephp.com/docs/1.x/managing-assets#loading-from-cdn
 */
 
+@import 'hydefront/components/table-of-contents.css';
+@import 'hydefront/components/heading-permalinks.css';
+@import 'hydefront/components/torchlight.css';
+@import 'hydefront/components/blockquotes.css';
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-/**
- * Documentation Pages - Table of Contents
- */
-
-.table-of-contents {
-    @apply pb-3;
-}
-
-.table-of-contents > li {
-    @apply my-[0.35rem];
-}
-
-.table-of-contents ul {
-    @apply pl-2;
-}
-
-.table-of-contents a {
-    @apply block -ml-8 pl-8 opacity-80 hover:opacity-100 hover:bg-gray-200/20 transition-all duration-300 relative;
-}
-
-.table-of-contents a::before {
-    @apply content-['#'] text-[75%] opacity-50 mr-1 transition-opacity duration-300;
-}
-
-.table-of-contents a:hover::before {
-    @apply opacity-100;
-}
-
-/**
- * Documentation Pages - Heading Permalinks
- */
-
-.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
-    @apply w-fit;
-}
-
-.prose :is(h1,h2,h3,h4,h5,h6):hover .heading-permalink,
-.prose :is(h1,h2,h3,h4,h5,h6):focus .heading-permalink {
-    @apply opacity-75 grayscale transition-opacity duration-100 ease-out;
-}
-
-.heading-permalink {
-    @apply opacity-0 ml-1 transition-opacity duration-300 ease-linear px-1 scroll-m-4;
-}
-
-.heading-permalink::before {
-    @apply content-['#'];
-}
-
-.heading-permalink:hover, .heading-permalink:focus {
-    @apply opacity-100 grayscale-0;
-}
-
-/**
- * Torchlight
- */
-
-pre code.torchlight {
-    @apply block py-4 px-0 min-w-max;
-}
- 
-pre code.torchlight .line {
-    @apply px-4;
-}
- 
-pre code.torchlight .line-number, pre code.torchlight .summary-caret {
-    @apply mr-4;
-}
-
-/**
- * Colored Blockquotes
- */
-
-.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;
-}