feat(astro): support lessons without parts or chapters

[AriPerkkio]

• Closes Parts of only one lesson #304
• Example without chapters deployed at https://feat-remove-chapters.tutorial-vite-plugin.pages.dev
  

Adds support for defining lessons without chapters or parts.

src/content/tutorial
│
├── meta.md # Tutorial metadata
│
└── lesson-1 # Lesson in root! No part or chapter.
   ├── content.md
   ├── _files
   └── _solution

src/content/tutorial
│
├── meta.md # Tutorial metadata
│
└── part-1
    └── lesson-1 # Lesson in part! No chapter.
        ├── content.md
        ├── _files
        └── _solution

Custom order can be defined using lessons in metadata:

---
type: 'tutorial'
lessons: ['lesson-one', 'lesson-two']
---

---
type: 'part'
lessons: ['lesson-one', 'lesson-two']
---

Mixing structures is not supported and an error is thrown when these are not followed:

• A tutorial can have one-or-many part's or one-or-many lesson's
• A part can have one-or-many chapter's or one-or-many lesson's

In practice:

src/content/tutorial
├── meta.md # Tutorial
├── lesson-1 # Lesson
└── part-1 # Part

> Error: Cannot mix lessons and parts in a tutorial. Either remove the parts or move root level lessons into a part.

src/content/tutorial
├── meta.md # Tutorial
└── part-1 # Part
    ├── lesson-1 # Lesson
    └── chapter-1 # Chapter

> Error: Cannot mix lessons and chapters in a part. Either remove the chapter from 1-part or move the lessons into a chapter.

However you can have multiple part's, where some contain just chapter's and some contain just lesson's:

src/content/tutorial
├── meta.md # Tutorial
│
├── part-1 # Part with lessons
│   └── lesson-1 # Lesson
│
└── part-2 # Part with chapters
    └── chapter-1 # Chapter

tk-mixed-hierarchy.webm

[AriPerkkio]

I'm planning to create scripts/start.mjs that can be called like node scripts/start.mjs --dev lessons-in-root to reduce these verbose scripts. But that will be added in follow-up PR.

[Nemikolh]

Fantastic work on this @AriPerkkio ! 🎉

Can't wait to get this landed 😃

I finished a first pass, I'll try to do another pass later this week 🤞

[Nemikolh]

Oh interesting, what does this expect call do (compared to having them in the parent function)?

[AriPerkkio]

The button can become visible before it has been hydrated. Clicking it doesn't do anything. So here if the last await expect(page.locator('[data-state="open"]', { has: button })).toBeVisible({ timeout: 50 }) fails, the whole callback inside expect(callback).toPass() will be retried -> button is clicked again.

This hydration issue might be related to running <root>/e2e in dev mode only. I'll try in follow-up PR that if we switch to vite build --watch & vite preview, would this issue disappear.

[Nemikolh]

I'm wondering if we should do this in a second pass in case parts, chapters and lessons are not in order.

It's also something that could have been an issue with the previous logic though so maybe we don't need to care about this.

[AriPerkkio]

At this point they should be ordered:

tutorialkit/packages/astro/src/default/utils/content.ts

Lines 20 to 22 in 0b2896a

	const collection = sortCollection(await getCollection('tutorial'));
	const { tutorial, tutorialMetaData } = await parseCollection(collection);

tutorialkit/packages/astro/src/default/utils/content.ts

Lines 271 to 278 in 0b2896a

	function sortCollection(collection: CollectionEntryTutorial[]) {
	return collection.sort((a, b) => {
	const depthA = a.id.split('/').length;
	const depthB = b.id.split('/').length;
	return depthA - depthB;
	});
	}

But yes, it's not visible from this function only. Should we move the sortCollection function call inside this function, so that we can be sure it's always sorted before looping it?

[Nemikolh]

Ah I missed that, no all good this function is internal to this module 👍

[Nemikolh]

Amazing work on this @AriPerkkio! 🎉

Super impressed with how much cleaner the code is and overall this is a really high quality PR 💪

[AriPerkkio]

Thanks for review @Nemikolh, let's get this merged! 💯