How to set html css tutorial ; want to disply HTMl file in preview tab #431

xkeshav · 2024-12-31T04:39:17Z

xkeshav
Dec 31, 2024

Describe the bug

I want to create CSS tutorials and added

A file under tutorial/1-basics/1-introduction/1-welcome/__files/basic.html

but in preview tab it keep loading the default template which have Viteand everytim when I refresh i fo npm install

so my questions are

How to preview my html file; , do I need to write same html under templates folder or can I add a buton on current default template to link the page with current lesson?
How to stop npm install and npm start on every page refresh
- also in /content/tutorial/1-basics/1-introduction/1-welcome/content.md , there is focus property which is not metioned anywhere, how to use?

Link to a StackBlitz project which shows the error

No response

Steps to reproduce

install the app
add fils _files/basic.html

Expected behavior

In preview tab ; it must show my HTML file and do not install on every refresh

here is the repo link : https://github.com/xkeshav/tutorial-kit

Screenshots

this is how it looks when loadedpage load

Platform

TutorialKit version: 1.3.1
OS: Ubuntu 24.04
Browser: Chrome
Version: [e.g. 91.1]

Additional context

No response

Answered by AriPerkkio

Dec 31, 2024

Add the style in template. All template files that are not overwritten by _files or _solution are used by default.
I'm not sure what this means.
A single lesson can have single solution, so showing multiple different solutions requires separate lessons.

also curious where does this template/default/index.html visible ?

It will be visible if you don't provide _files/index.html. Template files are used by default, _files overwrite them. _solution is used when Solve-button is clicked.

View full answer

AriPerkkio · 2024-12-31T07:53:19Z

AriPerkkio
Dec 31, 2024

Hey @xkeshav,

How to preview my html file; , do I need to write same html under templates folder or can I add a buton on current default template to link the page with current lesson?

In the template you'll need to create a Node project that serves the html file. In _files and _solution you can add files that then overwrite the template files. See https://tutorialkit.dev/guides/creating-content/.

How to stop npm install and npm start on every page refresh

On page refresh you need to run these commands in order to have dependencies installed and server running. However you don't need to refresh page when moving between tutorial's lessons.

alos in /content/tutorial/1-basics/1-introduction/1-welcome/content.md , there is focus property which is not metioned anywhere, how to use?

It's mentioned here on the documentation: https://tutorialkit.dev/reference/configuration/#focus

Have you checked https://demo.tutorialkit.dev? Its sources are available at https://github.com/stackblitz/tutorialkit/tree/main/docs/demo. You could use those as reference.

2 replies

xkeshav Dec 31, 2024
Author

Thanks, will look into demo

I have seen that in template/default , thete is filename counter.ts

So do I need to create each file twice on in template and other under tutorials chapters?

Why am I asking this

I want to show one html without applying css and when user click on solve button then it should reflect those changes in preview too

AriPerkkio Dec 31, 2024

Here's an example, check the template and lesson files: https://stackblitz.com/~/edit/node-snebqbgq

So do I need to create each file twice on in template and other under tutorials chapters?

The files that you want to overwrite from template need to be created in _files and _solution.

xkeshav · 2024-12-31T09:27:39Z

xkeshav
Dec 31, 2024
Author

Thanks. this works great. followup questions. here is forked stackblitz link

to add common style , can I use one css file which server both _files and _solution ?
we have addec complete HTML sementics in each page;(i.e. <head> <body> ) can we make it common and render only the body part in the files?
if we have multiple solution for a same problem statment ( like using various css approach); then how to show all solution or just create multiple files and their css and import ( like we do ussually )
also curious where does this template/default/index.html visible ?

3 replies

AriPerkkio Dec 31, 2024

Add the style in template. All template files that are not overwritten by _files or _solution are used by default.
I'm not sure what this means.
A single lesson can have single solution, so showing multiple different solutions requires separate lessons.

also curious where does this template/default/index.html visible ?

It will be visible if you don't provide _files/index.html. Template files are used by default, _files overwrite them. _solution is used when Solve-button is clicked.

Answer selected by xkeshav

xkeshav Dec 31, 2024
Author

complete HTML in each page means every page we have written whole HTML tags <!doctype><head><meta>and then <body>
so my question is can we have common template which can cater for all other files. ( might be talking contradicting)
also, can we keep have package.json for each tutorials, I want one with react and other with angular or htmx

AriPerkkio Dec 31, 2024

my question is can we have common template which can cater for all other files

That's not possible with plain HTML, you'll need a framework that can handle importing multiple HTML files. How would you build that outside TutorialKit when using NodeJS? Do the same here and place the code in template.

can we keep have package.json for each tutorials, I want one with react and other with angular or htmx

Yes, you can have separate package.json's for lessons. You can override template/default/package.json by having _files/package.json. Alternatively you could have template/default, tempate/react, tempalte/angular and template/htmx. Here's an example of tutorial with multiple templates: https://github.com/AriPerkkio/tutorial-vite-plugin/tree/main/src/templates.

xkeshav · 2024-12-31T12:49:25Z

xkeshav
Dec 31, 2024
Author

Thank you very much for helping me quickly.
if we write anything in meta.md files under tutorials, below the frontmatters then it will not visible anywhere on page ; these files are only have limited scope. right?

for eg.

/ src/content/tutorial/meta.md

---
type: tutorial
template: basic-html
mainCommand: ['npm run start', 'Starting http server']
prepareCommands:
  - ['npm install', 'Installing dependencies']
---
<h1>Welcome to Popover Tutorial</h1>

or in

/src/content/tutorial/basics/meta.md

---
type: part
title: Basics
---

## This is basic part

1 reply

AriPerkkio Dec 31, 2024

Content from meta.md is not visible in tutorials. Only content.md from lessons is visible. https://tutorialkit.dev/guides/creating-content/#a-lesson-content-file

Uh oh!

How to set html css tutorial ; want to disply HTMl file in preview tab #431

Uh oh!

Uh oh!

xkeshav Dec 31, 2024

Describe the bug

Link to a StackBlitz project which shows the error

Steps to reproduce

Expected behavior

Screenshots

Platform

Additional context

Replies: 3 comments · 6 replies

Uh oh!

Uh oh!

AriPerkkio Dec 31, 2024

Uh oh!

Uh oh!

xkeshav Dec 31, 2024 Author

Uh oh!

AriPerkkio Dec 31, 2024

Uh oh!

Uh oh!

xkeshav Dec 31, 2024 Author

Uh oh!

AriPerkkio Dec 31, 2024

Uh oh!

Uh oh!

xkeshav Dec 31, 2024 Author

Uh oh!

AriPerkkio Dec 31, 2024

Uh oh!

Uh oh!

xkeshav Dec 31, 2024 Author

/ src/content/tutorial/meta.md

/src/content/tutorial/basics/meta.md

Uh oh!

Uh oh!

AriPerkkio Dec 31, 2024

xkeshav
Dec 31, 2024

Replies: 3 comments 6 replies

AriPerkkio
Dec 31, 2024

xkeshav Dec 31, 2024
Author

xkeshav
Dec 31, 2024
Author

xkeshav Dec 31, 2024
Author

xkeshav
Dec 31, 2024
Author