ahsanayaz/slides

reveal.js is an open source HTML presentation framework. It enables anyone with a web browser to create beautiful presentations for free. Check out the live demo at revealjs.com.

The framework comes with a powerful feature set including nested slides, Markdown support, Auto-Animate, PDF export, speaker notes, LaTeX typesetting, syntax highlighted code and an extensive API.

---

Want to create reveal.js presentation in a graphical editor? Try https://slides.com. It's made by the same people behind reveal.js.

---

Sponsors

Hakim's open source work is supported by GitHub sponsors. Special thanks to:

Your app, enterprise-ready. Start selling to enterprise customers with just a few lines of code. Add Single Sign-On (and more) in minutes instead of months.

---

Getting started

• 🚀 Install reveal.js
• 👀 View the demo presentation
• 📖 Read the documentation
• 🖌 Try the visual editor for reveal.js at Slides.com
• 🎬 Watch the reveal.js video course (paid)

Getting Started

Install Dependencies:

Install the project's dependencies using npm:

npm install

Usage

Serve the Project

To serve the project locally for development, use the following command:

npm run dev

This command will start a development server, allowing you to access the project in a web browser at http://localhost:3000 or a different port if specified in your project configuration.

Build the Project

To build the project for production deployment, run:

npm run build

This command will generate optimised production-ready assets and place them in the dist directory.

Deploy the Project

To deploy the project, you can use the following command:

npm run deploy

The deployment process may vary depending on your specific hosting environment. Be sure to configure your deployment settings as needed, and consult your hosting provider's documentation for detailed instructions.

MIT licensed | Copyright © 2011-2022 Hakim El Hattab, https://hakim.se

slides's Issues

Write a nodeJS script to generate a JSON containing the slides data

Current Behavior:
The code in main.js looks at the array within the file to generate slides.

Desired Behavior:
The code in main.js is supposed to read it from a JSON

Acceptance Criteria:

• A nodejs script that generates that JSON in the folder data named slides.json

Note: updating the main.js is not required in this task.

Update the readme for development instructions

Acceptance Criteria:

• Update the readme to reflect how to do the following
  • Serve the project (npm run dev)
  • Build the project (npm run build)
  • Deploy the project

Also add the instructions for the project setup (running npm install). Take inspiration from other projects for an amazing readme :)

Responsive issue

your home page is not responsive for small devices

Move the slides script out of index.html

Current Situation

The javascript code is inside the index.html

Desired behavior

Move the code to its own javascript file

Hints

Acceptance Criteria: Expand to see

• Create a new file at the project's root named main.js
• Move the script from index.html to that file
• Import the js file into the index.html via script tag
• Make sure everything works locally (you're able to see the slides)
• Update the gulp-file 'build-talks' task to include the `main.js`

Add watermark similar to the career show talk in all the talks

Acceptance Criteria:

• Watermark of my twitter handle added to all the slides

For the `slides.json` script, use the titles from the HTML files while generating it

Acceptance Criteria:

• the generated slides.json should have the titles included as well
• add the script for generating the slides.json to package.json for dev, build and build-tasks

Blocked by #6

[Feature]: Add jest and write tests for scripts/extractSlideData.js

Right now, we don't have any tests in the repository. And we have the scripts/extractSlideData.js file which can have unit tests. The task is to write these unit tests.

Use the generated JSON to populate the data in the home page.

Blocked by #6

Acceptance Criteria:

• The main.js file should make a fetch call to get the data from data/slides.json and then populate the home image.