Skip to content

bob-fornal/talk--presentation-tool

Repository files navigation

Talk: Presentation Tool

Goals

This project was designed to provide a means of doing a presentation with code examples and execution as a part of the presentation.

  • Upgrade to Angular v18 and convert to app.module.ts pattern.

Talks

  • A Look Inside Observables
  • Active Career Management
  • [/] Asynchronous JavaScript: Livin' on a Prayer
  • Developer Tools for non-Developers
  • What to Avoid When Writing Unit Tests
  • Writing Testable Code

To Do

  • Incorporate Monaco Editor.
  • Incorporate means of injecting JavaScript and being able to trigger via function call.
  • Include RxJS Tooling for Code Examples / CDN .
  • [/] Unit Tests.
  • GitHub Actions Pipeline.
  • BUG: Fix GitHub Page.
  • Angular Upgrade to 17, Standalone Components.
  • CSS Cleanup of Duplicate Patterns.
  • Add Slide Transitions (for presentation)

Editing Talk

  • Incorporate a means of generating new talk.
  • Incorporate a means of editing a talk.
  • Incorporate a means of displaying a LIST of slides.
  • Edit Deck Title.
  • Edit Deck Global CSS.
  • Add means of Disabling Slide.
  • Edit Slide (Specific to Type).
  • Edit Slide (Code Editor).
  • Edit Slide (Code Editor): Optional fields for Triggers.
  • Edit Slide (Code Editor): Simplify Save.
  • Code-Editor (add and remove) triggers.
  • Add new Slide (before and after Slide).
  • Reorder Slides (up and down).
  • Delete Slide with Verification.
  • Add Speaker Notes to Slide Editor.
  • Split, indent, and Unsplit content (prettify code).
  • Save JSON result.

Multiple Tabs

  • Broadcast Message Service(s) / Parent and Child
  • Add Speaker Notes to Deck (EDITING)

Control Slide Deck

  • List of Pages (navigation on page name)
  • Next, Previous (navigation without name).
  • Font Size (Zoom)
  • Determine and Trigger Functionality (code)

Server

  • Sitemap Generator
  • Make it dynamic / access assets data

Pipeline

  • Adding PR Template
  • Adding Pipeline Checks to Merge to Main

FUTURE USE-CASES

Dynamic Loading of Slide Pages

Use Angular Portal to allow dynamic component loading?

  <!-- Cannot write this in HTML by default; use Portal to inject it -->
  <alterate-cover [attr.data]="slide['data']"></alternate-cover>

JSON at TOP of structure.json. The "key" (cover) should be in the ORDER array:

  "COMPONENTS": {
    "alternate-cover": {
      "location": "./assets/components/cover-01.js",
      "fallback": "NONE",
      "attribute": [
        { "data-attribute": "data", "use-key": "data" }
      ]
    }
  },

Slide data for cover could look like:

"alternate-cover": {
  "data": {
    "title": "Active Career Management",
    "type": "cover",
    "author": "Bob Fornal",
    "text1": "...",
    "text2": "...",
  },
  "notes": "..."
}

Investigate JaveScript Load on Code Editor Pages

  <source [attr.src]="filepath" />