I tried to solve from Hugo forum answers about the rendering pages error, but the error insists

gusbemacbe · September 22, 2020, 7:23am

I was learning from:

And I chose to be inspired by @martignoni’s multilingual template with Hugo template variables in the JavaScript files.

Then I received the error:

Rebuild failed:

Failed to render pages: render of "home" failed: execute of template failed: template: index.html:11:5: executing "main" at <partial "table-of-icons.html" .>: error calling partial: "/home/gusbemacbe/GitHub/Gustavo/suru-plus-folders/site-hugo/layouts/partials/table-of-icons.html:3:25": execute of template failed: template: partials/table-of-icons.html:3:25: executing "partials/table-of-icons.html" at <resources.Get>: error calling Get: unable to cast []interface {}{"javascript/tabela-de-icones.js"} of type []interface {} to string

Hugo Static Site Generator v0.75.1/extended linux/amd64 BuildDate: unknown

I tried to solve the problems from:

At GitHub:

At Hugo:

But the error insists.

I’ll provide the tree and the files, and config.yaml:

Tree:

assets
  └── javascript
      └── tabela-de-icones.js

layouts
├── index.html
└── partials
    └── table-of-icons.html

static
  └── assets
      └── javascript
          └── tabela-de-icones.js

config.yaml:

params:
  custom_js_index:
    - javascript/tabela-de-icones.js

layouts/partials/table-of-icons.html:

{{ $resource := .Site.Params.custom_js_index }}
{{ if $.Site.IsServer }}
  {{ $jsFile := resources.Get $resource | resources.ExecuteAsTemplate (printf "%s/%s" $.Site.Language $resource) . }}
  <script src="{{ $jsFile.Permalink }}"></script>
{{ else }}
  {{ $jsFile := resources.Get $resource | resources.ExecuteAsTemplate (printf "%s/%s" $.Site.Language $resource) . | minify | fingerprint }}
  <script src="{{ $jsFile.Permalink }}" integrity="{{ $jsFile.Data.Integrity }}"></script>
{{ end }}

layouts/index.html:

{{define "main"}}

	{{ if .IsTranslated }}

	<p>
		I am trying to test...
	</p>

	<div id="tabela"></div>

	{{- partial "table-of-icons.html" . -}}

	<p>
		If it works…
	</p>

	{{ end }}

{{ end }}

tabela-de-icones.js

// Author: Felipe Barros <felipetech@tuta.io>
// 12 August 2020

/**
 * @param {string} name
 * @param {object} attributes
 * @return {HTMLElement}
 */
function makeElement(name, attributes = {}) 
{
  const element = document.createElement(name);

  Object.entries(attributes).forEach(([key, value]) => 
  {
    element.setAttribute(key, value);
  });

  return element;
}

/**
 * @param {string} style 
 * @param {string} color 
 * @param {string} category 
 */
function getImageLink(style, color, category) 
{
  return `https://raw.githubusercontent.com/gusbemacbe/suru-plus-folders/beta/images/${style}/folder-${color}-${category}.svg?sanitize=true`;
}

function getCategoriesBasedOnTheStyle(categories = [], style = '') 
{
  const styleCategories = 
  {
    'adwaita-plus': () => 
    {
      let fake_categories = JSON.parse(JSON.stringify(categories));
      fake_categories.splice(fake_categories.indexOf('desktop'), 1);
      fake_categories.splice(fake_categories.indexOf('icons'), 1);

      return fake_categories;
    },
    'suru-plus': () => 
    {
      let fake_categories = JSON.parse(JSON.stringify(categories));
      return fake_categories;
    },
    'suru-plus-ubuntu': () => 
    {
      let fake_categories = JSON.parse(JSON.stringify(categories));
      fake_categories.splice(fake_categories.indexOf('desktop'), 1);
      fake_categories.splice(fake_categories.indexOf('icons'), 1);
      fake_categories.splice(fake_categories.indexOf('visiting'), 1);

      return fake_categories;
    },
  };

  const hasTheStyleCategoriesBeenFound = styleCategories[style];
  if (hasTheStyleCategoriesBeenFound) 
  {
    return styleCategories[style]();
  }
}

function getColorsBasedOnTheStyle(colors = [], style = '') 
{
  const styleColors = 
  {
    'adwaita-plus': () => 
    {
      const fakeColors = JSON.parse(JSON.stringify(colors));
      fakeColors.splice(fakeColors.indexOf('90ssummer'), 1);
      fakeColors.splice(fakeColors.indexOf('aurora'), 1);
      fakeColors.splice(fakeColors.indexOf('berriez'), 1);
      fakeColors.splice(fakeColors.indexOf('black'), 1);
      fakeColors.splice(fakeColors.indexOf('blue'), 1);
      fakeColors.splice(fakeColors.indexOf('cyan'), 1);
      fakeColors.splice(fakeColors.indexOf('cyberneon'), 1);
      fakeColors.splice(fakeColors.indexOf('darkblue'), 1);
      fakeColors.splice(fakeColors.indexOf('discodingo'), 1);
      fakeColors.splice(fakeColors.indexOf('fitdance'), 1);
      fakeColors.splice(fakeColors.indexOf('magenta'), 1);
      fakeColors.splice(fakeColors.indexOf('pink'), 1);
      fakeColors.splice(fakeColors.indexOf('teal'), 1);
      fakeColors.splice(fakeColors.indexOf('vermillion'), 1);
      fakeColors.splice(fakeColors.indexOf('violet'), 1);

      return fakeColors;
    },
    'suru-plus': () => 
    {
      let fakeColors = JSON.parse(JSON.stringify(colors));
      fakeColors.splice(fakeColors.indexOf('adwaita'), 1);
      fakeColors.splice(fakeColors.indexOf('aubergine'), 1);
      fakeColors.splice(fakeColors.indexOf('darkblue'), 1);
      fakeColors.splice(fakeColors.indexOf('purple'), 1);
      fakeColors.splice(fakeColors.indexOf('yaru'), 1);

      return fakeColors;
    },
    'suru-plus-ubuntu': () => 
    {
      let fakeColors = JSON.parse(JSON.stringify(colors));
      fakeColors.splice(fakeColors.indexOf('90ssummer'), 1);
      fakeColors.splice(fakeColors.indexOf('adwaita'), 1);
      fakeColors.splice(fakeColors.indexOf('aurora'), 1);
      fakeColors.splice(fakeColors.indexOf('berriez'), 1);
      fakeColors.splice(fakeColors.indexOf('black'), 1);
      fakeColors.splice(fakeColors.indexOf('bluegrey'), 1);
      fakeColors.splice(fakeColors.indexOf('brown'), 1);
      fakeColors.splice(fakeColors.indexOf('cyberneon'), 1);
      fakeColors.splice(fakeColors.indexOf('desktop'), 1);
      fakeColors.splice(fakeColors.indexOf('discodingo'), 1);
      fakeColors.splice(fakeColors.indexOf('fitdance'), 1);
      fakeColors.splice(fakeColors.indexOf('grey'), 1);
      fakeColors.splice(fakeColors.indexOf('indigo'), 1);
      fakeColors.splice(fakeColors.indexOf('magenta'), 1);
      fakeColors.splice(fakeColors.indexOf('manjaro'), 1);
      fakeColors.splice(fakeColors.indexOf('mint'), 1);
      fakeColors.splice(fakeColors.indexOf('pink'), 1);
      fakeColors.splice(fakeColors.indexOf('teal'), 1);
      fakeColors.splice(fakeColors.indexOf('violet'), 1);
      fakeColors.splice(fakeColors.indexOf('white'), 1);
      fakeColors.splice(fakeColors.indexOf('yaru'), 1);

      return fakeColors;
    },
  };

  const hasTheStyleColorsBeenFound = styleColors[style];
  if (hasTheStyleColorsBeenFound) 
  {
    return styleColors[style]();
  }
}

