Merge pull request #253 from JaneliaSciComp/fix-broken-images-on-ecos…

…ystem-page-sidebar

Fix broken images on ecosystem page sidebar

src/components/ContentGridDisplay.astro

@@ -1,8 +1,7 @@
 ---
 import { getCollection } from "astro:content";
-import Wrapper from "./Wrapper.astro";
 import Button from "./Button.astro";
-import Grid from "./Grid.astro";
+import Item from "./DisplayItem.astro";
 
 const {
   title,
@@ -11,7 +10,6 @@ const {
   linkUrl,
   information,
   subset,
-  // count = 4,s
   bg = await Astro.slots.render("bg"),
 } = Astro.props;
 
@@ -46,11 +44,11 @@ const items = await getCollection(content);
       )
     }
   </div>
-  {
-    subset ? (
-      <Grid items={subset} content={content} />
-    ) : (
-      <Grid items={items} content={content} />
-    )
-  }
+  <div class="grid gap-6 row-gap-5 md:grid-cols-2 lg:grid-cols-4 -mb-6">
+    {
+      subset
+        ? subset.map((item) => <Item item={item} content={content} />)
+        : items.map((item) => <Item item={item} content={content} />)
+    }
+  </div>
 </>

src/components/GridItem.astro → src/components/DisplayItem.astro

@@ -1,30 +1,33 @@
 ---
-import { Image } from "astro:assets";
+import Image from "astro/components/Image.astro";
 const { item, content } = Astro.props;
 const baseUrl = import.meta.env.BASE_URL;
 ---
 
