Merge pull request #2976 from appwrite/fix/docs-cls-toc-multicode

Change pricing comp for changelog

Author: eldadfux

src/lib/components/ProductsSubmenu.svelte

@@ -98,6 +98,7 @@
             'text-accent': $open
         }
     )}
+    aria-haspopup="menu"
     use:melt={$trigger}
 >
     {label}

src/routes/(marketing)/(components)/pricing.svelte

@@ -53,9 +53,11 @@
 
     type PricingProps = {
         class?: string;
+        /** Omits the animated wash; use on changelog and other tight layouts. */
+        embedded?: boolean;
     };
 
-    const { class: className }: PricingProps = $props();
+    const { class: className, embedded = false }: PricingProps = $props();
 
     const visiblePlans = SHOW_SCALE_PLAN ? plans : plans.filter((plan) => plan.name !== 'Scale');
 
@@ -69,13 +71,15 @@
     )}
 >
     <div class="container flex w-full flex-col items-center justify-center gap-10">
-        <div
-            class={cn(
-                'animate-lighting absolute top-0 left-0 -z-10 h-screen w-[200vw] -translate-x-[25%] translate-y-8 rotate-25 overflow-hidden blur-3xl md:w-full',
-                'bg-[image:radial-gradient(ellipse_390px_50px_at_10%_30%,_rgba(254,_149,_103,_0.2)_0%,_rgba(254,_149,_103,_0)_70%),_radial-gradient(ellipse_1100px_170px_at_15%_40%,rgba(253,_54,_110,_0.08)_0%,_rgba(253,_54,_110,_0)_70%),_radial-gradient(ellipse_1200px_180px_at_30%_30%,_rgba(253,_54,_110,_0.08)_0%,_rgba(253,_54,_110,_0)_70%)]',
-                'bg-position-[0%_0%]'
-            )}
-        ></div>
+        {#if !embedded}
+            <div
+                class={cn(
+                    'animate-lighting absolute top-0 left-0 -z-10 h-screen w-[200vw] -translate-x-[25%] translate-y-8 rotate-25 overflow-hidden blur-3xl md:w-full',
+                    'bg-[image:radial-gradient(ellipse_390px_50px_at_10%_30%,_rgba(254,_149,_103,_0.2)_0%,_rgba(254,_149,_103,_0)_70%),_radial-gradient(ellipse_1100px_170px_at_15%_40%,rgba(253,_54,_110,_0.08)_0%,_rgba(253,_54,_110,_0)_70%),_radial-gradient(ellipse_1200px_180px_at_30%_30%,_rgba(253,_54,_110,_0.08)_0%,_rgba(253,_54,_110,_0)_70%)]',
+                    'bg-position-[0%_0%]'
+                )}
+            ></div>
+        {/if}
 
         <div
             class="animate-fade-in relative flex w-full flex-col justify-between gap-8 [animation-delay:150ms] [animation-duration:1000ms] md:flex-row md:items-center"

src/routes/changelog/[[page]]/+page.svelte

@@ -1,12 +1,13 @@
 <script lang="ts">
     import { goto } from '$app/navigation';
-    import { FooterNav, MainFooter, PreFooter } from '$lib/components';
+    import { FooterNav, MainFooter } from '$lib/components';
     import { Main } from '$lib/layouts';
     import { DEFAULT_DESCRIPTION, DEFAULT_HOST } from '$lib/utils/metadata';
     import { onMount } from 'svelte';
     import ChangelogEntry from '../ChangelogEntry.svelte';
     import { page } from '$app/state';
     import { CHANGELOG_KEY } from '../utils';
+    import Pricing from '$routes/(marketing)/(components)/pricing.svelte';
     import { TITLE_SUFFIX } from '$routes/titles';
     import { Button } from '$lib/components/ui';
 
@@ -72,13 +73,11 @@
                 </div>
             </div>
         </div>
-        <div class="relative overflow-hidden pt-10">
-            <div class="pt-[7.5rem]">
-                <div class="container">
-                    <PreFooter />
-                    <FooterNav />
-                    <MainFooter />
-                </div>
+        <div class="border-smooth relative border-t pt-20 md:pt-24">
+            <Pricing embedded class="mt-0 mb-0 min-h-0 pt-10 pb-20 md:pt-12 md:pb-24" />
+            <div class="container">
+                <FooterNav />
+                <MainFooter />
             </div>
         </div>
     </div>

src/routes/changelog/entry/[entry]/+page.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
     import { page } from '$app/state';
     import { FooterNav, MainFooter, Tooltip } from '$lib/components';
-    import PreFooter from '$lib/components/PreFooter.svelte';
     import { type SocialShareOption, socialSharingOptions } from '$lib/constants';
     import { Main } from '$lib/layouts';
     import { copy } from '$lib/utils/copy';
     import { formatDate } from '$lib/utils/date';
     import { DEFAULT_DESCRIPTION, DEFAULT_HOST } from '$lib/utils/metadata';
+    import Pricing from '$routes/(marketing)/(components)/pricing.svelte';
     import { CHANGELOG_TITLE_SUFFIX } from '$routes/titles';
 
     let { data } = $props();
@@ -156,13 +156,11 @@
                     </article>
                 </div>
             </div>
-            <div class="relative overflow-hidden pt-10">
-                <div class="pt-[7.5rem]">
-                    <div class="container">
-                        <PreFooter />
-                        <FooterNav />
-                        <MainFooter />
-                    </div>
+            <div class="border-smooth relative border-t pt-20 md:pt-24">
+                <Pricing embedded class="mt-0 mb-0 min-h-0 pt-10 pb-20 md:pt-12 md:pb-24" />
+                <div class="container">
+                    <FooterNav />
+                    <MainFooter />
                 </div>
             </div>
         </div>