Move social links to the footer and add new networks

resources/views/components/footer.blade.php

@@ -66,7 +66,7 @@ class="h-6"
                         })
                     }
                 "
-                class="flex flex-wrap items-center justify-center gap-2.5 *:opacity-0"
+                class="flex flex-wrap items-center justify-center gap-x-3 gap-y-2 *:opacity-0"
                 aria-label="Social networks"
             >
                 <x-social-networks-all />

resources/views/components/icons/devnull.blade.php

@@ -0,0 +1,16 @@
+<svg
+    {{ $attributes }}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="1.6 1.5 45 45"
+>
+    <path
+        fill="currentColor"
+        d="M2 42h10L26 6H16Z"
+    />
+    <path
+        fill="currentColor"
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M17.81 43.5h13.22L46.19 4.5H32.97ZM22.19 40.5l12.84-33h6.78l-12.84 33Z"
+    />
+</svg>

resources/views/components/icons/facebook.blade.php

@@ -0,0 +1,10 @@
+<svg
+    {{ $attributes }}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+>
+    <path
+        fill="currentColor"
+        d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"
+    />
+</svg>

resources/views/components/icons/instagram.blade.php

@@ -0,0 +1,28 @@
+<svg
+    {{ $attributes }}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+>
+    <rect
+        x="2"
+        y="2"
+        width="20"
+        height="20"
+        rx="5.5"
+    />
+    <circle
+        cx="12"
+        cy="12"
+        r="4.5"
+    />
+    <circle
+        cx="17.6"
+        cy="6.4"
+        r="1.3"
+        fill="currentColor"
+        stroke="none"
+    />
+</svg>

resources/views/components/icons/threads.blade.php

@@ -0,0 +1,10 @@
+<svg
+    {{ $attributes }}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+>
+    <path
+        fill="currentColor"
+        d="M12.186 24h-.007c-3.581-.024-6.334-1.205-8.184-3.509C2.35 18.44 1.5 15.586 1.472 12.01v-.017c.03-3.579.879-6.43 2.525-8.482C5.845 1.205 8.6.024 12.18 0h.014c2.746.02 5.043.725 6.826 2.098 1.677 1.29 2.858 3.13 3.509 5.467l-2.04.569c-1.104-3.96-3.898-5.984-8.304-6.015-2.91.022-5.11.936-6.54 2.717C4.307 6.504 3.616 8.914 3.589 12c.027 3.086.718 5.496 2.057 7.164 1.43 1.783 3.631 2.698 6.54 2.717 2.623-.02 4.358-.631 5.8-2.045 1.647-1.613 1.618-3.593 1.09-4.798-.31-.71-.873-1.3-1.634-1.75-.192 1.352-.622 2.446-1.284 3.272-.886 1.102-2.14 1.704-3.73 1.79-1.202.065-2.361-.218-3.259-.801-1.063-.689-1.685-1.74-1.752-2.964-.065-1.19.408-2.285 1.33-3.082.88-.76 2.119-1.207 3.583-1.291a13.853 13.853 0 0 1 3.02.142c-.126-.742-.375-1.332-.75-1.757-.513-.586-1.308-.883-2.359-.89h-.029c-.844 0-1.992.232-2.721 1.32L7.734 7.847c.98-1.454 2.568-2.256 4.478-2.256h.044c3.194.02 5.097 1.975 5.287 5.388.108.046.216.094.321.142 1.49.7 2.58 1.761 3.154 3.07.797 1.82.871 4.79-1.548 7.158-1.85 1.81-4.094 2.628-7.277 2.65Zm1.003-11.69c-.242 0-.487.007-.739.021-1.836.103-2.98.946-2.916 2.143.067 1.256 1.452 1.839 2.784 1.767 1.224-.065 2.818-.543 3.086-3.71a10.5 10.5 0 0 0-2.215-.221z"
+    />
+</svg>

