Convert Figma logo to code with AI

maaslalani logoslides

Terminal based presentation tool

9,630
263
9,630
58

Top Related Projects

130,604

A curated list of awesome Go frameworks, libraries and software

36,008

Beautiful static documentation for your API

67,545

The HTML Presentation Framework

reveal.js on steroids! Get beautiful reveal.js presentations from any Markdown file

12,681

A simple, in-browser, markdown-driven slideshow tool.

Quick Overview

The maaslalani/slides repository is a minimalist and lightweight presentation tool built using JavaScript and HTML/CSS. It allows users to create and present slides directly in the browser, without the need for additional software or plugins.

Pros

  • Simplicity: The project has a clean and straightforward interface, making it easy to use for creating and presenting slides.
  • Lightweight: The tool is lightweight and does not require any external dependencies, making it fast and efficient to use.
  • Customizable: Users can customize the appearance and layout of their slides using CSS, allowing for a unique and personalized presentation.
  • Open-Source: The project is open-source, allowing for community contributions and improvements.

Cons

  • Limited Functionality: Compared to more feature-rich presentation tools, maaslalani/slides may lack some advanced features, such as animations, transitions, or multimedia support.
  • Steep Learning Curve: While the tool is relatively simple to use, users who are not familiar with HTML/CSS may find the setup and customization process more challenging.
  • Dependency on Browser: The presentation is entirely browser-based, which means it may not work as expected in all browsers or on all devices.
  • Lack of Collaboration Features: The tool does not currently support real-time collaboration or sharing features, which may be a limitation for some users.

Code Examples

The maaslalani/slides project is a JavaScript-based presentation tool, and here are a few examples of how it can be used:

  1. Creating a Slide:
<div class="slide">
  <h1>Welcome to my Presentation</h1>
  <p>This is the first slide of my presentation.</p>
</div>
  1. Applying Styles:
.slide {
  background-color: #f0f0f0;
  padding: 2rem;
  text-align: center;
}

.slide h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}
  1. Navigating Slides:
const slides = document.querySelectorAll('.slide');
let currentSlide = 0;

function nextSlide() {
  slides[currentSlide].classList.remove('active');
  currentSlide = (currentSlide + 1) % slides.length;
  slides[currentSlide].classList.add('active');
}

document.addEventListener('keydown', (event) => {
  if (event.key === 'ArrowRight') {
    nextSlide();
  }
});
  1. Adding Transitions:
.slide {
  transition: transform 0.5s ease-in-out;
}

.slide.active {
  transform: translateX(0);
}

.slide:not(.active) {
  transform: translateX(-100%);
}

Getting Started

To get started with maaslalani/slides, follow these steps:

  1. Clone the repository:
git clone https://github.com/maaslalani/slides.git
  1. Navigate to the project directory:
cd slides
  1. Open the index.html file in your preferred web browser.

  2. Start creating your slides by adding <div class="slide"> elements with your content inside the <body> section of the HTML file.

  3. Customize the appearance of your slides by adding CSS styles to the style.css file.

  4. To navigate between slides, use the right arrow key on your keyboard.

That's it! You can now create and present your slides using the maaslalani/slides tool.

Competitor Comparisons

130,604

A curated list of awesome Go frameworks, libraries and software

Pros of Awesome Go

  • Comprehensive collection of Go libraries and tools, covering a wide range of use cases.
  • Active community with frequent updates and contributions.
  • Provides a valuable resource for Go developers to discover and explore new packages.

Cons of Awesome Go

  • The sheer size of the repository can make it challenging to navigate and find specific packages.
  • The quality and relevance of some listed projects may vary, as the repository relies on community submissions.
  • Maintaining such a large collection of projects can be time-consuming, potentially leading to outdated or unmaintained entries.

Code Comparison

Slides:

const slideshow = new Slideshow({
  slides: [
    { content: 'Slide 1' },
    { content: 'Slide 2' },
    { content: 'Slide 3' }
  ],
  container: '#slideshow'
})

slideshow.start()

Awesome Go:

package main

import "fmt"

func main() {
    fmt.Println("Hello, Go!")
}
36,008

Beautiful static documentation for your API

Pros of Slate

  • Slate provides a comprehensive set of features for building API documentation, including support for multiple languages, versioning, and search.
  • The project has a large and active community, with regular updates and a wealth of community-contributed plugins and themes.
  • Slate's documentation is well-written and easy to follow, making it a great choice for developers who are new to building API documentation.

