Link Examples: Add "Open in Codepen" button (pull #1693)

* Update link example to use SVG and inline SVG for the CSS:before example
* Update size of SVG
* Add codepen button to link example
* Update link example to use https

Co-authored-by: Matt King <a11yThinker@Gmail.com>

examples/css/core.css

@@ -55,6 +55,12 @@ table.data.attributes tbody td {
   hyphens: manual;
 }
 
+/* We need to override the top margin for the link example */
+
+th .example-header {
+  margin-top: 1em;
+}
+
 .example-header > :first-child {
   margin: 0;
 }

examples/link/css/link.css

@@ -21,7 +21,7 @@
 
 [role="link"].link3::before {
   display: block;
-  content: url("../images/w3c-logo.png");
-  width: 153px;
-  height: 104px;
+  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='Ebene_1' height='143px' width='210px' version='1.1'%3E%3Cpath d='m52.352 24.412l16.955 57.643 16.953-57.643h45.964v5.73l-17.307 29.816c6.08 1.949 10.678 5.498 13.795 10.641 3.119 5.146 4.68 11.184 4.68 18.121 0 8.578-2.283 15.787-6.844 21.631s-10.465 8.768-17.713 8.768c-5.458 0-10.211-1.732-14.262-5.201-4.054-3.469-7.054-8.164-9.002-14.09l9.585-3.975c1.404 3.586 3.256 6.412 5.556 8.475 2.299 2.066 5.008 3.1 8.125 3.1 3.271 0 6.041-1.832 8.301-5.494 2.262-3.664 3.393-8.066 3.393-13.215 0-5.691-1.209-10.096-3.623-13.213-2.811-3.662-7.215-5.496-13.216-5.496h-4.674v-5.611l16.367-28.297h-19.755l-1.124 1.914-24.031 81.088h-1.169l-17.54-58.691-17.536 58.691h-1.168l-28.056-94.696h12.276l16.953 57.643 11.46-38.815-5.611-18.826h12.273v-0.004z' fill='%23005A9C'/%3E%3Cpath d='m196.02 24.412c-2.41 0-4.574 0.869-6.215 2.535-1.74 1.768-2.709 4.051-2.709 6.412s0.922 4.549 2.611 6.266c1.717 1.74 3.928 2.686 6.314 2.686 2.334 0 4.6-0.945 6.361-2.658 1.689-1.641 2.611-3.828 2.611-6.289 0-2.387-0.945-4.623-2.584-6.289-1.7-1.745-3.94-2.663-6.38-2.663zm7.78 9.024c0 2.064-0.799 3.979-2.26 5.393-1.543 1.494-3.457 2.289-5.57 2.289-1.986 0-3.949-0.818-5.418-2.311-1.465-1.494-2.287-3.406-2.287-5.443 0-2.039 0.846-4.027 2.361-5.566 1.416-1.443 3.328-2.211 5.416-2.211 2.139 0 4.051 0.799 5.543 2.311 1.45 1.438 2.22 3.373 2.22 5.538zm-7.53-5.321h-3.826v10.143h1.914v-4.324h1.891l2.063 4.324h2.137l-2.264-4.621c1.465-0.301 2.313-1.293 2.313-2.734 0.01-1.84-1.39-2.788-4.22-2.788zm-0.35 1.244c1.789 0 2.609 0.498 2.609 1.74 0 1.191-0.82 1.617-2.563 1.617h-1.617v-3.357h1.57z'/%3E%3Cpath d='m180.97 23.881l1.988 12.09-7.039 13.469s-2.701-5.715-7.191-8.875c-3.781-2.664-6.246-3.244-10.1-2.449-4.949 1.021-10.561 6.938-13.01 14.234-2.93 8.727-2.959 12.953-3.063 16.832-0.164 6.223 0.816 9.896 0.816 9.896s-4.275-7.906-4.234-19.486c0.027-8.268 1.328-15.764 5.152-23.16 3.365-6.504 8.367-10.408 12.807-10.867 4.59-0.473 8.215 1.738 11.02 4.131 2.941 2.516 5.916 8.01 5.916 8.01l6.92-13.825z'/%3E%3Cpath d='m181.84 92.289s-3.111 5.563-5.049 7.705c-1.939 2.145-5.408 5.918-9.691 7.807-4.283 1.887-6.529 2.24-10.764 1.836-4.229-0.406-8.16-2.855-9.537-3.877s-4.898-4.029-6.889-6.836c-1.992-2.807-5.102-8.416-5.102-8.416s1.732 5.623 2.82 8.01c0.623 1.375 2.541 5.576 5.266 9.232 2.541 3.41 7.475 9.283 14.973 10.609 7.498 1.328 12.65-2.041 13.926-2.855 1.273-0.814 3.961-3.066 5.664-4.889 1.775-1.896 3.457-4.32 4.385-5.773 0.682-1.063 1.789-3.215 1.789-3.215l-1.79-9.331z'/%3E%3C/svg%3E");
+  width: 210px;
+  height: 143px;
 }

examples/link/link.html

@@ -50,7 +50,7 @@ <h2 id="ex_label">Examples</h2>
       <tbody>
         <tr>
           <th>
-            1
+            <div class="example-header"><span id="ex1_label">1</span></div>
           </th>
           <td>
             <code>span</code> element with text content.
@@ -59,15 +59,15 @@ <h2 id="ex_label">Examples</h2>
             <span
                 tabindex="0"
                 role="link"
-                onclick="goToLink(event, 'http://www.w3.org/')"
-                onkeydown="goToLink(event, 'http://www.w3.org/')">
+                onclick="goToLink(event, 'https://www.w3.org/')"
+                onkeydown="goToLink(event, 'https://www.w3.org/')">
               W3C website
             </span>
           </td>
         </tr>
         <tr>
           <th>
-            2
+            <div class="example-header"><span id="ex2_label">2</span></div>
           </th>
           <td>
             <code>img</code> element with <code>alt</code> attribute.
@@ -76,15 +76,15 @@ <h2 id="ex_label">Examples</h2>
             <img
               tabindex="0"
               role="link"
-              onclick="goToLink(event, 'http://www.w3.org/')"
-              onkeydown="goToLink(event, 'http://www.w3.org/')"
-              src="images/w3c-logo.png"
+              onclick="goToLink(event, 'https://www.w3.org/')"
+              onkeydown="goToLink(event, 'https://www.w3.org/')"
+              src="images/w3c-logo.svg"
               alt="W3C Website">
           </td>
         </tr>
         <tr>
           <th>
-            3
+            <div class="example-header"><span id="ex3_label">3</span></div>
           </th>
           <td>
             CSS <code>:before</code> content property on a <code>span</code> element.
@@ -94,8 +94,8 @@ <h2 id="ex_label">Examples</h2>
               tabindex="0"
               role="link"
               class="link3"
-              onclick="goToLink(event, 'http://www.w3.org/TR/wai-aria-practices/')"
-              onkeydown="goToLink(event, 'http://www.w3.org/TR/wai-aria-practices/')"
+              onclick="goToLink(event, 'https://www.w3.org/TR/wai-aria-practices/')"
+              onkeydown="goToLink(event, 'https://www.w3.org/TR/wai-aria-practices/')"
               aria-label="W3C website"></span>
           </td>
         </tr>
@@ -175,7 +175,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
 
   <section>
     <h2>Javascript and CSS Source Code</h2>
-    <ul>
+    <ul id="css_js_files">
       <li>
         CSS:
         <a href="css/link.css" type="tex/css">link.css</a>
@@ -202,9 +202,9 @@ <h3 id="sc3_label">Link 3</h3>
     <pre><code id="sc3"></code></pre>
     <div role="separator" id="sc3_end_sep" aria-labelledby="sc3_end_sep sc3_label" aria-label="End of"></div>
     <script>
-      sourceCode.add('sc1', 'ex1');
-      sourceCode.add('sc2', 'ex2');
-      sourceCode.add('sc3', 'ex3');
+      sourceCode.add('sc1', 'ex1', 'ex1_label', 'css_js_files');
+      sourceCode.add('sc2', 'ex2', 'ex2_label', 'css_js_files');
+      sourceCode.add('sc3', 'ex3', 'ex3_label', 'css_js_files');
       sourceCode.make();
     </script>
   </section>