minor #2436 [Site] Add BlueSky (smnandre)

This PR was squashed before being merged into the 2.x branch. Discussion ---------- [Site] Add BlueSky We're on BlueSky! Follow us there :) * For now: https://bsky.app/profile/symfonyux.bsky.social * After this PR: https://bsky.app/profile/ux.symfony.com (for new followers - existing ones won't need to change anything) Changes * add .well-known file to validate bluesky username * update header nav * fix social icons on mobile * update support page ![Capture d’écran 2024-12-10 à 05 24 52](https://github.com/user-attachments/assets/b42b20bc-ed30-491b-910b-daa26e98a381) Commits ------- 9b1b1b3 [Site] Add BlueSky
symfony · Dec 10, 2024 · d2ab99d · d2ab99d
2 parents 49ec396 + 9b1b1b3
commit d2ab99d
Show file tree

Hide file tree

Showing 6 changed files with 100 additions and 47 deletions.
diff --git a/ux.symfony.com/assets/icons/bluesky.svg b/ux.symfony.com/assets/icons/bluesky.svg
diff --git a/ux.symfony.com/assets/styles/sections/_header.scss b/ux.symfony.com/assets/styles/sections/_header.scss
@@ -88,9 +88,14 @@ body.locked {
 
 @media (min-width: 860px) {
   .AppHeader_logo {
-    --height: 2.5rem;
+    --height: 2rem;
   }
   .AppHeader_toggler {
     display: none !important;
   }
 }
+@media (min-width: 1020px) {
+    .AppHeader_logo {
+    --height: 2.5rem;
+  }
+}
diff --git a/ux.symfony.com/assets/styles/sections/_nav.scss b/ux.symfony.com/assets/styles/sections/_nav.scss
@@ -5,15 +5,6 @@
   flex-direction: row;
   gap: 1.5rem;
   justify-content: space-between;
-
-  @media (max-width: 859px) {
-    flex-wrap: wrap;
-  }
-  position: relative;
-  display: flex;
-  flex-direction: row;
-  gap: 1.5rem;
-  justify-content: space-between;
   @media (max-width: 859px) {
     flex-wrap: wrap;
   }
@@ -32,6 +23,29 @@
   }
 }
 
+.AppNav_socials {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+  justify-content: center;
+
+  @media (max-width: 576px) {
+    position: absolute;
+    top: 80vh;
+    width: 100%;
+    display: none;
+  }
+}
+.AppHeader.open .AppNav_socials {
+    @media (max-width: 576px) {
+      display: flex;
+      gap: 2rem;
+      .AppNav_item--icon .Icon {
+        font-size: 2rem;
+      }
+    }
+}
+
 .AppNav_menu {
   justify-content: flex-end;
   display: flex;
@@ -90,13 +104,18 @@
   border: none;
   background: none;
   text-align: center;
-  line-height: 2rem;
+  line-height: 1.45;
   position: relative;
   transition: all 250ms;
   &:hover {
     opacity: 1;
   }
 }
