From 1b72c55b2969ffe55e8447d1db20b5473eb8327b Mon Sep 17 00:00:00 2001 From: Caen De Silva Date: Fri, 15 Nov 2024 11:10:46 +0100 Subject: [PATCH 001/102] Create HydeFront-v4-plan.md --- HydeFront-v4-plan.md | 79 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 79 insertions(+) create mode 100644 HydeFront-v4-plan.md diff --git a/HydeFront-v4-plan.md b/HydeFront-v4-plan.md new file mode 100644 index 00000000000..ad69dc1fe6b --- /dev/null +++ b/HydeFront-v4-plan.md @@ -0,0 +1,79 @@ +# 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. + +## Goals + +Based on the codebase, here's a detailed plan to refactor HydeFront: + +### Phase 1: Setup +- [ ] Create new branch `feature/hydefront-v4` +- [ ] Update HydeFront version to 4.0.0-dev in package.json +- [ ] Create new directory structure in HydeFront: +``` +src/ + components/ + presets/ + app.css +``` + +### Phase 2: Component Migration +- [ ] Audit current styles in hyde.scss (reference: `packages/hydefront/hyde.scss`) +- [ ] Create individual Tailwind component files for: + - [ ] Documentation styles + - [ ] Search functionality + - [ ] Sidebar components + - [ ] Markdown typography + - [ ] Code blocks + - [ ] Blockquotes +- [ ] Move Alpine.js utilities to separate component file + +### Phase 3: Preset Configuration +- [ ] Create base preset that includes all current functionality +- [ ] Create minimal preset with only core styles +- [ ] Create documentation preset focused on docs-specific styles +- [ ] Update the app.css compilation process to use presets + +### Phase 4: Build System Updates +- [ ] Update Vite config to handle new component structure +- [ ] Modify build scripts to: + - [ ] Compile individual components + - [ ] Generate preset bundles + - [ ] Create the main app.css bundle +- [ ] Update the CDN distribution process + +### Phase 5: Framework Integration +- [ ] Update Hyde Framework to support new HydeFront structure +- [ ] Modify Asset facade to handle granular component loading +- [ ] Update default Hyde project scaffold +- [ ] Create migration guide for existing projects + +### Phase 6: Documentation +- [ ] Document new component system +- [ ] Create examples for common customization scenarios +- [ ] Update HydeFront README +- [ ] Add migration guide to Hyde docs + +### Phase 7: Testing & Release +- [ ] Create test suite for components +- [ ] Test backwards compatibility +- [ ] Create release candidate +- [ ] Update CDN infrastructure +- [ ] Release v4.0.0 + +### Phase 8: Cleanup +- [ ] Remove deprecated files and methods +- [ ] Update all references to old HydeFront structure +- [ ] Archive v3 documentation +- [ ] Update GitHub workflows + +This plan maintains backwards compatibility while introducing the new component system. The main app.css will still be available through CDN for existing projects. From 27221248d67ac6490a8f2ec0c2f39f5ba097a138 Mon Sep 17 00:00:00 2001 From: Caen De Silva Date: Fri, 15 Nov 2024 11:12:51 +0100 Subject: [PATCH 002/102] Update HydeFront-v4-plan.md --- HydeFront-v4-plan.md | 166 ++++++++++++++++++++++++++----------------- 1 file changed, 102 insertions(+), 64 deletions(-) diff --git a/HydeFront-v4-plan.md b/HydeFront-v4-plan.md index ad69dc1fe6b..cae5e99fee6 100644 --- a/HydeFront-v4-plan.md +++ b/HydeFront-v4-plan.md @@ -11,69 +11,107 @@ HydeFront will serve two main purposes: 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. -## Goals - -Based on the codebase, here's a detailed plan to refactor HydeFront: - -### Phase 1: Setup -- [ ] Create new branch `feature/hydefront-v4` -- [ ] Update HydeFront version to 4.0.0-dev in package.json -- [ ] Create new directory structure in HydeFront: -``` -src/ - components/ - presets/ - app.css +## 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 --}} + + +{{-- The compiled Tailwind/App styles --}} +@if(Vite::running()) + {{ Vite::assets(['resources/assets/app.css']) }} +@else + @if(config('hyde.load_app_styles_from_cdn', false)) + + @elseif(Asset::exists('app.css')) + + @endif + + + {{-- Dynamic TailwindCSS Play CDN --}} + @if(config('hyde.use_play_cdn', false)) + + + + @endif +@endif + +{{-- Add any extra styles to include after the others --}} +@stack('styles') ``` -### Phase 2: Component Migration -- [ ] Audit current styles in hyde.scss (reference: `packages/hydefront/hyde.scss`) -- [ ] Create individual Tailwind component files for: - - [ ] Documentation styles - - [ ] Search functionality - - [ ] Sidebar components - - [ ] Markdown typography - - [ ] Code blocks - - [ ] Blockquotes -- [ ] Move Alpine.js utilities to separate component file - -### Phase 3: Preset Configuration -- [ ] Create base preset that includes all current functionality -- [ ] Create minimal preset with only core styles -- [ ] Create documentation preset focused on docs-specific styles -- [ ] Update the app.css compilation process to use presets - -### Phase 4: Build System Updates -- [ ] Update Vite config to handle new component structure -- [ ] Modify build scripts to: - - [ ] Compile individual components - - [ ] Generate preset bundles - - [ ] Create the main app.css bundle -- [ ] Update the CDN distribution process - -### Phase 5: Framework Integration -- [ ] Update Hyde Framework to support new HydeFront structure -- [ ] Modify Asset facade to handle granular component loading -- [ ] Update default Hyde project scaffold -- [ ] Create migration guide for existing projects - -### Phase 6: Documentation -- [ ] Document new component system -- [ ] Create examples for common customization scenarios -- [ ] Update HydeFront README -- [ ] Add migration guide to Hyde docs - -### Phase 7: Testing & Release -- [ ] Create test suite for components -- [ ] Test backwards compatibility -- [ ] Create release candidate -- [ ] Update CDN infrastructure -- [ ] Release v4.0.0 - -### Phase 8: Cleanup -- [ ] Remove deprecated files and methods -- [ ] Update all references to old HydeFront structure -- [ ] Archive v3 documentation -- [ ] Update GitHub workflows - -This plan maintains backwards compatibility while introducing the new component system. The main app.css will still be available through CDN for existing projects. + +### 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. From 1fbae9551c9df6f7a22990e9fac1391a56bb86ee Mon Sep 17 00:00:00 2001 From: Caen De Silva Date: Fri, 15 Nov 2024 11:01:52 +0100 Subject: [PATCH 003/102] Remove x-cloak style from app CSS as we have it in the head HTML --- resources/assets/app.css | 2 -- 1 file changed, 2 deletions(-) diff --git a/resources/assets/app.css b/resources/assets/app.css index dc24361dfc1..84c2e0cd551 100644 --- a/resources/assets/app.css +++ b/resources/assets/app.css @@ -16,5 +16,3 @@ @tailwind base; @tailwind components; @tailwind utilities; - -[x-cloak] { display: none !important; } From 7fa3711dbbac66c81f78e333559f5f55de1def0a Mon Sep 17 00:00:00 2001 From: Caen De Silva Date: Fri, 15 Nov 2024 11:17:25 +0100 Subject: [PATCH 004/102] Track changes made --- HydeFront-v4-plan.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/HydeFront-v4-plan.md b/HydeFront-v4-plan.md index cae5e99fee6..0a0e2d0960c 100644 --- a/HydeFront-v4-plan.md +++ b/HydeFront-v4-plan.md @@ -115,3 +115,9 @@ Key files to modify: - 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. + +## Changes Made: + +Lists all the changes made to the codebase to implement the new component system in order to make the changelog later on, and to keep track of the changes. + +- Remove x-cloak style from app CSS as we have it in the head HTML From 7704dcabbf4c1f40a6ab9f754c3d89484c1316c7 Mon Sep 17 00:00:00 2001 From: Caen De Silva Date: Fri, 15 Nov 2024 19:42:49 +0100 Subject: [PATCH 005/102] Revert "Track changes made" This reverts commit 7fa3711dbbac66c81f78e333559f5f55de1def0a. --- HydeFront-v4-plan.md | 6 ------ 1 file changed, 6 deletions(-) diff --git a/HydeFront-v4-plan.md b/HydeFront-v4-plan.md index 0a0e2d0960c..cae5e99fee6 100644 --- a/HydeFront-v4-plan.md +++ b/HydeFront-v4-plan.md @@ -115,9 +115,3 @@ Key files to modify: - 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. - -## Changes Made: - -Lists all the changes made to the codebase to implement the new component system in order to make the changelog later on, and to keep track of the changes. - -- Remove x-cloak style from app CSS as we have it in the head HTML From 65943c4ab6703d8eefd69cc350629655862c2a3a Mon Sep 17 00:00:00 2001 From: Caen De Silva Date: Fri, 15 Nov 2024 11:34:34 +0100 Subject: [PATCH 006/102] Replace `x-uncloak-md` class with pure Tailwind --- .../framework/resources/views/layouts/navigation.blade.php | 5 +++-- packages/hydefront/sass/utilities/alpine.scss | 3 --- 2 files changed, 3 insertions(+), 5 deletions(-) diff --git a/packages/framework/resources/views/layouts/navigation.blade.php b/packages/framework/resources/views/layouts/navigation.blade.php index 452e53d62fb..5c29a8871e7 100644 --- a/packages/framework/resources/views/layouts/navigation.blade.php +++ b/packages/framework/resources/views/layouts/navigation.blade.php @@ -32,8 +32,9 @@ -
+