Hugo

Adding Polymer Elements to the Polymer Theme

Hi,
I’m currently trying to port a website using Polymer Elements from jekyll to hugo. This has worked quite well so far, however, the old website uses the components paper-card and paper-button. Since these are not included in the Polymer Hugo Theme, I tried adding them myself. This has not worked.
I’ve tried to simply add it using bower:
bower install --save PolymerElements/paper-card
Since the newest version does not have a paper-card.html and paper-button.html anymore, I have tried using an older version, thus changing the command above to:
bower install --save PolymerElements/paper-card#1.0.5
This totally broke my website and I had to delete the theme and reinstall it.
I’ve tried opening an issue on the github page, but since the initial commit 4 years ago, there has not been any activity from the dev side there. The forks also didn’t yield any answers or results.
I have also previously been unable to add a custom css stylesheet to move that stuff out of the header.html, which did not work either. I’m thus thinking that this theme might not be expandable when it comes to the static folder. I am fairly new to hugo and website design though, so I might just be getting something fundamentally wrong here.

Can anyone of you help me out with my problem?

I’d choose another theme.

Yeah, I think that way too. Fixing the other theme sounds like it is too much trouble. If it were me, I would use the theme’s structure and apply the right classes in the css you want to use. Picking through a theme file by file is a good way to figure out how Hugo works, anyway.

1 Like

So you mean creating a new theme with the same or a similar design?

Yeah, assuming you like the design, you could use it as a starting point, then change all the classes to what you need.

I’ll have to see how that plays out, but I’ll give it a shot.
All the classes that are already there are good, it’s just that there are some missing hat I’d like to add.
I might post here again if I run into any problems that I cannot figure out (which honestly will most likely happen as I am - as stated - fairly new to website design.

By the way, that is a really old theme. Hugo has changed so much in 4 years. I would recommend looking into updating whatever you do to using baseof, besides the polymer elements.

1 Like

When installing elements from polymer into a theme using npm (app-layout for example), do you know if I need to install anything else or build something? Quite a lot has been added and it is a little jarring for me. How would I need to import all the elements into the head.html? I’ve found this approach which is quite different to the version 4 years ago:

<head>
    <script type="module">
      import '@polymer/app-layout/app-layout.js';
    </script> 
  </head>

That theme is using Google Polymer v1.0. Currently, Polymer is on v3.0.

Since Polymer v1.0, they’ve made a fundamental change in the way the library works. Originally, they used Bower for package management, and components were imported via HTML.

Component imports via HTML was highly experimental at the time. Here’s a few more details on some of the difficulty in getting browser vendors to implement support for HTML imports.

Currently, JS / ES6 Modules is the preferred import method.

Polymer v2.0 added ES6 syntax, but still retained HTML imports.

Polymer v3.0 switched to NPM for package management and now handles component imports via JS modules. I’d recommend skipping v2.0 and go straight to v3.0.

One thing that might help with the conversion is this Polymer Modulizer tool. It’s designed for v2.0 to v3.0 migrations, so I’m not sure if it will work, but it’s worth a shot.

Thanks for the info!
I’ve tried converting some of the theme and what I want to do yesterday though with mixed results.
I’ve installed a few packages using npm and imported the modules into the head.html. I don’t have any 404s when loading the page, but I don’t have the result I was expecting either. I’ll be looking into it further today.
I think I’m not going to use the modulizer as I want to make use of the baseof templates.
I’ll probably keep posting some updates and/or issues I run into here.

Since things are going further and further away from the original topic I opened a new thread: