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

add gradient to all posts missing hero iamge

Browse source
This commit is contained in:
array-in-a-matrix 2024-01-16 13:07:32 -05:00
parent 502a21847c
commit 3d2b806a10
2 changed files with 12 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/layouts/BlogPost.astro
View file

@ -52,7 +52,11 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
</style>
<script>
function randomColor() {return "#000000".replace(/0/g,function(){return (~~(Math.random()*16)).toString(16);});}
gradient.style.cssText += `background: linear-gradient(${randomColor()},${randomColor()})`;
var noImage = document.getElementsByClassName("gradient");
var i = 0;
while(i <= noImage.length){
noImage[i++].style.cssText += `background: linear-gradient(${randomColor()},${randomColor()})`;
}
</script>
</head>
@ -61,7 +65,7 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
<main>
<article>
<div class="hero-image">
{heroImage ? <img width={1020} height={510} src={heroImage} alt="" /> : <img width={1020} height={510} id="gradient" alt="" />}
{heroImage ? <img width={1020} height={510} src={heroImage} alt="" /> : <img width={1020} height={510} class="gradient" alt="" />}
</div>
<div class="prose">
<div class="title">

8
src/pages/index.astro
View file

@ -84,7 +84,11 @@ 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()})`; //! This is only being applied to the first element not all
var noImage = document.getElementsByClassName("gradient");
var i = 0;
while(i <= noImage.length){
noImage[i++].style.cssText += `background: linear-gradient(${randomColor()},${randomColor()})`;
}
</script>
</head>
<body>
@ -96,7 +100,7 @@ const posts = (await getCollection('blog')).sort(
posts.map((post) => (
<li>
<a href={`/${post.slug}/`}>
{ post.data.heroImage ? <img width={720} height={360} src={post.data.heroImage} alt="" /> : <img width={720} height={360} id="gradient" alt="" />}
{ post.data.heroImage ? <img width={720} height={360} src={post.data.heroImage} alt="" /> : <img width={720} height={360} class="gradient" alt="" />}
<h4 class="title">{post.data.title}</h4>
<p class="date">
<FormattedDate date={post.data.pubDate} />