+.AppNav_item--cs {
+  @media (min-width: 860px) and (max-width: 1023px) {
+    display: none;
+  }
+} 
 .AppNav_item--desktop {
   @media (min-width: 860px) {
     display: none;

diff --git a/ux.symfony.com/public/.well-known/atproto-did b/ux.symfony.com/public/.well-known/atproto-did
@@ -0,0 +1 @@
+did:plc:qvqugq4wjihbrwtua5du6d4l
diff --git a/ux.symfony.com/templates/_header.html.twig b/ux.symfony.com/templates/_header.html.twig
@@ -16,35 +16,46 @@
                     <twig:ux:icon name="menu"/>
                 </button>
                 <twig:ThemeSwitcher class="AppNav_item AppNav_item--icon" aria-label="Switch dark/light mode"/>
-                <a
-                    class="AppNav_item AppNav_item--icon d-none d-sm-grid"
-                    href="https://x.com/symfonyux"
-                    rel="external me"
-                    title="Symfony UX on X (Twitter)"
-                >
-                    <twig:ux:icon name="x-twitter"/>
-                </a>
-                <a
-                    class="AppNav_item AppNav_item--icon d-none d-sm-grid"
-                    href="https://github.com/symfony/ux"
-                    rel="external me"
-                    title="Symfony UX on GitHub"
-                >
-                    <twig:ux:icon name="github" />
-                </a>
+                <div class="AppNav_socials">
+                    <a
+                        class="AppNav_item AppNav_item--icon d-grid"
+                        href="https://x.com/symfonyux"
+                        rel="external me"
+                        title="Symfony UX on X (Twitter)"
+                    >
+                        <twig:ux:icon name="x-twitter"/>
+                    </a>
+                    <a
+                        class="AppNav_item AppNav_item--icon d-grid"
+                        href="https://bsky.app/profile/ux.symfony.com"
+                        rel="external me"
+                        title="Symfony UX on BlueSky"
+                    >
+                        <span class="AppNav_badge" data-content="New"></span>
+                        <twig:ux:icon name="bluesky"/>
+                    </a>
+                    <a
+                        class="AppNav_item AppNav_item--icon d-grid"
+                        href="https://github.com/symfony/ux"
+                        rel="external me"
+                        title="Symfony UX on GitHub"
+                    >
+                        <twig:ux:icon name="github" />
+                    </a>
+                </div>
             </div>
 
             <div class="AppNav_menu">
                 <a href="{{ path('app_turbo') }}" class="AppNav_item">Turbo</a>
                 <a href="{{ path('app_live_component') }}" class="AppNav_item">Live <span>Components</span></a>
                 <a href="{{ path('app_icons') }}" class="AppNav_item">Icons</a>
                 <a href="{{ path('app_packages') }}" class="AppNav_item">Packages</a>
-                <a href="{{ path('app_cookbook') }}" class="AppNav_item">
+                <a href="{{ path('app_demos') }}" class="AppNav_item">Demos</a>
+                <a href="{{ path('app_cookbook') }}" class="AppNav_item AppNav_item--cs">Cookbook</a>
+                <a href="{{ path('app_support') }}" class="AppNav_item AppNav_item--cs" rel="help">
                     <span class="AppNav_badge" data-content="New"></span>
-                    Cookbook
+                    Support
                 </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
@@ -16,25 +16,19 @@
     </div>
 
     <section style="--padding:0;">
-        <div class="container-fluid container px-4 pt-4 px-md-5" style="max-width: 1000px;">
+        <div class="container-fluid container px-4 pt-4 px-md-5" style="max-width: 1200px;">
             <div style="display: grid; gap: 3rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))">
 
                 <div class="SupportBox">
                     <div class="SupportBox_logo">
                         <twig:ux: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.
+                            Engage in our GitHub Discussions to find answers, ideas or ask the <code>community</code> for help.
                         </p>
                     </div>
                 </div>
@@ -55,14 +49,34 @@
 
                 <div class="SupportBox">
                     <div class="SupportBox_logo">
-                        <twig:ux:icon name="x-twitter" />
+                        <twig:ux:icon name="bluesky" style="color:#0A7AFFFF;"/>
+                    </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://x.com/SymfonyUX" class="SupportBox_link" rel="external me"><s>Twitter</s> X</a>
+                            <a href="https://bsky.app/profile/ux.symfony.com" class="SupportBox_link" rel="external me">BlueSky</a>
                         </h2>
                         <p class="SupportBox_description">
-                            Follow the conversation on X for the latest tips and updates about <code>#SymfonyUX</code>.
+                            Join and follow <code>@ux.symfony.com</code> to get updates and interact with the <code>#SymfonyUX</code> team!
+                        </p>
+                    </div>
+                </div>
+
+                <div class="SupportBox">
+                    <div class="SupportBox_logo">
+                        <twig:ux:icon name="github"  />
+                    </div>
+                    <div class="SupportBox_content">
+                        <h2 class="SupportBox_title">
+                            <a href="https://github.com/symfony/ux/issues" class="SupportBox_link" rel="external me">Github Issues</a>
+                        </h2>
+                        <p class="SupportBox_description">
+                            Submit <code>bug reports</code> or contribute to the documentation on our GitHub Issues tracker.
                         </p>
                     </div>
                 </div>
@@ -81,19 +95,19 @@
                     </div>
                 </div>
 
-                {% if false %}
                 <div class="SupportBox">
                     <div class="SupportBox_logo">
-                        <twig:ux:icon name="logos:stackoverflow-icon" />
+                        <twig:ux:icon name="x-twitter" />
                     </div>
                     <div class="SupportBox_content">
                         <h2 class="SupportBox_title">
-                            <a href="https://stackoverflow.com/questions/tagged/symfonyux" class="SupportBox_link">Stack Overflow</a>
+                            <a href="https://x.com/SymfonyUX" class="SupportBox_link" rel="external me"><s>Twitter</s> X</a>
                         </h2>
-                        <p class="SupportBox_description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<code>#ux</code> Nullam auctor, nunc nec</p>
+                        <p class="SupportBox_description">
+                            Follow the conversation on X for the latest tips and updates about <code>#SymfonyUX</code>.
+                        </p>
                     </div>
                 </div>
-                {% endif %}
 
             </div>
         </div>