minor #2091 [Site] Support page (smnandre)

This PR was squashed before being merged into the 2.x branch. Discussion ---------- [Site] Support page Minimal / simple page to list support options <img width="1494" alt="Capture d’écran 2024-08-22 à 06 23 30" src="https://github.com/user-attachments/assets/cf2e9c15-45dc-4dfa-9d9e-1de6a39a271f"> You had `@WebMamba` something like this in mind ? Commits ------- 5e25b4c [Site] Support page
symfony · Aug 22, 2024 · a9271c1 · a9271c1
2 parents 571aba7 + 5e25b4c
commit a9271c1
Show file tree

Hide file tree

Showing 9 changed files with 234 additions and 2 deletions.
diff --git a/ux.symfony.com/assets/styles/app.scss b/ux.symfony.com/assets/styles/app.scss
@@ -85,6 +85,7 @@
 @import "components/PackageHeader";
 @import "components/PackageBox";
 @import "components/Cookbook";
+@import "components/SupportBox";
 @import "components/Tabs";
 @import "components/Tag";
 @import "components/Terminal";

diff --git a/ux.symfony.com/assets/styles/components/_Banner.scss b/ux.symfony.com/assets/styles/components/_Banner.scss
@@ -5,13 +5,14 @@
 .Banner {
   background: #0A0A0A;
   color: #fff;
+  transition: transform 250ms linear;
 }
 .Banner + .App {
   position: relative;
 }
 
 .Banner:has(+ .App .AppHeader.open) {
-  display: none;
+  transform: translateY(-100%);
 }
 
 .BannerInner {

diff --git a/ux.symfony.com/assets/styles/components/_SupportBox.scss b/ux.symfony.com/assets/styles/components/_SupportBox.scss
@@ -0,0 +1,88 @@
+.SupportBox {
+  --space-large: 1.5rem;
+  --bg-color: var(--bs-body-bg);
+
+  border: 1px solid var(--bs-secondary-bg);
+  border-radius: var(--border-radius);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-large);
+  padding: var(--space-large);
+  position: relative;
+  place-self: stretch;
+  background: var(--bg-color);
+  transition: transform 750ms ease-in-out;
+
+  &:hover {
+    transition: transform 200ms ease-in-out;
+    transform: translateY(-.25rem);
+  }
+}
+
+@media screen and (max-width: 800px) {
+  .SupportBox {
+    --space-large: 1rem;
+  }
+}
+
+.SupportBox_logo {
+  --logo-size: 3rem;
+  width: var(--logo-size);
+  height: var(--logo-size);
+  border-radius: 14%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+
+  svg {
+    width: 100%;
+    height: auto;
+  }
+
+  @media screen and (max-width: 740px) {
+    --logo-size: 4rem;
+  }
+}
+
+.SupportBox_badge {
+  position: absolute;
+  top: var(--space-large, 1rem);
+  right: var(--space-large, 1rem);
+  .Badge {
+    background: var(--bs-secondary-bg);
+    border: 1px solid var(--bs-secondary-bg);
+  }
+}
+
+.SupportBox_content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  flex: 1 1 auto;
+  gap: 1rem;
+}
+
+.SupportBox_title {
+  font-weight: 500;
+  font-size: 2rem;
+  color: var(--bs-body-color);
+  text-decoration: none;
+  margin: 0;
+}
+
+.SupportBox_link {
+  &:after {
+    content: '';
+    position: absolute;
+    inset: 0 0;
+    z-index: 40;
+  }
+}
+
+.SupportBox_description {
+  line-height: 1.5;
+  margin-bottom: 0;
+}
+
+
diff --git a/ux.symfony.com/assets/styles/sections/_nav.scss b/ux.symfony.com/assets/styles/sections/_nav.scss
@@ -50,16 +50,19 @@
     transform: translateY(-20%);
     opacity: 0;
     z-index: -1;
-    transition: transform 250ms ease-out;
+    transition: transform 350ms ease-out;
     width: 100%;
     flex-direction: column;
     padding: 1rem;
     gap: 1rem;
+    height: 0;
   }
   .AppHeader.open .AppNav_menu {
     transform: translateY(0);
+    transition: transform 500ms ease-out, height 500ms ease-out;
     opacity: 1;
     z-index: 1;
+    height: auto;
   }
   .AppNav_menu a {
     font-size: 1.5rem;
@@ -94,6 +97,11 @@
     opacity: 1;
   }
 }
