Merge pull request #17 from performant-software/dev

Various minor updates to Astro site

.github/workflows/storybook.yml

@@ -21,4 +21,4 @@ jobs:
         with:
           branch: gh-pages # The branch the action should deploy to.
           folder: editioncrafter/storybook-static # The folder that the build-storybook script generates files.
-          clean: true # Automatically remove deleted files from the deploy branch
+          clean: true # Automatically remove deleted files from the deploy branch

.gitignore

@@ -9,3 +9,4 @@ __tests__/integration/editioncrafter/css/
 .cache/
 storybook-static
 .DS_Store
+.github

astro-web/.gitignore

@@ -22,3 +22,5 @@ pnpm-debug.log*
 
 # github workflows
 .github
+.github/workflows
+

astro-web/package.json

@@ -14,7 +14,7 @@
     "@astrojs/mdx": "^2.1.1",
     "@astrojs/react": "^3.0.10",
     "@astrojs/tailwind": "^5.1.0",
-    "@cu-mkp/editioncrafter": "^1.0.1",
+    "@cu-mkp/editioncrafter": "^1.0.3",
     "@fontsource/dm-sans": "^5.0.19",
     "@fontsource/martel": "^5.0.12",
     "@fontsource/source-code-pro": "^5.0.17",

astro-web/src/components/FeatureTabs.tsx

@@ -22,7 +22,7 @@ const FeatureTabs = () => {
                             Supports multiple transcriptions and translations
                         </h3>
                         <p className="text-neutral-gray">
-                            An edition can comprise multiple renditions of a source text, including transcriptions, normalized transcriptions, and translations. Through styling, it supports discontinuous text, inline figures, and special characters, EditionCrafter provides tools for precise transcription and translation.                        
+                            An edition can comprise multiple renditions of a source text, including transcriptions, normalized transcriptions, and translations. Through styling, it supports discontinuous text, inline figures, and special characters. EditionCrafter provides tools for precise transcription and translation.                        
                         </p>
                     </div>
                 </div>

astro-web/src/components/Footer.astro

@@ -3,7 +3,7 @@ import Container from "./Container.astro";
 import logo from "../assets/footer/editioncrafterlogo.svg";
 import gh from "../assets/footer/github.svg";
 import twitter from "../assets/footer/twitter.svg";
-import lizard from "../assets/footer/MKLizard.png";
+import lizard from "../assets/footer/footer_logo.png";
 import nsf from "../assets/footer/NSF.png";
 import pss from "../assets/footer/Performant_Logo.svg";
 import { Image } from "astro:assets";
@@ -17,7 +17,7 @@ import { Image } from "astro:assets";
             <p class="text-5xl font-serif self-center">EditionCrafter</p>
         </div>
         <p class="text-center">
-            Developed by the Making and Knowing Project at the Center for Science and Society at Columbia University and Performant Software Solutions LLC. Funded by a grant from the National Science Foundation.
+            Developed by the Making and Knowing Project at the Center for Science and Society at Columbia University and Performant Software Solutions LLC. Funded by Grant SES-2218218 from the National Science Foundation.
         </p>
         <div class="flex flex-row justify-center gap-4 object-contain">
             <a href="https://www.makingandknowing.org/">              

astro-web/src/components/ProjectCard.astro

@@ -13,15 +13,15 @@ const { title, img, href = '#', active = true } = Astro.props;
 
 ---
 <a href={href}>
-    <div class={`bg-neutral flex flex-col w-[336px] ${active ? 'hover:scale-105 transition cursor-pointer' : 'cursor-default'}`}>
+    <div class={`bg-neutral flex flex-col w-[283px] ${active ? 'hover:scale-105 transition cursor-pointer' : 'cursor-default'}`}>
         { img ? ( 
-            <Image src={img} alt={title} height={282} width={336} />
+            <Image src={img} alt={title} height={282} width={336} class="object-contain"/>
         ) : (
-            <div class="bg-neutral-gray/20 w-[336px] h-[282px] flex items-center justify-center">
+            <div class="bg-neutral-gray/20 w-[283px] h-[237px] flex items-center justify-center">
                 { !active && <p class="text-3xl">(Coming Soon)</p> }
             </div>
         ) }
-        <p class="p-8 font-serif">
+        <p class="py-8 px-6 font-serif">
             {title}
         </p>
     </div>

astro-web/src/layouts/Viewer.astro

@@ -4,44 +4,75 @@ import Container from '../components/Container.astro';
 import { Image } from 'astro:assets';
 import leftArrow from '../assets/arrow-left.svg';
 import EditionCrafter from "@cu-mkp/editioncrafter";
+import Button from '../components/Button.astro';
 
 export interface Props {
     title: string,
     documentName: string,
-    transcriptionTypes: any,
-    iiifManifest: string,
+    transcriptionTypes?: any,
+    iiifManifest?: string,
     glossaryURL?: string,
     documentInfo?: any,
-    threePanel?: boolean
+    threePanel?: boolean,
+    blurb?: string[],
+    url?: string
 }
 
-const { title, documentName, transcriptionTypes, iiifManifest, documentInfo, threePanel, glossaryURL } = Astro.props;
+const { title, documentName, transcriptionTypes, iiifManifest, documentInfo, threePanel, glossaryURL, blurb, url } = Astro.props;
 
 ---
 
 <Layout title={title} transitions={false}>
     <div class="bg-neutral w-full">
         <Container className="flex flex-row gap-16 items-center">
-            <a href="/editioncrafter">
-                <div class="border-neutral-dark border-2 rounded-full p-4 hover:scale-105">
-                    <Image src={leftArrow} alt="Go Back" />
-                </div>
-            </a>
-            <h1 class="font-serif text-5xl py-16">
-                { title }
-            </h1>
+                <a href="/editioncrafter">
+                    <div class="border-neutral-dark border-2 rounded-full p-4 hover:scale-105">
+                        <Image src={leftArrow} alt="Go Back" />
+                    </div>
+                </a>
+                <h1 class="font-serif text-5xl py-16">
+                    { title }
+                </h1>
         </Container>
     </div>  
     <div class="w-full h-[80dvh] bg-white">
-        <EditionCrafter
-            documentName={documentName}
-            documentInfo={documentInfo}
-            transcriptionTypes={transcriptionTypes}
-            iiifManifest={iiifManifest}
-            glossaryURL={glossaryURL}
-            threePanel={threePanel}
-            client:only
-            transition:persist
-        />
+        {
+            (blurb && blurb.length || url) ? ( 
+                <Container className="flex flex-col gap-8 py-12">
+                    {
+                        blurb && blurb.length && blurb.map((para) => 
+                            <p class="leading-loose font-light">{ para }</p>
+                        )
+                    }
+                    {
+                        url && <Button href={url}>
+                            Learn More
+                        </Button>
+                    }
+                </Container>
+            ) : null
+        }
+        {
+            documentInfo ? ( 
+                <EditionCrafter
+                    documentInfo={documentInfo}
+                    documentName={documentName}
+                    glossaryURL={glossaryURL}
+                    threePanel={threePanel}
+                    client:only
+                    transition:persist
+                />
+            ) : ( 
+                <EditionCrafter
+                    documentName={documentName}
+                    transcriptionTypes={transcriptionTypes}
+                    iiifManifest={iiifManifest}
+                    glossaryURL={glossaryURL}
+                    threePanel={threePanel}
+                    client:only
+                    transition:persist
+                />
+            )
+        }
     </div>
 </Layout>