Init Tickets

.github/workflows/production.yml

@@ -31,6 +31,8 @@ jobs:
                   push: true
                   tags: ghcr.io/appwrite/website:${{ env.TAG }}
                   build-args: |
+                      "PUBLIC_APPWRITE_ENDPOINT=${{ secrets.PUBLIC_APPWRITE_ENDPOINT }}"
+                      "PUBLIC_APPWRITE_DASHBOARD=${{ secrets.PUBLIC_APPWRITE_DASHBOARD }}"
                       "PUBLIC_APPWRITE_PROJECT_ID=${{ vars.PUBLIC_APPWRITE_PROJECT_ID }}"
                       "PUBLIC_APPWRITE_DB_MAIN_ID=${{ vars.PUBLIC_APPWRITE_DB_MAIN_ID }}"
                       "PUBLIC_APPWRITE_COL_THREADS_ID=${{ vars.PUBLIC_APPWRITE_COL_THREADS_ID }}"

.github/workflows/staging.yml

@@ -33,6 +33,8 @@ jobs:
                   push: true
                   tags: ghcr.io/appwrite/website:${{ env.TAG }}
                   build-args: |
+                      "PUBLIC_APPWRITE_ENDPOINT=${{ secrets.PUBLIC_APPWRITE_ENDPOINT }}"
+                      "PUBLIC_APPWRITE_DASHBOARD=${{ secrets.PUBLIC_APPWRITE_DASHBOARD }}"
                       "PUBLIC_APPWRITE_PROJECT_ID=${{ vars.PUBLIC_APPWRITE_PROJECT_ID }}"
                       "PUBLIC_APPWRITE_DB_MAIN_ID=${{ vars.PUBLIC_APPWRITE_DB_MAIN_ID }}"
                       "PUBLIC_APPWRITE_COL_THREADS_ID=${{ vars.PUBLIC_APPWRITE_COL_THREADS_ID }}"

Dockerfile

@@ -1,5 +1,11 @@
 FROM node:20-bullseye as base
 
+ARG PUBLIC_APPWRITE_ENDPOINT
+ENV PUBLIC_APPWRITE_ENDPOINT ${PUBLIC_APPWRITE_ENDPOINT}
+
+ARG PUBLIC_APPWRITE_DASHBOARD
+ENV PUBLIC_APPWRITE_DASHBOARD ${PUBLIC_APPWRITE_DASHBOARD}
+
 ARG PUBLIC_APPWRITE_COL_MESSAGES_ID
 ENV PUBLIC_APPWRITE_COL_MESSAGES_ID ${PUBLIC_APPWRITE_COL_MESSAGES_ID}
 

package.json

