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

Reinstate the back button on tutorials
appwrite · Nov 5, 2024 · 7731173 · 7731173
2 parents 77bf748 + 0e8b068
commit 7731173
Show file tree

Hide file tree

Showing 17 changed files with 43 additions and 4 deletions.
diff --git 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" />

diff --git 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" />
diff --git 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
 ---

diff --git 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

diff --git 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

diff --git 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

diff --git 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

diff --git 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

diff --git 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.

diff --git 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

diff --git 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

diff --git 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

diff --git 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

diff --git 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

diff --git 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

diff --git 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

diff --git 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
 ---