July 09, 2022

Editorial

Blog post templates and custom elements.

Guitar Tab Element

Live HTML - v1
<div contenteditable="true">
  
  <table border="1" cellpadding="0" cellspacing="0" data-type="guitar-tab" style="width:-webkit-fill-available;">
    <tr style="display:grid;overflow:auto;">
      <td style="display:grid;padding:8px;overflow:auto;">
        <guitar-tab-v1>
          <pre style="margin:0;">placeholder</pre>
        </guitar-tab-v1>
      </td>
    </tr>
    <tr>
      <td style="text-align:right;padding:4px 8px;">
        <small>guitar-tab (v1)</small>
      </td>
    </tr>
  </table>
 
</div>

Guitar Tab Placeholder

html
e|-----------------------------------
B|-----------------------------------
G|-----------------------------------
D|-----------------------------------
A|-----------------------------------
E|-----------------------------------

Lyric chord element

Live HTML - v1
<div contenteditable="true">
  
  <table border="1" cellpadding="0" cellspacing="0" data-type="chordyjs-v1" data-kind="blogger-table-component" style="width:-webkit-fill-available;">
    <tr style="display:grid;overflow:auto;">
      <td style="display:grid;padding:8px;overflow:auto;">
        <chordyjs-v1>
          <pre style="margin:0;">Placeholder</pre>
        </chordyjs-v1>
      </td>
    </tr>
    <tr>
      <td style="text-align:right;padding:4px 8px;">
        <small>chordyjs-v1</small>
      </td>
    </tr>
  </table>
 
</div>

Spec Table Element

Live HTML - v1
<div contenteditable="true">
  
  <table border="1" cellpadding="0" cellspacing="0" data-type="spectable-v1" style="width:-webkit-fill-available;">
    <tr style="overflow:auto;">
      <td style="padding:8px;">
        <spectable-v1>
          <ul>
            <li>sample text: some value</li>
          </ul>
        </spectable-v1>
      </td>
    </tr>
    <tr>
      <td style="text-align:right;padding:4px 8px;">
        <small>spectable-v1</small>
      </td>
    </tr>
  </table>
 
</div>

Guitar Chord Element

Live HTML - v1
<div contenteditable="true">
  
  <table border="1" cellpadding="0" cellspacing="0" data-type="fretchart-v2" style="width:-webkit-fill-available;">
    <tr style="display:grid;overflow:auto;">
      <td style="display:grid;padding:8px;overflow:auto;">
        <fretchart-v2>
          <pre style="margin:0;">Placeholder</pre>
        </fretchart-v2>
      </td>
    </tr>
    <tr>
      <td style="text-align:right;padding:4px 8px;">
        <small>fretchart-v2</small>
      </td>
    </tr>
  </table>
 
</div>

YouTube Player Element

Live HTML - v1
YouTube ID <input id="inYt" value="0cs_wheBIvs"/>
<button onclick="generate()">generate</button>
<div style="height:10px;"></div>

youtube iframe player v1.1
<div contenteditable="true">
  <table border="1" data-type="yt-iframe-v1" cellpadding="0" cellspacing="0" style="width:-moz-available;width:-webkit-fill-available;width:fill-available;">
    <tbody>
      <tr style='display:grid;grid-template-columns:1fr 1fr;max-height:200px;overflow:hidden;'>
        <td id="one" style='overflow:hidden;'>Thumbnail</td>
        <td id="two" style='overflow:hidden;'>YouTube</td>
      </tr>
      <tr>
        <td style='text-align:right;padding:4px 8px;' colspan='2'>
          <span data-original-tag="yt-iframe-v1"><small>@pacolemon/yt-iframe-v1.0.1</small></span>
        </td>
      </tr>
    </tbody>
  </table>
</div>

<script> $ = function(selector, node=document) { let nodes = node.querySelectorAll(selector); return selector.startsWith('#') ? nodes[0] : nodes } </script>
<script> L = console.log </script>
<script>
  function generate() {
    let id = inYt.value.trim();
    $('#two').innerHTML = `<iframe width="100%" height="100%" class="BLOG_video_class" src="https://www.youtube.com/embed/${id}" youtube-src-id="${id}"></iframe>`
    $('#one').innerHTML = `<img width="100%" border="0" alt="Yuru camp video on YouTube" src="https://img.youtube.com/vi/${id}/hqdefault.jpg">`
  }
</script>


Open comments page