-
Notifications
You must be signed in to change notification settings - Fork 102
How to set html css tutorial ; want to disply HTMl file in preview tab #431
-
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?
- also in
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
Beta Was this translation helpful? Give feedback.
All reactions
- Add the style in template. All template files that are not overwritten by
_filesor_solutionare 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.
Replies: 3 comments 6 replies
-
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.
Beta Was this translation helpful? Give feedback.
All reactions
-
👍 1
-
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
Beta Was this translation helpful? Give feedback.
All reactions
-
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.
Beta Was this translation helpful? Give feedback.
All reactions
-
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 ?
Beta Was this translation helpful? Give feedback.
All reactions
-
- Add the style in template. All template files that are not overwritten by
_filesor_solutionare 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.
Beta Was this translation helpful? Give feedback.
All reactions
-
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
Beta Was this translation helpful? Give feedback.
All reactions
-
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.
Beta Was this translation helpful? Give feedback.
All reactions
-
👍 1
-
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
Beta Was this translation helpful? Give feedback.
All reactions
-
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
Beta Was this translation helpful? Give feedback.
All reactions
-
👍 1