mirror of
https://github.com/LukeHagar/website.git
synced 2025-12-09 21:07:46 +00:00
Change tutorials to follow design
This commit is contained in:
Vincent (Wen Yu) Ge
@@ -52,19 +52,39 @@
|
||||
<header class="aw-article-header">
|
||||
<div class="aw-article-header-start u-flex-vertical aw-u-cross-start">
|
||||
<div class="u-position-relative u-flex u-cross-center">
|
||||
<h1 class="aw-title">Platforms</h1>
|
||||
<h1 class="aw-title">Tutorials</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="aw-article-header-end" />
|
||||
</header>
|
||||
<div class="aw-article-content aw-u-gap-80">
|
||||
{#each data.tutorials as category}
|
||||
<section class="u-flex-vertical u-gap-24">
|
||||
<h2 class="aw-eyebrow">Client</h2>
|
||||
<ul class="tutorial-grid">
|
||||
{#each data.tutorials as tutorial}
|
||||
<h2 class="aw-eyebrow">{category.title}</h2>
|
||||
<ul class="aw-grid-row-4 aw-grid-row-4-mobile-2">
|
||||
{#each category.tutorials as tutorial}
|
||||
<li>
|
||||
{#if tutorial.draft === true}
|
||||
<a
|
||||
href={tutorial.href}
|
||||
class="aw-card is-normal draft"
|
||||
aria-disabled="true"
|
||||
tabindex="-1"
|
||||
>
|
||||
<header class="u-flex u-cross-baseline u-gap-4">
|
||||
<span
|
||||
class="{getIcon(tutorial)} aw-u-font-size-24"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<h3 class="aw-sub-body-500 aw-u-color-text-primary">
|
||||
{tutorial.framework}
|
||||
</h3>
|
||||
<span class="badge aw-caption-400">Coming Soon</span>
|
||||
</header>
|
||||
</a>
|
||||
{:else}
|
||||
<a href={tutorial.href} class="aw-card is-normal">
|
||||
<header>
|
||||
<header class="u-flex u-cross-baseline u-gap-4">
|
||||
<span
|
||||
class="{getIcon(tutorial)} aw-u-font-size-24"
|
||||
aria-hidden="true"
|
||||
@@ -77,33 +97,12 @@
|
||||
{tutorial.title}
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
<ul class="tutorial-grid">
|
||||
{#each data.drafts as draft}
|
||||
<li>
|
||||
<a
|
||||
href={draft.href}
|
||||
class="aw-card is-normal draft"
|
||||
aria-disabled="true"
|
||||
tabindex="-1"
|
||||
>
|
||||
<header>
|
||||
<span
|
||||
class="{getIcon(draft)} aw-u-font-size-24"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<h3 class="aw-sub-body-500 aw-u-color-text-primary">
|
||||
{draft.framework}
|
||||
</h3>
|
||||
<span class="badge aw-caption-400">Coming Soon</span>
|
||||
</header>
|
||||
</a>
|
||||
{/if}
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</section>
|
||||
{/each}
|
||||
</div>
|
||||
</article>
|
||||
|
||||
@@ -111,35 +110,6 @@
|
||||
</main>
|
||||
|
||||
<style lang="scss">
|
||||
.tutorial-grid {
|
||||
display: grid;
|
||||
gap: 1.5rem; // 24px
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
|
||||
.aw-card {
|
||||
padding: 1.25rem;
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
align-items: center;
|
||||
|
||||
> [class*='icon'] {
|
||||
position: relative;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, calc(-50%));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.badge {
|
||||
border-radius: 0.25rem;
|
||||
background: rgba(253, 54, 110, 0.24);
|
||||
|
||||
@@ -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', {
|
||||
@@ -22,7 +24,8 @@ export async function load() {
|
||||
return {
|
||||
title: frontmatter.title,
|
||||
framework: frontmatter.framework,
|
||||
draft: frontmatter.draft,
|
||||
draft: frontmatter.draft || false,
|
||||
category: frontmatter.category,
|
||||
href: `${base}/docs/tutorials/${tutorialName}`
|
||||
};
|
||||
})
|
||||
@@ -42,11 +45,22 @@ export async function load() {
|
||||
return a.title.toLowerCase().localeCompare(b.title.toLowerCase());
|
||||
});
|
||||
|
||||
const drafts = allTutorials.filter((tutorial) => tutorial.draft);
|
||||
const tutorials = allTutorials.filter((tutorial) => !tutorial.draft);
|
||||
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] = [];
|
||||
}
|
||||
|
||||
// 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
|
||||
};
|
||||
}
|
||||
|
||||
@@ -3,6 +3,7 @@ layout: tutorial
|
||||
title: Coming soon
|
||||
description: Learn to build an Android app with no backend code using an Appwrite backend.
|
||||
framework: Android
|
||||
category: Mobile and native
|
||||
step: 1
|
||||
draft: true
|
||||
---
|
||||
|
||||
@@ -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
|
||||
category: Mobile and native
|
||||
step: 1
|
||||
draft: true
|
||||
---
|
||||
|
||||
@@ -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
|
||||
category: Mobile and native
|
||||
step: 1
|
||||
draft: true
|
||||
---
|
||||
|
||||
@@ -5,6 +5,7 @@ description: Learn to build a React app with no backend code using an Appwrite b
|
||||
step: 1
|
||||
difficulty: beginner
|
||||
readtime: 10
|
||||
category: Web
|
||||
framework: React
|
||||
---
|
||||
|
||||
|
||||
@@ -6,6 +6,7 @@ step: 1
|
||||
difficulty: beginner
|
||||
readtime: 10
|
||||
framework: Refine
|
||||
category: Web
|
||||
---
|
||||
|
||||
**Blog admin panel**: a CRUD app to manage Blog content.
|
||||
|
||||
@@ -6,6 +6,7 @@ step: 1
|
||||
difficulty: easy
|
||||
readtime: 10
|
||||
framework: Stripe
|
||||
category: Functions
|
||||
---
|
||||
As you app grows, you may start offering paid services or features.
|
||||
This is an important part of growing your idea into a business.
|
||||
|
||||
@@ -6,6 +6,7 @@ step: 1
|
||||
difficulty: beginner
|
||||
readtime: 20
|
||||
framework: SvelteKit
|
||||
category: Auth
|
||||
---
|
||||
|
||||
Appwrite takes away your stress of building and maintaining a backend. Appwrite helps you implement authentication, databases, file storage, and respond to real-time events with **secure** APIs out of the box.
|
||||
|
||||
@@ -6,6 +6,7 @@ step: 1
|
||||
difficulty: beginner
|
||||
readtime: 10
|
||||
framework: SvelteKit
|
||||
category: Web
|
||||
---
|
||||
|
||||
**Idea tracker**: an app to track all the side project ideas that you'll start, but probably never finish.
|
||||
|
||||
@@ -5,6 +5,7 @@ description: Learn to build an idea tracker app with Appwrite and Vue with authe
|
||||
step: 1
|
||||
back: /docs
|
||||
framework: Vue
|
||||
category: Web
|
||||
---
|
||||
|
||||
**Idea tracker**: an app to track all the side project ideas that you'll start, but probably never finish.
|
||||
|
||||
Reference in New Issue
Block a user