const categories = 
[
  'apps',
  'desktop',
  'documents',
  'downloads',
  'dropbox',
  'gitlab',
  'icons',
  'music',
  'open',
  'pictures',
  'visiting',
];

const colors = 
[
  '90ssummer',
  'adwaita',
  'aubergine',
  'aurora',
  'berriez',
  'black',
  'blue',
  'bluegrey',
  'bordeaux',
  'brown',
  'canonical',
  'cyan',
  'cyberneon',
  'darkblue',
  'discodingo',
  'fitdance',
  'green',
  'grey',
  'indigo',
  'magenta',
  'manjaro',
  'mint',
  'orange',
  'pink',
  'purple',
  'red',
  'teal',
  'vermillion',
  'violet',
  'white',
  'yaru',
  'yellow',
];

const styles = ['adwaita-plus', 'suru-plus', 'suru-plus-ubuntu'];

let stylesObj = 
{
  'adwaita-plus': {},
  'suru-plus': {},
  'suru-plus-ubuntu': {},
};

const tables = [];

// names.forEach((name) => 
// {
//   table.setAttribute('id', name);
// });

styles.forEach((style) => 
{
  const table = makeElement('table');
  table.setAttribute('id', style);
  const thead = makeElement('thead');
  const tbody = makeElement('tbody');

  const trHeader = makeElement('tr');
  const firstHeader = makeElement('th', {class: 'c'});
  const secondHeader = makeElement('th', {class: 'c'});

  firstHeader.textContent = "{{ i18n "theme_name" }}";
  secondHeader.textContent = 'Preview';

  trHeader.appendChild(firstHeader);
  trHeader.appendChild(secondHeader);
  thead.appendChild(trHeader);
  table.appendChild(thead);

  const fakeColors = getColorsBasedOnTheStyle(colors, style);
  const fakeCategories = getCategoriesBasedOnTheStyle(categories, style);

  fakeColors.forEach((color) => 
  {
    stylesObj[style][color] = [];

    const trColor = makeElement('tr');

    const tdColorName = makeElement('td');
    tdColorName.textContent = color;

    trColor.appendChild(tdColorName);
    const tdImage = makeElement('td');

    fakeCategories.forEach((category) => 
    {
      const link = getImageLink(style, color, category);

      const img = makeElement('img', 
      {
        width: '48px',
        height: '48px',
        src: link,
      });

      tdImage.appendChild(img);
      tbody.appendChild(trColor);

      stylesObj[style][color].push(link);
    });

    trColor.appendChild(tdImage);
  });

  table.appendChild(tbody);
  tables.push(table);
});

tables.forEach((table) => 
{
  // document.body.appendChild(table);
  document.getElementById("tabela").appendChild(table);
});

styles.forEach((style) => 
{
  const table = document.querySelector(`table#${style}`)
  const title = document.createElement('h2');
  title.textContent = style;

  table.insertAdjacentElement('beforebegin', title);
});

davidsneighbour · September 22, 2020, 12:08pm

.Site.Params.custom_js_index is the “content” of custom_js_index. Which is more a struct/dict thingy than a string. I guess you want it to maybe contain more than one file. In that case you can go through the collection with a range command.

If it’s only one single file at all times, try the following config:

params:
  custom_js_index: javascript/tabela-de-icones.js

Not 100% sure, this is a stab in the dark.

system · September 24, 2020, 12:08pm

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.

Topic		Replies	Views
Error building site: failed to render pages: render of "home" failed: support	5	3902	August 6, 2022
Error calling ExecuteAsTemplate: type <nil> support	12	2189	November 9, 2020
Error calling ExecuteAsTemplate: type <nil> not supported in Resource transformations support	3	609	February 6, 2023
Hugo v0.54.0/extended darwin/amd64 fails to build	6	797	March 2, 2019
Render of "section" failed: support	3	400	December 27, 2023

I tried to solve from Hugo forum answers about the rendering pages error, but the error insists

Related topics