diff --git a/src/lib/layouts/DocsTutorial.svelte b/src/lib/layouts/DocsTutorial.svelte index 283b67d0df..dc7e461d27 100644 --- a/src/lib/layouts/DocsTutorial.svelte +++ b/src/lib/layouts/DocsTutorial.svelte @@ -3,77 +3,103 @@ import { Feedback } from '$lib/components'; import type { Tutorial } from '$markdoc/layouts/Tutorial.svelte'; import type { TocItem } from './DocsArticle.svelte'; + import Heading from '$markdoc/nodes/Heading.svelte'; + import { onMount } from 'svelte'; - export let title: string; export let toc: Array; export let currentStep: number; - export let back: string; export let date: string; export let tutorials: Array; + const firstStepItem: Tutorial | null = tutorials[0] ?? null; + // currentStep starts from 1, the arrays start from 0. + const currentStepItem = (tutorials[currentStep - 1] ?? firstStepItem); + $: nextStep = tutorials.find((tutorial) => tutorial.step === currentStep + 1); $: prevStep = tutorials.find((tutorial) => tutorial.step === currentStep - 1); + + // `any` for compatibility with reactive variables. + function getCorrectTitle(tutorial: Tutorial, checkAt: number): string { + if (tutorial.step === checkAt) { + return 'Introduction'; + } else { + return tutorial.title; + } + } + + let slotContent: HTMLElement | null = null; + + onMount(() => { + if (!slotContent) return; + + // dynamically modify all `label` headers to `body`. + slotContent.querySelectorAll('h2.web-label').forEach(header => { + header.classList.replace('web-label', 'web-main-body-500'); + }); + });
-
- -
    - -
-
- {#if back} - - +
+
    + {#if currentStepItem.difficulty} +
  • {currentStepItem.difficulty}
    • + {/if} + {#if currentStepItem.readtime} +
  • {currentStepItem.readtime} min
    • {/if} -

    {title}

    +
+
+

{firstStepItem?.title}

- -
- {#if prevStep} - -
+
+ {currentStep} + + {getCorrectTitle(currentStepItem, 1)} + +
+ +
+ +
+ +
+ {#if prevStep} + + + {/if} + {#if nextStep} + - - - {/if} - {#if nextStep} - - - Step {nextStep.step} + Step {nextStep.step}: {nextStep.title} - - - {/if} -
+ > + +
+ +
@@ -83,7 +109,7 @@
Tutorial Steps
    - {#each tutorials as tutorial} + {#each tutorials as tutorial, index} {@const isCurrentStep = currentStep === tutorial.step}
  1. {tutorial.step} - {tutorial.title} + + {index === 0 ? 'Introduction' : tutorial.title} - {#if isCurrentStep} -
      - {#each toc as parent} + {#if isCurrentStep && toc.length} +
        + {#each toc.slice(1) as parent}
      1. - {#if parent?.step} - {parent.step} - {/if} - {parent.title} + {parent.title} {#if parent.children}
          @@ -145,3 +169,17 @@
+ + \ No newline at end of file diff --git a/src/lib/utils/tutorials.ts b/src/lib/utils/tutorials.ts index 149708d5df..4bd61bccf1 100644 --- a/src/lib/utils/tutorials.ts +++ b/src/lib/utils/tutorials.ts @@ -2,21 +2,31 @@ import { base } from '$app/paths'; import type { Tutorial } from '$markdoc/layouts/Tutorial.svelte'; export function globToTutorial(data: { tutorials: Record; pathname: string }) { - return Object.entries(data.tutorials) - .map(([filepath, tutorial]) => { - const { frontmatter } = tutorial as { - frontmatter: Tutorial; - }; - const slug = filepath.replace('./', '').replace('/+page.markdoc', ''); - const tutorialName = data.pathname.split('/').slice(0, -1).join('/'); + let isFound = false; + let difficulty, readtime; - return { - title: frontmatter.title, - step: frontmatter.step, - href: `${base}${tutorialName}/${slug}` - }; - }) - .sort((a, b) => { - return a.step - b.step; - }); + return Object.entries(data.tutorials) + .map(([filepath, tutorial]) => { + const { frontmatter } = tutorial as { + frontmatter: Tutorial; + }; + const slug = filepath.replace('./', '').replace('/+page.markdoc', ''); + const tutorialName = data.pathname.split('/').slice(0, -1).join('/'); + + if (!isFound && 'difficulty' in frontmatter && 'readtime' in frontmatter) { + isFound = true; + readtime = frontmatter.readtime; + difficulty = frontmatter.difficulty; + } + + return { + readtime, + difficulty, + ...frontmatter, + href: `${base}${tutorialName}/${slug}` + }; + }) + .sort((a, b) => { + return a.step - b.step; + }); } diff --git a/src/markdoc/layouts/Tutorial.svelte b/src/markdoc/layouts/Tutorial.svelte index a13f9fca58..8b2b60ee31 100644 --- a/src/markdoc/layouts/Tutorial.svelte +++ b/src/markdoc/layouts/Tutorial.svelte @@ -6,6 +6,8 @@ step: number; href: string; draft?: boolean; + difficulty?: string; + readtime?: string; }; @@ -21,10 +23,7 @@ export let title: string; export let description: string; - export let difficulty: string; - export let readtime: string; export let step: number; - export let back: string; export let date: string; setContext('headings', writable({})); @@ -77,15 +76,7 @@ - - - {#if difficulty} -
  • {difficulty}
    • - {/if} - {#if readtime} -
  • {readtime} min
    • - {/if} -     +