Themes Header is completly broken when loaded into Hugo

[Vinylwalk3r]

Describe the bug The header is broken with both the searchbar being completly missplaced and the title being out of place ass well. The fonts are also wrong and the switch for Dark/Light theme are completly gone.

To Reproduce Steps to reproduce the behavior:

1. Git clone https://github.com/64bitpandas/amethyst ./themes
2. Set "theme = "amethyst" " in config.toml
3. Use "cp ./themes/amethyst/assets ./assets" to copy the themes assets folder into the working assets folder. I got several error messages if I didn't.
4. "hugo serve"

Expected behavior I'd expect the header to look as per the demo. The search bar to the right and the text in it's proper place. Check the demo for a ...well... demo of how it should look.

Screenshots Imgur links to show what doesn't work.

Desktop (please complete the following information):

• Device: Unraid VM
• OS: Ubuntu Server 22.04
• Browser: Vivaldi
• Hugo version: 0.125.3+extended (installed from snap)
• Node.js: v21.7.3
• Node: 20.12.2

Additional context A little question, why must the "assets" folder be copied into the root dir for the site? I thought themes fetched their assets from their respective themes/{theme-name} folder?

[anoduck]

@Vinylwalk3r Try this out.

1. Open hugo.yaml and comment out the baseURL: setting. It should be on the first line.
2. Rather than run make or make serve, just modify and run the following script.

#!/usr/bin/env bash
hugo-obsidian -input=content -output=assets/indices -index -root=.
hugo serve -b "$YOUR_HOST_IP" --bind "$YOUR_HOST_IP" --noHTTPCache --disableFastRender

As one would expect, you will need to replace "$YOUR_HOST_IP" with whatever the IP address is of your host. ex. 192.168.1.1

Stay Swedish my friend.

[Vinylwalk3r]

@Vinylwalk3r Try this out.

1. Open hugo.yaml and comment out the baseURL: setting. It should be on the first line.
2. Rather than run make or make serve, just modify and run the following script.

#!/usr/bin/env bash
hugo-obsidian -input=content -output=assets/indices -index -root=.
hugo serve -b "$YOUR_HOST_IP" --bind "$YOUR_HOST_IP" --noHTTPCache --disableFastRender

As one would expect, you will need to replace "$YOUR_HOST_IP" with whatever the IP address is of your host. ex. 192.168.1.1

Stay Swedish my friend.

@anoduck Sorry for a late reply! And thank you greatly for your help!

I tried your script and it mostly works. I got the search bar and theme toggle in place, but lost the website icon and title. And my entire right sidebar just vanished... Seems that the search bar doesnt allow clicking on the results as well. Just tested on the demo site and it works there. So something on my end it wrong.

(forget what I said about hugo-obsidian, I got it working. Had forgot to add it to .bash_profile🤦)

Also, how come this little script you've written here isn't mentioned in the install instructions? I don't know much about Hugo but it seems like quite the necessary bit of code for the site? Again, thanks for your help! It's much appreciated!

[anoduck]

@Vinylwalk3r You are correct, it is important, and your observation concerning the assets folder is right on target as well. There are numerous aspects of this theme that are fishy, and lead one to believe it was originally not written to be shared publicly, or at least sharing it publicly was an afterthought. Some of these things wouldn't be noticed unless you have had experience troubleshooting Hugo templates before and have been using Hugo for some time.

Several years ago, themes were not placed in their own subdirectory as they are now, back then you cloned the theme repository first, and used your cloned version to build your site directly inside. As you can guess, this placed limitations on the degree to which you could customize your site. It also complicated matters if you wanted to use any form of versioning control, or simply made a mistake and deleted the wrong file. At first glance, this is how the theme appears to be structured and/or intended for use.

The entire theme could use an overhaul and have the locations of several resources refactored to align itself with how Hugo currently structures themes.

I still have not gotten the integrated graph to work, and Hugo does not like how obsidian reformats the front matter header of site entries. Also, Hugo can be configured to run hugo-obsidian on its own, this would be a nice feature to have.

[Vinylwalk3r]

@anoduck I don't have anywhere near the experience with Hugo or it's themes as you seem to have, but after what you've explained about how themes work and seeing what you've done to help get this theme work (atleast a little bit, stubborn thing it is), I agree with you that this theme probably was a private project turned public but has gone without the proper rewrite / strong modifications that the theme probably would need to be optimized and easily deployed today.

The way you describe how themes worked before Hugo got the theme functionality we have today, it seems like it was a nightmare to update your site if your working theme recieved an update. Probably not to bad if you just used a theme "vanilla" but if you had made personal modifications to the theme and had to merge them with a updated theme. Yikes, I'm not envious. Considering that it seems to work almost completly without using the theme folder (atleast from the minimal testing I've done) it seems the theme is made to work like the old themes did.

Indeed, it couldn't hurt. But would probably require a considerable amount of work, I could imagine. Wouldn't it require a almost entire rewrite?

I wonder, (and I shall not pretend to understand much about the front matter problem you described) but could a, admittedly a bit of a dirty solition, be to have two sets of front matter? One that Obsidian reads from and then a second "copy" edited to make Hugo happy? It's not neat at all, but maybe it atleast could work?

[anoduck]

@Vinylwalk3r check out --> https://github.com/anoduck/amethyst-theme

I didn't want to mention it earlier, because my knowledge of Hugo isn't up to snuff, and I don't program in Go. The good news is that it is currently running from the theme subdirectory, and I have tried to copy the necessary bits into the exampleSite directory. Towards the bottom of the README, I am keeping a running list of tasks to perform and things that need to be fixed.

