Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add speaker notes #53

Closed
mgeisler opened this issue Dec 24, 2022 · 0 comments · Fixed by #107
Closed

Add speaker notes #53

mgeisler opened this issue Dec 24, 2022 · 0 comments · Fixed by #107
Assignees
@mgeisler

Comments

@mgeisler
Copy link
Collaborator

Now that we've published the course for all to see, we have many people who want to use the course for self-study.

To help with that, I think we should add speaker notes. Perhaps we can use https://github.com/FreeMasen/mdbook-presentation-preprocessor for this.

We should also publish videos, I've created #52 for tracking that.
@mgeisler mgeisler self-assigned this Dec 24, 2022
This was referenced Dec 27, 2022
Closed
Closed
Closed
Closed
Closed
mgeisler added a commit that referenced this issue Jan 4, 2023
@mgeisler
Add support for speaker notes
55d9bd9 
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 mgeisler mentioned this issue Jan 4, 2023
Merged
mgeisler added a commit that referenced this issue Jan 5, 2023
@mgeisler
Add support for speaker notes
d5359fa 
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.
NoahDragon pushed a commit to wnghl/comprehensive-rust that referenced this issue Jul 19, 2023
@mgeisler @NoahDragon
Add support for speaker notes
e3bd335 
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 google#53.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@mgeisler mgeisler

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Add support for speaker notes google/comprehensive-rust
1 participant
@mgeisler