Override components: TutorialContent

[iliakan]

For information-only lessons without an editor, the text occupies the full width, which is too much.

Content-oriented websites, such as https://medium.com/ and others limit text width, they make it a narrow column with margins.

For example medium.com - it's 680px:

I'd like to do the same.

I can add width: 680; margin:auto using dev tools to get it, like this:

What is the correct way to do this? Without a need to patch tutorialkit?

I guess, this isn't just about me. Wide texts are usually fit into columns on most sites, hopefully there's a way =).

P.P.S. With an editor, another layout should apply, probably with the editor taking extra right space and no margin. This request is only about the "editor: false" layout.

[AriPerkkio]

Does this layout look correct? https://stackblitz.com/~/edit/vitejs-vite-zhhoys?file=theme.css&file=src/content/tutorial/1-basics/1-introduction/1-welcome/content.md&terminal=dev

Add a theme.css and define your styles there:

html {
    background-color: var(--tk-background-primary);
}

body {
    max-width: 600px;
    margin-inline: auto;
}

---
type: lesson
title: Welcome to TutorialKit
editor: false
previews: false
terminal: false
---

# Welcom to TutorialKit

Lorem ipsum...

[iliakan]

Thank you. I see it's easy to do, but this column in this layout encompasses the whole website, which is a bit different thing.

Usually, it's only the text which is columnized, while the header/footer remains wide.

Here's medium.com for example:

[AriPerkkio]

How about adding it directly into the content.md and not use theme.css at all?

---
type: lesson
title: Welcome to TutorialKit
editor: false
previews: false
terminal: false
---

<div style="max-width: 680px; margin-inline: auto;">

# Welcom to TutorialKit

Lorem ipsum dolor...

</div>

[iliakan]

...You mean add this to every content.md file?

Technically possible, but doesn't look good ;)

Making a column out of a wide text is very common rule. Is it possible to provide such functionality this at the tutorialkit level? Add a class perhaps?

[AriPerkkio]

I would recommend to create re-usable Astro component and use that in the lessons that are hiding preview and terminal. Something like:

---
type: lesson
...
---

import NarrowLayout from '@component/NarrowLayout';

<NarrowLayout>

# Welcom to TutorialKit

Lorem ipsum dolor...

</NarrowLayout>

What kind of configurable API should this have on TutorialKit's side?

[iliakan]

I would suggest just adding a CSS class to the div with the lesson text. Then a simple theme.css would allow to configure it.

Because content files should be about content as much as possible. It'd be much better to do such a generic thing with CSS.

[AriPerkkio]

As solution, let's add support for overriding the elements that render markdown here:

https://github.com/stackblitz/tutorialkit/blob/afbc81f241ea471eaf334514ad4ac2fa96bc3662/packages/astro/src/default/components/TutorialContent.astro#L15-L17

This should be called TutorialContent that can be overriden with https://tutorialkit.dev/guides/overriding-components/. Then users can create their own TutorialContent with any styling and classnames they need, and define it in configuration as:

import tutorialkit from '@tutorialkit/astro';
import { defineConfig } from 'astro/config';

export default defineConfig({
  integrations: [
    tutorialkit({
      components: {
        TutorialContent: './src/components/TutorialContent.astro',
      },
    }),
  ],
});