{"id":24653756,"url":"https://github.com/code-star/codestar-marp","last_synced_at":"2025-03-21T00:42:33.501Z","repository":{"id":271528342,"uuid":"913372968","full_name":"code-star/codestar-marp","owner":"code-star","description":"Marp theme for Codestar slides","archived":false,"fork":false,"pushed_at":"2025-02-07T09:18:58.000Z","size":36533,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-02-07T09:28:29.234Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"SCSS","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/code-star.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":"2025-01-07T15:02:36.000Z","updated_at":"2025-02-07T09:19:01.000Z","dependencies_parsed_at":"2025-02-07T09:33:41.723Z","dependency_job_id":null,"html_url":"https://github.com/code-star/codestar-marp","commit_stats":null,"previous_names":["code-star/codestar-marp"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/code-star%2Fcodestar-marp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/code-star%2Fcodestar-marp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/code-star%2Fcodestar-marp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/code-star%2Fcodestar-marp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/code-star","download_url":"https://codeload.github.com/code-star/codestar-marp/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244717347,"owners_count":20498283,"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":"2025-01-25T21:13:56.618Z","updated_at":"2025-03-21T00:42:33.493Z","avatar_url":"https://github.com/code-star.png","language":"SCSS","readme":"# Codestar theme for Marp \u003cimg alt=\"GitHub Actions Workflow Status\" src=\"https://img.shields.io/github/actions/workflow/status/code-star/codestar-marp/build-and-deploy.yml\"\u003e\n\n\nTwo-in-one solution for building and [hosting](https://code-star.github.io/codestar-marp/) our slide decks.\n\n![](title.png)\n\n---\n\nContents:\n\n- [Features](#features)\n- [Usage](#usage)\n- [Editing guidelines](#editing-guidelines)\n- [Development](#development)\n\n---\n\n## Features\n\n- A new design using our new Codestar design language\n    - Rotating slide accent colors using the Codestar palette\n    - Title cards with brutalist-inspired pure CSS backgrounds\n- Syntax highlighting using the Codestar palette, with language labeling\n- Multi-column slides\n- Automatic builds and hosting\n- Slide decks listing\n\nQuick links:\n- [Check out the example slide deck here!](https://code-star.github.io/codestar-marp/example/)\n- [Listing of all slide decks](https://code-star.github.io/codestar-marp/)\n\n---\n\n## Usage\n\n- Requirements:\n    - If you want to write your Markdown in VS Code with a live preview: [Marp for VS Code](https://marketplace.visualstudio.com/items?itemName=marp-team.marp-vscode)\n    - Or, if you want to run a live preview server: `npm install -g @marp-team/marp-cli`\n\n- To get started, make a new directory for your slide deck and copy the example sldes (replace `deck-name` with the title of your presentation):\n\n    ```bash\n    mkdir decks/deck-name\n    cp example.md decks/deck-name/slides.md\n    ```\n\n    Extra resource files (for example images or videos) can go in that new folder as well.\n\n- Edit and preview your slides:\n\n    - VS Code: open this repository's folder, edit the new `slides.md` file, and in the top right corner of the editor, click the preview button (or \u003ckbd\u003e⌘ + K, V\u003c/kbd\u003e).\n\n    - `marp-cli`: from this repo's root, run `marp -s --theme theme/codestar.css .` to start a live server with a directory listing that you can navigate on http://localhost:8080.\n\n- Make a pull request and merge. GitHub actions will build the slides and serve them on our [decks listing hosted on GH pages](https://code-star.github.io/codestar-marp/).\n\n---\n\n## Editing guidelines\n\n### Metadata\n\n- Make sure to fill all the metadata in the front matter.\n- Metadata directives can be changed for a particular slide. For example, if you want a different footer on one slide, include this:\n\n    ```html\n    \u003c!-- _footer: This slide has a different footer! --\u003e\n    ```\n\n    If you want a slide without a footer or header, add:\n\n    ```html\n    \u003c!-- _header: '' --\u003e\n    \u003c!-- _footer: '' --\u003e\n    ```\n\n### Customization\n\n- Make sure to **update the QR code's link** by replacing `example/` with the name of your slide deck's directory.\n- If you prefer a dark theme, uncomment `class: invert` in the front matter.\n- Presenter notes can be added using regular HTML comments, and will be visible on each slide when using the presenter mode.\n\n\u003e [!TIP]\n\u003e To start presenter mode, move the mouse over the presentation and click the right button on the toolbar.\n\n- To make a slide with multiple columns, use a `\u003cdiv\u003e` with the `columns` class:\n\n    ```markdown\n    \u003cdiv class=\"columns\"\u003e\n    \u003cdiv\u003e\n\n    Column 1 markdown goes here\n\n    \u003c/div\u003e\u003cdiv\u003e\n\n    Column 2 markdown goes here\n\n    \u003c/div\u003e\n    ```\n\n\u003e [!NOTE]\n\u003e The number of columns is dynamic and unbounded. For an example, consult the example slides in `example.md`.\n\n- To embed a video, make a standalone slide with the following tag in it:\n\n    ```md\n    ---\n\n    \u003cvideo autoplay loop muted src=\"video.mp4\"\u003e\u003c/video\u003e\n\n    ---\n    ```\n\n\u003e [!NOTE]\n\u003e The `muted` attribute is necessary for the `autoplay` to work (otherwise browsers block it to avoid spam). If you need sound, use `\u003cvideo controls src=\"video.mp4\"\u003e`\n\n\u003e [!WARNING]\n\u003e Make sure to produce clips that are not too big in size. You can search online for `ffmpeg` compression tips. The options `-c:v libx264 -crf 23 -preset fast` should be a good starting point.\n\n\n### Other guidelines\n\n- Keep the `div` structure of the title card and the thank you slide intact.\n- Keep section title cards short, with at most a subtitle.\n- The casual tone of some slides can be changed to a more formal tone if preferred (for example, \"any questions?\" instead of \"questions time\").\n- For reference on other formatting options, slide layouts, slide backgrounds, etc., check out all the slides from `examples.md` (you can also watch that presentation [here](https://code-star.github.io/codestar-marp/example/)).\n\n### Quick reference links:\n\n- [Image syntax](https://marpit.marp.app/image-syntax)\n- [Transitions](https://github.com/marp-team/marp-cli/blob/main/docs/bespoke-transitions/README.md#built-in-transitions)\n- [Directives](https://marpit.marp.app/directives)\n- [Supported emoji codes](https://github.com/markdown-it/markdown-it-emoji/blob/master/lib/data/full.mjs)\n\n---\n\n## Development\n\nRequirements:\n\n- The watch script needs `fswatch` to monitor SCSS changes:\n\n    ```bash\n    brew install fswatch\n    ```\n\n- Sass is needed for building the styles:\n\n    ```bash\n    npm install -g sass\n    ```\n\n- And for building the actual slides:\n\n    ```bash\n    npm install -g @marp-team/marp-cli\n    ```\n\nYou can then run `./watch.sh` to watch for changes in any SCSS file to rebuild the main CSS file.\n\n\u003e [!NOTE]\n\u003e The output file `theme/codestar.css` is included in version control so that it can be hosted and used directly as a link to GitHub, but it is generated code and not meant for editing.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcode-star%2Fcodestar-marp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcode-star%2Fcodestar-marp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcode-star%2Fcodestar-marp/lists"}