Added sample projects; Added more to getting started docs (#6)

* trying width and height auto

* resize based on container

* add loading spinner component

* added loading spinner to image and transcription views

* made dropdown and help icon visible on single pane

* initial creation of astro site folder

* built out index page

* added buttons

* updated header

* updated deploy.yml to pull from main

* Create deploy.yml

* Update astro.config.mjs

* adding mdx

* adding getting started section

* increasing responsivity

* add mdx

* resize based on container

* add loading spinner component

* initial creation of astro site folder

* built out index page

* Update astro.config.mjs

* adding mdx

* adding getting started section

* increasing responsivity

* adding project view pages

* Updates to styling and reactiveness (cu-mkp#75)

* trying width and height auto

* resize based on container

* add loading spinner component

* added loading spinner to image and transcription views

* made dropdown and help icon visible on single pane

* improved layout of nav at small widths

* improvement to color of nav row for imageview

* Fixing zoom control and help popup bugs (cu-mkp#78)

* trying width and height auto

* resize based on container

* add loading spinner component

* added loading spinner to image and transcription views

* made dropdown and help icon visible on single pane

* improved layout of nav at small widths

* improvement to color of nav row for imageview

* fixed imageview zoom buttons

* fixed positioning issue of help popup

* fix merge errors in navigation

* Adding astro frontend site (#1)

* trying width and height auto

* resize based on container

* add loading spinner component

* added loading spinner to image and transcription views

* made dropdown and help icon visible on single pane

* initial creation of astro site folder

* built out index page

* added buttons

* updated header

* updated deploy.yml to pull from main

* Create deploy.yml

* Update astro.config.mjs

* configured base in astro config

* changed base in astro config

* updated image links

* add mdx

* resize based on container

* add loading spinner component

* initial creation of astro site folder

* built out index page

* Update astro.config.mjs

* adding mdx

* adding getting started section

* increasing responsivity

* resize based on container

* add loading spinner component

* initial creation of astro site folder

* adding project view pages

* updated version number for new release

* update EC version and tweak viewer layout

* Improved navigation component styling (cu-mkp#79)

* updated navbar styling to adapt to container

* updated stories with 1200px width example

* fixed visibility of "jump to folio" on small widths

* updated some styles for one-pane view

* updated version number for new release (cu-mkp#80)

* Adding astro frontend site (#1)

* trying width and height auto

* resize based on container

* add loading spinner component

* added loading spinner to image and transcription views

* made dropdown and help icon visible on single pane

* initial creation of astro site folder

* built out index page

* added buttons

* updated header

* updated deploy.yml to pull from main

* Create deploy.yml

* Update astro.config.mjs

* configured base in astro config

* changed base in astro config

* updated image links

* add mdx

* resize based on container

* add loading spinner component

* initial creation of astro site folder

* built out index page

* Update astro.config.mjs

* adding mdx

* adding getting started section

* increasing responsivity

* resize based on container

* add loading spinner component

* initial creation of astro site folder

* adding project view pages

* Adding astro frontend site (#1)

* trying width and height auto

* resize based on container

* add loading spinner component

* added loading spinner to image and transcription views

* made dropdown and help icon visible on single pane

* initial creation of astro site folder

* built out index page

* added buttons

* updated header

* updated deploy.yml to pull from main

* Create deploy.yml

* Update astro.config.mjs

* resize based on container

* add loading spinner component

* built out index page

* Update astro.config.mjs

* adding mdx

* adding getting started section

* resize based on container

* add loading spinner component

* update EC version and tweak viewer layout

* Adjusting how height is handled dynamically (cu-mkp#82)

* updated version number for new release

* Making height more dynamic (cu-mkp#81)

* making height fit layout container

* made height fill container when relevant

* fixed async useeffect call

* added story contained in full screen div

* update version number to 0.2.3

* updated to most recent version of viewer

* fleshed out getting started page

* fixed height class of viewer

* added projects and improved doc page

astro-web/src/components/Header.astro

@@ -17,11 +17,11 @@ const { tab } = Astro.props;
             <Image src={logo} alt="EditionCrafter" />
             <p class="text-2xl font-serif max-w-28 self-center">Edition Crafter</p>
         </a>
-        <div class="hidden md:flex flex-row gap-8 align-middle">
+        <div class="flex flex-row gap-8 align-middle">
 			<Button light href='/editioncrafter/getting-started'>
 				Getting Started
 			</Button>
-            <Button>
+            <Button href="https://github.com/cu-mkp/editioncrafter">
                 View on GitHub &rarr;
             </Button>
         </div>

astro-web/src/components/ProjectCard.astro

@@ -1,16 +1,26 @@
 ---
+import { Image } from 'astro:assets';
+
 
 export interface Props {
-    title: string
+    title: string;
+    img?: ImageMetadata;
+    href?: string;
+    active?: boolean;
 }
 
-const { title } = Astro.props;
+const { title, img, href = '#', active = true } = Astro.props;
 
 ---
-
-<div class="bg-neutral flex flex-col w-[336px]">
-    <div class="bg-neutral-gray w-[336px] h-[282px]" /> 
-    <p class="p-8">
-        {title}
-    </p>
-</div>
+<a href={href}>
+    <div class={`bg-neutral flex flex-col w-[336px] ${active ? 'hover:scale-105 transition cursor-pointer' : 'cursor-default'}`}>
+        { img ? ( 
+            <Image src={img} alt={title} height={282} width={336} />
+        ) : (
+            <div class="bg-neutral-gray/30 w-[336px] h-[282px]" /> 
+        ) }
+        <p class="p-8 font-serif">
+            {title}
+        </p>
+    </div>
+</a>

astro-web/src/layouts/Docs.astro

@@ -15,9 +15,14 @@ const { frontmatter } = Astro.props;
             </h1>
         </Container>
     </div>
-    <div class="bg-white w-full">
-        <Container className="flex flex-row py-4 xl:py-12 h-[78dvh] overflow-y-scroll">
-            <div class="hidden md:flex flex-col pr-4 xl:pr-12 border-r border-r-neutral-gray/50 w-[20%]">
+    <div class="bg-white w-full relative">
+        <div class="inline-block lg:float-end py-4 lg:py-8 xl:py-12 lg:w-[66%] xl:w-[70%] 2xl:w-[78%] mx-auto px-6 md:px-16 lg:ps-4 lg:pe-16 2xl:pe-40 3xl:pe-64">
+            <div class="w-full prose h-full max-w-none lg:float-end">
+                <slot />
+            </div>
+        </div>
+        <div class="hidden lg:inline-block flex-col px-4 xl:px-8 border-r border-r-neutral-gray/50 sticky top-0 h-screen">
+            <div class="flex flex-col py-4 xl:py-12">
                 <div class="flex flex-col gap-4 p-4 rounded-sm hover:bg-neutral">
                     <a href="#" class="font-semibold text-lg">
                         Getting Started
@@ -63,9 +68,6 @@ const { frontmatter } = Astro.props;
                     </div>
                 </div>
             </div>
-            <div class="px-12 w-[80%] prose h-full max-w-none overflow-y-scroll">
-                <slot />
-            </div>
-        </Container>
+        </div>
     </div>
 </Layout>

astro-web/src/layouts/Viewer.astro

@@ -18,7 +18,7 @@ const { title, documentName, transcriptionTypes, iiifManifest, documentInfo, thr
 
 ---
 
-<Layout title={title}>
+<Layout title={title} transitions={false}>
     <div class="bg-neutral w-full">
         <Container className="flex flex-row gap-16 items-center">
             <a href="/editioncrafter">

astro-web/src/pages/getting-started/index.mdx

@@ -159,6 +159,32 @@ This section provides further details on the commands available to the EditionCr
 
 ## EditionCrafter CLI Reference 
 
+The following commands are available to the EditionCrafter CLI:
+
+### help
+
+Usage:
+```
+editioncrafter help
+```
+This will display information on the syntax for passing commands to the CLI as well as a list of available commands.
+
+### iiif 
+
+Usage:
+```
+editioncrafter iiif <iiif_url> <output_path>
+```
+This will create an XML file at the location of the provided `<output_path>` based on the information in the IIIF manifest supplied. Note that in this case the `<output_path>` should be a single XML File, e.g. `/MyFiles/TEI/index.xml`.
+
+### process
+
+Usage:
+```
+editioncrafter process <tei_file> <output_path> <base_url>
+```
+This will create all of the artifacts that EditionCrafter needs in order to display your document on the web, and place them in the specified `<output_path>` folder. The `<base_url>` parameter should be the URL at which you intend to host these artifacts.
+
 ## EditionCrafter Viewer Reference 
 
 The following props are available to the `<EditionCrafter>` viewer component:

astro-web/src/pages/index.astro

@@ -9,6 +9,10 @@ import lizard from "../assets/footer/MKLizard.png";
 import nsf from "../assets/footer/NSF.png";
 import pss from "../assets/footer/Performant_Logo.svg";
 import { Image } from "astro:assets";
+import bitc from '../assets/projects/thumbnails/bitc.png';
+import bnf from '../assets/projects/thumbnails/bnfmsfr640.png';
+import dyngley from '../assets/projects/thumbnails/dyngley.png';
+import nbu from '../assets/projects/thumbnails/nbu.png';
 
 ---
 
@@ -77,12 +81,12 @@ import { Image } from "astro:assets";
 				Explore Projects
 			</h2>
 			<div class="grid gap-12 grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 py-12 mx-auto">
-				<ProjectCard title="A project" />
-				<ProjectCard title="A project" />
-				<ProjectCard title="A project" />
-				<ProjectCard title="A project" />
-				<ProjectCard title="A project" />
-				<ProjectCard title="A project" />
+				<ProjectCard title="BnF Ms. Fr. 640" href="/editioncrafter/projects/bnf-ms-fr-640" img={bnf} />
+				<ProjectCard title="Native Bound Unbound" href="/editioncrafter/projects/native-bound-unbound" img={nbu} />
+				<ProjectCard title="Dyngley Family" href="/editioncrafter/projects/dyngley-family" img={dyngley} />
+				<ProjectCard title="Bow in the Cloud" href="/editioncrafter/projects/bow-in-the-cloud" img={bitc} />
+				<ProjectCard title="Interviste Pescatori" href="/editioncrafter/projects/interviste-pescatori" />
+				<ProjectCard title="Ely Green Variorum" active={false} />
 			</div>
 		</Container>
 	</div>

astro-web/src/pages/projects/bnf-ms-fr-640.astro

@@ -0,0 +1,15 @@
+---
+import Viewer from "../../layouts/Viewer.astro";
+---
+
+<Viewer
+    documentName='BnF Ms. Fr. 640'
+    transcriptionTypes={{
+    tc: 'Diplomatic (FR)',
+    tcn: 'Normalized (FR)',
+    tl: 'Translation (EN)',
+    test: 'Test Field (EN)',
+    }}
+    iiifManifest='https://cu-mkp.github.io/editioncrafter-data/fr640_3r-3v-example/iiif/manifest.json'
+    title="BnF Ms. Fr. 640"
+/>

astro-web/src/pages/projects/dyngley-family.astro

@@ -0,0 +1,12 @@
+---
+import Viewer from "../../layouts/Viewer.astro";
+---
+
+<Viewer
+    documentName='O.8.35'
+    transcriptionTypes={{
+    transcription: 'Translation',
+    }}
+    iiifManifest='https://cu-mkp.github.io/dyngleyfamily-editioncrafter-data/O_8_35/iiif/manifest.json'
+    title="Dyngley Family"
+/>

astro-web/src/pages/projects/interviste-pescatori.astro

@@ -0,0 +1,13 @@
+---
+import Viewer from "../../layouts/Viewer.astro";
+---
+
+<Viewer
+    threePanel
+    documentName='Interviste Pescatori 1r-35v'
+    transcriptionTypes={{
+    transcription: 'Transcription'
+    }}
+    iiifManifest='https://cu-mkp.github.io/venice-editioncrafter-data/data/interviste-pescatori_1r-35v/iiif/manifest.json'
+    title="Interviste Pescatori"
+/>

astro-web/src/pages/projects/native-bound-unbound.astro

@@ -0,0 +1,13 @@
+---
+import Viewer from "../../layouts/Viewer.astro";
+---
+
+<Viewer
+    documentName='FHL_007548733_TAOS_BAPTISMS_BATCH_2'
+    transcriptionTypes={{
+    translation: 'Translation',
+    transcription: 'Transcription',
+    }}
+    iiifManifest='https://cu-mkp.github.io/editioncrafter/taos-baptisms-example/iiif/manifest.json'
+    title="Native Bound Unbound"
+/>