diff --git a/config/hyde.php b/config/hyde.php
index 113af009..8cea0f5a 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/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
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",
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 --}}
+
Skip to content
@@ -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
diff --git a/src/Concerns/Internal/AssetManager.php b/src/Concerns/Internal/AssetManager.php
index 9b2171f4..7bc76a9a 100644
--- a/src/Concerns/Internal/AssetManager.php
+++ b/src/Concerns/Internal/AssetManager.php
@@ -12,19 +12,23 @@
trait AssetManager
{
/**
- * Return the Tailwind CDN if enabled.
+ * 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 (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;
}
/**
@@ -32,6 +36,6 @@ public static function styles(): string
*/
public static function scripts(): string
{
- return (new AssetService)->scriptPath();
+ return config('hyde.loadHydeAssetsUsingCDN', true) ? static::assetManager()->scriptPath() : false;
}
}
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 = '';
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.
*/
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);
+ }
}
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'));
}
}