array-in-a-matrix/bloginamatrix.xyz
1
0
Fork 0
Code Issues 5 Pull requests Projects Releases Packages Activity

add gradient if no hero image available

Browse source
This commit is contained in:
array-in-a-matrix 2024-01-15 20:35:53 -05:00
parent d2a0ec152f
commit 810b9ee1f8
2 changed files with 10 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/layouts/BlogPost.astro
View file

@ -5,7 +5,6 @@ import Header from '../components/Header.astro';
import FormattedDate from '../components/FormattedDate.astro'; import FormattedDate from '../components/FormattedDate.astro';
type Props = CollectionEntry<'blog'>['data']; type Props = CollectionEntry<'blog'>['data'];
const { title, description, pubDate, updatedDate, heroImage } = Astro.props; const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
--- ---
@ -51,6 +50,10 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
font-style: italic; font-style: italic;
} }
</style> </style>
<script>
function randomColor() {return "#000000".replace(/0/g,function(){return (~~(Math.random()*16)).toString(16);});}
gradient.style.cssText += `background: linear-gradient(${randomColor()},${randomColor()})`;
</script>
</head> </head>
<body> <body>
@ -58,7 +61,7 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
<main> <main>
<article> <article>
<div class="hero-image"> <div class="hero-image">
{heroImage && <img width={1020} height={510} src={heroImage} alt="" />} {heroImage ? <img width={1020} height={510} src={heroImage} alt="" /> : <img width={1020} height={510} id="gradient" alt="" />}
</div> </div>
<div class="prose"> <div class="prose">
<div class="title"> <div class="title">

6
src/pages/index.astro
View file

@ -82,6 +82,10 @@ const posts = (await getCollection('blog')).sort(
} }
} }
</style> </style>
<script>
function randomColor() {return "#000000".replace(/0/g,function(){return (~~(Math.random()*16)).toString(16);});}
gradient.style.cssText += `background: linear-gradient(45deg,${randomColor()},${randomColor()})`;
</script>
</head> </head>
<body> <body>
<Header /> <Header />
@ -92,7 +96,7 @@ const posts = (await getCollection('blog')).sort(
posts.map((post) => ( posts.map((post) => (
<li> <li>
<a href={`/${post.slug}/`}> <a href={`/${post.slug}/`}>
<img width={720} height={360} src={post.data.heroImage} alt="" /> { post.data.heroImage ? <img width={720} height={360} src={post.data.heroImage} alt="" /> : <img width={720} height={360} src={post.data.heroImage} id="gradient" alt="" />}
<h4 class="title">{post.data.title}</h4> <h4 class="title">{post.data.title}</h4>
<p class="date"> <p class="date">
<FormattedDate date={post.data.pubDate} /> <FormattedDate date={post.data.pubDate} />