Replace Docker Images diagram with interactive SVG visualization#43
Merged
Conversation
Replaces the static code-block + PNG image layout with a fully HTML/SVG slide that shows the layer/Dockerfile relationship step by step. Each click reveals one arrow connecting a Dockerfile instruction to the image layer it creates (FROM→base, COPY, RUN, CMD). The arrows cross in the middle because the layer stack is ordered bottom-to-top while the Dockerfile reads top-to-bottom, matching the original PowerPoint animation. https://claude.ai/code/session_01HutTxch2wwX8cSZB6kd6bT
Preview DeploymentThis PR has been deployed for preview:
|
Contributor
There was a problem hiding this comment.
Pull request overview
This PR updates the Docker Images training slide to replace the previous static “Images & Layers” diagram with an inline SVG that visually maps Dockerfile instructions to image layers using Reveal.js fragments for stepwise arrow reveals.
Changes:
- Removed the two-column layout containing the Dockerfile
<pre><code>block and theimgs/images-layers.pngimage. - Added an inline, responsive SVG diagram with layer stack + Dockerfile panel and fragment-animated arrows linking each instruction to its layer.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Reduces line spacing from ~58 px to 40 px so the four instructions sit closer together. Replaces the multi-wave bottom with a single gentle arc (page-curl silhouette) and adds a dog-ear fold at the top-right corner, giving the box the recognisable shape of a file/document. Arrow y-coords updated to match the new line centers. https://claude.ai/code/session_01HutTxch2wwX8cSZB6kd6bT
Copilot review: aria-label alone is inconsistently announced by screen readers on SVGs. role="img" + <title>/<desc> with aria-labelledby is the robust pattern and prevents assistive tech from reading every internal <text> node as separate content. https://claude.ai/code/session_01HutTxch2wwX8cSZB6kd6bT
This file contains hidden or 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
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.
Summary
Replaces the static image-based Docker Images & Layers diagram with a fully interactive SVG visualization that shows the relationship between Dockerfile instructions and image layers with animated arrows.
Key Changes
imgs/images-layers.png) and two-column grid layoutaria-labelon SVG rootImplementation Details
class="fragment"withdata-fragment-index) to animate arrow reveals in sequence<defs>for consistent styling#3D7A8A,#5AB5CE) for layers/arrows, gold (#B8860B) for padlock, red (#FF6B6B) for version highlightviewBoxandstyle="width:100%;height:auto;display:block;"https://claude.ai/code/session_01HutTxch2wwX8cSZB6kd6bT