{"id":20714286,"url":"https://github.com/tokiory/intorial","last_synced_at":"2025-05-10T22:31:52.396Z","repository":{"id":236159414,"uuid":"792041040","full_name":"tokiory/intorial","owner":"tokiory","description":"🥶 Simple as f*** tutorials","archived":true,"fork":false,"pushed_at":"2024-04-27T10:56:28.000Z","size":185,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-11T06:50:04.487Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tokiory.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-04-25T21:28:01.000Z","updated_at":"2024-07-21T09:43:43.000Z","dependencies_parsed_at":"2024-04-25T23:32:57.062Z","dependency_job_id":"b16bd7fd-6986-4388-9449-eba11f1513b1","html_url":"https://github.com/tokiory/intorial","commit_stats":null,"previous_names":["tokiory/intorial"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tokiory%2Fintorial","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tokiory%2Fintorial/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tokiory%2Fintorial/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tokiory%2Fintorial/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tokiory","download_url":"https://codeload.github.com/tokiory/intorial/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253492529,"owners_count":21916959,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-17T02:30:48.644Z","updated_at":"2025-05-10T22:31:50.263Z","avatar_url":"https://github.com/tokiory.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![Intorial Banner](./public/banner.svg)\n\n**Intorial** (*game of words: In (tu)torial and into real*) is a native web components library designed to help you create interactive tutorials with ease. With Intorial, you can create modular, reusable, and encapsulated tutorials that can be used on any page.\n\n# Getting started\nFirst of all you can install Intorial via npm:\n```bash\nnpm i intorial\n\n# Or you can use other package managers\npnpm add intorial    # PNPM\nyarn add intorial    # Yarn\nbun install intorial # Bun\n```\n\n## Using with Nuxt Content or Next.js\nYou can use [Nuxt Content MDC](https://content.nuxt.com/usage/markdown) or [Next.js MDX](https://nextjs.org/docs/pages/building-your-application/configuring/mdx) for creating **pages** with tutorials:\n```jsx\nimport \"intorial\" // Needed for side-effects\n\nconst Page = () =\u003e {\n  return (\u003c\u003e\n    \u003cintorial-page\u003e\n\n      \u003cintorial-section\u003e\n        \u003cintorial-theory\u003e\n          Information about topic, some minimal examples\n        \u003c/intorial-theory\u003e\n\n        \u003cintorial-practice\u003e\n          Code blocks, notes and other stuff\n        \u003c/intorial-practice\u003e\n      \u003c/intorial-section\u003e\n\n    \u003cintorial-page\u003e\n  \u003c/\u003e)\n}\n```\n\n## Using in plain HTML\nYou can also use Intorial with html, without any framework:\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\"\u003e\n    \u003ctitle\u003e\u003c/title\u003e\n    \u003clink href=\"css/style.css\" rel=\"stylesheet\"\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n\n    \u003c!-- WARN: You should import intorial before using this components --\u003e\n    \u003cscript\u003e\n      import \"intorial\"\n    \u003c/script\u003e\n\n    \u003cintorial-page\u003e\n\n      \u003cintorial-section\u003e\n        \u003cintorial-theory\u003e\n          Information about topic, some minimal examples\n        \u003c/intorial-theory\u003e\n\n        \u003cintorial-practice\u003e\n          Code blocks, notes and other stuff\n        \u003c/intorial-practice\u003e\n      \u003c/intorial-section\u003e\n\n    \u003c/intorial-page\u003e\n  \n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n# Imports\nYou can import **all** components from intorial via simple:\n```js\nimport \"intorial\"\n```\n\nYou can also use separate imports, to import components, that you need:\n```js\nimport \"intorial/theory\"   // Theory, hint, diagram, tyan components\nimport \"intorial/practice\" // Practice, math, code components\nimport \"intorial/quiz\"     // Quiz and question components\nimport \"intorial/control\"  // Control component\nimport \"intorial/section\"  // Theory, practice and section components (without any content components)\n```\n\n# Styling\nTODO\n\n# Components\n| Component Name    | Description                                                                                                                                       |\n| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |\n| intorial-page     | Page component, used when creating a full-page tutorial                                                                                           |\n| intorial-section  | Section component, used when creating a dedicated section about one topic in a tutorial                                                           |\n| intorial-control  | Control component, used when creating more than one section                                                                                       |\n| intorial-theory   | Theory component, used to create a topic theory, which will be placed in the left part of the screen                                              |\n| intorial-practice | Practice component, used to create a topic practice content. You can place codeblocks, code editors, and more practice content in this component. |\n| intorial-code     | Codeblock component, used to paste theory/practice code                                                                                           |\n| intorial-math     | Math component, LaTeX rendering block                                                                                                             |\n| intorial-diagram  | Diagram component, use can use mermaid syntax to show your ideas in diagrams                                                                      |\n| intorial-hint     | Hint component, used to provide hints for theory content                                                                                          |\n| intorial-quiz     | Quiz component, used to create quizzes                                                                                                            |\n| intorial-question | Question component, used to create questions for quizzes                                                                                          |\n| intorial-tyan     | Girl mascot component, you can use it in hints                                                                                                    |\n\n---\n\n\u003cp align=\"center\"\u003e\n  \u003cimg width=\"125\" alt=\"logo\" src=\"https://github.com/tokiory/intorial/assets/101672047/aa98519d-280d-4190-923f-640fa6346d26\" /\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n    Coded by \u003ca href=\"https://t.me/tokiory\"\u003etokiory\u003c/a\u003e with ❤️\n\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftokiory%2Fintorial","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftokiory%2Fintorial","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftokiory%2Fintorial/lists"}