Skip to content

Commit 6d5e76f

Browse files
ZmyslnyZmyslny
committed
chore: README updated
1 parent 02e6157 commit 6d5e76f

File tree

1 file changed

+15
-22
lines changed

1 file changed

+15
-22
lines changed

‎README.md‎

Lines changed: 15 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<p align="center">
2-
<a href="https://github.com/Zmyslny/laravel-inline-scripts/actions"><img alt="GitHub Workflow Status (main)" src="https://img.shields.io/github/actions/workflow/status/Zmyslny/laravel-inline-scripts/tests.yml?branch=main&label=Tests%201.x"></a>
2+
<a href="https://github.com/zmyslny/laravel-inline-scripts/actions"><img src="https://github.com/zmyslny/laravel-inline-scripts/actions/workflows/tests.yml/badge.svg" alt="Build Status" ></a>
3+
<a href="https://packagist.org/packages/zmyslny/laravel-inline-scripts"><img src="https://poser.pugx.org/zmyslny/laravel-inline-scripts/v/stable.svg" alt="Latest Version"></a>
34
</p>
45

56
------
@@ -12,8 +13,8 @@ Allows ✨:
1213
- process / modify the script in a dedicated PHP class.
1314

1415
Additionally - has build in **ready-to-use** scripts:
15-
- color scheme switching script (two states - light/dark)
16-
- color scheme switching script (three states - light/dark/system)
16+
- two states - light / dark - color scheme switching script _(+ view with icons)_
17+
- three states - light / dark / system - color scheme switching script _(+ view with icons)_
1718
- _more to come_
1819

1920
### Requirements
@@ -60,7 +61,7 @@ Use the custom Blade directive in your template to inline the scripts:
6061

6162
Done.
6263

63-
### What are Inline Scripts?
64+
### What are inline scripts?
6465

6566
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:
6667

@@ -77,18 +78,22 @@ Inline scripts are JavaScript code blocks embedded directly into HTML documents.
7778

7879
This package makes it much more convenient by allowing you to keep inline scripts in separate JavaScript files, which enables ✨:
7980