Cons of Slate

  • Slate can be more complex to set up and configure than some other documentation tools, especially for developers who are new to the project.
  • The project's focus on API documentation may make it less suitable for other types of documentation, such as user guides or technical manuals.
  • Slate's reliance on Ruby and the Middleman static site generator may be a drawback for developers who prefer to work with other technologies.

Code Comparison

Slides:

const slide = new Slide({
  title: 'Introduction',
  content: `
    <h1>Welcome to the presentation!</h1>
    <p>This is the first slide.</p>
  `
});

slide.render();

Slate:

# config.rb
configure :development do
  activate :livereload
end

set :css_dir, 'stylesheets'
set :js_dir, 'javascripts'
set :images_dir, 'images'
set :fonts_dir, 'fonts'

# index.html.md
---
title: API Documentation
language_tabs:
  - shell
  - ruby
  - python
---

# Introduction

This is the first page of the API documentation.
67,545

The HTML Presentation Framework

Pros of reveal.js

  • Extensive documentation and a large community, making it easier to get started and find support
  • Supports a wide range of features, including speaker notes, PDF export, and remote control
  • Highly customizable with a variety of themes and plugins available

Cons of reveal.js

  • Larger and more complex than maaslalani/slides, which may be overkill for simpler presentations
  • Steeper learning curve, especially for those new to web development
  • Potentially slower performance compared to maaslalani/slides due to its feature-rich nature

Code Comparison

maaslalani/slides

<div class="slide">
  <h1>Hello, World!</h1>
  <p>This is a simple slide.</p>
</div>

reveal.js

<div class="reveal">
  <div class="slides">
    <section>
      <h1>Hello, World!</h1>
      <p>This is a slide in reveal.js.</p>
    </section>
  </div>
</div>

reveal.js on steroids! Get beautiful reveal.js presentations from any Markdown file

Pros of Reveal.md

  • Reveal.md provides a more feature-rich presentation experience, with support for speaker notes, fragments, and various presentation themes.
  • Reveal.md integrates with Markdown, allowing for easy creation and formatting of slides.
  • Reveal.md offers a wider range of customization options, such as custom CSS and JavaScript.

Cons of Reveal.md

  • Reveal.md has a steeper learning curve compared to Slides, as it requires more configuration and setup.
  • Reveal.md may be overkill for simple presentations, as it provides more features than some users may need.
  • Reveal.md's dependency on Node.js and npm may be a drawback for users who prefer a more lightweight solution.

Code Comparison

Slides:

const slides = [
  {
    title: 'Welcome to Slides',
    content: 'This is the first slide.'
  },
  {
    title: 'Second Slide',
    content: 'This is the second slide.'
  }
];

slides.forEach(slide => {
  console.log(slide.title);
  console.log(slide.content);
});

Reveal.md:

const slideConfig = {
  title: 'Reveal.md Presentation',
  separator: '---',
  verticalSeparator: '----',
  theme: 'black',
  transition: 'slide',
  controls: true,
  progress: true
};

const slides = `
# Slide 1
This is the first slide.

---
# Slide 2
This is the second slide.
`;

revealMd.initialize(slideConfig, slides);
12,681

A simple, in-browser, markdown-driven slideshow tool.

Pros of Remark

  • Remark is a lightweight and flexible markdown-based presentation engine, allowing for easy creation and customization of presentations.
  • Remark provides a wide range of features, including speaker notes, syntax highlighting, and support for LaTeX equations.
  • Remark presentations are self-contained and can be easily shared and viewed on any device with a web browser.

Cons of Remark

  • Remark may have a steeper learning curve compared to Slides, as it requires familiarity with markdown and configuration options.
  • Remark may not have the same level of visual polish and design options as Slides, which provides a more user-friendly interface.
  • Remark may not be as widely used or supported as Slides, which has a larger community and ecosystem.

Code Comparison

Slides:

<section>
  <h1>My Presentation</h1>
  <p>This is a slide in my presentation.</p>
</section>

Remark:

# My Presentation

This is a slide in my presentation.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Slides

Slides in your terminal.

Slides Presentation

Installation

Homebrew Snapcraft AUR

Instructions

MacOS

brew install slides

Arch

yay -S slides

Nixpkgs (unstable)

nix-env -iA nixpkgs.slides

Any Linux Distro running snapd

sudo snap install slides

Go

go install github.com/maaslalani/slides@latest

From source:

git clone https://github.com/maaslalani/slides.git
cd slides
go install

You can also download a binary from the releases page.

Usage

