Development - MT Data API React

Blog endpoint

Render MTML template with the Data API, for development.

You can render MTML template with the Data API, by embeddingas follows. This way is suitable for trial and error during development, but has poor performance, so it can not be used in production.

<script
  src="https://cdn.jsdelivr.net/gh/usualoma/mt-data-api-react@v0.1.0/dist/main.js"
  integrity="sha384-a4DL0/dD5LPHbKux1gUl64sTzDGT2vlLut+VIRtUsYkeX0+9AqXDXAQ6wavp6E0I"
  crossorigin="anonymous"
  async defer
></script>
<script
  src="https://cdn.jsdelivr.net/gh/usualoma/mt-data-api-react@v0.1.0/dist/repl.js"
  integrity="sha384-9MVrDRriHLLsyRAwfK10q2+QI9YNU4EUc11dHjH8WwPQUVVLaxzf3tJJYW2+x0PO"
  crossorigin="anonymous"
  async defer
></script>
<div
  data-mt-data-api-url="https://blog-taaas-jp.movabletype.io/.data-api/v4/sites/61139"
  data-mt-data-api-template="#src"
></div>
<script id="src" type="text/mtml">
<h1>Entries</h1>
<ul class="list-unstyled">
  <mt:Entries limit="3">
    <li id="<mt:EntryId />" class="media mt-3 border-bottom">
      <mt:EntryAssets limit="1">
        <img src="<mt:AssetThumbnailUrl width="150" />" class="mr-3" />
      </mt:EntryAssets>
      <div class="media-body">
        <a href="<mt:EntryPermalink />" class="text-body">
          <h5 class="mt-0 mb-1">
            <mt:EntryTitle/>
          </h5>
        </a>
        <div class="text-secondary small">
          <span class="mr-3">
            <mt:EntryDate format="%Y.%m.%d" />
          </span>
          <span class="mr-3">
            <mt:EntryAuthorDisplayName />
          </span>
        </div>
        <p>
          <mt:EntryExcerpt />
        </p>
      </div>
    </li>
  </mt:Entries>
</ul>
</script>