Skip to content

Commit 5a6a89a

Browse files
KocalKocal
committed
[Site] Add manual installation steps for Toolkit kits's components
1 parent 3b6a11b commit 5a6a89a

File tree

3 files changed

+58
-24
lines changed

3 files changed

+58
-24
lines changed

‎ux.symfony.com/src/Service/CommonMark/Extension/CodeBlockRenderer/CodeBlockRenderer.php‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -62,9 +62,7 @@ private function highlightCode(string $code, string $language): string
6262
return <<<HTML
6363
<div class="Terminal terminal-code" style="margin-bottom: 1rem;">
6464
<div class="Terminal_body">
65-
<div class="Terminal_content" style="max-height: 450px;">
66-
{$output}
67-
</div>
65+
<div class="Terminal_content" style="max-height: 450px;">{$output}</div>
6866
</div>
6967
</div>
7068
HTML;

‎ux.symfony.com/src/Service/Toolkit/ToolkitService.php‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,13 @@
1212
namespace App\Service\Toolkit;
1313

1414
use App\Enum\ToolkitKitId;
15+
use App\Util\SourceCleaner;
1516
use Symfony\Component\DependencyInjection\Attribute\Autowire;
17+
use Symfony\Component\Filesystem\Path;
1618
use Symfony\Component\HttpFoundation\UriSigner;
1719
use Symfony\Component\Routing\Generator\UrlGeneratorInterface;
1820
use Symfony\UX\Toolkit\Asset\Component;
21+
use Symfony\UX\Toolkit\Installer\PoolResolver;
1922
use Symfony\UX\Toolkit\Kit\Kit;
2023
use Symfony\UX\Toolkit\Registry\RegistryFactory;
2124
use function Symfony\Component\String\s;
@@ -77,6 +80,41 @@ public function renderComponentPreviewCodeTabs(ToolkitKitId $kitId, string $code
7780
]);
7881
}
7982

83+
public function renderInstallationSteps(ToolkitKitId $kitId, Component $component): string
84+
{
85+
$kit = $this->getKit($kitId);
86+
$pool = (new PoolResolver)->resolveForComponent($kit, $component);
87+
88+
$manual = '<p>The UX Toolkit is not mandatory to install a component. You can install it manually by following the next steps:</p>';
89+
$manual .= '<ol style="display: grid; gap: 1rem;">';
90+
$manual .= '<li><strong>Copy the files into your Symfony app:</strong>';
91+
foreach ($pool->getFiles() as $file) {
92+
$manual .= sprintf(
93+
"<details><summary><code>%s</code></summary>\n%s\n</details>",
94+
$file->relativePathNameToKit,
95+
sprintf("\n```%s\n%s\n```", pathinfo($file->relativePathNameToKit, PATHINFO_EXTENSION), trim(file_get_contents(Path::join($kit->path, $file->relativePathNameToKit))))
96+
);
97+
}
98+
$manual .= '</li>';
99+
100+
if ($phpPackageDependencies = $pool->getPhpPackageDependencies()) {
101+
$manual .= '<li><strong>If necessary, install the following Composer dependencies:</strong>';
102+
$manual .= self::generateTerminal('shell', SourceCleaner::processTerminalLines('composer require ' . implode(' ', $phpPackageDependencies)));
103+
$manual .= '</li>';
104+
}
105+
106+
$manual .= '<li><strong>And the most important, enjoy!</strong></li>';
107+
$manual .= '</ol>';
108+
109+
return $this->generateTabs([
110+
'Automatic' => sprintf(
111+
'<p>Ensure the Symfony UX Toolkit is installed in your Symfony app:</p>%s<p>Then, run the following command to install the component and its dependencies:</p>%s',
112+
self::generateTerminal('shell', SourceCleaner::processTerminalLines('composer require --dev symfony/ux-toolkit'), 'margin-bottom: 1rem'),
113+
self::generateTerminal('shell', SourceCleaner::processTerminalLines("bin/console ux:toolkit:install-component {$component->name} --kit {$kitId->value}"), 'margin-bottom: 1rem'),
114+
),
115+
'Manual' => $manual,
116+
]);
117+
}
80118

81119
/**
82120
* @param non-empty-array<string, string> $tabs
@@ -103,4 +141,17 @@ private static function generateTabs(array $tabs): string
103141
</div>
104142
HTML;
105143
}
144+
145+
private static function generateTerminal(string $language, string $content, string $style = ''): string
146+
{
147+
return <<<HTML
148+
<div class="Terminal terminal-code" style="$style">
149+
<div class="Terminal_body">
150+
<div class="Terminal_content">
151+
<pre><code class="language-{$language}">{$content}</code></pre>
152+
</div>
153+
</div>
154+
</div>
155+
HTML;
156+
}
106157
}

‎ux.symfony.com/src/Twig/Components/Toolkit/ComponentDoc.php‎

Lines changed: 6 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
namespace App\Twig\Components\Toolkit;
1313

1414
use App\Enum\ToolkitKitId;
15+
use App\Service\Toolkit\ToolkitService;
1516
use App\Util\SourceCleaner;
1617
use Symfony\Component\HttpFoundation\UriSigner;
1718
use Symfony\Component\Routing\Generator\UrlGeneratorInterface;
@@ -28,12 +29,7 @@ class ComponentDoc
2829
public ToolkitKitId $kitId;
2930
public Component $component;
3031

31-
public function __construct(
32-
private readonly UrlGeneratorInterface $urlGenerator,
33-
private readonly UriSigner $uriSigner,
34-
private readonly Highlighter $highlighter,
35-
private readonly \Twig\Environment $twig,
36-
) {
32+
public function __construct(private readonly ToolkitService $toolkitService) {
3733
}
3834

3935
public function getContent(): string
@@ -54,23 +50,9 @@ private function formatContent(string $markdownContent): string
5450

5551
private function insertInstallation(AbstractString $markdownContent): AbstractString
5652
{
57-
$installationCode = SourceCleaner::processTerminalLines(<<<SHELL
58-
bin/console ux:toolkit:install-component {$this->component->name} --kit {$this->kitId->value}
59-
SHELL
60-
);
61-
62-
// TODO: Provide tabs showing automatic and manual installation
6353
return $markdownContent->replace(
6454
'<!-- Placeholder: Installation -->',
65-
<<<HTML
66-
<div class="Terminal terminal-code" style="margin-bottom: 1rem;">
67-
<div class="Terminal_body">
68-
<div class="Terminal_content">
69-
<pre><code class="language-shell">{$installationCode}</code></pre>
70-
</div>
71-
</div>
72-
</div>
73-
HTML
55+
$this->toolkitService->renderInstallationSteps($this->kitId, $this->component)
7456
);
7557
}
7658

@@ -85,6 +67,9 @@ private function insertUsage(AbstractString $markdownContent): AbstractString
8567
);
8668
}
8769

70+
/**
71+
* Iterate over code blocks, and add the option "kit" if the option "preview" exists.
72+
*/
8873
private function adaptPreviewableCodeBlocks(AbstractString $markdownContent): AbstractString
8974
{
9075
return $markdownContent->replaceMatches('/```(?P<lang>[a-z]+) +(?P<options>\{.+?\})\n/', function (array $matches) {

0 commit comments

Comments
 (0)