Create a simple markdown file that contains your slides:

# Welcome to Slides
A terminal based presentation tool

---

## Everything is markdown
In fact, this entire presentation is a markdown file.

---

## Everything happens in your terminal
Create slides and present them without ever leaving your terminal.

---

## Code execution
```go
package main

import "fmt"

func main() {
  fmt.Println("Execute code directly inside the slides")
}
```

You can execute code inside your slides by pressing `<C-e>`,
the output of your command will be displayed at the end of the current slide.

---

## Pre-process slides

You can add a code block with three tildes (`~`) and write a command to run *before* displaying
the slides, the text inside the code block will be passed as `stdin` to the command
and the code block will be replaced with the `stdout` of the command.

```
~~~graph-easy --as=boxart
[ A ] - to -> [ B ]
~~~
```

The above will be pre-processed to look like:

┌───┐  to   ┌───┐
│ A │ ────> │ B │
└───┘       └───┘

For security reasons, you must pass a file that has execution permissions
for the slides to be pre-processed. You can use `chmod` to add these permissions.

```bash
chmod +x file.md
```

Checkout the example slides.

Then, to present, run:

slides presentation.md

If given a file name, slides will automatically look for changes in the file and update the presentation live.

slides also accepts input through stdin:

curl http://example.com/slides.md | slides

Go to the first slide with the following key sequence:

  • g g

Go to the next slide with any of the following key sequences:

  • space
  • right
  • down
  • enter
  • n
  • j
  • l
  • Page Down
  • number + any of the above (go forward n slides)

Go to the previous slide with any of the following key sequences:

  • left
  • up
  • p
  • h
  • k
  • N
  • Page Up
  • number + any of the above (go back n slides)

Go to a specific slide with the following key sequence:

  • number + G

Go to the last slide with the following key:

  • G

Search

To quickly jump to the right slide, you can use the search function.

Press /, enter your search term and press Enter
(The search term is interpreted as a regular expression. The /i flag causes case-insensitivity.).

Press ctrl+n after a search to go to the next search result.

Code Execution

If slides finds a code block on the current slides it can execute the code block and display the result as virtual text on the screen.

Press ctrl+e on a slide with a code block to execute it and display the result.

Pre-processing

You can add a code block with three tildes (~) and write a command to run before displaying the slides, the text inside the code block will be passed as stdin to the command and the code block will be replaced with the stdout of the command. Wrap the pre-processed block in three backticks to keep proper formatting and new lines.

```
~~~graph-easy --as=boxart
[ A ] - to -> [ B ]
~~~
```

The above will be pre-processed to look like:

┌───┐  to   ┌───┐
│ A │ ────> │ B │
└───┘       └───┘

For security reasons, you must pass a file that has execution permissions for the slides to be pre-processed. You can use chmod to add these permissions.

chmod +x file.md

Configuration

slides allows you to customize your presentation's look and feel with metadata at the top of your slides.md.

This section is entirely optional, slides will use sensible defaults if this section or any field in the section is omitted.

---
theme: ./path/to/theme.json
author: Gopher
date: MMMM dd, YYYY
paging: Slide %d / %d
---
  • theme: Path to json file containing a glamour theme, can also be a link to a remote json file which slides will fetch before presenting.
  • author: A string to display on the bottom-left corner of the presentation view. Defaults to the OS current user's full name. Can be empty to hide the author.
  • date: A string that is used to format today's date in the YYYY-MM-DD format. If the date is not a valid format, the string will be displayed. Defaults to YYYY-MM-DD.
  • paging: A string that contains 0 or more %d directives. The first %d will be replaced with the current slide number and the second %d will be replaced with the total slides count. Defaults to Slide %d / %d. You will need to surround the paging value with quotes if it starts with %.

Date format

Given the date January 02, 2006:

ValueTranslates to
YYYY2006
YY06
MMMMJanuary
MMMJan
MM01
mm1
DD02
dd2

SSH

Slides is accessible over ssh if hosted on a machine through the slides serve [file] command.

On a machine, run:

slides serve [file]

Then, on another machine (or same machine), ssh into the port specified by the slides serve [file] command:

ssh 127.0.0.1 -p 53531

You will be able to access the presentation hosted over SSH! You can use this to present with slides from a computer that doesn't have slides installed, but does have ssh. Or, let your viewers have access to the slides on their own computer without needing to download slides and the presentation file.

Alternatives

Credits: This project was heavily inspired by lookatme.

Development

See the development documentation

NPM DownloadsLast 30 Days