Top Related Projects
A curated list of awesome Go frameworks, libraries and software
Beautiful static documentation for your API
The HTML Presentation Framework
reveal.js on steroids! Get beautiful reveal.js presentations from any Markdown file
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:
- Creating a Slide:
<div class="slide">
<h1>Welcome to my Presentation</h1>
<p>This is the first slide of my presentation.</p>
</div>
- Applying Styles:
.slide {
background-color: #f0f0f0;
padding: 2rem;
text-align: center;
}
.slide h1 {
font-size: 2.5rem;
margin-bottom: 1rem;
}
- 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();
}
});
- 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:
- Clone the repository:
git clone https://github.com/maaslalani/slides.git
- Navigate to the project directory:
cd slides
-
Open the
index.html
file in your preferred web browser. -
Start creating your slides by adding
<div class="slide">
elements with your content inside the<body>
section of the HTML file. -
Customize the appearance of your slides by adding CSS styles to the
style.css
file. -
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
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!")
}
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.
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);
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 designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
Slides
Slides in your terminal.
Installation
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 tojson
file containing a glamour theme, can also be a link to a remotejson
file which slides will fetch before presenting.author
: Astring
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
: Astring
that is used to format today's date in theYYYY-MM-DD
format. If the date is not a valid format, the string will be displayed. Defaults toYYYY-MM-DD
.paging
: Astring
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 toSlide %d / %d
. You will need to surround the paging value with quotes if it starts with%
.
Date format
Given the date January 02, 2006:
Value | Translates to |
---|---|
YYYY | 2006 |
YY | 06 |
MMMM | January |
MMM | Jan |
MM | 01 |
mm | 1 |
DD | 02 |
dd | 2 |
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
Top Related Projects
A curated list of awesome Go frameworks, libraries and software
Beautiful static documentation for your API
The HTML Presentation Framework
reveal.js on steroids! Get beautiful reveal.js presentations from any Markdown file
A simple, in-browser, markdown-driven slideshow tool.
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot