[2.x] Refactor HydeFront styles to TailwindCSS

HydeFront-v4-plan.md

@@ -0,0 +1,117 @@
+# HydeFront v4 Development Plan
+
+## Abstract
+
+We are updating how HydeFront is handled for v2. Instead of declaring styles directly in HydeFront alongside Tailwind, we will refactor those styles into Tailwind. 
+
+HydeFront will serve two main purposes:  
+
+1. It will continue to include the precompiled `app.css` file bundled with new apps, available through the HydeFront CDN.  
+2. It will act as a component library, allowing users to include granular styles from `app.css`, which we will preconfigure.  
+
+For example, users can include our Tailwind styles granularly using just the `app.css` file from the HydeFront package. This file will be compiled alongside Tailwind. If users prefer customization, they can remove the import and add the specific styles they want.  
+
+## Refactoring Plan
+
+### 1. Restructure HydeFront Package
+- Create a new directory structure in HydeFront:
+  ```
+  hydefront/
+  ├── dist/
+  │   └── app.css       # Pre-compiled styles for CDN
+  ├── components/       # New component-based structure
+  │   ├── base/        # Base styles
+  │   ├── docs/        # Documentation styles
+  │   ├── markdown/    # Markdown styles
+  │   └── utilities/   # Utility styles
+  └── package.json
+  ```
+
+### 2. Convert SCSS to Tailwind Components
+- Convert existing SCSS styles from `hyde.scss` (reference: `packages/hydefront/hyde.scss`) into Tailwind components
+- Create separate files for each component category that can be imported individually
+- Example component structure:
+  ```javascript
+  // components/docs.js
+  module.exports = {
+    '.docs-sidebar': {
+      '@apply ...': {},
+    }
+  }
+  ```
+
+### 3. Update Build Process
+- Modify the Vite configuration (reference: `vite.config.js`) to handle component-based builds
+- Update the build scripts in package.json to:
+  - Build individual components
+  - Generate the complete app.css for CDN distribution
+  - Add new script for component-based builds
+
+### 4. Update Framework Integration
+Key files to modify:
+
+```blade
+// packages/framework/resources/views/layouts/styles.blade.php
+{{-- Prevent Alpine.js flashes --}}
+<style>[x-cloak] {display: none!important}</style>
+
+{{-- The compiled Tailwind/App styles --}}
+@if(Vite::running())
+    {{ Vite::assets(['resources/assets/app.css']) }}
+@else
+    @if(config('hyde.load_app_styles_from_cdn', false))
+        <link rel="stylesheet" href="{{ HydeFront::cdnLink('app.css') }}">
+    @elseif(Asset::exists('app.css'))
+        <link rel="stylesheet" href="{{ Asset::get('app.css') }}">
+    @endif
+
+
+    {{-- Dynamic TailwindCSS Play CDN --}}
+    @if(config('hyde.use_play_cdn', false))
+        <script src="https://cdn.tailwindcss.com?plugins=typography"></script>
+        <script>tailwind.config = { {!! HydeFront::injectTailwindConfig() !!} }</script>
+        <script>console.warn('The HydePHP TailwindCSS Play CDN is enabled. This is for development purposes only and should not be used in production.', 'See https://hydephp.com/docs/1.x/managing-assets');</script>
+    @endif
+@endif
+
+{{-- Add any extra styles to include after the others --}}
+@stack('styles')
+```
+
+
+### 5. Documentation Updates
+- Update the asset management documentation
+- Create new documentation for component-based usage
+- Update the HydeFront README (reference: `packages/hydefront/README.md`)
+
+### 6. Migration Path
+1. Create a new major version branch
+2. Keep existing functionality working while adding new component system
+3. Provide migration guide for users moving from v1 to v2
+4. Update the Hyde starter template to use new component system
+
+### 7. Configuration Updates
+- Update the Hyde configuration (reference: `config/hyde.php`) to support component-based imports
+- Add new configuration options for granular style inclusion
+
+### 8. Testing Strategy
+1. Create tests for individual components
+2. Test CDN distribution
+3. Test backward compatibility layer
+4. Test integration with Hyde framework
+
+### 9. Implementation Phases
+1. **Phase 1**: Create new component structure
+2. **Phase 2**: Convert existing styles
+3. **Phase 3**: Update build system
+4. **Phase 4**: Update framework integration
+5. **Phase 5**: Documentation and migration guide
+6. **Phase 6**: Testing and refinement
+
+### 10. Breaking Changes to Document
+- New import syntax for granular components
+- Changes to configuration structure
+- Updates to asset compilation process
+- CDN usage changes
+
+This plan maintains backward compatibility through the CDN while providing a more flexible component-based approach for customization. The changes align with modern frontend practices while keeping Hyde's simplicity.

