|
1 |
| -# TutorialKit.rb Starter |
| 1 | +# Rails Tutorial in the Browser |
2 | 2 |
|
3 |
| -This README includes everything you need to start writing your in-browser Ruby tutorials content. |
| 3 | +This is a source code of the in-browser Rails Tutorial ([rails-tutorial.evilmartians.io](https://rails-tutorial.evilmartians.io)) built with [ruby.wasm][], [wasmify-rails][], [PGlite][] and [TutorialKit][]. |
4 | 4 |
|
5 |
| -Based on [TutorialKit](https://tutorialkit.dev). |
| 5 | +## Getting Started |
| 6 | + |
| 7 | +Make sure you have all dependencies installed and started the dev server: |
| 8 | + |
| 9 | +```bash |
| 10 | +npm install |
| 11 | +npm start |
| 12 | +``` |
6 | 13 |
|
7 | 14 | ## Project Structure
|
8 | 15 |
|
9 | 16 | ```bash
|
10 | 17 | .
|
11 | 18 | ├── astro.config.mjs # TutorialKit uses Astro 🚀 (https://astro.build)
|
| 19 | +├── rails-wasm/ # Source code for the `rails.wasm` module and the `@rails-tutorial/wasm` NPM package |
12 | 20 | ├── src
|
13 | 21 | │ ├── ...
|
14 | 22 | │ ├── content
|
15 |
| -│ │ └── tutorial # Your tutorial content lives here |
16 |
| -│ └── templates # Your templates (see below for more information) |
17 |
| -├── public |
18 |
| -│ ├── favicon.svg |
19 |
| -│ └── logo.svg # Default logo used in top left for your tutorial |
| 23 | +│ │ └── tutorial # Tutorial contents (.md + meta) |
| 24 | +│ └── templates # Project templates |
20 | 25 | ├── ...
|
21 | 26 | ├── theme.ts # Customize the theme of the tutorial
|
22 | 27 | └── uno.config.ts # UnoCSS config (https://unocss.dev/)
|
23 | 28 | ```
|
24 | 29 |
|
25 |
| -## Getting Started |
| 30 | +## Patches |
26 | 31 |
|
27 |
| -Make sure you have all dependencies installed and started the dev server: |
| 32 | +Currently, we patch TutorialKit internals to fix some bugs and bring some improvements (like, Ruby syntax highlighting support). We use `npx patch-package` to generate patches and apply them on `npm install` (see the `patches/` directory). |
28 | 33 |
|
29 |
| -```bash |
30 |
| -npm install |
31 |
| -npm start |
32 |
| -``` |
33 |
| - |
34 |
| -## UI Structure |
35 |
| - |
36 |
| -```markdown |
37 |
| -┌─────────────────────────────────────────────────────┐ |
38 |
| -│ ● ● ● │ |
39 |
| -├───────────────────────────┬─────────────────────────┤ |
40 |
| -│ │ │ |
41 |
| -│ │ │ |
42 |
| -│ │ │ |
43 |
| -│ │ │ |
44 |
| -│ │ Code Editor │ |
45 |
| -│ │ │ |
46 |
| -│ │ │ |
47 |
| -│ │ │ |
48 |
| -│ │ │ |
49 |
| -│ Content ├─────────────────────────┤ |
50 |
| -│ │ │ |
51 |
| -│ │ │ |
52 |
| -│ │ Preview & Boot Screen │ |
53 |
| -│ │ │ |
54 |
| -│ │ │ |
55 |
| -│ ├─────────────────────────┤ |
56 |
| -│ │ │ |
57 |
| -│ │ Terminal │ |
58 |
| -│ │ │ |
59 |
| -└───────────────────────────┴─────────────────────────┘ |
60 |
| -``` |
61 |
| - |
62 |
| -## Authoring Content |
| 34 | +## Templates |
63 | 35 |
|
64 |
| -A tutorial consists of parts, chapters, and lessons. For example: |
| 36 | +The default template (`src/templates/default`) contains the actual Node.js code to run a Rails application (`bin/rails`, `bin/rackup`, etc.) and configure PGLite databases. |
65 | 37 |
|
66 |
| -- Part 1: Basics of Vite |
67 |
| - - Chapter 1: Introduction |
68 |
| - - Lesson 1: Welcome! |
69 |
| - - Lesson 2: Why Ruby? |
70 |
| - - … |
71 |
| - - Chapter 2: Your first Vite project |
72 |
| -- Part 2: CLI |
73 |
| - - … |
| 38 | +Other templates contain the Rails app code. Templates support inheritance, so each Rails template only contains the new and changed files compared to the parent one (and the `rails-new` template is a starting point). |
74 | 39 |
|
75 |
| -Your content is organized into lessons, with chapters and parts providing a structure and defining common metadata for these lessons. |
76 |
| - |
77 |
| -Here’s an example of how it would look like in `src/content/tutorial`: |
78 |
| - |
79 |
| -```bash |
80 |
| -tutorial |
81 |
| -├── 1-basics-of-ruby |
82 |
| -│ ├── 1-introduction |
83 |
| -│ │ ├── 1-welcome |
84 |
| -│ │ │ ├── content.md # The content of your lesson |
85 |
| -│ │ │ ├── _files # Initial set of files |
86 |
| -│ │ │ │ └── ... |
87 |
| -│ │ │ └── _solution # Solution of the lesson |
88 |
| -│ │ │ └── ... |
89 |
| -│ │ ├── 2-why-ruby |
90 |
| -│ │ │ ├── content.md |
91 |
| -│ │ │ └── _files |
92 |
| -│ │ │ └── ... |
93 |
| -│ │ └── meta.md # Metadata for the chapter |
94 |
| -│ └── meta.md # Metadata for the part |
95 |
| -├── 2-advanced |
96 |
| -│ ├── ... |
97 |
| -│ └── meta.md |
98 |
| -└── meta.md # Metadata for the tutorial |
99 |
| -``` |
| 40 | +[ruby.wasm]: https://github.com/ruby/ruby.wasm |
| 41 | +[wasmify-rails]: https://github.com/palkan/wasmify-rails |
| 42 | +[PGlite]: https://pglite.dev/ |
| 43 | +[TutorialKit]: https://tutorialkit.dev |
0 commit comments