@@ -22,6 +22,7 @@
     },
     "packageManager": "[email protected]+sha512.f549b8a52c9d2b8536762f99c0722205efc5af913e77835dbccc3b0b0b2ca9e7dc8022b78062c17291c48e88749c70ce88eb5a74f1fa8c4bf5e18bb46c8bd83a",
     "dependencies": {
+        "@ethercorps/sveltekit-og": "^3.0.0",
         "@sentry/sveltekit": "^8.12.0",
         "embla-carousel-svelte": "^8.1.5",
         "embla-carousel-wheel-gestures": "^8.0.1",

src/lib/appwrite/index.ts

@@ -1,9 +1,9 @@
-import { PUBLIC_APPWRITE_PROJECT_ID } from '$env/static/public';
+import { PUBLIC_APPWRITE_ENDPOINT, PUBLIC_APPWRITE_PROJECT_ID } from '$env/static/public';
 import { Client, Databases, Functions } from '@appwrite.io/console';
 
 export const client = new Client();
 
-client.setEndpoint('https://cloud.appwrite.io/v1').setProject(PUBLIC_APPWRITE_PROJECT_ID);
+client.setEndpoint(PUBLIC_APPWRITE_ENDPOINT).setProject(PUBLIC_APPWRITE_PROJECT_ID);
 
 export const databases = new Databases(client);
 export const functions = new Functions(client);

src/lib/appwrite/init.server.ts

@@ -1,10 +1,10 @@
 import { APPWRITE_API_KEY_INIT } from '$env/static/private';
-import { PUBLIC_APPWRITE_PROJECT_INIT_ID } from '$env/static/public';
+import { PUBLIC_APPWRITE_ENDPOINT, PUBLIC_APPWRITE_PROJECT_INIT_ID } from '$env/static/public';
 import { Client, Databases } from '@appwrite.io/console';
 
 const clientServer = new Client();
 clientServer
-    .setEndpoint('https://cloud.appwrite.io/v1')
+    .setEndpoint(PUBLIC_APPWRITE_ENDPOINT)
     .setProject(PUBLIC_APPWRITE_PROJECT_INIT_ID)
     .setKey(APPWRITE_API_KEY_INIT);
 

src/lib/appwrite/init.ts

@@ -1,10 +1,8 @@
-import { PUBLIC_APPWRITE_PROJECT_INIT_ID } from '$env/static/public';
+import { PUBLIC_APPWRITE_ENDPOINT, PUBLIC_APPWRITE_PROJECT_INIT_ID } from '$env/static/public';
 import { Client, Account } from '@appwrite.io/console';
 
 const client = new Client();
-client
-    .setEndpoint('https://cloud.appwrite.io/v1')
-    .setProject(PUBLIC_APPWRITE_PROJECT_INIT_ID);
+client.setEndpoint(PUBLIC_APPWRITE_ENDPOINT).setProject(PUBLIC_APPWRITE_PROJECT_INIT_ID);
 
 export const appwriteInit = {
     client,

src/lib/components/AnnouncementBanner.svelte

@@ -0,0 +1,66 @@
+<div class="banner">
+    <div class="content web-u-color-text-primary">
+        <div class="headings">
+            <span style:font-weight="500"
+                >init<span class="web-u-color-text-accent">_</span> is coming
+            </span>
+            <span class="web-u-color-text-secondary">The start of something new</span>
+        </div>
+        <a href="/init/tickets" rel="noopener noreferrer">
+            <span class="web-caption-500">Register now</span>
+            <span class="web-icon-arrow-right" aria-hidden="true" />
+        </a>
+    </div>
+    <div class="shine" />
+    <div class="border" />
+</div>
+
+<style lang="scss">
+    .banner {
+        --shine: rgba(255, 255, 255, 0.04);
+        position: relative;
+        min-height: 80px;
+        display: flex;
+        align-items: center;
+        border-bottom: 1px solid hsl(var(--web-color-border));
+
+        .content {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            width: 100%;
+            position: relative;
+            z-index: 10;
+            padding-inline: clamp(1.25rem, 4vw, 120rem);
+
+            .headings {
+                display: flex;
+                flex-direction: column;
+            }
+        }
+
+        .shine {
+            position: absolute;
+            inset: 0;
+            background: hsl(var(--web-color-background))
+                linear-gradient(
+                    -24deg,
+                    rgba(255, 255, 255, 0) 0,
+                    var(--shine) 20%,
+                    rgba(255, 255, 255, 0) 40%,
+                    var(--shine) 50%,
+                    rgba(255, 255, 255, 0) 60%,
+                    var(--shine) 80%,
+                    rgba(255, 255, 255, 0) 100%
+                );
+        }
+        .border {
+            position: absolute;
+            left: 0;
+            right: 0;
+            height: 1px;
+            background-color: hsl(var(--web-color-border));
+            bottom: 0;
+        }
+    }
+</style>

src/lib/components/IsLoggedIn.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
+    import { PUBLIC_APPWRITE_DASHBOARD } from '$env/static/public';
+
     export let classes = '';
 </script>
 
-<a href="https://cloud.appwrite.io" class={`web-button ${classes}`}>
+<a href={PUBLIC_APPWRITE_DASHBOARD} class={`web-button ${classes}`}>
     <span class="logged-in"><slot name="isLoggedIn">Go to Console</slot></span>
     <span class="not-logged-in"><slot name="isNotLoggedIn">Get started</slot></span>
 </a>

src/lib/components/MobileNav.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
     import { afterNavigate } from '$app/navigation';
+    import { PUBLIC_APPWRITE_DASHBOARD } from '$env/static/public';
     import { IsLoggedIn } from '$lib/components';
     import { GITHUB_STARS } from '$lib/constants';
     import type { NavLink } from '$lib/layouts/Main.svelte';
@@ -17,7 +18,10 @@
 <nav class="web-side-nav web-is-not-desktop" class:u-hide={!open}>
     <div class="web-side-nav-wrapper web-u-padding-inline-16">
         <div class="u-flex items-center u-gap-8">
-            <a href="https://cloud.appwrite.io/register" class="web-button is-secondary web-u-flex-1">
+            <a
+                href={`${PUBLIC_APPWRITE_DASHBOARD}/register`}
+                class="web-button is-secondary web-u-flex-1"
+            >
                 Sign up
             </a>
             <IsLoggedIn classes="web-u-flex-1" />

src/lib/components/PreFooter.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { PUBLIC_APPWRITE_DASHBOARD } from '$env/static/public';
 </script>
 
 <img src="/images/bgs/pre-footer.png" alt="" class="web-pre-footer-bg" style="z-index:-1" />
@@ -9,7 +10,7 @@
             Start building today
         </h2>
         <a
-            href="https://cloud.appwrite.io"
+            href={PUBLIC_APPWRITE_DASHBOARD}
             class="web-button is-transparent web-u-cross-child-center"
         >
             <span class="text">Get started</span>
@@ -36,7 +37,7 @@
                         For personal hobby projects and students.
                     </p>
                     <a
-                        href="https://cloud.appwrite.io/register"
+                        href={`${PUBLIC_APPWRITE_DASHBOARD}/register`}
                         class="web-button is-secondary is-full-width-mobile web-u-cross-child-end"
                     >
                         <span class="text">Get started</span>
@@ -54,7 +55,7 @@
                         For pro developers and teams that need to scale their products.
                     </p>
                     <a
-                        href="https://cloud.appwrite.io/console?type=createPro"
+                        href={`${PUBLIC_APPWRITE_DASHBOARD}/console?type=createPro`}
                         class="web-button is-full-width-mobile web-u-cross-child-end"
                         target="_blank"
                         rel="noopener noreferrer"

src/lib/constants.ts

@@ -1,10 +1,12 @@
 export const GITHUB_STARS = '42.8K';
-export const BANNER_KEY = 'discord-banner-01'; // Change key to force banner to show again
-export const SENTRY_DSN = 'https://[email protected]/4507497727000576'
+export const BANNER_KEY = 'init-banner-02'; // Change key to force banner to show again
+export const SENTRY_DSN =
+    'https://[email protected]/4507497727000576';
 
 /**
  * History:
  * discord-banner-01
+ * init-banner-02
  * pricing-banner-01
  */
 

src/lib/layouts/Docs.svelte

@@ -42,6 +42,7 @@
     import { isMac } from '$lib/utils/platform';
     import { getContext, setContext } from 'svelte';
     import { GITHUB_STARS } from '$lib/constants';
+    import { PUBLIC_APPWRITE_DASHBOARD } from '$env/static/public';
 
     export let variant: DocsLayoutVariant = 'default';
     export let isReferences = false;
@@ -99,10 +100,14 @@
             </a>
         </div>
         <div class="web-mobile-header-end">
-            <a href="https://cloud.appwrite.io" class="web-button web-is-only-desktop">
+            <a href={PUBLIC_APPWRITE_DASHBOARD} class="web-button web-is-only-desktop">
                 <span class="web-sub-body-500">Go to Console</span>
             </a>
-            <button class="web-button is-text" aria-label="open navigation" on:click={toggleSidenav}>
+            <button
+                class="web-button is-text"
+                aria-label="open navigation"
+                on:click={toggleSidenav}
+            >
                 {#if $layoutState.showSidenav}
                     <span aria-hidden="true" class="web-icon-close" />
                 {:else}

src/lib/layouts/Main.svelte

@@ -23,6 +23,8 @@
     import { onMount } from 'svelte';
     import { page } from '$app/stores';
     import { loggedIn } from '$lib/utils/console';
+    import { PUBLIC_APPWRITE_DASHBOARD } from '$env/static/public';
+    import AnnouncementBanner from '$lib/components/AnnouncementBanner.svelte';
 
     export let omitMainId = false;
     let theme: 'light' | 'dark' | null = 'dark';
@@ -141,11 +143,6 @@
 
         return $scrollInfo.deltaDirChange < 200;
     })();
-
-    const hideTopBanner = () => {
-        document.body.dataset.bannerHidden = '';
-        localStorage.setItem(BANNER_KEY, 'true');
-    };
 </script>
 
 <div class="u-position-relative">
@@ -174,7 +171,7 @@
         </div>
         <div class="web-mobile-header-end">
             {#if !$isMobileNavOpen}
-                <a href="https://cloud.appwrite.io" class="web-button">
+                <a href={PUBLIC_APPWRITE_DASHBOARD} class="web-button">
                     <span class="text">Get started</span>
                 </a>
             {/if}
@@ -192,29 +189,13 @@
         </div>
     </section>
     <header
-        class="web-main-header is-special-padding theme-{resolvedTheme} is-transparent"
+        class="web-main-header theme-{resolvedTheme} is-transparent"
+        style="padding-left:0;padding-right:0;"
         class:is-hidden={$isHeaderHidden}
     >
-        <div class="web-top-banner">
-            <div class="web-top-banner-content web-u-color-text-primary">
-                <a href="/discord" target="_blank" rel="noopener noreferrer">
-                    <span class="web-caption-500">We are having lots of fun on</span>
-                    <span class="web-icon-discord" aria-hidden="true" />
-                    <span class="web-caption-500">Discord. Come and join us!</span>
-                </a>
-                {#if browser}
-                    <button
-                        class="web-top-banner-button"
-                        aria-label="close discord message"
-                        on:click={hideTopBanner}
-                    >
-                        <span class="web-icon-close" aria-hidden="true" />
-                    </button>
-                {/if}
-            </div>
-        </div>
+        <AnnouncementBanner />
 
-        <div class="web-main-header-wrapper">
+        <div class="web-main-header-wrapper is-special-padding">
             <div class="web-main-header-start">
                 <a href="/">
                     <img
@@ -289,6 +270,10 @@
         }
     }
 
+    .is-special-padding {
+        padding-inline: clamp(1.25rem, 4vw, 120rem);
+    }
+
     [data-badge] {
         position: relative;
 

src/lib/utils/console.ts

@@ -2,10 +2,11 @@ import { derived, writable } from 'svelte/store';
 import { browser } from '$app/environment';
 import { Account, Client, Teams } from '@appwrite.io/console';
 import { Query, type Models } from '@appwrite.io/console';
+import { PUBLIC_APPWRITE_ENDPOINT } from '$env/static/public';
 
 const client = new Client();
 
-client.setEndpoint('https://cloud.appwrite.io/v1').setProject('console');
+client.setEndpoint(PUBLIC_APPWRITE_ENDPOINT).setProject('console');
 
 const account = new Account(client);
 const teams = new Teams(client);
@@ -22,6 +23,7 @@ export async function createSource(
     utmSource: string | null,
     utmCampaign: string | null,
     utmMedium: string | null
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
 ): Promise<any> {
     const path = `/console/sources`;
     const params = {

src/lib/utils/date.ts

@@ -5,3 +5,15 @@ export const formatDate = (date: string | Date | number): string => {
     const year = dt.getFullYear();
     return `${month} ${day}, ${year}`;
 };
+
+export const addDays = (date: Date, days: number) => {
+    return new Date(date.getTime() + days * 24 * 60 * 60 * 1000);
+};
+
+export const toReleaseDate = (date: Date) => {
+    return date.toLocaleDateString('en-US', {
+        weekday: 'long',
+        month: 'short',
+        day: 'numeric'
+    });
+};

src/lib/utils/numbers.ts

@@ -0,0 +1,6 @@
+export const numberWithinRange = (number: number, min: number, max: number) =>
+    Math.min(Math.max(number, min), max);
+
+export const getRandomNumber = (min: number, max: number) => {
+    return Math.random() * (max - min) + min;
+};

src/routes/+page.svelte

@@ -11,6 +11,7 @@
     import FooterNav from '../lib/components/FooterNav.svelte';
     import MainFooter from '../lib/components/MainFooter.svelte';
     import DeveloperCard from './DeveloperCard.svelte';
+    import { PUBLIC_APPWRITE_DASHBOARD } from '$env/static/public';
 
     const title = 'Appwrite - Build like a team of hundreds';
     const description = DEFAULT_DESCRIPTION;
@@ -104,7 +105,7 @@
                                 the frameworks and languages of your choice.
                             </p>
                             <a
-                                href="https://cloud.appwrite.io"
+                                href={PUBLIC_APPWRITE_DASHBOARD}
                                 class="web-button is-full-width-mobile u-margin-block-start-32"
                             >
                                 <span class="text">Get started</span>