Merge pull request #295 from JaneliaSciComp/code-review-updates

Code review updates

src/components/Button.astro

@@ -25,5 +25,5 @@ const variants = {
   {...rest}
 >
   <Fragment set:html={text} />
-  {icon && <Icon name={icon} class="w-5 h-5  inline-block" />}
+  {icon ? <Icon name={icon} class="w-5 h-5  inline-block" /> : null}
 </a>

src/components/CallToAction.astro

@@ -1,6 +1,6 @@
 ---
-import TextBlock from "./TextBlock.astro";
-import Button from "./Button.astro";
+import TextBlock from "@components/TextBlock.astro";
+import Button from "@components/Button.astro";
 
 const {
   btnContainerClasses,
@@ -11,7 +11,6 @@ const {
   content = await Astro.slots.render("content"),
   btn = await Astro.slots.render("btn"),
 } = Astro.props;
-// console.log(actions)
 ---
 
 <div class="flex flex-col">
@@ -22,7 +21,7 @@ const {
     content={content}
   />
   {
-    actions && (
+    actions ? (
       <div class={`grid grid-cols-2 gap-4 w-full ${btnContainerClasses}`}>
         {Array.isArray(actions) ? (
           actions.map((action) => (
@@ -35,7 +34,7 @@ const {
           <Fragment set:html={actions} />
         )}
       </div>
-    )
+    ) : null
   }
-  {btn && <slot name="btn" set:html={btn} />}
+  {btn ? <slot name="btn" set:html={btn} /> : null}
 </div>

src/components/ContentGridDisplay.astro

@@ -1,7 +1,7 @@
 ---
 import { getCollection } from "astro:content";
-import Button from "./Button.astro";
-import Item from "./DisplayItem.astro";
+import Button from "@components/Button.astro";
+import Item from "@components/DisplayItem.astro";
 
 const {
   title,
@@ -19,29 +19,29 @@ const items = await getCollection(content);
 <>
   <div class="flex flex-col gap-4 lg:gap-0 lg:justify-between lg:flex-row mb-8">
     {
-      title && (
+      title ? (
         <div class="md:max-w-sm">
           <h2
             class="text-3xl font-bold tracking-tight sm:text-4xl sm:leading-none group font-heading mb-4"
             set:html={title}
           />
-          {linkText && linkUrl && (
+          {linkText && linkUrl ? (
             <Button variant="link" href={linkUrl} class="mb-4">
               {" "}
               {linkText} »
             </Button>
-          )}
+          ) : null}
         </div>
-      )
+      ) : null
     }
 
     {
-      information && (
+      information ? (
         <p
           class="text-muted dark:text-slate-400 lg:text-sm lg:max-w-md"
           set:html={information}
         />
-      )
+      ) : null
     }
   </div>
   <div class="grid gap-6 row-gap-5 md:grid-cols-2 lg:grid-cols-4 -mb-6">

src/components/ContributorList.astro

@@ -14,7 +14,7 @@ const {
 import {
   getContributors,
   getMostRecentContributors,
-} from "../utils/githubApiHelper";
+} from "@utils/githubApiHelper";
 
 const authToken = import.meta.env.OSSI_SITE_TOKEN;
 const numberOfRecentContributors = 8;
@@ -41,13 +41,9 @@ if (authToken) {
       {
         typeof callToAction === "string" ? (
           <Fragment set:html={callToAction} />
-        ) : (
-          callToAction &&
-          callToAction.text &&
-          callToAction.href && (
-            <Button variant="link" {...callToAction} class="mb-12 w-auto" />
-          )
-        )
+        ) : callToAction && callToAction.text && callToAction.href ? (
+          <Button variant="link" {...callToAction} class="mb-12 w-auto" />
+        ) : null
       }
     </div>
   </div>

src/components/Footer.astro

@@ -1,9 +1,11 @@
 ---
 import { siteConfig } from "../siteConfig";
-import { footerData } from "../data/navigation";
+import { footerData } from "@data/navigation";
 import { Icon } from "astro-icon/components";
-import janeliaLogoBlack from "../assets/images/HHMI_Janelia_Logo-Black.png";
-import janeliaLogoWhite from "../assets/images/HHMI_Janelia_Logo-White.png";
+import janeliaLogoBlack from "@assets/images/HHMI_Janelia_Logo-Black.png";
+import janeliaLogoWhite from "@assets/images/HHMI_Janelia_Logo-White.png";
+
+const currentYear = new Date().getFullYear();
 ---
 
 <footer
@@ -84,7 +86,7 @@ import janeliaLogoWhite from "../assets/images/HHMI_Janelia_Logo-White.png";
                   aria-label={ariaLabel}
                   href={href}
                 >
-                  {icon && <Icon name={icon} class="w-5 h-5" />}
+                  {icon ? <Icon name={icon} class="w-5 h-5" /> : null}
                   <Fragment set:html={text} />
                 </a>
               </li>
@@ -96,7 +98,7 @@ import janeliaLogoWhite from "../assets/images/HHMI_Janelia_Logo-White.png";
       }
 
       <div class="text-sm mr-4 dark:text-slate-400">
-        <Fragment set:html={footerData.footNote} />
+        © {currentYear} Howard Hughes Medical Institute
       </div>
     </div>
   </div>

src/components/Header.astro

@@ -1,7 +1,7 @@
 ---
-import { headerData } from "../data/navigation";
+import { headerData } from "@data/navigation";
 import { siteConfig } from "../siteConfig";
-import ToggleTheme from "../components/ToggleTheme.astro";
+import ToggleTheme from "@components/ToggleTheme.astro";
 ---
 
 <header

src/components/Hero.jsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
-import { getRandomImage } from "../utils/getRandomImage";
-import { heroImageFiles } from "../../public/hero-images/heroImageFiles.js";
+import { getRandomImage } from "@utils/getRandomImage";
+import heroImageFiles from "@data/heroImageFiles.json";
 import { twMerge } from "tailwind-merge";
 
 export default function Hero({
@@ -43,25 +43,25 @@ export default function Hero({
         )}
       >
         <div>
-          {title && (
+          {title ? (
             <h1 className="text-4xl sm:text-5xl lg:text-6xl 2xl:text-7xl font-bold leading-tighter tracking-tighter mb-4 font-heading text-gray-200">
               {title}
             </h1>
-          )}
+          ) : null}
 
-          {subtitle && (
+          {subtitle ? (
             <p className="text-lg sm:text-xl lg:text-2xl  text-white dark:text-slate-300">
               {subtitle}
             </p>
-          )}
+          ) : null}
         </div>
-        {children && (
+        {children ? (
           <div
             className={`max-w-3xl bg-blue-50 dark:bg-slate-900 bg-opacity-90 mb-4 md:mb-0 py-3 sm:py-6 lg:py-8 w-auto rounded-2xl`}
           >
             {children}
           </div>
-        )}
+        ) : null}
         <p
           className={twMerge(
             "absolute bottom-0 max-auto text-xs text-white dark:text-slate-300",

src/components/ProposalListItem.astro

@@ -1,6 +1,6 @@
 ---
 import { getEntries } from "astro:content";
-import Link from "./Link.astro";
+import Link from "@components/Link.astro";
 import { TbFileTypePdf } from "react-icons/tb";
 const { proposal } = Astro.props;
 const relatedProjects = await getEntries(proposal.data.projects);

src/components/TextBlock.astro

@@ -8,34 +8,34 @@ const {
 ---
 
 {
-  (title || subtitle || tagline || content) && (
+  (
     <div>
-      {tagline && (
+      {tagline ? (
         <p
           class="text-base text-secondary dark:text-blue-200 font-bold tracking-wide uppercase"
           set:html={tagline}
         />
-      )}
-      {title && (
+      ) : null}
+      {title ? (
         <h2
           class="font-bold leading-normal tracking-tighter font-heading text-2xl sm:text-3xl lg:text-4xl md:pb-8 mb-4"
           set:html={title}
         />
-      )}
+      ) : null}
 
-      {subtitle && (
+      {subtitle ? (
         <p
           class="sm:mb-8 text-xl text-muted dark:text-slate-400 mt-4 2xl:text-3xl"
           set:html={subtitle}
         />
-      )}
+      ) : null}
 
-      {content && (
+      {content ? (
         <p
           class="md:leading-normal 2xl:leading-relaxed pb-4 sm:pb-8 text-base sm:text-lg md:text-xl 2xl:text-2xl dark:text-slate-200"
           set:html={content}
         />
-      )}
+      ) : null}
     </div>
   )
 }

src/components/ToggleTheme.astro

@@ -1,12 +1,12 @@
 ---
-import { Icon } from 'astro-icon/components';
-
+import { Icon } from "astro-icon/components";
 ---
-    <button 
-        type="button" 
-        class='text-muted dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center'
-        aria-label='Toggle between Dark and Light mode' 
-        data-toggle-color-scheme
-    >
-      <Icon name='tabler:sun' class='w-6 h-6' />
-    </button>
+
+<button
+  type="button"
+  class="text-muted dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center"
+  aria-label="Toggle between Dark and Light mode"
+  data-toggle-color-scheme
+>
+  <Icon name="tabler:sun" class="w-6 h-6" />
+</button>

src/components/Wrapper.astro

@@ -9,7 +9,7 @@ const WrapperTag = as;
 <WrapperTag class="relative not-prose" {...id ? { id } : {}}>
   <div class="absolute inset-0 pointer-events-none -z-[1]" aria-hidden="true">
     <slot name="bg">
-      {bg && <Fragment set:html={bg} />}
+      {bg ? <Fragment set:html={bg} /> : null}
     </slot>
   </div>
   <div

src/components/blog/BlogHeadline.astro

@@ -11,11 +11,11 @@ const {
     set:html={title}
   />
   {
-    subtitle && (
+    subtitle ? (
       <div
         class="mt-2 md:mt-3 mx-auto text-xl text-gray-500 dark:text-slate-400 font-medium"
         set:html={subtitle}
       />
-    )
+    ) : null
   }
 </header>

src/components/blog/BlogImage.astro

@@ -0,0 +1,28 @@
+---
+import { Image } from "astro:assets";
+
+const { imgFile, slug, caption } = Astro.props;
+---
+
+{
+  imgFile ? (
+    <a
+      class="relative block group"
+      href={`/blog/${slug}` ?? "javascript:void(0)"}
+    >
+      <div class="relative h-0 pb-[56.25%] md:pb-[75%] md:h-72 lg:pb-[56.25%] overflow-hidden bg-gray-400 dark:bg-slate-700 rounded shadow-lg">
+        <Image
+          src={imgFile}
+          class="absolute inset-0 object-cover w-full h-full mb-6 rounded shadow-lg bg-gray-400 dark:bg-slate-700"
+          widths={[400, 900]}
+          width={900}
+          sizes="(max-width: 900px) 400px, 900px"
+          alt={caption}
+          aspectRatio="16:9"
+          loading="lazy"
+          decoding="async"
+        />
+      </div>
+    </a>
+  ) : null
+}

src/components/blog/BlogListItem.astro

@@ -1,36 +1,17 @@
 ---
-import { Image } from "astro:assets";
+import BlogImage from "./BlogImage.astro";
 
 const { post } = Astro.props;
 ---
 
 <article
   class={`max-w-md mx-auto md:max-w-none flex flex-col md:grid gap-6 md:gap-8 ${post.data["image file"] ? "md:grid-cols-2" : ""} dark:bg-slate-900`}
 >
-  {
-    post.data["image file"] && (
-      <a
-        class="relative block group"
-        href={`/blog/${post.slug}` ?? "javascript:void(0)"}
-      >
-        <div class="relative h-0 pb-[56.25%] md:pb-[75%] md:h-72 lg:pb-[56.25%] overflow-hidden bg-gray-400 dark:bg-slate-700 rounded shadow-lg">
-          {post.data["image file"] && (
-            <Image
-              src={post.data["image file"]}
-              class="absolute inset-0 object-cover w-full h-full mb-6 rounded shadow-lg bg-gray-400 dark:bg-slate-700"
-              widths={[400, 900]}
-              width={900}
-              sizes="(max-width: 900px) 400px, 900px"
-              alt={post.data["image caption"]}
-              aspectRatio="16:9"
-              loading="lazy"
-              decoding="async"
-            />
-          )}
-        </div>
-      </a>
-    )
-  }
+  <BlogImage
+    imgFile={post.data["image file"]}
+    slug={post.slug}
+    caption={post.data["image caption"]}
+  />
   <div class="p-4">
     <header>
       <!-- <div class="mb-1">
@@ -52,11 +33,11 @@ const { post } = Astro.props;
     </header>
 
     {
-      post.data.tagline && (
+      post.data.tagline ? (
         <p class="flex-grow text-muted dark:text-slate-400 text-lg">
           {post.data.tagline}
         </p>
-      )
+      ) : null
     }
   </div>
 </article>