Merge pull request #309 from JaneliaSciComp/upgrade-astro-and-add-lin…

…ter-cmd

chore: update to Astro v5

package.json

@@ -9,8 +9,8 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/react": "^3.6.2",
-    "@astrojs/tailwind": "^5.1.2",
+    "@astrojs/react": "^4.1.0",
+    "@astrojs/tailwind": "^5.1.3",
     "@fontsource-variable/inter": "^5.0.16",
     "@iconify-json/tabler": "^1.1.103",
     "@mui/base": "^5.0.0-beta.36",
@@ -22,7 +22,7 @@
     "@radix-ui/react-tabs": "^1.0.4",
     "@types/react": "^18.2.47",
     "@types/react-dom": "^18.2.18",
-    "astro": "^4.16.7",
+    "astro": "^5.0.5",
     "astro-embed": "^0.7.1",
     "astro-icon": "^1.0.2",
     "class-variance-authority": "^0.7.0",

src/components/DisplayItem.astro

@@ -7,7 +7,7 @@ const { item, content } = Astro.props;
   {
     item.data["image file"] ? (
       <div class="relative md:h-64 bg-gray-400 dark:bg-slate-700 rounded shadow-lg mb-6">
-        <a href={`/${content}/${item.slug}`}>
+        <a href={`/${content}/${item.id}`}>
           {/* Currently, images are embedded in the blog frontmatter, so Astro loads them as an Astro image obj */}
           {typeof item.data["image file"] === "object" ? (
             <Image
@@ -40,7 +40,7 @@ const { item, content } = Astro.props;
 
   <h3 class="mb-2 text-xl font-bold leading-tight sm:text-2xl font-heading">
     <a
-      href={`/${content}/${item.slug}`}
+      href={`/${content}/${item.id}`}
       class="hover:text-primary transition ease-in duration-200"
     >
       {item.data.title}

src/components/ProposalListItem.astro

@@ -33,9 +33,9 @@ const relatedProjects = await getEntries(proposal.data.projects);
       {
         relatedProjects.map((project) => {
           if (project) {
-            const slug = project.slug;
+            const id = project.id;
             const title = project.data.title;
-            return <Link url={`/projects/${slug}`} text={title} />;
+            return <Link url={`/projects/${id}`} text={title} />;
           }
         })
       }

src/components/blog/BlogImage.astro

@@ -1,14 +1,14 @@
 ---
 import { Image } from "astro:assets";
 
-const { imgFile, slug, caption } = Astro.props;
+const { imgFile, id, caption } = Astro.props;
 ---
 
 {
   imgFile ? (
     <a
       class="relative block group"
-      href={`/blog/${slug}` ?? "javascript:void(0)"}
+      href={`/blog/${id}` ?? "javascript:void(0)"}
     >
       <div class="relative h-0 pb-[56.25%] md:pb-[75%] md:h-72 lg:pb-[56.25%] overflow-hidden bg-gray-400 dark:bg-slate-700 rounded shadow-lg">
         <Image

src/components/blog/BlogListItem.astro

@@ -9,7 +9,7 @@ const { post } = Astro.props;
 >
   <BlogImage
     imgFile={post.data["image file"]}
-    slug={post.slug}
+    id={post.id}
     caption={post.data["image caption"]}
   />
   <div class="p-4">
@@ -25,7 +25,7 @@ const { post } = Astro.props;
       >
         <a
           class="hover:text-primary dark:hover:text-primary transition ease-in duration-200"
-          href={`/blog/${post.slug}`}
+          href={`/blog/${post.id}`}
         >
           {post.data.title}
         </a>

src/components/individual-project/Readme.jsx

@@ -57,14 +57,7 @@ export default function Readme({ githubLink }) {
       }
     }
 
-    async function fetchRateLimit() {
-      const data = await getRateLimit();
-      setRateLimit(data);
-    }
-
-    // Call the fetch functions
     fetchReadme();
-    fetchRateLimit();
   }, [githubLink]);
 
   return (

src/components/individual-project/RelatedPosts.astro

@@ -9,7 +9,7 @@ const { posts } = Astro.props;
     <div class="flex flex-wrap mb-2 gap-3">
       <p class="font-semibold">Related blog posts:</p>
       {posts.map((post) => (
-        <Link text={post?.data?.title} url={`/blog/${post?.slug}`} />
+        <Link text={post?.data?.title} url={`/blog/${post?.id}`} />
       ))}
     </div>
   ) : null

src/content/config.ts → src/content.config.ts

@@ -1,8 +1,9 @@
 import { z, defineCollection, reference } from "astro:content";
+import { glob } from "astro/loaders";
 
 // Projects frontmatter
 const projectsCollection = defineCollection({
-  type: "content",
+  loader: glob({ pattern: "**/[^_]*.md", base: "./src/content/projects" }),
   schema: z.object({
     title: z.string(),
     tagline: z.string(),
@@ -82,7 +83,7 @@ const projectsCollection = defineCollection({
 
 // Proposals frontmatter
 const proposalCollection = defineCollection({
-  type: "content",
+  loader: glob({ pattern: "**/[^_]*.md", base: "./src/content/proposals" }),
   schema: z.object({
     "OSSI proposal link": z.string(),
     title: z.string(),
@@ -95,7 +96,7 @@ const proposalCollection = defineCollection({
 
 // Blogs frontmatter
 const blogCollection = defineCollection({
-  type: "content",
+  loader: glob({ pattern: "**/[^_]*.md", base: "./src/content/blog" }),
   schema: ({ image }) =>
     z.object({
       title: z.string(),
@@ -114,7 +115,7 @@ const blogCollection = defineCollection({
 
 //Ecosystems frontmatter
 const ecosystemsCollection = defineCollection({
-  type: "content",
+  loader: glob({ pattern: "**/[^_]*.md", base: "./src/content/ecosystems" }),
   schema: ({ image }) =>
     z.object({
       title: z.string(),

src/layouts/BlogLayout.astro

@@ -83,7 +83,7 @@ const relatedProjects = frontmatter["related projects"]
                 {relatedProjects.map((project) => (
                   <Link
                     text={project.data.title}
-                    url={`/projects/${project.slug}`}
+                    url={`/projects/${project.id}`}
                   />
                 ))}
               </div>

src/pages/blog/[...slug].astro → src/pages/blog/[...id].astro

@@ -1,18 +1,18 @@
 ---
-import { getCollection, getEntries } from "astro:content";
+import { getCollection, render } from "astro:content";
 import BlogLayout from "@layouts/BlogLayout.astro";
 
 export async function getStaticPaths() {
   const posts = await getCollection("blog");
   return posts.map((post) => ({
-    params: { slug: post.slug },
+    params: { id: post.id },
     props: { post },
   }));
 }
 
 const { post } = Astro.props;
 
-const { Content } = await post.render();
+const { Content } = await render(post);
 ---
 
 <BlogLayout frontmatter={post.data}>

src/pages/ecosystems/[...slug].astro → src/pages/ecosystems/[...id].astro

@@ -1,5 +1,5 @@
 ---
-import { getCollection, getEntries } from "astro:content";
+import { getCollection, getEntries, render } from "astro:content";
 
 import BaseLayout from "@layouts/BaseLayout.astro";
 import ContentListDisplay from "@components/ecosystems/ContentListDisplay.astro";
@@ -11,14 +11,14 @@ import { getTagKeysAndValues } from "@utils/getTags";
 export async function getStaticPaths() {
   const ecosystems = await getCollection("ecosystems");
   return ecosystems.map((ecosystem) => ({
-    params: { slug: ecosystem.slug },
+    params: { id: ecosystem.id },
     props: { ecosystem },
   }));
 }
 
 const { ecosystem } = Astro.props;
 const frontmatter = ecosystem.data;
-const { Content } = await ecosystem.render();
+const { Content } = await render(ecosystem);
 
 const relatedProjects = frontmatter["related projects"]
   ? await getEntries(frontmatter["related projects"])

src/pages/ecosystems/index.astro

@@ -76,8 +76,8 @@ const uniqueTags = getTagKeysAndValues(flattenedRelatedProjects);
           allEcosystems.map((content) => {
             return (
               <CardContainer
-                key={content.slug}
-                url={`/ecosystems/${content.slug}/`}
+                key={content.id}
+                url={`/ecosystems/${content.id}/`}
                 title={content.data.title}
                 tagline={content.data.tagline}
                 tagsObj={content.data.tagsObj}

src/pages/projects/[slug].astro → src/pages/projects/[id].astro

@@ -1,5 +1,5 @@
 ---
-import { getCollection, getEntries } from "astro:content";
+import { getCollection, getEntries, render } from "astro:content";
 
 import BaseLayout from "@layouts/BaseLayout.astro";
 import QuickLinks from "@components/individual-project/QuickLinks.astro";
@@ -14,21 +14,22 @@ import Readme from "@components/individual-project/Readme";
 import { getTagKeysAndValues } from "@utils/getTags";
 import { findLabInfo } from "@utils/getLabUrl";
 import RelatedPosts from "@components/individual-project/RelatedPosts.astro";
+import { undefined } from "astro:schema";
 
 // Implementation of Astro getStaticPaths() function, required for dynamic routes
 // Defines all paths at build time, in this case, for individual projects in the "projects" content collection
 export async function getStaticPaths() {
   const projects = await getCollection("projects");
   return projects.map((project) => ({
-    params: { slug: project.slug },
+    params: { id: project.id },
     props: { project },
   }));
 }
 
 const { project } = Astro.props;
 const frontmatter = project.data;
 const body = project.body;
-const { Content } = await project.render();
+const { Content } = await render(project);
 
 const relatedBlogPosts = frontmatter["related blog posts"]
   ? await getEntries(frontmatter["related blog posts"])
@@ -94,7 +95,7 @@ const labInfoArray = findLabInfo(frontmatter["development team"]);
         </div>
 
         {
-          body.length === 0 ||
+          body === undefined ||
           body.includes("provide an alternative description") ? (
             <Readme
               githubLink={frontmatter["github link"]}

src/pages/projects/index.astro

@@ -66,8 +66,8 @@ const uniqueTags = getTagKeysAndValues(allProjects);
             const tagsObj = getTagKeysAndValues(content);
             return (
               <CardContainer
-                key={content.slug}
-                url={`/projects/${content.slug}/`}
+                key={content.id}
+                url={`/projects/${content.id}/`}
                 title={content.data.title}
                 tagsObj={tagsObj}
                 projectType={content.data["project type"][0]}