Skip to content

Aren't todo comments the worst? Turn them into interactive, in-your-face reminders with a single keystroke

License

Notifications You must be signed in to change notification settings

gwleuverink/magic-todo

Folders and files

NameName
Last commit message
Last commit date
Aug 15, 2024
Aug 20, 2024
Aug 15, 2024
Aug 20, 2024
Sep 26, 2024
Aug 20, 2024
Aug 15, 2024
Aug 14, 2024
Aug 14, 2024
Aug 14, 2024
Aug 15, 2024
Aug 16, 2024
Aug 15, 2024
Sep 26, 2024
Sep 26, 2024
Aug 14, 2024
Aug 14, 2024
Aug 14, 2024
Aug 14, 2024
Aug 14, 2024
Aug 15, 2024
Aug 14, 2024
Sep 26, 2024
Aug 14, 2024

Repository files navigation

Magic todo

codestyle tests

Magically turn HTML comments into interactive hints in your Laravel Blade frontend.

Installation

composer require leuverink/magic-todo

Usage

Magic Todo turns your standard TODO comments in Blade files into interactive elements. By default, you can activate this feature by adding a pipe | symbol at the beginning of your comment.

<!-- |TODO: This button is not yet implemented -->
<button class="px-2 py-1 border border-gray-600 border-solid rounded">
  Some action
</button>

inline-comment-result

You can also highlight entire blocks of code:

<!-- |TODO: This button is not yet implemented -->
<button class="px-2 py-1 border border-gray-600 border-solid rounded">
  Some action
</button>
<!-- |ENDTODO -->

inline-comment-result

Blade comments are supported as well:

{{-- |TODO: This button is not yet implemented --}}

Modifying TODO Keywords

You can modify the default behavior by publishing the package config and editing the magic-todo.open & magic-todo.close keywords. For instance, changing magic-todo.open to TODO will highlight every todo comment in your templates.

If you change magic-todo.open to TODO, Every TODO comment in your template will be highlighted.

Direct Component Usage

For more control, you can use the highlight component directly in your markup:

<!-- Render a questionmark with tooltip -->
<x-magic-todo::highlight todo="Hello World" />

<!-- Wrap an element using the main slot -->
<x-magic-todo::highlight todo="Hello World">
    Foo bar
</x-magic-todo::highlight>

<x-magic-todo::highlight>
    <x-slot:todo>
        <div>
            Do anything you like in here
        </div>
    </x-slot:todo>
</x-magic-todo::highlight>

Configuration

[
    'enabled' => env('MAGIC_TODO_ENABLED', app()->isLocal()),
    'open' => 'TODO:',
    'close' => 'ENDTODO',
];

Development

composer lint # run all linters
composer fix # run all fixers

composer analyze # run static analysis
composer baseline # generate static analysis baseline

composer test # run test suite
composer build # bundle all assets

Ideas

Here are some other features I have in mind if there is any interest in this package:

  • Artisan command to list all todos (both in comments & direct component usage)
  • Syntax for rendering in specific environments (e.g., only dev / dev + staging)
  • Support for NOTE & FIXME comments with different styling
  • Replace @mentions with clickable GitHub avatars
  • Add better theme/styling support

License

This package is open-source software licensed under the MIT license.

About

Aren't todo comments the worst? Turn them into interactive, in-your-face reminders with a single keystroke

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published