v4 website tweaks

Author: danharrin

app/Models/Article.php

@@ -74,7 +74,7 @@ public function isCompatibleWithLatestVersion(): ?bool
             return null;
         }
 
-        return in_array(3, $this->versions);
+        return in_array(4, $this->versions);
     }
 
     public function getAuthor(): Author

app/Models/Plugin.php

@@ -174,7 +174,7 @@ public function getCategories(): Collection
 
     public function isCompatibleWithLatestVersion(): bool
     {
-        return in_array(3, $this->versions);
+        return in_array(4, $this->versions);
     }
 
     public function getAuthor(): Author

app/Support/Markdown.php

@@ -17,7 +17,7 @@ class Markdown implements Htmlable, Stringable
 {
     protected Environment $environment;
 
-    public function __construct(protected string $content)
+    public function __construct(protected string $content, bool $hasTableOfContents = true)
     {
         $this->environment = new Environment([
             'allow_unsafe_links' => false,
@@ -28,27 +28,30 @@ public function __construct(protected string $content)
                 'symbol' => '#',
                 'title' => 'Permalink',
             ],
-            'table_of_contents' => [
+            ...$hasTableOfContents ? ['table_of_contents' => [
                 'html_class' => 'table-of-contents',
                 'position' => 'top',
                 'style' => 'bullet',
                 'min_heading_level' => 2,
                 'max_heading_level' => 6,
                 'normalize' => 'relative',
                 'placeholder' => null,
-            ],
+            ]] : [],
         ]);
 
         $this->environment->addExtension(new CommonMarkCoreExtension);
         $this->environment->addExtension(new TableExtension);
         $this->environment->addExtension(new HeadingPermalinkExtension);
         $this->environment->addExtension(new TorchlightExtension);
-        $this->environment->addExtension(new TableOfContentsExtension);
+
+        if ($hasTableOfContents) {
+            $this->environment->addExtension(new TableOfContentsExtension);
+        }
     }
 
-    public static function parse(string $text): static
+    public static function parse(string $text, bool $hasTableOfContents = true): static
     {
-        $static = app(static::class, ['content' => $text]);
+        $static = app(static::class, ['content' => $text, 'hasTableOfContents' => $hasTableOfContents]);
 
         $static->convert();
         $static->removeH1Tags();

build/doctum/doctum.php

@@ -16,7 +16,8 @@
 $versions = GitVersionCollection::create($dir)
 	->add('1.x', 'Filament 1.x')
 	->add('2.x', 'Filament 2.x')
-	->add('3.x', 'Filament 3.x');
+	->add('3.x', 'Filament 3.x')
+    ->add('4.x', 'Filament 4.x');
 
 return new Doctum($iterator, [
 	'title' => 'Filament API',
@@ -26,4 +27,4 @@
 	'default_opened_level' => 2,
     'remote_repository' => new GitHubRemoteRepository('filamentphp/filament', dirname($dir)),
     'base_url' => 'https://filamentphp.com/api/%version%/',
-]);
+]);

…cfe-filament-v4-beta-feature-overview.md …ndrocfe-filament-v4-has-been-released.mdcontent/articles/leandrocfe-filament-v4-beta-feature-overview.md renamed to content/articles/leandrocfe-filament-v4-has-been-released.md content/articles/leandrocfe-filament-v4-beta-feature-overview.md renamed to content/articles/leandrocfe-filament-v4-has-been-released.md

@@ -1,24 +1,20 @@
 ---
-title: Filament v4 Beta - Feature Overview
-slug: leandrocfe-filament-v4-beta-feature-overview
+title: Filament v4 Has Been Released - Feature Overview
+slug: leandrocfe-filament-v4-has-been-released
 author_slug: leandrocfe
-publish_date: 2025-06-09
+publish_date: 2025-08-12
 categories: [general]
 type_slug: article
-versions: [3,4]
+versions: [4]
 ---
 
-![Filament v4 Beta - Feature Overview](/images/content/articles/leandrocfe-filament-v4-beta-feature-overview/v4-beta-feature-overview.webp)
+![Filament v4 Has Been Released - Feature Overview](/images/content/articles/leandrocfe-filament-v4-has-been-released/v4-has-been-released.webp)
 
 ## Introduction
 
-The **Filament v4 Beta** is here with a range of powerful, helpful updates. It's faster, easier to use, and gives you more control when building applications. In this article, we highlight what's new and how these changes can improve your workflow!
+**Filament v4** is here with a range of powerful, helpful updates. It's faster, easier to use, and gives you more control when building applications. In this article, we highlight what's new and how these changes can improve your workflow!
 
