iframe shortcode for valid AMP

content/notes/dark-mode/index.md

@@ -9,7 +9,7 @@ tags:
   - How To
   - Tutorial
 css: |
-  div#content iframe#example {
+  div#content div.embed iframe {
     height: 200px;
     width: 100%;
     max-width: 650px;
@@ -38,13 +38,13 @@ I've written a simple implementation below, which...
 
 ...meaning that any CSS selectors beginning with `body.dark` or `body.light` will only apply when the respective mode is active. A good place to start is by separating any color rules --- your background, text, links, etc. --- into a different section of your CSS. Using [SASS or SCSS](https://sass-lang.com/) makes this a whole lot [easier with nesting](https://sass-lang.com/guide#topic-3) but is not required; this was written with a [KISS](https://getyarn.io/yarn-clip/embed/eed08f4f-d1c9-4cc0-b041-f280a5dbf0a5?autoplay=false) mentality.
 
-<iframe id="example" src="https://jakejarvis.github.io/dark-mode-example/"></iframe>
+{{< iframe src="https://jakejarvis.github.io/dark-mode-example/" width="650" height="200" >}}
 
 A _very_ barebones example is embedded above ([view the source here](https://github.com/jakejarvis/dark-mode-example)) or you can try it out on this site by clicking the 💡 lightbulb in the upper right corner of this page. You'll notice that the dark theme sticks when refreshing this page, navigating between other pages, or if you were to return to this example weeks from now.
 
 ---
 
-### Minified JS (392 bytes gzipped 📦):
+### Minified JS: (392 bytes gzipped 📦)
 
 ```js
 /*! Dark mode switcheroo | MIT License | jrvs.io/darkmode */

layouts/shortcodes/iframe.amp.html

@@ -0,0 +1,7 @@
+<amp-iframe
+  sandbox="allow-scripts allow-same-origin"
+  layout="responsive"
+  width="{{ .Get "width" }}"
+  height="{{ .Get "height" }}"
+  src="{{ .Get "src" }}">
+</amp-iframe>

layouts/shortcodes/iframe.atom.html

@@ -0,0 +1 @@
+iframe.html

layouts/shortcodes/iframe.html

@@ -0,0 +1,3 @@
+<div class="embed iframe">
+<iframe src="{{ .Get "src" }}"></iframe>
+</div>

layouts/shortcodes/iframe.rss.html

@@ -0,0 +1 @@
+iframe.html