Merge pull request #39 from mikebarlow/styles

Style updates - Blade directive for easier addition of Megaphone tailwind stylesheet
mikebarlow · Sep 10, 2024 · f4f4fa3 · f4f4fa3
2 parents aa96e74 + f16b11c
commit f4f4fa3
Show file tree

Hide file tree

Showing 10 changed files with 4,877 additions and 3,807 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,6 +9,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 * Reworked notification type templates into components. [PR#35](https://github.com/mikebarlow/megaphone/pull/35)
 * Added "mark all as read" feature for unread notifications. [PR#37](https://github.com/mikebarlow/megaphone/pull/37)
 * Added support for `wire:poll` to give the impression of a live component. [PR#38](https://github.com/mikebarlow/megaphone/pull/38)
+* Added `@megaphoneStyles` blade directive + improved default styles. [PR#39](https://github.com/mikebarlow/megaphone/pull/39)
 
 ## [2.0.0] - 2023-09-11
 

diff --git a/README.md b/README.md
@@ -100,12 +100,16 @@ This will render a Bell Icon where the component has been placed. When clicked a
 
 ### Styling
 
-As default, Megaphone uses TailwindCSS to style the Bell Icon and the notification sidebar. If you are not using Tailwind you may want to include the Megaphone CSS into your template.
+As default, Megaphone uses TailwindCSS to style the Bell Icon and the notification sidebar. If you are not using Tailwind you may want to include the Megaphone CSS into your template. Add the following blade directive to your sites `<head></head>`.
 
 ```html
-<link rel="stylesheet" href="{{ asset('vendor/megaphone/css/megaphone.css') }}">
+@megaphoneStyles
 ```
 
+If you are using TailwindCSS, make sure the Megaphone views are added to any Tailwind config to ensure the correct classes are compiled.
+
+If you wish to recompile Megaphone stylesheet, ensure you have node and npm installed and run `npm install`. To compile the styles then run `npx mix` as per the [Larave Mix Documentation](https://laravel-mix.com/docs/6.0/installation)
+
 ## Sending Notifications
 
 As default, Megaphone will only load notifications that have been registered within the Megaphone config file. Notifications shipped with Megaphone will be within `config('megaphone.types')`. This will be merged with the key values of `config('megaphone.customTypes')` to create the list of supported notifications.

diff --git a/package-lock.json b/package-lock.json