-To upgrade your app to Filament v4 beta, please read the [upgrade guide](https://filamentphp.com/docs/4.x/upgrade-guide). To install Filament v4 into a new app, please visit the [installation guide](https://filamentphp.com/docs/4.x/introduction/installation).
-
-> You are currently viewing the features for Filament `4.x`, which is currently in `beta` and is not `stable`. Breaking changes may be introduced to releases during the beta period. Please report any issues you encounter on [GitHub](https://github.com/filamentphp/filament/issues/new).
-
-> Looking for the current stable version? Visit the [3.x documentation](https://filamentphp.com/docs/3.x).
+To upgrade your app to Filament v4, please read the [upgrade guide](https://filamentphp.com/docs/4.x/upgrade-guide). To install Filament v4 into a new app, please visit the [installation guide](https://filamentphp.com/docs/4.x/introduction/installation).
 
 ## Highlights
 
@@ -490,10 +486,9 @@ This gives you full control over the user experience when something goes wrong.
 
 ## Conclusion
 
-Filament v4 Beta brings a wide range of improvements designed to make your development experience faster, more consistent, and easier to maintain. Since it's still in `beta`, now is the perfect time to explore the new features and share feedback.
-If you need a `stable` version, refer to the [3.x documentation](https://filamentphp.com/docs/3.x).
+Filament v4 brings a wide range of improvements designed to make your development experience faster, more consistent, and easier to maintain.
 
-To upgrade your app to Filament v4 beta, please read the [upgrade guide](https://filamentphp.com/docs/4.x/upgrade-guide). To install Filament v4 into a new app, please visit the [installation guide](https://filamentphp.com/docs/4.x/introduction/installation).
+To upgrade your app to Filament v4, please read the [upgrade guide](https://filamentphp.com/docs/4.x/upgrade-guide). To install Filament v4 into a new app, please visit the [installation guide](https://filamentphp.com/docs/4.x/introduction/installation).
 
 Special thanks to [Dan Harrin](https://github.com/danharrin) for his incredible work on Filament v4!
 

package-lock.json

@@ -83,65 +83,6 @@ class="flex flex-col items-start gap-20 pt-7 transition duration-300 will-change
                     </div>
                 </div>
 
-                @if ($article->isCompatibleWithLatestVersion() !== null)
-                    {{-- Features and Health Checks --}}
-                    <div
-                        class="grid grid-cols-[repeat(auto-fill,minmax(315px,1fr))] gap-x-16 gap-y-10 pt-7"
-                    >
-                        {{-- Latest Version Compatibility --}}
-                        <div class="flex items-center gap-3">
-                            @if ($article->isCompatibleWithLatestVersion())
-                                <div
-                                    class="grid h-9 w-9 place-items-center rounded-full bg-lime-200/50 text-lime-600"
-                                >
-                                    <svg
-                                        xmlns="http://www.w3.org/2000/svg"
-                                        width="22"
-                                        height="22"
-                                        viewBox="0 0 24 24"
-                                    >
-                                        <path
-                                            fill="currentColor"
-                                            d="M9 16.17L5.53 12.7a.996.996 0 1 0-1.41 1.41l4.18 4.18c.39.39 1.02.39 1.41 0L20.29 7.71a.996.996 0 1 0-1.41-1.41L9 16.17z"
-                                        />
-                                    </svg>
-                                </div>
-                            @else
-                                <div
-                                    class="grid h-9 w-9 place-items-center rounded-full bg-rose-200/50 text-rose-600"
-                                >
-                                    <svg
-                                        xmlns="http://www.w3.org/2000/svg"
-                                        width="22"
-                                        height="22"
-                                        viewBox="0 0 24 24"
-                                    >
-                                        <path
-                                            fill="none"
-                                            stroke="currentColor"
-                                            stroke-linecap="round"
-                                            stroke-linejoin="round"
-                                            stroke-width="2"
-                                            d="M12 6v8m.05 4v.1h-.1V18h.1Z"
-                                        />
-                                    </svg>
-                                </div>
-                            @endif
-
-                            <div>
-                                <div class="font-medium">
-                                    {{ $article->isCompatibleWithLatestVersion() ? 'Compatible with the latest version' : 'Not compatible with the latest version' }}
-                                </div>
-
-                                <div class="text-xs text-dolphin/80">
-                                    Supported versions:
-                                    {{ implode(' - ', array_map(fn (int $version): string => $version . '.x', $article->versions)) }}
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                @endif
-
                 {{-- Categories --}}
                 <div class="flex flex-wrap items-center gap-3.5 pt-6">
                     @foreach ($article->getCategories() as $category)
@@ -160,7 +101,7 @@ class="select-none rounded-full bg-stone-200/50 px-5 py-2.5 text-sm"
                     <div
                         class="prose selection:bg-stone-500/30 prose-a:break-words prose-blockquote:not-italic prose-code:break-words prose-code:rounded prose-code:bg-merino prose-code:px-1.5 prose-code:py-0.5 prose-code:font-normal prose-code:before:hidden prose-code:after:hidden [&_p]:before:hidden [&_p]:after:hidden"
                     >
-                        {!! \App\Support\Markdown::parse($article->content) !!}
+                        {!! \App\Support\Markdown::parse($article->content, hasTableOfContents: false) !!}
                     </div>
                 </div>
             </div>

…e-overview/v4-beta-feature-overview.webp …-been-released/v4-has-been-released.webppublic/images/content/articles/leandrocfe-filament-v4-beta-feature-overview/v4-beta-feature-overview.webp renamed to public/images/content/articles/leandrocfe-filament-v4-has-been-released/v4-has-been-released.webp public/images/content/articles/leandrocfe-filament-v4-beta-feature-overview/v4-beta-feature-overview.webp renamed to public/images/content/articles/leandrocfe-filament-v4-has-been-released/v4-has-been-released.webp

@@ -12,7 +12,7 @@ class="mx-auto w-full max-w-8xl px-5 sm:px-10"
             })
 
             // Reset the page number on category, type or version change
-            $watch('[selectedCategories.size, selectedType, selectedVersion]', () => {
+            $watch('[selectedCategories.size, selectedType]', () => {
                 currentPage = 1
             })
 
@@ -55,7 +55,6 @@ class="mx-auto w-full max-w-8xl px-5 sm:px-10"
         search: $queryString('').usePush().as('search'),
         selectedCategories: new Set(),
         selectedType: $queryString('all').usePush().as('type'),
-        selectedVersion: $queryString('3').usePush().as('version'),
 
         articles: @js($articles),
         categories: @js($categories),
@@ -87,13 +86,6 @@ class="mx-auto w-full max-w-8xl px-5 sm:px-10"
                 )
             }
 
-            // Show articles that are in the selected version, or no version at all
-            filterResult = filterResult.filter(
-                (article) =>
-                    article.versions?.includes(+this.selectedVersion) ||
-                    ! article.versions?.length,
-            )
-
             // If the selectedType is 'all', show all records, else show only the records that match the selected type
             filterResult = filterResult.filter(
                 (record) =>
@@ -197,52 +189,7 @@ class="absolute left-[.35rem] top-[.35rem] -z-10 h-[2.1rem] rounded-full transit
             ></div>
         </div>
 
-        <div
-            class="flex w-full flex-1 flex-wrap items-center gap-3 min-[900px]:w-auto min-[900px]:flex-nowrap min-[900px]:justify-end"
-        >
-            {{-- Version Switch --}}
-            <div
-                class="relative z-10 inline-flex select-none items-center gap-2.5 rounded-full bg-white p-[.55rem] font-medium shadow-lg shadow-black/[0.01]"
-            >
-                <div
-                    x-on:click="selectedVersion = '1'"
-                    class="relative z-20 w-14 text-center transition duration-300"
-                    :class="{
-                        'cursor-pointer opacity-50 hover:opacity-100': selectedVersion !== '1',
-                        'text-salmon': selectedVersion === '1',
-                    }"
-                >
-                    v1.x
-                </div>
-                <div
-                    class="relative z-20 w-14 text-center transition duration-300"
-                    x-on:click="selectedVersion = '2'"
-                    :class="{
-                        'cursor-pointer opacity-50 hover:opacity-100': selectedVersion !== '2',
-                        'text-salmon': selectedVersion === '2',
-                    }"
-                >
-                    v2.x
-                </div>
-                <div
-                    class="relative z-20 w-14 text-center transition duration-300"
-                    x-on:click="selectedVersion = '3'"
-                    :class="{
-                        'cursor-pointer opacity-50 hover:opacity-100': selectedVersion !== '3',
-                        'text-salmon': selectedVersion === '3',
-                    }"
-                >
-                    v3.x
-                </div>
-                <div
-                    class="absolute left-[.31rem] top-[.31rem] -z-10 h-8 w-16 rounded-full bg-fair-pink transition duration-300 ease-out will-change-transform"
-                    :class="{
-                        'translate-x-[4.1rem]': selectedVersion === '2',
-                        'translate-x-[8.2rem]': selectedVersion === '3',
-                    }"
-                ></div>
-            </div>
-        </div>
+        <div class="flex w-full flex-1 flex-wrap items-center gap-3 min-[900px]:w-auto min-[900px]:flex-nowrap min-[900px]:justify-end"></div>
 
         <div
             class="flex w-full flex-wrap items-center gap-3 min-[900px]:w-auto min-[900px]:flex-nowrap min-[900px]:justify-end"

resources/views/articles/view-article.blade.php

@@ -295,11 +295,11 @@ class="hidden scale-75 min-[450px]:block min-[500px]:scale-100"
                         x-ref="description"
                         class="text-xl font-medium leading-normal opacity-90 lg:text-2xl"
                     >
-                        A collection of beautiful full-stack
+                        An open source UI framework,
                         <br />
-                        components. The perfect starting
+                        built with Livewire to help you
                         <br />
-                        point for your next app.
+                        ship admin panels & apps fast
                     </div>
 
                     {{-- Star --}}