Title: How to set html css tutorial ; want to disply HTMl file in preview tab · stackblitz/tutorialkit · Discussion #431 · GitHub
Open Graph Title: How to set html css tutorial ; want to disply HTMl file in preview tab · stackblitz/tutorialkit · Discussion #431
X Title: How to set html css tutorial ; want to disply HTMl file in preview tab · stackblitz/tutorialkit · Discussion #431
Description: How to set html css tutorial ; want to disply HTMl file in preview tab
Open Graph Description: 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 ha...
X Description: 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 ha...
Opengraph URL: https://github.com/stackblitz/tutorialkit/discussions/431
X: @github
Domain: patch-diff.githubusercontent.com
{"@context":"https://schema.org","@type":"QAPage","mainEntity":{"@type":"Question","name":"How to set html css tutorial ; want to disply HTMl file in preview tab","text":"Describe the bug
\nI want to create CSS tutorials and added
\n\n- A file under
tutorial/1-basics/1-introduction/1-welcome/__files/basic.html \n
\nbut in preview tab it keep loading the default template which have Viteand everytim when I refresh i fo npm install
\nso my questions are
\n\n- 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?
\n- How to stop npm install and npm start on every page refresh
\n- \n
\n- also in
/content/tutorial/1-basics/1-introduction/1-welcome/content.md , there is focus property which is not metioned anywhere, how to use? \n
\n \n
\nLink to a StackBlitz project which shows the error
\nNo response
\nSteps to reproduce
\n\n- install the app
\n- add fils _files/basic.html
\n
\nExpected behavior
\nIn preview tab ; it must show my HTML file and do not install on every refresh
\nhere is the repo link : https://github.com/xkeshav/tutorial-kit
\nScreenshots
\n\nthis is how it looks when loadedpage load
\n\nPlatform
\n\n- TutorialKit version: 1.3.1
\n- OS: Ubuntu 24.04
\n- Browser: Chrome
\n- Version: [e.g. 91.1]
\n
\nAdditional context
\nNo response
","upvoteCount":1,"answerCount":3,"acceptedAnswer":{"@type":"Answer","text":"\n- Add the style in template. All template files that are not overwritten by
_files or _solution are used by default. \n- I'm not sure what this means.
\n- A single lesson can have single solution, so showing multiple different solutions requires separate lessons.
\n
\n\nalso curious where does this template/default/index.html visible ?
\n
\nIt 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.
","upvoteCount":0,"url":"https://github.com/stackblitz/tutorialkit/discussions/431#discussioncomment-11704593"}}}
| route-pattern | /_view_fragments/Voltron::DiscussionsFragmentsController/show/:user_id/:repository/:discussion_number/discussion_layout(.:format) |
| route-controller | voltron_discussions_fragments |
| route-action | discussion_layout |
| fetch-nonce | v2:3d9d95c8-406f-b7f3-8f53-e5ab3a581006 |
| current-catalog-service-hash | 9f0abe34da433c9b6db74bffa2466494a717b579a96b30a5d252e5090baea7be |
| request-id | 9DB8:335652:341B73A:47A1AFE:696E1663 |
| html-safe-nonce | 45401606186f14bd11180c63a689e3ceb1f0f672686f6c7d3cb67f0191a39ccf |
| visitor-payload | eyJyZWZlcnJlciI6IiIsInJlcXVlc3RfaWQiOiI5REI4OjMzNTY1MjozNDFCNzNBOjQ3QTFBRkU6Njk2RTE2NjMiLCJ2aXNpdG9yX2lkIjoiNDIzOTA4NzIyMjAzNzI4ODU0NyIsInJlZ2lvbl9lZGdlIjoiaWFkIiwicmVnaW9uX3JlbmRlciI6ImlhZCJ9 |
| visitor-hmac | 28389e1a3f3f01e2519e4fdf46687b71e992ffb6eff8666ea8b05dd20ac4a85e |
| hovercard-subject-tag | discussion:7765451 |
| github-keyboard-shortcuts | repository,copilot |
| google-site-verification | Apib7-x98H0j5cPqHWwSMm6dNU4GmODRoqxLiDzdx9I |
| octolytics-url | https://collector.github.com/github/collect |
| analytics-location | / |
| fb:app_id | 1401488693436528 |
| apple-itunes-app | app-id=1477376905, app-argument=https://github.com/_view_fragments/Voltron::DiscussionsFragmentsController/show/stackblitz/tutorialkit/431/discussion_layout |
| twitter:image | https://opengraph.githubassets.com/c7a1fa29f399eab106215aed50142dbbb8dcdce80aa5b7ab9cfdc6eff5dbaf13/stackblitz/tutorialkit/discussions/431 |
| twitter:card | summary_large_image |
| og:image | https://opengraph.githubassets.com/c7a1fa29f399eab106215aed50142dbbb8dcdce80aa5b7ab9cfdc6eff5dbaf13/stackblitz/tutorialkit/discussions/431 |
| og:image:alt | 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 ha... |
| og:image:width | 1200 |
| og:image:height | 600 |
| og:site_name | GitHub |
| og:type | object |
| hostname | github.com |
| expected-hostname | github.com |
| None | 1a7d6d739bf034e67486b9f97a31887ca30302b72a0acac49b6bcddff34356d7 |
| turbo-cache-control | no-preview |
| go-import | github.com/stackblitz/tutorialkit git https://github.com/stackblitz/tutorialkit.git |
| octolytics-dimension-user_id | 28635252 |
| octolytics-dimension-user_login | stackblitz |
| octolytics-dimension-repository_id | 788312403 |
| octolytics-dimension-repository_nwo | stackblitz/tutorialkit |
| octolytics-dimension-repository_public | true |
| octolytics-dimension-repository_is_fork | false |
| octolytics-dimension-repository_network_root_id | 788312403 |
| octolytics-dimension-repository_network_root_nwo | stackblitz/tutorialkit |
| turbo-body-classes | logged-out env-production page-responsive |
| disable-turbo | false |
| browser-stats-url | https://api.github.com/_private/browser/stats |
| browser-errors-url | https://api.github.com/_private/browser/errors |
| release | 87d7872ec7094ed247923539669aabda9230966f |
| ui-target | full |
| theme-color | #1e2327 |
| color-scheme | light dark |
Links:
Viewport: width=device-width