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" />