[website] Add a Blog index page

[danilo-leal]

• I have followed (at least) the PR section of the contributing guide.

Let's give the MUI content a proper house :) For now, this is just design prototyping, no code to review. But we could use this PR for the actual build!

• [RFC] Blog index page #29277
• Deploy preview: https://deploy-preview-30121--material-ui.netlify.app/blog/

[mui-pr-bot]

No bundle size changes

Generated by 🚫 dangerJS against a442ea4

[siriwatknp]

@mui-org/core @mui-org/x The 1st iteration of the blog index is here!

This are the checklist for 2nd iteration (feel free to comment before I make the change)

• I think available tags should be sourced from all the blog posts instead of using a hard-coded constant.
• At the end of each tag, add a number to indicate the amount blog posts related to the tag
• Hide the blog under feature toggle so that this PR can be merged (I think we need at least 5 blog posts that are not News or Company if we want to make the blog index alive)

[mnajdova]

I absolutely love it :D

[mnajdova]

The tags don't seem to work. For example, new posts for new joiners:

[siriwatknp]

The tags don't seem to work. For example, new posts for new joiners:

Yes, you are right. I haven't updated the tags in the markdown files, that's why it does not work. I will do it in the next iteration.

[siriwatknp]

👍 I am excited!

[m4theushw]

Awesome! I always clicked "Blog" in the footer hoping to see all posts but then it went to Medium. 😂

[mui-bot]

No bundle size changes

Generated by 🚫 dangerJS against 481fe14

[michaldudak]

Or maybe a small description to the All posts title to be added once a filter is applied, describing the same All posts about "Company".

This doesn't look well in all cases: "Posts about News" doesn't look right. Maybe "Posts tagged as News"?

Side note - perhaps in the future we could make author names clickable to display posts written by a specific person?

[siriwatknp]

Side note - perhaps in the future we could make author names clickable to display posts written by a specific person?

Absolutely, this PR is the minimal version to encourage more blog posts and promote our content. Once we have more people reading the blog (not sure how much), we can list out more features at that point!

[danilo-leal]

"Posts tagged as News"

Done! Good suggestion :)

[michaldudak]

Looks good to me now!

[oliviertassinari]

It's great to have this index page. A few feedback:

1. Why is the background color not #ffffff? It would improve the text contrast ratio when reading. And second, it would look cleaner when we embed images: https://mui.com/blog/2020-developer-survey-results/. I have the impression that all the blogs I'm following are white. Maybe the issue is with the gradient. Should it be 500px wide like in the Figma's blog iteration, not the whole page?
2. Why no image previews? We are a UI company, I assume a lot of what we will talk about will have visuals. For instance companies in the same UI space: https://storybook.js.org/blog/, https://ionicframework.com/blog/, https://retool.com/blog, https://blog.getbootstrap.com/, https://blog.ag-grid.com/. I had left this question in https://www.figma.com/file/4uv2dT18rXJPZBbrbpw61q/Marketing-site?node-id=4914%3A34635
3. Filter by tag. Will should be able to add "MUI Core" and "MUI X" tags now :) e.g. for [blog] Introducing the Row Grouping feature #30598 that @alexfauquette works on. But we can also apply it to the older blog posts.
4. "Blog" in the footer points to medium.com:

and there are other instances like this in the codebase, like on https://mui.com/getting-started/support/#blog, and more.

[danilo-leal]

1. Yeah, the initial intention was for the gradient background to be very short and not span through the whole page. We'll iterate on this in the future, even though it ended up being very cool as it is to me.
2. I wouldn't have the image previews for posts in the list, it would be too polluted. I'd rather display the cards in the featured ones only. However, cards the way we do them today are quite redundant (basically the post title). It would be interesting if we managed to have an automatic generated open graph image and a heading/hero image for the post itself, to actually illustrate somehow the post subject.

Other points were solved already.
Another idea that came to mind, also for future iteration is that the featured posts shouldn't be the ones that were published last but rather selected ones. So maybe at the top of the markdown file, we could have a key like featured: yes, similar to how we do at Twitter with pinned tweets, but in our case being able to pin 2 :)

[oliviertassinari]

@danilo-leal

1. Right, +1 for trying with a fixed size gradient. It would maximize the contrast for the reading experience and make it more noticeable on long blog post. Maybe it would also be interesting to add it on dark mode (it doesn't seem to exist, looking at the page, but I didn't check the code)
2. I agree that the cards we have today are only valuable for social sharing. It's why I think all new blog post should have it (social only). I also agree that the current cards add almost nothing to the interest in the blog post when displayed in the list and page view, it repeats. What I'm proposing is that, as we grow the design org, we gain the bandwidth to create valuable illustrations for each blog post. The value is that they are supported to increase the CTR on the index page and Google Search results. IMHO we are missing out on this. I think that it will be important to have. It was one of the SEO recommendations in https://www.notion.so/mui-org/Level-up-our-SEO-game-4cb1e8a347134751b2209d6772a769ac#1e4c5970138c4ab1b55a58e5e773f12e
3. I have added the idea on the pinning to https://www.notion.so/mui-org/Improve-blog-posts-infra-bcae2b15493f4daba0758adf499f7793