Initial review notes, 18 Dec

jessicaschilling commented 3 years ago

Hi @Ricardo-Silva91 -- wanted to do as much review as I could so you had some stuff to think about when you came back from your holidays! We will probably need to do a really detailed review once you're closer to done, but here are some first questions/requests. Also added https://github.com/Ricardo-Silva91/ipfs-blog-vuepress/pull/5 with some minor text/CSS edits that were just quicker to address that way ... please feel free to correct any poor code on my part 😊

Thank you so much! This looks awesome and it's so exciting to see it closer to real.

Site-wide: general

Some stuff needs tweaking for mobile widths, but I think you're already aware of that:
- Individual blog page headers
- Main page introductory and search info
- Footer content
Please make the favicon an IPFS cube instead of the PL logo 😊 ... can we also please make this tab title "Home | IPFS Blog & News"?

Main page: general

Is it possible for search/sort result views to be reflected in the URL, so a user could share a search?
It doesn't look like cards appear in reverse-date order across all content types. Can this please be the case?
On the main page, if we're displaying cards as a grid rather than masonry, we should make them all the same height. Please make max-height the equivalent to (3 lines title + author/date + 1 row tags + 5 lines teaser text).
We may want to make the breakpoint to go down from 3-cards wide to 2-cards a bigger number; they look cramped at tablet width. Might be worth seeing how this looks with uniform card heights first, though - your ideas?

Main page: introductory text and search info

In the introductory text at the top of the main page, please make all these icons slightly bigger (to match wireframe), all the same size, and the same color/color hover as page buttons:
RSS isn't implemented yet - just confirming that's on our radar?
There's still some weird behavior in the search as a whole, but I don't want to dig too deep until you're done ironing the known bugs out 😊
Please make text "Search for words or #tags" the same size as "All content" here:
In the search results box, border-opacity-10 isn't working for some reason. Do you mind a look? In any case, the border should be the same color as the borders above it for the dropdowns, but slightly wider.
In the search results box, can you please make the following modifications? Example screenshot below.
- Can tags in the search results info look visually the same as in the search field above them (darker teal, white text, "x" on right - but not the smaller font)?
- Can tags in the search results please have the # text in them?
- If 0 results, please add s to result

Main page: individualcards

For author names on cards ...
- Please remove the profile images (I know this is inconsistent with the PL blog)
- This might mean you need to add some vertical margin to the line with the author name to make it not look crowded
- Please make author names clickable, to result in a search view for all items by author.
- This would mean that for content with multiple authors, it would be multiple clickable authors rather than one author of "John Smith and Jane Doe".
- Please note that blog posts are the only types of content that should have authors.
Please make tag chicklets with dashes etc not word-break, and please wrap the chicklet div as a whole to multiple lines if need be:
Please add # to chicklets for tags, and please add a first chicklet for all cards with that card's content type (no #, clickable to a drilldown of all items of that content type). (see wireframe screenshot below)
Please make titles that are longer than 3 lines truncate with ellipses:
On cards, can we please make the "Lorem ipsum" for blog pages just pull the first 5 lines of the blog body, truncated with an ellipses? (see notes above about standard height for what might dictate how many characters)
For blog and news links that don't have a hero image, can we please steal this one from the existing blog? https://blog.ipfs.io/header_images/blog-placeholder.png

Main page: footer

In the footer newsletter signup, please make the "please send me..." text span the full width of the button/field combo above it:
For the newsletter example, could we please make this link to the most recent post tagged weekly so it's always up to date?

Individual blog pages

On individual blog pages, can we please have tags preceded by # and have them be the same teal color with white text as in the search drilldown on the main page?
On individual blog pages, can links/link hovers be the same color as elsewhere?
On individual blog pages, can the social icons please all be the same size, and have the same color/color hover as page buttons?
On individual blog pages, can the social icons link to the appropriate social service as a page share?
On individual blog pages, can you please remove the author image, and make each author's name clickable to a search as described above for the main page?

Note

One last note about the lazy-load on the main page to follow up on our conversation from the other day: We're not concerned about the footer being difficult to reach in lazy-load mode, except for the newsletter signup material - because that's linked to from the introductory text on the main page. Is it possible to make sure that a user who clicks the newsletter signup link in that introductory text, while in lazy-load mode, actually gets to the newsletter signup section of the footer?

jessicaschilling commented 3 years ago

@Ricardo-Silva91 - two more quick notes on images:

One major pain point in the old blog is that images don't scale/crop in elegant ways, leading to awkward display like https://ipfsblog-vuepress.netlify.app/_099-identity-ipfs-ion/. Would prefer not to crop automatically so we don't see things like that example, but this probably means two things:
- Keep the same aspect ratio for the card and for the hero image
- Allow the user to reposition/crop the photo to fit that aspect ratio at the time of upload from within the Forestry form interface
For newslink content types, can we please add the ability to upload an image for the card? Would also need a similar scale/crop solution as mentioned above.

Additionally, for the newslink content type, I don't think we need a name AND a title: Unless I'm missing something, I think the title field can suffice for both uses. Am I correct that "name" is only used as an internal name for a particular datum?

Ricardo-Silva91 commented 3 years ago

Hi @jessicaschilling , here's the checklist for the review

Site-wide: general

Some stuff needs tweaking for mobile widths, but I think you're already aware of that:

[x] Individual blog page headers

[x] Main page introductory and search info

[x] Footer content

[x] Please make the favicon an IPFS cube instead of the PL logo 😊 ... can we also please make this tab title "Home | IPFS Blog & News"?

Main page: general

[x] Is it possible for search/sort result views to be reflected in the URL, so a user could share a search?

[x] It doesn't look like cards appear in reverse-date order across all content types. Can this please be the case?

[x] On the main page, if we're displaying cards as a grid rather than masonry, we should make them all the same height. Please make max-height the equivalent to (3 lines title + author/date + 1 row tags + 5 lines teaser text).

[x] We may want to make the breakpoint to go down from 3-cards wide to 2-cards a bigger number; they look cramped at tablet width. Might be worth seeing how this looks with uniform card heights first, though - your ideas?

Main page: introductory text and search info

[x] In the introductory text at the top of the main page, please make all these icons slightly bigger (to match wireframe), all the same size, and the same color/color hover as page buttons:

[ ] RSS isn't implemented yet - just confirming that's on our radar? 🟨 It is implemented in the same way that it was in prrotocol.ai, where it also rreturns 404 for local and netlify envs, but I will speak with Chris about it ☺️

[x] There's still some weird behavior in the search as a whole, but I don't want to dig too deep until you're done ironing the known bugs out 😊 I think I got everything (including the keyboard-only friendly navigation, but let me know if something needs fix 😄
[x] Please make text "Search for words or #tags" the same size as "All content" here:
[x] In the search results box, border-opacity-10 isn't working for some reason. Do you mind a look? In any case, the border should be the same color as the borders above it for the dropdowns, but slightly wider.
- In the search results box, can you please make the following modifications? Example screenshot below.
[x] Can tags in the search results info look visually the same as in the search field above them (darker teal, white text, "x" on right - but not the smaller font)?
[x] Can tags in the search results please have the # text in them?

[x] If 0 results, please add s to result

![image](https://user-images.githubusercontent.com/1507828/102661955-13714b80-413b-11eb-9a32-cf374faf3160.png)
Main page: individualcards

For author names on cards ...

[x] Please remove the profile images (I know this is inconsistent with the PL blog)
[x] This might mean you need to add some vertical margin to the line with the author name to make it not look crowded
[x] Please make author names clickable, to result in a search view for all items by author.
[x] This would mean that for content with multiple authors, it would be multiple clickable authors rather than one author of "John Smith and Jane Doe". for this, in the frontmatter, the authors can be separated by ',' or '&'
[x] Please note that blog posts are the only types of content that should have authors.
[x] Please make tag chicklets with dashes etc not word-break, and please wrap the chicklet div as a whole to multiple lines if need be:
[x] Please add # to chicklets for tags, and please add a first chicklet for all cards with that card's content type (no #, clickable to a drilldown of all items of that content type). (see wireframe screenshot below)
[x] Please make titles that are longer than 3 lines truncate with ellipses:
[x] On cards, can we please make the "Lorem ipsum" for blog pages just pull the first 5 lines of the blog body, truncated with an ellipses? (see notes above about standard height for what might dictate how many characters)
[x] For blog and news links that don't have a hero image, can we please steal this one from the existing blog? https://blog.ipfs.io/header_images/blog-placeholder.png

Main page: footer
[x] In the footer newsletter signup, please make the "please send me..." text span the full width of the button/field combo above it:
[x] For the newsletter example, could we please make this link to the most recent post tagged weekly so it's always up to date?

Individual blog pages
[x] On individual blog pages, can we please have tags preceded by # and have them be the same teal color with white text as in the search drilldown on the main page?
[x] On individual blog pages, can links/link hovers be the same color as elsewhere?
[x] On individual blog pages, can the social icons please all be the same size, and have the same color/color hover as page buttons?
[x] On individual blog pages, can the social icons link to the appropriate social service as a page share? not sure what you mean by this, when I click the icon it opens the dialog for sharing the page in the social network
[x] On individual blog pages, can you please remove the author image, and make each author's name clickable to a search as described above for the main page?

I will now look into the two new notes 😌

jessicaschilling commented 3 years ago

Found a small bug: After tagging all posts correctly in https://github.com/Ricardo-Silva91/ipfs-blog-vuepress/pull/9 I notice that for link card types, unless there are other tags present, the category chicklet doesn't display at all. See https://ipfsblog-vuepress.netlify.app/?tags=&search=&category=Video&author -- @Ricardo-Silva91 or @jdiogopeixoto, can you please investigate?

jessicaschilling commented 3 years ago

@Ricardo-Silva91 and @jdiogopeixoto - One other bug, I'm afraid: I'm adding remaining blog posts via Forestry's own interface (to check for bugs!) and find that using Forestry's "header image" picker to recycle a header image results in a broken image in the published post.

Compare:

https://app.forestry.io/sites/o1m1vi-99lz4lw/#/pages/src-_blog-weekly-112-welcome-to-ipfs-weekly-112-md/ (screenshot below)
https://ipfsblog-vuepress.netlify.app/welcome-to-ipfs-weekly-112/ (missing image)

jessicaschilling commented 3 years ago

Closing this issue, since most of it has already been taken care of 😊 Capturing the remainder in separate issues, for more bite-sized work.

ipfs / ipfs-blog