Merge pull request #54 from audacity/Component-optimisation

Component optimisation

Author: DilsonsPickles

package-lock.json

@@ -12,16 +12,15 @@
 	"dependencies": {
 		"@astrojs/react": "^4.2.1",
 		"@astrojs/sitemap": "^3.2.1",
-		"@astrojs/tailwind": "^6.0.0",
+		"@astrojs/tailwind": "^6.0.1",
 		"@fontsource-variable/signika": "^5.0.8",
 		"@fontsource/twinkle-star": "^5.0.8",
 		"@types/react": "^18.0.28",
 		"@types/react-dom": "^18.0.10",
-		"astro": "^5.5.2",
+		"astro": "^5.5.4",
 		"astro-compressor": "^0.4.1",
 		"astro-icon": "^0.8.1",
 		"astro-lazy-youtube-embed": "^0.5.4",
-		"framer-motion": "^9.0.2",
 		"platform": "^1.3.6",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",

package.json

@@ -21,12 +21,12 @@ const maxposts = 3;
         .sort((a, b) => b.data.publishDate.getTime() - a.data.publishDate.getTime())
         .slice(0,maxposts)
         .map((post) => {
+          // Only pass props that match the expected Props interface
           return (
             <NEWBlogPostCard
               href={post.slug}
               title={post.data.title}
               description={post.data.description}
-              author={post.data.author}
               publishDate={post.data.publishDate}
               cover={post.data.cover}
               coverAlt={post.data.coverAlt}

src/components/homepage/BlogPosts.astro

@@ -1,6 +1,4 @@
 import React, { useState } from "react";
-import { AnimatePresence } from "framer-motion";
-import HamburgerMenu from "./HamburgerMenu";
 import AudacityLogo from "../../assets/img/Audacity_Logo.svg";
 import "@fontsource-variable/signika";
 import "../../styles/fonts.css";
@@ -63,16 +61,14 @@ function NavigationReact(props) {
   }
 
   return (
-    <nav className="border-b-2 z-3 filter bg-white bg-opacity-90 backdrop-blur-xl ">
+    <nav className="border-b-2 z-3 filter bg-white bg-opacity-90 backdrop-blur-xl">
       <div className="flex h-14 items-center max-w-screen-2xl mx-auto px-4 md:px-6">
         <div className="flex-1">
           <a className="flex w-fit items-center gap-1 lg:gap-2" href="/">
             <img
               className="w-5 lg:w-6 h-full"
               src={AudacityLogo.src}
               alt="A yellow and orange waveform between the ears of a set of blue headphones"
-              width="24"
-              height="24"
             />
             <p className="signika text-blue-700 lg:text-lg font-medium lg:leading-none">
               Audacity
@@ -115,9 +111,6 @@ function NavigationReact(props) {
               className="fill-gray-700 w-4"
               xmlns="http://www.w3.org/2000/svg"
               viewBox="0 0 320 512"
-              width="16" 
-              height="16"
-              aria-hidden="true"
             >
               <path d="M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3 265.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256 310.6 150.6z" />
             </svg>
@@ -126,25 +119,52 @@ function NavigationReact(props) {
               className="fill-gray-700 w-4"
               xmlns="http://www.w3.org/2000/svg"
               viewBox="0 0 448 512"
-              width="16" 
-              height="16"
-              aria-hidden="true"
             >
               <path d="M0 96C0 78.3 14.3 64 32 64H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z" />
             </svg>
           )}
         </button>
       </div>
-      <AnimatePresence>
-        {isHamburgerMenuOpen && (
-          <HamburgerMenu
-            navLinks={navLinks}
-            onLinkClick={handleHamburgerMenuClick}
-          />
-        )}
-      </AnimatePresence>
+
+      {isHamburgerMenuOpen && (
+        <div className="flex flex-col py-2 bg-gray-50 border-y-2 absolute left-0 right-0 z-40 transition-opacity duration-200 ease-in-out opacity-100">
+          {navLinks.map((navLink, index) => (
+            <a
+              key={index}
+              onClick={() => handleHamburgerMenuClick()}
+              className="py-3 px-4 text-gray-800 hover:text-blue-700 hover:bg-gray-100 transition-all duration-200 ease-in-out"
+              style={{
+                animationName: "fadeIn",
+                animationDuration: "200ms",
+                animationTimingFunction: "ease-in-out",
+                animationFillMode: "forwards",
+                animationDelay: `${index * 50}ms`,
+                opacity: 0,
+                transform: "translateX(-10px)",
+              }}
+              href={navLink.href}
+              target={navLink.target}
+            >
+              {navLink.linkText}
+            </a>
+          ))}
+
+          <style jsx>{`
+            @keyframes fadeIn {
+              from {
+                opacity: 0;
+                transform: translateX(-10px);
+              }
+              to {
+                opacity: 1;
+                transform: translateX(0);
+              }
+            }
+          `}</style>
+        </div>
+      )}
     </nav>
   );
 }
 
-export default NavigationReact;
+export default NavigationReact;

src/components/navigation/HamburgerMenu.jsx

@@ -8,7 +8,16 @@ publishDate: 2023-11-02
 draft: false
 ---
 
-<iframe width="560" height="315" src="https://www.youtube.com/embed/xgdYuSHdkso?si=xNPqJqRtzJnreHZh" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> 
+<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; margin-bottom: 20px;">
+  <iframe
+    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;"
+    src="https://www.youtube.com/embed/xgdYuSHdkso?si=xNPqJqRtzJnreHZh"
+    title="YouTube video player"
+    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+    referrerpolicy="strict-origin-when-cross-origin"
+    allowfullscreen
+  ></iframe>
+</div>
 
 *Watch the release video!*
 

src/components/navigation/NavigationReact.jsx

@@ -1,14 +1,24 @@
 ---
 title: Audacity 3.5
 author: Leo Wattenberg
-description:  Audacity 3.5 adds Cloud saving, automatic tempo detection and more!
+description: Audacity 3.5 adds Cloud saving, automatic tempo detection and more!
 cover: "./audacity-3.5.webp"
 coverAlt: "Audacity 3.5: Cloud saving and more"
 publishDate: 2024-04-22
 draft: false
 ---
 
-<iframe width="560" height="315" src="https://www.youtube.com/embed/qEAZv_o0HuQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>  <i>Watch the release video!</i>
+<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; margin-bottom: 20px;">
+  <iframe
+    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;"
+    src="https://www.youtube.com/embed/qEAZv_o0HuQ"
+    title="YouTube video player"
+    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+    referrerpolicy="strict-origin-when-cross-origin"
+    allowfullscreen
+  ></iframe>
+</div>
+ <i>Watch the release video!</i>
 
 We are excited to announce Audacity 3.5, which adds the following features:
 
@@ -28,15 +38,15 @@ You now can non-destructively change the pitch of a clip by holding Alt and pres
 
 ## and more!
 
-There have been many other changes for this release. 
+There have been many other changes for this release.
 
-* Added the ability to export labels as subtitle files.
-* Added an option to skip plugin scanning.
-* Added an overflow menu, and speed and pitch indicators for clips.
-* Various changes to a variety of features.
-* Removed some niche features to simplify the app. This should make Audacity a bit less overwhelming to use, and also will speed up future development as fewer things need to be considered. 
+- Added the ability to export labels as subtitle files.
+- Added an option to skip plugin scanning.
+- Added an overflow menu, and speed and pitch indicators for clips.
+- Various changes to a variety of features.
+- Removed some niche features to simplify the app. This should make Audacity a bit less overwhelming to use, and also will speed up future development as fewer things need to be considered.
 
-A more detailed overview of these changes can be found in our [changelog](https://support.audacityteam.org/additional-resources/changelog/audacity-3.5). 
+A more detailed overview of these changes can be found in our [changelog](https://support.audacityteam.org/additional-resources/changelog/audacity-3.5).
 You can download Audacity on [audacityteam.org/download](/download).
 
-The [Intel OpenVINO plugin](https://github.com/intel/openvino-plugins-ai-audacity/releases/tag/v3.5.0-R2) also has been updated for version 3.5. 
+The [Intel OpenVINO plugin](https://github.com/intel/openvino-plugins-ai-audacity/releases/tag/v3.5.0-R2) also has been updated for version 3.5.

src/content/blog/audacity-3-4.md

@@ -8,7 +8,16 @@ publishDate: 2024-07-16
 draft: false
 ---
 
-<iframe width="560" height="315" src="https://www.youtube.com/embed/f5TXPUOFH6A?si=3B9NiGTBOrLR2Ypp" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; margin-bottom: 20px;">
+  <iframe
+    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;"
+    src="https://www.youtube.com/embed/f5TXPUOFH6A?si=3B9NiGTBOrLR2Ypp"
+    title="YouTube video player"
+    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+    referrerpolicy="strict-origin-when-cross-origin"
+    allowfullscreen
+  ></iframe>
+</div>
 
 *Watch the release video*
 

src/content/blog/audacity-3-5.md

@@ -25,7 +25,6 @@ const publishedBlogPosts = await getCollection("blog", ({ data }) => {
                 href={post.slug}
                 title={post.data.title}
                 description={post.data.description}
-                author={post.data.author}
                 publishDate={post.data.publishDate}
                 cover={post.data.cover}
                 coverAlt={post.data.coverAlt}

src/content/blog/audacity-3-6.md

@@ -2,7 +2,22 @@
 module.exports = {
   content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
   theme: {
-    extend: {},
+    extend: {
+      animation: {
+        fadeIn: "fadeIn 0.2s ease-in-out",
+        fadeInSlow: "fadeInSlow 0.3s ease-in-out forwards",
+      },
+      keyframes: {
+        fadeIn: {
+          "0%": { opacity: "0" },
+          "100%": { opacity: "1" },
+        },
+        fadeInSlow: {
+          "0%": { opacity: "0", transform: "translateX(-10px)" },
+          "100%": { opacity: "1", transform: "translateX(0)" },
+        },
+      },
+    },
     screens: {
       xxs: "320px",
       xs: "480px",