[draft][material-ui] Refine Blog template

[zanivan]

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

Part of https://github.com/mui/material-ui/issues/37555

⚠️ Work in progress ⚠️
This is an initial draft and further improvements are expected.

Current	Prototype

Figma prototype

👉 https://deploy-preview-42825--material-ui.netlify.app/material-ui/getting-started/templates/blog/

[mui-bot]

Netlify deploy preview

https://deploy-preview-42825--material-ui.netlify.app/

Bundle size report

No bundle size changes (Toolpad) No bundle size changes

Generated by :no_entry_sign: dangerJS against b856b5417211ce9b43ab85e566f81bdba1ef4172

[zanivan]

@DiegoAndai could you help me with failing tests? After fixing it, I believe this is ready for review :)

test_lint seems to be failing on this file, but I don't know exactly what it does.

[DiegoAndai]

Hey @oliviertassinari! This template no longer uses markdown, so docs/data/material/getting-started/templates/blog/Markdown.tsx (and .js) were removed. We have a test that uses it here: https://github.com/mui/material-ui/blob/next/benchmark/server/scenarios/docs.js

Can we remove it from the benchmark test? Asking as you initially introduced the test (PR):

diff --git a/benchmark/server/scenarios/docs.js b/benchmark/server/scenarios/docs.js
index 25fa13feb8..a26b6d85cf 100644
--- a/benchmark/server/scenarios/docs.js
+++ b/benchmark/server/scenarios/docs.js
@@ -5,7 +5,6 @@ import Benchmark from 'benchmark';
 import * as React from 'react';
 import * as ReactDOMServer from 'react-dom/server';
 import { MarkdownElement } from '@mui/docs/MarkdownElement';
-import Markdown from 'docs/data/material/getting-started/templates/blog/Markdown';
 import { createStore } from 'redux';
 import { Provider } from 'react-redux';
 
@@ -28,9 +27,6 @@ const store = createStore((state) => state, {
 });
 
 suite
-  .add('Markdown', () => {
-    ReactDOMServer.renderToString(<Markdown>{markdown}</Markdown>);
-  })
   .add('MarkdownElement', () => {
     ReactDOMServer.renderToString(
       <Provider store={store}>

[zanivan]

@aarongarciah I forgot you were on PTO this week, so I'm merging this one to start working on unifying the themes and making it consistent. Feel free to add your feedback here or in an issue, and I'll address it in a future PR 👍

[aarongarciah]

Great work @zanivan. I didn't review the PR in depth, but a couple of details caught my eye:

• It took me a while until I realized there was a theme switcher at the bottom.
• The padding on the chips looks too tight.
• The hover state on the chips maybe is a bit too subtle.
• The hover state with the underline effect feels slow on the "Latest" articles. Maybe we could explore another effect e.g. underline all of the text rows in case of multiline title and use a fade-in effect instead of animating the underling. The underline taking the whole block widths feels a bit weird.