Override components: TutorialContent

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.

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...

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:

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>

...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?

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?

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.

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

tutorialkit/packages/astro/src/default/components/TutorialContent.astro

Lines 15 to 17 in afbc81f

    
           <div class="markdown-content text-tk-elements-content-textColor"> 
        
             <Markdown /> 
        
           </div>

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',
      },
    }),
  ],
});

Navigation Menu

Repository navigation

Override components: TutorialContent #319

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	<div class="markdown-content text-tk-elements-content-textColor">
	<Markdown />
	</div>

Override components: TutorialContent #319

Description

Activity

AriPerkkio commented on Sep 9, 2024

iliakan commented on Sep 9, 2024

AriPerkkio commented on Sep 9, 2024

iliakan commented on Sep 9, 2024

AriPerkkio commented on Sep 9, 2024

iliakan commented on Sep 9, 2024

AriPerkkio commented on Sep 16, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions