head.html

<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script>
  [{
    metaName: 'template',
    folder: '/page-templates/',
    extension: 'plain.html',
  },{
    metaName: 'header',
    fallback: '/header',
    extension: 'plain.html',
  }].forEach(({ metaName, folder, fallback, extension }) => {
    const meta = metaName && document.querySelector(`meta[name="${metaName}"]`);
    let metaUrl = meta?.content.trim();
    if (metaUrl?.toLowerCase() === 'false') return;
    if (folder && metaUrl !== undefined && !metaUrl.includes('/')) metaUrl = `${folder}${metaUrl}`;
    if (fallback && metaUrl === undefined)  metaUrl = `${folder?.length ? folder : '' }${fallback}`;
    if (folder && !metaUrl?.includes(folder)) return;
    if (metaUrl === undefined) return;
    
    const link = document.createElement('link');
    link.setAttribute('rel', 'preload');
    link.setAttribute('as', 'fetch');
    link.setAttribute('crossorigin', 'anonymous');
    link.href = `${metaUrl}.${extension}`;
    document.head.appendChild(link);
  });

</script>
<style>
  body {
    display: none;
  }
</style>
<link rel="stylesheet" href="/styles/styles.css" />
<script src="/scripts/index.js" type="module"></script>
<script src="/scripts/libs.js" type="module"></script>
<script src="/scripts/render/dom.js" type="module"></script>
<script src="/scripts/render/dom-utils.js" type="module"></script>
<script src="/scripts/render/dom-manipulations.js" type="module"></script>
<script src="/scripts/render/dom-reducers.js" type="module"></script>
<script src="/scripts/component-list/component-list.js" type="module"></script>
<script src="/scripts/component-base.js" type="module"></script>
<script src="/scripts/libs/external-config.js" type="module"></script>