New theme for Hugo docs – http://hugodocs.netlify.com

Hi everyone!

I created a new theme for the Hugo Documentation.

Check it out: http://hugodocs.netlify.com/content/organization/

What do you guys think? There’s some issues to do, like the search box and some style improvements on the medium and small media queries. :slight_smile:

Forgot to mention that the theme is based on a CodyHouse template: Responsive Sidebar Navigation in CSS and JavaScript | CodyHouse

4 Likes

@sjardim Very nice. Have you considered a search solution for this yet or are you sticking with Google?

Once the theme is ready to be deployed we could apply your redesign to the themes page as well.

The menus for Templates and Extras are broken in Chrome at least (you can’t scroll off the page to see the full menu list), but it otherwises looks nice…

Hey guys!
I’m very happy that you liked it! I was thinking to do it for a couple of months, but didn’t have the time to create a design from scratch and after I found this nice template I gave it a shot.

I put it together in a few hours yesterday and posted it here to find out what’s the reception would be, but as everyone saw, there is a lot of small issues, like the ones @jeffreycentex mentioned, and others. I need to check it in all major browsers and do other improvements. I’ll be working on them in the next days.

@rdwatters, I have plans to implement a different search mechanism, but have to study it yet.

I’ll keep you guys posted. What’s better, here or on Github? Or both?

Happy holidays for all!

Best regards,
Sergio

i think the search is the lack of the other hugo themes ,i mean the real site content search , not through the third search engine that is delay and not complete.

my some think about search just for refer to u,we can do a shallow search:

  1. split the title to some mean words
  2. sorte the words and the tags . every element contains a url of the aticle.
  3. sort the words
  4. do some search in the sorted list . suport multi keywords
  5. output the result by the match degree
  6. highlight the result

hope this helps a little

In earlier discussion some users came up with a Grunt script that that processes all content files, extracts it’s metadata like title, url and the content itself and wrote it to a JSON file. Here’s the corresponding gist.

In the next step we use lunr.js to handle the search based on the JSON file.

But we should remember that this requires Node.js, Grunt and a bit of setup. Currently, the docs are automatically deployed using continuous integration services (either Wercker or TravisCI). This means, we would have to create with every pushed commit, that changes the docs, to update this JSON file.


Another approach would be to use bleve. Some fine folks created this indexing library written in native Go. They also created a prototype called hugoidx that combines it’s power. You can also see it in action.

In future versions of Hugo could this be integrated or part of a plugin.


Another possibilty would be the usage of a simple Google search form that redirects all requests to a Google search. Not pretty, but it should work for the beginning without much setup.

1 Like

There is also Algolia which has a Go client: https://www.algolia.com/doc/go#setup

But I didn’t try it. Actually I didn’t try any option other than Google CSE yet. :slight_smile:

I should have mentioned that site search has its own comment feed:

Also, I’ve mentioned the ability to write to JSON as a feature in the roadmap to 1.0.

It looks nice. I’m torn about the exposed # in front of the <h2> tags, wondering if Markdown newbies won’t get confused by it. :slight_smile:

@sjardim, can you give some narrative about the “whys” behind your design?

Looks really nice. On the mobile version the icons overlap the navigation links though:

@sjardim using Algolia for communities as the search provider looks promising to me. They’ve build prototypes for the docs of Bootstrap, React, Scala and other projects.

We could test the search in a prototype if you like.

Hi everyone!

I corrected a lot of issues including the ones mentioned above by @jeffreycentex, @Wulkan and @RickCogley. The search is not ready yet.

@RickCogley, about the design, it’s based on a template from CodyHouse like I mentioned and what I did was improve the foundation that Steve did, mainly changes on the typography, vertical rhythm and other details. Besides that I’m doing some content organization and some text changes as well.

thanks for the explanation @sjardim

If the docs ever contain languages which do not assume spaces between words, like CJK languages, then you have to watch out what search is implemented. Not all engines support it.

Also looking at the multilingual tutorial page, the formatting is wonky.

Looks like certain tags are not wrapping, or, there’s something up with the responsiveness. Note that I am looking at the site on a portait-orientated second monitor.

Also, I like the paragraph symbol that appears on :hover on the headings.

Very nice looking theme.
We (The Hugo Community) are lacking themes for documentation sites. Mkdocs has a good looking theme which looks similar to the readme pages http://www.mkdocs.org/#theming-our-documentation. I’ll take a stab at it over the weekend.

A while ago, I started working on a port of the popular Read the Docs theme. Some features of the original aren’t implemented due to some current limitations of Hugo.

But creating more themes for documentations that are powered by Hugo is a good idea.

Could you check it again? I think I corrected it. :slight_smile:

Thanks!

1 Like

@sjardim confirmed

Is anything happening with this? It looks great and the menu works on my phone. I have an issue with the official docs where the menu collapses once I start scrolling - it’s unusable. But this works perfectly.