https://github.com/tokiory/intorial
🥶 Simple as f*** tutorials
https://github.com/tokiory/intorial
Last synced: about 1 year ago
JSON representation
🥶 Simple as f*** tutorials
- Host: GitHub
- URL: https://github.com/tokiory/intorial
- Owner: tokiory
- License: gpl-3.0
- Archived: true
- Created: 2024-04-25T21:28:01.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-04-27T10:56:28.000Z (about 2 years ago)
- Last Synced: 2025-03-11T06:50:04.487Z (over 1 year ago)
- Language: TypeScript
- Size: 181 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
**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.
# Getting started
First of all you can install Intorial via npm:
```bash
npm i intorial
# Or you can use other package managers
pnpm add intorial # PNPM
yarn add intorial # Yarn
bun install intorial # Bun
```
## Using with Nuxt Content or Next.js
You 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:
```jsx
import "intorial" // Needed for side-effects
const Page = () => {
return (<>
Information about topic, some minimal examples
Code blocks, notes and other stuff
>)
}
```
## Using in plain HTML
You can also use Intorial with html, without any framework:
```html
import "intorial"
Information about topic, some minimal examples
Code blocks, notes and other stuff
```
# Imports
You can import **all** components from intorial via simple:
```js
import "intorial"
```
You can also use separate imports, to import components, that you need:
```js
import "intorial/theory" // Theory, hint, diagram, tyan components
import "intorial/practice" // Practice, math, code components
import "intorial/quiz" // Quiz and question components
import "intorial/control" // Control component
import "intorial/section" // Theory, practice and section components (without any content components)
```
# Styling
TODO
# Components
| Component Name | Description |
| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
| intorial-page | Page component, used when creating a full-page tutorial |
| intorial-section | Section component, used when creating a dedicated section about one topic in a tutorial |
| intorial-control | Control component, used when creating more than one section |
| intorial-theory | Theory component, used to create a topic theory, which will be placed in the left part of the screen |
| intorial-practice | Practice component, used to create a topic practice content. You can place codeblocks, code editors, and more practice content in this component. |
| intorial-code | Codeblock component, used to paste theory/practice code |
| intorial-math | Math component, LaTeX rendering block |
| intorial-diagram | Diagram component, use can use mermaid syntax to show your ideas in diagrams |
| intorial-hint | Hint component, used to provide hints for theory content |
| intorial-quiz | Quiz component, used to create quizzes |
| intorial-question | Question component, used to create questions for quizzes |
| intorial-tyan | Girl mascot component, you can use it in hints |
---
Coded by tokiory with ❤️