audacity/audacity.github.io
1
0
Fork 0
mirror of https://github.com/audacity/audacity.github.io.git synced 2026-06-17 11:55:48 -05:00
Code Issues 9 Packages Projects Releases Wiki Activity

Update blog post listing

Browse Source
This commit is contained in:
Dilson's Pickles
2023-02-23 12:28:58 +00:00
parent ba80f5342a
commit 9e8240e897
4 changed files with 24 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/img/features/ShareAudio.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.6 MiB

After

Width:  |  Height:  |  Size: 82 KiB

BIN
src/assets/img/features/Spectrogram.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 255 KiB

26
src/components/card/BlogListingCard.astro
View File

@@ -11,22 +11,16 @@ const { title, description, href, thumbnail, author, date } =
Astro.props as Props;
---
<div class="bg-white flex flex-col py-12">
<div class="flex gap-8">
<img src={thumbnail} class="h-40 w-40 object-cover rounded" />
<div class="flex flex-col space-y-2">
<a href={href}
><h3
class="text-xl font-bold text-gray-900 hover:text-blue-700 hover:underline"
>
{title}
</h3></a
>
<p class="text-base font-normal text-gray-700 mt-2">{description}</p>
<div class="pt-4">
<p class="font-bold text-gray-800">By {author}</p>
<p class="font-mono text-gray-700">{date}</p>
<div class="flex rounded overflow-hidden bg-white shadow-lg">
<img src={thumbnail} class="h-fill w-40 object-cover" />
<div class="flex flex-col py-6 px-4 ">
<div class="h-32">
<h4 class="text-lg font-bold">{title}</h4>
<p class="mt-2">{description.slice(0, 50) + "..."}</p>
</div>
<div class="flex flex-col">
<p class="font-bold text-sm">{author}</p>
<p class="font-mono text-sm">{date}</p>
</div>
</div>
</div>
</div>

26
src/components/homepage/BlogPosts.astro
View File

@@ -13,13 +13,13 @@ interface Frontmatter {
const posts = await Astro.glob<Frontmatter>("../../pages/posts/*.md");
---
<section>
<div class="mx-auto max-w-4xl px-3 lg:px-0 pt-24 pb-32 space-y-12">
<section class="grid-background">
<div class="mx-auto max-w-4xl px-3 lg:px-0 pt-40 pb-44 space-y-12">
<div class="flex justify-between items-center">
<h2 class="text-2xl xl:text-3xl font-bold text-gray-900">
Latest blog posts
</h2>
<a
<h2 class="text-2xl xl:text-3xl font-bold text-gray-900">
Latest blog posts
</h2>
<a
class="font-medium inline-flex gap-x-2 hover:underline text-blue-700 items-center"
href="/blog"
>View all<svg
@@ -32,8 +32,8 @@ const posts = await Astro.glob<Frontmatter>("../../pages/posts/*.md");
></path></svg
></a
>
</div>
<div class="space-y-6 mt-6 divide-y-2">
</div>
<div class="grid grid-cols-2 gap-12">
{
posts
.sort(
@@ -43,12 +43,11 @@ const posts = await Astro.glob<Frontmatter>("../../pages/posts/*.md");
.map((post) => (
<BlogListingCard
title={post.frontmatter.title}
description={post.frontmatter.description.slice(0, 200) + "..."}
description={post.frontmatter.description}
href={`/posts/${post.frontmatter.slug}`}
thumbnail={post.frontmatter.thumbnail}
author={post.frontmatter.author}
date={post.frontmatter.date}
/>
))
}
@@ -56,5 +55,8 @@ const posts = await Astro.glob<Frontmatter>("../../pages/posts/*.md");
</div>
</section>
<style>
.grid-background {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%239C92AC' fill-opacity='0.1'%3E%3Cpath opacity='0.8' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
</style>