What

You deploy Cusdis via Docker, add the provided script and HTML block to your PaperMod Hugo project, and all of a sudden the Cusdis iframe is not taking the correct height. Here is how to fix it.

Why

Why is this problem happening? After looking at the code provided by the cusdis deployment for adding into the hugo project.

<div id="cusdis_thread"
  data-host="https://your-deployment-url"
  data-app-id="YOUR-APP-ID"
  data-page-id="{{ PAGE_ID }}"
  data-page-url="{{ PAGE_URL }}"
  data-page-title="{{ PAGE_TITLE }}"
></div>
<script async defer src="https://your-deployment-url/js/cusdis.es.js"></script>

the script cusdis.es.js has different code then what you get if you would have used the official cusdis deployment to create a project and tried to get the html block from that project.

Mainly you can check the height part. the iframe in the self hosted will not have the height added to its style.

How

To solve this you need to use the official script for your hugo project. use your own self hosted cusdis, but with a minor change.

<div id="cusdis_thread" data-host="https://your-deployment-url" data-app-id="YOUR-APP-ID"
    data-page-id="{{ .File.UniqueID }}" data-page-url="{{ .Permalink }}" data-page-title="{{ .Title }}"
    data-theme="auto">
</div>
<script async defer src="https://cusdis.com/js/cusdis.es.js"></script>

You will have to add the script https://cusdis.com/js/cusdis.es.js instead of the script provided by your self hosted cusdis.