https://github.com/zackakil/dynamic-code-snippit
Experiment with what i would want from a code document experience.
https://github.com/zackakil/dynamic-code-snippit
code-documentation ux vue web-development
Last synced: 10 months ago
JSON representation
Experiment with what i would want from a code document experience.
- Host: GitHub
- URL: https://github.com/zackakil/dynamic-code-snippit
- Owner: ZackAkil
- Created: 2025-02-21T15:51:55.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2025-02-21T16:04:04.000Z (10 months ago)
- Last Synced: 2025-03-01T08:02:33.019Z (10 months ago)
- Topics: code-documentation, ux, vue, web-development
- Language: HTML
- Homepage: https://zackakil.github.io/dynamic-code-snippit/
- Size: 216 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Dynamic Code Snippet Demo ([live demo](https://zackakil.github.io/dynamic-code-snippit/))
This project demonstrates a dynamic code snippet generator using Vue.js. The core idea is to show how you can build a UI that lets users select features, and then dynamically generate code based on those selections.
## Key Features
* **Feature Selection:** A list of checkboxes allows users to enable or disable different features.
* **Dynamic Code Generation:** The code snippet updates in real-time based on the selected features. Lines of code are included or excluded depending on which features are active.
* **Code Highlighting:** Hovering over a feature in the list highlights the corresponding code sections, providing a clear visual connection between features and their implementation.
## How it Works
The demo uses a `codeTemplate` object in `dynamicCode.js` to define the code snippet. Each line of code is associated with a set of features. When a feature is enabled, any code lines associated with that feature are included in the generated snippet.
The `shownLines` computed property in the Vue instance filters the `codeTemplate.lines` array based on the currently enabled features. This ensures that only the relevant code is displayed.
## Use Cases
This approach can be useful in a variety of situations, such as:
* **Generating configuration files:** Allowing users to select options and generate a configuration file with the appropriate settings.
* **Creating API request code:** Building code snippets for different API endpoints and parameters.
* **Simplifying complex code:** Providing a way for users to choose which parts of a large codebase they need, and then generating a simplified version.