{"id":20083637,"url":"https://github.com/albert26193/web-learning-playground","last_synced_at":"2025-05-06T01:31:25.046Z","repository":{"id":224503852,"uuid":"726563387","full_name":"Albert26193/web-learning-playground","owner":"Albert26193","description":"A demo environment that integrates multiple mainstream front-end frameworks, making it easy to learn multiple frameworks in one environment.","archived":false,"fork":false,"pushed_at":"2024-05-06T05:59:16.000Z","size":135,"stargazers_count":10,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-09T06:35:01.532Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"Astro","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Albert26193.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2023-12-02T18:26:27.000Z","updated_at":"2024-05-08T03:53:20.000Z","dependencies_parsed_at":"2024-05-06T06:43:42.179Z","dependency_job_id":null,"html_url":"https://github.com/Albert26193/web-learning-playground","commit_stats":null,"previous_names":["albert26193/web-learning-playground"],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Albert26193%2Fweb-learning-playground","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Albert26193%2Fweb-learning-playground/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Albert26193%2Fweb-learning-playground/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Albert26193%2Fweb-learning-playground/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Albert26193","download_url":"https://codeload.github.com/Albert26193/web-learning-playground/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252604279,"owners_count":21775077,"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-13T15:48:09.541Z","updated_at":"2025-05-06T01:31:24.768Z","avatar_url":"https://github.com/Albert26193.png","language":"Astro","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Web-Learning-Playground\n\n## Intro\n\n- A demo environment that integrates multiple mainstream front-end frameworks, making it easy to learn multiple frameworks in one environment. 🍺️\n- Based on [Astro](https://astro.build/), a new static site builder that combines the best parts of modern build tools and frameworks.\n- Integrated with [TailwindCSS](https://tailwindcss.com/) FrameWork with TailwindCSS Framework to Reduce the difficulty of writing styles.\n- Use [Prettier](https://prettier.io/) to lint code style.\n\n## Preview\n\n- OverView:\n\n![overview](https://img-20221128.oss-cn-shanghai.aliyuncs.com/img-2023-05/202402261715369.png)\n\n- React Preview:\n\n![react](https://img-20221128.oss-cn-shanghai.aliyuncs.com/img-2023-05/202402261717728.png)\n\n## Get Start\n\n```sh\n# 0. clone this repo\ngit clone https://github.com/Albert26193/web-learning-playground.git\n\n# 1. install dependencies\npnpm install\n\n# 2. start dev server\npnpm dev\n```\n\n## Project Structure\n\nInside of this project, you'll see the following folders and files: 🚀\n\n```text\n/\n├── public/\n│   └── favicon.svg\n├── src/\n│   ├── .../\n│   │   └── ....astro\n│   └── pages/\n│       └── index.astro\n└── package.json\n```\n\n- The learning content is centrally located in the `/src/pages` directory, which is a crucial directory.\n- Astro looks for `.astro` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.\n- Any static assets, like images, can be placed in the `public/` directory.\n\n---\n\n- `/src/pages` structure:\n\n```text\n# /src/pages\n.\n├── index.astro\n├── React\n│   ├── Demo\n│   ├── Game\n│   └── Router.astro   # React Router\n├── Vanilla\n│   ├── Demo\n│   └── Router.astro  # Vanilla Router\n└── Vue\n    ├── Demo\n    ├── TestSlot\n    └── Router.astro     # Vue Router\n```\n\n## Usage\n\n- For example, I want to create a React learning demo, which named `demo`.\n- **step1:** add a new dir named `Demo` in `/src/pages/React/`.\n- **step2:** add a new file named `[your file name].tsx` in `/src/pages/React/Demo/` (the `tsx` is the file extension of React), then write your React code in `[your file name].tsx`.\n- **step3:** add a new Astro file Named `index.astro`, which offers a route. The content of `index.astro` is as follows:\n\n```tsx\n---\nimport { DemoReact } from '[your file name]';\nimport LayoutReact from '../../../layouts/LayoutReact.astro';\n---\n\n\u003cLayoutReact title=\"react demo\" framework=\"React\"\u003e\n  \u003cDemoReact client:load /\u003e\n\u003c/LayoutReact\u003e\n```\n\n---\n\n- after that, your file structure should be like this:\n\n```text\n# /src/pages/React\n├── Demo\n│   ├── index.astro\n│   └── [your file name].tsx\n├── ...\n└── Router.astro\n```\n\n## Commands\n\nAll commands are run from the root of the project, from a terminal:\n\n| Command           | Action                                       |\n| :---------------- | :------------------------------------------- |\n| `npm install`     | Installs dependencies                        |\n| `npm run dev`     | Starts local dev server at `localhost:4321`  |\n| `npm run build`   | Build your production site to `./dist/`      |\n| `npm run preview` | Preview your build locally, before deploying |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falbert26193%2Fweb-learning-playground","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falbert26193%2Fweb-learning-playground","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falbert26193%2Fweb-learning-playground/lists"}