About Rslidy

https://github.com/tugraz-isds/rslidy

• A way to design responsive and lightweight presentations in HTML5, CSS3 and TypeScript.
• Slide decks are online, can be viewed with any web browser.
• Allows for viewing on all devices completely independently when hosted online
• Open source.
• Offers a variety of options for presentations in HTML:
  • Possibility of slide navigation.
  • Possibility of slide overview.
  • Enables a responsive design.
  • Enables responsive interactions (incl. shake and tilt).
  • Supports CSS styles for a few options (Animations, Fonts).
  • Allows embedding of live code.
  • Image viewer (incl. zoom and pan).

Roadmap

• Adapt mouse cursor on hovering over image.
• Adapt cursor on nav bar hover.
• Import icons as data URL in CSS
• Disable toolbar buttons for first and last slide.
• Remove #1 in first slides' URL.
• Issues with Node.js Version
• Replace @media with container size queries.
• Write a slide creator guide to rslidy.
• Update the ReadMe.md on rslidys GitHub.
• Set a class to disable image viewer
• Remove S9 support
• Remove SVG compression and slim down SVG files
• Convert SCSS to modern CSS

Pointer Cursor When Hovering Over Image

When hovering over an image that can be opened in the image viewer, the cursor shape should change to a square.

Status: DONE

Arrow Cursor While Hovering Over Side Bars

When hovering over the nav bar on the side of the screen, the cursor should indicate this option to navigate.

Status: DONE

Most cursor packages do not include a single directional arrow.

We added our own svg files, convert them to base64 to use as custom cursors.

Do Not Apply Cursor Change on Last / First Slide

The first and last slide should not change cursor when no navigation is possible.

Status: DONE

Note: This fix was implemented into the content.ts file, where the cursor is changed.

Adapt Toolbar Navigation Buttons for First and Last Slide

On the first and last slide the buttons in the toolbar be disabled functionally and visually.

Status: DONE

Issues with Node.js Version

When using a newer version of Node an error happens during the transpile step.

Status: DONE

Works until Node.js version 16.20.2, broken from 17.9.1.

Downgrading Node.js is not recommended as the updates patched a security hole.

We updated package.json by adding source-map at version "^0.7.4" as a dependency.

As a resulting issue 'webpack' errored.

This is fixed by updating webpack to the newest version 5.89.0 in package.json

Replace @media with Container Size Queries.

Media queries:

• Allow to apply CSS styles depending on screen resolution or browser viewport width.
• Are used to handle big picture stuff and user preferences.

Container queries:

• Are useful for creating modular components that can be reused in different containers.
• Are used to take care of micro adjustments inside components.

Status: DONE

Within rslidy are 9 media queries.

All handle layouts (footer and menu bar) depending on screen size.

No query is needed to be reused.

Media queries are the better choice.

Update the ReadMe.md on Rslidys GitHub

Status: DONE

Small adaptions made.

Slide creator guide extended.

Group added as contributors in Rslidy's team.

Introduction to Rslidy as .md file

Status: DONE

Slide creator guide on GitHub was extended.

More examples in the code snippets.

Set a Class to Disable Image Viewer

Slide creators can set 'disable-image-viewer'

This results in the image not opening the image viewer and also not having a mouse hover.

Status: DONE

Remove S9 Support

Remove support for S9 slides as this technology is not relevant anymore.

Status: DONE

Remove SVG Compression and Slim Down SVG Files

Alter gulpfile so it doesn't optimise the SVG files anymore, so they stay legible.

Without svgo we have to manually remove fill and stroke colours as those will be set in css later.

We do not want to remove them from the SVG files, so we can still look at them properly.

Important: do NOT remove fill type none or some icons will be broken!

Get rid of inkscape tags and other unnecessary tags within the newly added SVG files.

Delete gulp-svgo from package.json as it is no longer needed.

Status: DONE

Convert SCSS to Modern CSS

Modern CSS now supports variables (called custom properties) so SCSS is no longer needed.

Status: DONE

Converting SCSS to Modern CSS changed the syntax of variables.

This broke a few calculations with variableswhich we fixed with the relevant css syntax.

We had to change the gulpfile, concatenates the files instead of converting.

This makes gulp-sass and sass unnecessary so those were also removed from the package.json

Advantages of Using Rslidy

Rslidy uses HTML5, CSS3 and TypeScript which help you create dynamic and visually appealing presentations.

It ensures the presentation adapts to various screen sizes, providing a consistent user experience.

It provides you help and setting options in slide deck.

It includes special features like:

• Built-in image viewer.
• Export slide deck as PDF.
• Include JavaScript code (e.g. responsive charts).
• Write math equations.

Demo of Rslidy on YouTube:
https://youtu.be/6t8V8496s9k