array-in-a-matrix/bloginamatrix.xyz
1
0
Fork 0
Code Issues 5 Pull requests Packages Projects Releases 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';
type Props = CollectionEntry<'blog'>['data'];
const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
---
@ -51,6 +50,10 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
font-style: italic;
}
</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>
<body>
@ -58,7 +61,7 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
<main>
<article>
<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 class="prose">
<div class="title">

6
src/pages/index.astro
View file

@ -82,6 +82,10 @@ const posts = (await getCollection('blog')).sort(
}
}
</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>
<body>
<Header />
@ -92,7 +96,7 @@ const posts = (await getCollection('blog')).sort(
posts.map((post) => (
<li>
<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>
<p class="date">
<FormattedDate date={post.data.pubDate} />