move frontend projects back to home grid, add order property

Author: davidlyons

src/components/Header.astro

@@ -16,11 +16,11 @@ import { SITE_TITLE } from '@/consts';
         >
           {SITE_TITLE}
         </a>
-        <!-- <div class="text-xs tracking-wide opacity-60">{SITE_DESCRIPTION}</div> -->
+        <div class="tracking-wide opacity-60">3D / Front End Web Dev</div>
       </div>
       <ul class="flex flex-wrap justify-center sm:ms-auto lg:mb-0">
-        <HeaderLink href="/">3D</HeaderLink>
-        <HeaderLink href="/frontend">Front End</HeaderLink>
+        <HeaderLink href="/">Work</HeaderLink>
+        <!-- <HeaderLink href="/frontend">Front End</HeaderLink> -->
         <HeaderLink href="/about">About</HeaderLink>
         <HeaderLink href="/resume">Resume</HeaderLink>
         <!-- <HeaderLink href="/blog">Blog</HeaderLink> -->

src/content.config.ts

@@ -27,6 +27,7 @@ const work = defineCollection({
     tags: z.array(z.string()),
     img: z.string(),
     img_alt: z.string().optional(),
+    order: z.number().optional(),
   }),
 });
 

src/content/work/borden.mdx src/content/archive/borden.mdxsrc/content/work/borden.mdx renamed to src/content/archive/borden.mdx

@@ -8,6 +8,7 @@ category: frontend
 tags:
   - Bootstrap
   - SCSS
+archive: true
 ---
 
 <ExternalLink href="https://davidlyons.bitbucket.io/borden-dairy/templates/index.html" />

src/content/work/bp-pulse.mdx

@@ -15,6 +15,7 @@ tags:
   - TypeScript
   - GraphQL
   - Storybook
+order: 2
 ---
 
 <ExternalLink href="https://www.bppulse.com" />

src/content/work/poi.mdx

@@ -13,6 +13,8 @@ tags:
   - Material UI
   - SCSS
   - Vite
+category: frontend
+order: 1
 ---
 
 <Iframe src="https://flowarts.xyz" aspect="retro" />

src/pages/index.astro

@@ -4,13 +4,21 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
 import PortfolioPreview from '@/components/PortfolioPreview.astro';
 import { SITE_DESCRIPTION } from '@/consts';
 
-const projects = (await getCollection('work'))
-  .filter((project) => project.data.category !== 'frontend')
-  .sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf());
+const projects = await getCollection('work');
+
+projects.sort((a, b) => {
+  // ascending by order
+  if (a.data.order || b.data.order) {
+    return (a.data.order || projects.length) - (b.data.order || projects.length);
+  }
+
+  // descending by published date
+  return b.data.pubDate.valueOf() - a.data.pubDate.valueOf();
+});
 ---
 
 <BaseLayout title={SITE_DESCRIPTION}>
-  <div class="grid grid-cols-2 gap-2.5 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
+  <div class="grid grid-cols-2 gap-2.5 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6">
     {projects.map((project) => <PortfolioPreview project={project} />)}
   </div>
 </BaseLayout>

src/pages/work/[...slug].astro

@@ -24,9 +24,17 @@ const { title, description, pubDate, tags } = entry.data;
 const { Content } = await render(entry);
 
 // Get all entries in current category for prev/next arrow navigation
-const projects = (await getCollection('work'))
-  .filter((project) => project.data.category === entry.data.category)
-  .sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf());
+const projects = await getCollection('work');
+
+projects.sort((a, b) => {
+  // ascending by order
+  if (a.data.order || b.data.order) {
+    return (a.data.order || projects.length) - (b.data.order || projects.length);
+  }
+
+  // descending by published date
+  return b.data.pubDate.valueOf() - a.data.pubDate.valueOf();
+});
 
 const currentIndex = projects.findIndex(({ id }) => id === entry.id);
 const prevEntry = projects[(currentIndex - 1 + projects.length) % projects.length];
@@ -44,7 +52,8 @@ const nextEntry = projects[(currentIndex + 1) % projects.length];
               <a
                 href={`/work/${prevEntry.id}`}
                 aria-label="Previous"
-                class="py-1 pr-3 pl-1 opacity-60 transition-opacity hover:opacity-100 dark:text-white"
+                class="py-1 pr-3 pl-1 opacity-60 transition-opacity hover:opacity-100
+                  dark:text-white"
               >
                 <Icon name="arrow-left" size={20} />
               </a>
@@ -78,7 +87,10 @@ const nextEntry = projects[(currentIndex + 1) % projects.length];
           {
             tags.map((tag) => (
               <li class="leading-none">
-                <span class="inline-flex items-center rounded-md px-2 py-1 text-xs font-medium dark:bg-gray-600 dark:text-white">
+                <span
+                  class="inline-flex items-center rounded-md px-2 py-1 text-xs font-medium
+                    dark:bg-gray-600 dark:text-white"
+                >
                   {iconMap[tag] && <Icon name={iconMap[tag]} size={16} class="me-2" />} {tag}
                 </span>
               </li>