[Site] Rework Toolkit recipe rendering system, improve our Markdown converter

Author: Kocal

src/Toolkit/src/Recipe/RecipeManifest.php

@@ -94,18 +94,19 @@ public static function fromJson(string $json): self
                     throw new \InvalidArgumentException(\sprintf('The dependency #%d of type "npm" must be a non-empty string.', $i));
                 }
 
-                // format: "package@version" or "@scope/package@version"
-                if (str_contains($package, '@')) {
-                    if (substr_count($package, '@') > 1) {
-                        $pos = strrpos($package, '@');
-                        $name = substr($package, 0, $pos);
-                        $version = substr($package, $pos + 1);
-                    } else {
-                        [$name, $version] = explode('@', $package, 2);
-                    }
+                // format: "package@version", "@scope/package", "@scope/package@version"
+                $name = $package;
+                $version = null;
+                $versionPos = strrpos($package, '@');
+                if (false !== $versionPos && 0 !== $versionPos) {
+                    $name = substr($package, 0, $versionPos);
+                    $version = substr($package, $versionPos + 1);
+                }
+
+                if (null !== $version) {
                     $dependencies[] = new NpmPackageDependency($name, new ConstraintVersion($version));
                 } else {
-                    $dependencies[] = new NpmPackageDependency($package);
+                    $dependencies[] = new NpmPackageDependency($name);
                 }
             }
 

src/Toolkit/tests/Recipe/RecipeManifestTest.php

@@ -218,6 +218,7 @@ public function testFromJsonWithValidData()
                         ],
                         "npm": [
                             "tailwindcss@^4.0.0",
+                            "@tailwindplus/elements",
                             "@tailwindplus/elements@1"
                         ],
                         "importmap": [
@@ -239,6 +240,7 @@ public function testFromJsonWithValidData()
             new PhpPackageDependency('tales-from-a-dev/twig-tailwind-extra', new ConstraintVersion('^1.0.0')),
             new PhpPackageDependency('symfony/ux-twig-component', new ConstraintVersion('^2.29')),
             new NpmPackageDependency('tailwindcss', new ConstraintVersion('^4.0.0')),
+            new NpmPackageDependency('@tailwindplus/elements'),
             new NpmPackageDependency('@tailwindplus/elements', new ConstraintVersion('1')),
             new ImportmapPackageDependency('@hotwired/stimulus'),
         ], $manifest->dependencies);

ux.symfony.com/assets/styles/app.scss

@@ -152,7 +152,8 @@ $utilities: map-remove(
 @import "components/Terminal";
 @import "components/TerminalCommand";
 @import "components/ThemeSwitcher";
-@import "components/Toolkit_Tabs";
+@import "components/Toolkit";
+@import "components/Wysiwyg_Tabs";
 @import "components/Wysiwyg";
 
 // Utilities

ux.symfony.com/assets/styles/components/_Toolkit.scss

@@ -0,0 +1,23 @@
+.Toolkit_Loader {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: .2rem;
+    position: absolute;
+
+    svg {
+        animation: rotating 1s linear infinite;
+    }
+}
+
+.Toolkit_Preview {
+    width: 100%;
+    transition: opacity .250s linear;
+    border-radius: .75rem;
+    opacity: 1;
+
+    &.loading {
+        opacity: 0;
+    }
+}

ux.symfony.com/assets/styles/components/_Toolkit_Tabs.scss

@@ -22,7 +22,7 @@
         margin-top: 1.5rem;
     }
 
-    a {
+    a:not(.Terminal_title) {
         color: var(--bs-link-color);
         text-decoration: underline;
     }
@@ -36,4 +36,8 @@
     .table-responsive .table {
         margin-bottom: 0;
     }
+
+    .Terminal {
+        margin-bottom: 1rem;
+    }
 }

ux.symfony.com/assets/styles/components/_Wysiwyg.scss

