budparr
commented
7 years ago Thanks for starting this. Where is this idea in terms of high-level approval? Seems to me could be a lot of work that could be for nought.
Closed rdwatters closed 7 years ago
budparr
commented
7 years ago Thanks for starting this. Where is this idea in terms of high-level approval? Seems to me could be a lot of work that could be for nought.
budparr
commented
7 years ago And, I think it would be a good idea to get a sense of what's important and what's not. e.g. colors, the "logo," such as it is. However, I'm happy to jump on this whenever it's appropriate.
digitalcraftsman
commented
7 years ago Right next to the gopher you added the Markdown logo. Markdown is perhaps the most widely used format but it could underrepresent the support for Asciidoc, reStructuredText and the Org mode.
Below you added a few commands to install Hugo via brew (on OS X). What do you think about the addition of a panel with tabs, where the user can choose the source manually? Currently, third-parties maintain packages for nearly every platform:
rdwatters
commented
7 years ago Sorry gents for the delay. You can see the latest homepage at
@budparr
Where is this idea in terms of high-level approval? Seems to me could be a lot of work that could be for nought.
Honestly, spf is still silent on the Gitter channel. The way I see it, the biggest problem with these docs isn't the design at all: it's the content. I might just tweet him at this point.
@digitalcraftsman
Right next to the gopher you added the Markdown logo.
You make a strong point. I removed the markdown logo. This was my own markdown-centric bias. That said, I use "Markdown without Limits" in the "features" row of the homepage. Any suggestions? I do at least call out the other formats below the heading...
OS X brew Windows chocolatey Linux Arch / Manjaro Debian / Ubuntu Fedora
I like this idea too. The little animated gopher (I need to a CC reference to Renee French) is now just about a go get command, but the panel idea is definitely a very slick one.
In fact, I could probably just write a little browser sniff that pulls up the command auto-magically, although scripts I've written before were only tested on Windows and OS X.
budparr
commented
7 years ago @rdwatters you are a man of action. See you created something already.
rdwatters
commented
7 years ago @budparr @digitalcraftsman Seems like some good news in the Twittersphere.
@rdwatters you are a man of action. See you created something already.
READ: man of compulsiveness, haha. But thanks @budparr
I could use your input on typography. I was going to let gohugo.io use my Typekit account...but it looks like my monthly limit is 500k. Gohugo.io is getting 1M+. Any suggestions on a free/open-source alternative to Museo Sans? Or just a better font? Code is currently using Roboto Mono.
If not, I have an actual purchased version of the font that I'm happy to donate...I clearly love this font :smile:
That said, I would still like input from both you guys because:
a. I'm not a designer. At all. The lion's share of the work I've done on this has to do with content and making the documentation usable and beginner friendly. This also meant improving the organization and URLs to be a bit more intuitive. My next big change will be redoing the "Quick Start" to showcase v18+ features and to be, well, quick. I'm very happy to take even the harshest of criticism on matters of visual design...which to me is always secondary. Seriously, we can completely scrap even this second homepage if that's what the maintainers want.
Even then, please keep the content revisions coming. I have a lot of editing and revisions to make yet. Thanks for the keen eye @digitalcraftsman.
b. Honestly, I'm not a huge fan of Hugo colors, so if you guys think we can do something else and get Steve to sign off on it, I'm open to do the coding even if it's just a matter of someone sending me a PSD file and me recreating it to spec. I'm really open on this...and I'm just not naturally drawn to hot pink.
budparr
commented
7 years ago I think an open source typeface would be most appropriate.
digitalcraftsman
commented
7 years ago Seems like some good news in the Twittersphere.
That's good news.
I could use your input on typography. I was going to let gohugo.io use my Typekit account...but it looks like my monthly limit is 500k. Gohugo.io is getting 1M+. Any suggestions on a free/open-source alternative to Museo Sans? Or just a better font? Code is currently using Roboto Mono.
1M+ would exceed your limit by far. I'll try some other fonts but the current looks pretty decent.
I'm very happy to take even the harshest of criticism on matters of visual design...which to me is always secondary. Seriously, we can completely scrap even this second homepage if that's what the maintainers want.
Overall, it's defenitely an improvement over the current design. Currently, the theme has a very sterilewhite. A rebranding with a new color scheme would be consequent.
digitalcraftsman
commented
7 years ago @rdwatters we also have a adapt the new design to the theme site. What pros and cons do you see if we treat the new design as a portable theme that can be included as a Git submodule in the Hugo main repo and the repo for the theme site?
This way we don't have maintain two code bases which might diverge. Updating a commit reference should be easier.
budparr
commented
7 years ago @rdwatters I think this font will get you close to what you like about Museo Sans, and it's open source, and there are no limits, of course. I think it works well at all sizes.
I think you have to watch using those lighter weights in there too (you have a 100 weight for the tagline, at least). You don't need all the weights I've listed here.
I'm happy to implement this.
rdwatters
commented
7 years ago I have Poppins locally and just added it to the static/fonts.
I have a handy little "fonts" mixin that's called at the top of _typography.scss.
The only thing about Poppins is that there is no italic. Thoughts? If either of you guys want to play with the typography, there is already a decently sized selection from what I have in the repo. You can probably infer the signature for calling the mixin from the above. The naming convention is just lowercased without spaces:
abrilfatface
courierprime
fontawesome
fontello
josefinsans
josefinslab
lato
librefranklin
merriweather
merriweathersans
montserrat
muli
opensans
playfairdisplay
poppins
proximanova
ptsans
ptserif
quicksand
raleway
roboto
robotomono
robotoslab
sourcecodepro
sourcesanspro
sourceserifpro
worksansI should probably remove Proxima Nova :smile:
rdwatters
commented
7 years ago @digitalcraftsman
Currently, the theme has a very sterilewhite.
That's either a lack of creativity on my part or just the assumption that the highest readability is always a) black text on a white background or b) white text on a black background. I know moorereason will be concerned about readability.
we also have a adapt the new design to the theme site. What pros and cons do you see if we treat the new design as a portable theme that can be included as a Git submodule in the Hugo main repo and the repo for the theme site?
Honestly, I see very few drawbacks and I'm all for sharing the final design one it's ready to launch.
Actually, I originally set it up as a theme (i.e. in themes folder), but I found that calling my readfile shortcode wasn't working as expected because it wasn't pulling from the root of the project directory. I didn't file an issue because I've been meaning to see if this is the intended behavior or not first and just haven't gotten around to it....
rdwatters
commented
7 years ago I think you have to watch using those lighter weights in there too (you have a 100 weight for the tagline, at least).
Agreed. Updated.
budparr
commented
7 years ago Funny. Didn't know that about the italics. I wonder why. At any rate, yeah I don't mind playing around. I don't find any of the open source fonts terribly inspiring, it just seems to me appropriate for the project.
rdwatters
commented
7 years ago I don't find any of the open source fonts terribly inspiring, it just seems to me appropriate for the project.
Agreed. I was a little tongue in cheek in saying how much I love Museo Sans, but I think it seems to work okay...and I'm happy to make the donation to Hugo if the three of us can't find a better free alternative.
budparr
commented
7 years ago Here's a draft of the home page, and a couple of notes. Been going through the copy, but it still needs some work there.
There's been some discussion about colors. I embraced the existing colors in this design and think I found a balance with them. Look forward to your feedback.
Note that here I'm using releases as news. I don't want to create work for anyone, or subvert any existing automated processes, but I know as a user that I like to see activity, so I created a place to list these items. Something to talk about.
I didn't use all the icons you had on your initial draft, Ryan, but happy to add those in.
@rdwatters Consider the "Muli" typeface. It's open-source and shares characteristics (loosely) with the HUGO in the brand image. I think it works well on headings and is capable with text. Let me know what you think.
When creating this page, I assumed an audience like this:
I tried to keep the messaging somewhere in the middle.
Also, @rdwatters . I don't know what happened to the blinking gopher eyes. Maybe you can tell me how you did that.
Note that I changed "The world's fastest static website engine. Written in Golang." to "the world’s fastest framework for building websites" to try to get to the heart of what someone might be coming here for. I think users care about a "framework" for "building websites" and that it's "fast." Whether or not "fastest framework" actually has meaning, is another question, but the overall phrase struck me as a strong assertion.
Link: http://hugo-home-page-concept-170315-v1.surge.sh/
Some screenshots:
digitalcraftsman
commented
7 years ago That looks absolutely awesome @budparr :beers:
Here are my two cents:
The hero section of the homepage should take the full screen height so that the news are shown at the bottom of the screen. Furthermore, the changing background color in the when hovering a news item makes it look like a link.
Perhaps we should add some kind of blog section where we threat the news as posts. Last year there were some discussions (somewhere in the forum) about the creation of a blog. @rdwatters?
Furthermore, the hero section has in opinion a but too much text.
budparr
commented
7 years ago Yeah, I think it's a very copy-heavy page in general, just wanted to make sure we said all the things, but certainly can be pared.
The news items are meant to be links to the full release notes or news item. I just took out the actual links until we decided whether not having them there was feasible. I hope so, because I think it's valuable. Unless there's an automated process for adding the release notes as they are now (all in one document) it doesn't seem like a news section would be much of a burden since there's already something there. Maybe there could be a group of the core team who are essentially editors and make sure that sort of thing gets posted. I know I'd be happy to help on that.
digitalcraftsman
commented
7 years ago I would propose that each release note etc. should be a single post. Adding them automatically to the homepage should be a no-brainer with a few lines of code.
budparr
commented
7 years ago @digitalcraftsman Thanks again for your comments. Responses to specific items:
1) I shortened the copy in the hero section by 26 characters (-15%). That copy doesn't feel perfect to me, but it's in the ballpark, and I think about the right length (comes to 3 lines on all but the smaller screens).
2) I tried both vertical height and padding to make the hero section take up more screen space, to focus on the hero and news, as you pointed out. I went with padding because the VH setting caused an unnatural space on large screens. The padding option seems okay, and I am, to a degree, indifferent between the original and how it is now. Let me know how you like it: Here's the link: http://hugo-home-page-concept-170315-v3-header.surge.sh/
rdwatters
commented
7 years ago Hey guys. Long day at work so I'll give this a thorough review tomorrow night but first impressions on my phone? I love it!
Oh, and the gopher is a combination of CSS keyframes pointing to IDs in the embedded svg and then a couple extracted animated.css classes that are added on scroll. The typing in the terminal is done with blast on top of velocity.js, the latter of which I use on all the JS-powered transitions since it's so good at obviating JQ-jank. More to come tomorrow. So stoked, Bud. Thanks a lot!
Sent from my iPhone
On Mar 15, 2017, at 10:01 PM, Bud Parr notifications@github.com wrote:
@digitalcraftsman Thanks again for your comments. Responses to specific items:
I shortened the copy in the hero section by 26 characters (-15%). That copy doesn't feel perfect to me, but it's in the ballpark, and I think about the right length (comes to 3 lines on all but the smaller screens).
I tried both vertical height and padding to make the hero section take up more screen space, to focus on the hero and news, as you pointed out. I went with padding because the VH setting caused an unnatural space on large screens. The padding option seems okay, and I am, to a degree, indifferent between the original and how it is now. Let me know how you like it: Here's the link: http://hugo-home-page-concept-170315-v3-header.surge.sh/
― You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.
rdwatters
commented
7 years ago D'oh! One more thing before I pass out. +1 on the Muli. It's already in the assets and is actually what I used for the original site I shared with the team!
Sent from my iPhone
On Mar 15, 2017, at 10:01 PM, Bud Parr notifications@github.com wrote:
@digitalcraftsman Thanks again for your comments. Responses to specific items:
I shortened the copy in the hero section by 26 characters (-15%). That copy doesn't feel perfect to me, but it's in the ballpark, and I think about the right length (comes to 3 lines on all but the smaller screens).
I tried both vertical height and padding to make the hero section take up more screen space, to focus on the hero and news, as you pointed out. I went with padding because the VH setting caused an unnatural space on large screens. The padding option seems okay, and I am, to a degree, indifferent between the original and how it is now. Let me know how you like it: Here's the link: http://hugo-home-page-concept-170315-v3-header.surge.sh/
― You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.
rdwatters
commented
7 years ago @budparr I will have time to dig in this afternoon. What is your preferred feedback mechanism, especially w/r/t content changes? I already have some notes if you're cool with the GH thread.
budparr
commented
7 years ago GH is fine. I had to build this in its own repo to make quick work of things, so I think right here is fine. Maybe you want to start a new thread just for content, and keep this one to design?
rdwatters
commented
7 years ago Let's stick with this thread since I'm only talking about content for the homepage. A couple quick notes before I hop into this meeting:
This looks even more fantastic on desktop, Bud. Thanks again.
P.S. Low-priority copy edit, but all instances of "OS X" are now "macOS."
budparr
commented
7 years ago Cool, thanks. Quickly, on your 2nd issue. They are meant to be links, there's just nothing to link to until we set up a page for them.
rdwatters
commented
7 years ago This line is pure gold:
Flexibility rules. Hugo is a content strategist's dream.
ghost
commented
7 years ago This looks fantastic @budparr ! Just a couple of comments from an amateur:
budparr
commented
7 years ago Quick aside. As you may know, Smashing Magazine is moving to Hugo/Netlify, launching today, I think. Netlify has put out a video. It doesn't mention Hugo, but there's sure to be some, and perhaps, at some point, we could put a "look who's using Hugo" type of thing.
budparr
commented
7 years ago Thanks, @sethmacleod !
There's a huge difference between a framework and what is thought of as a "static site generator," which can be anything, for example, Gulp, Grunt, etc. There are nearly 500 of them. What separates Hugo from the rest, aside from the build-times, is that you can really get a lot done with it. You don't have to think about how to set up pagination, for example, or even Google Analytics; Hugo does it for you, yet, still gives you the flexibility to do most things how you want. That to me is the very definition of a framework, and quite likely with the new audiences coming to static, a selling point.
When I think of Bootstrap as a framework, I think of it in negative terms, but when I think of Angular as a framework, I think of it in positive terms. I think, given the nature of the tool, and where things are going, framework is a positive here.
There's a good reason that Netlify invented the term "JAMstack," and that's to get away from the word "static." You see I haven't shied away from the word, but I do think it needs to put in the light of what Hugo actually does for people who are making, or who own websites.
That said, I'm not married to that wording, or any wording there. My rule is put your best foot forward, get it out in the world, and see what sticks. Hope that wasn't too much of a response!
Thanks again!
rdwatters
commented
7 years ago @digitalcraftsman has done a really nice job with the showcase.
But in blog posts mentioning this stuff? Definitely. That's very cool about Smashing!:)
Sent from my iPhone
On Mar 16, 2017, at 2:11 PM, Bud Parr notifications@github.com wrote:
Quick aside. As you may know, Smashing Magazine is moving to Hugo/Netlify, launching today, I think. Netlify has put out a video. It doesn't mention Hugo, but there's sure to be some, and perhaps, at some point, we could put a "look who's using Hugo" type of thing.
― You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.
rdwatters
commented
7 years ago @budparr That video says it's unavailable? Do I need to be invited?
budparr
commented
7 years ago No, it's private until they make the official announcement, which should be soon.
rdwatters
commented
7 years ago Ahhh, I already wrote and asked to see it, haha.
rdwatters
commented
7 years ago That said, I'm not married to that wording, or any wording there. My rule is put your best foot forward, get it out in the world, and see what sticks.
Always.
However, I think the only one that pops up to me as expendable is the one on Markdown, because I think the people who care about that will go looking for it, in my opinion.
Now that shortcodes already have their own row that includes markdown, yes. Also, if you've been following recent issues on the Hugo repo, it looks like there are changes afoot w/r/t org-mode. I think we can delete the markdown row altogether.
Re: framework, I normally think of Bootstrap, Foundation, etc., and I think of static site generator for Hugo, Jekyll, etc. It might be confusing to call Hugo a framework. Maybe not.
I can see the association, but remember that even .Net was a "framework" well before bootstrap existed. I think of ember.js as a framework. Although I agree with @budparr about a dislike of bootstrap/foundation/etc (but maybe more so, since I've never used a CSS framework), the intention and impact of "framework" is sort of universally understood to mean "As a developer, you'll be more productive because we made all these trivial, time-consuming decisions for you." This is also why i like the included copy around templates...which also emphasizes that we need to get those documented.
There's a huge difference between a framework and what is thought of as a "static site generator," which can be anything.
Agreed. Why I went with "web engine," which seemed to be Steve's preferred terminology. "JAMStack" is slick marketing, but I'm glad you didn't put it on this site:)
Other considerations:
go get is soon to not be the recommended installation method.budparr
commented
7 years ago Okay, I put up a new version.
Changes:
http://hugo-home-page-concept-170316-v1.surge.sh/
budparr
commented
7 years ago Crossed, paths @rdwatters - will check out your post now.
budparr
commented
7 years ago If you don't mind, @rdwatters I'd like to push back on a copy change. I respect the comment about "polyglot" being low frequency, but a) It has the "Multilingual and i18n" copy next to it as a modifer, and
b) I don't this works as well as
this, visually speaking:
budparr
commented
7 years ago This is a good line: "The Community has your back with common patterns to get your work done quickly," but the row sends two different message; i.e. with the community providing templates versus Hugo shipping with them.
Agree, and was a bit uncomfortable with that, too. It implies too much, though what I was trying to get across was that the project is community driven. I'll think of something else, but please do suggest something if you have it.
I think the internal templates are a neat time-saving featured, and hope you all agree it should be there.
budparr
commented
7 years ago Typo in "What's modern about waiting for you site to build?" That is, should be "your."
fixed
[ ] If you want me to animate "El Hugopher" (the cheeky Lucha Libre alter ego of Hugo Langoria, all of which I just made up now), let me know. We also need to change the command line text anyway since go get is soon to not be the recommended installation method.
[ ] I don't like icon fonts, but I cheated and made a much-smaller-than-font-awesome custom font with fontello. You should be able to find it in the static folder if you need it. (I'm just looking at the footer icons.) As far as any other icons I had on the homepage, let's just forget they ever existed 😄
rdwatters
commented
7 years ago If you don't mind, @rdwatters I'd like to push back on a copy change.
I'm a publisher that works with a couple hundred doctors; pushback is my milieu. I'm cool with keeping "polyglot." :smile:
Are you thinking I should make the fixed header black background on the actual docs? Thoughts @digitalcraftsman? We should all keep in mind that the themes site will need to be worked on as well.
Also, I'll be out of pocket until tomorrow evening, but I'm planning on tackling many of the most recent issues I've posted over the last week. Oh, and the live site is Muli, FYI. Thanks again, @digitalcraftsman @sethmacleod @budparr Cheers!
budparr
commented
7 years ago I'm happy to apply this styling to the docs site. I'm a bit blinded by the sea of white and text on the docs site and would love to see some color in there to differentiate parts.
budparr
commented
7 years ago And, @rdwatters if this page is going to go forward, you and I should have a discussion about how to integrate it into your repo, or if it would live separately. I read the forum posts about a blog, and the suggestion there was to keep it separate, and if the blog is separate, then the home page is most integral with that. Thoughts?
rdwatters
commented
7 years ago I read the forum posts about a blog, and the suggestion there was to keep it separate, and if the blog is separate, then the home page is most integral with that. Thoughts?
I agree. There is some talk of future versions going a different route than the all-in-one-repo approach. I think the docs, blog, and homepage would all be in a single repository with Hugo source elsewhere. As in, multiple repositories within a GitHub organization or similar.
Just a couple notes out of respect for your time:
Again, this homepage is super awesome and thank you @budparr!
budparr
commented
7 years ago Well, from an earlier thread, it was pointed out that the docs should be versioned with the underlying software, but I think the home page and blog would best be alone so as to encourage participation (i.e. it's pretty clear when forking a simple repo, and tests, etc).
budparr
commented
7 years ago I'm starting to wonder whether the new docs will make it in v20 vs v21 vs v22
I've already started to use the new version when I'm working. Not for me to say, of course, but I think get them out in the world, at least when you've got a critical mass of content. The legacy docs could be published as well, for anyone wanting cross-reference.
rdwatters
commented
7 years ago I've already started to use the new version when I'm working. Not for me to say, of course, but I think get them out in the world, at least when you've got a critical mass of content.
I think everyone agrees with you, especially me: otherwise this will be an endless WIP. That said, currently only one person on the team has access to make those decisions, so it's definitely not for me to say either.
budparr
commented
7 years ago Who needs to approve these things? Steve?
budparr
commented
7 years ago New version with copy change from issue #42
http://hugo-home-page-concept-170317-v1.surge.sh/
budparr
commented
7 years ago Open questions:
1) Is the design ready for approval by Hugo's core team? 2) Should we add news/blog section? (I think everyone wants this, but previous discussions got stalled. I also think that even if the content were only releases, as a fallaback, that may be enough). 3) Where should the home page (and potentially, news/blog) live? (my argument is that the home page and blog don't need to be versioned with the code, and it would be easier for contributors if it were its own repo.)
Initial design discussion on current version starts here: https://github.com/rdwatters/hugo-docs-concept/issues/3#issuecomment-286723555
Very rough interior page for blog/news: https://github.com/rdwatters/hugo-docs-concept/issues/3#issuecomment-287190956
Current prototype here: http://hugo-home-page-concept-170317-v1.surge.sh/
Feeling that the current homepage is a bit cheesy. I want this to look more like a slick marketing/landing page extolling some of Hugo's features.
This will likely live on a subdomain for review during developer (e.g. https://hp.hugodocs.info).
Some other OS projects with slick landings:
Parse Feather.js Yarn Hyper Bulma