alkrauss48 / simple-slides

Simple Slides is a responsive and text-first presentation tool that keeps your audience engaged.

Hi, I'm Aaron 🙌

I'm a Software Developer based in Oklahoma City, Oklahoma, USA.

• ✨ My Portfolio Site: thecodeboss.dev
• 👨‍💼 LinkedIn: linkedin.com/in/alkrauss48/

NOW

• ⚡️ Organizing OKC WebDevs and OKC Coffee and Code
• 🦬 Volunteering with Techlahoma
• 🏢 Working at Clevyr as the Technical Lead of New Development
• 📽️ Just launched Simple Slides

BIO

• 💾 vim is my text editor of choice. This pretty much defines me.
• ⚙️ I like to code in:
  • laravel, vue, flutter, ruby, swift, sql, go, css, and a lot more
• ☁️ I build and deploy with docker, gitops, and kubernetes
• 📣 I like to talk
• 📝 I used to write
• 💥 The Command Line is my preferred way to do everything
• 💬 Ping me about dev, public speaking, volunteering, tea, cocktails, and longboarding
• ❤️ My wife and son are the best things in the whole world

FEATURED PROJECTS

• CyrusLyrics
• Simple Slides
• ResumeHaus
• Carnegie Chart

simple-slides's Issues

Don't track any views when logged in as admin

Implement background worker process

Currently the app handles everything synchronously, including high CPU tasks such as sending emails. We need to add a background worker to help spread the load of these async tasks, and then we can start using the Laravel scheduler too.

Also need to update docker to run the Laravel scheduler.

Add Analytics

Dependent on #17

We need to add analytics capabilities that show:

Dashboard Widgets

There will be a Dashboard page which displays the following 4 rows of widgets:

Row 1

1. Searchable drop down for presentations that the user has access to
   a. Default to "All"
   b. If admin, will include "Instructions" and "Adhoc" presentations
   c. If admin, will show presentation names with the creator of the presentation
   d. Will remember selection
2. 2 Date range fields from "Start" to "End", making sure that only "up to yesterday" can be selected. Default the values from a week before yesterday up to 8 days ago (aka the past week).

Row 2

Affected by both presentation and date filters.

1. Number of visitors in range (scalar)
   a. Can use Filament's Stat Widget to show a number: https://filamentphp.com/docs/3.x/widgets/stats-overview
   b. Show subtext of total number (and percentage) of unique visitors
   c. Make it 1/3 width
   e. Note: Won't include "today's" values; only up to the previous day.
2. Line chart showing the number of visitors within range (trend graph)
   a. Can use Filament's Chart Widget to build the chart: https://filamentphp.com/docs/3.x/widgets/charts
   b. Show two lines: one of total, and one of unique visitors.
   c. Make it 2/3 width

Row 3

Only affected by presentation filter.

1. Number of realtime visitors today (scalar)
   a. Can use Filament's Stat Widget to show a number: https://filamentphp.com/docs/3.x/widgets/stats-overview
   b. Show subtext of total number (and percentage) of unique visitors
   c. Make it 1/2 width
   d. Will show increase from the previous day
2. Number of lifetime views (scalar)
   a. Can use Filament's Stat Widget to show a number: https://filamentphp.com/docs/3.x/widgets/stats-overview
   b. Show subtext of total number (and percentage) of unique visitors
   c. Make it 1/2 width

Row 4

A table of "Most Viewed Presentations", which lists out the aggregate_views records that a user should see, and links to either:

• the presentation in Filament (if presentation_id) is provided
• (Admin Only) the adhoc presentation on the live site (if adhoc_slug is provided)
• (Admin Only) the instructions (if neither presentation_id or adhoc_slug are provided). This will surely be the most viewed presentation that the admin sees

Table will be sorted by total count, but could be sorted by unique count too. This table is not affected by the filters.

Tracking

Generating New Views

• When a presentation is viewed (either AdhocSlidesController#index, AdhocSlidesController#show, or PresentationController#show), store a record in daily_views
• Won't store view data if you are viewing your own presentation (meaning you're authenticated and viewing it).

Aggregating Views

• Create a job that aggregates all records in daily_views by presentation ID and/or slug, unique by session id, and creates a single record in aggregate_views with the date and count of views. Then, truncate the daily_views table.
• Run the job daily via the scheduler

New Database Tables

daily_views

• id
• presentation_id (foreign key, nullable) - index
• adhoc_slug (string, nullable) - index
• session_id - index
• timestamps

compound index for presentation_id and adhoc_slug
compound index for presentation_id, adhoc_slug, and session_id

aggregate_views

• id
• presentation_id (foreign key, nullable) - index
• adhoc_slug (string, nullable) - index
• total_count (int, default 0) - index
• unique_count (int, default 0) - index
• date (date)

compound index for presentation_id and adhoc_slug