resources/views/components/icons/tiktok.blade.php

@@ -0,0 +1,10 @@
+<svg
+    {{ $attributes }}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+>
+    <path
+        fill="currentColor"
+        d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z"
+    />
+</svg>

resources/views/components/icons/twitch.blade.php

@@ -0,0 +1,10 @@
+<svg
+    {{ $attributes }}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+>
+    <path
+        fill="currentColor"
+        d="M11.571 4.714h1.715v5.143H11.57zm4.715 0H18v5.143h-1.714zM6 0 1.714 4.286v15.428h5.143V24l4.286-4.286h3.428L22.286 12V0zm14.571 11.143-3.428 3.428h-3.429l-3 3v-3H6.857V1.714h13.714z"
+    />
+</svg>

resources/views/components/navbar/mobile-menu.blade.php

@@ -485,24 +485,13 @@ class="rounded-full px-2.5 py-1.5 transition duration-300 ease-in-out"
             </div>
 
             <div
-                class="h-0.5 w-full rounded-full bg-current opacity-5"
+                class="h-0.5 w-full rounded-full bg-current opacity-5 md:hidden"
                 role="presentation"
             ></div>
 
             <div class="mt-4 flex justify-center md:hidden">
                 <x-bifrost-button />
             </div>
-
-            <nav
-                class="mx-auto mt-4 flex"
-                aria-label="Social media"
-            >
-                <div
-                    class="flex flex-wrap justify-center-safe gap-2 contrast-120"
-                >
-                    <x-social-networks-all />
-                </div>
-            </nav>
         </div>
     </div>
 </div>

resources/views/components/social-networks-all.blade.php

@@ -1,95 +1,33 @@
-<div>
-    <a
-        href="https://x.com/nativephp"
-        title="Twitter"
-        class="group dark:hover:bg-haiti inline-grid size-10 place-items-center rounded-xl bg-zinc-200/80 transition duration-200 hover:bg-gray-200/70 dark:bg-gray-700/40"
-    >
-        <x-icons.twitter
-            class="size-[1.1rem] text-black transition duration-200 group-hover:text-violet-400 dark:text-white"
-        />
-    </a>
-</div>
+@php
+    $networks = [
+        ['href' => $githubLink, 'title' => 'Source code of NativePHP', 'icon' => 'github', 'size' => 'size-[1.2rem]'],
+        ['href' => $openCollectiveLink, 'title' => 'NativePHP on Open Collective', 'icon' => 'opencollective', 'size' => 'size-[1.2rem]'],
+        ['href' => $discordLink, 'title' => 'Go to discord server', 'icon' => 'discord', 'size' => 'size-[1.25rem]'],
+        ['href' => 'https://youtube.com/@NativePHPOfficial', 'title' => 'NativePHP on YouTube', 'icon' => 'youtube', 'size' => 'size-[1.5rem]'],
+        ['href' => 'https://www.twitch.tv/nativephp', 'title' => 'NativePHP on Twitch', 'icon' => 'twitch', 'size' => 'size-[1.15rem]'],
+        ['href' => 'https://dev-null.sh/@nativephp', 'title' => 'NativePHP on /dev/null', 'icon' => 'devnull', 'size' => 'size-[1.1rem]'],
+        ['href' => 'https://x.com/nativephp', 'title' => 'NativePHP on X', 'icon' => 'twitter', 'size' => 'size-[1.1rem]'],
+        ['href' => $bskyLink, 'title' => 'NativePHP on Bluesky', 'icon' => 'bluesky', 'size' => 'size-[1.2rem]'],
+        ['href' => 'https://www.threads.com/@nativephp', 'title' => 'NativePHP on Threads', 'icon' => 'threads', 'size' => 'size-[1.15rem]'],
+        ['href' => 'https://www.facebook.com/profile.php?id=61578672170369', 'title' => 'NativePHP on Facebook', 'icon' => 'facebook', 'size' => 'size-[1.2rem]'],
+        ['href' => 'https://www.instagram.com/nativephp/', 'title' => 'NativePHP on Instagram', 'icon' => 'instagram', 'size' => 'size-[1.2rem]'],
+        ['href' => 'https://www.tiktok.com/@nativephp', 'title' => 'NativePHP on TikTok', 'icon' => 'tiktok', 'size' => 'size-[1.15rem]'],
+        ['href' => 'https://www.linkedin.com/company/nativephp/', 'title' => 'NativePHP on LinkedIn', 'icon' => 'linkedin', 'size' => 'size-[1.2rem]'],
+    ];
+@endphp
 
