https://github.com/icelam/code-playground
A simple template for documenting your JavaScript library which provides a live-ediitable code playground for users to test and play around
https://github.com/icelam/code-playground
alpine alpinejs documentation documentation-tool tailwind tailwind-css tailwindcss
Last synced: 5 months ago
JSON representation
A simple template for documenting your JavaScript library which provides a live-ediitable code playground for users to test and play around
- Host: GitHub
- URL: https://github.com/icelam/code-playground
- Owner: icelam
- Created: 2021-02-27T08:28:17.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-10-31T19:08:12.000Z (almost 2 years ago)
- Last Synced: 2025-02-17T06:41:29.561Z (8 months ago)
- Topics: alpine, alpinejs, documentation, documentation-tool, tailwind, tailwind-css, tailwindcss
- Language: JavaScript
- Homepage: https://icelam.github.io/code-playground
- Size: 223 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
Code Playground
A simple template for documenting your JavaScript library which provides a live-ediitable code playground for users to test and play around.
## Background
A handy way to document how to use a JavaScript library, while you don't want to include any fancy build tools in your codebase.
This projects is build in the simple way where the source code is ready to run in browser without compilation.
## Live Demo
You can try it out at:[https://icelam.github.io/code-playground](https://icelam.github.io/code-playground).
Note: In case you hit a 404 not found issue, it might be issue of service worker not up-to-date. Try to hard refresh the page, or visit the page using private window.
## Features
1. Editable and runnable code example, where code example is run using a semi-sandbox environment using `Function` constructor
2. Console Output on screen for environment where devtools is not available
## Technology
* CSS Framework: [Tailwind CSS](https://tailwindcss.com/)
* JavaScript Framework: [Apline.js](https://github.com/alpinejs/alpine)
## Browser Compatibility
* Tested on Legacy Microsoft Edge (Microsoft Edge 44.17763.831.0, Microsoft EdgeHTML 18.17763)
* Tested in iOS 13
## Folder Structure
```
└─┬─ /src
├── index.html
├── playground.js
└── data.js
```
* `index.js`: HTML source for code playground, entry point of everything
* `playground.js`: Scripts that make code playground interactive
* `data.js`: Configurable data such as title and section contents are defined here