{"id":16635809,"url":"https://github.com/ythecombinator/xzibit","last_synced_at":"2025-10-30T06:30:54.622Z","repository":{"id":36215963,"uuid":"40520242","full_name":"ythecombinator/xzibit","owner":"ythecombinator","description":"Create presentations using cool kids' technologies.","archived":true,"fork":false,"pushed_at":"2015-09-29T23:35:43.000Z","size":2708,"stargazers_count":1,"open_issues_count":3,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-01-18T10:28:38.693Z","etag":null,"topics":["gulp","jade","reveal-js","stylus"],"latest_commit_sha":null,"homepage":"https://ythecombinator.github.io/xzibit","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ythecombinator.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-08-11T03:53:01.000Z","updated_at":"2024-02-25T18:37:19.000Z","dependencies_parsed_at":"2022-09-04T04:40:48.927Z","dependency_job_id":null,"html_url":"https://github.com/ythecombinator/xzibit","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ythecombinator%2Fxzibit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ythecombinator%2Fxzibit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ythecombinator%2Fxzibit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ythecombinator%2Fxzibit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ythecombinator","download_url":"https://codeload.github.com/ythecombinator/xzibit/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238937497,"owners_count":19555376,"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":["gulp","jade","reveal-js","stylus"],"created_at":"2024-10-12T06:04:54.216Z","updated_at":"2025-10-30T06:30:49.292Z","avatar_url":"https://github.com/ythecombinator.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[ ![Codeship Status for mabrasil/xzibit](https://codeship.com/projects/864df420-22a8-0133-e840-3a07b3152e0a/status?branch=master)](https://codeship.com/projects/96247)\n[![Build Status](https://travis-ci.org/mabrasil/xzibit.svg?branch=master)](https://travis-ci.org/mabrasil/xzibit)\n[![Code Climate](https://codeclimate.com/github/mabrasil/xzibit/badges/gpa.svg)](https://codeclimate.com/github/mabrasil/xzibit)\n[![Dependency Status](https://david-dm.org/mabrasil/xzibit.png)](https://david-dm.org/mabrasil/xzibit)\n[![devDependency Status](https://david-dm.org/mabrasil/xzibit/dev-status.svg)](https://david-dm.org/mabrasil/xzibit#info=devDependencies)\n\n# Create presentations using cool kids' technologies.\n\n\u003cimg alt=\"Create presentations using cool kids' technologies.\" src=\"src/images/logo.png\" width=\"500px\"\u003e\n\n\u003e Easily create modern presentations using Reveal.JS, Gulp, Jade, Stylus and more.\n\n##Table of Contents\n\n- [What's inside?](#whats-inside)\n- [Using](#using)\n  - [Getting Started](#getting-started)\n  - [Next Steps](#next-steps)\n    - [Setup the project's basic info](setup-the-projects-basic-info)\n    - [Write your slides](#write-your-slides)\n    - [Understand the Folders and Files structure](#understand-the-folders-and-files-structure)\n    - [Understand the Gulp Tasks](#understand-the-gulp-tasks)\n- [Contributing](#contributing)\n- [License](#license)\n- [Credits](#credits)\n\n## What's inside?\n\nThis boilerplate includes:\n\n### Reveal.js\n\n[Reveal](https://github.com/hakimel/reveal.js/) is an amazing framework for easily creating beautiful presentations using HTML. This boilerplate also comes with the following plugins for Reveal:\n\n|    Command      |                 Description                  |\n|-----------------|----------------------------------------------|\n| *Highlight.js*  | Syntax highlighting                          |\n| *Speaker Notes* | Per-slide notes in a separate browser window |\n| *Chartist.js*   | Responsive charting library                  |\n| *Math.js*       | Rendering of math equations inside           |\n| *Print-PDF*     | Allows presentations to be exported to PDF   |\n| *vivus.js*      | Allows you to animate SVGs                   |\n| *zoom.js*       | Zoom in and out with `Alt+click`             |\n\n### Jade\n\nThe  [Jade Engine](http://jade-lang.com/)  is one of the most powerful templating engines we have nowadays and its use is intended to make the app templates' code more beautiful and *easier to maintain*. It also aims to solve some problems such as missing or mal-matched closing tags.\n\n### Stylus\n\n[Stylus](https://learnboost.github.io/stylus/) has everything that modern *CSS preprocessors* should have: *variables*,\n*mixins*, *nesting*, *extending* and many other cool things. And it's writen in Javascript and runs in *NodeJS*.\n\n### Gulp\n\n*Stream-based build system*, *code over configuration*, *idiomatic Node modules*, a *simple and elegant API*...\nThere are many reasons why [Gulp](http://gulpjs.com/) can be a good bet on task runners.\n\nHere we have many cool plugins like `Browser Sync` - which allows you to sync all your devices and even make\nlivereloading -, `Jade`, `Stylus`, `Imagemin` and many other good ones.\n\nIn this project, we also prevent your `gulpfile.js` from growing too large by splitting it into multiple files,\nwith one task per file. You can check out the [tasks directory](gulp/tasks) to see how it works.\n\n## Using\n\n### Getting Started\n\n1. Make sure you have the main dependencies to run this boilerplate:\n\n  - [NodeJS](http://nodejs.org/)\n  - [Bower](http://bower.io/)\n  - [GulpJS](http://gulpjs.com/)\n\n2. Clone this repository:\n\n  ```sh\n  $ git clone https://github.com/mabrasil/xzibit.git my_talk\n  ```\n\n3. Install **all required dependencies**:\n\n  ```sh\n  $ cd my_talk\n  $ npm install\n  $ bower install\n  ```\n\n4. Run the default gulp task:\n\n  ```sh\n  $ gulp\n  ```\n\n### Next Steps\n\n#### Setup the project's basic info\n\nSome of basic metadata from your slides will be rendered from a [`config.json`](/src/config.json) file. This is done to make it easier\nto change some general data - like the presentation *name* or *descrption*. The `config.json` initial structure is:\n\n```json\n{\n  \"about\": {\n    \"title\": \"My Awesome Presentation\",\n    \"description\": \"My Awesome Presentation @ an Awesome Event\",\n    \"author\": \"An Awesome Speaker\",\n    \"site\": {\n        \"url\": \"https://github.com/mabrasil/xzibit\",\n        \"googleAnalytics\": \"\",\n        \"cover\": \"images/meta/screenshot.png\",\n        \"favicon\": \"images/meta/favicon.png\"\n    }\n  },\n  \"deploy\":{\n    \"rsync\":{\n      \"username\":\"\",\n      \"hostname\": \"\",\n      \"dest\": \"\"\n    },\n    \"github\":{\n      \"remoteUrl\": \"\",\n      \"branch\": \"\",\n      \"message\": \"Deployed to Github Pages at [timestamp]\"\n    }\n  }\n}\n```\n\nThese are the data given by `config.json`:\n\n##### About\n\n- `title`:\n\n  **Type**: `string`\n\n  **Equivalent**: `\u003ctitle\u003e\u003c/title\u003e`\n\n- `description`:\n\n  **Type**: `string\n\n  **Equivalent**: `\u003cmeta name=\"description\" content=\"\"\u003e`\n\n- `author`:\n\n  **Type**: `string`\n\n  **Equivalent**: `\u003cmeta name=\"author\" content=\"\"\u003e`\n\n###### Site\n\n- `url`:\n\n  **Type**: `string`\n\n  **Description**: The *URL* of your presentation.\n\n- `googleAnalytics`:\n\n  **Type**: `string`\n\n  **Description**: Your *Google Analytics ID*.\n\n- `cover`:\n\n  **Type**: `string`\n\n  **Equivalent**:\n\n    - `\u003cmeta property=\"og:image\" content=\"\"\u003e`\n    - `\u003cmeta property=\"twitter:image:src\" content=\"\"\u003e`\n    - `\u003cmeta itemprop=\"image\" content=\"\"\u003e`\n\n- `favicon`:\n\n  **Type**: `string`\n\n  **Description**: The *favicon* of your slides.\n\n##### Deploy\n\n###### Rsync\n\n- `username`:\n\n  **Type**: `string`\n\n  **Description**: Your username at the remote server.\n\n- `hostname`:\n\n  **Type**: `string`\n\n  **Description**: Your server domain (URL).\n\n- `dest`:\n\n  **Type**: `string`\n\n  **Description**: Path on the server that will receive the files.\n\n###### Github Pages\n\n- `remoteUrl`:\n\n  **Type**: `string`\n\n  **Description**: URL for the remote of your repo.\n\n- `branch`:\n\n  **Type**: `string`\n\n  **Description**: The branch where deploy will by done.\n\n- `message`:\n\n  **Type**: `string`\n\n  **Description**: The desired commit message.\n\n\u003e You can also add to your `config.json` all the options supported by [gulp-gh-pages](https://www.npmjs.com/package/gulp-gh-pages).\n\n#### Write your slides\n\n- Each new **slide** (horizontally navigated) is a new `.jade` file in which we work on - and after add in `src/templates/index.jade` making the includes in the order of presentation.\n\n  \u003e Your `index.jade` must be something like this:\n\n    ```jade\n    doctype html\n    html\n      include layouts/head\n      body\n        .reveal\n          .slides\n\n            include ../slides/slide-1\n            include ../slides/slide-2\n            // And so on\n\n        include layouts/scripts\n    ```\n\n- Each new **vertical slide** (vertically navigated, inside a **slide**) is a `section.sec-slide` within the `section` in the slide that you're working in.\n\n  \u003e Inside a slide, you can add a **vertical slide** by doing this:\n\n    ```jade\n    section\n\n      // Slide 1\n      section.sec-slide\n\n        h1.white.upper Slide 1 Content\n\n      // Slide 2\n      section.sec-slide\n\n        h1.white.upper Slide 2 Content\n    ```\n\n- Each new **fragment** (that makes elements appear as you navigate inside the slide - giving more interactivity) you have to add `.fragment` in the element.\n\n  \u003e Ex.: If you want a list, but you don't want it to be displayed at once, but as you navigate in the slide, then you do:\n\n    ```jade\n    ul\n        li.fragment Item 1\n        li.fragment Item 2\n        li.fragment Item 3\n    ```\n\n#### Understand the Folders and Files structure\n\nIf everything from the [Getting Started](#getting-started) section goes well, you should have this:\n\n```\n|-- gulp/\n|-- src/\n|   |-- images/\n|   |-- scripts/\n|   |-- slides/\n|   |-- styles/\n|   |-- templates/\n|   |-- videos/\n|   |-- config.json\n|-- out/\n|   |-- styles/\n|       |-- main.css\n|   |-- images/\n|   |-- scripts/\n|       |-- main.js\n|   |-- index.html\n|-- .editorconfig\n|-- .stylintrc\n|-- gulpfile.js\n|-- package.json\n```\n\nNow let's find out what each one of those files and folders mean.\n\nP.S.: Some very commom files - or less important - are shown here, such as the `.md` ones - *README*, *LICENSE* *CONTRIBUTING* -, the CIs tracking files like `.codeclimate.yml` or `.travis.yml` and others.\n\n##### [`gulp/`](/gulp/)\n\nContains the module with all the *gulp tasks*.\n\n##### [`src/images/`](/src/images/)\n\nContains the *images* that will be used in your presentation.\n\n##### [`src/scripts/`](/src/scripts/)\n\nContains the *scripts* that will be used in your presentation.\n\n##### [`src/slides/`](/src/slides/)\n\nContains each *slide* - written in *Jade* - of your presentation.\n\n##### [`src/styles/`](/src/styles/)\n\nContains the *styles* - written in *Stylus* - that will be used in your presentation.\n\n##### [`src/templates/`](/src/templates/)\n\nContains the *tamplates* - written in *Jade* - that will be used in your presentation.\n\n##### [`src/config.json`](/src/config.json)\n\nContains some of basic info from your presentation that will be rendered in the templates.\n\n##### out/\n\nThis is where the generated files are stored, once the tasks are finished. However, this directory is unnecessary in versioning, so it's [ignored](.gitignore).\n\n##### [`gulpfile.js`](gulpfile.js)\n\nCalls the gulp tasks.\n\n##### [`package.json`](package.json)\n\nContains many metadata relevant to the project.\n\n#### Understand the Gulp Tasks\n\nAll the Gulp tasks are in the [`tasks/`](gulp/tasks) folder. Each one consists of a module with a function which is required into tasks defined in the [`gulpfile`](https://github.com/mabrasil/xzibit/blob/master/gulpfile.js).\n\n|     Command         |                Description                |\n|---------------------|-------------------------------------------|\n| `gulp`              | Initialize watch for changes and a server |\n| `gulp jade`         | Compile Jade files                        |\n| `gulp stylus`       | Compile Stylus files                      |\n| `gulp img-clean`    | Clean the images folder                   |\n| `gulp img-minify`   | Compress image files                      |\n| `gulp watch`        | Call to watch files                       |\n| `gulp deploy-rsync` | Deploy via rsync                          |\n| `gulp deploy-gh   ` | Deploy to Github Pages                    |\n| `gulp build`        | Minify files and deploy via both          |\n\nIf everything happens okay, you must see something like this:\n\n![Screenshot](/src/images/meta/cover.png)\n\n## Contributing\n\n### Versioning\n\nIt is intended to maintain this project under the [Semantic Versioning] (http://semver.org/) guidelines. Releases will\nbe numbered with the following format:\n\n`\u003cmajor\u003e.\u003cminor\u003e.\u003cpatch\u003e`\n\n### Reporting a bug\n\n1. Look for any related issues [here](https://github.com/mabrasil/xzibit/issues).\n2. If you find an issue that seems related, please comment there instead of creating a new issue. If it is determined to be a unique bug, we will let you know that a new issue can be created.\n3. If you find no related issue, create a new issue by clicking [here](https://github.com/mabrasil/xzibit/issues/new).\nIf we find an issue that's related, we will reference it and close your issue, showing you where to follow the bug.\n4. Tell us important details like what operating system you are using.\n5. Include any errors that may be displayed (see [Chrome Console instructions](https://developer.chrome.com/devtools/docs/console#opening_the_console) for how to do that).\n6. Update us if you have any new info, or if the problem resolves itself!\n\n### The 5 magic steps\n\n1. Fork it!\n2. Create your feature branch: `git checkout -b my-new-feature`\n3. Commit your changes: `git commit -m 'Add some feature'`\n4. Push to the branch: `git push origin my-new-feature`\n5. Submit a pull request :)\n\n##License\n\n[xzibit](https://github.com/mabrasil/xzibit) is distributed under the\nMIT License, available in this repository. All contributions are assumed to be also licensed under\nthe MIT License.\n\n## Credits\n\n- Part of this project's original structure - some tasks and directories organization - was taken\nfrom [Willian Justen](https://github.com/willianjusten)'s [reveal-boilerplate](https://github.com/willianjusten/reveal-boilerplate) -\nmaybe now the two projects look very different.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fythecombinator%2Fxzibit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fythecombinator%2Fxzibit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fythecombinator%2Fxzibit/lists"}