packages/framework/resources/views/components/docs/sidebar-toggle-button.blade.php

@@ -1,6 +1,14 @@
-<button id="sidebar-toggle" title="Toggle sidebar" aria-label="Toggle sidebar navigation menu" @click="sidebarOpen = ! sidebarOpen" :class="{'active' : sidebarOpen}">
-    <span class="icon-bar dark:bg-white h-0" role="presentation"></span>
-    <span class="icon-bar dark:bg-white h-0" role="presentation"></span>
-    <span class="icon-bar dark:bg-white h-0" role="presentation"></span>
-    <span class="icon-bar dark:bg-white h-0" role="presentation"></span>
+<button 
+    id="sidebar-toggle" 
+    title="Toggle sidebar" 
+    aria-label="Toggle sidebar navigation menu"
+    @click="sidebarOpen = !sidebarOpen"
+    class="flex items-center justify-center w-8 h-8 px-2 py-1 hover:text-gray-700 dark:text-gray-200 opacity-75 hover:opacity-100"
+  >
+    <div class="relative w-5 h-4">
+        <div class="absolute top-0 w-5 h-0.5 bg-current transition-all duration-300 ease-in-out" :class="sidebarOpen ? 'opacity-0' : ''"></div>
+        <div class="absolute inset-0 my-auto w-5 h-0.5 bg-current transition-all duration-300 ease-in-out origin-center" :class="sidebarOpen ? 'rotate-45' : ''"></div>
+        <div class="absolute inset-0 my-auto w-5 h-0.5 bg-current transition-all duration-300 ease-in-out origin-center" :class="sidebarOpen ? '-rotate-45' : ''"></div>
+        <div class="absolute bottom-0 w-5 h-0.5 bg-current transition-all duration-300 ease-in-out" :class="sidebarOpen ? 'opacity-0' : ''"></div>
+    </div>
 </button>

packages/framework/resources/views/layouts/navigation.blade.php

@@ -32,8 +32,9 @@
         </button>
     </div>
 
-    <div id="main-navigation-links" class="w-full x-uncloak-md md:flex flex-grow md:flex-grow-0 md:items-center md:w-auto px-6 -mx-4 border-t mt-3 pt-3 md:border-none md:mt-0 md:py-0 border-gray-200 dark:border-gray-700"
-         :class="navigationOpen ? '' : 'hidden'" x-cloak>
+    <div id="main-navigation-links" 
+         class="w-full hidden md:flex flex-grow md:flex-grow-0 md:items-center md:w-auto px-6 -mx-4 border-t mt-3 pt-3 md:border-none md:mt-0 md:py-0 border-gray-200 dark:border-gray-700"
+         :class="navigationOpen ? '!block' : ''">
         <ul aria-label="Navigation links" class="md:flex-grow md:flex justify-end">
             @foreach ($navigation->getItems() as $item)
                 <li class="md:mx-2">

packages/hydefront/hyde.scss

@@ -10,5 +10,4 @@
 @use 'sass/markdown/torchlight';
 @use 'sass/markdown/blockquotes';
 @use 'sass/markdown/codeblocks';
-@use 'sass/utilities/alpine';
 @use 'sass/patches/typography';

packages/hydefront/sass/hyde-docs.scss

@@ -3,9 +3,6 @@
  */
 
 @use 'docs/search';
-@use 'docs/sidebar-toggle';
-@use 'docs/table-of-contents';
-@use 'docs/heading-permalinks';
 
 html {
 	scroll-behavior: smooth;

resources/assets/app.css

@@ -17,4 +17,51 @@
 @tailwind components;
 @tailwind utilities;
 
-[x-cloak] { display: none !important; }
+.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;
+}
+
+/**
+ * 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;
+}