Adding updated plugin content

thedevdojo · Oct 11, 2024 · b91ec9b · b91ec9b
1 parent 32c72fa
commit b91ec9b
Show file tree

Hide file tree

Showing 11 changed files with 147 additions and 107 deletions.
diff --git a/collections/plugins.json b/collections/plugins.json
@@ -0,0 +1,11 @@
+[
+    {
+        "name" : "Discussions",
+        "cover" : "https://cdn.devdojo.com/images/october2024/discussions-cover-img.jpeg",
+        "download" : "/wave/download/plugin/discussions",
+        "slug" : "discussions",
+        "description": "A forum discussion for your application. Plug and play with your current theme.",
+        "repo" : "https://github.com/thedevdojo/discussions",
+        "access" : "pro"
+    }
+]
diff --git a/collections/templates.json b/collections/templates.json
diff --git a/content/docs/features/plugins.md b/content/docs/features/plugins.md
@@ -11,63 +11,79 @@ nextURL: null
 
 Wave offers a simple way to include additional funcitonality in your app with plug-ins.
 - [Plug-ins](#plug-ins)
-    - [Plug-in Location](#plug-in-location)
-    - [Installed Plug-ins](#installed-plug-ins)
+    - [Installing Plugins](#installing-plugins)
     - [How Plugins Work](#how-plugins-work)
-      - [The Plugin Service Provider](#the-plugin-service-provider)
+      - [The Plugin Class](#the-plugin-class)
       - [Autoloading](#autoloading)
       - [Plugin Loading Process](#plugin-loading-process)
 
-### Plug-in Location
+### Installing Plugins
 
-Plug-ins will be located in the `resources/plugins` folder. Say that we had a plugin called `discussions`, this plugin source would live inside of the `resources/plugins/resources` folder. You'll also see inside of the plugins folder there is an `installed.json` file. This is the file that will contain the installed components. More about this below.
+To install a Wave plugin you'll need to move the plugin folder to the `resources/plugins` folder. For example, if you are installing the `discussions` plugin, you would move that folder to `resources/plugins/discussions`. After moving the plugin folder, you can then visit the admin plugin section at `/admin/plugins`.
 
-### Installed Plug-ins
+Here you'll see a list of available plugins. To activate a plugin, simply click the `Activate` button under the plugin you wish to activate.
 
-You can find all the installed plugins located inside the `resources/plugins/installed.json` file. This will contain an array of installed plugin names. Example, if we had installed the `discussions` package, the contents of the `installed.json` file would look like: 
+<img src="https://cdn.devdojo.com/images/october2024/install-plugin.jpeg" class="w-full rounded-md" />
+
+### How Plugins Work
+
+Plugins are located in the `resources/plugins` folder. Inside this folder, you’ll also find an `installed.json` file, this keeps track of the installed plugins. It contains an array of plugin names. For instance, if the `discussions` plugin is installed, the `installed.json` file would look like this:
 
 ```json
 [
     "Discussions"
 ]
 ```
 
-### How Plugins Work
+At the core of each plugin is the main plugin class (e.g., `example\ExamplePlugin.php`), which acts as the entry point for each plugin. 
+
+> The Wave plugin system closely mimics the behavior of a Laravel package. The main Plug-in class extends the Laravel ServiceProvider class.
 
-The Wave plugin system is designed to be intuitive for Laravel developers, as it closely mimics the behavior of Laravel service providers. At the core of each plugin is the main plugin file (e.g., `ExamplePlugin.php`), which acts as the entry point and service provider for the plugin.
+#### The Plugin Class
 
-#### The Plugin Service Provider
+The `ExamplePlugin.php` file allows plugin developers to utilize the `boot` and `register` methods to add functionality to their application.
 
-The `ExamplePlugin.php` file extends the `Wave\Plugins\Plugin` class, which in turn extends Laravel's `Illuminate\Support\ServiceProvider`. This structure allows plugin developers to utilize the familiar `register` and `boot` methods to add functionality to their plugins.
+1. **Boot Method** The `boot()` method is where you add the main logic for your plug-in. Include any functionality you'd like to enhance your application with, such as loading components, views, or routes.
 
-1. **Register Method**: 
-   The `register` method is used to bind things into the service container. This is where you should register services, configuration, and other bindings.
+```php
+public function boot()
+{
+    // Load views for the ExamplePlugin
+    $this->loadViewsFrom(__DIR__ . '/resources/views', 'example');
 
-   ```php
-   public function register()
-   {
-       $this->loadViewsFrom(__DIR__ . '/resources/views', 'example');
-       $this->mergeConfigFrom(__DIR__ . '/config/example.php', 'example');
-   }
-   ```
+    // Load migrations for the ExamplePlugin
+    $this->loadMigrationsFrom(__DIR__ . '/database/migrations');
 
-2. **Boot Method**: 
-   The `boot` method is called after all services have been registered. It's used for any actions that depend on other services being available.
+    // Load routes for the ExamplePlugin
+    $this->loadRoutesFrom(__DIR__ . '/routes/web.php');
 
-   ```php
-   public function boot()
-   {
-       $this->loadMigrationsFrom(__DIR__ . '/database/migrations');
-       $this->loadRoutesFrom(__DIR__ . '/routes/web.php');
-       // Publish assets, config files, etc.
-   }
-   ```
+    // Register a Livewire component for the ExamplePlugin
+    Livewire::component('example-component', \App\Plugins\ExamplePlugin\Components\ExampleComponent::class);
+}
+```
+
+> The `boot` method is called during the application startup process; however, you may need to register services or configs before the app is fully booted, in that case you'll use the `register` method.
+
+1. **Register Method** The `register` method is used to register services and/or include utilities. It runs before all other plugins have executed their boot functionality. Ideal for setting up anything your app will need.
+
+```php
+public function register()
+{
+    // Bind an interface to a concrete implementation
+    $this->app->bind('App\Contracts\SomeServiceInterface', 'App\Services\SomeService');
+
+    // Register a singleton service
+    $this->app->singleton('SomeUtility', function ($app) {
+        return new \App\Utilities\SomeUtility();
+    });
+}
+```
 
 #### Autoloading
 
 All classes and files inside the `src` folder of the plugin are autoloaded. This means you can easily organize your plugin's code into models, controllers, and other class types without worrying about manually including files.
 
-The autoloading is handled by the plugin system's custom autoloader, which follows PSR-4 standards. For example, a class located at `src/Models/Example.php` would be autoloaded with the namespace `Wave\Plugins\Example\Models\Example`.
+The autoloading is handled by the plugin system's custom autoloader, which follows PSR-4 standards. For example, a class located at `plugins/example/src/Models/Post.php` would be autoloaded with the namespace `Wave\Plugins\Example\Models\Post`.
 
 #### Plugin Loading Process
 

diff --git a/includes/docs-sidebar.html b/includes/docs-sidebar.html
@@ -156,12 +156,18 @@
                 <svg class="z-20 flex-shrink-0 w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M208,139.48l-79.83,79.83a16,16,0,0,1-22.63,0L20.69,134.46a16,16,0,0,1,0-22.63L116.52,16,232,131.48Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><circle cx="124" cy="116" r="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="109.86" y1="101.86" x2="39.99" y2="32" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><path d="M248,208a16,16,0,0,1-32,0c0-16,16-40,16-40S248,192,248,208Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
                 <span class="relative truncate">Themes</span>
             </button>
-            <button id="themes-docs" hx-get="{ url('/docs/features/volt') }" hx-target="#docs-content" hx-select="#docs-content" hx-swap="outerHTML" hx-push-url="true" @click="docSidebarClick($el)"
+            <button id="volt-docs" hx-get="{ url('/docs/features/volt') }" hx-target="#docs-content" hx-select="#docs-content" hx-swap="outerHTML" hx-push-url="true" @click="docSidebarClick($el)"
                 :class="{ 'text-white before:bg-neutral-800 dark:before:bg-neutral-100 dark:text-neutral-900' : route.includes($el.getAttribute('hx-get')), 'text-neutral-500 dark:text-neutral-400 dark:hover:text-black hover:text-black hover:before:bg-neutral-200' : route != $el.getAttribute('hx-get') }"
                 class="relative flex items-center w-full gap-2 px-3 py-2 text-xs font-medium rounded-md text-neutral-500 group focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-1 focus-visible:before:ring-primary-400 before:absolute before:inset-px before:rounded-md disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-400 hover:text-black hover:before:bg-neutral-200">
                 <svg class="z-20 flex-shrink-0 w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><polygon points="160 16 144 96 208 120 96 240 112 160 48 136 160 16" opacity="0.2"/><polygon points="160 16 144 96 208 120 96 240 112 160 48 136 160 16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
                 <span class="relative truncate">Volt Pages</span>
             </button>
+            <button id="plugins-docs" hx-get="{ url('/docs/features/plugins') }" hx-target="#docs-content" hx-select="#docs-content" hx-swap="outerHTML" hx-push-url="true" @click="docSidebarClick($el)"
+                :class="{ 'text-white before:bg-neutral-800 dark:before:bg-neutral-100 dark:text-neutral-900' : route.includes($el.getAttribute('hx-get')), 'text-neutral-500 dark:text-neutral-400 dark:hover:text-black hover:text-black hover:before:bg-neutral-200' : route != $el.getAttribute('hx-get') }"
+                class="relative flex items-center w-full gap-2 px-3 py-2 text-xs font-medium rounded-md text-neutral-500 group focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-1 focus-visible:before:ring-primary-400 before:absolute before:inset-px before:rounded-md disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-400 hover:text-black hover:before:bg-neutral-200">
+                <svg class="z-20 flex-shrink-0 w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M132,180l-29,29a24,24,0,0,1-33.94,0L47,186.91A24,24,0,0,1,47,153l29-29Z" opacity="0.2"/><path d="M180,132l29-29a24,24,0,0,0,0-33.94L186.91,47A24,24,0,0,0,153,47L124,76Z" opacity="0.2"/><line x1="144" y1="144" x2="120" y2="168" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="144" y1="144" x2="120" y2="168" fill="#231f20"/><line x1="112" y1="112" x2="88" y2="136" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="112" y1="112" x2="88" y2="136" fill="#231f20"/><line x1="64" y1="112" x2="144" y2="192" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="58.06" y1="197.94" x2="24" y2="232" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><path d="M132,180l-29,29a24,24,0,0,1-33.94,0L47,186.91A24,24,0,0,1,47,153l29-29" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="112" y1="64" x2="192" y2="144" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="197.94" y1="58.06" x2="232" y2="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><path d="M180,132l29-29a24,24,0,0,0,0-33.94L186.91,47A24,24,0,0,0,153,47L124,76" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
+                <span class="relative truncate">Plug-ins</span>
+            </button>
         </nav>
     </div>
     <div x-data="{ 

diff --git a/includes/header.html b/includes/header.html
@@ -153,6 +153,14 @@
                             :class="{ 'w-full left-0' : active=='themes', 'w-0 left-1/2' : active!='themes' }"    
                             class="absolute bottom-0 px-1.5 h-px duration-300 ease-out translate-y-1.5"><span class="relative block w-full h-px bg-gradient-to-r opacity-30 md:from-white/0 md:via-white md:to-white/0"></span></span>
                     </button> 
+                    <button hx-get="{ url('/plugins') }" hx-target="#site-content" hx-select="#site-content" hx-ext="alpine-morph" hx-swap="morph" hx-push-url="true" @click="active='plugins'; fullWidth=true; scrollTop(); resetProgressWidth(); route=$el.getAttribute('hx-get');  mobileMenu=false" data-plugins @mouseenter="calculateMarkerPosition($el); hovered='plugins'" @mouseleave="markerPositionOriginalPosition()" 
+                        :class="{ 'text-neutral-900 dark:text-white' : active == 'plugins', 'text-neutral-400 dark:text-neutral-400': active != 'plugins' }"
+                        class="relative inline-flex items-center justify-center flex-shrink-0 w-full h-full px-3 py-3 my-2 leading-tight text-center transition-colors hover:text-neutral-900 dark:hover:text-white md:rounded-full md:py-2 group md:my-0 md:w-auto md:text-center">
+                        <span>Plugins</span>
+                        <span 
+                            :class="{ 'w-full left-0' : active=='themes', 'w-0 left-1/2' : active!='themes' }"    
+                            class="absolute bottom-0 px-1.5 h-px duration-300 ease-out translate-y-1.5"><span class="relative block w-full h-px bg-gradient-to-r opacity-30 md:from-white/0 md:via-white md:to-white/0"></span></span>
+                    </button> 
                     <button href="/components" @mouseenter="calculateMarkerPosition($el); hovered='components'" 
                         :class="{ 'text-white' : active == 'components', 'text-white/80': active != 'components' }"
                         class="relative inline-flex items-center justify-center flex-shrink-0 hidden w-full h-full px-3 py-3 my-2 leading-tight text-center transition-colors md:rounded-full md:py-2 group md:my-0 md:w-auto md:text-center">
@@ -170,7 +178,7 @@
                             class="absolute bottom-0 px-1.5 h-px duration-300 ease-out translate-y-1.5"><span class="relative block w-full h-px bg-gradient-to-r opacity-30 md:from-white/0 md:via-white md:to-white/0"></span></span>
                     </button>
                     <a href="https://github.com/thedevdojo/wave" target="_blank"
-                        class="relative inline-flex items-center justify-center flex-shrink-0 w-full h-full px-3 py-5 leading-tight text-center transition-colors text-neutral-500 dark:text-neutral-300 dark:hover:text-neutral-100 md:rounded-full group hover:text-neutral-700 md:py-2 md:w-auto md:text-center">
+                        class="relative items-center justify-center flex-shrink-0 hidden w-full h-full px-3 py-5 leading-tight text-center transition-colors lg:inline-flex text-neutral-500 dark:text-neutral-300 dark:hover:text-neutral-100 md:rounded-full group hover:text-neutral-700 md:py-2 md:w-auto md:text-center">
                         <span class="absolute inset-0 scale-100 shadow-sm md:bg-neutral-50 dark:md:bg-neutral-800 md:rounded-full group-hover:bg-white group-hover:dark:bg-neutral-700/50"></span>
                         <span class="relative z-10 flex items-center pl-4 duration-300 ease-out group-hover:pr-4">
                             <svg class="absolute left-0 w-4 h-4 -translate-x-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="none"><path fill="currentColor" fill-rule="evenodd" d="M24.02 0C10.738 0 0 10.817 0 24.198 0 34.895 6.88 43.95 16.424 47.154c1.193.241 1.63-.52 1.63-1.161 0-.561-.039-2.484-.039-4.488-6.682 1.443-8.073-2.884-8.073-2.884-1.074-2.805-2.665-3.525-2.665-3.525-2.187-1.483.16-1.483.16-1.483 2.425.16 3.698 2.484 3.698 2.484 2.147 3.686 5.607 2.644 7 2.003.198-1.562.834-2.644 1.51-3.245-5.329-.56-10.936-2.644-10.936-11.939 0-2.644.954-4.807 2.466-6.49-.239-.6-1.074-3.085.239-6.41 0 0 2.028-.641 6.6 2.484 1.959-.53 3.978-.8 6.006-.802 2.028 0 4.095.281 6.005.802 4.573-3.125 6.601-2.484 6.601-2.484 1.313 3.325.477 5.81.239 6.41 1.55 1.683 2.465 3.846 2.465 6.49 0 9.295-5.607 11.338-10.976 11.94.876.76 1.63 2.202 1.63 4.486 0 3.245-.039 5.85-.039 6.65 0 .642.438 1.403 1.63 1.163C41.12 43.949 48 34.895 48 24.198 48.04 10.817 37.262 0 24.02 0Z" clip-rule="evenodd"></path></svg>