Merge branch 'main' of https://github.com/filamentphp/filamentphp.com

content/plugins/filament-minimal-theme.md

@@ -44,7 +44,7 @@ Filament Minimal Theme can be installed using our private Composer repository. C
 Now you can install the package using:
 
 ```bash
-composer require filament/minimal-theme:^3.0@alpha
+composer require filament/minimal-theme:"^3.0@alpha"
 ```
 
 You will be prompted to provide a username and password. Use your order email address as username and the license key you received as password.

docs/src/components/Header.astro

@@ -3,6 +3,7 @@ import MobileNavigation from '@components/MobileNavigation.astro'
 import VersionSelector from '@components/VersionSelector.astro'
 import ThemeSelector from '@components/ThemeSelector.astro'
 import { Icon } from 'astro-icon'
+import Logo from './Logo.astro'
 import HalloweenLogo from './HalloweenLogo.astro'
 
 let { navigation = null } = Astro.props
@@ -21,20 +22,47 @@ let { navigation = null } = Astro.props
       <div class="flex lg:hidden">
         <MobileNavigation navigation={navigation} />
       </div>
-      <div class="flex gap-3 items-center">
+      <div
+        x-data="{
+          get isHalloween() {
+            // Get the current date
+            const today = new Date()
+            const month = today.getMonth() + 1 // Months are 0-indexed, so we add 1
+            const day = today.getDate()
+            return (month === 10 && day >= 25) || (month === 11 && day === 1)
+          },
+        }"
+        class="flex gap-3 items-center"
+      >
         <a
           href="/"
           aria-label="Homepage"
           class="text-gray-900 group/filament relative dark:text-primary-500 transition duration-500 ease-out hidden min-[510px]:block motion-reduce:transition-none"
         >
-          <HalloweenLogo
-            className="hover:text-stone-800 transition motion-reduce:transition-none text-stone-900 dark:hover:text-butter dark:text-[#ffa434]"
-          />
+          <div
+            x-cloak
+            x-show="isHalloween === true"
+          >
+            <HalloweenLogo
+              className="hover:text-stone-800 transition motion-reduce:transition-none text-stone-900 dark:hover:text-butter dark:text-[#ffa434]"
+            />
+          </div>
+          <div
+            x-cloak
+            x-show="isHalloween === false"
+          >
+            <Logo
+              className="hover:text-stone-800 transition motion-reduce:transition-none text-stone-900 dark:hover:text-butter dark:text-[#ffa434]"
+            />
+          </div>
         </a>
         <a
           href="/docs/"
           aria-label="Docs homepage"
-          class="transition duration-500 ml-6 ease-out motion-reduce:transition-none hover:translate-x-1"
+          class="transition duration-500 ease-out motion-reduce:transition-none hover:translate-x-1"
+          x-bind:class="{
+            'ml-6': isHalloween,
+          }"
         >
           <div
             class="font-black text-butter dark:text-white text-xl min-[510px]:pt-1"

docs/src/layouts/BaseLayout.astro

@@ -70,11 +70,9 @@ const canonicalURL = new URL(Astro.url.pathname, Astro.site);
 
     <!-- Styles -->
     <style>
-        [x-cloak=''],
-        [x-cloak='x-cloak'],
-        [x-cloak='1'] {
-            display: none !important;
-        }
+      [x-cloak] {
+        display: none !important;
+      }
     </style>
 
     <!-- Styles -->

resources/views/components/nav.blade.php

@@ -68,11 +68,19 @@ class="transition duration-300 hover:scale-110 lg:hidden"
         <span class="sr-only">Toggle Menu</span>
     </button>
 
-    {{-- Normal Logo --}}
-    {{-- <x-nav.logo /> --}}
-
-    {{-- Halloween Logo --}}
-    <x-nav.halloween-logo />
+    @php
+        $today = \Carbon\Carbon::now();
+        $isHalloween = $today->between(\Carbon\Carbon::parse('October 25'), \Carbon\Carbon::parse('November 1'));
+    @endphp
+
+    {{-- Conditionally display the logos --}}
+    @if ($isHalloween)
+        {{-- Halloween Logo --}}
+        <x-nav.halloween-logo />
+    @else
+        {{-- Normal Logo --}}
+        <x-nav.logo />
+    @endif
 
     {{-- Nav Links --}}
     <div class="flex items-center justify-end gap-8 font-semibold sm:gap-14">