LukeParke/website
1
0
Fork 0
mirror of https://github.com/LukeHagar/website.git synced 2025-12-09 21:07:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor tutorial structure & design

Browse Source
This commit is contained in:
tglide
2023-10-26 17:20:29 +01:00
parent 785c331b9b
commit d4269b05f6
19 changed files with 303 additions and 202 deletions
Download Patch File Download Diff File Expand all files Collapse all files

161
src/routes/docs/tutorials/+page.svelte
View File

@@ -1,12 +1,31 @@
<script lang="ts">
import { MainFooter } from '$lib/components';
import { DEFAULT_DESCRIPTION, DEFAULT_HOST } from '$lib/utils/metadata';
import { themeInUse } from '$routes/+layout.svelte';
import { DOCS_TITLE_SUFFIX } from '$routes/titles';
const title = 'Tutorials' + DOCS_TITLE_SUFFIX;
const description = DEFAULT_DESCRIPTION;
const ogImage = DEFAULT_HOST + '/images/open-graph/docs.png';
export let data;
type MappedTutorial = (typeof data.tutorials)[number];
const iconMap: Record<string, string> = {
react: 'icon-react',
vue: 'aw-icon-vue',
angular: 'icon-angular',
svelte: 'icon-svelte',
sveltekit: 'icon-svelte',
android: 'icon-android',
apple: 'icon-apple',
flutter: 'icon-flutter'
};
const getIcon = (tutorial: MappedTutorial) => {
if (!tutorial.framework) return ''; // TODO: Default icon
return iconMap[tutorial.framework.toLowerCase()];
};
</script>
<svelte:head>
@@ -39,67 +58,43 @@
<div class="aw-article-content aw-u-gap-80">
<section class="u-flex-vertical u-gap-24">
<h2 class="aw-eyebrow">Client</h2>
<ul class="aw-grid-row-4 aw-grid-row-4-mobile-2">
<li class="is-mobile-col-span-2">
<a href="/docs/tutorials/react" class="aw-card is-normal">
<header class="u-flex u-cross-baseline u-gap-4">
<span class="icon-react aw-u-font-size-24" aria-hidden="true" />
<h4 class="aw-sub-body-500 aw-u-color-text-primary">React</h4>
</header>
<p class="aw-sub-body-400 u-margin-block-start-4">
Learn Appwrite Auth, Databases, and more with React.
</p>
</a>
</li>
<li class="is-mobile-col-span-2">
<a href="/docs/tutorials/vue" class="aw-card is-normal">
<header class="u-flex u-cross-center u-gap-4">
<img src="/images/platforms/{$themeInUse}/vue.svg" alt="" />
<h4 class="aw-sub-body-500 aw-u-color-text-primary">Vue</h4>
</header>
<p class="aw-sub-body-400 u-margin-block-start-4">
Learn Appwrite Auth, Databases, and more with Vue.
</p>
</a>
</li>
<li class="is-mobile-col-span-2">
<a href="/docs/tutorials/sveltekit" class="aw-card is-normal">
<header class="u-flex u-cross-baseline u-gap-4">
<span class="icon-svelte aw-u-font-size-24" aria-hidden="true" />
<h4 class="aw-sub-body-500 aw-u-color-text-primary">SvelteKit</h4>
</header>
<p class="aw-sub-body-400 u-margin-block-start-4">
Learn Appwrite Auth, Databases, and more with SvelteKit.
</p>
</a>
</li>
<li class="is-mobile-col-span-2">
<article class="aw-card is-full-color">
<header class="u-flex u-cross-baseline u-gap-4">
<span class="icon-flutter aw-u-font-size-24" aria-hidden="true" />
<h4 class="aw-sub-body-500 aw-u-color-text-primary">Flutter</h4>
</header>
<p class="aw-sub-body-400 u-margin-block-start-4">Coming soon...</p>
</article>
</li>
<li class="is-mobile-col-span-2">
<article class="aw-card is-full-color">
<header class="u-flex u-cross-baseline u-gap-4">
<span class="icon-apple aw-u-font-size-24" aria-hidden="true" />
<h4 class="aw-sub-body-500 aw-u-color-text-primary">Apple</h4>
</header>
<p class="aw-sub-body-400 u-margin-block-start-4">Coming soon...</p>
</article>
</li>
<li class="is-mobile-col-span-2">
<article class="aw-card is-full-color">
<header class="u-flex u-cross-baseline u-gap-4">
<span class="icon-android aw-u-font-size-24" aria-hidden="true" />
<h4 class="aw-sub-body-500 aw-u-color-text-primary">Android</h4>
</header>
<p class="aw-sub-body-400 u-margin-block-start-4">Coming soon...</p>
</article>
</li>
<ul class="tutorial-grid">
{#each data.tutorials as tutorial}
<li>
<a href="/docs/tutorials/react" class="aw-card is-normal">
<header>
<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>
</header>
<p class="aw-sub-body-400 u-margin-block-start-4">
{tutorial.title}
</p>
</a>
</li>
{/each}
</ul>
<ul class="tutorial-grid">
{#each data.drafts as draft}
<li>
<a href="/docs/tutorials/react" class="aw-card is-normal draft">
<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>
</li>
{/each}
</ul>
</section>
</div>
@@ -107,3 +102,45 @@
<MainFooter variant="docs" />
</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);
padding: 0.0625rem 0.375rem;
margin-inline-start: 0.25rem;
}
.draft {
opacity: 0.4;
}
</style>