minor #2309 Show a visible link to the docs of each package (javiereguiluz, Kocal)

This PR was merged into the 2.x branch.

Discussion
----------

Show a visible link to the docs of each package

| Q             | A
| ------------- | ---
| Bug fix?      | yes
| New feature?  | no
| Issues        | #2273
| License       | MIT

I know that you mentioned that there's a work-in-progress effort to update some things in the current design (#2273 (comment)) but I think we should fix this issue quickly because it's a problem in many long package pages.

If you don't like the proposed changes here it's fine; let's iterate over them. Tell me what to fix or change and I'll do it. Thanks!

This is how this PR looks at the moment:

![](https://github.com/user-attachments/assets/372918e7-c72e-4d03-8f5a-5e56d8a9c76b)

#SymfonyHackday :)

Commits
-------

7c2ad1d [Site] Rework "Read the docs" button on packages pages
3bc80c5 Show a visible link to the docs of each package

Author: Kocal

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

@@ -15,6 +15,25 @@
     opacity: 1;
   }
 
+  &.DocsLink-sm {
+    border-radius: var(--border-radius-sm, .5rem);
+    height: 52px;
+    opacity: 1;
+    padding: var(--space-small, .75rem) var(--space-large, 1.5rem);
+    transform: translateY(50%);
+
+    p {
+      margin-bottom: 0;
+    }
+
+    svg {
+      font-size: 1.5rem;
+    }
+
+    &:hover {
+      transform: translateY(50%);
+    }
+  }
 }
 .DocsLink_content {
   display: flex;
@@ -58,5 +77,3 @@
     margin-bottom: 0;
   }
 }
-
-

ux.symfony.com/src/Twig/Components/DocsLink.php

@@ -17,9 +17,10 @@
 #[AsTwigComponent]
 class DocsLink
 {
+    public string $size = 'md';
     public string $url;
     public string $title;
-    public string $text;
+    public ?string $text = null;
 
     public ?string $icon = null;
 
@@ -28,4 +29,10 @@ public function isExternal(): bool
     {
         return !str_starts_with($this->url, 'https://symfony.com');
     }
+
+    #[ExposeInTemplate]
+    public function isSmall(): bool
+    {
+        return 'sm' === $this->size;
+    }
 }

ux.symfony.com/templates/components/DocsLink.html.twig

@@ -1,17 +1,30 @@
-<div {{ attributes.defaults({class: 'DocsLink'}) }}>
+<div {{ attributes.defaults({class: 'DocsLink DocsLink-' ~ size}) }}>
     <div class="DocsLink_content">
-        <p class="DocsLink_title ubuntu-header">
-            <a href="{{ url }}" class="DocsLink_link"
-               rel="{{ isExternal ? 'external noopened noreferrer' }}"
-            >{{ title }}</a>
-            {% if icon|default %}
-                <twig:ux:icon name="{{ icon }}" class="Icon DocsLink_arrow"/>
-            {% elseif isExternal %}
-                <twig:ux:icon name="arrow-right" style="transform: rotate(-45deg);" class="Icon DocsLink_arrow"/>
-            {% endif %}
-        </p>
-        <div class="DocsLink_description">
-            <p>{{ text }}</p>
-        </div>
+        {% if isSmall %}
+            <p class="d-flex align-items-center">
+                <twig:ux:icon name="mdi:book-open-variant-outline" class="Icon me-2" />
+
+                <a href="{{ url }}" class="DocsLink_link"
+                   rel="{{ isExternal ? 'external noopened noreferrer' }}"
+                >{{ title }}</a>
+            </p>
+        {% else %}
+            <p class="DocsLink_title ubuntu-header">
+                <a href="{{ url }}" class="DocsLink_link" rel="{{ isExternal ? 'external noopened noreferrer' }}">
+                    {{ title }}
+                </a>
+                {% if icon|default %}
+                    <twig:ux:icon name="{{ icon }}" class="Icon DocsLink_arrow"/>
+                {% elseif isExternal %}
+                    <twig:ux:icon name="arrow-right" style="transform: rotate(-45deg);" class="Icon DocsLink_arrow"/>
+                {% endif %}
+            </p>
+        {% endif %}
+
+        {% if text %}
+            <div class="DocsLink_description">
+                <p>{{ text }}</p>
+            </div>
+        {% endif %}
     </div>
 </div>

ux.symfony.com/templates/components/Package/PackageHeader.html.twig

@@ -12,15 +12,21 @@
             </p>
         </div>
 
-        {% if command is not defined or command %}
-            <div class="d-flex justify-content-center">
+        <div class="d-flex justify-content-center">
+            {% if command is not defined or command %}
                 <twig:TerminalCommand
                     aria-label="Composer command to install {{ package.humanName }}"
                     command="{{ package.composerRequireCommand }}"
                     style="--color-accent: {{ package.color }}; transform: translateY(50%);"
                 />
-            </div>
-        {% endif %}
+            {% endif %}
 
+            <twig:DocsLink
+                class="ms-3"
+                size="sm"
+                title="Read the docs"
+                url="{{ package.officialDocsUrl }}"
+            />
+        </div>
     </div>
 </div>