Change tutorials to follow design

src/routes/docs/tutorials/+page.ts

@@ -2,6 +2,8 @@ import { base } from '$app/paths';
 import type { Tutorial } from '$markdoc/layouts/Tutorial.svelte';
 
 const framework_order = ['React', 'Vue', 'SvelteKit', 'Stripe', 'Refine'];
+const category_order = ['Web', 'Mobile and native', 'Server', 'Auth', 'Databases', 'Storage', 'Functions'];
+
 
 export async function load() {
     const tutorialsGlob = import.meta.glob('./**/step-1/+page.markdoc', {
@@ -18,11 +20,12 @@ export async function load() {
                 .replace('/+page.markdoc', '')
                 .replace('/step-1', '');
             const tutorialName = slug.slice(slug.lastIndexOf('/') + 1);
-
+            
             return {
                 title: frontmatter.title,
                 framework: frontmatter.framework,
-                draft: frontmatter.draft,
+                draft: frontmatter.draft || false,
+                category: frontmatter.category,
                 href: `${base}/docs/tutorials/${tutorialName}`
             };
         })
@@ -41,12 +44,23 @@ export async function load() {
             // Else, sort by title
             return a.title.toLowerCase().localeCompare(b.title.toLowerCase());
         });
+    
+        const tutorials = Object.entries(
+            allTutorials.reduce((acc: { [key: string]: any[] }, item) => {
+                // If the category does not exist in the accumulator, initialize it
+                if (!acc[item.category]) {
+                    acc[item.category] = [];
+                }
 
-    const drafts = allTutorials.filter((tutorial) => tutorial.draft);
-    const tutorials = allTutorials.filter((tutorial) => !tutorial.draft);
+                // Push the current item into the appropriate category
+                acc[item.category].push(item);
 
+                return acc;
+            }, {})
+        ).map(([title, tutorials]) => ({ title, tutorials }));
+        
+        tutorials.sort((a, b) => category_order.indexOf(a.title) - category_order.indexOf(b.title));
     return {
         tutorials,
-        drafts
     };
 }