From 49f1525061e5d0723af04627ef673f20685fc414 Mon Sep 17 00:00:00 2001 From: Caen De Silva Date: Sun, 1 May 2022 13:35:47 +0200 Subject: [PATCH 01/10] Deprecate Hyde::tailwind in favour of Hyde::tailwindCdn --- src/Concerns/Internal/AssetManager.php | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/Concerns/Internal/AssetManager.php b/src/Concerns/Internal/AssetManager.php index 9b2171f4..8b3e37b5 100644 --- a/src/Concerns/Internal/AssetManager.php +++ b/src/Concerns/Internal/AssetManager.php @@ -13,8 +13,17 @@ trait AssetManager { /** * Return the Tailwind CDN if enabled. + * @deprecated use tailwindCdn() instead */ public static function tailwind(): string|false + { + return static::tailwindCdn(); + } + + /** + * Return the Tailwind CDN if enabled. + */ + public static function tailwindCdn(): string|false { return (new AssetService)->tailwindPath(); } From 830721562150f7ae4cae5c874f98eafe41fb9205 Mon Sep 17 00:00:00 2001 From: Caen De Silva Date: Sun, 1 May 2022 15:07:30 +0200 Subject: [PATCH 02/10] Merge HydeFront --- resources/assets/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/resources/assets/package.json b/resources/assets/package.json index 2d239a99..8ffa058e 100644 --- a/resources/assets/package.json +++ b/resources/assets/package.json @@ -1,6 +1,6 @@ { "name": "hydefront", - "version": "1.3.1", + "version": "1.4.2", "description": "Frontend assets for HydePHP", "scripts": { "prod": "sass hyde.scss dist/hyde.css --style=compressed --no-source-map && uglifyjs --compress --mangle --output dist/hyde.js hyde.js", From 9f6ef5257efbf887713c488941395ae41274aba3 Mon Sep 17 00:00:00 2001 From: Caen De Silva Date: Sun, 1 May 2022 15:08:44 +0200 Subject: [PATCH 03/10] Move asset loading to components to make customizing easier --- resources/views/layouts/app.blade.php | 20 ++++++++------------ resources/views/layouts/scripts.blade.php | 10 +++++++++- resources/views/layouts/styles.blade.php | 9 +++++++++ 3 files changed, 26 insertions(+), 13 deletions(-) create mode 100644 resources/views/layouts/styles.blade.php diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php index a840efca..8429bdcf 100644 --- a/resources/views/layouts/app.blade.php +++ b/resources/views/layouts/app.blade.php @@ -17,16 +17,15 @@ @stack('meta') - {{-- The core Hyde stylesheet --}} - - - {{-- The compiled Tailwind styles --}} - + {{-- App Stylesheets --}} + @include('hyde::layouts.styles') {{-- Include any extra tags to include in the section --}} @include('hyde::layouts.meta') - + {{-- @todo if features::hasdarkmode + Check the local storage for theme preference to avoid FOUC --}} + @@ -38,13 +37,10 @@ @includeUnless(config('hyde.footer.enabled', true) && ($withoutNavigation ?? false), 'hyde::layouts.footer') - {{-- The core Hyde scripts --}} - + {{-- App Scripts --}} + @include('hyde::layouts.scripts') - {{-- Include any extra scripts --}} + {{-- Include any extra scripts to include before the closing tag --}} @stack('scripts') - - {{-- Include any extra scripts to include in before the closing tag --}} - @include('hyde::layouts.scripts') diff --git a/resources/views/layouts/scripts.blade.php b/resources/views/layouts/scripts.blade.php index 1264281f..1f272f46 100644 --- a/resources/views/layouts/scripts.blade.php +++ b/resources/views/layouts/scripts.blade.php @@ -1 +1,9 @@ -{{-- You can place any extra scripts here. They will be placed before the closing tag. --}} \ No newline at end of file +{{-- The core HydeFront scripts --}} +@if(Hyde::scripts()) + +@endif + +{{-- The compiled Laravel Mix scripts --}} +@if(Hyde::assetManager()->hasMediaFile('app.js')) + +@endif diff --git a/resources/views/layouts/styles.blade.php b/resources/views/layouts/styles.blade.php new file mode 100644 index 00000000..2ee3ecaa --- /dev/null +++ b/resources/views/layouts/styles.blade.php @@ -0,0 +1,9 @@ +{{-- The core HydeFront stylesheet --}} +@if(Hyde::styles()) + +@endif + +{{-- The compiled Tailwind/App styles --}} +@if(Hyde::assetManager()->hasMediaFile('app.css')) + +@endif From 746aedf1ba3f9238c54d42726a60cfd69df99c50 Mon Sep 17 00:00:00 2001 From: Caen De Silva Date: Sun, 1 May 2022 15:09:29 +0200 Subject: [PATCH 04/10] Remove Tailwind CDN, see https://github.com/hydephp/hydefront/issues/25 --- config/hyde.php | 12 ++++++------ src/Contracts/AssetServiceContract.php | 5 ----- 2 files changed, 6 insertions(+), 11 deletions(-) diff --git a/config/hyde.php b/config/hyde.php index 113af009..d2921232 100644 --- a/config/hyde.php +++ b/config/hyde.php @@ -114,18 +114,18 @@ | Since v0.15.0, the default Hyde styles are no longer included as | publishable resources. This is to make updating easier, and to | reduce complexity. Instead, the assets are loaded through the - | jsDelivr CDN. You can also load Tailwind from the CDN by - | changing the config setting below. If you set it to - | false, Hyde will load the media/app.css, which - | you compile using NPM. + | jsDelivr CDN. | | The CDN version is defined in the AssetService class, | but can be changed here to a valid HydeFront tag. | + | If you load HydeFront through Laravel Mix using the NPM package, + | you should disable the HydeFront CDN feature. + | */ - // 'loadTailwindFromCDN' => true, - // 'cdnHydeFrontVersionOverride' => 'v1.0.0, + 'loadHydeAssetsUsingCDN' => true, + // 'cdnVersionOverride' => 'v1.0.0, /* |-------------------------------------------------------------------------- diff --git a/src/Contracts/AssetServiceContract.php b/src/Contracts/AssetServiceContract.php index 7b8f1c4e..d0aa6aff 100644 --- a/src/Contracts/AssetServiceContract.php +++ b/src/Contracts/AssetServiceContract.php @@ -9,11 +9,6 @@ interface AssetServiceContract */ public function version(): string; - /** - * Return the Tailwind CDN if enabled in the config, else false. - */ - public function tailwindPath(): string|false; - /** * Return the main Hyde stylesheet location/path. */ From 6a03498f04de77bc282b304511e132b0e4ac1b89 Mon Sep 17 00:00:00 2001 From: Caen De Silva Date: Sun, 1 May 2022 15:10:24 +0200 Subject: [PATCH 05/10] Remove Tailwind and add return false if disabled --- src/Concerns/Internal/AssetManager.php | 24 +++++++++--------------- 1 file changed, 9 insertions(+), 15 deletions(-) diff --git a/src/Concerns/Internal/AssetManager.php b/src/Concerns/Internal/AssetManager.php index 8b3e37b5..4a7d0bca 100644 --- a/src/Concerns/Internal/AssetManager.php +++ b/src/Concerns/Internal/AssetManager.php @@ -12,28 +12,22 @@ trait AssetManager { /** - * Return the Tailwind CDN if enabled. - * @deprecated use tailwindCdn() instead + * Get the asset service instance. + * + * @todo Refactor to load the service from the container. + * @return \Hyde\Framework\Services\AssetService */ - public static function tailwind(): string|false + public static function assetManager(): AssetService { - return static::tailwindCdn(); - } - - /** - * Return the Tailwind CDN if enabled. - */ - public static function tailwindCdn(): string|false - { - return (new AssetService)->tailwindPath(); + return (new AssetService); } /** * Return the Hyde stylesheet. */ - public static function styles(): string + public static function styles(): string|false { - return (new AssetService)->stylePath(); + return config('hyde.loadHydeAssetsUsingCDN', true) ? static::assetManager()->stylePath() : false; } /** @@ -41,6 +35,6 @@ public static function styles(): string */ public static function scripts(): string { - return (new AssetService)->scriptPath(); + return config('hyde.loadHydeAssetsUsingCDN', true) ? static::assetManager()->scriptPath() : false; } } From 71b6125d672ede777b8e44976e0fb03c791093aa Mon Sep 17 00:00:00 2001 From: Caen De Silva Date: Sun, 1 May 2022 15:10:53 +0200 Subject: [PATCH 06/10] Rename relativePath to relativeLink --- src/Concerns/Internal/FileHelpers.php | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/Concerns/Internal/FileHelpers.php b/src/Concerns/Internal/FileHelpers.php index 367fb5fc..0138ba0b 100644 --- a/src/Concerns/Internal/FileHelpers.php +++ b/src/Concerns/Internal/FileHelpers.php @@ -70,6 +70,14 @@ public static function vendorPath(string $path = ''): string return static::path('vendor/hyde/framework/'.trim($path, '/\\')); } + /** + * @deprecated use relativeLink() instead + */ + public static function relativePath(string $destination, string $current = ''): string + { + return static::relativeLink($destination, $current); + } + /** * Inject the proper number of `../` before the links in Blade templates. * @@ -77,7 +85,7 @@ public static function vendorPath(string $path = ''): string * @param string $current the current route * @return string */ - public static function relativePath(string $destination, string $current = ''): string + public static function relativeLink(string $destination, string $current = ''): string { $nestCount = substr_count($current, '/'); $route = ''; From e0361512f7c147f1704c434408cd045b0dade392 Mon Sep 17 00:00:00 2001 From: Caen De Silva Date: Sun, 1 May 2022 15:11:18 +0200 Subject: [PATCH 07/10] Refactor service to match changes --- src/Services/AssetService.php | 23 +++++++++++++++-------- 1 file changed, 15 insertions(+), 8 deletions(-) diff --git a/src/Services/AssetService.php b/src/Services/AssetService.php index d0d177cb..c3d08e91 100644 --- a/src/Services/AssetService.php +++ b/src/Services/AssetService.php @@ -3,6 +3,7 @@ namespace Hyde\Framework\Services; use Hyde\Framework\Contracts\AssetServiceContract; +use Hyde\Framework\Hyde; class AssetService implements AssetServiceContract { @@ -15,14 +16,7 @@ class AssetService implements AssetServiceContract public function version(): string { - return config('hyde.cdnHydeFrontVersionOverride', $this->version); - } - - public function tailwindPath(): string|false - { - return config('hyde.loadTailwindFromCDN', false) - ? $this->cdnPathConstructor('app.css') - : false; + return config('hyde.cdnVersionOverride', $this->version); } public function stylePath(): string @@ -35,8 +29,21 @@ public function scriptPath(): string return $this->cdnPathConstructor('hyde.js'); } + /** + * @deprecated use constructCdnPath() instead + */ public function cdnPathConstructor(string $file): string + { + return $this->constructCdnPath($file); + } + + public function constructCdnPath(string $file): string { return 'https://cdn.jsdelivr.net/npm/hydefront@'.$this->version().'/dist/'.$file; } + + public function hasMediaFile(string $file): bool + { + return file_exists(Hyde::path('_media').'/'.$file); + } } From 9b2034d436840e9019d58f34f77f64f016b53672 Mon Sep 17 00:00:00 2001 From: Caen De Silva Date: Sun, 1 May 2022 15:12:58 +0200 Subject: [PATCH 08/10] Remove legacy Tailwind tests --- tests/Feature/AssetServiceTest.php | 26 ++------------------------ 1 file changed, 2 insertions(+), 24 deletions(-) diff --git a/tests/Feature/AssetServiceTest.php b/tests/Feature/AssetServiceTest.php index 54885fba..42791361 100644 --- a/tests/Feature/AssetServiceTest.php +++ b/tests/Feature/AssetServiceTest.php @@ -33,32 +33,10 @@ public function test_version_method_returns_version_property_when_config_overrid public function test_can_change_version_in_config() { $service = new AssetService(); - Config::set('hyde.cdnHydeFrontVersionOverride', '2.0.0'); + Config::set('hyde.cdnVersionOverride', '2.0.0'); $this->assertEquals('2.0.0', $service->version()); } - public function test_tailwind_path_method_returns_false_if_null_in_config() - { - $service = new AssetService(); - Config::set('hyde.loadTailwindFromCDN'); - $this->assertFalse($service->tailwindPath()); - } - - public function test_tailwind_path_method_returns_false_if_disabled_in_config() - { - $service = new AssetService(); - Config::set('hyde.loadTailwindFromCDN', false); - $this->assertFalse($service->tailwindPath()); - } - - public function test_tailwind_path_method_returns_cdn_path_if_enabled_in_config() - { - $service = new AssetService(); - Config::set('hyde.loadTailwindFromCDN', true); - $this->assertIsString($service->tailwindPath()); - $this->assertStringContainsString('app.css', $service->tailwindPath()); - } - public function test_style_path_method_returns_cdn_path() { $service = new AssetService(); @@ -83,7 +61,7 @@ public function test_cdn_path_constructor_returns_cdn_uri() public function test_cdn_path_constructor_uses_selected_version() { $service = new AssetService(); - Config::set('hyde.cdnHydeFrontVersionOverride', '1.2.3'); + Config::set('hyde.cdnVersionOverride', '1.2.3'); $this->assertStringContainsString('@1.2.3', $service->cdnPathConstructor('styles.css')); } } From 3fbe0b94bab3cf53e7f7e3da92e9649b797958ed Mon Sep 17 00:00:00 2001 From: StyleCI Bot Date: Sun, 1 May 2022 13:13:16 +0000 Subject: [PATCH 09/10] Apply fixes from StyleCI [ci skip] [skip ci] --- config/hyde.php | 4 ++-- src/Concerns/Internal/AssetManager.php | 5 +++-- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/config/hyde.php b/config/hyde.php index d2921232..8cea0f5a 100644 --- a/config/hyde.php +++ b/config/hyde.php @@ -114,14 +114,14 @@ | Since v0.15.0, the default Hyde styles are no longer included as | publishable resources. This is to make updating easier, and to | reduce complexity. Instead, the assets are loaded through the - | jsDelivr CDN. + | jsDelivr CDN. | | The CDN version is defined in the AssetService class, | but can be changed here to a valid HydeFront tag. | | If you load HydeFront through Laravel Mix using the NPM package, | you should disable the HydeFront CDN feature. - | + | */ 'loadHydeAssetsUsingCDN' => true, diff --git a/src/Concerns/Internal/AssetManager.php b/src/Concerns/Internal/AssetManager.php index 4a7d0bca..7bc76a9a 100644 --- a/src/Concerns/Internal/AssetManager.php +++ b/src/Concerns/Internal/AssetManager.php @@ -13,13 +13,14 @@ trait AssetManager { /** * Get the asset service instance. - * + * * @todo Refactor to load the service from the container. + * * @return \Hyde\Framework\Services\AssetService */ public static function assetManager(): AssetService { - return (new AssetService); + return new AssetService; } /** From 096bc6f6f15d7b167d5784235d2e5349bb93e969 Mon Sep 17 00:00:00 2001 From: Caen De Silva Date: Sun, 1 May 2022 18:02:40 +0200 Subject: [PATCH 10/10] Merge with HydeFront --- resources/assets/README.md | 29 ++++++++++++++++++++++++++--- 1 file changed, 26 insertions(+), 3 deletions(-) diff --git a/resources/assets/README.md b/resources/assets/README.md index 9cfdda5b..41ff19d0 100644 --- a/resources/assets/README.md +++ b/resources/assets/README.md @@ -29,7 +29,7 @@ The Hyde stylesheet contains the custom base styles and should be loaded after A This file contains basic scripts to make the navigation menu and sidebars interactive. ## Usage -Note that HydeFront is included in Hyde/Hyde out of the box. +Note that HydeFront is included in Hyde/Hyde through the CDN out of the box. ### Using CDN See https://www.jsdelivr.com/package/npm/hydefront @@ -41,8 +41,31 @@ See https://www.jsdelivr.com/package/npm/hydefront ``` -### Using NPM -See https://www.npmjs.com/package/hydefront +### Using NPM (with Laravel Mix) +HydeFront is also available as an [NPM package](https://www.npmjs.com/package/hydefront), if you want to compile all your assets using Laravel Mix. Note that it is recommended to use the CDN as the Framework takes care of versioning. + +Install the package +```bash +npm install hydefront +``` + +Next, add the following import to `resources/assets/app.css` +```css +@import '~hydefront/dist/hyde.css'; +``` + +Then, disable the CDN in your `config/hyde.php` file +```php +'loadHydeAssetsUsingCDN' => false, +``` + +And compile your assets +```bash +npm run dev/prod +``` + +#### Importing the JavaScript? +You are probably wondering why there is no documentation for how to import the `hyde.js` using NPM. The answer is simple: I don't know how. If you know, please create an issue or submit a PR! ## Links: - GitHub https://github.com/hydephp/hydefront