|
1 |
| -# Nuxt Tutorial Playground |
| 1 | +# Nuxt Tutorial Playground (ja) |
2 | 2 |
|
3 |
| -> [!WARNING] |
4 |
| -> The architecture of this project is ready, while the tutorial content is still work in progress, contributions appreciated! |
| 3 | +This repository is a clone of https://github.com/nuxt/learn.nuxt.com and is a Japanese version project.\ |
| 4 | +Some of the content will be created in Japanese before the original.\ |
| 5 | +We have received permission from [@antfu](https://github.com/antfu).\ |
| 6 | +Special thanks to [@antfu](https://github.com/antfu) 💚 |
5 | 7 |
|
6 |
| -An interactive interactive tutorial and playground for learning Nuxt. Powered by [Nuxt](https://nuxt.com/docs) and [WebContainers](https://webcontainers.io/). |
7 |
| - |
8 |
| -Inspired by [learn.svelte.dev](https://learn.svelte.dev). |
9 |
| - |
10 |
| -`learn.nuxt.com` is not yet deployed, but you can preview the latest branch at [learn-dev.nuxt.com](https://learn-dev.nuxt.com). |
11 |
| - |
12 |
| -## Live Streaming |
13 |
| - |
14 |
| -Anthony Fu built this project from scratch on Live Streaming. You can watch the recordings of the full process on [YouTube](https://www.youtube.com/playlist?list=PL4ETc_mXFfxUGiY852jH3ctljnI2e9Rax). |
15 |
| - |
16 |
| -## Contributing |
17 |
| - |
18 |
| -### Development |
19 |
| - |
20 |
| -To run this project locally, you need to have [Node.js v20.0+](https://nodejs.org/en/) and [pnpm](https://pnpm.io/) installed. |
21 |
| - |
22 |
| -After cloning the repo, run the following commands to install dependencies: |
23 |
| - |
24 |
| -```bash |
25 |
| -pnpm install |
26 |
| -``` |
27 |
| - |
28 |
| -Then, run the following command to start the development server: |
29 |
| - |
30 |
| -```bash |
31 |
| -pnpm dev |
32 |
| -``` |
33 |
| - |
34 |
| -The development server will be running at [http://localhost:3000](http://localhost:3000). |
35 |
| - |
36 |
| -### Content Structure |
37 |
| - |
38 |
| -The tutorial content is located in the `content/` directory. Each route contains a number prefix (`1.`) to indicate the order and will be removed in the final URL. For each route, we use a folder with an `index.md` to serve the extra files. A `.template` folder can be placed with the `index.md` file to provide the template for the playground. |
39 |
| - |
40 |
| -- `.template/index.ts` - Indicates the metadata for that guide, like enabling/disabling features, file filters, etc. |
41 |
| -- `.template/files/**` - The files that will be copied to the playground when the user navigates to that guide, merged with the basic template under `template/basic/` |
42 |
| -- `.template/solutions/**` - Optional solutions for the tasks in that guide, merged with the guide files. |
43 |
| - |
44 |
| -## Todolist |
45 |
| - |
46 |
| -- [ ] Content |
47 |
| - - [ ] Allow each guide to configure file filter |
48 |
| - - [ ] Persist user changes when toggling solutions |
49 |
| - - [ ] Verification for tutorial tasks |
50 |
| - - [x] Search feature |
51 |
| - - [x] Search in command palette |
52 |
| - - [x] Search button |
53 |
| - - [x] Navigation |
54 |
| - - [x] Dropdown for guide outlines |
55 |
| - - [x] Breadcrumbs |
56 |
| - - [x] Previous/Next buttons |
57 |
| - - [x] Embedded Nuxt Docs (update CORS headers) |
58 |
| - - [x] Only make necessary changes when navigating between guides |
59 |
| - - [x] Switch playgrounds on different guides |
60 |
| - - [x] Allow each guide to toggle features |
61 |
| - - [x] Solution for each guide |
62 |
| - - [x] A button of "Edit this page" |
63 |
| -- [x] SEO |
64 |
| - - [x] OG Image |
65 |
| - - [x] Meta tags |
66 |
| - - [x] Sitemap |
67 |
| -- [x] Command K System |
68 |
| -- [ ] About Page |
69 |
| -- [ ] Welcome Screen |
70 |
| -- [ ] Try https://ark-ui.com/docs/components/splitter |
71 |
| -- [x] Show release time for the playground |
72 |
| -- [x] Show Nuxt and Vue versions from the container |
73 |
| -- [x] Custom bundler for templates (replaces `import.meta.glob`, create static virtual modules) |
74 |
| -- [x] Monaco editor and Volar |
75 |
| - - [x] Connection Volar to the WebContainer FS |
76 |
| -- [x] File tree |
77 |
| -- [x] [Add interactivity shell](https://webcontainers.io/tutorial/7-add-interactivity) |
78 |
| -- [x] A basic editor |
79 |
| -- [x] Refactor logic from Vue SFC to composables |
80 |
| -- [x] Refactor to add Pinia |
81 |
| -- [x] Frame-to-parent communication |
82 |
| -- [x] Sync the basic style |
83 |
| -- [x] Buttons to restart server |
84 |
| -- [x] Open/close terminal panel |
85 |
| -- [x] Extract "playground injected" utils |
86 |
| -- [x] Download the project as zip |
87 |
| - |
88 |
| -## License |
89 |
| - |
90 |
| -[MIT](./LICENSE) |
0 commit comments