Merge pull request #1470 from appwrite/fix-back-button-tutorials

Reinstate the back button on tutorials
2025-12-09 12:57:48 +00:00 · 2024-11-05 09:56:51 +01:00
parent 77bf748741 0e8b0683aa
commit 7731173218
17 changed files with 43 additions and 4 deletions
--- a/src/lib/layouts/DocsTutorial.svelte
+++ b/src/lib/layouts/DocsTutorial.svelte
@@ -7,6 +7,7 @@
    import { onMount } from 'svelte';

    export let toc: Array<TocItem>;
+    export let back: string;
    export let currentStep: number;
    export let date: string;

@@ -44,6 +45,15 @@
    <article class="web-article contents">
        <header class="web-article-header">
            <div class="web-article-header-start web-u-cross-start flex flex-col">
+                {#if back}
+                    <a
+                        href={back}
+                        class="web-icon-button web-is-only-mobile"
+                        aria-label="previous page"
+                    >
+                        <span class="icon-cheveron-left" aria-hidden="true" />
+                    </a>
+                {/if}
                <ul class="web-metadata web-caption-400">
                    {#if currentStepItem.difficulty}
                        <li>{currentStepItem.difficulty}</li>
@@ -53,7 +63,21 @@
                    {/if}
                </ul>
                <div class="u-cross-center relative flex">
-                    <h1 class="web-title">{firstStepItem?.title}</h1>
+                    {#if back}
+                        <a
+                            href={back}
+                            class="
+						web-button is-text is-only-icon web-u-cross-center
+						web-is-not-mobile -translate-x-1/2"
+                            aria-label="previous page"
+                        >
+                            <span
+                                class="icon-cheveron-left web-u-font-size-24 web-u-color-text-primary"
+                                aria-hidden="true"
+                            />
+                        </a>
+                    {/if}
+                    <h1 class="web-title lg:-ml-5">{firstStepItem?.title}</h1>
                </div>
            </div>
            <div class="web-article-header-end" />
--- a/src/markdoc/layouts/Tutorial.svelte
+++ b/src/markdoc/layouts/Tutorial.svelte
@@ -8,6 +8,7 @@
        draft?: boolean;
        difficulty?: string;
        readtime?: string;
+        back: string;
    };
 </script>

@@ -25,6 +26,7 @@
    export let description: string;
    export let step: number;
    export let date: string;
+    export let back: string;

    setContext<LayoutContext>('headings', writable({}));

@@ -76,7 +78,7 @@
    <meta name="twitter:card" content="summary_large_image" />
 </svelte:head>

-<DocsTutorial {toc} {tutorials} {date} currentStep={step}>
+<DocsTutorial {toc} {back} {tutorials} {date} currentStep={step}>
    <slot />
 </DocsTutorial>
 <MainFooter variant="docs" />
--- a/src/routes/docs/tutorials/android/step-1/+page.markdoc
+++ b/src/routes/docs/tutorials/android/step-1/+page.markdoc
@@ -3,6 +3,7 @@ layout: tutorial
 title: Build an ideas tracker with Android
 description: Learn to build an Android app with no backend code using an Appwrite backend.
 framework: Android
+back: /docs/tutorials
 category: Mobile and native
 step: 1
 ---
--- a/src/routes/docs/tutorials/apple/step-1/+page.markdoc
+++ b/src/routes/docs/tutorials/apple/step-1/+page.markdoc
@@ -3,6 +3,7 @@ layout: tutorial
 title: Coming soon
 description: Learn to build an Apple app with no backend code using an Appwrite backend.
 framework: Apple
+back: /docs/tutorials
 category: Mobile and native
 step: 1
 draft: true
--- a/src/routes/docs/tutorials/astro-ssr-auth/step-1/+page.markdoc
+++ b/src/routes/docs/tutorials/astro-ssr-auth/step-1/+page.markdoc
@@ -4,6 +4,7 @@ title: Server-side authentication with Astro
 description: Add SSR authentication to your Astro app with Appwrite
 step: 1
 difficulty: beginner
+back: /docs/tutorials
 readtime: 20
 framework: Astro SSR
 category: Auth
--- a/src/routes/docs/tutorials/flutter/step-1/+page.markdoc
+++ b/src/routes/docs/tutorials/flutter/step-1/+page.markdoc
@@ -3,6 +3,7 @@ layout: tutorial
 title: Coming soon
 description: Learn to build an Flutter app with no backend code using an Appwrite backend.
 framework: Flutter
+back: /docs/tutorials
 category: Mobile and native 
 step: 1
 draft: true
--- a/src/routes/docs/tutorials/nextjs-ssr-auth/step-1/+page.markdoc
+++ b/src/routes/docs/tutorials/nextjs-ssr-auth/step-1/+page.markdoc
@@ -4,6 +4,7 @@ title: Server-side authentication with Next.js
 description: Add SSR authentication to your Next.js app with Appwrite
 step: 1
 difficulty: beginner
+back: /docs/tutorials
 readtime: 20
 framework: Next.js SSR
 category: Auth
--- a/src/routes/docs/tutorials/nuxt-ssr-auth/step-1/+page.markdoc
+++ b/src/routes/docs/tutorials/nuxt-ssr-auth/step-1/+page.markdoc
@@ -4,6 +4,7 @@ title: Server-side authentication with Nuxt
 description: Add SSR authentication to your Nuxt app with Appwrite
 step: 1
 difficulty: beginner
+back: /docs/tutorials
 draft: true
 readtime: 20
 framework: Nuxt SSR
--- a/src/routes/docs/tutorials/nuxt/step-1/+page.markdoc
+++ b/src/routes/docs/tutorials/nuxt/step-1/+page.markdoc
@@ -7,7 +7,7 @@ difficulty: beginner
 readtime: 25
 framework: Nuxt
 category: Web
-back: /docs
+back: /docs/tutorials
 ---

 **Idea tracker**: an app to track all the side project ideas that you'll start, but probably never finish.
--- a/src/routes/docs/tutorials/react-native/step-1/+page.markdoc
+++ b/src/routes/docs/tutorials/react-native/step-1/+page.markdoc
@@ -4,6 +4,7 @@ title: Build an ideas tracker with React Native
 description: Learn to build a React Native app with no backend code using an Appwrite backend.
 step: 1
 difficulty: beginner
+back: /docs/tutorials
 readtime: 10
 category: Mobile and native
 framework: React Native
--- a/src/routes/docs/tutorials/react/step-1/+page.markdoc
+++ b/src/routes/docs/tutorials/react/step-1/+page.markdoc
@@ -4,6 +4,7 @@ title: Build an ideas tracker with React
 description: Learn to build a React app with no backend code using an Appwrite backend.
 step: 1
 difficulty: beginner
+back: /docs/tutorials
 readtime: 10
 category: Web
 framework: React
--- a/src/routes/docs/tutorials/refine/step-1/+page.markdoc
+++ b/src/routes/docs/tutorials/refine/step-1/+page.markdoc
@@ -4,6 +4,7 @@ title: Build a blog admin panel with Refine
 description: Learn to build a Refine app with no backend code using an Appwrite backend.
 step: 1
 difficulty: beginner
+back: /docs/tutorials
 readtime: 10
 framework: Refine
 category: Web
--- a/src/routes/docs/tutorials/subscriptions-with-stripe/step-1/+page.markdoc
+++ b/src/routes/docs/tutorials/subscriptions-with-stripe/step-1/+page.markdoc
@@ -4,6 +4,7 @@ title: Add app subscriptions with Stripe
 description: Add paid app subscription plans to your app with Stripe and Appwrite Functions.
 step: 1
 difficulty: easy
+back: /docs/tutorials
 readtime: 10
 framework: Stripe
 category: Functions
--- a/src/routes/docs/tutorials/sveltekit-csr-auth/step-1/+page.markdoc
+++ b/src/routes/docs/tutorials/sveltekit-csr-auth/step-1/+page.markdoc
@@ -4,6 +4,7 @@ title: Authentication with SvelteKit
 description: Add Authentication to a SvelteKit project using Appwrite.
 step: 1
 difficulty: beginner
+back: /docs/tutorials
 readtime: 20
 framework: SvelteKit
 category: Auth
--- a/src/routes/docs/tutorials/sveltekit-ssr-auth/step-1/+page.markdoc
+++ b/src/routes/docs/tutorials/sveltekit-ssr-auth/step-1/+page.markdoc
@@ -4,6 +4,7 @@ title: Server-side authentication with SvelteKit
 description: Add SSR authentication to your SvelteKit app with Appwrite
 step: 1
 difficulty: beginner
+back: /docs/tutorials
 readtime: 20
 framework: SvelteKit SSR
 category: Auth
--- a/src/routes/docs/tutorials/sveltekit/step-1/+page.markdoc
+++ b/src/routes/docs/tutorials/sveltekit/step-1/+page.markdoc
@@ -4,6 +4,7 @@ title: Build an ideas tracker with SvelteKit
 description: Build a SvelteKit project using Appwrite.
 step: 1
 difficulty: beginner
+back: /docs/tutorials
 readtime: 10
 framework: SvelteKit
 category: Web
--- a/src/routes/docs/tutorials/vue/step-1/+page.markdoc
+++ b/src/routes/docs/tutorials/vue/step-1/+page.markdoc
@@ -3,7 +3,7 @@ layout: tutorial
 title: Build an ideas tracker with Vue.js
 description: Learn to build an idea tracker app with Appwrite and Vue with authentication, databases and collections, queries, pagination, and file storage.
 step: 1
-back: /docs
+back: /docs/tutorials
 framework: Vue
 category: Web
 ---