Add support for speaker notes #107
Merged
+322
−2
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
maurer
approved these changes
Jan 4, 2023
This implements a system for speaker notes via `details` elements and some JavaScript. The general idea is 1. You add speaker notes to each page by wrapping some Markdown code in `<details> … </details>`. This is a standard HTML element for, well extra details. Browsers will render the element with a toggle control for showing/hiding the content. 2. We inject JavaScript on every page which finds these speaker note elements. They’re styled slightly and we keep their open/closed state in a browser local storage. This ensures that you can keep them open/closed across page loads. 3. We add a link to the speaker notes which will open in a new tab. The URL is amended with `#speaker-notes-open`, which we detect in the new tab: we hide the other content in this case. Simultaneously, we hide the speaker notes in the original window. 4. When navigating to a new page, we signal this to the other window. We then navigate to the same page. The logic above kicks in and hides the right part of the content. This lets the users page through the course using either the regular window or the speaker notes — the result is the same and both windows stay in sync. Tested in both Chrome and Firefox. When using a popup speaker note window, the content loads more smoothly in Chrome, but it still works fine in Firefox. Fixes #53.
mgeisler
force-pushed
the
speaker-notes
branch
from
55d9bd9
to
d5359fa
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This implements a system for speaker notes via
detailselements and some JavaScript. The general idea isYou add speaker notes to each page by wrapping some Markdown code in
<details> … </details>. This is a standard HTML element for, well extra details. Browsers will render the element with a toggle control for showing/hiding the content.We inject JavaScript on every page which finds these speaker note elements. They’re styled slightly and we keep their open/closed state in a browser local storage. This ensures that you can keep them open/closed across page loads.
We add a link to the speaker notes which will open in a new tab. The URL is amended with
#speaker-notes-open, which we detect in the new tab: we hide the other content in this case. Simultaneously, we hide the speaker notes in the original window.When navigating to a new page, we signal this to the other window. We then navigate to the same page. The logic above kicks in and hides the right part of the content. This lets the users page through the course using either the regular window or the speaker notes — the result is the same and both windows stay in sync.
Tested in both Chrome and Firefox. When using a popup speaker note window, the content loads more smoothly in Chrome, but it still works fine in Firefox.
I've included a few example speaker notes just to show how you add them.
Fixes #53.