{"id":19572690,"url":"https://github.com/kbariotis/presentador","last_synced_at":"2025-04-27T04:32:26.953Z","repository":{"id":55619846,"uuid":"320075737","full_name":"kbariotis/presentador","owner":"kbariotis","description":"📽 An opinionated presentation framework. Just write what you want to present and it will do the rest.","archived":false,"fork":false,"pushed_at":"2020-12-20T20:35:38.000Z","size":5633,"stargazers_count":25,"open_issues_count":9,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-04-15T02:18:19.748Z","etag":null,"topics":["javascript","presentation","slides"],"latest_commit_sha":null,"homepage":"https://www.presentador.dev","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kbariotis.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-12-09T20:47:41.000Z","updated_at":"2021-05-10T15:39:46.000Z","dependencies_parsed_at":"2022-08-15T04:40:25.204Z","dependency_job_id":null,"html_url":"https://github.com/kbariotis/presentador","commit_stats":null,"previous_names":[],"tags_count":25,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kbariotis%2Fpresentador","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kbariotis%2Fpresentador/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kbariotis%2Fpresentador/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kbariotis%2Fpresentador/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kbariotis","download_url":"https://codeload.github.com/kbariotis/presentador/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224059180,"owners_count":17248753,"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":["javascript","presentation","slides"],"created_at":"2024-11-11T06:28:13.607Z","updated_at":"2024-11-11T06:28:14.795Z","avatar_url":"https://github.com/kbariotis.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\" style=\"border-bottom: none;\"\u003e📽 Presentador\u003c/h1\u003e\n\u003ch3 align=\"center\"\u003eAn opinionated presentation framework. Just write what you want to present and it will do the rest.\u003c/h3\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n![Workflow state](https://github.com/kbariotis/presentador/workflows/Release/badge.svg)\n![npm downloads](https://img.shields.io/npm/dw/presentador?label=npm%20downloads)\n![npm downloads](https://img.shields.io/npm/v/presentador?label=npm%20version)\n\n\u003c/div\u003e\n\n![Presentador Demo](./assets/demo.gif)\n\n## Description\n\nWith `Presentador`, you describe the content of each of your slides using Markdown and it will produce a beautiful presentation ready to be hosted anywhere you want. Don't worry about how they're going to look, just focus on your presentation.\n\nThere is only a single layout depending on the elements of your slide. `Presentador` parses the elements in each slide and assigns a certain pre-defined layout to it.\n\nSee it in action. [Presentadors' website](https://www.presentador.dev) is a presentation itself. 🙂\n\n## Installation\n\n### Quick start\n\nCreate a folder to put your slides. Create one file for each slide and give them a number which will be the order of that slide, e.g `1.md`, `2.md`...\n\nWrite common Markdown in each slide, add your headers, paragraphs, images, etc. See some examples in the [fixtures/](./fixtures) folder.\n\nThen run:\n\n`npx presentador develop -d FOLDER`\n\nA local server will start in development mode where you can start writing your presentation and changes will reflect immidiately in your browser.\n\nWhen you're done, run:\n\n`npx presentador build -d FOLDER`\n\nAnd that will produce a static site with your presentation ready to be hosted anywhere.\n\n### Install locally\n\n`npm install presentador`\n\nor\n\n`yarn add presentador`\n\nThen add it to your `package.json`s' `scripts` section:\n\n```JSON\n\"scripts\": {\n  \"build\": \"presentador build -d slides/\",\n  \"develop\": \"presentador develop -d slides/\",\n  \"serve\": \"presentador serve -d slides/\"\n}\n```\n\n## Usage\n\n### Commands\n\nThere are three commands currently:\n\n#### `\u003e build`\n\nTo build your presentation and output the final artifacts that you can host anywhere you want.\n\n#### `\u003e serve`\n\nTo serve your presentation from your own machine.\n\n#### `\u003e develop`\n\nTo develop locally your presentation.\n\n### Input\n\nIn all cases above, you need to pass a directory with a list of Markdown files.\n\n`\u003e presentador build -d slides/`\n\n## Contributing\n\nWe could use all the help we can get. So please feel free to go through our open [issues]('https://github.com/kbariotis/presentador/issues') or create one if thought of a new cool feature or found a bug.\n\n### Run locally\n\nRunning `Presentador` will be as easy as forking and cloning this repo, then running:\n\n`\u003e yarn`\n\n`\u003e yarn dev`\n\nThe local dev server will run against the [website](./website) folder which contains Presentadors' website. You can also the [fixtures](./fixtures) folder for more examples and testing.\n\nTo run the playground:\n\n`\u003e yarn playground`\n\n### Compilation\n\nThe process of compiling a presentation is actually quite simple. For each Markdown file you supply, `Presentador` will parse it and make a list of some specific elements.\n\nIf then that list matches one of the below, it will pass them to the appropriate renderer and the renderer will decide how to lay them out and render them. If it doesn't matches any, the [normal renderer](./src/renderers/normal.js) will kick in.\n\n| List                                 | State Name                | Renderer                                                                  |\n| ------------------------------------ | ------------------------- | ------------------------------------------------------------------------- |\n| Header                               | singleHeader              | [singleHeader](./src/renderers/singleHeader.js)                           |\n| Header,Header                        | twoHeaders                | [twoHeaders](./src/renderers/twoHeaders.js)                               |\n| Header,Paragraph                     | headerParagraph           | [headerParagraph](./src/renderers/headerParagraph.js)                     |\n| Header,Paragraph,Image               | headerParagraphImage      | [headerParagraphImage](./src/renderers/headerParagraphImage.js)           |\n| Header,Paragraph,Paragraph,...       | headerManyParagraphs      | [headerManyParagraphs](./src/renderers/headerManyParagraphs.js)           |\n| Header,Paragraph,Paragraph,...,Image | headerManyParagraphsImage | [headerManyParagraphsImage](./src/renderers/headerManyParagraphsImage.js) |\n| Header,List                          | headerList                | [headerList](./src/renderers/headerList.js)                               |\n| Header,Image                         | headerImage               | [headerImage](./src/renderers/headerImage.js)                             |\n| Blockquote                           | blockquote                | [blockquote](./src/renderers/blockquote.js)                               |\n| Image                                | image                     | [image](./src/renderers/image.js)                                         |\n| Image,Image,...                      | manyImages                | [manyImages](./src/renderers/manyImages.js)                               |\n| Header,Codeblock                     | headerCodeblock           | [headerCodeblock](./src/renderers/headerCodeblock.js)                     |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkbariotis%2Fpresentador","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkbariotis%2Fpresentador","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkbariotis%2Fpresentador/lists"}