Improving Astro Site (#2)

* 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
performant-software · Mar 6, 2024 · f6cb373 · f6cb373
1 parent 2cdff2d
commit f6cb373
Show file tree

Hide file tree

Showing 13 changed files with 184 additions and 34 deletions.
diff --git a/astro-web/package-lock.json b/astro-web/package-lock.json
diff --git a/astro-web/package.json b/astro-web/package.json
@@ -25,5 +25,8 @@
     "react-dom": "^18.2.0",
     "tailwindcss": "^3.4.1",
     "typescript": "^5.3.3"
+  },
+  "devDependencies": {
+    "@tailwindcss/typography": "^0.5.10"
   }
 }
diff --git a/astro-web/src/components/FeatureTabs.tsx b/astro-web/src/components/FeatureTabs.tsx
@@ -7,17 +7,17 @@ const FeatureTabs = () => {
     return (
         <div className="max-w-[1072px] mx-auto">
             <img src={images[active]} width={1072} height={710} alt="EditionCrafter screenshot" className="transition" />
-            <div className="w-full py-8 flex flex-col gap-12">
-                <div className="flex flex-row justify-between gap-12 w-full">
-                    <div className={`flex flex-col p-12 gap-8 w-1/2 rounded-xl ${ active == 0 ? 'bg-neutral' : 'hover:bg-neutral/30 cursor-pointer'} transition`} onClick={() => setActive(0)}>
+            <div className="md:w-full py-8 flex flex-row md:flex-col overflow-x-scroll gap-6 md:gap-12 bg-white">
+                <div className="flex flex-row justify-between gap-6 md:gap-12 md:w-full">
+                    <div className={`flex flex-col p-12 gap-8 w-1/2 rounded-xl min-w-80 ${ active == 0 ? 'bg-neutral' : 'hover:bg-neutral/30 cursor-pointer'} transition`} onClick={() => setActive(0)}>
                         <h3 className="text-2xl">
                             Dual-pane display
                         </h3>
                         <p className="text-neutral-gray">
                             With the dual-pane display, a scholar or reader can navigate a source text and its associated texts in several, engaging ways. The display could simply show a digital version of a manuscript or two versions of a text in parallel, such as a facsimile page and a translation. A reader could even juxtapose two pages from different parts of the manuscript or zoom into one part of a facsimile page while simultaneously viewing the full version.
                         </p>
                     </div>
-                    <div className={`flex flex-col p-12 gap-8 w-1/2 rounded-xl ${ active == 1 ? 'bg-neutral' : 'hover:bg-neutral/30 cursor-pointer'} transition`} onClick={() => setActive(1)}>
+                    <div className={`flex flex-col p-12 gap-8 w-1/2 rounded-xl min-w-80 ${ active == 1 ? 'bg-neutral' : 'hover:bg-neutral/30 cursor-pointer'} transition`} onClick={() => setActive(1)}>
                         <h3 className="text-2xl">
                             Supports multiple transcriptions and translations
                         </h3>
@@ -26,16 +26,16 @@ const FeatureTabs = () => {
                         </p>
                     </div>
                 </div>
-                <div className="flex flex=row justify-between gap-12 w-full">
-                    <div className={`flex flex-col p-12 gap-8 w-1/2 rounded-xl ${ active == 2 ? 'bg-neutral' : 'hover:bg-neutral/30 cursor-pointer'} transition`} onClick={() => setActive(2)}>
+                <div className="flex flex-row justify-between gap-6 md:gap-12 md:w-full">
+                    <div className={`flex flex-col p-12 gap-8 w-1/2 rounded-xl min-w-80 ${ active == 2 ? 'bg-neutral' : 'hover:bg-neutral/30 cursor-pointer'} transition`} onClick={() => setActive(2)}>
                         <h3 className="text-2xl">
                             Integrated commentary
                         </h3>
                         <p className="text-neutral-gray">
                             Transcriptions and translations can be annotated to mark authorial deletions and additions, to expand abbreviations, to provide brief editorial commentary, and to link to extended commentary. Readers can easily view these notes without leaving the page. Editions can also include extended resources such as interpretative essays, a glossary, and bibliography.
                         </p>
                     </div>
-                    <div className={`flex flex-col p-12 gap-8 w-1/2 rounded-xl ${ active == 3 ? 'bg-neutral' : 'hover:bg-neutral/30 cursor-pointer'} transition`} onClick={() => setActive(3)}>
+                    <div className={`flex flex-col p-12 gap-8 w-1/2 rounded-xl min-w-80 ${ active == 3 ? 'bg-neutral' : 'hover:bg-neutral/30 cursor-pointer'} transition`} onClick={() => setActive(3)}>
                         <h3 className="text-2xl">
                             Built on TEI and IIIF
                         </h3>

diff --git a/astro-web/src/components/Footer.astro b/astro-web/src/components/Footer.astro
@@ -9,19 +9,19 @@ import { Image } from "astro:assets";
 
 <div class="bg-neutral w-full">
     <Container className="flex flex-col gap-8 py-12 items-center">
-        <div class="md:flex flex-row gap-6 align-middle">
-            <Image src={logo} alt="Edition Crafter" />
+        <div class="flex flex-col md:flex-row gap-6 align-middle justify-center items-center">
+            <Image src={logo} alt="Edition Crafter"/>
             <p class="text-5xl font-serif self-center">EditionCrafter</p>
         </div>
-        <p>
+        <p class="text-center">
             Lorem ipsum dolor sit amet consectetur. Nulla auctor a lectus iaculis. Enim pellentesque.
         </p>
         <div class="flex flex-row justify-center gap-6">
             <Image src={gh} alt="GitHub" />
             <Image src={twitter} alt="Twitter" />
         </div>
         <div class="h-[2px] bg-neutral-dark rounded-full w-full" />
-        <p>
+        <p class="text-center">
             Lorem ipsum dolor sit amet consectetur. Tellus ultricies purus nibh.
         </p>
     </Container>

diff --git a/astro-web/src/components/Header.astro b/astro-web/src/components/Header.astro
@@ -13,12 +13,12 @@ const { tab } = Astro.props;
 
 <div class="w-full max-w-screen-3xl 3xl:mx-auto bg-white">
     <Container className="flex flex-row justify-between py-8 align-middle">
-        <div class="flex flex-row align-middle gap-6">
+        <a class="flex flex-row align-middle gap-6" href="/editioncrafter/">
             <Image src={logo} alt="EditionCrafter" />
             <p class="text-2xl font-serif max-w-28 self-center">Edition Crafter</p>
-        </div>
-        <div class="flex flex-row gap-8 align-middle">
-			<Button light>
+        </a>
+        <div class="hidden md:flex flex-row gap-8 align-middle">
+			<Button light href='/editioncrafter/getting-started'>
 				Getting Started
 			</Button>
             <Button>

diff --git a/astro-web/src/components/Hero.astro b/astro-web/src/components/Hero.astro
@@ -7,9 +7,9 @@ import Container from './Container.astro';
 
 
 <div class="w-full max-w-screen-3xl relative 3xl:mx-auto bg-white">
-    <Image src={heroImg} alt="" class="absolute top-0 right-0" />
+    <Image src={heroImg} alt="" class="opacity-30 md:opacity-60 xl:opacity-100 absolute top-0 right-0" />
     <Container>
-        <div class="max-w-[520px] py-32">
+        <div class="max-w-[520px] py-32 relative z-10">
             <slot />
         </div>
     </Container>

diff --git a/astro-web/src/env.d.ts b/astro-web/src/env.d.ts
@@ -1 +1,2 @@
+/// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />
diff --git a/astro-web/src/layouts/Docs.astro b/astro-web/src/layouts/Docs.astro
@@ -0,0 +1,59 @@
+---
+import Container from "../components/Container.astro";
+import Layout from "./Layout.astro";
+
+
+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">
+                Getting Started
+            </h1>
+        </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">
+                <div class="flex flex-col gap-4 p-4 rounded-sm hover:bg-neutral">
+                    <a href="#" class="font-semibold text-lg">
+                        Introduction
+                    </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>
+                        <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>
+                    </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>
+                    <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>
+                        <a href="#item-2" class="w-full p-3 hover:bg-neutral-gray/20">
+                            Item 2
+                        </a>
+                    </div>
+                </div>
+            </div>
+            <div class="px-12 w-3/4 prose h-full max-w-none">
+                <slot />
+            </div>
+        </Container>
+    </div>
+</Layout>
diff --git a/astro-web/src/layouts/Layout.astro b/astro-web/src/layouts/Layout.astro
@@ -20,7 +20,7 @@ const { title, tab } = Astro.props;
 		<meta charset="UTF-8" />
 		<meta name="description" content="Astro description" />
 		<meta name="viewport" content="width=device-width" />
-		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+		<link rel="icon" type="image/svg+xml" href="/editioncrafter/favicon.svg" />
 		<meta name="generator" content={Astro.generator} />
 		<title>{title}</title>
 		<ViewTransitions />

diff --git a/astro-web/src/pages/getting-started.astro b/astro-web/src/pages/getting-started.astro
diff --git a/astro-web/src/pages/getting-started/index.mdx b/astro-web/src/pages/getting-started/index.mdx
@@ -0,0 +1,36 @@
+---
+layout: ../../layouts/Docs.astro
+---
+## Item 1
+
+Lorem ipsum dolor sit amet consectetur. Malesuada nunc sociis curabitur odio vitae sagittis varius. Sed aliquet venenatis eu quisque dictum. Aliquam eget at feugiat id aenean viverra. Sit sed viverra aliquet sed sed aliquam nec a consequat. A id morbi ornare et et integer proin elementum lectus. Neque morbi proin rhoncus imperdiet at interdum nunc eget. Ut porta ut integer massa iaculis aliquam. Nisi aliquet id diam at lectus potenti.
+
+Leo nisl neque dolor lacinia egestas sem nisl. Neque ullamcorper viverra accumsan lacus nibh euismod duis at convallis. Pharetra morbi tincidunt nunc amet ullamcorper. Tempor ut turpis ut auctor vitae elit. Id ornare eleifend commodo hendrerit netus nunc. Interdum in amet enim eu arcu quam in commodo ultricies. Cras tortor imperdiet tortor sed at aliquam in amet.
+
+#### Subitem 1
+
+Lorem ipsum dolor sit amet consectetur. Malesuada nunc sociis curabitur odio vitae sagittis varius. Sed aliquet venenatis eu quisque dictum. Aliquam eget at feugiat id aenean viverra. Sit sed viverra aliquet sed sed aliquam nec a consequat. A id morbi ornare et et integer proin elementum lectus. Neque morbi proin rhoncus imperdiet at interdum nunc eget. Ut porta ut integer massa iaculis aliquam. Nisi aliquet id diam at lectus potenti.
+
+Leo nisl neque dolor lacinia egestas sem nisl. Neque ullamcorper viverra accumsan lacus nibh euismod duis at convallis. Pharetra morbi tincidunt nunc amet ullamcorper. Tempor ut turpis ut auctor vitae elit. Id ornare eleifend commodo hendrerit netus nunc. Interdum in amet enim eu arcu quam in commodo ultricies. Cras tortor imperdiet tortor sed at aliquam in amet.
+
+#### Subitem 2
+
+Lorem ipsum dolor sit amet consectetur. Malesuada nunc sociis curabitur odio vitae sagittis varius. Sed aliquet venenatis eu quisque dictum. Aliquam eget at feugiat id aenean viverra. Sit sed viverra aliquet sed sed aliquam nec a consequat. A id morbi ornare et et integer proin elementum lectus. Neque morbi proin rhoncus imperdiet at interdum nunc eget. Ut porta ut integer massa iaculis aliquam. Nisi aliquet id diam at lectus potenti.
+
+## How to Install
+
+#### Item 1
+
+Lorem ipsum dolor sit amet consectetur. Malesuada nunc sociis curabitur odio vitae sagittis varius. Sed aliquet venenatis eu quisque dictum. Aliquam eget at feugiat id aenean viverra. Sit sed viverra aliquet sed sed aliquam nec a consequat. A id morbi ornare et et integer proin elementum lectus. Neque morbi proin rhoncus imperdiet at interdum nunc eget. Ut porta ut integer massa iaculis aliquam. Nisi aliquet id diam at lectus potenti.
+
+#### Item 2
+
+- a list
+- list
+- list
+
+`install editioncrafter`
+
+#### Item 3
+
+Lorem ipsum dolor sit amet consectetur. Malesuada nunc sociis curabitur odio vitae sagittis varius. Sed aliquet venenatis eu quisque dictum. Aliquam eget at feugiat id aenean viverra. Sit sed viverra aliquet sed sed aliquam nec a consequat. A id morbi ornare et et integer proin elementum lectus. Neque morbi proin rhoncus imperdiet at interdum nunc eget. Ut porta ut integer massa iaculis aliquam. Nisi aliquet id diam at lectus potenti.
diff --git a/astro-web/src/pages/index.astro b/astro-web/src/pages/index.astro
@@ -21,9 +21,16 @@ import { Image } from "astro:assets";
 			<p class="text-neutral-gray">
 				EditionCrafter is an easy-to-use tool for scholars, educators, and research institutions to publish digital critical editions in a low-cost and sustainable manner.
 			</p>
-			<Button>
-				Get Started &rarr;
-			</Button>
+			<div class="flex flex-row w-full justify-between">
+				<Button href="/editioncrafter/getting-started">
+					Get Started &rarr;
+				</Button>
+				<div class="flex md:hidden">
+					<Button href="#" light>
+						View on GitHub &rarr;
+					</Button>
+				</div> 
+			</div>
 		</div>
 	</Hero>
 
@@ -37,15 +44,15 @@ import { Image } from "astro:assets";
 				An open source and customizable publishing tool, EditionCrafter allows users to easily publish digital critical editions as feature-rich and sustainable static sites.
 			</p>
 			<div class="md:flex gap-12 text-neutral-gray">
-				<div class="w-1/2 flex flex-col gap-y-6">
+				<div class="md:w-1/2 flex flex-col gap-y-6">
 					<p>
 						EditionCrafter was developed as a collaboration between the Making and Knowing Project and Performant Software Solutions to address the need for a scholarly publication tool that integrates primary sources, commentary, and textual analysis.
 					</p>
 					<p>
 						As a publication tool, EditionCrafter facilitates the dissemination of original research through the creation of a digital critical edition of a text. Researchers, students, and institutions such as libraries, historical societies, archives, and community groups can grant public access to valuable textual sources across disciplines.
 					</p>
 				</div>
-				<div class="w-1/2 flex flex-col gap-y-6">
+				<div class="md:w-1/2 flex flex-col gap-y-6">
 					<p>
 						A platform for collaborative research and for pedagogy, EditionCrafter provides space for critical engagement with texts. Scholars and students alike can use digital tools to share not only data and finished products, but also documentation of the process of textual engagement and analysis.
 					</p>
@@ -69,7 +76,7 @@ import { Image } from "astro:assets";
 			<h2 class="text-4xl font-serif">
 				Explore Projects
 			</h2>
-			<div class="grid gap-12 grid-cols-3 py-12 mx-auto">
+			<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" />
@@ -81,7 +88,7 @@ import { Image } from "astro:assets";
 	</div>
 	<div class="bg-neutral w-full">
 		<Container className="py-20 md:flex flex-row gap-16 justify-between">
-			<div class="flex flex-col gap-6 md:w-1/2">
+			<div class="flex flex-col gap-6 md:w-1/2 pb-6 md:pb-0">
 				<h2 class="text-4xl font-serif">
 					Try it out now
 				</h2>
@@ -91,7 +98,7 @@ import { Image } from "astro:assets";
 				<p class="text-neutral-gray">
 					Lorem ipsum dolor sit amet consectetur. Auctor quam arcu magna curabitur pulvinar. Volutpat mauris faucibus nunc leo nullam nulla. Ultrices orci nulla elementum tincidunt non odio volutpat. Tincidunt mauris justo nam.
 				</p>
-				<Button>
+				<Button href="/editioncrafter/getting-started">
 					Get Started &rarr;
 				</Button>
 			</div>

diff --git a/astro-web/tailwind.config.mjs b/astro-web/tailwind.config.mjs
@@ -25,5 +25,7 @@ export default {
 			}
 		},
 	},
-	plugins: [],
+	plugins: [
+		require('@tailwindcss/typography')
+	],
 }
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		/// <reference path="../.astro/types.d.ts" />
		/// <reference types="astro/client" />