Adding index page and blogs to projects

Urban-Analytics-Technology-Platform · May 9, 2024 · fe647a9 · fe647a9
1 parent d8d7b9d
commit fe647a9
Show file tree

Hide file tree

Showing 7 changed files with 133 additions and 20 deletions.
diff --git a/src/components/BlogCard.astro b/src/components/BlogCard.astro
@@ -0,0 +1,57 @@
+---
+import type { CollectionEntry } from "astro:content";
+import { formatDistance, format, parse } from "date-fns";
+interface Props {
+  blogPost: CollectionEntry<"blogs">;
+}
+const { blogPost } = Astro.props;
+---
+
+<div
+  class="group relative rounded-lg block md:flex items-center bg-gray-100 shadow-xl"
+  style="min-height: 19rem;"
+>
+  <div
+    class="relative w-full md:w-2/5 h-full overflow-hidden rounded-t-lg md:rounded-t-none md:rounded-l-lg"
+    style="min-height: 19rem;"
+  >
+    {
+      blogPost.data.image ? (
+        <img
+          class="absolute inset-0 w-full h-full object-cover object-center"
+          src={blogPost.data.image.url}
+          alt={blogPost.data.image.alt}
+        />
+      ) : (
+        <div class="absolute inset-0 w-full h-full object-cover object-center bg-gradient-to-tr from-red-200 to-red-500 " />
+      )
+    }
+    <div
+      class="absolute flex flex-column items-center justify-center inset-0 w-full h-full bg-slate-900 bg-opacity-75 group-hover:bg-opacity-0 transition"
+    >
+      <h1 class="text-white text-2xl">{blogPost.data.title}</h1>
+    </div>
+  </div>
+  <div class="w-full md:w-3/5 h-full flex items-center bg-gray-100 rounded-lg">
+    <div class="p-12 md:pr-24 md:pl-16 md:py-12">
+      <span class="text-gray-400"
+        >{new Intl.DateTimeFormat().format(blogPost.data.publish_date)}</span
+      >
+      <p class="text-gray-600">{blogPost.data.summary}</p>
+      <a
+        class="flex items-baseline mt-3 text-indigo-600 hover:text-indigo-900 focus:text-indigo-900"
+        href={`/blog/${blogPost.slug}`}
+      >
+        <span>Read</span>
+        <span class="text-xs ml-1">&#x279c;</span>
+      </a>
+    </div>
+    <svg
+      class="hidden md:block absolute inset-y-0 h-full w-24 fill-current text-gray-100 -ml-12"
+      viewBox="0 0 100 100"
+      preserveAspectRatio="none"
+    >
+      <polygon points="50,0 100,0 50,100 0,100"></polygon>
+    </svg>
+  </div>
+</div>
diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -49,7 +49,12 @@ const tier2Pathnames = tier2Projects.map(
           {
             tier1Projects.map((project) => (
               <li>
-                <a href={"/projects/" + project.slug}>{project.data.name}</a>
+                <a
+                  href={"/projects/" + project.slug}
+                  aria-label={`Project ${project.data.name}`}
+                >
+                  {project.data.name}
+                </a>
               </li>
             ))
           }
@@ -61,12 +66,20 @@ const tier2Pathnames = tier2Projects.map(
           {
             tier2Projects.map((project) => (
               <li>
-                <a href={"/projects/" + project.slug}>{project.data.name}</a>
+                <a
+                  href={"/projects/" + project.slug}
+                  aria-label={`Project ${project.data.name}`}
+                >
+                  {project.data.name}
+                </a>
               </li>
             ))
           }
         </ul>
       </li>
+      <li>
+        <a href="/blog" aria-label={`Blog`}>Blog</a>
+      </li>
     </ul>
   </nav>
 </div>
diff --git a/src/content/blogs/test_blog.md b/src/content/blogs/test_blog.md
@@ -1,10 +1,10 @@
 ---
 title: "Chat GPT wrote this"
 slug: "test_blog"
-draft: true
+draft: false
 authors:
   - stuart_lynn
-publish_date: "08-05-2024"
+publish_date: 2024-05-08
 projects:
   - popgetter
 tags:
@@ -13,6 +13,8 @@ tags:
 image:
   url: https://www.enterpriseai.news/wp-content/uploads/2022/08/geospatial-data_shutterstock-2078842243_900x-370x290.jpg
   alt: Some dumb GEOAI image
+
+summary: We explore how LLM models can be used to replace low wage workers while making everything just that little bit worse
 ---
 
 **Harnessing AI in Geospatial Applications: A Transformative Leap**

diff --git a/src/content/config.ts b/src/content/config.ts
@@ -28,11 +28,11 @@ export const collections = {
       avatarURL: z.string().optional(),
     }),
   }),
