I am trying to inject a script into my project header that currently works as a script ran after a button press. i injected it into the header with the following code:
<script>
console.log('were here')
(async function() {
async function fetchAssetData(slug) {
const apiUrl = '[XANO BASE URL GOES HERE]/assets/getSingleAsset';
const response = await fetch(`${apiUrl}?url=${slug}`);
const data = await response.json();
console.log(data)
return data;
}
function setMetaTags(title, description, imageUrl, pageUrl, twitterUsername) {
// Set meta tags as shown in the previous example
const metaTags = [
{ name: 'og:title', content: title },
{ name: 'og:description', content: description },
{ name: 'og:image', content: imageUrl },
{ name: 'og:url', content: pageUrl },
{ name: 'og:type', content: 'website' },
{ name: 'twitter:card', content: 'summary_large_image' },
{ name: 'twitter:title', content: title },
{ name: 'twitter:description', content: description },
{ name: 'twitter:image', content: imageUrl },
{ name: 'twitter:site', content: twitterUsername },
];
for (const tag of metaTags) {
const metaTag = document.createElement('meta');
const nameAttribute = tag.name.startsWith('twitter') ? 'name' : 'property';
metaTag.setAttribute(nameAttribute, tag.name);
metaTag.setAttribute('content', tag.content);
document.head.appendChild(metaTag);
}
}
function removeTrailingSlash(str) {
return str.endsWith('/') ? str.slice(0, -1) : str;
}
async function init() {
console.log('here_starting the init function')
console.log(window.location.href)
const url = new URL(window.location.href);
console.log(url)
const slug = removeTrailingSlash(url.pathname).split('/').pop();
console.log('slug : ' + slug)
if (slug) {
const assetData = await fetchAssetData(slug);
const title = assetData.name || 'Fallback Title';
const description = assetData.shortDescription || 'Fallback Description';
const imageUrl = assetData.logo || 'Fallback Image URL';
const pageUrl = url.href;
const twitterUsername = '@your_twitter_username';
setMetaTags(title, description, imageUrl, pageUrl, twitterUsername);
}
}
init();
})();
</script>
when inject this into the header, the build fails to complete. When run the same code as an action after a button press, the code executes without any issue.
IS there some reason this would cause the build to fail? Is async code not allowed in the header of the entire project?
eventually i always get this:
on the other hand when i publish wiht only a console.log() statement in the head code, there is no build failure. What could the issue here be when the code runs fine when ran on page?