It is going to take some fiddling and a little finagling, but the majority of the codebase is solid. Mostly what needs to be done is move things around and change the resource paths to match the new locations. The project developer is thankfully considerably better at programming JavaScript and Go than I. Last but not least, Hugo itself is incredibly flexible, and has an entire template lookup table. Which is what provides its flexibility.

OK, got to run. Gunsmoke is on.

[64bitpandas]

Hey all, apologies for the lack of response.

You're right in that a lot of the components are pretty hacky. The version of Hugo this theme was built on is a couple years old at this point, and a lot of things are probably deprecated / no longer best practice. I'm also primarily a backend/infra dev so Hugo's not my strong point.

The main reason why I built this theme to only be clone-able (and not that easily imported in the standard way) is its dependencies on hugo-obsidian. At the time I couldn't find a clean way of allowing others to have a built-in way of generating Obsidian graphs with it while also being clonable into .themes/. Maybe it's possible now, I'm not sure.

Given that Jacky, the original maintainer of Quartz, rewrote that entire codebase to be in React and deprecated hugo-obsidian in the process, it's unlikely we'd be able to get Amethyst fully up-to-date without also rewriting it from the ground up as well.

I'm strongly considering archiving this project since I don't have the bandwidth to maintain it, and it's clear it does need some considerable amount of bugfixing to be properly usable in its current state. Will be going through the rest of the issues here to see what band-aids I can provide, but if you all have any suggestions I'm happy to see what I can do to help.

[anoduck]

You're right in that a lot of the components are pretty hacky.

"Hacky" or "Hackish" is a little too harsh. After all, you were in school at the time, and there was a justifiable reason for your approach. Let's call it "innovative".

The version of Hugo this theme was built on is a couple years old at this point

Does this mean you have graduated?

The main reason why I built this theme to only be clone-able (and not that easily imported in the standard way) is its dependencies on hugo-obsidian. At the time I couldn't find a clean way of allowing others to have a built-in way of generating Obsidian graphs with it while also being clonable into .themes/.

Eureka, this explains everything, including why my interactive graph is blank.

Given that Jacky, the original maintainer of Quartz, rewrote that entire codebase to be in React and deprecated hugo-obsidian in the process, it's unlikely we'd be able to get Amethyst fully up-to-date without also rewriting it from the ground up as well.

😕 The last update was a year ago, and it wasn't archived until last month. I am curious if the graphs couldn't be generated with Gojs.

I'm strongly considering archiving this project since I don't have the bandwidth to maintain it, and it's clear it does need some considerable amount of bugfixing to be properly usable in its current state. Will be going through the rest of the issues here to see what band-aids I can provide, but if you all have any suggestions I'm happy to see what I can do to help.

If I understand correctly, the biggest hurdle to overcome is the restriction placed on resource location by hugo-obsidian. This is in addition to the eventual loss of functionality of obsidian-hugo in the long-term. Does this sound correct?

My selection of this theme had nothing to do with its integration with obsidian, it was purely based on features, simplicity, and aesthetics. Amethyst was my first choice, but I did try out two other Hugo themes for documentation sites. They both left me with a bad taste in my mouth. Docura did not provide taxonomy, and when I peeked at the code, it was apparent modification to handle taxonomy was not going to be a fun venture. Google's Docsy was the next, and the ability to customize the theme was found to be very limiting without considerable effort. Amethyst appeared to have the best mix of simplicity and flexibility.

Well there is my $0.38 worth.

---

Since you did mention the application of band-aids... binding the server address to 0.0.0.0 caused CORS to rear it's annoying little head. Which caused the browser to refuse to load several resources.

[64bitpandas]

😕 The last update was a year ago, and it wasn't archived until last month. I am curious if the graphs couldn't be generated with Gojs. If I understand correctly, the biggest hurdle to overcome is the restriction placed on resource location by hugo-obsidian. This is in addition to the eventual loss of functionality of obsidian-hugo in the long-term. Does this sound correct?

Certainly; this is the main problem, and there are quite a few ways to it. The simplest approach I can think of is to just separate hugo-obsidian from the theme dependencies, and request users to generate the manifest themselves + paste it into contents/ if they want the graph feature. If you're able to get it working (in modern Hugo theme semantics) without the graph, let me know and I'll see if I can get this final step in as well for others who might want it! While I'm wary of having a feature regression it might be necessary in the longer term.

My selection of this theme had nothing to do with its integration with obsidian, it was purely based on features, simplicity, and aesthetics. Amethyst was my first choice, but I did try out two other Hugo themes for documentation sites. They both left me with a bad taste in my mouth.

My experience was pretty similar to yours, hence why I decided to create Amethyst. I couldn't find any existing theme that exactly met all of my needs while still being usable. While others have evidently found Amethyst useful, it's still ultimately an opinionated personal project-- so you're welcome to modify it however you need, but there might get a point where your needs diverge too much for it to be worth using. I suppose this is true for any Hugo theme to some extent.

Since you did mention the application of band-aids... binding the server address to 0.0.0.0 caused CORS to rear it's annoying little head. Which caused the browser to refuse to load several resources.

ah yes, just CORS being CORS 🙃 I'll have to do some experimentation and see if it'd be good to add some more notes about local development usage in the documentation (including your script in some form).

[anoduck]

@64bitpandas I went ahead and forked the project at amethyst-theme. It is not nearly ready for a pull request, but does work enough to allow my site to build. That is, as long as you copy all the components directly from the examplesite folder.

Feature regression does not sound too fun at this moment in the game. As stated above, I have no experience writing in Go except the Go text/html templating language, but can program in Python and barely in Zig. I looked at Obsidian-Hugo, and it looks like something I can rewrite in python.

I do also owe you some gratitude. I had not given obsidian a thorough enough test run when I first tried it. Now, because of this theme, I gave it a second chance. It is quite polished.