{"id":22350288,"url":"https://github.com/planetoftheweb/slides_graphqlreact","last_synced_at":"2025-03-26T11:26:27.425Z","repository":{"id":147413617,"uuid":"331190255","full_name":"planetoftheweb/slides_graphqlreact","owner":"planetoftheweb","description":"This is a repository for my course Building GraphL Projects with React.","archived":false,"fork":false,"pushed_at":"2021-01-29T23:59:53.000Z","size":5096,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-31T12:49:02.091Z","etag":null,"topics":["functions","graphql","hooks","react","tutorial"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/planetoftheweb.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":"2021-01-20T04:15:56.000Z","updated_at":"2024-10-15T05:25:04.000Z","dependencies_parsed_at":null,"dependency_job_id":"35a3432e-2c63-45d9-b637-dfadcf2ca2df","html_url":"https://github.com/planetoftheweb/slides_graphqlreact","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":"planetoftheweb/slides_tailwind","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/planetoftheweb%2Fslides_graphqlreact","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/planetoftheweb%2Fslides_graphqlreact/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/planetoftheweb%2Fslides_graphqlreact/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/planetoftheweb%2Fslides_graphqlreact/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/planetoftheweb","download_url":"https://codeload.github.com/planetoftheweb/slides_graphqlreact/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245642964,"owners_count":20648951,"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":["functions","graphql","hooks","react","tutorial"],"created_at":"2024-12-04T11:11:06.036Z","updated_at":"2025-03-26T11:26:27.408Z","avatar_url":"https://github.com/planetoftheweb.png","language":"JavaScript","readme":"# RayVeal\n\nRayveal is an opinionated version of the awesome [reveal.js](https://revealjs.com/). The main difference an approach to creating slides that is [markdown focused](https://github.github.com/gfm/) with the ability to create multiple presentations in the same project.\n\nIt's designed so you can focus on writing, not on designing the presentation with many built in layouts, styles and colors.\n\nThis, plus the pre-installation of convenient plugins and libraries make it easier to create your presentations quickly using markdown. That helps me focus on writing and not on laying out presentations.\n\nYou can see the demo at [rayveal.tech](http://rayveal.tech).\n\n## Instructions\n\nInstead of creating HTML files, you simply create one or more `*.md` files in the `docs/slides` folder. A server is required in order to use RayVeal properly...since the markdown files have to be loaded dynamicaly, so upload the contents of the `build` folder to a server.\n\n## Installing Locally with NPM (optional)\n\nOptionally, you can just run the presentation locally (great when you can't guarantee a network connection), There's a live preview server provided.\n\n1. Grab/Fork from [repo](http://github.com/planetoftheweb/rayveal)\n1. `docs` folder has presentation\n1. `docs/slides/demo.md` subfolder has sample markdown\n1. `slides/index.json` has a list of presentations (optional)\n\n## Running locally\n\n1. Run `$ npm install` from your terminal\n1. Edit `docs/slides/demo.md` or add `*.md files`\n1. Run `$ npm start` from your terminal\n\n- Generates the `docs/slides/index.json` file (index)\n- Runs `gulpfile.js` process\n- Creates a live reload server\n\n## Pre-installed libraries\n\nPre-installed libraries let you easily add icons, animations and even emojis to your presentations. Here's the libraries that come with the default intallation.\n\n- [Font Awesome](https://fontawesome.com/?from=io)\n- [Animate.css](https://animate.style/)\n- [Tweetmoji Amazing](https://github.com/SebastianAigner/twemoji-amazing/)\n- [Lightweight Bootstrap](https://getbootstrap.com)\n\n### Lightweight Bootstrap\n\nA lightweight version of bootstrap, which you can customize for your own needs, lets you use things like buttons, table, cards, list-groups and form styles if you need them. You can customize what's included with an `npm run bootstrap-light` command\n\nIf you want to control what gets included in the `bootstrap-light.css` file, you can edit the `src/bootstrap-light/scss/bootstrap.scss` file.\n\n#### Disabled components\n\n**Disabled by default**: `grid`, `transitions`, `dropdown`, `nav`, `navbar`, `modal`, `tooltip`, `popover`, `carousel`.\n\n#### Colors\n\nThere is also a set of variables that you can customize `src/bootstrap-light/scss/_variables-bootstrap-light.scss`.\n\nIn addition to the traditional colors available in Bootstrap, there are two more theme colors: `royal` (purple) and `exciting` (pink), so you can use that in addition to the traditional: `primary`, `secondary`, `success`.\n\nThere are also a few more color css variables: `gray-lighter`, `gray-light`, `gray-dark`, `beige`, which you can use in your own CSS `var(--bs-gray-light);`\n\n## Additional plugins\n\nIn addition to the [built-in plugins](https://revealjs.com/plugins/#built-in-plugins) that come with [reveal.js](https://revealjs.com/), I added a few [other plugins](https://github.com/hakimel/reveal.js/wiki/Plugins,-Tools-and-Hardware) to handle a couple of additional features:\n\n- [Chart](https://rajgoel.github.io/reveal.js-demos/chart-demo.html#/)\n- [Menu](https://denehyg.github.io/reveal.js-menu/#/home)\n\n## Persistent toolbar\n\nOne of the problems I often have when doing presentation is making sure that people have the URL to the presentation as well as contact and other important information. So, I created a persistent toolbar at the bottom of every slide.\n\n````html\n\u003c!-- ADD PERSISTENT NAVBAR CODE HERE --\u003e\n\u003cfooter class=\"footer fadein\"\u003e\n  \u003cdiv class=\"persistent\"\u003eYOUR CODE HERE\u003c/div\u003e\n\u003c/footer\u003e\n\u003c!-- ADD PERSISTENT NAVBAR CODE HERE --\u003e```\n````\n\nIt auto-hides after 5 seconds, but you can bring it back by using the `t` key. You can find a sample of it in the index.html file and put your own HTML there. You can also just remove it\n\n## Fragments by default\n\nOne of the key ways in which RayVeal differs from reveal is in the way it handles fragments. I don't like to show a lot of text in my presentations, but write short bullet points that I want people to consume one at a time. Therefore, fragments are on by default, just write your normal bullet points and they will show one at a time.\n\nBy default the fragment class is added to all list items, paragraphs, code, embeds, iframes, tables and the canvas element.\n\nYou can also turn that off on a slide by slide basis by adding a `data-state` property to a slide comment.\n\n\u0026lt;!-- .slide: data-state=\"no-fragment\" --\u0026gt;\n\n## contenteditable code\n\nWhen you write code blocks by either using the \u003ccode\u003e\u0026grave;\u003c/code\u003e character or \u003ccode\u003e\u0026grave;\u0026grave;\u0026grave;\u003c/code\u003e codeblocks, Rayveal makes those automatically have the `contenteditable` attribute. I demo a lot of code, so it's nice to be able to edit my codeblocks or even anything with the code tag.\n\nI'm also a developer, so since Reveal.js added line numbers, it's also available to you. You can even highlight and animate line numbers. To activate it, just include an array.\n\n## Code options\n\nI created some additional styles that are not in bootstrap.\n\n### Colored code blocks\n\nYou can use `code` blocks with different colors. The default color is gray, but you can use custom bootstrap like colors including the additional two colors\n\n```html\n\u003ccode class=\"code-primary\"\u003eprimary\u003c/code\u003e\n\u003ccode class=\"code-success\"\u003esuccess\u003c/code\u003e\n\u003ccode class=\"code-info\"\u003einfo\u003c/code\u003e\n\u003ccode class=\"code-warning\"\u003ewarning\u003c/code\u003e\n\u003ccode class=\"code-danger\"\u003edanger\u003c/code\u003e\n\u003ccode class=\"code-royal\"\u003eroyal\u003c/code\u003e\n\u003ccode class=\"code-exciting\"\u003eexciting\u003c/code\u003e\n```\n\n### Tooltips\n\nI'm not importing the Bootstrap JavaScript or the Bootstrap Grid, so I created my own way of doing a simple tooltip using CSS.\n\n```html\n\u003ca class=\"tooltip\" href=\"#\"\u003e`tooltips`\u003cspan\u003eFor overlay explanations\u003c/span\u003e\u003c/a\u003e\non rollover\n```\n\n### Code Sample Lists\n\nThere's also a style that I need for some of my own coursework, which lets you create lists with code samples that change color in each line. Here's the code:\n\n```md\n- `sample`\n  - NUM: `one` `two` `three`\n  - NUM: `four` `five` `six`\n  - NUM: `seven` `eight` `nine`\n  - NUM: `ten` `eleven` `twelve`\n  - NUM: `thirteen` `fourteen` `fifteen`\n```\n\nBut it's better if you look at these in the [demo](docs/slides/)\n\n## Slide Templates\n\nIt lets you add style tags, classes and data attributes in comments, so I used these to create different slide templates. There are three right now.\n\n### Title Slide\n\n`\u003c!-- .slide: data-state=\"layout-title\" --\u003e`\n\nThis is the title slide that appears at the beginning of the [demo](https://rayveal.tech). You can also add a `style` or a `class` property and it will appear on the slides, so you can easily add bootstrap background colors.\n\nHere are some of the other layouts: `layout-has-icon`, `layout-circles`, `layout-background-image`, `layout-mostly-image`, `layout-background-video`, `layout-quote`, `layout-code-list`,\n\n## More\n\nTake a look at the [demo](https://rayveal.tech) for more examples, I'm really excited about some of the stuff you can do with Bootstrap's card and list-group components. I'd love to add more components and other layouts in the future.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fplanetoftheweb%2Fslides_graphqlreact","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fplanetoftheweb%2Fslides_graphqlreact","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fplanetoftheweb%2Fslides_graphqlreact/lists"}