Improving Viewer Component and Getting Started Docs (#4)

* 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

astro-web/package.json

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

astro-web/src/components/Card.astro

@@ -0,0 +1,61 @@
+---
+interface Props {
+	title: string;
+	body: string;
+	href: string;
+}
+
+const { href, title, body } = Astro.props;
+---
+
+<li class="link-card">
+	<a href={href}>
+		<h2>
+			{title}
+			<span>&rarr;</span>
+		</h2>
+		<p>
+			{body}
+		</p>
+	</a>
+</li>
+<style>
+	.link-card {
+		list-style: none;
+		display: flex;
+		padding: 1px;
+		background-color: #23262d;
+		background-image: none;
+		background-size: 400%;
+		border-radius: 7px;
+		background-position: 100%;
+		transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+		box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
+	}
+	.link-card > a {
+		width: 100%;
+		text-decoration: none;
+		line-height: 1.4;
+		padding: calc(1.5rem - 1px);
+		border-radius: 8px;
+		color: white;
+		background-color: #23262d;
+		opacity: 0.8;
+	}
+	h2 {
+		margin: 0;
+		font-size: 1.25rem;
+		transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+	}
+	p {
+		margin-top: 0.5rem;
+		margin-bottom: 0;
+	}
+	.link-card:is(:hover, :focus-within) {
+		background-position: 0;
+		background-image: var(--accent-gradient);
+	}
+	.link-card:is(:hover, :focus-within) h2 {
+		color: rgb(var(--accent-light));
+	}
+</style>

astro-web/src/layouts/Docs.astro

@@ -8,7 +8,6 @@ const { frontmatter } = Astro.props;
 ---
 
 <Layout title="Getting Started" tab="getting-started">
-    <!-- sidebar goes here -->
     <div class="bg-neutral w-full">
         <Container>
             <h1 class="font-serif text-5xl py-16">
@@ -17,41 +16,54 @@ const { frontmatter } = Astro.props;
         </Container>
     </div>
     <div class="bg-white w-full">
-        <Container className="flex flex-row py-4 xl:py-12">
-            <div class="hidden md:flex flex-col pr-4 xl:pr-12 border-r border-r-neutral-gray/50 w-1/4">
+        <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="flex flex-col gap-4 p-4 rounded-sm hover:bg-neutral">
                     <a href="#" class="font-semibold text-lg">
-                        Introduction
+                        Getting Started
                     </a>
                     <div class="flex flex-col pl-2 xl:pl-4">                   
-                        <a href="#item-1" class="w-full p-3 hover:bg-neutral-gray/20">
-                            Item 1
+                        <a href="#installing-the-editioncrafter-cli" class="w-full p-3 hover:bg-neutral-gray/20">
+                            Installing the CLI
                         </a>
-                        <div class="flex flex-col pl-2 xl:pl-4">
-                            <a href="#subitem-1" class="w-full p-3 hover:bg-neutral-gray/20">
-                                Subitem 1
-                            </a>
-                        </div>
-                        <a href="#item-2" class="w-full p-3 hover:bg-neutral-gray/20">
-                            Item 2
+                        <a href="#creating-a-tei-document-from-your-iiif-manifest" class="w-full p-3 hover:bg-neutral-gray/20">
+                            Creating a TEI Document
                         </a>
                     </div>
                 </div>
                 <div class="flex flex-col gap-4 p-4 rounded-sm hover:bg-neutral">
-                    <a href="#how-to-install" class="font-semibold text-lg">
-                        How to Install
+                    <a href="#publishing-a-document" class="font-semibold text-lg">
+                        Publishing A Document
                     </a>
                     <div class="flex flex-col pl-2 xl:pl-4">                   
-                        <a href="#item-1-1" class="w-full p-3 hover:bg-neutral-gray/20">
-                            Item 1
+                        <a href="#editioncrafter-in-a-react-app" class="w-full p-3 hover:bg-neutral-gray/20">
+                            In a React App
                         </a>
-                        <a href="#item-2" class="w-full p-3 hover:bg-neutral-gray/20">
-                            Item 2
+                        <a href="#editioncrafter-in-an-html-website" class="w-full p-3 hover:bg-neutral-gray/20">
+                            In an HTML Website
+                        </a>
+                    </div>
+                </div>
+                <div class="flex flex-col gap-4 p-4 rounded-sm hover:bg-neutral">
+                    <a href="#editing-a-document" class="font-semibold text-lg">
+                            Editing A Document
+                    </a>
+                </div>
+                <div class="flex flex-col gap-4 p-4 rounded-sm hover:bg-neutral">
+                    <a href="#reference" class="font-semibold text-lg">
+                        Reference
+                    </a>
+                    <div class="flex flex-col pl-2 xl:pl-4">                   
+                        <a href="#editioncrafter-cli-reference" class="w-full p-3 hover:bg-neutral-gray/20">
+                            CLI Reference
+                        </a>
+                        <a href="#editioncrafter-viewer-reference" class="w-full p-3 hover:bg-neutral-gray/20">
+                            Viewer Reference
                         </a>
                     </div>
                 </div>
             </div>
-            <div class="px-12 w-3/4 prose h-full max-w-none">
+            <div class="px-12 w-[80%] prose h-full max-w-none overflow-y-scroll">
                 <slot />
             </div>
         </Container>

astro-web/src/layouts/Layout.astro

@@ -9,9 +9,10 @@ import '@fontsource/source-code-pro'
 interface Props {
 	title: string;
 	tab?: string;
+	transitions?: boolean
 }
 
-const { title, tab } = Astro.props;
+const { title, tab, transitions = true } = Astro.props;
 ---
 
 <!doctype html>
@@ -23,7 +24,7 @@ const { title, tab } = Astro.props;
 		<link rel="icon" type="image/svg+xml" href="/editioncrafter/favicon.svg" />
 		<meta name="generator" content={Astro.generator} />
 		<title>{title}</title>
-		<ViewTransitions />
+		{ transitions && <ViewTransitions /> }
 	</head>
 	<body class='flex h-full flex-col bg-white 3xl:bg-neutral-dark text-neutral-dark 3xl:max-w-screen-3xl mx-auto' transition:animate="initial">
 		<Header tab={tab} transition:persist />

astro-web/src/layouts/Viewer.astro

@@ -0,0 +1,45 @@
+---
+import Layout from '../layouts/Layout.astro';
+import Container from '../components/Container.astro';
+import { Image } from 'astro:assets';
+import leftArrow from '../assets/arrow-left.svg';
+import EditionCrafter from "@cu-mkp/editioncrafter";
+
+export interface Props {
+    title: string,
+    documentName: string,
+    transcriptionTypes: any,
+    iiifManifest: string,
+    documentInfo?: any,
+    threePanel?: boolean
+}
+
+const { title, documentName, transcriptionTypes, iiifManifest, documentInfo, threePanel } = Astro.props;
+
+---
+
+<Layout title={title}>
+    <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>
+        </Container>
+    </div>  
+    <div class="w-full h-80dvh bg-white">
+        <EditionCrafter
+            documentName={documentName}
+            documentInfo={documentInfo}
+            transcriptionTypes={transcriptionTypes}
+            iiifManifest={iiifManifest}
+            threePanel={threePanel}
+            client:only
+            transition:persist
+        />
+    </div>
+</Layout>