Merge pull request #1900 from appwrite/misc-streamlining

Update: office hours dates, streamline social stats

src/lib/animations/OpenSource.svelte

@@ -2,7 +2,7 @@
     import { toScale, type Scale } from '$lib/utils/toScale';
     import { spring, type AnimationListOptions, type SpringOptions } from 'motion';
     import { animation, createScrollHandler, scroll, type Animation } from '.';
-    import { GITHUB_REPO_LINK, GITHUB_STARS } from '$lib/constants';
+    import { SOCIAL_STATS } from '$lib/constants';
 
     const springOptions: SpringOptions = {
         stiffness: 58.78,
@@ -180,7 +180,7 @@
 
         <div class="cards-wrapper">
             <a
-                href="/discord"
+                href={SOCIAL_STATS.DISCORD.LINK}
                 target="_blank"
                 rel="noopener noreferrer"
                 class="web-card is-white web-u-min-block-size-320 oss-card flex flex-col"
@@ -193,13 +193,15 @@
                         aria-label="Discord"
                     ></span>
                 </div>
-                <div class="text-title font-aeonik-pro mt-auto">17k+ Discord Members</div>
+                <div class="text-title font-aeonik-pro mt-auto">
+                    {SOCIAL_STATS.DISCORD.STAT} Discord Members
+                </div>
             </a>
 
             <a
                 class="web-card is-white web-u-min-block-size-320 oss-card flex flex-col"
                 id="oss-github"
-                href={GITHUB_REPO_LINK}
+                href={SOCIAL_STATS.GITHUB.LINK}
             >
                 <div class="flex flex-col justify-between gap-8">
                     <span
@@ -209,12 +211,12 @@
                     ></span>
                 </div>
                 <div class="text-title font-aeonik-pro mt-auto">
-                    {GITHUB_STARS}+ GitHub Stars
+                    {SOCIAL_STATS.GITHUB.STAT} GitHub Stars
                 </div>
             </a>
 
             <a
-                href="https://twitter.com/appwrite"
+                href={SOCIAL_STATS.TWITTER.LINK}
                 class="web-card is-white web-u-min-block-size-320 oss-card flex flex-col"
                 id="oss-twitter"
             >
@@ -225,11 +227,13 @@
                         aria-label="Twitter"
                     ></span>
                 </div>
-                <div class="text-title font-aeonik-pro mt-auto">128k+ Twitter Followers</div>
+                <div class="text-title font-aeonik-pro mt-auto">
+                    {SOCIAL_STATS.TWITTER.STAT} Twitter Followers
+                </div>
             </a>
 
             <a
-                href="https://www.youtube.com/@Appwrite"
+                href={SOCIAL_STATS.YOUTUBE.LINK}
                 class="web-card is-white web-u-min-block-size-320 oss-card flex flex-col"
                 id="oss-youtube"
             >
@@ -240,13 +244,15 @@
                         aria-label="YouTube"
                     ></span>
                 </div>
-                <div class="text-title font-aeonik-pro mt-auto">7k+ Youtube Subscribers</div>
+                <div class="text-title font-aeonik-pro mt-auto">
+                    {SOCIAL_STATS.YOUTUBE.STAT} Youtube Subscribers
+                </div>
             </a>
 
             <a
                 class="web-card is-white web-u-min-block-size-320 oss-card flex flex-col"
                 id="oss-commits"
-                href={GITHUB_REPO_LINK}
+                href={SOCIAL_STATS.GITHUB.LINK}
             >
                 <div class="flex flex-col justify-between gap-8">
                     <span
@@ -255,7 +261,9 @@
                         aria-label="GitHub"
                     ></span>
                 </div>
-                <div class="text-title font-aeonik-pro mt-auto">21k+ Code Commits</div>
+                <div class="text-title font-aeonik-pro mt-auto">
+                    {SOCIAL_STATS.GITHUB.EXTRA?.COMMITS} Code Commits
+                </div>
             </a>
         </div>
     </div>

src/lib/components/Carousel.svelte

@@ -56,7 +56,7 @@
         {/if}
         <div class="nav ml-auto flex items-end gap-3">
             <button
-                class="web-icon-button"
+                class="web-icon-button cursor-pointer"
                 aria-label="Move carousel backward"
                 disabled={isStart}
                 onclick={prev}
@@ -64,7 +64,7 @@
                 <span class="web-icon-arrow-left" aria-hidden="true"></span>
             </button>
             <button
-                class="web-icon-button"
+                class="web-icon-button cursor-pointer"
                 aria-label="Move carousel forward"
                 disabled={isEnd}
                 onclick={next}

src/lib/components/MobileNav.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { afterNavigate } from '$app/navigation';
     import { IsLoggedIn } from '$lib/components';
-    import { GITHUB_REPO_LINK, GITHUB_STARS } from '$lib/constants';
+    import { SOCIAL_STATS } from '$lib/constants';
     import type { NavLink } from './MainNav.svelte';
     import { getAppwriteDashboardUrl } from '$lib/utils/dashboard';
 
@@ -42,14 +42,14 @@
         </div>
         <div class="web-side-nav-mobile-footer-buttons">
             <a
-                href={GITHUB_REPO_LINK}
+                href={SOCIAL_STATS.GITHUB.LINK}
                 target="_blank"
                 rel="noopener noreferrer"
                 class="web-button is-text web-u-inline-width-100-percent-mobile"
             >
                 <span class="web-icon-star" aria-hidden="true"></span>
                 <span class="text">Star on GitHub</span>
-                <span class="web-inline-tag text-sub-body">{GITHUB_STARS}</span>
+                <span class="web-inline-tag text-sub-body">{SOCIAL_STATS.GITHUB.STAT}</span>
             </a>
         </div>
     </div>

src/lib/constants.ts

@@ -1,5 +1,39 @@
-export const GITHUB_STARS = '47K';
-export const GITHUB_REPO_LINK = 'https://github.com/appwrite/appwrite';
+type SocialStats = {
+    [K in 'GITHUB' | 'DISCORD' | 'TWITTER' | 'YOUTUBE']: {
+        STAT: string;
+        LINK: string;
+        EXTRA?: Record<string, string> | undefined;
+    };
+};
+
+export const SOCIAL_STATS: SocialStats = {
+    GITHUB: {
+        STAT: '48K',
+        LINK: 'https://github.com/appwrite/appwrite',
+        EXTRA: {
+            COMMITS: '24K+',
+            PULL_REQUESTS: '4.5K+',
+            ISSUES: '3K+',
+            OPEN_ISSUES: '500+',
+            CLOSED_ISSUES: '3.3K+',
+            FORKS: '4.3K+',
+            CONTRIBUTORS: '800+'
+        }
+    },
+    DISCORD: {
+        STAT: '22K+',
+        LINK: '/discord'
+    },
+    TWITTER: {
+        STAT: '128K+',
+        LINK: 'https://twitter.com/intent/follow?screen_name=appwrite'
+    },
+    YOUTUBE: {
+        STAT: '11K+',
+        LINK: 'https://www.youtube.com/c/appwrite?sub_confirmation=1'
+    }
+};
+
 export const BANNER_KEY: Banners = 'discord-banner-01'; // Change key to force banner to show again
 
 export const BLOG_POSTS_PER_PAGE = 12;

src/lib/layouts/Docs.svelte

@@ -43,7 +43,7 @@
     import { Search, IsLoggedIn } from '$lib/components';
     import { isMac } from '$lib/utils/platform';
     import { getContext, setContext } from 'svelte';
-    import { GITHUB_REPO_LINK, GITHUB_STARS } from '$lib/constants';
+    import { SOCIAL_STATS } from '$lib/constants';
     import { page } from '$app/state';
     import { getAppwriteDashboardUrl } from '$lib/utils/dashboard';
 
@@ -172,14 +172,14 @@
             <div class="web-main-header-end">
                 <div class="flex gap-2">
                     <a
-                        href={GITHUB_REPO_LINK}
+                        href={SOCIAL_STATS.GITHUB.LINK}
                         target="_blank"
                         rel="noopener noreferrer"
                         class="web-button is-text"
                     >
                         <span class="web-icon-star" aria-hidden="true"></span>
                         <span class="text">Star on GitHub</span>
-                        <span class="web-inline-tag text-sub-body">{GITHUB_STARS}</span>
+                        <span class="web-inline-tag text-sub-body">{SOCIAL_STATS.GITHUB.STAT}</span>
                     </a>
                     <IsLoggedIn />
                 </div>

src/lib/layouts/Main.svelte

@@ -9,7 +9,7 @@
 <script lang="ts">
     import { browser } from '$app/environment';
     import { MobileNav, IsLoggedIn } from '$lib/components';
-    import { BANNER_KEY, GITHUB_REPO_LINK, GITHUB_STARS } from '$lib/constants';
+    import { BANNER_KEY, SOCIAL_STATS } from '$lib/constants';
     import { isVisible } from '$lib/utils/isVisible';
     import { createScrollInfo } from '$lib/utils/scroll';
     import { addEventListener } from '@melt-ui/svelte/internal/helpers';
@@ -229,7 +229,7 @@
             </div>
             <div class="web-main-header-end">
                 <a
-                    href={GITHUB_REPO_LINK}
+                    href={SOCIAL_STATS.GITHUB.LINK}
                     target="_blank"
                     rel="noopener noreferrer"
                     class="web-button is-text web-u-inline-width-100-percent-mobile"
@@ -241,7 +241,7 @@
                 >
                     <span class="web-icon-star" aria-hidden="true"></span>
                     <span class="text">Star on GitHub</span>
-                    <span class="web-inline-tag text-sub-body">{GITHUB_STARS}</span>
+                    <span class="web-inline-tag text-sub-body">{SOCIAL_STATS.GITHUB.STAT}</span>
                 </a>
                 <IsLoggedIn />
             </div>

src/lib/layouts/Sidebar.svelte

@@ -24,7 +24,7 @@
 <script lang="ts">
     import { clickOutside } from '$lib/actions/clickOutside';
     import { Tooltip, IsLoggedIn } from '$lib/components';
-    import { GITHUB_REPO_LINK, GITHUB_STARS } from '$lib/constants';
+    import { SOCIAL_STATS } from '$lib/constants';
     import { layoutState, toggleSidenav } from './Docs.svelte';
     import SidebarNavButton from './SidebarNavButton.svelte';
 
@@ -119,14 +119,14 @@
             <IsLoggedIn />
 
             <a
-                href={GITHUB_REPO_LINK}
+                href={SOCIAL_STATS.GITHUB.LINK}
                 target="_blank"
                 rel="noopener noreferrer"
                 class="web-button is-text web-u-inline-width-100-percent-mobile"
             >
                 <span class="web-icon-star" aria-hidden="true"></span>
                 <span class="text">Star on GitHub</span>
-                <span class="web-inline-tag text-sub-body">{GITHUB_STARS}</span>
+                <span class="web-inline-tag text-sub-body">{SOCIAL_STATS.GITHUB.STAT}</span>
             </a>
         </div>
     </div>

src/routes/community/+page.svelte

@@ -1,50 +1,46 @@
 <script lang="ts" module>
+    import type { EventCardProps } from './EventCard.svelte';
+
+    const baseEvent = {
+        location: 'Discord',
+        title: 'Office Hours: Ask me anything!',
+        description:
+            'Join us for another round of Office Hours, where we answer your questions and geek out on everything tech and Appwrite!',
+        buttonText: 'View event'
+    };
+
     export const events: EventCardProps[] = [
         {
-            href: 'https://discord.com/events/564160730845151244/1279026334496067669/1286356126924800000',
+            ...baseEvent,
+            href: 'https://discord.com/events/564160730845151244/1279026334496067669/1357434273753338106',
             cover: {
-                src: '/images/community/events/19sept-office-hours.png',
+                src: '/images/community/events/office-hours.png',
                 alt: ''
             },
-            date: '2024-09-19',
-            location: 'Discord',
-            title: 'Office Hours: Ask me anything!',
-            description:
-                'Join us for another round of Office Hours, where we answer your questions and geek out on everything tech and Appwrite!',
-            buttonText: 'View event'
+            date: '2025-04-10'
         },
         {
-            href: 'https://discord.com/events/564160730845151244/1279026334496067669/1288892841984000000',
+            ...baseEvent,
+            href: 'https://discord.com/events/564160730845151244/1279026334496067669/1362457578700800000',
             cover: {
-                src: '/images/community/events/26sept-office-hours.png',
+                src: '/images/community/events/office-hours-2.png',
                 alt: ''
             },
-            date: '2024-09-26',
-            location: 'Discord',
-            title: 'Office Hours: Ask me anything!',
-            description:
-                'Join us for another round of Office Hours, where we answer your questions and geek out on everything tech and Appwrite!',
-            buttonText: 'View event'
+            date: '2025-04-17'
         },
         {
-            href: 'https://discord.com/events/564160730845151244/1279026334496067669/1291429557043200000',
+            ...baseEvent,
+            href: 'https://discord.com/events/564160730845151244/1279026334496067669/1364994293760000000',
             cover: {
-                src: '/images/community/events/3oct-office-hours.png',
+                src: '/images/community/events/office-hours-3.png',
                 alt: ''
             },
-            date: '2024-10-03',
-            location: 'Discord',
-            title: 'Office Hours: Ask me anything!',
-            description:
-                'Join us for another round of Office Hours, where we answer your questions and geek out on everything tech and Appwrite!',
-            buttonText: 'View event'
+            date: '2025-04-24'
         }
     ];
 </script>
 
 <script lang="ts">
-    import { preventDefault } from 'svelte/legacy';
-
     import { Carousel } from '$lib/components';
     import FloatingHeads from '$lib/components/FloatingHeads.svelte';
     import FooterNav from '$lib/components/FooterNav.svelte';
@@ -52,15 +48,15 @@
     import MetricCard from '$lib/components/MetricCard.svelte';
     import { newsletter } from '$lib/components/Newsletter.svelte';
     import PreFooter from '$lib/components/PreFooter.svelte';
-    import { GITHUB_REPO_LINK, GITHUB_STARS } from '$lib/constants';
     import { Main } from '$lib/layouts';
     import { DEFAULT_HOST } from '$lib/utils/metadata';
     import { TITLE_SUFFIX } from '$routes/titles';
-    import type { EventCardProps } from './EventCard.svelte';
     import EventCard from './EventCard.svelte';
     import type { ProjectCardProps } from './ProjectCard.svelte';
     import ProjectCard from './ProjectCard.svelte';
 
+    import { SOCIAL_STATS } from '$lib/constants';
+
     let { data } = $props();
 
     const projects: ProjectCardProps[] = [
@@ -95,14 +91,14 @@
     ];
 
     const metrics = [
-        { metric: `${GITHUB_STARS}+`, description: 'GitHub Stars' },
-        { metric: '3K+', description: 'Pull Requests' },
-        { metric: '21K+', description: 'Commits' },
-        { metric: '3K+', description: 'Issues' },
-        { metric: '500+', description: 'Open Issues' },
-        { metric: '2.5K+', description: 'Closed Issues' },
-        { metric: '3.5K+', description: 'Forks' },
-        { metric: '800+', description: 'Contributors' }
+        { metric: SOCIAL_STATS.GITHUB.STAT, description: 'GitHub Stars' },
+        { metric: SOCIAL_STATS.GITHUB.EXTRA!.PULL_REQUESTS, description: 'Pull Requests' },
+        { metric: SOCIAL_STATS.GITHUB.EXTRA!.COMMITS, description: 'Commits' },
+        { metric: SOCIAL_STATS.GITHUB.EXTRA!.ISSUES, description: 'Issues' },
+        { metric: SOCIAL_STATS.GITHUB.EXTRA!.OPEN_ISSUES, description: 'Open Issues' },
+        { metric: SOCIAL_STATS.GITHUB.EXTRA!.CLOSED_ISSUES, description: 'Closed Issues' },
+        { metric: SOCIAL_STATS.GITHUB.EXTRA!.FORKS, description: 'Forks' },
+        { metric: SOCIAL_STATS.GITHUB.EXTRA!.CONTRIBUTORS, description: 'Contributors' }
     ];
 
     let name = $state('');
@@ -172,7 +168,7 @@
                             </p>
                             <div class="mt-8 flex flex-wrap gap-3">
                                 <a
-                                    href="/discord"
+                                    href={SOCIAL_STATS.DISCORD.LINK}
                                     target="_blank"
                                     rel="noopener noreferrer"
                                     class="web-button is-full-width-mobile"
@@ -180,14 +176,16 @@
                                     <span class="text">Join our Discord</span>
                                 </a>
                                 <a
-                                    href={GITHUB_REPO_LINK}
+                                    href={SOCIAL_STATS.GITHUB.LINK}
                                     target="_blank"
                                     rel="noopener noreferrer"
                                     class="web-button is-secondary is-full-width-mobile"
                                 >
                                     <span aria-hidden="true" class="web-icon-star"></span>
                                     <span>Star on GitHub</span>
-                                    <span class="web-inline-tag text-sub-body">{GITHUB_STARS}</span>
+                                    <span class="web-inline-tag text-sub-body"
+                                        >{SOCIAL_STATS.GITHUB.STAT}</span
+                                    >
                                 </a>
                             </div>
                         </div>
@@ -240,7 +238,7 @@
                             </p>
                             <div class="mt-8 flex flex-wrap justify-center gap-3">
                                 <a
-                                    href="{GITHUB_REPO_LINK}/graphs/contributors"
+                                    href="{SOCIAL_STATS.GITHUB.LINK}/graphs/contributors"
                                     target="_blank"
                                     rel="noopener noreferrer"
                                     class="web-button is-secondary is-full-width-mobile"
@@ -280,7 +278,7 @@
                                     Anyone can join and help Appwrite become better.
                                 </p>
                                 <a
-                                    href="{GITHUB_REPO_LINK}/issues"
+                                    href="{SOCIAL_STATS.GITHUB.LINK}/issues"
                                     target="_blank"
                                     rel="noopener noreferrer"
                                     class="web-button is-secondary mt-8"
@@ -491,7 +489,7 @@
                         <ul class="web-multi-columns-1" style:--p-col-gap="-1rem">
                             <li>
                                 <a
-                                    href="/discord"
+                                    href={SOCIAL_STATS.DISCORD.LINK}
                                     target="_blank"
                                     rel="noopener noreferrer"
                                     class="web-card is-white web-u-min-block-size-320 flex flex-col"
@@ -505,13 +503,13 @@
                                         ></span>
                                     </div>
                                     <div class="text-title font-aeonik-pro mt-auto">
-                                        17K+ members
+                                        {SOCIAL_STATS.DISCORD.STAT} members
                                     </div>
                                 </a>
                             </li>
                             <li>
                                 <a
-                                    href="https://twitter.com/intent/follow?screen_name=appwrite"
+                                    href={SOCIAL_STATS.TWITTER.LINK}
                                     target="_blank"
                                     rel="noopener noreferrer"
                                     class="web-card is-white web-u-min-block-size-320 flex flex-col"
@@ -525,13 +523,13 @@
                                         ></span>
                                     </div>
                                     <div class="text-title font-aeonik-pro mt-auto">
-                                        128K+ followers
+                                        {SOCIAL_STATS.TWITTER.STAT} followers
                                     </div>
                                 </a>
                             </li>
                             <li>
                                 <a
-                                    href={GITHUB_REPO_LINK}
+                                    href={SOCIAL_STATS.GITHUB.LINK}
                                     target="_blank"
                                     rel="noopener noreferrer"
                                     class="web-card is-white web-u-min-block-size-320 flex flex-col"
@@ -545,13 +543,13 @@
                                         ></span>
                                     </div>
                                     <div class="text-title font-aeonik-pro mt-auto">
-                                        {GITHUB_STARS}+ stargazers
+                                        {SOCIAL_STATS.GITHUB.STAT} stargazers
                                     </div>
                                 </a>
                             </li>
                             <li>
                                 <a
-                                    href="https://www.youtube.com/c/appwrite?sub_confirmation=1"
+                                    href={SOCIAL_STATS.YOUTUBE.LINK}
                                     target="_blank"
                                     rel="noopener noreferrer"
                                     class="web-card is-white web-u-min-block-size-320 flex flex-col"
@@ -565,7 +563,7 @@
                                         ></span>
                                     </div>
                                     <div class="text-title font-aeonik-pro mt-auto">
-                                        4K+ subscribers
+                                        {SOCIAL_STATS.YOUTUBE.STAT} subscribers
                                     </div>
                                 </a>
                             </li>

src/routes/products/auth/(components)/OpenSource.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { sleep, unwrite, write } from '$lib/animations';
-    import { GITHUB_REPO_LINK, GITHUB_STARS } from '$lib/constants';
+    import { SOCIAL_STATS } from '$lib/constants';
     import { onMount } from 'svelte';
     import collaboration from '../(assets)/collaboration.svg';
     import customization from '../(assets)/customization.svg';
@@ -67,14 +67,14 @@
                 class="mx-auto mt-2 flex w-full flex-col items-center justify-center gap-2 md:flex-row"
             >
                 <a
-                    href={GITHUB_REPO_LINK}
+                    href={SOCIAL_STATS.GITHUB.LINK}
                     target="_blank"
                     rel="noopener noreferrer"
                     class="web-button is-secondary h-10 !w-full md:!w-fit"
                 >
                     <span class="web-icon-star" aria-hidden="true"></span>
                     <span class="text">Star on GitHub</span>
-                    <span class="web-inline-tag text-sub-body">{GITHUB_STARS}</span>
+                    <span class="web-inline-tag text-sub-body">{SOCIAL_STATS.GITHUB.STAT}</span>
                 </a>
                 <a
                     class="web-button is-secondary h-10 !w-full md:!w-fit"

src/routes/products/functions/(components)/OpenSource.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { sleep, unwrite, write } from '$lib/animations';
-    import { GITHUB_REPO_LINK, GITHUB_STARS } from '$lib/constants';
+    import { SOCIAL_STATS } from '$lib/constants';
     import { onMount } from 'svelte';
     import collaboration from '../(assets)/collaboration.svg';
     import customization from '../(assets)/customization.svg';
@@ -67,14 +67,14 @@
                 class="mx-auto mt-2 flex w-full flex-col items-center justify-center gap-2 md:flex-row"
             >
                 <a
-                    href={GITHUB_REPO_LINK}
+                    href={SOCIAL_STATS.GITHUB.LINK}
                     target="_blank"
                     rel="noopener noreferrer"
                     class="web-button is-secondary h-10 !w-full md:!w-fit"
                 >
                     <span class="web-icon-star" aria-hidden="true"></span>
                     <span class="text">Star on GitHub</span>
-                    <span class="web-inline-tag text-sub-body">{GITHUB_STARS}</span>
+                    <span class="web-inline-tag text-sub-body">{SOCIAL_STATS.GITHUB.STAT}</span>
                 </a>
                 <a
                     class="web-button is-secondary h-10 !w-full md:!w-fit"