-<article class="mb-6 transition">
+<article class="mb-8 pb-8 border-b dark:border-slate-700">
   {
     item.data["image file"] ? (
       <div class="relative md:h-64 bg-gray-400 dark:bg-slate-700 rounded shadow-lg mb-6">
         <a href={`${baseUrl}/${content}/${item.slug}`}>
+          {/* Currently, images are embedded in the blog frontmatter, so Astro loads them as an Astro image obj */}
           {typeof item.data["image file"] === "object" ? (
             <Image
               src={item.data["image file"]}
               class="w-full md:h-full object-cover rounded shadow-lg bg-gray-400 dark:bg-slate-700"
               widths={[400, 900]}
               width={400}
               sizes="(max-width: 900px) 400px, 900px"
-              alt={item.data["image alt text"]}
+              alt={item.data["image caption"]}
               aspectRatio="16:9"
               layout="cover"
               loading="lazy"
               decoding="async"
             />
           ) : (
+            // Images in the projects are stored in the public directory
             <img
-              src={`/src/assets/images/${item.data["image file"]}`}
+              src={`${baseUrl}/project-images/${item.data["image file"]}`}
+              alt={item.data["image caption"]}
               class="w-full md:h-full object-cover rounded shadow-lg bg-gray-400 dark:bg-slate-700"
               loading="lazy"
             />

src/components/ecosystems/ContentListDisplay.astro

@@ -0,0 +1,57 @@
+---
+import { getCollection } from "astro:content";
+import Button from "../Button.astro";
+import Item from "../DisplayItem.astro";
+
+const {
+  title,
+  content,
+  linkText,
+  linkUrl,
+  information,
+  subset,
+  id,
+  isDark = false,
+  classes = {},
+  bg = await Astro.slots.render("bg"),
+} = Astro.props;
+
+const items = await getCollection(content);
+---
+
+<section class="max-w-5xl mx-auto px-6">
+  <div class="flex flex-col mb-8">
+    {
+      title && (
+        <div class="md:max-w-sm">
+          <h2
+            class="text-3xl font-bold tracking-tight sm:text-4xl sm:leading-none group font-heading mb-2"
+            set:html={title}
+          />
+          {linkText && linkUrl && (
+            <Button variant="link" href={linkUrl}>
+              {" "}
+              {linkText} »
+            </Button>
+          )}
+        </div>
+      )
+    }
+
+    {
+      information && (
+        <p
+          class="text-muted dark:text-slate-400 lg:text-sm lg:max-w-md"
+          set:html={information}
+        />
+      )
+    }
+  </div>
+  <div class="-mb-6">
+    {
+      subset
+        ? subset.map((item) => <Item item={item} content={content} />)
+        : items.map((item) => <Item item={item} content={content} />)
+    }
+  </div>
+</section>

src/components/projects/individual-project/Citation.astro → src/components/individual-project/Citation.astro

@@ -1,5 +1,5 @@
 ---
-import Link from "../../Link.astro";
+import Link from "../Link.astro";
 const { citationLink, citationText, githubLink } = Astro.props;
 ---
 

src/components/projects/individual-project/ExternalLinks.astro → src/components/individual-project/ExternalLinks.astro

@@ -1,5 +1,5 @@
 ---
-import Link from "../../Link.astro";
+import Link from "../Link.astro";
 const { frontmatter } = Astro.props;
 ---
 

src/components/projects/individual-project/Readme.jsx → src/components/individual-project/Readme.jsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { getReadme, getDefaultBranch } from "../../../utils/githubApiHelper";
+import { getReadme, getDefaultBranch } from "../../utils/githubApiHelper";
 import DOMPurify from "dompurify";
 
 export default function Readme({ githubLink }) {

src/components/projects/individual-project/Tabs.jsx → src/components/individual-project/Tabs.jsx

@@ -3,7 +3,7 @@ import {
   TabsContent,
   TabsList,
   TabsTrigger,
-} from "../../../../@/components/ui/tabs";
+} from "../../../@/components/ui/tabs";
 
 export default function ProjectPageTabs({ overview, readme, content }) {
   const contentTabTitle = readme ? "GitHub README" : "Details";

src/components/projects/CardContainer.jsx

@@ -1,11 +1,11 @@
 import { useState, useEffect } from "react";
 import { useStore } from "@nanostores/react";
-import { selectedTags } from "./stores/selectedTagsStore";
-import { selectedProjectType } from "./stores/selectedProjectTypeStore";
+import { selectedTags } from "../../stores/selectedTagsStore";
+import { selectedProjectType } from "../../stores/selectedProjectTypeStore";
 import { extractUniqueTagValueArray } from "../../utils/tagManipulation";
-import { $projectData } from "./stores/projectSearchResultsStore";
-import { $ecosystemData } from "./stores/ecosystemSearchResultsStore";
-import { $urlQuery } from "./stores/queryStore";
+import { $projectData } from "../../stores/projectSearchResultsStore";
+import { $ecosystemData } from "../../stores/ecosystemSearchResultsStore";
+import { $urlQuery } from "../../stores/queryStore";
 
 export default function CardContainer({
   url,

src/components/projects/FilterDropdowns.jsx

@@ -4,9 +4,9 @@ import { Select as BaseSelect } from "@mui/base/Select";
 import { Option as BaseOption } from "@mui/base/Option";
 import clsx from "clsx";
 import { TbSelector } from "react-icons/tb";
-import { handleTagSelection } from "./stores/selectedTagsStore.js";
+import { handleTagSelection } from "../../stores/selectedTagsStore.js";
 import { useStore } from "@nanostores/react";
-import { selectedTags } from "./stores/selectedTagsStore.js";
+import { selectedTags } from "../../stores/selectedTagsStore.js";
 
 const getOptionColorClasses = ({ selected, highlighted, disabled }) => {
   let classes = "";

src/components/projects/FilterMenu.jsx

@@ -1,11 +1,11 @@
 import { useState, useEffect } from "react";
 import { useStore } from "@nanostores/react";
 import { TbMinus, TbPlus, TbX } from "react-icons/tb";
-import { isFilterMenuVisible } from "./stores/isFilterMenuVisibleStore.js";
+import { isFilterMenuVisible } from "../../stores/isFilterMenuVisibleStore.js";
 import {
   selectedTags,
   handleTagSelection,
-} from "./stores/selectedTagsStore.js";
+} from "../../stores/selectedTagsStore.js";
 import { getBackgroundColor } from "../../utils/tagManipulation.js";
 
 const OMIT_TAG_CATEGORIES = ["software ecosystem", "supported file types"];
@@ -51,7 +51,7 @@ export default function FilterMenu({ uniqueTags }) {
     <div
       className={`${
         $isFilterMenuVisible ? "flex translate-x-0" : "translate-x-full"
-      }  z-40 md:z-auto fixed md:static  md:translate-x-0 top-0 right-0  transition-transform duration-500 w-full h-[100dvh] md:h-auto md:max-h-full flex-col px-4 md:pl-0 bg-white dark:bg-slate-900`}
+      }  z-40 md:z-auto fixed md:static  md:translate-x-0 top-0 right-0  transition-transform duration-500 w-full h-[100dvh] md:h-auto md:max-h-full flex-col px-4 md:pl-0 `}
     >
       <button
         className="md:hidden self-end m-2 btn-secondary rounded-full"

src/components/projects/ProjectCount.jsx

@@ -1,10 +1,10 @@
 import { useState, useEffect } from "react";
 import { useStore } from "@nanostores/react";
-import { selectedTags } from "./stores/selectedTagsStore.js";
-import { selectedProjectType } from "./stores/selectedProjectTypeStore.js";
-import { $urlQuery } from "./stores/queryStore.js";
-import { $projectData } from "./stores/projectSearchResultsStore.js";
-import { $ecosystemData } from "./stores/ecosystemSearchResultsStore.js";
+import { selectedTags } from "../../stores/selectedTagsStore.js";
+import { selectedProjectType } from "../../stores/selectedProjectTypeStore.js";
+import { $urlQuery } from "../../stores/queryStore.js";
+import { $projectData } from "../../stores/projectSearchResultsStore.js";
+import { $ecosystemData } from "../../stores/ecosystemSearchResultsStore.js";
 import { extractUniqueTagValueArray } from "../../utils/tagManipulation.js";
 
 export default function ProjectCount({ allContent, contentType }) {

src/components/projects/ProjectTypeBtns.jsx

@@ -1,7 +1,7 @@
 import {
   selectedProjectType,
   handleProjectTypeButton,
-} from "./stores/selectedProjectTypeStore.js";
+} from "../../stores/selectedProjectTypeStore.js";
 import { useStore } from "@nanostores/react";
 
 export default function ProjectTypeSelector() {

src/components/projects/ProjectTypeDropdown.jsx

@@ -7,7 +7,7 @@ import { TbSelector } from "react-icons/tb";
 import {
   selectedProjectType,
   handleProjectTypeDropdown,
-} from "./stores/selectedProjectTypeStore.js";
+} from "../../stores/selectedProjectTypeStore.js";
 import { useStore } from "@nanostores/react";
 
 const getOptionColorClasses = ({ selected, highlighted, disabled }) => {

src/components/projects/ResetProjectTypeBtn.jsx

@@ -1,4 +1,4 @@
-import { handleProjectTypeDropdown } from "./stores/selectedProjectTypeStore";
+import { handleProjectTypeDropdown } from "../../stores/selectedProjectTypeStore";
 
 export default function ResetProjectTypeBtn() {
   return (

src/components/projects/SearchInput.jsx

@@ -1,13 +1,13 @@
 import { useStore } from "@nanostores/react";
 import { Input } from "../../../@/components/ui/input";
 import { Label } from "../../../@/components/ui/label";
-import { $urlQuery, handleQuery } from "./stores/queryStore";
+import { $urlQuery, handleQuery } from "../../stores/queryStore";
 
 export default function SearchInput() {
   const urlQuery = useStore($urlQuery);
 
   return (
-    <div className="grid w-full max-w-sm items-center gap-1.5 md:pl-2 md:pr-6 mb-8">
+    <div className="grid w-full items-center gap-1.5 md:pl-2 md:pr-6 mb-8">
       <div className="flex items-center justify-between ">
         <Label className="text-lg font-bold" htmlFor="search">
           Search

src/components/projects/ToggleFilterMenuBtn.jsx

@@ -1,7 +1,7 @@
 import { Badge } from "@mui/base/Badge";
 import { useStore } from "@nanostores/react";
-import { selectedTags } from "./stores/selectedTagsStore";
-import { isFilterMenuVisible } from "./stores/isFilterMenuVisibleStore";
+import { selectedTags } from "../../stores/selectedTagsStore";
+import { isFilterMenuVisible } from "../../stores/isFilterMenuVisibleStore";
 import { TbAdjustmentsHorizontal } from "react-icons/tb";
 
 export default function ToggleFilterMenuBtn({ uniqueTags }) {

src/content/blog/working-with-ossi-supported-projects.md

@@ -3,8 +3,9 @@ title: Working with OSSI-supported projects
 tagline: A quick-start guide
 author names: Rokicki et al.
 image file: ./f4pUuCc3M0g-unsplash.jpg
-image alt text: Laptop displaying graphs of data
-related projects: [an-open-source-platform-for-single-molecule-localization, kilosort, paintera]
+image caption: Laptop displaying graphs of data
+related projects:
+  [an-open-source-platform-for-single-molecule-localization, kilosort, paintera]
 ---
 
 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
@@ -27,4 +28,4 @@ Iaculis arcu commodo dis proin vitae himenaeos, ante tristique potenti magna lig
 
 Duis maecenas massa habitasse inceptos imperdiet scelerisque at condimentum ultrices, nam dui leo enim taciti varius cras habitant pretium rhoncus, ut hac euismod nostra metus sagittis mi aenean. Quam eleifend aliquet litora eget a tempor, ultricies integer vestibulum non felis sodales, eros diam massa libero iaculis.
 
-Nisl ligula ante magnis himenaeos pellentesque orci cras integer urna ut convallis, id phasellus libero est nunc ultrices eget blandit massa ac hac, morbi vulputate quisque tellus feugiat conubia luctus tincidunt curae fermentum. Venenatis dictumst tincidunt senectus vivamus duis dis sociis taciti porta primis, rhoncus ridiculus rutrum curae mattis ullamcorper ac sagittis nascetur curabitur erat, faucibus placerat vulputate eu at habitasse nulla nisl interdum. Varius turpis dignissim montes ac ante tristique quis parturient hendrerit faucibus, consequat auctor penatibus suspendisse rutrum erat nulla inceptos est justo, etiam mollis mauris facilisi cras sociosqu eu sapien sed.
+Nisl ligula ante magnis himenaeos pellentesque orci cras integer urna ut convallis, id phasellus libero est nunc ultrices eget blandit massa ac hac, morbi vulputate quisque tellus feugiat conubia luctus tincidunt curae fermentum. Venenatis dictumst tincidunt senectus vivamus duis dis sociis taciti porta primis, rhoncus ridiculus rutrum curae mattis ullamcorper ac sagittis nascetur curabitur erat, faucibus placerat vulputate eu at habitasse nulla nisl interdum. Varius turpis dignissim montes ac ante tristique quis parturient hendrerit faucibus, consequat auctor penatibus suspendisse rutrum erat nulla inceptos est justo, etiam mollis mauris facilisi cras sociosqu eu sapien sed.

src/content/config.ts

@@ -88,7 +88,7 @@ const blogCollection = defineCollection({
       tagline: z.string().optional(),
       "author names": z.string(),
       "image file": image().optional(),
-      "image alt text": z.string().optional(),
+      "image caption": z.string().optional(),
       "related projects": z.union([
         z.array(reference("projects")),
         reference("projects"),

src/content/projects/bigstitcher.md

@@ -11,6 +11,8 @@ documentation link: https://imagej.net/plugins/bigstitcher/
 installation instructions link: https://imagej.net/plugins/bigstitcher/#download
 how to cite link: https://doi.org/10.1038/s41592-019-0501-0
 how to cite text: "Hörl, D., Rojas Rusak, F., Preusser, F. et al. BigStitcher: reconstructing high-resolution image datasets of cleared and expanded samples. Nature Methods 16, 870–874 (2019)."
+# image file: ./optional-file-path--only-one-file-currently-supported.jpg
+# image caption: Required if you upload an image file
 youtube url: https://www.youtube.com/watch?v=2nsz4mhsgyQ
 youtube caption: Towards reconstruction of peta-scale lightsheet microscopy datasets, by Dr. Stephan Preibisch (HHMI Janelia).
 development team: [Scientific Computing Software]

src/content/projects/bigwarp.md

@@ -22,8 +22,8 @@ how to cite text: "JA Bogovic, P Hanslovsky, A Wong, S Saalfeld, Robust registra
 #     Display text for link 2,
 #   ]
 # related blog posts: [Only-for-posts-hosted-on-this-site, Optional-file-name]
-image file: bigwarp.png
-image alt text: A deformable transformation created and visualized with BigWarp.
+image file: ./bigwarp.png
+image caption: A deformable transformation created and visualized with BigWarp.
 youtube url: https://www.youtube.com/watch?v=65jc9ViXhMk
 youtube caption: A description of BigWarp by John Bogovic from the Saalfeld lab, which is supported by the Open Science Software Initiative.
 development team: [Saalfeld Lab]