Skip to content

[blog] Add new product tags and stray adjustments #41193

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
danilo-leal merged 4 commits into from
Feb 20, 2024
Merged

[blog] Add new product tags and stray adjustments #41193

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8f9188f
add tags for individual products
danilo-leal Feb 19, 2024
766d43c
adjust tags on certain posts
danilo-leal Feb 19, 2024
b899f79
stray design tweaks
danilo-leal Feb 19, 2024
18a12f5
lint: use unicode for the quote
danilo-leal Feb 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
stray design tweaks
  • Loading branch information
@danilo-leal
danilo-leal committed Feb 19, 2024
commit b899f79fbab00e4bae87005f02c9b47a04a73504
164 changes: 74 additions & 90 deletions docs/pages/blog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ import HeroEnd from 'docs/src/components/home/HeroEnd';
import Link from 'docs/src/modules/components/Link';
import generateRssFeed from 'docs/scripts/generateRSSFeed';
import Section from 'docs/src/layouts/Section';
import SectionHeadline from 'docs/src/components/typography/SectionHeadline';
import { getAllBlogPosts, BlogPost } from 'docs/lib/sourcing';

export const getStaticProps = () => {
Expand All @@ -41,7 +42,7 @@ export const getStaticProps = () => {
function PostPreview(props: BlogPost) {
return (
<React.Fragment>
<Box sx={{ display: 'flex', gap: '6px', mb: 1.5 }}>
<Box sx={{ display: 'flex', gap: 0.5, mb: 1.5 }}>
{props.tags.map((tag) => (
<Chip
key={tag}
Expand All @@ -50,8 +51,12 @@ function PostPreview(props: BlogPost) {
variant="outlined"
color="primary"
sx={(theme) => ({
height: 22,
fontWeight: 'medium',
fontSize: theme.typography.pxToRem(12),
fontSize: theme.typography.pxToRem(13),
'& .MuiChip-label': {
px: '6px',
},
...theme.applyDarkStyles({
color: (theme.vars || theme).palette.grey[200],
}),
Expand Down Expand Up @@ -254,91 +259,70 @@ export default function Blog(props: InferGetStaticPropsType<typeof getStaticProp
/>
<AppHeader />
<main id="main-content">
<Box
sx={(theme) => ({
background: `linear-gradient(180deg, #FFF 50%,
${(theme.vars || theme).palette.primary[50]} 100%)
`,
...theme.applyDarkStyles({
background: `linear-gradient(180deg, ${
(theme.vars || theme).palette.primaryDark[900]
} 50%,
${alpha(theme.palette.primary[800], 0.2)} 100%)
`,
}),
})}
>
<Section bg="transparent" cozy>
<Typography
variant="body2"
color="primary.main"
fontWeight="bold"
textAlign="center"
gutterBottom
>
Blog
</Typography>
<Typography
component="h1"
variant="h2"
textAlign="center"
sx={{ mb: { xs: 5, md: 10 } }}
>
The <GradientText>latest</GradientText> about MUI
</Typography>
<Box
component="ul"
sx={{
display: 'grid',
m: 0,
p: 0,
gap: 2,
gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
}}
>
{[firstPost, secondPost].map((post) => (
<Paper
key={post.slug}
component="li"
variant="outlined"
sx={[
{
p: 2,
display: 'flex',
flexDirection: 'column',
position: 'relative',
boxShadow: '0px 4px 16px rgba(170, 180, 190, 0.2)',
'&:focus-within': {
'& a': {
outline: 0,
},
<Section cozy bg="gradient">
<SectionHeadline
alwaysCenter
overline="Blog"
title={
<Typography variant="h2" component="h1">
Stay <GradientText>in the loop</GradientText> with
<br /> the latest about MUI's products
</Typography>
}
/>
<Box
component="ul"
sx={{
display: 'grid',
m: 0,
p: 0,
pt: 8,
gap: 2,
gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
}}
>
{[firstPost, secondPost].map((post) => (
<Paper
key={post.slug}
component="li"
variant="outlined"
sx={[
{
p: 2,
display: 'flex',
flexDirection: 'column',
position: 'relative',
boxShadow: '0px 4px 16px rgba(170, 180, 190, 0.2)',
'&:focus-within': {
'& a': {
outline: 0,
},
},
(theme) =>
theme.applyDarkStyles({
boxShadow: '0px 4px 16px rgba(0, 0, 0, 0.4)',
}),
]}
>
{post.image && (
<Box
component="img"
src={post.image}
sx={{
aspectRatio: '16 / 9',
width: '100%',
height: 'auto',
objectFit: 'cover',
borderRadius: '4px',
}}
/>
)}
<PostPreview {...post} />
</Paper>
))}
</Box>
</Section>
</Box>
},
(theme) =>
theme.applyDarkStyles({
boxShadow: '0px 4px 16px rgba(0, 0, 0, 0.4)',
}),
]}
>
{post.image && (
<Box
component="img"
src={post.image}
sx={{
aspectRatio: '16 / 9',
width: '100%',
height: 'auto',
objectFit: 'cover',
borderRadius: '4px',
}}
/>
)}
<PostPreview {...post} />
</Paper>
))}
</Box>
</Section>
<Divider />
<Container
ref={postListRef}
Expand Down Expand Up @@ -379,11 +363,11 @@ export default function Blog(props: InferGetStaticPropsType<typeof getStaticProp
p: 2,
borderRadius: 1,
border: '1px solid',
background: 'rgba(255, 255, 255, 0.2)',
borderColor: (theme.vars || theme).palette.grey[200],
borderColor: (theme.vars || theme).palette.divider,
boxShadow: '0px 2px 6px rgba(170, 180, 190, 0.2)',
...theme.applyDarkStyles({
background: alpha(theme.palette.primaryDark[700], 0.2),
borderColor: (theme.vars || theme).palette.primaryDark[700],
boxShadow: '0px 2px 6px rgba(0, 0, 0, 0.2)',
}),
})}
>
Expand Down Expand Up @@ -430,8 +414,8 @@ export default function Blog(props: InferGetStaticPropsType<typeof getStaticProp
);
})}
</Box>
<Divider sx={{ mt: 3, mb: 2 }} />
<Typography color="text.primary" fontWeight="semiBold" sx={{ mb: 1 }}>
<Divider sx={{ my: 2 }} />
<Typography color="text.primary" fontWeight="semiBold" gutterBottom>
Want to hear more from us?
</Typography>
<Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
Expand Down
6 changes: 6 additions & 0 deletions docs/src/modules/brandingTheme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -951,6 +951,9 @@ export function getThemedComponents(): ThemeOptions {
},
'& .MuiChip-deleteIcon': {
color: (theme.vars || theme).palette.primary[600],
'&:hover': {
color: (theme.vars || theme).palette.primary[700],
},
},
...theme.applyDarkStyles({
color: (theme.vars || theme).palette.primary[100],
Expand All @@ -960,6 +963,9 @@ export function getThemedComponents(): ThemeOptions {
},
'& .MuiChip-deleteIcon': {
color: (theme.vars || theme).palette.primary[100],
'&:hover': {
color: (theme.vars || theme).palette.primary[50],
},
},
}),
}),
Expand Down