rename to magic-todo

README.md

@@ -1,14 +1,14 @@
-# Dotoo
+# Magic todo
 
-[![codestyle](https://github.com/gwleuverink/dotoo/actions/workflows/codestyle.yml/badge.svg)](https://github.com/gwleuverink/dotoo/actions/workflows/codestyle.yml)
-[![tests](https://github.com/gwleuverink/dotoo/actions/workflows/tests.yml/badge.svg)](https://github.com/gwleuverink/dotoo/actions/workflows/tests.yml)
+[![codestyle](https://github.com/gwleuverink/magic-todo/actions/workflows/codestyle.yml/badge.svg)](https://github.com/gwleuverink/magic-todo/actions/workflows/codestyle.yml)
+[![tests](https://github.com/gwleuverink/magic-todo/actions/workflows/tests.yml/badge.svg)](https://github.com/gwleuverink/magic-todo/actions/workflows/tests.yml)
 
-Magically turn HTML & Blade comments into interactive hints on your frontend
+Magically turn HTML comments into interactive hints on your frontend
 
 ## Installation
 
 ```bash
-composer require leuverink/dotoo
+composer require leuverink/magic-todo
 ```
 
 ## Usage
@@ -24,12 +24,6 @@ Magic TODO's work just like any other TODO comment in a Blade file. By default y
 
 <img src="/resources/images/inline-comment-result.jpg" alt="inline-comment-result" width="540px" />
 
-Blade comments are also supported and work the same:
-
-```blade
-{{-- |TODO: This button is not yet implemented --}}
-```
-
 You may also wrap markup inside of a TODO in order to emphasize a block.
 
 ```html
@@ -40,36 +34,40 @@ You may also wrap markup inside of a TODO in order to emphasize a block.
 <!-- |ENDTODO -->
 ```
 
+Blade comments are also supported and work the same:
+
+```blade
+{{-- |TODO: This button is not yet implemented --}}
+```
+
 <img src="/resources/images/block-comment-result.jpg" alt="inline-comment-result" width="540px" />
 
 ### Modifying the TODO keywords
 
-By default magic todo's are opt in. Meaning you'll have to append a pipe `|` token. You are free to modify this behaviour any way you like by changing the config.
-
-Publish the package config and edit the `dotoo.open` & `dotoo.close` keywords how you like.
+By default magic todo's are opt in. Meaning you'll have to append a pipe `|` token. You are free to modify this behaviour any way you like by by publishing the package config and edit the `magic-todo.open` & `magic-todo.close` keywords.
 
-If you change `dotoo.open` to `TODO`, Every TODO comment in your template will be highlighted.
+If you change `magic-todo.open` to `TODO`, Every TODO comment in your template will be highlighted.
 
 ### Usage without comments
 
 Alternatively, you may also directly use the highlight component in your markup. This way you get full control over attributes and slots. Check it out:
 
 ```blade
 <!-- Render a questionmark with tooltip -->
-<x-dotoo::highlight todo="Hello World" />
+<x-magic-todo::highlight todo="Hello World" />
 
 <!-- Wrap an element using the main slot -->
-<x-dotoo::highlight todo="Hello World">
+<x-magic-todo::highlight todo="Hello World">
     Foo bar
-</x-dotoo::highlight>
+</x-magic-todo::highlight>
 
-<x-dotoo::highlight>
+<x-magic-todo::highlight>
     <x-slot:todo>
         <div>
             Do anything you like in here
         </div>
     </x-slot:todo>
-</x-dotoo::highlight>
+</x-magic-todo::highlight>
 ```
 
 ## Configuration

build.sh

@@ -4,4 +4,4 @@ ESBUILD="./node_modules/.bin/esbuild"
 
 npm ci
 
-$ESBUILD ./resources/dotoo.js --outdir=./build/ --target=chrome58,firefox57,safari11,edge16 --format=esm --bundle --minify
+$ESBUILD ./resources/magic-todo.js --outdir=./build/ --target=chrome58,firefox57,safari11,edge16 --format=esm --bundle --minify

composer.json

@@ -1,11 +1,11 @@
 {
-    "name": "leuverink/dotoo",
+    "name": "leuverink/magic-todo",
     "description": "Higlight TODO's inside your Blade templates",
     "type": "library",
     "license": "MIT",
     "autoload": {
         "psr-4": {
-            "Leuverink\\Dotoo\\": "src/",
+            "Leuverink\\MagicTodo\\": "src/",
             "Tests\\": "tests/"
         }
     },
@@ -34,7 +34,7 @@
     "extra": {
         "laravel": {
             "providers": [
-                "Leuverink\\Dotoo\\ServiceProvider"
+                "Leuverink\\MagicTodo\\ServiceProvider"
             ]
         }
     },

resources/components/highlight.blade.php

@@ -2,17 +2,17 @@
     'todo' => ''
 ])
 
-@if (config('dotoo.enabled'))
+@if (config('magic-todo.enabled'))
     @if ($slot->isNotEmpty())
         <span {{ $attributes->merge([
-            'class' => 'dotoo',
+            'class' => 'magic-todo',
             'data-todo' => addslashes(nl2br($todo))
         ]) }}>
             {{ $slot }}
         </span>
     @else
         <span {{ $attributes->merge([
-            'class' => 'dotoo-mark',
+            'class' => 'magic-todo-mark',
             'data-todo' => addslashes(nl2br($todo))
         ]) }}>
             {{-- https://buninux.com/freebies --}}

resources/dotoo.css → resources/magic-todo.css

@@ -6,8 +6,8 @@
   --dt-parent-display: inherit;
 }
 
-/* Style the .dotoo component */
-.dotoo {
+/* Style the .magic-todo component */
+.magic-todo {
   all: inherit; /* Inherit all properties from parent */
   font: var(--dt-parent-font);
   color: var(--dt-parent-color);
@@ -62,12 +62,12 @@
     2px calc(100% + 12.77px), calc(100% + 12.77px) 2px;
   background-position: 0 0, 0 0, 100% 0, 0 100%;
   background-repeat: no-repeat;
-  animation: dotooBorderAnimation 1s infinite linear;
+  animation: magic-todoBorderAnimation 1s infinite linear;
 
   /* box-shadow: inset 0 0 0 1.5px #fca5a5; */
 }
 
-@keyframes dotooBorderAnimation {
+@keyframes magic-todoBorderAnimation {
   from {
     background-position: 0 0, -12.77px 0, 100% -12.77px, 0 100%;
   }
@@ -76,8 +76,8 @@
   }
 }
 
-/* Dotoo component without a slot. Renders svg questionmark */
-.dotoo-mark {
+/* MagicTodo component without a slot. Renders svg questionmark */
+.magic-todo-mark {
   display: inline-block;
   width: 18px;
   height: 18px;
@@ -86,7 +86,7 @@
 
 /* Reset inheritance for children */
 /*
-.dotoo > * {
+.magic-todo > * {
   all: revert;
 }
 */

resources/dotoo.js → resources/magic-todo.js

@@ -1,19 +1,19 @@
-import "./dotoo.css";
+import "./magic-todo.css";
 
 import tippy, { inlinePositioning } from "tippy.js";
 import "tippy.js/dist/tippy.css";
 import "tippy.js/themes/translucent.css";
 
 document.addEventListener("DOMContentLoaded", function () {
-  tippy(".dotoo", {
+  tippy(".magic-todo", {
     allowHTML: true,
     theme: "translucent",
     inlinePositioning: true,
     plugins: [inlinePositioning],
     content: (reference) => reference.dataset.todo || "todo",
   });
 
-  tippy(".dotoo-mark", {
+  tippy(".magic-todo-mark", {
     allowHTML: true,
     theme: "translucent",
     inlinePositioning: true,

src/CommentsPrecompiler.php

@@ -1,6 +1,6 @@
 <?php
 
-namespace Leuverink\Dotoo;
+namespace Leuverink\MagicTodo;
 
 class CommentsPrecompiler
 {
@@ -18,7 +18,7 @@ public static function execute(string $view): string
     protected static function compileTodosMark($view, $openComment, $closeComment)
     {
         // Regular expression to match TODO comments
-        $keyword = preg_quote(config('dotoo.open'));
+        $keyword = preg_quote(config('magic-todo.open'));
         $pattern = "/{$openComment}\s*{$keyword}(.+?){$closeComment}/s";
 
         // Find all matches
@@ -29,21 +29,21 @@ protected static function compileTodosMark($view, $openComment, $closeComment)
             $fullComment = $match[0];  // Full comment including {{-- and --}}
             $commentBody = self::trimColons($match[1]);  // Comment body without {{-- TODO: and --}}
 
-            $dotooComponent = <<< BLADE
-            <x-dotoo::highlight todo="{$commentBody}" />
+            $magicTodoComponent = <<< BLADE
+            <x-magic-todo::highlight todo="{$commentBody}" />
             BLADE;
 
-            // Replace the comment Dotoo component
-            $view = str_replace($fullComment, $dotooComponent, $view);
+            // Replace the comment MagicTodo component
+            $view = str_replace($fullComment, $magicTodoComponent, $view);
         }
 
         return $view;
     }
 
     protected static function compileWrappedBladeTodos($view, $openComment, $closeComment)
     {
-        $openKeyword = preg_quote(config('dotoo.open'));
-        $closeKeyword = preg_quote(config('dotoo.close'));
+        $openKeyword = preg_quote(config('magic-todo.open'));
+        $closeKeyword = preg_quote(config('magic-todo.close'));
 
         // Regular expression to match content between TODO and ENDTODO comments
         $pattern = "/
@@ -63,14 +63,14 @@ protected static function compileWrappedBladeTodos($view, $openComment, $closeCo
             $todoComment = self::trimColons($match[2]);  // Just the text inside the TODO comment
             $content = trim($match[3]);  // The content between TODO and ENDTODO
 
-            $dotooComponent = <<< BLADE
-            <x-dotoo::highlight todo="{$todoComment}">
+            $magicTodoComponent = <<< BLADE
+            <x-magic-todo::highlight todo="{$todoComment}">
                 {$content}
-            </x-dotoo:highlight>
+            </x-magic-todo:highlight>
             BLADE;
 
-            // Replace the comment Dotoo component
-            $view = str_replace($todoBlock, $dotooComponent, $view);
+            // Replace the comment MagicTodo component
+            $view = str_replace($todoBlock, $magicTodoComponent, $view);
         }
 
         return $view;

src/InjectAssets.php

@@ -1,16 +1,16 @@
 <?php
 
-namespace Leuverink\Dotoo;
+namespace Leuverink\MagicTodo;
 
 use Illuminate\Foundation\Http\Events\RequestHandled;
 
 class InjectAssets
 {
-    /** Injects a inline style tag containing Dotoo's CSS inside every full-page response */
+    /** Injects a inline style tag containing MagicTodo's CSS inside every full-page response */
     public function __invoke(RequestHandled $handled)
     {
-        // No need to inject anything when Dotoo is disabled
-        if (! config('dotoo.enabled')) {
+        // No need to inject anything when MagicTodo is disabled
+        if (! config('magic-todo.enabled')) {
             return;
         }
 
@@ -34,8 +34,8 @@ public function __invoke(RequestHandled $handled)
         $originalContent = $handled->response->original;
 
         // Inject the assets in the response
-        $js = file_get_contents(__DIR__ . '/../build/dotoo.js');
-        $css = file_get_contents(__DIR__ . '/../build/dotoo.css');
+        $js = file_get_contents(__DIR__ . '/../build/magic-todo.js');
+        $css = file_get_contents(__DIR__ . '/../build/magic-todo.css');
 
         $handled->response->setContent(
             $this->injectAssets($html, <<< HTML
@@ -49,7 +49,7 @@ public function __invoke(RequestHandled $handled)
         $handled->response->original = $originalContent;
     }
 
-    /** Injects Dotoo assets into given html string (taken from Livewire's injection mechanism) */
+    /** Injects MagicTodo assets into given html string (taken from Livewire's injection mechanism) */
     protected function injectAssets(string $html, string $core): string
     {
         $html = str($html);

src/ServiceProvider.php

@@ -1,6 +1,6 @@
 <?php
 
-namespace Leuverink\Dotoo;
+namespace Leuverink\MagicTodo;
 
 use Illuminate\Support\Facades\Blade;
 use Illuminate\Support\Facades\Event;
@@ -12,11 +12,11 @@ class ServiceProvider extends BaseServiceProvider
     public function boot()
     {
         $this->publishes([
-            __DIR__ . '/../config/dotoo.php' => base_path('config/dotoo.php'),
-        ], 'dotoo');
+            __DIR__ . '/../config/magic-todo.php' => base_path('config/magic-todo.php'),
+        ], 'magic-todo');
 
         $this->loadViewsFrom(
-            __DIR__ . '/../resources', 'dotoo'
+            __DIR__ . '/../resources', 'magic-todo'
         );
 
         $this->injectAssets();
@@ -25,7 +25,7 @@ public function boot()
     public function register()
     {
         $this->mergeConfigFrom(
-            __DIR__ . '/../config/dotoo.php', 'dotoo'
+            __DIR__ . '/../config/magic-todo.php', 'magic-todo'
         );
 
         $this->registerBladePrecompilers();

testbench.yaml

@@ -1,2 +1,2 @@
 providers:
-  - Leuverink\Dotoo\ServiceProvider
+  - Leuverink\MagicTodo\ServiceProvider