-<div>
-    <a
-        href="https://youtube.com/@NativePHPOfficial"
-        title="Youtube"
-        class="group dark:hover:bg-haiti inline-grid size-10 place-items-center rounded-xl bg-zinc-200/80 transition duration-200 hover:bg-gray-200/70 dark:bg-gray-700/40"
-    >
-        <x-icons.youtube
-            class="size-[1.4rem] text-black transition duration-200 group-hover:text-violet-400 dark:text-white"
-        />
-    </a>
-</div>
-
-<div>
-    <a
-        href="{{ $githubLink }}"
-        title="Source code of NativePHP"
-        class="group dark:hover:bg-haiti inline-grid size-10 place-items-center rounded-xl bg-zinc-200/80 transition duration-200 hover:bg-gray-200/70 dark:bg-gray-700/40"
-    >
-        <x-icons.github
-            class="size-[1.1rem] transition duration-200 group-hover:text-violet-400 dark:text-white"
-        />
-    </a>
-</div>
-
-<div>
-    <a
-        href="{{ $discordLink }}"
-        title="Go to discord server"
-        class="group dark:hover:bg-haiti inline-grid size-10 place-items-center rounded-xl bg-zinc-200/80 transition duration-200 hover:bg-gray-200/70 dark:bg-gray-700/40"
-    >
-        <x-icons.discord
-            class="size-[1.1rem] text-black transition duration-200 group-hover:text-violet-400 dark:text-white"
-        />
-    </a>
-</div>
-
-<div>
-    <a
-        href="{{ $openCollectiveLink }}"
-        title="NativePHP on Open Collective"
-        class="group dark:hover:bg-haiti inline-grid size-10 place-items-center rounded-xl bg-zinc-200/80 transition duration-200 hover:bg-gray-200/70 dark:bg-gray-700/40"
-    >
-        <x-icons.opencollective
-            class="size-[1.1rem] text-black transition duration-200 group-hover:text-violet-400 dark:text-white"
-        />
-    </a>
-</div>
-
-<div>
-    <a
-        href="{{ $bskyLink }}"
-        title="Bluesky"
-        class="group dark:hover:bg-haiti inline-grid size-10 place-items-center rounded-xl bg-zinc-200/80 transition duration-200 hover:bg-gray-200/70 dark:bg-gray-700/40"
-    >
-        <x-icons.bluesky
-            class="size-[1.1rem] text-black transition duration-200 group-hover:text-violet-400 dark:text-white"
-        />
-    </a>
-</div>
-
-<div>
-    <a
-        href="https://pinkary.com/@nativephp"
-        title="NativePHP on Pinkary"
-        class="group dark:hover:bg-haiti inline-grid size-10 place-items-center rounded-xl bg-zinc-200/80 transition duration-200 hover:bg-gray-200/70 dark:bg-gray-700/40"
-    >
-        <x-icons.pinkary
-            class="size-[1.6rem] text-black transition duration-200 group-hover:text-violet-400 dark:text-white"
-        />
-    </a>
-</div>
-
-<div>
-    <a
-        href="https://www.linkedin.com/company/nativephp/"
-        title="NativePHP on LinkedIn"
-        class="group dark:hover:bg-haiti inline-grid size-10 place-items-center rounded-xl bg-zinc-200/80 transition duration-200 hover:bg-gray-200/70 dark:bg-gray-700/40"
-    >
-        <x-icons.linkedin
-            class="size-[1.1rem] text-black transition duration-200 group-hover:text-violet-400 dark:text-white"
-        />
-    </a>
-</div>
+@foreach ($networks as $network)
+    <div>
+        <a
+            href="{{ $network['href'] }}"
+            title="{{ $network['title'] }}"
+            aria-label="{{ $network['title'] }}"
+            class="group inline-grid size-8 place-items-center"
+        >
+            <x-dynamic-component
+                :component="'icons.' . $network['icon']"
+                class="{{ $network['size'] }} text-gray-500 transition duration-200 group-hover:text-violet-400 dark:text-gray-400"
+            />
+        </a>
+    </div>
+@endforeach