For both tables, if presentation_id and adhoc_slug are null, then that is indicative of the root Instructions page.

Shift thumbnail generation to background process

This will involve:

• creating a job for the thumbnail generation (currently all in the Filament presentation resource)
  • End this job by broadcasting a notification to the currently authenticated user (see https://filamentphp.com/docs/3.x/notifications/broadcast-notifications)
• Dispatching that job in the filament action, and sending a synchronous notification that the user will be notified when their thumbnail has been generated

Depends on #17

Handle long-presses and long-keydowns for changing slides

If you hold down a key or a tap/click on an arrow, then you should change multiple slides quickly until you stop.

UX Feedback

Hey Aaron!

Testing out Simple Slides for my presentation this weekend. Very polished overall and easy to use!

Not sure how much access you have, but my pytest talk has some silly behavior atm:

• Index 3 has a giant bullet point for my first and last name
• Index 10 doesn't render footnotes as expected
  • tbf this may be user error
• Index 17 doesn't expand to viewport width (may be a limitation of absolute image size)
• Index 23 shows the very first line of the python code block, but it'd be nice if it resized to show the entire codeblock
• Index 24-28 formatting issues with bespoke code block
• Index 32-39 ditto ^^
• Index 49-50 thank you page is split across two pages

Entirely possible that it's me holding markdown wrong. Know other apps like Deckset splits pages by --- kinda like front matter in YAML.

Using macOS 12.7.4 (21H1123), Firefox 124.0.2.

Lmk if you need any more details.

Record and display how-to videos and widgets on the presentation and image library list resources

Plan for 2 videos: one for creating presentations, and one for creating image uploads

Improve build process to use Nginx + PHP

Currently the build process for production utilizes Laravel Sail, which is meant for development. Using Nginx for the main front-end and static asset server, and then proxying to a PHP server like fast-cgi for everything else is much more production-ready, but I ran into issues with how Inertia seems to function.

Not sure if it's an nginx issue, or something else, but it seems like certain headers are getting stripped (or never added in the first place) for inertia responses from the server.

See the top of docker-compose.prod.yaml for commented out services that should reflect a more stable production build. Currently though, they don't completely work.

Add minor features to Edit Presentation view

Desired features:

• Copy Share URL action
• Add "Save changes" button to header actions
• Change colors of some existing actions
• Improve clarity of various fields with tips and helper text

Add bottom nav bar on settings

Right aligned: right to left:

• moon icon for dark mode (stroke if in light mode, fill if in dark)
• YouTube
• GitHub
• privacy policy (depends on #11)

Remove dark mode from top nav, and out sign up next to login

Handle file uploads directly in Presentation resources, via the content field

The Filament MarkdownEditor natively supports file uploads and drag-and-drop, as well as handling file visibility/disk/etc.

However, Simple Slides limits users to a certain file space used, and thus we need to use Laravel-medialibrary to track that information, which is different from what the MarkdownEditor natively uses (It just uses Laravel's store or storePublicly functions, which only upload the file and don't add any database records).

Currently, until this issue is addressed, we are disabling file uploads directly on a presentation record via the content field. This is limiting, because it makes sense to have presentation-specific file uploads, instead of requiring all images to be uploaded to the global ImageLibrary.

We can start to get the behavior that we want by using a couple methods that the MarkdownEditor component provides: saveUploadedFileAttachmentsUsing and getUploadedAttachmentUrlUsing. Here is an example:

use Filament\Forms\Components\MarkdownEditor;
use Livewire\Features\SupportFileUploads\TemporaryUploadedFile;
use Spatie\MediaLibrary\MediaCollections\Models\Media;

MarkdownEditor::make('content')
    ])->saveUploadedFileAttachmentsUsing(function(TemporaryUploadedFile $file) : Media {
        $record = $this->getRecord();

        return $record->addMedia($attachment)->toMediaCollection('images');
    })->getUploadedAttachmentUrlUsing(function(Media $file) : string {
        return $file->getUrl();
    }),

However, there are some issues with this, hence this issue:

What Needs Done

Based on the code example above, we need to:

1. Get the current model to associate the images to. $this->getRecord() doesn't work.
2. Figure out how to handle images for new not-yet-created records. I.e. Can we even attach an image to a new record?
3. If enabling this feature, then we need a way for users to delete these images too, since they count towards their allotted space. This could potentially be done via a RelationManager for Media records (which would include the thumbnail), but it would make the workflow a bit more complex than normal.

Add privacy policy

Add confirmation when generating thumbnail for presentation with existing thumbnail

Add support for looping query parameter

Something like loop=5 to indicate that the presentation should automatically loop every 5 seconds.

For now, this issue will only handle the query parameter portion, and the logic behind the implementation, and not providing a front-end manner to add this looping query parameter (yet). That will come later.

Fix home page title, and install docs