Refactor collection consumers from deepDives to articles

Author: webstackdev

src/components/Breadcrumbs/index.astro

@@ -40,10 +40,6 @@ applyRenderSentryContext({
   },
 })
 
-function rewriteBreadcrumbHref(href: string): string {
-  return href === '/deep-dive' ? '/articles' : href
-}
-
 const breadcrumbSchema =
   site && breadcrumbs.length > 1
     ? JSON.stringify({
@@ -53,7 +49,7 @@ const breadcrumbSchema =
           '@type': 'ListItem',
           position: index + 1,
           name: item.label,
-          item: new URL(rewriteBreadcrumbHref(item.href), site).href,
+          item: new URL(item.href, site).href,
         })),
       })
     : null
@@ -76,7 +72,7 @@ const breadcrumbSchema =
                 </span>
               ) : (
                 <a
-                  href={rewriteBreadcrumbHref(item.href)}
+                  href={item.href}
                   class="rounded px-2 py-1 text-xs text-page-inverse no-underline transition-colors bg-page-base border border-page-inverse hover:bg-secondary hover:text-content-inverse focus-visible:text-content-inverse focus-visible:bg-secondary"
                 >
                   {item.label}

src/components/Carousel/@types/index.ts

@@ -8,7 +8,6 @@ export type CarouselNavigationMode = 'wrap' | 'bounded'
 export const collectionMap = {
   'case-studies': 'caseStudies',
   articles: 'articles',
-  'deep-dive': 'deepDives',
 } as const
 
 export type CollectionMap = typeof collectionMap

src/components/Layout/Print/Cover/index.astro

@@ -7,7 +7,7 @@ import Image from '@components/Image/index.astro'
 import coverImage from './cover.jpg'
 
 export interface Props {
-  article: CollectionEntry<'deepDives'>
+  article: CollectionEntry<'articles'>
 }
 
 const { article } = Astro.props

src/components/Pages/TagPage/index.astro

@@ -120,7 +120,7 @@ const path = buildTagPagePath(tag, currentPage)
               Tagged content
             </h2>
             {paginatedContent.map(item => {
-              const href = `/deep-dive/${item.id}`
+              const href = `/articles/${item.id}`
 
               return (
                 <article class="group h-full relative after:pointer-events-none after:absolute after:content-[''] after:inset-0 after:rounded-none after:border-2 after:border-transparent after:opacity-0 after:transition-opacity after:duration-150 after:ease-out focus-within:after:opacity-100 focus-within:after:-inset-1.5 focus-within:after:border-spotlight">
@@ -148,7 +148,7 @@ const path = buildTagPagePath(tag, currentPage)
                     <div class="p-6 space-y-4">
                       <div class="flex items-center gap-3 text-sm">
                         <span class="px-3 py-1 rounded-full text-white font-medium bg-primary">
-                          Deep Dive
+                          Article
                         </span>
                         <time datetime={item.data.publishDate.toISOString()}>
                           {item.data.publishDate.toLocaleDateString('en-US', {

src/components/Search/SearchResults/client/index.ts

@@ -17,7 +17,6 @@ const MIN_QUERY_LENGTH = 2
 const resultTypeLabels: Record<string, string> = {
   articles: 'Article',
   'case-studies': 'Case Study',
-  'deep-dive': 'Deep Dive',
   downloads: 'Download',
   newsletter: 'Newsletter',
   services: 'Service',

src/layouts/MarkdownLayout.astro

@@ -80,7 +80,6 @@ export interface Props {
   /** Raw Markdown content from "body" property on content collection */
   collectionItem:
     | CollectionEntry<'articles'>
-    | CollectionEntry<'deepDives'>
     | CollectionEntry<'services'>
     | CollectionEntry<'caseStudies'>
     | CollectionEntry<'downloads'>

src/pages/articles/index.astro

@@ -7,20 +7,20 @@ import PageLayout from '@layouts/PageLayout.astro'
 import Carousel from '@components/Carousel/index.astro'
 import Icon from '@components/Icon/index.astro'
 
-const allDeepDives = await getCollection('deepDives', ({ data }) => isDev() || data.isDraft !== true)
+const allArticles = await getCollection('articles', ({ data }) => isDev() || data.isDraft !== true)
 
 const allTags = await getCollection('tags')
 const featuredTags = allTags.filter(tag => tag.data.featured === true)
 
-const getDeepDivesForTag = (tagEntry: CollectionEntry<'tags'>) => {
-  return allDeepDives.filter(article => {
+const getArticlesForTag = (tagEntry: CollectionEntry<'tags'>) => {
+  return allArticles.filter(article => {
     return (article.data.tags as Array<{ id: string }>).some(tagRef => tagRef.id === tagEntry.id)
   })
 }
 
-const tagsWithContent = featuredTags.filter(tag => getDeepDivesForTag(tag).length > 0)
+const tagsWithContent = featuredTags.filter(tag => getArticlesForTag(tag).length > 0)
 
-const tagsWithNoContent = allTags.filter(tag => getDeepDivesForTag(tag).length === 0)
+const tagsWithNoContent = allTags.filter(tag => getArticlesForTag(tag).length === 0)
 
 for (const tag of tagsWithNoContent) {
   console.warn(
@@ -29,7 +29,7 @@ for (const tag of tagsWithNoContent) {
 }
 
 const pageTitle = 'Technical Index'
-const pageDescription = 'Browse technical deep dives structured by specific topics'
+const pageDescription = 'Browse technical articles structured by specific topics'
 const path = '/articles'
 ---
 
@@ -46,8 +46,8 @@ const path = '/articles'
           .sort((a, b) => a.data.displayName.localeCompare(b.data.displayName, 'en'))
           .map(tag => {
             const displayName = tag.data.displayName
-            const deepDivesForTag = getDeepDivesForTag(tag)
-            const latestDate = deepDivesForTag
+            const articlesForTag = getArticlesForTag(tag)
+            const latestDate = articlesForTag
               .map(a => a.data.publishDate)
               .sort((a, b) => b.getTime() - a.getTime())[0]
             const latestFormatted = latestDate
@@ -76,7 +76,7 @@ const path = '/articles'
                           {displayName}
                         </h2>
                         <span class="shrink-0 rounded-full bg-page-inverse px-2 py-0.5 sm:ml-1 text-xs font-medium text-page-base whitespace-nowrap transition-colors group-hover:bg-page-active group-hover:text-page-base">
-                          {deepDivesForTag.length} deep dives
+                          {articlesForTag.length} articles
                         </span>
                       </div>
                     </div>
@@ -96,9 +96,9 @@ const path = '/articles'
 
                 <Carousel
                   variant="suggested"
-                  limit={deepDivesForTag.length}
-                  type="deep-dive"
-                  items={deepDivesForTag}
+                  limit={articlesForTag.length}
+                  type="articles"
+                  items={articlesForTag}
                   showEmblaDots={false}
                   showReadMore={false}
                 />

src/pages/index.astro

@@ -125,7 +125,7 @@ const sectionClasses = 'container mx-auto px-4 sm:px-6 lg:px-8 py-4 md:py-8 lg:p
       titleHref="/articles"
       variant="suggested"
       limit={7}
-      type="deep-dive"
+      type="articles"
       showReadMore={true}
     />
   </section>

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

@@ -47,16 +47,16 @@ const PdfComponents = {
 }
 
 export interface Props {
-  article: CollectionEntry<'deepDives'>
+  article: CollectionEntry<'articles'>
 }
 
-/** Generate static paths for all deep-dive articles */
+/** Generate static paths for all articles */
 export async function getStaticPaths() {
   if (!isDev() && !GENERATE_PDFS) {
     return []
   }
 
-  const articleEntries = await getCollection('deepDives')
+  const articleEntries = await getCollection('articles')
 
   return articleEntries.map(article => ({
     params: { slug: article.id },

src/pages/rss.xml.ts

@@ -13,7 +13,7 @@ const toCategory = (tag: unknown) => {
 export async function GET() {
   const now = new Date()
   const articles = await getCollection(
-    'deepDives',
+    'articles',
     ({ data }) => !data.isDraft && data.publishDate <= now
   )
   const sortedArticles = articles.sort(
@@ -34,7 +34,7 @@ export async function GET() {
       title: article.data.title,
       pubDate: article.data.publishDate,
       description: article.data.description,
-      link: `/deep-dive/${article.id}`,
+      link: `/articles/${article.id}`,
       categories: (article.data.tags ?? [])
         .map(toCategory)
         .filter((category): category is string => Boolean(category)),