+.AppNav_item--desktop {
+  @media (min-width: 860px) {
+    display: none;
+  }
+}
 
 .AppNav_actions .AppNav_item:hover {
   transform: scale(1.1);

diff --git a/ux.symfony.com/src/Controller/SitemapController.php b/ux.symfony.com/src/Controller/SitemapController.php
@@ -49,6 +49,7 @@ private function getSitemapUrls(): iterable
         yield $this->generateAbsoluteUrl('app_icons');
         yield $this->generateAbsoluteUrl('app_demos');
         yield $this->generateAbsoluteUrl('app_changelog');
+        yield $this->generateAbsoluteUrl('app_support');
 
         // UX Packages
         foreach ($this->uxPackageRepository->findAll() as $package) {

diff --git a/ux.symfony.com/src/Controller/SupportController.php b/ux.symfony.com/src/Controller/SupportController.php
@@ -0,0 +1,25 @@
+<?php
+
+/*
+ * This file is part of the Symfony package.
+ *
+ * (c) Fabien Potencier <[email protected]>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+namespace App\Controller;
+
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\Routing\Attribute\Route;
+
+class SupportController extends AbstractController
+{
+    #[Route('/support', name: 'app_support')]
+    public function __invoke(): Response
+    {
+        return $this->render('support.html.twig');
+    }
+}
diff --git a/ux.symfony.com/templates/_footer.html.twig b/ux.symfony.com/templates/_footer.html.twig
@@ -11,6 +11,7 @@
                         <twig:Icon name="github"/>
                     </a>
                     <a href="{{ url('app_changelog') }}" style="font-size: 11px; text-transform: uppercase;" class="order-lg-0">Changelog</a>
+                    <a href="{{ url('app_support') }}" style="font-size: 11px; text-transform: uppercase;" class="order-lg-0">Support</a>
                     <a href="https://symfony.com" rel="external noopener noreferrer"
                        style="font-size: 1.5rem;"
                        aria-label="Symfony website"

diff --git a/ux.symfony.com/templates/_header.html.twig b/ux.symfony.com/templates/_header.html.twig
@@ -44,6 +44,7 @@
                     Cookbook
                 </a>
                 <a href="{{ path('app_demos') }}" class="AppNav_item">Demos</a>
+                <a href="{{ path('app_support') }}" class="AppNav_item AppNav_item--desktop" rel="help">Support</a>
             </div>
 
         </nav>

diff --git a/ux.symfony.com/templates/support.html.twig b/ux.symfony.com/templates/support.html.twig
@@ -0,0 +1,106 @@
+{% extends 'base.html.twig' %}
+
+{% set meta = {
+    title: 'Support',
+    description: 'Symfony UX support - Ask questions about Symfony UX and get answers: Slack channel, Github discussions...',
+    canonical: url('app_support'),
+} %}
+
+{% block content %}
+
+    <div class="hero">
+        <div class="container-fluid container-xxl px-4 pt-4 px-md-5">
+            <h1 class="text-center mt-5"><a href="{{ url('app_support') }}">Support</a></h1>
+            <p class="text-center mt-2 mb-5">Ask questions about Symfony UX and find the answers you need.</p>
+        </div>
+    </div>
+
+    <section style="--padding:0;">
+        <div class="container-fluid container px-4 pt-4 px-md-5" style="max-width: 1000px;">
+            <div style="display: grid; gap: 3rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))">
+
+                <div class="SupportBox">
+                    <div class="SupportBox_logo">
+                        <twig:Icon name="github"  />
+                    </div>
+                    <div class="SupportBox_badge">
+                        <span class="Badge Badge--new">
+                            <twig:ux:icon name="bi:stars" style="width: 1.25em; display: block;" />
+                            New!
+                        </span>
+                    </div>
+                    <div class="SupportBox_content">
+                        <h2 class="SupportBox_title">
+                            <a href="https://github.com/symfony/ux/discussions" class="SupportBox_link" rel="external me">Github Discussions</a>
+                        </h2>
+                        <p class="SupportBox_description">
+                            Engage in our GitHub Discussions to find answers and ask the community for help.
+                        </p>
+                    </div>
+                </div>
+
+                <div class="SupportBox">
+                    <div class="SupportBox_logo">
+                        <twig:ux:icon name="logos:slack-icon" />
+                    </div>
+                    <div class="SupportBox_content">
+                        <h2 class="SupportBox_title">
+                            <a href="https://symfony.com/slack" class="SupportBox_link" rel="external noopener">Symfony Slack</a>
+                        </h2>
+                        <p class="SupportBox_description">
+                            Join the Symfony Slack <code>#UX</code> channel to seek help or offer your expertise.
+                        </p>
+                    </div>
+                </div>
+
+                <div class="SupportBox">
+                    <div class="SupportBox_logo">
+                        <twig:ux:icon name="x-twitter" />
+                    </div>
+                    <div class="SupportBox_content">
+                        <h2 class="SupportBox_title">
+                            <a href="https://x.com/SymfonyUX" class="SupportBox_link" rel="external me"><s>Twitter</s> X</a>
+                        </h2>
+                        <p class="SupportBox_description">
+                            Follow the conversation on X for the latest tips and updates about <code>#SymfonyUX</code>.
+                        </p>
+                    </div>
+                </div>
+
+                <div class="SupportBox">
+                    <div class="SupportBox_logo">
+                        <twig:ux:icon name="symfony" />
+                    </div>
+                    <div class="SupportBox_content">
+                        <h2 class="SupportBox_title">
+                            <a href="https://symfony.com/bundles#symfony-ux-bundles" class="SupportBox_link" rel="external noopener">Symfony Docs</a>
+                        </h2>
+                        <p class="SupportBox_description">
+                            Explore the official Symfony docs on <code>UX bundles</code> and components.
+                        </p>
+                    </div>
+                </div>
+
+                {% if false %}
+                <div class="SupportBox">
+                    <div class="SupportBox_logo">
+                        <twig:ux:icon name="logos:stackoverflow-icon" />
+                    </div>
+                    <div class="SupportBox_content">
+                        <h2 class="SupportBox_title">
+                            <a href="https://stackoverflow.com/questions/tagged/symfonyux" class="SupportBox_link">Stack Overflow</a>
+                        </h2>
+                        <p class="SupportBox_description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<code>#ux</code> Nullam auctor, nunc nec</p>
+                    </div>
+                </div>
+                {% endif %}
+
+            </div>
+        </div>
+    </section>
+
+{% endblock %}
+
+{% block aside %}
+    {{ include('_aside.html.twig') }}
+{% endblock %}
-Original file line number
+Diff line change
@@ Expand Up / @@ -44,6 +44,7 @@ @@
                         Cookbook
                     </a>
                     <a href="{{ path('app_demos') }}" class="AppNav_item">Demos</a>
+                    <a href="{{ path('app_support') }}" class="AppNav_item AppNav_item--desktop" rel="help">Support</a>
                 </div>
             </nav>
@@ Expand Down @@