Skip to content

Commit e30ee3f

Browse files
committed
chore: README
1 parent d7c5822 commit e30ee3f

File tree

1 file changed

+19
-11
lines changed

1 file changed

+19
-11
lines changed

README.md

Lines changed: 19 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
A Laravel package that provides a simple way to wrap your JavaScript code stored in a file and inline it as custom Blade directive.
44

5-
Allows:
5+
Allows:
66
- passing variables from PHP to JavaScript,
77
- process / modify the script in a dedicated PHP class.
88

@@ -23,7 +23,7 @@ Install the package via Composer:
2323
composer require zmyslny/laravel-inline-scripts
2424
```
2525

26-
Register a custom Blade directive for your JavaScript file or files, typically in a service provider `AppServiceProvider`:
26+
Register a custom Blade directive for your JavaScript in your `AppServiceProvider`:
2727

2828
```php
2929
class AppServiceProvider extends ServiceProvider
@@ -52,6 +52,8 @@ Use the Blade directive in your template to inline the scripts:
5252
...
5353
```
5454

55+
Done.
56+
5557
### What are Inline Scripts?
5658

5759
Inline scripts are JavaScript code blocks embedded directly into HTML documents. Traditionally, developers manually write these scripts as strings in the `<head>` section or at the end of the `<body>` section:
@@ -71,15 +73,15 @@ This package makes it much more convenient by allowing you to keep inline script
7173

7274
- **Complex script processing** using dedicated PHP classes _(see example below)_
7375
- **Variable passing** from PHP to JavaScript _(see example below)_
74-
- **Unit testing** your JavaScript code using tools like Vitest or Jest _(see example below)_
76+
- **Unit testing** your JavaScript code using tools like Vitest or Jest _(see extra section below)_
7577
- **Better code organization** and maintainability
7678
- **IDE support** with syntax highlighting and error detection in dedicated JS files
7779

7880
# Explanation Through Example: Theme switch script
7981

8082
Modern websites often provide users with the ability to switch between light and dark themes. In such cases, you might want to remember the user's choice using `localStorage` and apply the selected theme on page load. To avoid **FOUC** (Flash of Unstyled Content), you can use _inline script_ to set the theme before the page fully loads.
8183

82-
Step 1: Publish the built-in theme switch scripts:
84+
**Step 1**: Publish the built-in theme switch scripts:
8385

8486
```bash
8587
php artisan vendor:publish --tag=theme-switch-2-states-js
@@ -89,7 +91,7 @@ That will copy the scripts to `resources/js/theme-switch-two-states/[theme-init.
8991
`theme-init.js` - initializes the theme based on the user's previous choice stored in `localStorage`.
9092
`theme-switch.js` - a function to toggle between light and dark themes by hitting a selected KEY and saves the choice in `localStorage`.
9193

92-
Step 2: Register the scripts in your `AppServiceProvider`:
94+
**Step 2**: Register the scripts in your `AppServiceProvider`:
9395

9496
```php
9597
class AppServiceProvider extends ServiceProvider
@@ -110,7 +112,7 @@ class AppServiceProvider extends ServiceProvider
110112
}
111113
```
112114

113-
Step 3: Use the Blade directive in your template:
115+
**Step 3**: Use the Blade directive in your template:
114116

115117
```blade
116118
<html>
@@ -132,15 +134,15 @@ Create a custom PHP processor class implementing the `RenderableScript` or `Scri
132134

133135
We have a built-in processor for the theme switch scripts as well. To use it, follow these steps:
134136

135-
Step 1: Publish the built-in theme switch scripts with the PHP processor:
137+
**Step 1**: Publish the built-in theme switch scripts with the PHP processor:
136138

137139
```bash
138140
php artisan vendor:publish --tag=theme-switch-2-states-php
139141
```
140142

141-
That will copy the scripts to `resources/js/theme-switch-two-states/[theme-init.js, theme-switch.js]` and the processor class to `app/Blade/ThemeSwitchTwoStates/[ThemeInitScript.php, ThemeSwitchScript]`.
143+
That will copy the scripts to `resources/js/theme-switch-two-states/[theme-init.js, theme-switch.js]` and the processors classes to `app/Blade/ThemeSwitchTwoStates/[ThemeInitScript.php, ThemeSwitchScript]`.
142144

143-
Step 2: Register the scripts in your `AppServiceProvider`:
145+
**Step 2**: Register the scripts in your `AppServiceProvider`:
144146

145147
```php
146148
class AppServiceProvider extends ServiceProvider
@@ -155,7 +157,7 @@ class AppServiceProvider extends ServiceProvider
155157
}
156158
```
157159

158-
Step 3: Use the Blade directive in your template as previously shown.
160+
**Step 3**: Use the Blade directive in your template as previously shown.
159161

160162
Now hit the `d` key to toggle theme.
161163

@@ -166,7 +168,13 @@ php artisan vendor:publish --tag=theme-switch-2-states-js-tests
166168
php artisan vendor:publish --tag=theme-switch-2-states-php-tests
167169
```
168170

169-
### License
171+
You can also publish all the assets mentioned at once:
172+
173+
```bash
174+
php artisan vendor:publish --tag=theme-switch-2-states-all
175+
```
176+
177+
## License
170178

171179
This package is licensed under the MIT License.
172180

0 commit comments

Comments
 (0)