-  blog: defineCollection({
+  blogs: defineCollection({
     schema: z.object({
       title: z.string(),
+      summary: z.string(),
       draft: z.boolean(),
-      slug: z.string().optional(),
       publish_date: z.date(),
       authors: z.array(reference("people")),
       projects: z.array(reference("project")).optional(),

diff --git a/src/pages/blog/[...slug].astro b/src/pages/blog/[...slug].astro
@@ -17,20 +17,8 @@ export async function getStaticPaths() {
   });
 }
 
-let authors = [];
-let projects = [];
-/// get entries didn't want to work here for some reasion
-for (const author of entry.data.authors) {
-  let found = await getEntry("people", author);
-  authors.push(found);
-}
-
-if (entry.data.projects) {
-  for (const project of entry.data.projects) {
-    let found = await getEntry("project", project);
-    projects.push(found);
-  }
-}
+let authors = await getEntries(entry.data.authors);
+let projects = entry.data.projects ? await getEntries(entry.data.projects) : [];
 ---
 
 <Base>

diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
@@ -0,0 +1,35 @@
+---
+import { getCollection, getEntry, getEntries } from "astro:content";
+import Base from "../../layouts/Base.astro";
+import PersonLink from "../../components/PersonLink.astro";
+import BlogCard from "../../components/BlogCard.astro";
+
+const blogs = (await getCollection("blogs"))
+  .filter((b) => !b.data.draft)
+  .sort((a, b) => (a.data.publish_date > b.data.publish_date ? 1 : -1));
+
+const people = await getCollection("people");
+---
+
+<Base>
+  <section class="wrapper style1">
+    <div class="container">
+      <div class="row gtr-200">
+        <div class="col-12 col-12-narrower imp-narrower">
+          <div id="content">
+            <article>
+              <header>
+                <h2>Blogs</h2>
+              </header>
+              <section>
+                <ul>
+                  {blogs.map((b) => <BlogCard blogPost={b} />)}
+                </ul>
+              </section>
+            </article>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</Base>
diff --git a/src/pages/projects/[...slug].astro b/src/pages/projects/[...slug].astro
@@ -2,6 +2,7 @@
 import { getCollection, getEntry, getEntries } from "astro:content";
 import Base from "../../layouts/Base.astro";
 import PersonLink from "../../components/PersonLink.astro";
+import BlogCard from "../../components/BlogCard.astro";
 
 export async function getStaticPaths() {
   const project = await getCollection("project");
@@ -14,6 +15,11 @@ export async function getStaticPaths() {
 const { entry } = Astro.props;
 const pis = entry.data.pis ? await getEntries(entry.data.pis) : null;
 const team = entry.data.team ? await getEntries(entry.data.team) : null;
+const blogs = await getCollection("blogs");
+const blogsForProject = blogs.filter((b) =>
+  b.data?.projects?.map((p) => p.slug)?.includes(entry.slug),
+);
+
 const { Content } = await entry.render();
 ---
 
@@ -85,6 +91,18 @@ const { Content } = await entry.render();
               }
               <Content />
             </article>
+            {
+              blogsForProject && blogsForProject.length > 0 && (
+                <section>
+                  <h2>Blog posts</h2>
+                  <ul>
+                    {blogsForProject.map((b) => (
+                      <BlogCard blogPost={b} />
+                    ))}
+                  </ul>
+                </section>
+              )
+            }
           </div>
         </div>
       </div>