Tidy up blog posts and blog cards

src/components/card/BlogListingCard.astro

@@ -25,8 +25,11 @@ const { title, description, href, thumbnail, author, date } =
           {date}
         </small>
         <h4>
-          {title.slice(0, 100)}...
+          {title.length > 100 ? title.slice(0, 100) + `...` : title}
         </h4>
+        <p>
+          {description.length > 100 ? description.slice(0, 100) + `...` : description}
+        </p>
       </div>
 
       <div class="mt-4">

src/components/card/BlogPostCard.astro

@@ -12,25 +12,28 @@ const { title, description, href, thumbnail, author, date } =
 ---
 
 <a href={href} class="col-span-12 lg:col-span-6 cursor-pointer">
-  <div class="flex flex-col sm:flex-row lg:flex-col rounded-lg overflow-hidden bg-slate-100 h-80 sm:h-full drop-shadow-md">
-    <div class="w-full h-32 sm:w-48 sm:h-48 lg:w-full lg:h-40">
+  <div
+    class="flex flex-col md:flex-row lg:flex-col rounded-lg overflow-hidden bg-slate-100 h-80 md:h-full drop-shadow-md"
+  >
+    <div class="w-full h-32 md:w-48 md:h-48 lg:w-full lg:h-40">
       <img class="w-full h-full object-cover" src={thumbnail} />
     </div>
 
     <div class="flex flex-1 flex-col justify-between p-4 pb-6">
       <div class="flex flex-col gap-1">
-        <p class="text-xs sm:text-sm uppercase text-gray-600">
+        <small>
           {date}
+        </small>
+        <h4>
+          {title.length > 100 ? title.slice(0, 100) + `...` : title}
+        </h4>
+        <p>
+         {description}
         </p>
-        <h3
-          class="font-bold text-gray-800 text-base md:text-lg"
-        >
-          {title}
-        </h3>
       </div>
 
       <div class="mt-4">
-        <p class="text-base sm:text-lg text-blue-700 underline">Read more</p>
+        <p class="hyperlink">Read more</p>
       </div>
     </div>
   </div>

src/components/card/DownloadCard.astro

@@ -1,35 +0,0 @@
----
-interface Props {
-  title: string;
-  checkum: string;
-  buttonText: string;
-  downloadURL: string;
-  downloadType: string;
-}
-const { title, checksum, buttonText, downloadURL, downloadType } =
-  Astro.props as Props;
----
-
-<div class="border border-bg-200 rounded-md p-6">
-  <div class="flex flex-col sm:flex-row gap-2 justify-between items-center">
-    <h4>{title}</h4>
-    <a
-      href={downloadURL}
-      class="flex justify-center text-center items-center px-4 h-12 w-full sm:w-fit bg-slate-200 hover:bg-slate-300 text-base text-black rounded"
-    >
-      {`${buttonText}` + `${downloadType}`}
-    </a>
-  </div>
-
-  {
-    checksum && (
-      <div class="flex flex-col mt-8 border-t pt-4">
-        <label>Checksum:</label>
-        <div class="mt-2 p-2 bg-gray-50 border border-gray-200">
-          <small class="break-words">{checksum}</small>
-        </div>
-      </div>
-    )
-  }
-</div>
-  

src/components/card/DownloadCard.jsx

@@ -0,0 +1,30 @@
+import React from "react";
+
+function DownloadCard(props) {
+
+const {title, downloadURL, buttonText, downloadType, checksum} = props;
+  return (
+    <div class="border border-bg-200 rounded-md p-6">
+      <div class="flex flex-col sm:flex-row gap-2 justify-between items-center">
+        <h4>{title}</h4>
+        <a
+          href={downloadURL}
+          class="flex justify-center text-center items-center px-4 h-12 w-full sm:w-fit bg-slate-200 hover:bg-slate-300 text-base text-black rounded"
+        >
+          {`${buttonText}` + `${downloadType}`}
+        </a>
+      </div>
+
+      {checksum && (
+        <div class="flex flex-col mt-8 border-t pt-4">
+          <label>Checksum:</label>
+          <div class="mt-2 p-2 bg-gray-50 border border-gray-200">
+            <small class="break-words">{checksum}</small>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default DownloadCard;

src/layouts/DownloadPageLayout.astro

@@ -1,6 +1,6 @@
 ---
 import BaseLayout from "./BaseLayout.astro";
-import DownloadCard from '../components/card/DownloadCard.astro'
+import DownloadCard from '../components/card/DownloadCard'
 import IconLinkCard from "../components/card/IconLinkCard";
 import { Icon } from "astro-icon";
 import "../styles/icons.css";
@@ -86,3 +86,4 @@ const { title, OS, version, releaseData, iconName, iconColor } = Astro.props;
     </section>
   </main>
 </BaseLayout>
+../components/card/DownloadCard.jsx

src/pages/posts/audacity-3.3.md

@@ -1,5 +1,5 @@
 ---
-title: A lot of our work has been focused on getting Audacity ready for a version 4. As such, a lot of under-the-hood work has been happening - in technical terms - reducing dependency on wxWidgets, library extractions and general refactoring. This work will continue for the next few releases in parallel with feature development. 
+title: Audacity 3.3 
 slug: audacity-3.3
 thumbnail: /blog1.png
 author: Leo Wattenberg

src/pages/posts/audacity-3.4-timestretch.md

@@ -1,5 +1,5 @@
 ---
-title: A technical look into time stretching in Audacity 3.4
+title: Time stretching in Audacity 3.4
 slug: audacity-3.4
 thumbnail: /blog1.png
 author: Leo Wattenberg

src/pages/posts/our-new-site.md

@@ -1,5 +1,5 @@
 ---
-title: audacityteam.org now has a new look!
+title: Our new website
 slug: our-new-site
 thumbnail: /our-new-site.jpg
 author: Dawson Custons-Cole