update: office hours dates, streamline social stats and respective links.

This commit is contained in:
Darshan
2025-04-06 15:14:52 +05:30
parent c0977fef30
commit a913330ee0
22 changed files with 109 additions and 75 deletions

View File

@@ -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>

View File

@@ -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}

View File

@@ -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>

View File

@@ -1,5 +1,33 @@
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+'
}
},
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;

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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,7 +91,7 @@
];
const metrics = [
{ metric: `${GITHUB_STARS}+`, description: 'GitHub Stars' },
{ metric: `${SOCIAL_STATS.GITHUB.STAT}+`, description: 'GitHub Stars' },
{ metric: '3K+', description: 'Pull Requests' },
{ metric: '21K+', description: 'Commits' },
{ metric: '3K+', description: 'Issues' },
@@ -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>

View File

@@ -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"

View File

@@ -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"

Binary file not shown.

Before

Width:  |  Height:  |  Size: 361 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 377 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 411 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 365 KiB

View File

Before

Width:  |  Height:  |  Size: 166 KiB

After

Width:  |  Height:  |  Size: 166 KiB

View File

Before

Width:  |  Height:  |  Size: 347 KiB

After

Width:  |  Height:  |  Size: 347 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 275 KiB

After

Width:  |  Height:  |  Size: 361 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 436 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 366 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 441 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 375 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 235 KiB