|
| 1 | +# iframe-snippet-generator-template |
| 2 | + |
| 3 | +A Node.js tool and **template repository** for generating syntax-highlighted HTML code snippets for use in RISE modules. |
| 4 | + |
| 5 | +## Getting Started |
| 6 | + |
| 7 | +This repository is a **template**. Please ignore if you have already completed this setup. |
| 8 | +To use it for your own course: |
| 9 | + |
| 10 | +1. **Click "Use this template"** on the GitHub page to create your own repository from this template. |
| 11 | +2. **Clone your new repository** to your local machine. |
| 12 | +3. **Create a `.env` file** in the root of your project with the following contents: |
| 13 | + ``` |
| 14 | + GH_ORG= |
| 15 | + GH_REPOSITORY= |
| 16 | + ``` |
| 17 | + Replace these values with the **organization** and **repository name** of the template you create. |
| 18 | +4. **Follow the instructions below** to add your code snippets and build your site. |
| 19 | + |
| 20 | +## How It Works |
| 21 | + |
| 22 | +- Place formatted code files in `src/snippets/` (group by language). |
| 23 | +- On build each file is converted to a standalone, syntax-highlighted (based on language) HTML snippet using Handlebars and [Highlight.js](https://highlightjs.org/). |
| 24 | +- On build output is written to the `public/` directory, including an `index.html` and an `iframes.html` with ready-to-copy iframe tags. |
| 25 | + |
| 26 | +## Contributing Snippets |
| 27 | + |
| 28 | +_Do not delete existing snippets unless 100% sure as they are used in live modules._ |
| 29 | + |
| 30 | +1. **Create a branch** for your snippets. |
| 31 | +2. **Add your code snippets** to `src/snippets/` (create a subfolder for your language if not already present). |
| 32 | + |
| 33 | +- To view locally run `npm build` to generate `public`. |
| 34 | + |
| 35 | +3. **Open a Pull Request** to `main`. |
| 36 | + |
| 37 | +On merge, a **GitHub Action** will: |
| 38 | + |
| 39 | +- Build the HTML output. |
| 40 | +- Deploy the `public/` directory to the `gh-pages` branch. |
| 41 | + |
| 42 | +Your snippets will then be available online for embedding in RISE modules. |
| 43 | + |
| 44 | +## Project Structure |
| 45 | + |
| 46 | +``` |
| 47 | +src/ |
| 48 | + module-projects # Store Specific Projects Related to Modules |
| 49 | + snippets/ # Add your code files here |
| 50 | + templates/ # Handlebars templates |
| 51 | + utils/ # Build utilities |
| 52 | + index.js # Main script for processing snippets |
| 53 | +public/ # Generated HTML output (auto-deployed) |
| 54 | +``` |
| 55 | + |
| 56 | +## Local Development |
| 57 | + |
| 58 | +```sh |
| 59 | +npm install |
| 60 | +npm run build |
| 61 | +``` |
| 62 | + |
| 63 | +## Testing |
| 64 | + |
| 65 | +This project uses Vitest (https://vitest.dev/) for testing. To run tests: |
| 66 | + |
| 67 | +```sh |
| 68 | +npm test |
| 69 | +``` |
| 70 | + |
| 71 | +--- |
0 commit comments