mariosant/mariosant.dev
1
0
Fork 0
Code Issues Pull Requests Actions Activity

image to picture, bug fix

Browse Source
This commit is contained in:
Surjith S M
2022-11-12 19:15:38 +05:30
parent 435f11250e
commit 02dff219dc
2 changed files with 12 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/layouts/BlogLayout.astro
View File

@@ -17,7 +17,7 @@ const { frontmatter } = Astro.props;
class="text-4xl lg:text-5xl font-bold lg:tracking-tight mt-1 lg:leading-tight"> class="text-4xl lg:text-5xl font-bold lg:tracking-tight mt-1 lg:leading-tight">
{frontmatter.title} {frontmatter.title}
</h1> </h1>
<div class="flex gap-2 mt-3 items-center"> <div class="flex gap-2 mt-3 items-center flex-wrap md:flex-nowrap">
<span class="text-gray-400"> <span class="text-gray-400">
{frontmatter.author} {frontmatter.author}
</span> </span>
@@ -25,8 +25,8 @@ const { frontmatter } = Astro.props;
<time class="text-gray-400" datetime={frontmatter.publishDate}> <time class="text-gray-400" datetime={frontmatter.publishDate}>
{getFormattedDate(frontmatter.publishDate)} {getFormattedDate(frontmatter.publishDate)}
</time> </time>
<span class="text-gray-400">•</span> <span class="text-gray-400 hidden md:block">•</span>
<div class="flex gap-3"> <div class="w-full md:w-auto flex flex-wrap gap-3">
{ {
frontmatter.tags.map((tag) => ( frontmatter.tags.map((tag) => (
<span class="text-sm text-gray-500">#{tag}</span> <span class="text-sm text-gray-500">#{tag}</span>

12
src/pages/blog.astro
View File

@@ -1,5 +1,5 @@
--- ---
import { Image } from "@astrojs/image/components"; import { Picture } from "@astrojs/image/components";
import Container from "@components/container.astro"; import Container from "@components/container.astro";
import Sectionhead from "@components/sectionhead.astro"; import Sectionhead from "@components/sectionhead.astro";
import Layout from "@layouts/Layout.astro"; import Layout from "@layouts/Layout.astro";
@@ -30,16 +30,14 @@ console.log(posts[0].frontmatter.image);
<li> <li>
<a href={post.url}> <a href={post.url}>
<div class="grid md:grid-cols-2 gap-5 md:gap-10 items-center"> <div class="grid md:grid-cols-2 gap-5 md:gap-10 items-center">
<div> <Picture
<Image
src={post.frontmatter.image} src={post.frontmatter.image}
alt="Thumbnail" widths={[400, 800]}
width={600}
format="avif"
aspectRatio="16:9" aspectRatio="16:9"
sizes="(max-width: 800px) 100vw, 800px"
alt="descriptive text"
class="w-full rounded-md" class="w-full rounded-md"
/> />
</div>
<div> <div>
<span class="text-blue-400 uppercase tracking-wider text-sm font-medium"> <span class="text-blue-400 uppercase tracking-wider text-sm font-medium">
{post.frontmatter.category} {post.frontmatter.category}