@@ -0,0 +1,36 @@
+.Wysiwyg_Tabs {
+}
+
+.Wysiwyg_TabHead {
+  display: flex;
+  flex-direction: row;
+  margin-bottom: 1rem
+}
+
+.Wysiwyg_TabControl {
+  border-bottom: 3px solid transparent;
+  color: var(--bs-primary-color);
+  padding: 0 1rem;
+  font-size: .9rem;
+  line-height: 2;
+  font-stretch: semi-condensed;
+  transition: border-color 150ms ease-in-out;
+  margin-bottom: -1px;
+}
+
+.Wysiwyg_TabControl.active {
+  border-color: var(--bs-secondary-color);
+}
+
+.Wysiwyg_TabPanel {
+    position: relative;
+}
+
+.Wysiwyg_TabPanel:not(.active) {
+  display: none;
+}
+
+.Wysiwyg_TabPanel:has(.Toolkit_Preview) {
+    border: 1px solid var(--bs-border-color);
+    border-radius: .75rem
+}

ux.symfony.com/assets/styles/components/_Wysiwyg_Tabs.scss

@@ -23,6 +23,7 @@ services:
     # add more service definitions when explicit configuration is needed
     # please note that last definitions always *replace* previous ones
     Tempest\Highlight\Highlighter:
+        factory: ['App\Service\Tempest\Highlighter\HighlighterFactory', 'create']
         tags: ['twig.runtime']
 
     ux_toolkit.registry.registry_factory:

ux.symfony.com/config/services.yaml

@@ -11,8 +11,9 @@
 
 namespace App\Service\CommonMark;
 
-use App\Service\CommonMark\Extension\CodeBlockRenderer\CodeBlockRenderer;
-use App\Service\Toolkit\ToolkitService;
+use App\Service\CommonMark\Extension\FencedCode\FencedCodeRenderer;
+use App\Service\CommonMark\Extension\Tabs\TabsExtension;
+use App\Service\CommonMark\Extension\ToolkitPreview\ToolkitPreviewExtension;
 use League\CommonMark\CommonMarkConverter;
 use League\CommonMark\Extension\CommonMark\Node\Block\FencedCode;
 use League\CommonMark\Extension\DefaultAttributes\DefaultAttributesExtension;
@@ -22,15 +23,20 @@
 use League\CommonMark\Extension\Table\Table;
 use League\CommonMark\Extension\Table\TableExtension;
 use Symfony\Component\DependencyInjection\Attribute\AsDecorator;
+use Symfony\Component\HttpFoundation\UriSigner;
+use Symfony\Component\Routing\Generator\UrlGeneratorInterface;
+use Symfony\UX\TwigComponent\ComponentRendererInterface;
 
 /**
  * @author Kevin Bond <[email protected]>
  */
 #[AsDecorator('twig.markdown.league_common_mark_converter_factory')]
-final class ConverterFactory
+final readonly class ConverterFactory
 {
     public function __construct(
-        private readonly ToolkitService $toolkitService,
+        private ComponentRendererInterface $componentRenderer,
+        private UriSigner $uriSigner,
+        private UrlGeneratorInterface $urlGenerator,
     ) {
     }
 
@@ -39,7 +45,7 @@ public function __invoke(): CommonMarkConverter
         $converter = new CommonMarkConverter([
             'default_attributes' => [
                 Table::class => [
-                    'class' => 'table',
+                    'class' => 'table table-hover',
                 ],
             ],
             'mentions' => [
@@ -72,7 +78,9 @@ public function __invoke(): CommonMarkConverter
             ->addExtension(new MentionExtension())
             ->addExtension(new FrontMatterExtension())
             ->addExtension(new TableExtension())
-            ->addRenderer(FencedCode::class, new CodeBlockRenderer($this->toolkitService))
+            ->addExtension(new TabsExtension())
+            ->addExtension(new ToolkitPreviewExtension($this->uriSigner, $this->urlGenerator))
+            ->addRenderer(FencedCode::class, new FencedCodeRenderer($this->componentRenderer))
         ;
 
         return $converter;