tests/Feature/SocialNetworkLinksTest.php

@@ -0,0 +1,86 @@
+<?php
+
+namespace Tests\Feature;
+
+use App\Features\ShowAuthButtons;
+use App\Features\ShowPlugins;
+use Illuminate\Foundation\Testing\RefreshDatabase;
+use Laravel\Pennant\Feature;
+use PHPUnit\Framework\Attributes\Test;
+use Tests\TestCase;
+
+class SocialNetworkLinksTest extends TestCase
+{
+    use RefreshDatabase;
+
+    protected function setUp(): void
+    {
+        parent::setUp();
+
+        Feature::define(ShowAuthButtons::class, false);
+        Feature::define(ShowPlugins::class, true);
+    }
+
+    #[Test]
+    public function the_footer_links_to_dev_null_instead_of_pinkary(): void
+    {
+        $this
+            ->withoutVite()
+            ->get('/contributing')
+            ->assertOk()
+            ->assertSee('href="https://dev-null.sh/@nativephp"', false)
+            ->assertSee('title="NativePHP on /dev/null"', false)
+            ->assertDontSee('pinkary.com')
+            ->assertDontSee('Pinkary');
+    }
+
+    #[Test]
+    public function the_footer_lists_every_network_in_the_chosen_order(): void
+    {
+        $this
+            ->withoutVite()
+            ->get('/contributing')
+            ->assertOk()
+            ->assertSeeInOrder([
+                'title="Source code of NativePHP"',
+                'title="NativePHP on Open Collective"',
+                'title="Go to discord server"',
+                'title="NativePHP on YouTube"',
+                'title="NativePHP on Twitch"',
+                'title="NativePHP on /dev/null"',
+                'title="NativePHP on X"',
+                'title="NativePHP on Bluesky"',
+                'title="NativePHP on Threads"',
+                'title="NativePHP on Facebook"',
+                'title="NativePHP on Instagram"',
+                'title="NativePHP on TikTok"',
+                'title="NativePHP on LinkedIn"',
+            ], false);
+    }
+
+    #[Test]
+    public function social_links_only_appear_in_the_footer_and_not_the_header_menu(): void
+    {
+        $response = $this
+            ->withoutVite()
+            ->get('/contributing')
+            ->assertOk()
+            ->assertSee('aria-label="Social networks"', false)
+            ->assertDontSee('aria-label="Social media"', false);
+
+        $content = $response->getContent();
+
+        foreach ([
+            'https://x.com/nativephp',
+            'https://www.twitch.tv/nativephp',
+            'https://www.tiktok.com/@nativephp',
+            'https://www.instagram.com/nativephp/',
+            'https://www.threads.com/@nativephp',
+            'https://www.facebook.com/profile.php?id=61578672170369',
+            'https://dev-null.sh/@nativephp',
+            'https://www.linkedin.com/company/nativephp/',
+        ] as $url) {
+            $this->assertSame(1, substr_count($content, 'href="'.$url.'"'), "Expected {$url} to be linked exactly once.");
+        }
+    }
+}