80-
- **Complex script processing** using dedicated PHP classes _(see example below)_
81-
- **Variable passing** from PHP to JavaScript _(see example below)_
82-
- **Unit testing** your JavaScript code using tools like Vitest or Jest _(see bonus section below)_
83-
- **Better code organization** and maintainability
84-
- **IDE support** with syntax highlighting and error detection in dedicated JS files
81+
- **Complex script processing** : using dedicated PHP classes _(see [example bellow](#using-prepared-php-classes))_
82+
- **Variable passing** : from PHP to JavaScript _(see [example bellow](#using-prepared-php-classes))_
83+
- **Unit testing** : your JavaScript code using tools like Vitest or Jest _(see [bonus section](#bonus))_
84+
- **IDE support** : with syntax highlighting and error detection in dedicated JS files _(see [example bellow](#using-js-code-directly))_
8585

8686
# Explanation Through Example: Color scheme switch script
8787

8888
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.
8989

9090
The folowing example demonstrates by using **two-state** color scheme switch script (light/dark).
9191

92+
> **Icons used** (from [HeroIcons](https://heroicons.com)):
93+
>
94+
> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="24" height="24"><path d="M12 2.25a.75.75 0 0 1 .75.75v2.25a.75.75 0 0 1-1.5 0V3a.75.75 0 0 1 .75-.75ZM7.5 12a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM18.894 6.166a.75.75 0 0 0-1.06-1.06l-1.591 1.59a.75.75 0 1 0 1.06 1.061l1.591-1.59ZM21.75 12a.75.75 0 0 1-.75.75h-2.25a.75.75 0 0 1 0-1.5H21a.75.75 0 0 1 .75.75ZM17.834 18.894a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 1 0-1.061 1.06l1.59 1.591ZM12 18a.75.75 0 0 1 .75.75V21a.75.75 0 0 1-1.5 0v-2.25A.75.75 0 0 1 12 18ZM7.758 17.303a.75.75 0 0 0-1.061-1.06l-1.591 1.59a.75.75 0 0 0 1.06 1.061l1.591-1.59ZM6 12a.75.75 0 0 1-.75.75H3a.75.75 0 0 1 0-1.5h2.25A.75.75 0 0 1 6 12ZM6.697 7.757a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 0 0-1.061 1.06l1.59 1.591Z" /></svg> **Sun** (Light mode)
95+
> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="24" height="24"><path fill-rule="evenodd" d="M9.528 1.718a.75.75 0 0 1 .162.819A8.97 8.97 0 0 0 9 6a9 9 0 0 0 9 9 8.97 8.97 0 0 0 3.463-.69.75.75 0 0 1 .981.98 10.503 10.503 0 0 1-9.694 6.46c-5.799 0-10.5-4.7-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 0 1 .818.162Z" clip-rule="evenodd" /></svg> **Moon** (Dark mode)
96+
9297
**Three-state** (light/dark/system) is also available. Just replace `2-states- | ..TwoStates` with `3-states- | ..ThreeStates` in the commands and code below.
9398

9499
> **Icons used** (from [HeroIcons](https://heroicons.com)):
@@ -133,7 +138,6 @@ Now hit the `d` key to toggle between a light and dark color scheme, and your ch
133138

134139
**Step 3 (optional)**: Add the view with color scheme icons to your website:
135140

136-
Get the available view files:
137141
```bash
138142
php artisan vendor:publish --tag=color-scheme-2-states-views
139143
```
@@ -142,11 +146,6 @@ Select the one that suits your frontend and insert it in your template:
142146
- Blade + TailwindCss + Hero icons: `../views/color-scheme-switch-two-states/hero-icons-tailwind.blade.php`
143147
- Livewire/Alpine + TailwindCss + Hero icons: `../views/color-scheme-switch-two-states/hero-icons-tailwind-alpine.blade.php`
144148

145-
> **Icons used** (from [HeroIcons](https://heroicons.com)):
146-
>
147-
> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="24" height="24"><path d="M12 2.25a.75.75 0 0 1 .75.75v2.25a.75.75 0 0 1-1.5 0V3a.75.75 0 0 1 .75-.75ZM7.5 12a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM18.894 6.166a.75.75 0 0 0-1.06-1.06l-1.591 1.59a.75.75 0 1 0 1.06 1.061l1.591-1.59ZM21.75 12a.75.75 0 0 1-.75.75h-2.25a.75.75 0 0 1 0-1.5H21a.75.75 0 0 1 .75.75ZM17.834 18.894a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 1 0-1.061 1.06l1.59 1.591ZM12 18a.75.75 0 0 1 .75.75V21a.75.75 0 0 1-1.5 0v-2.25A.75.75 0 0 1 12 18ZM7.758 17.303a.75.75 0 0 0-1.061-1.06l-1.591 1.59a.75.75 0 0 0 1.06 1.061l1.591-1.59ZM6 12a.75.75 0 0 1-.75.75H3a.75.75 0 0 1 0-1.5h2.25A.75.75 0 0 1 6 12ZM6.697 7.757a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 0 0-1.061 1.06l1.59 1.591Z" /></svg> **Sun** (Light mode)
148-
> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="24" height="24"><path fill-rule="evenodd" d="M9.528 1.718a.75.75 0 0 1 .162.819A8.97 8.97 0 0 0 9 6a9 9 0 0 0 9 9 8.97 8.97 0 0 0 3.463-.69.75.75 0 0 1 .981.98 10.503 10.503 0 0 1-9.694 6.46c-5.799 0-10.5-4.7-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 0 1 .818.162Z" clip-rule="evenodd" /></svg> **Moon** (Dark mode)
149-
150149
### Using JS code directly
151150

152151
**Step 1**: Publish the built-in scripts:
@@ -194,7 +193,6 @@ Now hit the `d` key to toggle between a light and dark color scheme, and your ch
194193

195194
**Step 3 (optional)**: Add the view with color scheme icons to your website:
196195

197-
Get the available view files:
198196
```bash
199197
php artisan vendor:publish --tag=color-scheme-2-states-views
200198
```
@@ -203,11 +201,6 @@ Select the one that suits your frontend and insert it in your template:
203201
- Blade + TailwindCss + Hero icons: `../views/color-scheme-switch-two-states/hero-icons-tailwind.blade.php`
204202
- Livewire/Alpine + TailwindCss + Hero icons: `../views/color-scheme-switch-two-states/hero-icons-tailwind-alpine.blade.php`
205203

206-
> **Icons used** (from [HeroIcons](https://heroicons.com)):
207-
>
208-
> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="24" height="24"><path d="M12 2.25a.75.75 0 0 1 .75.75v2.25a.75.75 0 0 1-1.5 0V3a.75.75 0 0 1 .75-.75ZM7.5 12a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM18.894 6.166a.75.75 0 0 0-1.06-1.06l-1.591 1.59a.75.75 0 1 0 1.06 1.061l1.591-1.59ZM21.75 12a.75.75 0 0 1-.75.75h-2.25a.75.75 0 0 1 0-1.5H21a.75.75 0 0 1 .75.75ZM17.834 18.894a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 1 0-1.061 1.06l1.59 1.591ZM12 18a.75.75 0 0 1 .75.75V21a.75.75 0 0 1-1.5 0v-2.25A.75.75 0 0 1 12 18ZM7.758 17.303a.75.75 0 0 0-1.061-1.06l-1.591 1.59a.75.75 0 0 0 1.06 1.061l1.591-1.59ZM6 12a.75.75 0 0 1-.75.75H3a.75.75 0 0 1 0-1.5h2.25A.75.75 0 0 1 6 12ZM6.697 7.757a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 0 0-1.061 1.06l1.59 1.591Z" /></svg> **Sun** (Light mode)
209-
> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="24" height="24"><path fill-rule="evenodd" d="M9.528 1.718a.75.75 0 0 1 .162.819A8.97 8.97 0 0 0 9 6a9 9 0 0 0 9 9 8.97 8.97 0 0 0 3.463-.69.75.75 0 0 1 .981.98 10.503 10.503 0 0 1-9.694 6.46c-5.799 0-10.5-4.7-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 0 1 .818.162Z" clip-rule="evenodd" /></svg> **Moon** (Dark mode)
210-
211204
## Advanced Usage: Custom Script Processing
212205

213206
Want to do more advanced processing of your JavaScript code before inlining it?
@@ -226,7 +219,7 @@ abstract class FromFile implements RenderableScript;
226219
abstract class FromFileWithPlaceholders implements ScriptWithPlaceholders;
227220
```
228221

229-
## Bonuses
222+
## Bonus
230223

231224
Unit tests for JS scripts
232225
```bash

0 commit comments

Comments
 (0)