mirror of
https://github.com/LukeHagar/website.git
synced 2025-12-09 12:57:48 +00:00
bunch of work
This commit is contained in:
Jesse Winton
@@ -1,132 +1,132 @@
|
||||
<script lang="ts">
|
||||
import { MainFooter } from '$lib/components';
|
||||
import { DEFAULT_DESCRIPTION, DEFAULT_HOST } from '$lib/utils/metadata';
|
||||
import { DOCS_TITLE_SUFFIX } from '$routes/titles';
|
||||
import { MainFooter } from "$lib/components";
|
||||
import { DEFAULT_DESCRIPTION, DEFAULT_HOST } from "$lib/utils/metadata";
|
||||
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';
|
||||
const title = "Tutorials" + DOCS_TITLE_SUFFIX;
|
||||
const description = DEFAULT_DESCRIPTION;
|
||||
const ogImage = DEFAULT_HOST + "/images/open-graph/docs.png";
|
||||
|
||||
export let data;
|
||||
export let data;
|
||||
|
||||
type MappedTutorial = (typeof data.tutorials)[number];
|
||||
type MappedTutorial = (typeof data.tutorials)[number];
|
||||
|
||||
const iconMap: Record<string, string> = {
|
||||
'react native': 'icon-react-native',
|
||||
react: 'icon-react',
|
||||
vue: 'web-icon-vue',
|
||||
angular: 'icon-angular',
|
||||
svelte: 'icon-svelte',
|
||||
sveltekit: 'icon-svelte',
|
||||
'sveltekit ssr': 'icon-svelte',
|
||||
android: 'icon-android',
|
||||
apple: 'icon-apple',
|
||||
flutter: 'icon-flutter',
|
||||
nuxt: 'icon-nuxt',
|
||||
'nuxt ssr': 'icon-nuxt',
|
||||
stripe: 'icon-stripe',
|
||||
refine: 'web-icon-refine',
|
||||
'next.js': 'icon-nextjs',
|
||||
'next.js ssr': 'icon-nextjs',
|
||||
astro: 'icon-astro',
|
||||
'astro ssr': 'icon-astro'
|
||||
};
|
||||
const iconMap: Record<string, string> = {
|
||||
"react native": "icon-react-native",
|
||||
react: "icon-react",
|
||||
vue: "web-icon-vue",
|
||||
angular: "icon-angular",
|
||||
svelte: "icon-svelte",
|
||||
sveltekit: "icon-svelte",
|
||||
"sveltekit ssr": "icon-svelte",
|
||||
android: "icon-android",
|
||||
apple: "icon-apple",
|
||||
flutter: "icon-flutter",
|
||||
nuxt: "icon-nuxt",
|
||||
"nuxt ssr": "icon-nuxt",
|
||||
stripe: "icon-stripe",
|
||||
refine: "web-icon-refine",
|
||||
"next.js": "icon-nextjs",
|
||||
"next.js ssr": "icon-nextjs",
|
||||
astro: "icon-astro",
|
||||
"astro ssr": "icon-astro",
|
||||
};
|
||||
|
||||
const getIcon = (tutorial: MappedTutorial) => {
|
||||
if (!tutorial.framework) return ''; // TODO: Default icon
|
||||
return iconMap[tutorial.framework.toLowerCase()];
|
||||
};
|
||||
const getIcon = (tutorial: MappedTutorial) => {
|
||||
if (!tutorial.framework) return ""; // TODO: Default icon
|
||||
return iconMap[tutorial.framework.toLowerCase()];
|
||||
};
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<!-- Titles -->
|
||||
<title>{title}</title>
|
||||
<meta property="og:title" content={title} />
|
||||
<meta name="twitter:title" content={title} />
|
||||
<!-- Desscription -->
|
||||
<meta name="description" content={description} />
|
||||
<meta property="og:description" content={description} />
|
||||
<meta name="twitter:description" content={description} />
|
||||
<!-- Image -->
|
||||
<meta property="og:image" content={ogImage} />
|
||||
<meta property="og:image:width" content="1200" />
|
||||
<meta property="og:image:height" content="630" />
|
||||
<meta name="twitter:image" content={ogImage} />
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<!-- Titles -->
|
||||
<title>{title}</title>
|
||||
<meta property="og:title" content={title} />
|
||||
<meta name="twitter:title" content={title} />
|
||||
<!-- Desscription -->
|
||||
<meta name="description" content={description} />
|
||||
<meta property="og:description" content={description} />
|
||||
<meta name="twitter:description" content={description} />
|
||||
<!-- Image -->
|
||||
<meta property="og:image" content={ogImage} />
|
||||
<meta property="og:image:width" content="1200" />
|
||||
<meta property="og:image:height" content="630" />
|
||||
<meta name="twitter:image" content={ogImage} />
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
</svelte:head>
|
||||
|
||||
<main class="web-main-section" id="main">
|
||||
<article class="web-article">
|
||||
<header class="web-article-header">
|
||||
<div class="web-article-header-start u-flex-vertical web-u-cross-start">
|
||||
<div class="relative flex u-cross-center">
|
||||
<h1 class="web-title">Tutorials</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="web-article-header-end" />
|
||||
</header>
|
||||
<div class="web-article-content web-gap-20">
|
||||
{#each data.tutorials as category}
|
||||
<section class="u-flex-vertical gap-6">
|
||||
<h2 class="web-eyebrow">{category.title}</h2>
|
||||
<ul class="web-grid-row-4 web-grid-row-4-mobile-2">
|
||||
{#each category.tutorials as tutorial}
|
||||
<li>
|
||||
{#if tutorial.draft === true}
|
||||
<a
|
||||
href={tutorial.href}
|
||||
class="web-card is-normal draft"
|
||||
aria-disabled="true"
|
||||
tabindex="-1"
|
||||
>
|
||||
<header class="flex u-cross-baseline gap-1">
|
||||
<span
|
||||
class="{getIcon(tutorial)} web-u-font-size-24"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<h3 class="web-sub-body-500 web-u-color-text-primary">
|
||||
{tutorial.framework}
|
||||
</h3>
|
||||
<span class="badge web-caption-400">Coming Soon</span>
|
||||
</header>
|
||||
</a>
|
||||
{:else}
|
||||
<a href={tutorial.href} class="web-card is-normal">
|
||||
<header class="flex u-cross-baseline gap-1">
|
||||
<span
|
||||
class="{getIcon(tutorial)} web-u-font-size-24"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<h3 class="web-sub-body-500 web-u-color-text-primary">
|
||||
{tutorial.framework}
|
||||
</h3>
|
||||
</header>
|
||||
<p class="web-sub-body-400 u-margin-block-start-4">
|
||||
{tutorial.title}
|
||||
</p>
|
||||
</a>
|
||||
{/if}
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</section>
|
||||
{/each}
|
||||
<article class="web-article">
|
||||
<header class="web-article-header">
|
||||
<div class="web-article-header-start web-u-cross-start flex flex-col">
|
||||
<div class="relative flex items-center">
|
||||
<h1 class="web-title">Tutorials</h1>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<div class="web-article-header-end" />
|
||||
</header>
|
||||
<div class="web-article-content web-gap-20">
|
||||
{#each data.tutorials as category}
|
||||
<section class="flex flex-col gap-6">
|
||||
<h2 class="web-eyebrow">{category.title}</h2>
|
||||
<ul class="web-grid-row-4 web-grid-row-4-mobile-2">
|
||||
{#each category.tutorials as tutorial}
|
||||
<li>
|
||||
{#if tutorial.draft === true}
|
||||
<a
|
||||
href={tutorial.href}
|
||||
class="web-card is-normal draft"
|
||||
aria-disabled="true"
|
||||
tabindex="-1"
|
||||
>
|
||||
<header class="u-cross-baseline flex gap-1">
|
||||
<span
|
||||
class="{getIcon(tutorial)} web-u-font-size-24"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<h3 class="web-sub-body-500 web-u-color-text-primary">
|
||||
{tutorial.framework}
|
||||
</h3>
|
||||
<span class="badge web-caption-400">Coming Soon</span>
|
||||
</header>
|
||||
</a>
|
||||
{:else}
|
||||
<a href={tutorial.href} class="web-card is-normal">
|
||||
<header class="u-cross-baseline flex gap-1">
|
||||
<span
|
||||
class="{getIcon(tutorial)} web-u-font-size-24"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<h3 class="web-sub-body-500 web-u-color-text-primary">
|
||||
{tutorial.framework}
|
||||
</h3>
|
||||
</header>
|
||||
<p class="web-sub-body-400 u-margin-block-start-4">
|
||||
{tutorial.title}
|
||||
</p>
|
||||
</a>
|
||||
{/if}
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</section>
|
||||
{/each}
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<MainFooter variant="docs" />
|
||||
<MainFooter variant="docs" />
|
||||
</main>
|
||||
|
||||
<style lang="scss">
|
||||
.badge {
|
||||
border-radius: 0.25rem;
|
||||
background: rgba(253, 54, 110, 0.24);
|
||||
padding: 0.0625rem 0.375rem;
|
||||
margin-inline-start: 0.25rem;
|
||||
}
|
||||
.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;
|
||||
pointer-events: none;
|
||||
}
|
||||
.draft {
|
||||
opacity: 0.4;
|
||||
pointer-events: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -106,7 +106,7 @@ const handleRegistration = async (event) => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="u-max-width-650" style="margin: 0 auto;">
|
||||
<div class="max-w-[650px]" style="margin: 0 auto;">
|
||||
<section class="card u-margin-32">
|
||||
<h2 class="eyebrow-heading-2">Login/Register</h2>
|
||||
<AuthForm v-if="isSignUp" :handle-submit="handleRegistration" submit-type="Sign Up"></AuthForm>
|
||||
@@ -127,7 +127,7 @@ We will also show buttons to toggle between the two different types of forms.
|
||||
|
||||
# Authentication forms {% #auth-forms %}
|
||||
|
||||
In the previous step, we defined a `AuthForm` to handle signup and login.
|
||||
In the previous step, we defined a `AuthForm` to handle signup and login.
|
||||
Let's build this form now.
|
||||
|
||||
Create a new file `components/authForm.vue` and add the following code.
|
||||
@@ -138,7 +138,7 @@ The handle submit and submit type are props passed from `pages/login.vue`
|
||||
|
||||
<template>
|
||||
<form
|
||||
class="form u-width-full-line u-max-width-500 u-margin-block-start-16"
|
||||
class="form u-width-full-line max-w-[500px] u-margin-block-start-16"
|
||||
@submit.prevent="handleSubmit"
|
||||
>
|
||||
<ul class="form-list">
|
||||
|
||||
@@ -87,7 +87,7 @@ const user = useUserSession();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="u-max-width-650" style="margin-inline: auto;">
|
||||
<div class="max-w-[650px]" style="margin-inline: auto;">
|
||||
<!-- Idea form component for logged in users -->
|
||||
<section v-if="user.current.value" class="card u-margin-32">
|
||||
<IdeasForm />
|
||||
@@ -108,9 +108,10 @@ article.box {
|
||||
background-color: hsl(var(--color-neutral-0));
|
||||
}
|
||||
</style>
|
||||
````
|
||||
```
|
||||
|
||||
# Ideas list {% #ideas-list %}
|
||||
|
||||
Now that we can get some ideas to show, we go on to build the component for the list of ideas.
|
||||
|
||||
Once again, we need to take a moment to think about how this component should work.
|
||||
@@ -167,14 +168,14 @@ This component should be visible to all users, so no conditional rendering neeed
|
||||
<!-- pages/index.vue -->
|
||||
|
||||
<template>
|
||||
<div class="u-max-width-650" style="margin: 0 auto;">
|
||||
<div class="max-w-[650px]" style="margin: 0 auto;">
|
||||
<!-- ... Some skipped code -->
|
||||
<IdeasList />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- ... Some skipped code -->
|
||||
````
|
||||
```
|
||||
|
||||
Congratulations!
|
||||
You now have an ideas tracker built with Nuxt and Appwrite to use locally.
|
||||
|
||||
Reference in New Issue
Block a user