Merge pull request #249 from appwrite/feat/footer

Feat: add console footer

src/lib/actions/analytics.ts

@@ -1,10 +1,10 @@
-import Analytics from 'analytics';
-import googleAnalytics from '@analytics/google-analytics';
-import { get } from 'svelte/store';
 import { page } from '$app/stores';
 import { user } from '$lib/stores/user';
-import { AppwriteException } from '@aw-labs/appwrite-console';
 import { ENV, MODE, VARS } from '$lib/system';
+import googleAnalytics from '@analytics/google-analytics';
+import { AppwriteException } from '@aw-labs/appwrite-console';
+import Analytics from 'analytics';
+import { get } from 'svelte/store';
 
 const analytics = Analytics({
     app: 'appwrite',

src/lib/layout/footer.svelte

@@ -1,47 +1,68 @@
-<footer class="main-footer">
-    <div class="container">
-        <ul class="inline-links is-center">
+<script>
+    import { Mode, MODE } from '$lib/system';
+
+    import { version } from '$routes/console/store';
+
+    const currentYear = new Date().getFullYear();
+</script>
+
+<footer class="main-footer u-cross-center">
+    <div class="main-footer-start">
+        <ul class="inline-links is-no-padding-first-and-last u-x-small">
             <li class="inline-links-item">
-                <a
-                    class="link"
-                    href="https://github.com/appwrite/appwrite"
-                    target="_blank"
-                    rel="noopener noreferrer">
-                    <span class="icon-github-circled" aria-hidden="true" />
-                    <span class="text">GitHub</span>
+                <div class="u-flex u-cross-center u-gap-8">
+                    {#if MODE === Mode.CLOUD}
+                        <span class="icon-cloud" />
+                    {/if}
+                    {#if $version}
+                        <a
+                            class="text"
+                            href="https://github.com/appwrite/appwrite/blob/master/CHANGES.md"
+                            target="_blank"
+                            rel="noreferrer">
+                            Version {$version}
+                        </a>
+                    {/if}
+                </div>
+            </li>
+            <li class="inline-links-item">
+                <a href="https://appwrite.io/policy/terms" target="_blank" rel="noreferrer">
+                    <span class="text">Terms</span>
                 </a>
             </li>
             <li class="inline-links-item">
-                <a
-                    class="link"
-                    href="https://appwrite.io/discord"
-                    target="_blank"
-                    rel="noopener noreferrer">
-                    <span class="icon-discord" aria-hidden="true" />
-                    <span class="text">Discord</span>
+                <a href="https://appwrite.io/policy/privacy" target="_blank" rel="noreferrer">
+                    <span class="text">Privacy</span>
                 </a>
             </li>
+        </ul>
+    </div>
+    <div class="main-footer-end">
+        <ul class="inline-links is-no-padding-first-and-last u-x-small">
             <li class="inline-links-item">
-                <a
-                    class="link"
-                    href="https://github.com/appwrite/appwrite/issues/new"
-                    target="_blank"
-                    rel="noopener noreferrer">
-                    <span class="text">Open an Issue</span>
-                </a>
+                <span class="text">ⓒ {currentYear} Appwrite. All rights reserved.</span>
             </li>
-            <li class="inline-links-item">
-                <a
-                    class="link"
-                    href="https://appwrite.io/docs"
-                    target="_blank"
-                    rel="noopener noreferrer">
-                    <span class="text">Docs</span>
+            <li class="inline-links-item u-flex u-gap-8">
+                <a href="https://github.com/appwrite/console" target="_blank" rel="noreferrer">
+                    <span class="icon-github" aria-hidden="true" aria-label="Appwrite on Github" />
+                </a>
+                <a href="https://appwrite.io/discord" target="_blank" rel="noreferrer">
+                    <span
+                        class="icon-discord"
+                        aria-hidden="true"
+                        aria-label="Appwrite on Discord" />
                 </a>
-            </li>
-            <li class="inline-links-item">
-                <span class="text">API:0.13.2</span>
             </li>
         </ul>
     </div>
 </footer>
+
+<style lang="scss">
+    .main-footer {
+        margin-block-start: auto;
+    }
+
+    [class^='icon-']:not(:hover) {
+        color: hsl(var(--color-neutral-50));
+    }
+</style>

src/lib/layout/shell.svelte

@@ -41,7 +41,6 @@
 
 <main
     class:grid-with-side={showSideNavigation}
-    class:grid={!showSideNavigation}
     class:is-open={isOpen}
     class:u-hide={$wizard.show || $log.show}>
     <header class="main-header u-padding-inline-end-0">
@@ -54,9 +53,11 @@
         </button>
         <slot name="header" />
     </header>
-    <nav class="main-side">
-        <slot name="side" />
-    </nav>
+    {#if showSideNavigation}
+        <nav class="main-side">
+            <slot name="side" />
+        </nav>
+    {/if}
     <section class="main-content">
         {#if $page.data?.header}
             <svelte:component this={$page.data.header} />
@@ -64,11 +65,17 @@
 
         <slot />
     </section>
+    <slot name="footer" />
 </main>
 
-<style>
-    .grid-with-side {
+<style lang="scss">
+    main {
         min-height: 100vh;
+
+        &:not(.grid-with-side) {
+            display: flex;
+            flex-direction: column;
+        }
     }
 
     .main-side {

src/lib/stores/sdk.ts

@@ -15,6 +15,7 @@ import {
 } from '@aw-labs/appwrite-console';
 
 const endpoint = VARS.APPWRITE_ENDPOINT ?? `${globalThis?.location?.origin}/v1`;
+
 const clientConsole = new Client();
 clientConsole.setEndpoint(endpoint).setProject('console');
 
@@ -49,4 +50,4 @@ const sdkForProject = {
     users: new Users(clientProject)
 };
 
-export { sdkForConsole, sdkForProject, setProject, endpoint };
+export { sdkForConsole, sdkForProject, setProject };

src/routes/+layout.svelte

@@ -1,19 +1,19 @@
 <script lang="ts">
-    import { afterNavigate, goto } from '$app/navigation';
-    import { page } from '$app/stores';
-    import { user } from '$lib/stores/user';
-    import { onCLS, onFID, onLCP, onFCP, onINP, onTTFB } from 'web-vitals';
-    import { reportWebVitals } from '$lib/helpers/vitals';
-    import { onMount } from 'svelte';
-    import { base } from '$app/paths';
     import { browser, dev } from '$app/environment';
-    import { app } from '$lib/stores/app';
-    import { Progress, Notifications } from '$lib/layout';
-    import { loading } from './store';
-    import Loading from './loading.svelte';
+    import { afterNavigate, goto } from '$app/navigation';
+    import { base } from '$app/paths';
+    import { page } from '$app/stores';
     import { trackPageView } from '$lib/actions/analytics';
+    import { reportWebVitals } from '$lib/helpers/vitals';
+    import { Notifications, Progress } from '$lib/layout';
+    import { app } from '$lib/stores/app';
+    import { user } from '$lib/stores/user';
     import * as Sentry from '@sentry/svelte';
     import { BrowserTracing } from '@sentry/tracing';
+    import { onMount } from 'svelte';
+    import { onCLS, onFCP, onFID, onINP, onLCP, onTTFB } from 'web-vitals';
+    import Loading from './loading.svelte';
+    import { loading } from './store';
 
     if (browser) {
         window.VERCEL_ANALYTICS_ID = import.meta.env.VERCEL_ANALYTICS_ID?.toString() ?? false;

src/routes/console/+layout.svelte

@@ -1,18 +1,19 @@
 <script lang="ts">
-    import Shell from '$lib/layout/shell.svelte';
-    import SideNavigation from '$lib/layout/navigation.svelte';
-    import Header from '$lib/layout/header.svelte';
-    import { newOrgModal } from '$lib/stores/organization';
-    import Create from './createOrganization.svelte';
-    import { page } from '$app/stores';
     import { beforeNavigate } from '$app/navigation';
-    import { wizard } from '$lib/stores/wizard';
+    import { page } from '$app/stores';
+    import { INTERVAL } from '$lib/constants';
     import { Logs } from '$lib/layout';
+    import Footer from '$lib/layout/footer.svelte';
+    import Header from '$lib/layout/header.svelte';
+    import SideNavigation from '$lib/layout/navigation.svelte';
+    import Shell from '$lib/layout/shell.svelte';
+    import { feedback } from '$lib/stores/app';
     import { log } from '$lib/stores/logs';
+    import { newOrgModal } from '$lib/stores/organization';
+    import { wizard } from '$lib/stores/wizard';
     import { onMount } from 'svelte';
     import { loading } from '../store';
-    import { feedback } from '$lib/stores/app';
-    import { INTERVAL } from '$lib/constants';
+    import Create from './createOrganization.svelte';
 
     onMount(() => {
         loading.set(false);
@@ -50,14 +51,10 @@
         !$page?.params.organization &&
         !$page.url.pathname.includes('/console/account') &&
         !$page.url.pathname.includes('/console/onboarding')}>
-    <svelte:fragment slot="header">
-        <Header />
-    </svelte:fragment>
-    <svelte:fragment slot="side">
-        <SideNavigation />
-    </svelte:fragment>
+    <Header slot="header" />
+    <SideNavigation slot="side" />
     <slot />
-    <footer class="main-footer" />
+    <Footer slot="footer" />
 </Shell>
 
 {#if $wizard.show && $wizard.component}

src/routes/console/+layout.ts

@@ -0,0 +1,11 @@
+import { sdkForConsole } from '$lib/stores/sdk';
+import type { LayoutLoad } from './$types';
+
+export const load: LayoutLoad = async () => {
+    const response = await fetch(`${sdkForConsole.client.config.endpoint}/health/version`);
+    const data = await response.json();
+
+    return {
+        version: data?.version ?? null
+    };
+};

src/routes/console/store.ts

@@ -0,0 +1,4 @@
+import { page } from '$app/stores';
+import { derived } from 'svelte/store';
+
+export const version = derived(page, ($page) => $page.data.version as string | null);

src/routes/register/invite/[slug]/+page.svelte

@@ -11,7 +11,7 @@
         InputText
     } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
-    import { sdkForConsole, endpoint } from '$lib/stores/sdk';
+    import { sdkForConsole } from '$lib/stores/sdk';
     import { Unauthenticated } from '$lib/layout';
     import FormList from '$lib/elements/forms/formList.svelte';
     import { Dependencies } from '$lib/constants';
@@ -51,7 +51,7 @@
     async function invite() {
         try {
             disabled = true;
-            const res = await fetch(`${endpoint}/account/invite`, {
+            const res = await fetch(`${sdkForConsole.client.config.endpoint}/account/invite`, {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json'

svelte.config.js

@@ -10,6 +10,9 @@ const config = {
         accessors: process.env.VITEST
     },
     kit: {
+        alias: {
+            $routes: './src/routes'
+        },
         adapter: adapter({
             fallback: 'index.html'
         }),