Merge pull request #2853 from appwrite/feat/mongodb-partnership-banner

Author: atharvadeosthale

src/lib/components/MongoPartnershipBanner.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+    import { trackEvent } from '$lib/actions/analytics';
+</script>
+
+<div class="web-top-banner web-top-banner--mongodb">
+    <div class="web-top-banner-content">
+        <a
+            href="/blog/post/appwrite-mongodb-partnership-self-hosted"
+            data-sveltekit-preload-data="hover"
+            onclick={() => trackEvent('top-banner_mongodb-partnership-click')}
+        >
+            <svg
+                class="web-mongodb-banner-leaf"
+                viewBox="0 0 120 257"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+                aria-hidden="true"
+            >
+                <path
+                    d="M82.3229 28.5501C71.5367 15.7947 62.2485 2.84006 60.351 0.149477C60.1512 -0.0498257 59.8515 -0.0498257 59.6518 0.149477C57.7542 2.84006 48.4661 15.7947 37.6798 28.5501C-54.9019 146.238 52.2613 225.661 52.2613 225.661L53.1601 226.258C53.959 238.516 55.9565 256.154 55.9565 256.154H59.9514H63.9463C63.9463 256.154 65.9438 238.615 66.7428 226.258L67.6416 225.561C67.7414 225.561 174.905 146.238 82.3229 28.5501ZM59.9514 223.867C59.9514 223.867 55.1576 219.781 53.8592 217.688V217.489L59.6518 89.3375C59.6518 88.9389 60.2511 88.9389 60.2511 89.3375L66.0436 217.489V217.688C64.7453 219.781 59.9514 223.867 59.9514 223.867Z"
+                    fill="currentColor"
+                />
+            </svg>
+            Announcing the Appwrite X MongoDB partnership
+        </a>
+    </div>
+</div>

src/lib/components/Newsletter.svelte

@@ -3,7 +3,6 @@ export { default as MainFooter } from './MainFooter.svelte';
 export { default as PreFooter } from './PreFooter.svelte';
 export { default as MobileNav } from './MobileNav.svelte';
 export { default as Switch } from './Switch.svelte';
-export { default as Newsletter } from './Newsletter.svelte';
 export { default as Tooltip } from './Tooltip.svelte';
 export { default as Article } from './Article.svelte';
 export { default as Carousel } from './Carousel.svelte';

src/lib/components/blog/newsletter.svelte

@@ -41,7 +41,7 @@ export const SOCIAL_STATS: SocialStats = {
     }
 };
 
-export const BANNER_KEY: Banners = 'discord-banner-01'; // Change key to force banner to show again
+export const BANNER_KEY: Banners = 'mongodb-partnership-banner-01'; // Change key to force banner to show again
 
 export const BLOG_POSTS_PER_PAGE = 12;
 
@@ -50,8 +50,13 @@ export const BLOG_POSTS_PER_PAGE = 12;
  * discord-banner-01
  * init-banner-02
  * pricing-banner-01
+ * mongodb-partnership-banner-01
  */
-type Banners = 'discord-banner-01' | 'init-banner-02' | 'pricing-banner-01';
+type Banners =
+    | 'discord-banner-01'
+    | 'init-banner-02'
+    | 'pricing-banner-01'
+    | 'mongodb-partnership-banner-01';
 
 export type Social = {
     icon: string;

src/lib/components/index.ts

@@ -21,8 +21,7 @@
     import { page } from '$app/state';
     import { getAppwriteDashboardUrl } from '$lib/utils/dashboard';
     import { Button, Icon, InlineTag } from '$lib/components/ui';
-    import AnnouncementBanner from '$routes/(init)/init/(components)/announcement-banner.svelte';
-    import HackathonBanner from '$routes/(marketing)/(components)/(hackathon)/hackathon-banner.svelte';
+    import MongoPartnershipBanner from '$lib/components/MongoPartnershipBanner.svelte';
 
     export let omitMainId = false;
     export let hideNavigation = false;
@@ -169,6 +168,7 @@
 </script>
 
 <div class="relative contents h-full">
+    <MongoPartnershipBanner />
     <section
         class="web-mobile-header flex! xl:hidden! {resolvedTheme}"
         class:is-transparent={browser && !$isMobileNavOpen}

src/lib/constants.ts

@@ -6,7 +6,6 @@
     import CallToAction from '../tags/Call_To_Action.svelte';
     import Article from '$lib/components/blog/article.svelte';
     import Breadcrumbs from '$lib/components/blog/breadcrumbs.svelte';
-    import Newsletter from '$lib/components/blog/newsletter.svelte';
     import PostMeta from '$lib/components/blog/post-meta.svelte';
     import TableOfContents from '$lib/components/blog/table-of-contents.svelte';
     import { Main } from '$lib/layouts';
@@ -214,7 +213,6 @@
         </div>
         <div class="relative overflow-hidden">
             <div class="container">
-                <Newsletter />
                 <FooterNav />
                 <MainFooter />
             </div>