Merge pull request #275 from performant-software/develop

v1.4.5 Updates

Author: ajolipa

src/apps/pages/RecordDetail/Identifiers.astro

@@ -8,7 +8,7 @@ const { record } = Astro.props
 const lang = Astro.currentLocale;
 const { t } = await getTranslations(lang);
 ---
-{record.web_identifiers && (
+{record.web_identifiers && !_.isEmpty(record.web_identifiers) && (
   <>
     <div class="py-6">
         <h2 class="capitalize text-lg font-semibold">{t('webAuthorities')}</h2>

src/apps/pages/sections/Images.astro

@@ -1,4 +1,5 @@
 ---
+import ImageWithCitation from '@components/ImageWithCitation.astro';
 import _ from 'underscore';
 
 const { items, title } = Astro.props;
@@ -22,10 +23,12 @@ const { items, title } = Astro.props;
         class='flex justify-center py-8 w-full max-h-[400px] lg:w-[375px] lg:max-h-[400px]'
         href={item.url}
       >
-        <img
+        <ImageWithCitation
           alt={item.image_alt}
-          class='w-full h-full object-cover'
+          classNames={{ root: 'w-full h-full', image: 'w-full h-full object-cover', citation: `text-xs text-gray-400${item.citationLink ? ' underline' : ''}` }}
           src={item.image}
+          citation={item.citation}
+          citationLink={item.citation_link}
         />
       </a>
     ))}

src/apps/pages/sections/TextImage.tsx

@@ -1,3 +1,4 @@
+import ImageWithCitation from '@components/ImageWithCitation';
 import LinkButton from '@components/LinkButton';
 import clsx from 'clsx';
 import { useEffect, useRef, useState } from 'react';
@@ -6,6 +7,8 @@ import _ from 'underscore';
 interface Props {
   backgroundPosition: 'top' | 'bottom' | 'left' | 'right';
   buttonText?: string;
+  citation?: string;
+  citationLink?: string;
   description?: string;
   image: string;
   imageAlt?: string;
@@ -171,10 +174,12 @@ const TextImage = (props: Props) => {
             height: imageHeight ? `${imageHeight}px` : undefined
           }}
         >
-          <img
+          <ImageWithCitation
             alt={props.imageAlt}
-            className='w-full h-full object-cover'
+            classNames={{ image: 'w-full h-full object-cover', root: 'w-full h-full', citation: `text-xs text-gray-400${props.citationLink ? ' underline' : ''}` }}
             src={props.image}
+            citation={props.citation}
+            citationLink={props.citationLink}
           />
         </div>
       </div>

src/components/ImageWithCitation.astro

@@ -0,0 +1,32 @@
+---
+interface Props {
+  alt?: string;
+  citation?: string;
+  citationLink?: string;
+  classNames?: {
+    root?: string;
+    image?: string;
+    citation?: string;
+  };
+  src: string;
+}
+
+const { alt, citation, citationLink, classNames, src } = Astro.props;
+---
+
+{
+  citation ? (
+    <div class={classNames?.root}>
+      <img alt={alt} src={src} class={classNames?.image} />
+      {citationLink ? (
+        <a href={citationLink} class={classNames?.citation}>
+          {citation}
+        </a>
+      ) : (
+        <p class={classNames?.citation}>{citation}</p>
+      )}
+    </div>
+  ) : (
+    <img alt={alt} src={src} class={classNames?.image} />
+  )
+}

src/components/ImageWithCitation.tsx

@@ -0,0 +1,31 @@
+interface ImageWithCitationProps {
+  alt?: string;
+  citation?: string;
+  citationLink?: string;
+  classNames?: {
+    root?: string;
+    image?: string;
+    citation?: string;
+  };
+  src: string;
+}
+
+const ImageWithCitation = (props: ImageWithCitationProps) => {
+  const { alt, citation, citationLink, classNames, src } = props;
+  return citation ? (
+    <div className={classNames?.root}>
+      <img alt={alt} src={src} className={classNames?.image} />
+      {citationLink ? (
+        <a href={citationLink} className={classNames?.citation}>
+          {citation}
+        </a>
+      ) : (
+        <p className={classNames?.citation}>{citation}</p>
+      )}
+    </div>
+  ) : (
+    <img alt={alt} src={src} className={classNames?.image} />
+  );
+};
+
+export default ImageWithCitation;

src/layouts/Page.astro

@@ -103,6 +103,8 @@ const SectionTypes = {
           <TextImage
             backgroundPosition={section.background_position}
             buttonText={section.button_text}
+            citation={section.citation}
+            citationLink={section.citation_link}
             description={section.description}
             image={section.image}
             imageAlt={section.image_alt}

tina/content/pages.ts

@@ -195,6 +195,14 @@ const Pages: Collection = {
           name: 'url',
           label: 'URL',
           type: 'string'
+        }, {
+          name: 'citation',
+          label: 'Image Citation Text',
+          type: 'string'
+        }, {
+          name: 'citation_link',
+          label: 'Image Citation Link',
+          type: 'string'
         }]
       }]
     }, {
@@ -296,6 +304,14 @@ const Pages: Collection = {
         name: 'url',
         label: 'URL',
         type: 'string'
+      }, {
+        name: 'citation',
+        label: 'Image Citation Text',
+        type: 'string'
+      }, {
+        name: 'citation_link',
+        label: 'Image Citation Link',
+        type: 'string'
       }, {
         name: 'background_position',
         label: 'Background Position',